Tugas Praktikum Modul 7 – Pembuatan Form Login

Tugas Praktikum Modul 7 ini akan Membuat Form Login dengan Javascript dan PHP serta harus dijalankan pada komputer dengan bantuan web server offline yang bisa berjalan pada komputer sebagai contoh web server apache yang terdapat pada program XAMPP. Setelah XAMPP berjalan maka langkah selanjutnya adalah dengan memasukkan alamat seperti Localhost dengan isi pathnya. Seperti gambar di bawah

ScreenShoot Tampilan Desain

 

Source Code HTML

<!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" xml:lang="en" lang="en">
<head><title>Registrasi Login</title>
<link rel="stylesheet" href="login.css" type="text/css"/>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function checkUserName(v) {
 re = /^\D{3,}$/;
 return re.test(v);
}
function checkPass(v) {
 re = /^\D{3,}$/;
 return re.test(v);
}
function checkForm(f) {    
 if (f.username.value == '') {
 alert("Username Anda masih Kosong!");
 f.username.focus();
 return false;
 }
 if (f.password.value == '') {
 alert("Password anda masih Kosong!");
 f.password.focus();
 return false;
 }
 if (!checkUserName(f.username.value)) {
 alert("Silahkan Masukkan Username!");
 f.username.focus();
 return false;
 }
 if (!checkPass(f.password.value)) {
 alert("Silahkan Masukkan Password!");
 f.pin.focus();
 return false;
 }
 return true;
}
</script>

<div id="form">
<h3 align="center">Silahkan Login</h3>
<hr style="color:#3ebee9; border:double;" align="center" width="450"/>
<form action="login.php" method="POST" NAME="input" onSubmit="return checkForm(this)">
 <div id="Input">
 <b>Username : </b><input type="text" name="username"/>  &nbsp;&nbsp; <b>Password : </b><input type="password" name="password"/>
 </div>
 <div id="btnLogin">
 <input type="submit" name="Login" value="Masuk" align="middle">
 </div>
</form>
</div>
</body>
</html>

 

Source Code PHP

<?php
if (isset($_POST['Login'])){
 $user = $_POST['username'];
 $pass = $_POST['password'];
 if($user == "bagus" && $pass == "keren") {
 echo"<h2>Login berhasil.... \n <br> ID Anda = $user</h2>";
 } else {
 echo"<h2>Login gagal</h2>";
 }
}
?>

 

Source Code CSS

body{
background:#333333;
background-image:url(Apple.jpg);
}

#form{
margin-top:150px;
margin-left:35%;
font-family: Tahoma;
font-size: 14px;
color:#006699;
width:470px;
height : 135px;
background: #FFFF99;
border: 3px double #0000FF;
}
#btnLogin{
margin-left:394px;
}
#Input{
margin-top: 10px ;
margin-left: 10px ;
margin-bottom: 10px;
font-family: calibri;
font-size: 15px;
color:#666666;
border-color:#00FF00;
}

 

About bagusware

Aku adalah aku, dan kamu adalah kamu... Aku dan kamu pasti bisa...

Posted on 24 Maret 2011, in PTI478. Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: