Source Code (HTML,Java Scrip, PHP)
<?php
session_start();
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[ Demo Login Form ]</title>
<link rel="stylesheet" type="text/css" href="TugasPrak7.css">
</head>
<body>
<script language="javascript">
<!--
var inittext = "";
function getValue(){
var myForm = document.myForm;
var uName = myForm.uName.value;
var pass = myForm.uPass.value;
if (uName == '') {alert ('Username Harus diisi!'); myForm.uName.focus(); }
else if (pass == '') {alert ('Password Harus diisi!'); myForm.uPass.focus(); }
else myForm.submit();
}
function storeinittext(){
inittext = document.myForm.uName.value;
}
function inputtex_onchange(){
var inputtex_vlaue = document.myForm.uName.value;
var filter = /^[a-zA-Z]+$/ ;
if(!filter.test(inputtex_vlaue)) {
document.myForm.uName.value = inittext;
}
}
//-->
</script>
<div class="spFormContainer" style="margin-top:150px; margin-right:auto; margin-left:auto;">
<div class="spFormHeader" style="height:50px; font-size:36px; font-weight:normal; padding-top:25px; color: #45658F;"><center>Login Form</center></div>
<div id="spForm" style="margin:35px 5px 5px 40px; ">
<?php
$validuName="MNA";
$validUpass="MNA";
$isTryLogin=0;
if(isset($uName)){
if(($uName==$validuName) and ($uPass==$validUpass)){
echo "Berhasil Login! (^_^)<br>
<br>
Selamat Datang<br>
Username: MNA<br>
Password: MNA";
$_SESSION['uState']=1;
$isTryLogin=1;
echo '<form id="logoutForm" name="logoutForm" action="'.$_SERVER['PHP_SELF'].'" method="post"><input type="submit" name="btLogout" id="btLogout" onclick="logout();" value="Logout" style="float:right;margin-right:40px;font-weight:bold;color:#283C55;width:55px;height:30px;" /></form>';
}else{
echo '<span style="color:red;">Username atau Password yang Anda masukkan salah! (T,T)</span><br>';
$_SESSION['uState']=0;
}
}
if(isset($btLogout)){
$_SESSION['uState']=0;
}
if($_SESSION['uState']==0){?>
<form id="myForm" name="myForm" action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
<div class="spFormChild">
<label for="uName">Username</label>
<input type="text" name="uName" id="uName" onfocus="storeinittext();" onchange="inputtex_onchange();" />
</div>
<div class="spFormChild" style="margin-top:15px;">
<label for="uPass">Password</label>
<input type="password" name="uPass" id="uPass" />
</div>
<div class="spFormChild" style="margin-top:7px;">
<input type="button" name="btOk" id="btOk" onclick="getValue();" value="Login" style="float:right;margin-right:40px;font-weight:bold;color:#283C55;width:55px;height:30px;" />
</div>
</form>
<script type="text/javascript">
document.myForm.uName.focus();
</script>
<?php
}elseif($isTryLogin==0){
echo "Berhasil Login! (^_^)<br>
<br>
Selamat Datang<br>
Username: mna<br>
Password: mna";
echo '<form id="logoutForm" name="logoutForm" action="'.$_SERVER['PHP_SELF'].'" method="post"><input type="submit" name="btLogout" id="btLogout" onclick="logout();" value="Logout" style="float:right;margin-right:40px;font-weight:bold;color:#283C55;width:55px;height:30px;" /></form>';
}
?>
</div>
</div>
<div style="padding:2px 0 2px 7px;border:2px solid #84A0C4;border-top:0px;width:293px;background-color:#ECF2FB;margin-right:auto;margin-left:auto;">
<center>Username yang benar : mna<br />
Password yang benar : mna<br /><br />
<u>Mohamad Nur Afandi - 100533406932<br />
S1 PTI Input 2010 Gasal Off F</u></center>
</div>
</body>
</html>
Source Code (CSS)
body{
font-family:'lucida grande',tahoma,arial,sans-serif; /* jenis font default pada html */
font-size:11px; /* ukuran default untuk font pada html */
color:#333; /* warna default untuk font pada html */
background-color:#FFFF99;
}
.spBody{
text-align:left;
width:900px;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
height:500px;
border:1px solid #84A0C4;
}
.spBodyHeader{
font-weight:bold;
background-image:url(images/header.gif); /* background header form, kalo mau di ubah tinggal ganti alamat image-nya */
padding:5px 5px 5px 5px;
margin-bottom:9px;
font-family:Arial;
font-size:25px;
color:#333;
width:890px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#84A0C4;
}
/*spFormContainer adalah style class untuk tempat dimana form dibuat */
.spFormContainer{
margin-right:9px;
width:300px; /* lebar container */
height:275px; /* tinggi kontainer */
border:2px solid #84A0C4; /* bordernya */
background-color:#ECF2FB;
}
/*spFormHeader adalah style class untuk form header */
.spFormHeader{
font-weight:bold;
background-image:url(images/header.gif); /* background header form, kalo mau di ubah tinggal ganti alamat image-nya */
padding:5px 0 5px 5px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#84A0C4;
font-family:Arial;
font-size:15px;
color:#333;
width:295px;
}
/*spForm adalah style class untuk form body */
.spForm{
font:12px Arial;
font-weight:bold;
width:295px;
padding:9px 0 5px 5px;
}
/*spFormChild adalah style class untuk form item */
.spFormChild{
height:30px;
}
.spFormChild label{
float:left;
width:70px;
height:30px
display:block;
margin-top:5px;
}
.spFormChild input{
float:left;
width:140px;
display:block;
height:22px
}
