Tak dipungkiri keindahan dan tata letak kerangka website adalah salah satu daya tarik bagi visitor untuk mengunjungi website kita. Oleh sebab itulah pada tutorial kali ini kita akan belajar membuat halaman login.
Halaman yang akan kita buat kurang lebih seperti gambar pembuka diatas.Oke langsung saja kita akan memulai tutorial kali ini.
Pertama - tama kita akan membuat kerangkanya terlebih dahulu
<html>
<head>
<title>Contoh Form Login</title>
</head>
<body>
<div class="container">
<div class="badan">
<div class="kepala">
<p class="kepalatext">» Login «</p>
</div>
<form class="bingkai" action="login.php" method="POST">
<div>
<input class="email" type="email" name="email" id="email" placeholder="Masukkan Email"/>
<input class="passwd" type="password" name="password" id="password" placeholder="Masukkan Pasword"/>
</div>
<div class="bawah">
<input class="daftar" type="submit" name="submit" value="» Login «">
<p class="footertext">© 2016 <a href="http://dwifebriandaru.blogspot.com">Dwi Febriandaru Site</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<head>
<title>Contoh Form Login</title>
</head>
<body>
<div class="container">
<div class="badan">
<div class="kepala">
<p class="kepalatext">» Login «</p>
</div>
<form class="bingkai" action="login.php" method="POST">
<div>
<input class="email" type="email" name="email" id="email" placeholder="Masukkan Email"/>
<input class="passwd" type="password" name="password" id="password" placeholder="Masukkan Pasword"/>
</div>
<div class="bawah">
<input class="daftar" type="submit" name="submit" value="» Login «">
<p class="footertext">© 2016 <a href="http://dwifebriandaru.blogspot.com">Dwi Febriandaru Site</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Setelah dicopy kemudian simpan dengan nama index.html
buka index.html tersebut dengan browser sobat, maka hasilnya kurang lebih seperti ini.
m
 |
| Dwi Febriandaru Site © 2016 |
Sangat jelek dan berantakan bukan ?, Oleh sebab itulah kita akan menambahkan sedikit css pada kode diatas. Silahkan sobat copy Kode CSS berikut ini.
.container{
margin-top: 130px;
margin-left: 500px;
}
.bingkai{
border: 5px solid #3498db;
width: 440px;
height: 300px;
}
body{
background-color: #bdc3c7;
}
.kepala{
width: 450px;
height: 50px;
background-color: #3498db;
border-radius: 3px 3px 0 0;
}
.kepalatext{
color: #ffffff;
text-align: center;
font-size: 18pt;
font-family: Century;
padding-top: 12px;
}
.kepalatext:hover{
color: #e74c3c;
}
.badan{
width: 450px;
height: 360px;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 6px 6px 0 0 #ffffff;
}
.email{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 65px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.passwd{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.daftar{
background-color: #ffffff;
color: #3498db;
margin-top: 1px;
margin-left: 15px;
width: 415px;
height: 40px;
border: 2px solid #3498db;
border-radius: 5px;
font-family: Century;
font-size: 13pt;
}
.daftar:hover{
background-color: #e74c3c;
color: #ffffff;
}
.bawah{
margin-top: 80px;
width: 440px;
height: 80px;
background-color: #3498db;
border-radius: 0 0 3px 3px;
}
.footertext{
margin-top: 5px;
text-align: center;
font-family: Century;
font-size: 12pt;
color: #ffffff;
}
.footertext>a{
color: #fefefe;
}
.footertext>a:hover{
color: #0e0e0e;
}
margin-top: 130px;
margin-left: 500px;
}
.bingkai{
border: 5px solid #3498db;
width: 440px;
height: 300px;
}
body{
background-color: #bdc3c7;
}
.kepala{
width: 450px;
height: 50px;
background-color: #3498db;
border-radius: 3px 3px 0 0;
}
.kepalatext{
color: #ffffff;
text-align: center;
font-size: 18pt;
font-family: Century;
padding-top: 12px;
}
.kepalatext:hover{
color: #e74c3c;
}
.badan{
width: 450px;
height: 360px;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 6px 6px 0 0 #ffffff;
}
.email{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 65px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.passwd{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.daftar{
background-color: #ffffff;
color: #3498db;
margin-top: 1px;
margin-left: 15px;
width: 415px;
height: 40px;
border: 2px solid #3498db;
border-radius: 5px;
font-family: Century;
font-size: 13pt;
}
.daftar:hover{
background-color: #e74c3c;
color: #ffffff;
}
.bawah{
margin-top: 80px;
width: 440px;
height: 80px;
background-color: #3498db;
border-radius: 0 0 3px 3px;
}
.footertext{
margin-top: 5px;
text-align: center;
font-family: Century;
font-size: 12pt;
color: #ffffff;
}
.footertext>a{
color: #fefefe;
}
.footertext>a:hover{
color: #0e0e0e;
}
Setelah kode CSS tersebut sobat copy, lalu simpan dengan nama main.css. dan tambahkan baris <link href="main.css" rel="stylesheet" type="text/css"/> pada dokumen index.html kemudian simpan dan coba test dengan browser sobat. Bila tidak ada kesalahan, maka hasilnya adalah seperti ini.
jangan lupa next post kita akan membahas tentang Membuat Login Dengan Session di PHP & MySQLi.
Mohon maaf apabila ada salah kata. Atas perhatiannya saya ucapkan terima kasih.
Wassalamu'alaikum Wr.Wb
0 $type={blogger}:
Post a Comment