Etesh_zone: Aplikasi Login Form Sederhana (Tanpa Database)

Aplikasi Login Form Sederhana (Tanpa Database)

Posted in Labels: PTI478 | at 00.48

Aplikasi login form sederhana (tanpa database) yang terdiri dari field ID/Username dan Password.

Spesifikasi:

1. 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.
2. Pada aplikasi ini username = ETISTIKA, sedangkan password = etistika ;

maka di dapatkan tampilan form login sederhana sebagai berikut :

untuk membuat login sederhana tersebut,,maka digunakan kode sebagai berikut:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Form Administrator</title>

</head>

<body>

<?php

if(($_POST['username']=='ETISTIKA') AND ($_POST['password']=='etistika')) {

echo 'WELLCOME '.$_POST['username'];

}

else {

echo "<br><br><br><body text='red'><strong>Sorry, We can't sign in you to this page!!!<br><br><a href='kodeQ.html'><h4>Back to Login</h4></a></strong></body>";

}

?>

</body>

</html>

2. Untuk kode HTML-nya digunakkan kode di bawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Login Form sederhana</title>

<script type="text/javascript">

function error1()
{
alert('Password yang anda masukkan salah. Cobalah kembali!');
}

function check()
{
if(formLogin.password.value == "" || formLogin.username.value=="")
{
error1();
}
}
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 Anda Berupa Angka ');
        return false
    }
    return true
}

</script>

<style type="text/css">

#textbox1 {
position:center;
width:100px;
height:25px;
z-index:2;
left: 140px;
top: 257px;
}

#textbox2 {
position:center;
width:300px;
height:115px;
z-index:2;
top: 150px;
left: 50px;
}

#textbox3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 234px;
top: 290px;
}

#header{
width:358px;
height:79px;
background-image: url(a.JPG);
}

#background{
width:358px;
height:250px;
background-image: url(background.JPG);
}
</style>
</head>

<body onLoad="document.formLogin.username.focus();">

<form name="formLogin" method="post" action="KodeQ.php">

<div id="header">

</div>

<div id="background">

<div id="textbox1">

<div align="left"><strong><br>
    <span >User Name :</span></strong>

<br>

<input type="text" name="username" size="35" value="" style="background-color:#CCFFCC" autocomplete="off" onKeyUp="return Huruf(event)">

<br>

<br>

<strong>Password : </strong>

<br>

<input type="password" name="password" size="35" style="background-color:#CCFFCC" autocomplete="off" onKeyUp="return Huruf(event)">

<br>

<br>

</div>

</div>

<br>

<div id="textbox3">
<input type="submit" name="submit" value=" L O G I N " onClick="check()">
</div>
</div>

</form>

</body>

</html>