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>
<link
href="style1.css" rel="stylesheet"
type="text/css"></head>
<body>
<form
action ="proses.php" method="POST"
name="input">
<div
id="atas" align="right">
<div
align="left">
<img
src ="face.png" >
</div>
<table
border="0">
<tr>
<td><label id="masuk">Nomor
atau email:</label></td>
<td><label id ="masuk">Password:</label></td>
</tr>
<tr>
<td><input
id="name" name="username" placeholder="nomor atau
email" type="text" required></td>
<td><input
id="pass" name="password"
placeholder="password" type="password"
required></td>
<td><input
name="submit" type="submit" value=" Masuk
"></td>
</tr>
<tr>
<td></td>
<td><a
href=""style ="text-decoration:none">Lupa akun?</a></td>
</tr>
</table>
</div>
</form>
<form
action="" Method ="POST" name="input">
<div
id="samping" align="right">
<table
border="0">
<tr>
<td><h1>Daftar</h1></td>
</tr>
<tr>
<td><label> Gratis,
Sampai Kapan Pun.</label></td>
</tr>
<tr>
<td><input
id="nama" name="depan" placeholder="Nama depan"
type="text" required>
<input id="nama"
name="belakang" placeholder="Nama belakang"
type="text" required></td>
</tr>
<tr>
<td><input
id="inputan" name="email" placeholder="Masukkan
nomor seluler atau email" type="text" required></td>
</tr>
<tr>
<td><input
id="inputan" name="email" placeholder="Masukkan
ulang nomor seluler" type="text" required></td>
</tr>
<tr>
<td><input
id="inputan" name="email" placeholder="Kata sandi
baru" type="password" required></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
</tr>
</table>
<table
id ="tengah">
<tr>
<td>
<select name ="Tanggal">
<option
value = ""> Tanggal</option>
<option
value = "Tanggal"> 1 </option><option value =
"Tanggal"> 2 </option>
<option
value = "Tanggal"> 3 </option><option value =
"Tanggal"> 4 </option><option value =
"Tanggal"> 5 </option>
<option
value = "Tanggal"> 6 </option><option value =
"Tanggal"> 7 </option><option value =
"Tanggal"> 8 </option>
<option
value = "Tanggal"> 9 </option><option value =
"Tanggal"> 10 </option><option value =
"Tanggal"> 11 </option>
<option
value = "Tanggal"> 12 </option><option value =
"Tanggal"> 13 </option><option value =
"Tanggal"> 14 </option>
<option
value = "Tanggal"> 15 </option><option value =
"Tanggal"> 16 </option><option value =
"Tanggal"> 17 </option>
<option
value = "Tanggal"> 18 </option><option value =
"Tanggal"> 19 </option><option value =
"Tanggal"> 20 </option>
<option
value = "Tanggal"> 21 </option><option value =
"Tanggal"> 22 </option><option value =
"Tanggal"> 23 </option>
<option
value = "Tanggal"> 24 </option><option value =
"Tanggal">25 </option><option value = "Tanggal">
26 </option>
<option
value = "Tanggal"> 27 </option><option value =
"Tanggal"> 28 </option><option value =
"Tanggal"> 29 </option>
<option
value = "Tanggal"> 30 </option><option value =
"Tanggal"> 31 </option>
</select>
<select
name ="Bulan">
<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>
<select
name ="Tahun">
<option
value = ""> Tahun </option>
<option
value = "Tahun"> 1987 </option><option value =
"Tahun"> 1988 </option><option value =
"Tahun"> 1989</option>
<option
value = "Tahun"> 1990 </option><option value =
"Tahun"> 1991 </option><option value =
"Tahun"> 1992 </option>
<option
value = "Tahun"> 1993 </option><option value =
"Tahun"> 1994 </option><option value =
"Tahun"> 1995 </option>
<option
value = "Tahun">1996</option><option value =
"Tahun"> 1997 </option><option value =
"Tahun"> 1998 </option>
<option
value = "Tahun"> 1999 </option><option value =
"Tahun"> 2000 </option><option value =
"Tahun"> 2001 </option>
<option
value = "Tahun"> 2002 </option><option value =
"Tahun"> 2003 </option><option value =
"Tahun"> 2004 </option>
<option
value = "Tahun"> 2005 </option><option value =
"Tahun"> 2006 </option><option value =
"Tahun"> 2008 </option>
<option
value = "Tahun"> 2009 </option><option value =
"Tahun"> 2010 </option><option value =
"Tahun"> 2011 </option>
<option
value = "Tahun"> 2012 </option><option value =
"Tahun"> 2013 </option><option value =
"Tahun"> 2014 </option>
<option
value = "Tahun"> 2015 </option><option value =
"Tahun"> 2016 </option><option value =
"Tahun"> 2017 </option>
<option
value = "Tahun"> 1018 </option><option value =
"Tahun"> 2019 </option><option value =
"Tahun"> 2030 </option>
</select>
</td>
<td><label
id ="saya">mengapa saya harus<br> memberikan
tanggal<br> lahir saya ?</label></td>
</tr>
<tr>
<td><input
id ="perempuan" name ="perempuan" value
="perempuan" type = "radio" >
<label>Perempuan</label>
<input
id ="pria" name ="pria" value ="pria" type =
"radio" >
<label>Pria</label></td>
</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>
<td>
<input id="tombol"
name="submit" type="submit" value=" Buat Akun
"></td>
</tr>
</form>
</table>
</div>
</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.
