Coba

ads

Membuat form login

seperti kelanjutan dari postingan saya kemarin,saya akan kembali akan memberikan cara membuat form login sederhana.untuk langkah-langkahnya ketikkan sintak html dibawah ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Login_Form</title>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:373px;
    height:330px;
    z-index:1;
    left: 449px;
    top: 90px;
    background-color: green;
    border: 2px solid Black;
}
#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:373px;
    height:70px;
    background-color: black;
    background-image: url();
}
#footer{
    width:373px;
    height:40px;
    background-color: #D9F682;
    background-image: url();
}

body {
    background-image: url(login.jpg);
}
</style>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

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


 
<form name="form1" method="post" action="admin.php">
 <div id="apDiv1">
 <div id="header">
 <h1><font color="blue" face="Blackadder ITC"><marquee>tolong Login terlebih dahulu</marquee></font></h1>
 <br>
  <h2 align="center"><br>
    <br>
    </h2>
    </div>
 <div>
    <div align="center"><strong><br>Username:</strong>   
        <br>
      <input type="text" name="user" size="35" value="" style="background-color:yellow">
      <br>
      <br>
        <strong>Password: </strong> 
        <br>
      <input type="password" name="pass" size="35" style="background-color:yellow">
      <br>
    <br>
    <center><font color="red" size="4"><blink>www.m-azis.blogspot.com</blink></font></center>
      <br>
    </div>
 </div>
<br>
       <div id="apDiv3">
         <input type="submit" name="submit" value=" ENTER " onClick="check()">
    </div>
  </div>
</form>
</body>
</html>


setelah selasai simpan dengan nama misal login.html. setelah itu ketikkan juga sintak php-nya untuk menghubungkan sintak html diatas,jangan lupa namanya harus sinkron misal admin.php.
sintak php-nya:

<!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>Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='muhammad') AND ($_POST['pass']=='azis')) {
echo 'Sukses, Anda Telah Masuk Halaman Administrator Dengan Username:'.$_POST['user'];
echo '<br><br>Hallo' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Ada Kesalahan username dan password...!<br><br><a href='login.html'><h4>back to Login</h4></a></center></strong></body>";
}
?>
</body>
</html>


setelah semuanya selesai maka tampilan dari form login tersebut sebagai berikut.
Membuat form login
Membuat form login


.Selamat mencoba..

untuk download artikelnya klik disini

Subscribe to receive free email updates: