Membuat halaman login bukanlah hal sulit. Tapi Mungkin untuk yang baru belajar membuatnya sangat sulit seperti halnya saya dulu.
Oke langsung saja pertama buatlah database dahulu di phpmyadmin, di sini nama database yang saya buat adalah " seradaku " ( Tanpa Tanda Petik ).
selanjutnya buatlah table seperti dibawah ini, nama table admin :
CREATE TABLE `admin` (
`nama` varchar(38) NOT NULL,
`password` varchar(38) NOT NULL
)
Jika sudah membuat databasenya dengan struktur seperti di atas.
Selanjutnya buatlah file dbkoneksi.php paste script dibawah ini :
<?php
$host = "localhost";
$user = "root";
$pass = "";
$konek =mysql_connect($host,$user,$pass) or die ("koneksi gagal");
?>
kegunaan dbkoneksi.php disini bisa di bilang untuk menghubungkan ke database yang telah kita buat tadi.
Jika sudah membuat dbkoneksi.php buatlah file index.php paste script dibawah ini :
<?php
include("dbkoneksi.php");
session_start();
if(isset($_POST['login']))
{
mysql_select_db("seradaku");
$qr=mysql_query("SELECT *
FROM admin
WHERE nama = '$_POST[nama]'
AND password= '$_POST[pass]'",$konek) or die ("Login gagal");
$row=mysql_fetch_array($qr);
if (!empty($row['nama']))
{
header("location: home.php");
$nama=$row['nama'];
$_SESSION['nama']=$nama;
}
else
{
echo "$row[nama] <script>alert('Gagal Login')</script>";
}
}
?>
<html>
<head>
<title>CONTOH LOGIN</title>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<div id="form-login">
<form id="FLogin" name="FLogin" method="post" action="">
<font face="Monotype Corsiva" size="6">Login Admin</font><hr color="#5686c6"><br>
Username : <input name="nama" type="text" id="nama" size="20" maxlength="20" class="txt" required value=""/><br />
Password : <input name="pass" type="password" id="pass" size="20" maxlength="20" class="txt" required value=""/>
<div id="tombol"><input name="login" type="submit" value="Login" class="button" />
<input name="btnLogin" type="reset" value="Reset" class="button" /></div>
</form>
</div>
</body>
</html>
Jika sudah membuat file index.php jika ingin di lihat hasilnya maka akan tampil seperti gambar di bawah ini :
karna tampilanya masih sederhana sekarang kita akan buat cssnya untuk mempercantiknya.
buatlah file login.css paste script di bawah ini :
#form-login {
width: 400px;
margin: 0 auto;
margin-top: 100px;
padding: 7px;
background-color: #006400;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #666;
text-align: center;
font-size: large;
font-family: time new roman;
color: blue;
}
#form-login form {
margin: 6px;
padding: 22px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: #F8F8FF;
-webkit-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
-moz-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
}
#form-login form label {
float: left;
width: 120px;
}
#form-login form .txt {
padding: 3px;
margin: 3px;
}
#form-login h1
{ font: 20px "Trebuchet MS";
border-bottom: 1px dotted #009900;
padding:5px;
margin:10px;
}
#tombol {
clear: both;
padding: 10px;
}
.button{
box-shadow: rgba(0,0,0,0.1) 0px 1px 1px;
padding: 3px 20px;
}
.button:hover,.button:focus {
color: #000;
-webkit-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
}
Setelah kita membuat file login.css maka tampilanya akan seperti gambar di bawah ini.
Yang terakhir buatlah file home.php yang bertujuan jika berhasil login maka akan masuk ke halaman home ini.
berikut scriptnya :
<?php
session_start();
include("dbkoneksi.php");
if(empty($_SESSION['nama']))
{
echo "<center><br>";
echo "<b><h2>ANDA BUKAN ADMIN !!<br> SILAKAN LOGIN SEBAGAI ADMIN !! </h2></b>";
echo "<img src=images/seru.png width=150px/><br><br>";
echo "<input type=button class='tombol' value='LOGIN' onclick=location.href='index.php'></center>";
}
else
{
if(isset($_POST['logout']))
{
session_destroy();
}
?>
<html>
<head>
<title>CONTOH LOGIN</title>
</head>
<body>
<br><br>
<center><h1><b> SELAMAT DATANG DI HALAMAN HOME </b></h1></center>
<?php
echo "<center><input type=button class='tombol' value='LOGOUT' onclick=location.href='index.php'></center>";
?>
</body>
</html>
<?php
}
?>
Ini adalah halaman Home yang berhasil login
Selesai, sekarang cobalah . . .
Semoga Berhasil . . . . . . .
NB : Untuk script lengkapnya bisa download DISINI !!
Password RaR : SeraDaKu38
