Dalam tutorial cara membuat
form login dengan PHP dan MySQL, kita akan belajar membuat halaman login
untuk website dengan menggunakan PHP Session. Tutorial ini merupakan
tutorial tingkat dasar, sederhana dan mudah untuk diikuti.
Secara Umum, form login akan sangat dibutuhkan pada situs web jika
kita hanya ingin orang-orang tertentu yang bisa melihat bahkan merubah
konten pada website. Ini merupakan cara yang baik untuk menjaga data
kita aman dari orang-orang yang tidak dikehendaki.
Tutorial
cara membuat form login dengan PHP dan MySQL ini dilengkapi dengan
session.
Pada saat proses login berhasil, secara otomatis akan tercipta sebuah
session yang berfungsi sebagai informasi pribadi klien yang tersimpan di
web server untuk digunakan sebagai proses login.
Form Login
Silahkan klik tombol download untuk mengunduh form login dengan PHP dan MySQL.
Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL
Konsep dalam cara membuat form login dengan php dan mysql adalah
membuat halaman form login dengan HTML terlebih dahulu dan selanjutnya
akan dilengkapi dengan skrip php untuk memeriksa data pengguna di
database MySQL. Jika pengguna terdapat dalam database MySQL, maka PHP
akan membuat session untuk pengguna tersebut dan sekaligus akan
mengarahkan pada halaman web yang telah diproteksi.
Ikuti Langkah-langkah dibawah ini untuk cara membuat form login
sederhana dengan PHP dan database MySQL yang dilengkapi session sesuai
konsep diatas.
Langkah 1: Membuat Tabel MySQL User/Pengguna
Untuk membuat database dan tabel, jalankan kode berikut di software MySQL Anda, bisa menggunakan
phpMyAdmin
atau software kesukaan saya HeidiSQL. Untuk lebih jelas tentang membuat
database dan tabel MySQL dengan skrip PHP, silahkan kunjungi tutorial
”
Cara Membuat Tabel dan Database MySQL di PHP “.
Skrip MySQL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
-- Dumping database structure for tes_db
CREATE DATABASE IF NOT EXISTS `tes_db` /*!40100 DEFAULT CHARACTER SET latin1 */;
USE `tes_db`;
-- Dumping structure for table tes_db.karyawan
CREATE TABLE IF NOT EXISTS `karyawan` (
`id_karyawan` int(10) NOT NULL AUTO_INCREMENT,
`pass_karyawan` varchar(50) NOT NULL DEFAULT '0',
`user_karyawan` varchar(50) NOT NULL DEFAULT '0',
`nama_karyawan` varchar(50) DEFAULT NULL,
`alm_karyawan` varchar(50) DEFAULT NULL,
`gaji_karyawan` int(10) DEFAULT NULL,
`tgl_gabung` date DEFAULT NULL,
PRIMARY KEY (`id_karyawan`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;
-- Dumping data for table tes_db.karyawan: ~10 rows (approximately)
INSERT IGNORE INTO `karyawan` (`id_karyawan`, `pass_karyawan`, `user_karyawan`, `nama_karyawan`, `alm_karyawan`, `gaji_karyawan`, `tgl_gabung`) VALUES
(1, '1234', 'admin', 'Admin Nyekrip', 'Website', 3000000, '2015-04-16'),
(2, '4321', 'staf', 'Staf Nyekrip', 'Server Web', 250000, '2015-04-16');
|
Langkah 2: Membuat Form Login HTML
Dalam skrip ini kita akan membuat form tempat untuk memasuk-kan
username dan password. Ketik-kan skrip berikut untuk membuat Form login
dengan skrip HTML yang terdiri dari kolom username, kolom password dan
tombol submit. Simpan skrip berikut dalam file dengan nama
index.php. Dalam tutorial ini kita menggunakan metode POST, untuk lebih memahami metode form HTML, ikuti tutorial ”
Membuat Form HTML dg POST dan GET di 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
|
<?php
include('login.php'); // Memasuk-kan skrip Login
if(isset($_SESSION['login_user'])){
header("location: profile.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Nyekrip Form Login</title>
<!-- Skrip CSS -->
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="main">
<form action="" method="post">
<h2>NYEKRIP.COM FORM LOGIN DENGAN PHP</h2><hr/>
<label>Username :</label>
<input id="name" name="username" placeholder="username" type="text">
<label>Password :</label>
<input id="password" name="password" placeholder="**********" type="password">
<input type="submit" name="submit" id="submit" value="Login">
</form>
</div>
</div>
</body>
</html>
|
Langkah 3: Membuat Skrip Login
Dalam skrip ini kita akan membuat skrip PHP yang bertugas untuk
memulai sesi (session) dan memeriksa apakah username dan password yang
diberikan terdapat dalam tabel karyawan, jika data tidak ditemukan akan
menampilkan pesan ” Username atau Password belum terdaftar “. Ketik-kan
skrip berikut dan simpan dalam file dengan nama
login.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
|
<?php
session_start(); // Memulai Session
$error=''; // Variabel untuk menyimpan pesan error
if (isset($_POST['submit'])) {
if (empty($_POST['username']) || empty($_POST['password'])) {
$error = "Username or Password is invalid";
}
else
{
// Variabel username dan password
$username=$_POST['username'];
$password=$_POST['password'];
// Membangun koneksi ke database
$connection = mysql_connect("localhost", "root", "");
// Mencegah MySQL injection
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);
// Seleksi Database
$db = mysql_select_db("tes_db", $connection);
// SQL query untuk memeriksa apakah karyawan terdapat di database?
$query = mysql_query("select * from karyawan where pass_karyawan='$password' AND user_karyawan='$username'", $connection);
$rows = mysql_num_rows($query);
if ($rows == 1) {
$_SESSION['login_user']=$username; // Membuat Sesi/session
header("location: profile.php"); // Mengarahkan ke halaman profil
} else {
$error = "Username atau Password belum terdaftar";
}
mysql_close($connection); // Menutup koneksi
}
}
?>
|
Langkah 4 : Membuat Halaman Profil
Halaman Profil
Jika login telah berhasil, maka pengguna akan diarahkan langsung ke
halaman profile yang berisi data pribadi user (lihat gambar halaman
profil diatas). Dalam halaman ini juga dilengkapi dengan link logout
untuk keluar dari halaman sekaligus menghapus session. Ketik-kan skrip
berikut dan simpan dalam file dengan nama
profile.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Nyekrip Halaman Khusus</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="profile">
<b id="welcome">Selamat Datang : <i><?php echo $login_session; ?></i></b>
<b id="logout"><a href="logout.php">Log Out</a></b>
</div>
</body>
</html>
|
Langkah 5: Membuat Skrip Fungsi Session PHP
Skrip ini bertugas untuk mengambil data tentang user dan
menampilkan-nya pada halaman profil. Ketik-kan skrip berikut dan simpan
dalam file dengan nama
session.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
// Membangun Koneksi dengan Server dengan nama server, user_id dan password sebagai parameter
$connection = mysql_connect("localhost", "root", "");
// Seleksi Database
$db = mysql_select_db("tes_db", $connection);
session_start();// Memulai Session
// Menyimpan Session
$user_check=$_SESSION['login_user'];
// Ambil nama karyawan berdasarkan username karyawan dengan mysql_fetch_assoc
$ses_sql=mysql_query("select nama_karyawan from karyawan where user_karyawan='$user_check'", $connection);
$row = mysql_fetch_assoc($ses_sql);
$login_session =$row['nama_karyawan'];
if(!isset($login_session)){
mysql_close($connection); // Menutup koneksi
header('Location: index.php'); // Mengarahkan ke Home Page
}
?>
|
Langkah 6: Membuat Skrip Fungsi Logout PHP
Skrip ini bertugas untuk menghapus semua sesi dan langsung
mengarahkan ke halaman utama (index.php) tempat form login berada.
Ketik-kan skrip berikut dan simpan dalam file dengan nama
logout.php.
|
|
<?php
session_start();
if(session_destroy()) // Menghapus Sessions
{
header("Location: index.php"); // Langsung mengarah ke Home index.php
}
?>
|
Langkah 7: Membuat Skrip CSS Untuk Style Form Login
Skrip CSS ini untuk memberikan dan mengatur style HTML pada halaman
form login dan halaman profil. Ketik-kan skrip berikut dan simpan dalam
file dengan nama
style.css.
Skrip CSS
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
.container {
width: 50%;
margin: 0 auto;
}
h2{
background-color: #53bd84;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
color: #fff;
}
span{
display: block;
margin-bottom: 20px;
color: red;
}
.success{
display: block;
margin-top: 20px;
margin-bottom: 0;
font-size: 14px;
}
b{
color:green;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}
div.main{
width: 306px;
padding: 10px 50px 30px;
border: 2px solid gray;
font-family: raleway;
float:left;
margin-top:15px;
}
input[type=text]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
input[type=password]{
width: 96%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #53bd84;
font-size: 16px;
}
label{
color: #53bd84;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=submit]{
font-size: 16px;
background: linear-gradient(#53bd84 5%, #fff 100%);
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
padding: 10px 0;
outline:none;
}
#profile {
padding:50px;
border:1px solid grey;
font-size:20px;
background-color:#A2DED0;
}
#logout {
float:right;
padding:5px;
border:dashed 1px gray
}
a {
text-decoration:none;
color:#6495ed
}
i {
color:#6495ed
}
|
Simpan semua file HTML, PHP dan CSS dalam satu folder bernama ”
nyekrip-form-login ” dan letakkan folder tersebut dalam folder htdocs.
Folder htdocs terletak dalam folder XAMPP, dalam tutorial ini kami
menggunakan XAMPP sebagai web server. Jika anda juga ingin memakai
XAMPP, ikuti tutorial ”
Cara Install XAMPP Web Server di Windows “.
Setelah melakukan semua langkah cara membuat form login diatas,
sekarang saatnya kita untuk mencoba form login dengan PHP dan MySQL yang
dilengkapi session dengan mengetik-kan alamat ”
http://localhost/nyekrip-form-login/index.php ” pada halaman browser.
