Mungkin masih terlalu sederhana untuk anda pahami sebagai peranan sistem login autentifikasi hak akses. Oleh karena itu, pada dalam sebuah sistem dimana yang mensyaratkan user untuk login terlebih dahulu agar bisa masuk dan dapat mengakses user untuk login terlebih dahulu agar bisa mengakses data yang ada di dalamnya.
Selain itu hal yang dibutuhkan untuk melakukan pengkodean script html adalah cukup dengan menggunakan text editor. Baik yang sangat sederhana notepad atau bahkan software text editor yang khusus dibuat untuk keperluan coding blueFish, ultraEdit, Notepad2, Komodoedit, Notepad++, Sublime text dan lain sebagainya.
Akan tetapi alangkah baiknya anda menggunakan software yang bersifat free dan software rekomendasi ini fitur-fiturnya cukup handal,yaitu mampu mengenali berbagai script bahasa pemograman
Kode merupakan script yang berisi untuk membuat form login yang terdiri dari textfield username dan password.
Digunakan untuk memasukan nama username dan password,ataupun menyuruh user untuk login terlebih dahulu sebeum masuk ke sistem utama, dimana variable digunakan untuk memberi value untuk menampilkan element.
Listing Program Source Code
<html>
<head>
<tiitle></tiitle>
</head>
<body>
<form method="POST" name="formlogin" action="login">
<table border="0" cellspacing="0" width="400" cellpadding="5" align="center">
<tr>
<td colspan="2" class="header">Login Masuk</td>
</tr>
<tr>
<td class="caption">username</td>
<td><input type="text name ="id_user" size="30" class="textlogin" /></td>
</tr>
<td class="caption">pasword</td>
<td><input type="password" name="sandi"size="30" class="textlogin" /></td>
</tr>
<tr bgcolor="#E9E9E9">
<td></td>
<td><input type="submit" name="submit"
value="Login"/></td>
</tr>
</table>
</form>
<div id="failed" style="display:<?php echo $view; ?>">
</div>
<div id="notlogin" style="display:<?php echo $view2; ?>">
</div>
</body>
</html>
Agar tampilan lebih menarik di tambahkan atau disisipkan CSS kedalam listing program source code
<style type ="text/css">
header {
font-family:arial;
font-weight:bold;
color:606060;
border-bottom:solid 1px #bbbbbb;
padding-bottim:10px;
}
caption {
font-family:arial;
font-size:12px;
font-weight:bold;
}
#failed, #notlogin{
width:50%;
padding:5px;
font-family:arial;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
background-color:#FF0000;
border:solid 1px #AA0000;
text-align:center;
margin:auto;
textlogin{
border:solid 1px #bbbbbb
padding:5px;
background-color:#EFEFEF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
textlogin:focus{
background-color:#FFFFFF;
}
</style>
