Kali ini kita akan belajar membuat aplikasi Login Form Sederhana tanpa dilengkapi database, jadi untuk usename dan passwordnya sudah ditentukan. Form Login merupakan salah satu bentuk dari pemrosesan form (form processing) yaitu merupakan operasi mendasar pada aplikasi web. Dalam konteks pengembangan aplikasi web dinamis, langkah ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukkan dari user, tentu diperlukan sekali form isian dan cara pemrosesannya. begitu pula halnya ketika administrator ingin masuk ke sistem, tentu memerlukan suatu antarmuka penghubung. Keberadaan form dan pemrosesannya mutlak diperlukan dalam membangun aplikasi web yang atraktif. Hasil dari aplikasi Login Form sederhana dapat dilihat pada gambar di bawah ini, form di bawah memiliki spesifikasi sebagai berikut:
cara untuk membuat aplikasi seperti di atas yaitu:
1. membuat code nya seperti di bawah ini, kemudian simpan dengan nama "coba.php"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form sederhana</title>
<script type="text/javascript">
// Fungsi check digunakan untuk mengecheck kosong atau tidaknya inputtan username dan password
function check()
{
if(formLogin.username.value == "")
{
alert('Please Insert User Name First');
document.formLogin.username.focus();
return false;
}
else if(formLogin.password.value=="")
{
alert('Please Insert The Password');
document.formLogin.password.focus();
return false;
}
return true;
}
// Fungsi Huruf digunakan untuk mengecheck penggunaan selain huruf tidak diperbolehkan
function Huruf(evt)
{
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if ((charCode > 31 && charCode < 65) || (charCode > 90 && charCode < 97) || charCode > 122) {
alert('Masukkan User Name dan Password Harus Berupa Huruf ');
return false;
}
return true;
}
</script>
<style type="text/css">
#Kotak1 {
position:absolute;
width:358px;
height:330px;
z-index:1;
left: 159px;
top: 31px;
background-color: #FFFFFF;
border: 2px solid Blue;
}
#Kotak3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 151px;
top: 267px;
}
#Kotak2 {
position:absolute;
width:300px;
height:115px;
z-index:2;
top: 107px;
left: 50px;
}
#header{
width:358px;
height:79px;
background-image: url(header.JPG);
}
#body{
width:358px;
height:250px;
background-image: url(body.JPG);
}
#Kotak4 {
position:absolute;
width:409px;
height:221px;
z-index:2;
left: 159px;
top: 374px;
}
body {
background-image: url(Peace.jpg);
}
</style>
</head>
<body onLoad="document.formLogin.username.focus();">
<form name="formLogin" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onSubmit="return check(this)">
<div id="Kotak1">
<div id="header">
</div>
<div id="body">
<div id="Kotak2">
<div align="left"><strong><br>User Name :</strong>
<br>
<input type="text" name="username" size="35" value="" title="input harus berupa huruf" style="background-color:#B0E0E6" autocomplete="off" onKeyUp="return Huruf(event)">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="password" size="35" title= "input harus berupa huruf" style="background-color:#B0E0E6" autocomplete="off" onKeyUp="return Huruf(event)">
<br>
<br>
</div>
</div>
<br>
<div id="Kotak3">
<input type="submit" name="submit" value=" L O G I N ">
</div>
</div>
</div>
</form>
<div id="Kotak4">
<?php
// digunakan untuk pengecheckkan apakah isi dari inputan user dan password berupa string dan apakah sudah benar atau tidak
if(is_string($_POST['username']) AND ($_POST['password']))
{
if (($_POST['username']=='nikmahfaadlilah')AND($_POST['password']=='nikmahfaa'))
{
echo 'Congratulation, you have signing in as :'.$_POST['username'];
echo '<br>Wellcome, Mr/Mrs ' . $_POST['username'];
}
else
{
echo "<script>alert ('Username or Your Password Maybe Wrong, Please Try Again...!!');</script>";
}
}
?>
</div>
</body>
</html>
2. download gambar yang dibutuhkan di sini
simpan dalam satu folder dan jalankan. selamat mencoba...
Baca Selengkapnya....
- 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 = nikmahfaadlilah, sedangkan password = nikmahfaa
cara untuk membuat aplikasi seperti di atas yaitu:
1. membuat code nya seperti di bawah ini, kemudian simpan dengan nama "coba.php"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form sederhana</title>
<script type="text/javascript">
// Fungsi check digunakan untuk mengecheck kosong atau tidaknya inputtan username dan password
function check()
{
if(formLogin.username.value == "")
{
alert('Please Insert User Name First');
document.formLogin.username.focus();
return false;
}
else if(formLogin.password.value=="")
{
alert('Please Insert The Password');
document.formLogin.password.focus();
return false;
}
return true;
}
// Fungsi Huruf digunakan untuk mengecheck penggunaan selain huruf tidak diperbolehkan
function Huruf(evt)
{
evt = (evt) ? evt : window.event
var charCode = (evt.which) ? evt.which : evt.keyCode
if ((charCode > 31 && charCode < 65) || (charCode > 90 && charCode < 97) || charCode > 122) {
alert('Masukkan User Name dan Password Harus Berupa Huruf ');
return false;
}
return true;
}
</script>
<style type="text/css">
#Kotak1 {
position:absolute;
width:358px;
height:330px;
z-index:1;
left: 159px;
top: 31px;
background-color: #FFFFFF;
border: 2px solid Blue;
}
#Kotak3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 151px;
top: 267px;
}
#Kotak2 {
position:absolute;
width:300px;
height:115px;
z-index:2;
top: 107px;
left: 50px;
}
#header{
width:358px;
height:79px;
background-image: url(header.JPG);
}
#body{
width:358px;
height:250px;
background-image: url(body.JPG);
}
#Kotak4 {
position:absolute;
width:409px;
height:221px;
z-index:2;
left: 159px;
top: 374px;
}
body {
background-image: url(Peace.jpg);
}
</style>
</head>
<body onLoad="document.formLogin.username.focus();">
<form name="formLogin" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onSubmit="return check(this)">
<div id="Kotak1">
<div id="header">
</div>
<div id="body">
<div id="Kotak2">
<div align="left"><strong><br>User Name :</strong>
<br>
<input type="text" name="username" size="35" value="" title="input harus berupa huruf" style="background-color:#B0E0E6" autocomplete="off" onKeyUp="return Huruf(event)">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="password" size="35" title= "input harus berupa huruf" style="background-color:#B0E0E6" autocomplete="off" onKeyUp="return Huruf(event)">
<br>
<br>
</div>
</div>
<br>
<div id="Kotak3">
<input type="submit" name="submit" value=" L O G I N ">
</div>
</div>
</div>
</form>
<div id="Kotak4">
<?php
// digunakan untuk pengecheckkan apakah isi dari inputan user dan password berupa string dan apakah sudah benar atau tidak
if(is_string($_POST['username']) AND ($_POST['password']))
{
if (($_POST['username']=='nikmahfaadlilah')AND($_POST['password']=='nikmahfaa'))
{
echo 'Congratulation, you have signing in as :'.$_POST['username'];
echo '<br>Wellcome, Mr/Mrs ' . $_POST['username'];
}
else
{
echo "<script>alert ('Username or Your Password Maybe Wrong, Please Try Again...!!');</script>";
}
}
?>
</div>
</body>
</html>
2. download gambar yang dibutuhkan di sini
simpan dalam satu folder dan jalankan. selamat mencoba...
