Tutorial Membuat Sistim Login Dengan PHP & MYSQL
OK kita mulai, pada kesempatan kali ini saya asumsikan kita semua sudah mengerti yang namanya MYSQL, bagaimana cara membuatnya dan mengkonfigurasinya baik melalui Console maupun PHPMYADMIN jadi saya tidak menjelaskan lagi cara membuat sebuah database.
Sebelum melanjutkan, buatlah terlebih dahulu sebuah database, pada kesempatan kali ini saya membuat sebuah database dengan nama latihan dan sebuah tabel user didalamnya. field field tabel user seperti yang terlihat pada gambar dibawah ini :
Setelah itu buat sebuah file PHP pada directory root, beri saja nama filenya koneksi.php, File ini berfungsi untuk melakukan koneksi antara PHP dan MYSQL. kemudian tulis script seperti berikut :
<?php
$host = "localhost";
$user = "root";
$name = "latihan";
$pass ="";
$conn = mysql_connect($host,$user,$pass);
if ($conn) {
$buka = mysql_select_db ($name);
if (!$buka) {
die ("Database tidak dapat dibuka");
}
} else {
die ("Server MySQL tidak terhubung");
}
?>
Setelah itu masih dalam folder yang sama dengan file koneksi.php diatas buat sebuah file html, kali ini saya membuat sebuah file login.php File ini untuk membuat tampilan login form kita, berikut script pada halaman login.php ini :
====================================================================
<style>
#body{
background-image:url('images/Vista_Morning_Dew.jpg');
}
#main {
width: 700px;
height: 400px;
background:white;
margin: auto;
text-align: center;
margin-top: 100px;
border-radius: 30px;;
}
#head {
width: 700px;
height: 100px;
background:#FF8040;
margin-bottom: 30px;
text-align: center;
padding-top: 10px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
font-family:Helvetica;
}
#isi {
width: 700px;
height: 500px;
padding-left: 150px;
font-family:arial;
text-align: left;
font-weight:bold;
font-family:Helvetica;
}
#input1 {
padding: 6px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 400px;
height: 50px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
margin: 3px;
}
#textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
#label {
color:#FF8040;
margin-bottom: 10px;
}
#submit1 {
width: 250px;
padding: 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 80px;
margin-top: 10px;
border-radius: 10px;
}
</style>
<?php
session_start();
if (!empty($_SESSION['username'])) {
header('location:index.php');
}
?>
<html>
<head>
</head>
<body id="body">
<div id="main">
<div id="head">
<h1>Sistem Informasi Kepegawaian</h1>
</div>
<div id="isi">
<?php
//kode php ini kita gunakan untuk menampilkan pesan eror
if (!empty($_GET['error'])) {
if ($_GET['error'] == 1) {
echo 'Username dan Password belum diisi';
} else if ($_GET['error'] == 2) {
echo 'Username belum diisi!';
} else if ($_GET['error'] == 3) {
echo '<h3>Password belum diisi!</h3>';
} else if ($_GET['error'] == 4) {
echo 'Username dan Password tidak terdaftar';
}
}
?>
<form id="form" name="login" action="otentikasi.php" method="post">
<label id="label">Username :</label><br />
<input id="input1" type="text" name="username" size="30"/><br />
<label id="label">Password :</label><br />
<input id="input1" type="password" name="password" size="30"/><br />
<input id="submit1" type="submit" name="login" value="Login" />
</form>
</div>
</div>
</body>
</html>
====================================================================
Selanjutnya kita akan buat file otentikasi.php File ini untuk validasi loginnya, berikut script validasi otentikasi.php:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
include('koneksi.php');
session_start();
//tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];
//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$username = mysql_real_escape_string($username);
$password = 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:login.php?error=1');
break;
} else if (empty($username)) {
//kalau username saja yang kosong
header('location:login.php?error=2');
break;
} else if (empty($password)) {
//kalau password saja yang kosong
header('location:login.php?error=3');
break;
}
$q = mysql_query("select * from user where username='$username' and password='$password'");
if (mysql_num_rows($q) == 1) {
//kalau username dan password sudah terdaftar di database
//buat session dengan nama username dengan isi nama user yang login
$_SESSION['username'] = $username;
//redirect ke halaman index
header('location:index.php');
} else {
//kalau username ataupun password tidak terdaftar di database
header('location:login.php?error=4');
}
?>
Terakhir jalankan program yang telah kita buat,,, masukkan username dan password yang telah anda inputkan dalam database, klu tidak ada error harusnya anda sudah bisa login..
OK kita mulai, pada kesempatan kali ini saya asumsikan kita semua sudah mengerti yang namanya MYSQL, bagaimana cara membuatnya dan mengkonfigurasinya baik melalui Console maupun PHPMYADMIN jadi saya tidak menjelaskan lagi cara membuat sebuah database.
Sebelum melanjutkan, buatlah terlebih dahulu sebuah database, pada kesempatan kali ini saya membuat sebuah database dengan nama latihan dan sebuah tabel user didalamnya. field field tabel user seperti yang terlihat pada gambar dibawah ini :
Setelah itu buat sebuah file PHP pada directory root, beri saja nama filenya koneksi.php, File ini berfungsi untuk melakukan koneksi antara PHP dan MYSQL. kemudian tulis script seperti berikut :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$host = "localhost";
$user = "root";
$name = "latihan";
$pass ="";
$conn = mysql_connect($host,$user,$pass);
if ($conn) {
$buka = mysql_select_db ($name);
if (!$buka) {
die ("Database tidak dapat dibuka");
}
} else {
die ("Server MySQL tidak terhubung");
}
?>
Setelah itu masih dalam folder yang sama dengan file koneksi.php diatas buat sebuah file html, kali ini saya membuat sebuah file login.php File ini untuk membuat tampilan login form kita, berikut script pada halaman login.php ini :
====================================================================
<style>
#body{
background-image:url('images/Vista_Morning_Dew.jpg');
}
#main {
width: 700px;
height: 400px;
background:white;
margin: auto;
text-align: center;
margin-top: 100px;
border-radius: 30px;;
}
#head {
width: 700px;
height: 100px;
background:#FF8040;
margin-bottom: 30px;
text-align: center;
padding-top: 10px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
font-family:Helvetica;
}
#isi {
width: 700px;
height: 500px;
padding-left: 150px;
font-family:arial;
text-align: left;
font-weight:bold;
font-family:Helvetica;
}
#input1 {
padding: 6px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 400px;
height: 50px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
margin: 3px;
}
#textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
#label {
color:#FF8040;
margin-bottom: 10px;
}
#submit1 {
width: 250px;
padding: 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 80px;
margin-top: 10px;
border-radius: 10px;
}
</style>
<?php
session_start();
if (!empty($_SESSION['username'])) {
header('location:index.php');
}
?>
<html>
<head>
</head>
<body id="body">
<div id="main">
<div id="head">
<h1>Sistem Informasi Kepegawaian</h1>
</div>
<div id="isi">
<?php
//kode php ini kita gunakan untuk menampilkan pesan eror
if (!empty($_GET['error'])) {
if ($_GET['error'] == 1) {
echo 'Username dan Password belum diisi';
} else if ($_GET['error'] == 2) {
echo 'Username belum diisi!';
} else if ($_GET['error'] == 3) {
echo '<h3>Password belum diisi!</h3>';
} else if ($_GET['error'] == 4) {
echo 'Username dan Password tidak terdaftar';
}
}
?>
<form id="form" name="login" action="otentikasi.php" method="post">
<label id="label">Username :</label><br />
<input id="input1" type="text" name="username" size="30"/><br />
<label id="label">Password :</label><br />
<input id="input1" type="password" name="password" size="30"/><br />
<input id="submit1" type="submit" name="login" value="Login" />
</form>
</div>
</div>
</body>
</html>
====================================================================
Selanjutnya kita akan buat file otentikasi.php File ini untuk validasi loginnya, berikut script validasi otentikasi.php:
<?php
include('koneksi.php');
session_start();
//tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];
//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$username = mysql_real_escape_string($username);
$password = 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:login.php?error=1');
break;
} else if (empty($username)) {
//kalau username saja yang kosong
header('location:login.php?error=2');
break;
} else if (empty($password)) {
//kalau password saja yang kosong
header('location:login.php?error=3');
break;
}
$q = mysql_query("select * from user where username='$username' and password='$password'");
if (mysql_num_rows($q) == 1) {
//kalau username dan password sudah terdaftar di database
//buat session dengan nama username dengan isi nama user yang login
$_SESSION['username'] = $username;
//redirect ke halaman index
header('location:index.php');
} else {
//kalau username ataupun password tidak terdaftar di database
header('location:login.php?error=4');
}
?>
Terakhir jalankan program yang telah kita buat,,, masukkan username dan password yang telah anda inputkan dalam database, klu tidak ada error harusnya anda sudah bisa login..
OK kita mulai, pada kesempatan kali ini saya asumsikan kita semua sudah mengerti yang namanya MYSQL, bagaimana cara membuatnya dan mengkonfigurasinya baik melalui Console maupun PHPMYADMIN jadi saya tidak menjelaskan lagi cara membuat sebuah database.
Sebelum melanjutkan, buatlah terlebih dahulu sebuah database, pada kesempatan kali ini saya membuat sebuah database dengan nama latihan dan sebuah tabel user didalamnya. field field tabel user seperti yang terlihat pada gambar dibawah ini :
Setelah itu buat sebuah file PHP pada directory root, beri saja nama filenya koneksi.php, File ini berfungsi untuk melakukan koneksi antara PHP dan MYSQL. kemudian tulis script seperti berikut :
<?php
$host = "localhost";
$user = "root";
$name = "latihan";
$pass ="";
$conn = mysql_connect($host,$user,$pass);
if ($conn) {
$buka = mysql_select_db ($name);
if (!$buka) {
die ("Database tidak dapat dibuka");
}
} else {
die ("Server MySQL tidak terhubung");
}
?>
Setelah itu masih dalam folder yang sama dengan file koneksi.php diatas buat sebuah file html, kali ini saya membuat sebuah file login.php File ini untuk membuat tampilan login form kita, berikut script pada halaman login.php ini :
====================================================================
<style>
#body{
background-image:url('images/Vista_Morning_Dew.jpg');
}
#main {
width: 700px;
height: 400px;
background:white;
margin: auto;
text-align: center;
margin-top: 100px;
border-radius: 30px;;
}
#head {
width: 700px;
height: 100px;
background:#FF8040;
margin-bottom: 30px;
text-align: center;
padding-top: 10px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
font-family:Helvetica;
}
#isi {
width: 700px;
height: 500px;
padding-left: 150px;
font-family:arial;
text-align: left;
font-weight:bold;
font-family:Helvetica;
}
#input1 {
padding: 6px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 400px;
height: 50px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
margin: 3px;
}
#textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
#label {
color:#FF8040;
margin-bottom: 10px;
}
#submit1 {
width: 250px;
padding: 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 80px;
margin-top: 10px;
border-radius: 10px;
}
</style>
<?php
session_start();
if (!empty($_SESSION['username'])) {
header('location:index.php');
}
?>
<html>
<head>
</head>
<body id="body">
<div id="main">
<div id="head">
<h1>Sistem Informasi Kepegawaian</h1>
</div>
<div id="isi">
<?php
//kode php ini kita gunakan untuk menampilkan pesan eror
if (!empty($_GET['error'])) {
if ($_GET['error'] == 1) {
echo 'Username dan Password belum diisi';
} else if ($_GET['error'] == 2) {
echo 'Username belum diisi!';
} else if ($_GET['error'] == 3) {
echo '<h3>Password belum diisi!</h3>';
} else if ($_GET['error'] == 4) {
echo 'Username dan Password tidak terdaftar';
}
}
?>
<form id="form" name="login" action="otentikasi.php" method="post">
<label id="label">Username :</label><br />
<input id="input1" type="text" name="username" size="30"/><br />
<label id="label">Password :</label><br />
<input id="input1" type="password" name="password" size="30"/><br />
<input id="submit1" type="submit" name="login" value="Login" />
</form>
</div>
</div>
</body>
</html>
====================================================================
Selanjutnya kita akan buat file otentikasi.php File ini untuk validasi loginnya, berikut script validasi otentikasi.php:
<?php
include('koneksi.php');
session_start();
//tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];
//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$username = mysql_real_escape_string($username);
$password = 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:login.php?error=1');
break;
} else if (empty($username)) {
//kalau username saja yang kosong
header('location:login.php?error=2');
break;
} else if (empty($password)) {
//kalau password saja yang kosong
header('location:login.php?error=3');
break;
}
$q = mysql_query("select * from user where username='$username' and password='$password'");
if (mysql_num_rows($q) == 1) {
//kalau username dan password sudah terdaftar di database
//buat session dengan nama username dengan isi nama user yang login
$_SESSION['username'] = $username;
//redirect ke halaman index
header('location:index.php');
} else {
//kalau username ataupun password tidak terdaftar di database
header('location:login.php?error=4');
}
?>
Terakhir jalankan program yang telah kita buat,,, masukkan username dan password yang telah anda inputkan dalam database, klu tidak ada error harusnya anda sudah bisa login..
Belum ada tanggapan untuk " Membuat Sistim Login Dengan PHP & MYSQL"
Post a Comment