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 = dwipriyatmoko, sedangkan password = rahasia ;
Tampilannya seperti yang tampak dibawah ini dengan posisi kursor pada User Name:
Untuk validator menunjukkan warning, dikarenakan adanya code "autocomplite", saya sengaja memberikan code tersebut, dikarenakan ketentuan pembuatan
Nah sekarang kita langsung saja membahas, dan mengerjakan dengan kode-kode berikut ini :
** Ini merupakan kode dasar dari pembuatan aplikasi login form, simpan file ini dengan nama cobatugaslogin.php:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login Form by_Dwipriyatmoko</title>
</head>
<body onLoad="document.form1.user.focus();">
<form name="form1" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onsubmit="return check(this)">
<div id="apDiv1">
<div id="header">
<br>
</div>
<div>
<div align="center"><strong><br>User Name :</strong>
<br>
<input type="text" name="user" size="35" value="" title="Input berupa harus huruf" autocomplete="off" onKeyPress="return Huruf(event)">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="35" title="Input berupa harus huruf" autocomplete="off" onKeyPress="return Huruf(event)">
<br>
<br>
</div>
</div>
<br>
<div id="apDiv3">
<input type="submit" name="submit" value=" E N T E R " >
</div>
<div id="footer" align="left"><br>
<span class="style3">©Copy Right By_Dwipriyatmoko</span><br>
</div>
</div>
</form>
</body>
</html>
** Sebagai tambahan untuk kode java script yang berfungsi sebagai fungsi untuk mengeluarkan peringatan jika input username ataupun password tidak diisi, dan peringatan jika anda menginputkan selain huruf. taruh kode ini pada kode diatas :<script type="text/javascript">
// Fungsi check digunakan untuk mengecheck kosong atau tidaknya inputtan username dan password
function check()
{
if(form1.user.value == "")
{
alert('Masukkan User Name Terlebih Dahulu ');
document.form1.user.focus();
return false;
}
else if(form1.pass.value=="")
{
alert('Masukkan Password Terlebih Dahulu ');
document.form1.pass.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>
=> Nah jika anda belum mengisikan Username dan Password akan muncul peringatan seperti pada gambar dibawah :
Pada aplikasi ini saya urutkan dalam pengisian input, yakni pembacaan Username terlebih dahulu kemudian pembacaan password, jika username anda inputkan, dan password tidak anda inputkan akan tampil peringatan seperti gambar dibawah :
Secara otomatis kursor akan menuju text field yang belum anda isi. Dan jika anda menginputkan berupa Angka ataupun kode-kode lain selain huruf pada saat menekan akan otomatis muncul peringatan seperti pada gambar dibawah :
Itulah fungsi dari code java script yang tertulis diatas.** Selanjutnya merupakan code css yang saya gunakan sebagi style div maupun font, dan gambar, gabungkan kode css ini ke dalam kode html diatas :<style type="text/css">
#apDiv1 {
position:absolute;
width:373px;
height:330px;
z-index:1;
left: 441px;
top: 62px;
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(headerlogin.JPG);
}
#footer{
width:373px;
height:40px;
background-image: url(footer.JPG);
}
body {
background-color: #99CCCC;
}
#apDiv4 {
position:absolute;
width:409px;
height:221px;
z-index:2;
left: 426px;
top: 411px;
}
</style>
** Nah sekarang kita masuk kedalam pengkodean PHP, yang di gunakan untuk mengecheck nilai dari input yang telah dimasukkan, letakkan kode ini jadi satu dengan kode diatas. Aturan peletakkan tepat dibawah kode </form> :<div id="apDiv4">
<?php
// digunakan untuk pengecheckkan apakah isi dari inputan user dan password berupa string dan apakah sudah benar atau tidak
if(is_string($_POST['user']) AND ($_POST['pass']))
{
if (($_POST['user']=='dwipriyatmoko')AND($_POST['pass']=='rahasia'))
{
echo 'Sukses, Anda Telah Masuk Halaman Administrator Dengan User Name :'.$_POST['user'];
echo '<br>Hallo, Mr/Mrs ' . $_POST['user'];
}
else
{
echo "<script>alert ('Username atau Password Anda Kemungkinan Salah, Silahkan Mencoba Kembali...!!');</script>";
}
}
?>
</div>
=> Pada kode php ini telah dijelaskan fungsinya, dan jika masukan anda bernilai benar dengan variabel yang tertulis pada code php tampilan aplikasi akan muncul seperti gambar dibawah :
Dan jika masukan yang anda ketikkan bernilai salah atau tidak sama dengan nilai variabel, akn muncul peringatan seperti pada gambar dibawah :Setelah anda tekan OK, secara otomatis kursor akan aktif di text field yang sudah kosong, dan diharapkan anda mengisikan kembali.** Nah untuk pembahasan kali ini cukup sekian, jika ada kesalahan, atau saran dari pembaca, saya harap untuk menuliskan didalam komentar. Terimakasih semoga bermanfaatNB : Untuk elemen-lemen pendukung (Gambar) aplikasi ini dapat di download disini, dan file-file yang telah dibuat dengan kode diatas tadi jadikan didalam satu folder ini. Kemudian jalankan.
