Pemrosesan Form (2): Aplikasi Login Sederhana ~ Dream's Zone

Pembuatan aplikasi login form sederhana tanpa menggunakan database merupakan dasar dari pembuatan aplikasi login form dengan menggunakan database, seperti My-SQL, Mic. Access, ataupun bisa juga menggunakan text editor untuk menyimpan apapun yang telah kita masukkan didalam input yang telah disediakan. Yang saya bahas kali ini merupakan dasar pemrograman web. Sebenarnya posting kali ini kelanjuttan dari postingan saya sebelumnya tepatnya klik disini.

Nah sekarang sekarang menginjak pada contoh berikutnya dari postingan yang sebelumnya yakni pemrosesan form untuk aplikasi Login Form Sederhana (tanpa database) dengan syarat sebagai berikut :

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.
Pada aplikasi ini username = wahyu, sedangkan password = ganteng ;

Tampilannya seperti yang tampak dibawah ini dengan posisi kursor pada User Name:

Tampilan jika gagal melakukan login:

Tampilan jika berhasil melakukan login:

Terdapat 4 macam source code yang saya pakai disini yaitu:

1. Source Code HTML

HTML yang saya pakai saya simpan dengan nama index.html, yaitu sebagai berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form Penjual Mimpi</title>
<link rel="stylesheet" href="wahcss.css" type="text/css" />
</head>
<body onLoad="document.form1.user.focus();">
<form name="form1" method="post" action="admin.php">
<div id="apDiv1">
<div id="header">
</div>
<div align="center">
<img src="sapi.png">
<br>
<br>
<div align="center"><strong><br>User Name :</strong>
<br>
<input type="text" name="user" size="40" value="" style="background-color:#00FF00">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="40" style="background-color:#00FF00">
<br>
<br>
<br>
<input type="submit" name="submit" value=" E N T E R " onClick="check()">
<br>
<span color="#0000FF" class="style3">©Copyright PENJUAL MIMPI</span><br>
<br>
</div>
</div>
<br>
<div align="center" id="apDiv3">

</div>
<div id="footer" align="center"><br>

</div>
</div>
</form>
</body>
</html>

2. Source Code Java script

Java script disini saya simpan dengan nama javascript, berikut code-nya:

function error1()
{
alert('Masukkan User Name dan Password Terlebih Dahulu ');
}

function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error1();
}
}
</script>

3. Source PHP

PHP disini saya beri nama admin.php dan berikut code-nya:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>Form Administrator</title>
</head>
<body>

<?php

if(($_POST['user']=='wahyu') AND ($_POST['pass']=='ganteng')) {

echo 'Berhasil, Anda Sudah Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];

echo '<br><br>Hallo, saudara / saudari ' . $_POST['user'];

}

else {

echo "<br><br><br><body text='red'><strong><center>Terdapat Kesalahan Pada Waktu Anda Login...!<br><br><a href='index.html'><h4>Kembali Ke Login</h4></a></center></strong></body>";

}

</body>

</html>

4. Code css

#apDiv1 {
position:absolute;
width:373px;
height:330px;
z-index:1;
left: 449px;
top: 136px;
background-color: #FFFFFF;
border: 2px solid Blue;
}
#apDiv3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 289px;
top: 274px;
}
.style3 {
font-size: 10px;
font-weight: bold;
}
#apDiv2 {
position:absolute;
width:412px;
height:115px;
z-index:2;
top: 0px;
left: 2px;
}
#header{
width:373px;
height:98px;
background-image: url();
}
#footer{
width:373px;
height:40px;
background-image: url();
}