Kerja pintar: Cara membuat tampilan yang mirip facebook menggunakan HTML, PHP, dan CSS.

Cara Membuat tampilan fecabook dangan HTML, PHP, dan CSS.

Hal Pertama dalam membuat tampilan facebook kita harus menyiapkan nama file:

1. Faceboo.php

2. proses.php

3. style1.css

4. face.png

5. kontendaftar.jpg

Nama file : kontendaftar.jpg

Nama file : face.png

Kemudian sekarang kita mulai membuat tampilan seperti facebook yang sering kita gunakan.

Nama file : “Facebook.php”

Deskripsi : Program untuk membuat tampilan facebook dengan beberapa form yang digunakan.

<html>

<head>

<title> Facebook.com </title>

<body>

</div>

<tr>

<td><label id="masuk">Nomor atau email:</label></td>

<td><label id ="masuk">Password:</label></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</form>

<tr>

<td><h1>Daftar</h1></td>

</tr>

<tr>

<td><label> Gratis, Sampai Kapan Pun.</label></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Tanggal Lahir</td>

</tr>

</table>

<tr>

<td>

<option value = ""> Tanggal</option>

</select>

<option value = ""> Bulan </option>

<option value = "Bulan"> Januari </option><option value = "Bulan"> Febuari </option><option value = "Bulan"> Maret </option>

<option value = "Bulan"> April </option><option value = "Bulan"> Mei </option><option value = "Bulan"> Juni </option>

<option value = "Bulan"> Juli </option><option value = "Bulan"> Agustus </option><option value = "Bulan"> September</option>

<option value = "Bulan"> Oktober </option><option value = "Bulan"> November </option><option value = "Bulan"> Desember </option>

</select>

<option value = ""> Tahun </option>

</select>

</td>

<td><label id ="saya">mengapa saya harus<br> memberikan tanggal<br> lahir saya ?</label></td>

</tr>

<tr>

<label>Perempuan</label>

</tr>

<tr>

<td><label id="komen">Dengan mengetik Buat akun, Anda harus menyetujui ketentuan kami<br>

dan bahwa Anda telah membaca kebijakan Data kami, termasuk<br>

Penggunaan Kuki</label></td>

</tr>

<tr>

</tr>

</form>

</table>

</div>

</body>

</html>

Nama file : “style.css”

Deskripsi : Program style untuk mengatur warna, posisi, dan lain.

#atas{

background: url(.png);

border:1px dashed transparent;

padding: 5px;

color: snow;

background-color:darkblue;

}

#masuk ,a{

color:floralwhite;

margin-right: 100px;

font-size: 12px;

}

#komen{

font-size: 12px;

color : darkslategrey;

}

#saya{

font-size: 12px;

color:blue;

}

#inputan{

width: 420px;

padding:10px;

font-size:16px;

border-radius:5px;

}

#nama {

width: 195px;

padding:10px;

font-size:16px;

border-radius:5px;

margin-right: 25px;

}

#tombol {

width:200px;

background-color:green;

color:#fff;

border:2px solid white;

padding:4px;

font-size:15px;

cursor:pointer;

border-radius:5px;

margin-bottom:15px;

}

#tombol:hover {

background-color:limegreen;

cursor: pointer;

}

#samping{

background: url("kontendaftar.jpg");

}

input[type=submit]{

background: darkblue;

color:white;

}

input[type=submit]:hover{

background: royalblue

}

select{

width: 100px;

padding: 5px;

}

#tengah{

margin-right: 10px;

}

Nama file : “proses.php”

Dekripsi : Penanganan untuk eksekusi masuk facebook dengan email : rizal dan password : 123.

<?php

if (isset($_POST['submit'])) {

$user=$_POST['username'];

$pass=$_POST['password'];

if ($user =="rizal" && $pass == "123"){

echo"<h2> Login Berhasil... Selamat Datang di fecabook Rizal.</h2>";

}else{

echo "<h2> Login gagal... masukkan username dan password dengan benar </h2>";

}

File gambar: “face.png”

Deskripsi : gambar untuk tambahan tampilan facebook.

tampilan yang sudah jadi

tampilan masuk berhasil

tampilan masuk yang gagal.

Sekian dari penjelasan yang saya posting, saya mohon maaf bila apa yang saya buat ini tidak semirip asli tampilan facebook dan mohon maaf bila ada kesalahan pada tulisan.

Terima Kasih atas kunjungannya. Assalamu’alaikum wr.wb.

Kerja pintar

About Me

Friday, November 18, 2016

Cara membuat tampilan yang mirip facebook menggunakan HTML, PHP, dan CSS.

21 comments: