Membuat Form Login php Dengan Validasi

Pertama anda harus punya aplikasi
  1. XAMPP
  2. Dreamweaver
Tampilan Login
Tampilan Login


Jika sudah berikut langkah langkah pembuatannya :

*Buka browser (pastikan mysql aktif) lalu ketik alamat ‘localhost/phpmyadmin’
*Pada Create new database isikan ‘Web’ kemudian klik create
*Klik pada SQL dan pastekan kode dibawah ini 

CREATE TABLE IF NOT EXISTS `admin` (`id` int(20) NOT NULL,`name` varchar(20) NOT NULL,`username` varchar(20) NOT NULL,`password` varchar(20) NOT NULL,PRIMARY KEY  (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1
Pada Bookmark this SQL query isikan ‘admin’ kemudian klik go


# untuk file di bawah nanti disimpan di dalam c => xampp => htdoc => buat folder ‘login’
# untuk membuka di browser localhost/login

*Buka Dreamweaver kemudian klik php, isikan kode di bawah dan beri nama index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Administrator</title>
<style type="text/css">
body {
                background-color                            : #00f;
                font-family                                         : Tahoma;
                font-family                                         : 12px;
}
}
#form1 table tr td #berita {
                text-align                                             : center;
}

#form1 {
                text-align: left;
}

form{
  padding              : 15px;
  width                  : 600px; 
  margin                : 30px auto; 
  border                : 2px solid #FFFFFF; 
  background:url(categories-back.gif) transparent; 
   
  /*** Rounded Corners ***/ 
  border-radius:20px; 
  -moz-border-radius: 20px; 
  -webkit-border-radius: 20px; 
   
  /*** Shadow behind the box ***/ 
  -moz-box-shadow:0px -5px 300px #FFFFFF; 
  -webkit-box-shadow:0px -5px 300px #FFFFFF; 
   
  /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/ 
  background:-moz-linear-gradient(19% 75% 90deg,#030615, #3485fe); 
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#3485fe), to(#030615)); 
 
input { 
  width: 200px; 
  padding: 6px; 
  margin-bottom: 10px; 
  border-top: 1px solid #030615; 
  border-left: 0px; 
  border-right: 0px; 
  border-bottom: 0px; 
  background: #ffffff;  
  border-radius:20px; 
  -moz-border-radius: 20px; 
  -webkit-border-radius: 20px; 
   
  /*** Transition Selectors - What properties to animate and how long ***/ 
  -webkit-transition-property: -webkit-box-shadow, background; 
  -webkit-transition-duration: 0.25s; 
   
  /*** Adding a small shadow ***/ 
  -moz-box-shadow: 0px 0px 2px #000; 
  -webkit-box-shadow: 0px 0px 2px #000; 
 
input:hover { 
  -webkit-box-shadow: 0px 0px 4px #000; 
  background: #317ff3; 
 
input.submit { 
  width: 100px; 
  color: #fff; 
  text-transform: uppercase; 
  text-shadow: #000 1px 1px; 
  border-top: 1px solid #ad64e0; 
  margin-top: 10px; 
 
  /*** Adding CSS3 Gradients ***/ 
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#030615), to(#3485fe)); 
  background: -moz-linear-gradient(19% 75% 90deg,#030615, #3485fe); 
 
input.submit:hover { 
  -webkit-box-shadow: 0px 0px 2px #000; 
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#317ef2), to(#1f4e9a)); 
  background:  -moz-linear-gradient(19% 75% 90deg,#1f4e9a, #317ef2); 
}  
 
input.submit:active { 
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6)); 
  background:  -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9); 
.tombol {
color: #ccc;
background-color:#00F;
cursor: pointer;
border: none;
border-radius: 4px;
width: auto;
}
.tombol:hover {
background-color:#03F;
}
</style>
</head>
<body>
<div id="login">
<h2 align="center">LOGIN</h2>
<font color="#FFFFFF">
<center>
<form name="form1" method="post" action="cek-error.php">
<p><br>
username
:
<input id="name" name="username" placeholder="username" type="text">
</p>
<p><br>
Password :
  <input id="password" name="password" placeholder="**********" type="password">
</p>
<p>
<input name="LOGIN" type="submit" id="LOGIN" value="Login">
<input name="Reset" type="reset" id="button" value="Reset">
</p>
</form>

<p align="center">
<?
if (!empty($_GET['error'])) {
                if ($_GET['error'] == 1) {
                echo '<font face="Arial, Helvetica, sans-serif" color="#FF9966"> <center>Username dan Password belum diisi!</center></font>';
                                } else if ($_GET['error'] == 2) {
                echo '<font face="Arial, Helvetica, sans-serif" color="#FF9966"> <center>Username belum di isi!</center></font>';
                } else if ($_GET['error'] == 3) {
                echo '<font face="Arial, Helvetica, sans-serif" color="#FF9966"> <center>Password belum di isi!</center></font>';
                } else if ($_GET['error'] == 4) {
                echo '<font face="Arial, Helvetica, sans-serif" color="#FF9966"> <center>Username dan Password salah.dan tidak terdaftar diweb kami,silahkan login lagi!</center></font>';
                } else if ($_GET['error']==5){
echo '<font face="Arial, Helvetica, sans-serif" color="#FF9966"><center>Anda belum login. Silahkan Login terlebih dahulu!</center></font>';
                }
}
?>
</p>
</div>
</body>
</html>

*Untuk koneksi copy kode di bawah dan beri nama koneksi.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("web");
?>

*Untuk logout copy di bawah dan beri nama logout.php
<?php
session_start();
session_destroy();
echo '<script language="javascript"> 
alert("Anda Berhasil Logout"); 
window.location="../admin/index.php"; 
</script>'; 
exit(); 
?>

*Untuk validasi copy di bawah dan beri nama cek-error.php
<?php
session_start();
include "koneksi.php";
//mengambil data inputan
$username=$_POST['username'];
$password=$_POST['password'];
//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$u=mysql_real_escape_string($username);
$p=mysql_real_escape_string($password);
//cek data yang dikirim, apakah kosong atau tidak
if (empty($username) && empty($password))
{

//kalau username dan password kosong
                header('location:index.php?error=1');
                break;
}
else if (empty($username))
{

//kalau username kosong
                header('location:index.php?error=2');
                break;
}
else if (empty($password))
{

//kalau password kosong
                header('location:index.php?error=3');
                break;
}

$cek=mysql_query("select * from admin where username='$username' and password='$password'");
$al=mysql_num_rows($cek);
if  ($al == 1)
{
//kalau username dan password sudah terdaftar di database, buat session dengan nama username dengan isi nama user yang login
                $_SESSION['username']=$username;    
                header('location:administrator/index.php');
}
else
{

//kalau username ataupun password tidak terdaftar di database
                header('location:index.php?error=4');
}
?>

*Untuk validasi session (biar kalo udah logout di back ngak keadaan login) copy di bawah dan beri nama tes-session.php
<?php
include "koneksi.php";
session_start();

if (!isset($_SESSION['username']) || empty($_SESSION['username']))
{
                header('location:index.php?pesan5');
}
?>

*Untuk halaman admin silahkan buat folder administrator dan di dalamnya beri file index.php
<script>window.history.forward(1);</script><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman Login</title>
</head>
<?php
mysql_connect("localhost","root");
mysql_select_db("portal");
?>
<body>
<div id="login">

<form name="form1" method="post" action="index.php">
 
  <center><font color="#FFFFFF"><p><h2>SELAMAT ANDA BERHASIL LOGIN !</h2></p>
  <p></p>
  <p></p>
  <p align="center">&nbsp;</p>

</form>
<p align="center"></p>
<p align="center"><a href="../logout.php">LOGOUT</a></p>
</div>
</body>
</html>

Apabila ada kesalahan dalam program silahkan tanyakan di komentar.
Sekian postingan saya kali ini. Semoga bermanfaat, poskan komen untuk mendukung blog ini, terima kasih.
Previous
Next Post »

2 komentar

Click here for komentar
June 16, 2018 at 2:44 PM ×

kalau mau login belum punya akun gmna?

Reply
avatar

Silahkan berkomentar dengan baik tanpa spam.
"Komentar anda adalah motivasi untuk blog ini" ConversionConversion EmoticonEmoticon

Thanks for your comment