Untuk dapat melakukan pengaturan suatu menu pada website, seseorang harus login dulu ke halaman admin, sehingga orang yang dapat mengakses pengaturan tersebut hanya yang mengetahui username dan password nya saja. Halaman login yang akan kita buat yaitu halaman yang akan menampilkan form login yang akan muncul pertama kali ketika kita membuka folder admin. Agar form login dapat terbuka hanya dengan menuliskan nama folder atau url nya saja.
<html>
<head>
<title>Login Administrator</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div id="container">
<h3>Login Administrator</h3>
<form method="POST" action="ceklogin.php">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" autofocus></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" value="Login"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
<head>
<title>Login Administrator</title>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div id="container">
<h3>Login Administrator</h3>
<form method="POST" action="ceklogin.php">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" autofocus></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" value="Login"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Ada beberapa script yang belum pernah dijelaskan sebelumnya yaitu atribut autofocus dan type="password". Atribut autofocus digunakan untuk membuat kursor langsung berada di kotak input yang memiliki atribut tersebut ketika halaman login di buka. Atribut type="password" digunakan untuk membuat kotak input berupa password, dimana ketika memasukan huruf pada kotak input tersebut yang muncul hanya simbol bintang.
Script login.css
body{
background: #000;
font: 12px arial;
}
#container{
width: 300px;
margin: 200px auto;
background: #172659;
border: 1px solid #fff;
color: #fff;
padding: 15px;
}
h3{
border-bottom: 1px dotted #fff;
padding: 5px 10px;
margin-top: 0;
margin-bottom: 20px;
}
td{
color: #fff;
padding: 5px 10px;
}
background: #000;
font: 12px arial;
}
#container{
width: 300px;
margin: 200px auto;
background: #172659;
border: 1px solid #fff;
color: #fff;
padding: 15px;
}
h3{
border-bottom: 1px dotted #fff;
padding: 5px 10px;
margin-top: 0;
margin-bottom: 20px;
}
td{
color: #fff;
padding: 5px 10px;
}
perhatikan script CSS. properti border digunakan untuk mengatur garis border suatu elemen. properti border pada script di atas merupakan gabungan dari properti - properti berikut :
- border-size, menunjukkan tebal borrder dengan satuan yang sering digunakan yaitu px.
- border-style, menunjukkan jenis border. pada skrip di atas, solid berati garis solid tanpa putus - putus, sedangkan dotted berati garis putus - putus.
- border-color, menunjukkan warna pada border.
- border-bottom, menunjukan posisi pada salah satu sisi