Tutorial ini menunjukkan cara membuat halaman login dengan basis data HTML. Sebenernya untuk dapat membuat Halaman Login yang utuh ada beberapa tahap yaitu : Membuat File koneksi ke database , Halaman Login , Proses login , dan Halaman Utama .
Selain itu kita harus menambahkan data terlebih dahulu kedalam Database. Dalam blog ini saya akan memberi contoh sekaligus filenya serta menjelaskan fungsi tag yg mungkin blm familiar agar dapat menjadi referensi bagi anda yang ingin memperlajari lebih lanjut seputar program berbasis web.
Oke kita mulai.. This is the time of practice..
Anda buat folder bernama belajar lalu buat File dengan nama
formlogin.html
File " formlogin.html " berfungsi agar user meng-input username dan password pada kolom yang sudah tertera... Untuk isi dalam file " formlogin.html " dapat anda copy code yang terdapat di kolom berikut...
<!DOCTYPE html>
<head>
<title>Main Purpose</title>
<link rel="shortcut icon" href="logo/mp.png"/> <!--- Ini adalah bagian Favicon --->
<link href="form.css" type="text/css" rel="stylesheet" /> <!--- Ini bagian Exs CSS --->
</head>
<body>
<div id="form">
<div class="isi">
<p>LOGIN PAGE !!!</p>
<table border="0">
<tr>
<form action="proses.php">
<td>Username</td>
<td style="width:10px;">:</td>
<td>
<input type="text" name="username" placeholder="Username" required="required" /></td>
</tr>
<tr>
<td>Password</td>
<td style="width:10px;">:</td>
<td><input type="password" name="password" placeholder="*******" required="required" /></td>
</tr>
<tr>
<td colspan="2">
<input class="login" type="submit" name="login" value="Login" />
</form>
</td>
<td><form action="daftar.php">
<input class="login" type="submit" name="daftar" value="Daftar" />
</form>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Nah syntax di atas silahkan anda pastekan...
Pada syntax tersebut terdapat Atribut Required ? Atribut Required berfungsi Agar Kolom yang terdapat pada halaman tersebut tidak di perbolehkan blank / kosong. Perhatikan Screenshoot berikut.
Pada Screenshoot berikut saya biarkan inputan dalam kolom tersebut blank / kosong dan pada saat saya klik Login Terdapat notifikasi Seperti pada gambar.
Berikut tampilan saat belum memasukan kode CSS .. Untuk Syntax CSS Akan saya posting pada halaman berikutnya Syntax CSS Form Login .
View Next Post "Create File Config [Part 2]"
Semoga bermanfaat 😃
Sekian dan terimakasih. 😊
Tags
Tutorial