Aplikasi form login sudah banyak kita jumpai dalam berbagai web. Form login ini memiliki fungsi sebagai identifier atau yang mengidentifikasi user atau admin yang akan menggunakan layanan web tersebut. Pembuatan aplikasi ini tanpa menggunakan database dimaksudkan hanya membuat dasar atau tampilannya saja. Tetapi, ini bisa dihubungkan dengan berbagai database, seperti My SQL, Ms.Access, maupun hanya sebuah text editor.
Sekarang kita menganjak ke proses pembuatannya. Aturan-aturan yang ditetapkan adalah sebagai berikut:
-->Buat aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password. Gunakan variabel di PHP untuk mensimulasikan verifikasi data yang dimasukkan.
-->Spesifikasi:
*Terdapat scripting JavaScript untuk validasi awal (field tidak boleh
kosong, masukan id dan password harus huruf).
*Jika field kosong dan langsung di-submit, kembalikan fokus kursor ke
field pertama (id)
*Ada validasi sisi server (dari PHP) untuk memastikan bahwa nilai
field adalah string.
*Jika nilai id dan password sesuai dengan pre-defined value di variabel,
munculkan pesan selamat datang dan cetak nilai id. Sebaliknya, jika tidak sesuai, tampilkan pesan kegagalan. Set username-nya yaitu endrakilla dan password-nya 1234.
Tampilan aplikasinya seperti di bawah ini:
Dalam scripting, kita menggunakan penggabungan antara html, php, dan layanan CSS. Penggunaannya seperti materi-materi yang sudah saya bahas sebelumnya. Silakan walking-walking di blog saya.. :-)
Tahap 1, simpan file berikut dengan nama form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body onLoad="document.form1.user.focus()">
<form name="form1" method="post" action="myform.php">
<div id="apDiv1">
<div id="header">
</div>
<div align="center" height="50"><strong><br>Username :</strong>
<br>
<input type="text" name="user" size="40" value="" style="background-color:#a4a4a7">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="40" style="background-color:#a4a4a7">
<br/>
<br/>
<input type="submit" name="submit" value=" S U B M I T " onClick="admin()">
<br>
<br>
</div>
</div>
<br>
<div align="center" id="apDiv3">
</div>
<div id="footer" align="center"><br>
<span class="style3">©Copyright --> Killa </span><br>
</div>
</div>
</form>
</body>
</html>
Tahap 2, simpan file berikut dengan nama myform.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='endrakilla') AND ($_POST['pass']=='1234')) {
echo 'Selamat, Anda Telah Berhasil Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
echo '<br><br>Selamat menikmati.... ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Terdapat Kesalahan Pada saat Anda Login...!<br><br><a href='form.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";
}
?>
</body>
</html>
Tahap 3, simpan file berikut dengan nama style.css
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='endrakilla') AND ($_POST['pass']=='1234')) {
echo 'Selamat, Anda Telah Berhasil Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
echo '<br><br>Selamat menikmati.... ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Terdapat Kesalahan Pada saat Anda Login...!<br><br><a href='form.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";
}
?>
</body>
</html>
Untuk menjalankannya, klik file html atau bisa dijalankan melalui server. Untuk gambar back, bisa didownload di sini.
Sekian dulu pertemuan kali ini, semoga dapat bermanfaat. :-)
Said
tutorialnya salah bro.. masak kode css kok di isi kode php.. mohon di revisi bro agar yg mo blajar bisa memahami
Said
sualah total
Said
Neh ada yang lengkap mengenai form login tanpa database. Password bisa diganti. Ada live demo.
Visit:
http://www.djsamm88.web.id/membuat-fasilitas-login-tanpa-database.html