Just another WordPress.com site

Login Form dengan PHP

Selanjutnya kita akan belajar untuk membuat aplikasi form login sederhana menggunakan PHP. Login form ini tidak menggunakan database. Password dan username langsung dimasukkan ke dalam kode program..
Spesifikasi untuk login form ini adalah:

>> 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.

Ketikkan kode program sebagai berikut :

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

<html>

<head>

<title>Login Form by : Renjana</title>

</head>

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

<form name=”form1″ method=”post” action=”login.php”>
<div width=”400″ height=”400″>

<div>

<div align=”center”><font face=”Arial” color=”#FFFFFF” size=”5″><strong><br>User Name :</strong>

<br>

<font face=”Arial” color=”#FFFFFF” size=”5″><input type=”text” name=”user” size=”35″ value=”” style=”background-color:#FFFFFF”>

<br>

<br>

<strong color=”#FFFFF”>Password : </strong>

<br>

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

<br>

<br>

</div>

</div>

<br>

<div align=”center”>

<input type=”submit” name=”submit” value=” L O G I N ” onClick=”check()”>

</div>

<div id=”footer” align=”left”><br>

</div>

</div>
</div>
</form>

<script type=”text/javascript”>

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

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

</body>

</html>

dan beri nama file “login.html”

selanjutnya ketikkan kode program di bawah ini dan beri nama file “login.php”

<!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 Administrator</title>

</head>

<body>

<?php

if(($_POST[‘user’]==’renjana’) AND ($_POST[‘pass’]==’renjana’)) {

echo ‘<br><br><center>Selamat Datang di Halaman ini USER ‘ . $_POST[‘user’];

}

else {

echo “<br><br><br><body text=’red’><strong><center>INVALID LOGIN<br><br><a href=’login.html’><h4>Kembali ke Login</h4></a></center></strong></body>”;

}

?>

</body>

</html>

Interface yang dibuat akan tampak seperti gambar berikut:

 

 

 

 

 

jika salah satu form saja tidak diisikan sesuai dengan yang diperintahkan maka akan ditampilkan interface seperti ini:

 

 

 

 

 

 

 

 

 

 

 

Namun jika form “user name ” dan password sudah diisikan dengan benar, maka tampilan program adalah seperti ini:

 

 

 

 

 

Selamat memcoba…semoga bermanfaat….AAAAAAAAAAAAMIIIIIIIIIIIIIINNNNN

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

Tag Cloud

%d bloggers like this: