RSS

Membuat Login Form sederhana

01 Apr

Pemrosesan  form  (form  processing)  merupakan  operasi  mendasar  pada  aplikasi  web.  Dalam  konteks  pengembangan  aplikasi  web  dinamis,  langkah  ini pasti akan dilakukan. Sebagai contoh, untuk menerima masukan dari user, tentu  diperlukan  sekali  form  isian  dan  cara  pemrosesannya.  Begitu  pula halnya  ketika  administrator  ingin  masuk  ke  sistem,  tentu  memerlukan  suatu antarmuka penghubung. Intinya, keberadaan form dan pemrosesannya mutlak  diperlukan dalam membangun aplikasi web yang interaktif.

Berikut ini adalah cara untuk membuat login form tanpa menggunakan database.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>

<head>

<title>Login Form Koala</title>

<style>

#apDiv1 {

position:absolute;

width:380px;

height:330px;

z-index:1;

left: 449px;

top: 136px;

background-color: #81A9F6;

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:380px;

height:98px;

background-image: url(way.jpg);

}

#footer{

width:380px;

height:40px;

background-image: url(way.jpg);

}

body {

background-image: url(koala.jpg);

}

</script>

</head>

<body onLoad=”document.form1.user.focus();”>

<form method=”post” action=”check.php”>

<div>

<div>

</div>

<div>

<div align=”center”><strong><br>User Name :</strong>

<br>

<input name=”user” size=”35″ value=”” style=”background-color:#C9EFF6″>

<br>

<br>

<strong>Password : </strong>

<br>

<input name=”pass” size=”35″ style=”background-color:#C9EFF6″>

<br>

<br>

</div>

</div>

<br>

<div>

<input name=”submit” value=” E N T E R ” onClick=”check()”>

</div>

<div align=”left”><br>

</div>

</div>

</form>

</body>

</html>

Sedangkan untuk memberikan warning kepada user untuk mengisi nama dan password,

Gunakan script seperti di bawah ini (masukkan dalam body):

</style>

<script>

function error1()

{

alert(‘Masukkan User Name dan Password Terlebih Dahulu ‘);

}

function check()

{

if(form1.pass.value == “” || form1.user.value==””)

{

error1();

}

}

Simpan dengan nama case1.html. Jika dijalankan, akan tampil seperti gambar di bawah ini

Selanjutnya, buat PHP sebagai simulasi verifikasi data yang dimasukkan. Karena tidak menggunakan database, maka data diikutkan dalam script. Pada kesempatan kali ini, id yang digunakan adalah “michael buble” dan password-nya adalah “190389”

Script yang digunakan sebagai berikut:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<title>Form Admin</title>

</head>

<body>

<?php

if(($_POST[‘user’]==’michael buble’) AND ($_POST[‘pass’]==’190389′)) {

echo ‘Halo selamat datang. Semoga hari Anda menyenangkan, ‘.$_POST[‘user’];

}

else {

echo “<br><br><br><body text=’red’><strong><center>Id dan Password salah, silahkan coba lagi.

<br><br><a href=’case1.html’><h4>Kembali Ke Login</h4></a></center></strong></body>”;

}

?>

</body>

</html>

Script ini berfungsi mendeteksi kesalahan dalam memasukkan nama atau password. Jika id dan password benar, akan muncul seperti gambar di bawah ini:

Dan jika salah, akan memunculkan peringatan salah. Seperti ini:

Namun jika salah satu kolom tidak terisi, javascript sebagai warning akan muncul seperti ini:

-selamat mencoba-

Advertisements
 
3 Comments

Posted by on April 1, 2010 in Dunia Kampus, PTI478

 

3 responses to “Membuat Login Form sederhana

  1. k0z3y

    July 9, 2010 at 11:45 pm

    Keren tuh scriptnya, tapi saya juga bikin sendiri. Silahkan dicoba dan di download di http://www.mediafire.com/download.php?lr2egmhwg1z

     
  2. pitoyocyber

    March 4, 2011 at 1:53 am

    Nice post gan..ok lanjut yang lain yang bagus yang web berbasis LMS ; moodle, drupal dll

     
  3. adams

    April 3, 2011 at 8:41 am

    sya cuba buat tapi tidak menjadi.. dimanakah silapnya???

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
The Way I Am

Live everyday as if it was your last

Some Good Eats

Eat and don't worry about it

Anggriani

Bacalah! Tulislah !

Padepokan Budi Rahardjo

belajar untuk menjadi manusia ...

Catatanku

Ini adalah album yang berisi catatan yang saya tulis dalam perjalanan waktu hidup. Catatan yang terinspirasi dari apa yang saya lihat, saya baca, saya dengar, dan saya rasakan.

Catatan Bang Akrie

Simplicity.Humble.Joyfull

%d bloggers like this: