membuat form login dengan PHP dan HTML

dalam pembuatan form login,ita bisa menggunakan bahasa pemrograman PHP yang dikombinasikan dengan HTML. Disini saya akan coba sharing untuk membuatnya. adapun tampilan dari form yang akan kita buat adalah sebagai berikut:

dalam bagian ini, harus memasukkan username dan password secara benar. ketentuanya adalah:
1. username dan password harus huruf
2. bila kedua kolom tersebut kosong, maka akan keluar peringatan sebagai berikut:

3. bila username atau password salah, maka akan keluar peringatan sebagai berikut:

kemudian apabila diklik "klik disini", maka akan kembali lagi ke form login.

4. bila username dan password benar, maka akan keluar tampilan berikut:

untuk membuat form login seperti diatas

untuk membuat action, ketikkan script dibawah ini, kemudian save dengan nama file codelogin.php

scriptnya adalah sebagai berkut:

<!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>Admin status</title>
</head>

<body>
<?php
if(($_POST['user']=='adityaimam') AND ($_POST['pass']=='arema')) {
echo '<strong>W E L C O M E :</strong> '.$_POST['user'];
}
else {
echo "<br><body text='red'><strong>maaf anda melakukan kesalahan pengisian username atau password<br></strong></body>";
echo "<a href='http://localhost/modul6/login.html'><strong>klik disini</a> untuk login kembali</strong>";
}
?>
</body>

</html>

setelah itu untu membuat HTML nya, ketikkan script dibawah ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FORM LOGIN</title>
</head>

<style type="text/css">
#body {
position:absolute;
width:350px;
height:240px;
z-index:1;
left: 350px;
top: 100px;
background-color: #FFFFFF;
border: 2px solid Black;
}
#bawah{
position:absolute;
width:80px;
height:30px;
z-index:2;
left: 250px;
top: 130px;
}
#header{
width:350px;
height:60px;
top:10px;
background-color:#cc33cc;
}
#tengah{
top:20px;
}
.style2{
font-size: 17px;
font-weight: bold;
}
.style1{
position:absolute;
font-size:20px;
top:20px;
left:140px;
}
</style>

<script type="text/javascript">
function error()
{
alert('Masukkan User Name dan Password');
}
function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error();
}
}
</script>

<body onLoad="document.form1.user.focus();" style="background-color:#cc99ff">
<form name="form1" method="post" action="codelogin.php">

<div id="body">
<div id="header">
<div class="style1"><strong> L O G I N </strong></div>
</div>

<div id="tengah" >
<div align="left">
<table width="350" border="0">

<tr>
<td width="121" style="text-align:left"><strong>username<strong></td>
<td width="196">
<input name="user" type="text" size="30" value="" style="background-color:#cccccc" autocomplete="off"></td>
</tr>

<tr>
<td style="text-align:"><strong>password</strong></td>
<td>
<input type="password" name="pass" size="30" style="background-color:#cccccc" autocomplete="off"></td>
</tr>
</table>
</div>
</div>

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

</div>

</form>
</body>
</html>

demikianlah.. semoga bisa bermanfaat... SALAM SATU JIWA!!!!

Rabu, 31 Maret 2010 // // 2 komentar //

2 komentar to "membuat form login dengan PHP dan HTML"

20 Agustus 2010 pukul 11.28
nabillagroup says:

semua kode itu di copy / di ketikan dimana ?
di phpmyadmin atau di halaman blogspot ?
11 Desember 2015 pukul 03.56
Ramzul says:

piye kabare beh