Tutorial PHP Login Session

Ada beberapa hal yang perlu Anda siapkan lebih dulu sebelum
membuat login session PHP, yaitu :

 Web Server. PHP tidak dapat dijalankan tanpa web

server. Nah, jika Anda membuat aplikasi PHP pada
komputer lokal (sebelum di hosting), Anda dapat
menggunakan aplikasi web server seperti XAMPP.
 Text Editor. Dibutuhkan untuk menulis kode
pemrograman, pada tutorial ini kami
menggunakan Visual Studio Code.
 Web Browser. Digunakan untuk mengakses website,
pada tutorial ini kami menggunakan Google Chrome.

Jika ketiga tools diatas sudah disiapkan, Anda dapat langsung

mengikuti 9 langkah membuat php login session sebagai
berikut :

1. Menjalankan XAMPP
2. Membuat Database
3. Membuat Struktur Project
4. Menghubungkan Database
5. Membuat Halaman Login
6. Membuat Halaman Register
7. Membuat Halaman Berhasil Login
8. Membuat File logout.php
9. Menambahkan File style.css

Nah, berikut ini penjelasan selengkapnya :

1. Menjalankan XAMPP

XAMPP merupakan aplikasi cross-platform (Windows, Linux,

MacOS) yang digunakan untuk membuat web server lokal pada
komputer Anda.
Dengan aplikasi ini, Anda dapat mengembangkan dan
melakukan testing website. Namun, Anda perlu menginstall
XAMPP dulu pada komputer Anda.

Nah, jika XAMPP sudah terinstall, langsung saja buka aplikasi,

lalu jalankan web server Apache dan MySQL. Caranya, klik
tombol Start seperti pada gambar berikut :

Baca Juga : Panduan Lengkap Cara Kirim Email dengan PHP

2. Membuat Database

Langkah pada tutorial php login session berikutnya adalah

membuat database.

Database diperlukan sebagai tempat penyimpanan data user,

seperti username, email, maupun password yang digunakan
untuk login.

Untuk membuat database, Anda perlu

mengakses localhost/phpmyadmin pada web browser.
Tampilannya akan seperti ini :
Pada bagian kiri halaman phpmyadmin, klik New untuk
membuat database baru.

Masukkan nama database yang akan Anda gunakan pada kolom

yang tersedia. Di contoh ini, kami menggunakan
nama niagahoster_login. Setelah itu, klik tombol Create untuk
membuat database.

Walaupun database baru Anda sudah berhasil dibuat, tapi isinya

masih kosong. Anda perlu menambahkan tabel users untuk
menyimpan data user website. Anda dapat menyalin query
SQL di bawah ini pada menu SQL di phpmyadmin:
1 CREATE TABLE `users` (
id int(11) NOT NULL AUTO_INCREMENT,
2
3 username varchar(255) NOT NULL,
4 email varchar(255) NOT NULL,
5 password varchar(255) NOT NULL,
6 PRIMARY KEY(id)
7 );
8
INSERT INTO `users` (`username`, `email`, `password`) VALUES
9 ('Niagahoster Tutorial', '[email protected]', '0139a3c5cf42394be982e76
10

Untuk menjalankan query tersebut, klik tombol Go seperti yang

ditunjukkan pada gambar berikut:

Sekarang, database Anda sudah memiliki tabel users yang

berisi atribut data id, username, email dan password.
3. Membuat Struktur Project

Setelah menyiapkan database, sekarang waktunya untuk

menulis kode program php login session. Tapi, sebelumnya
siapkan dulu struktur project webnya.

Pertama-tama, Anda harus membuat folder khusus untuk

menyimpan project web. Namun, folder tersebut harus
ditempatkan di dalam folder htdocs yang merupakan folder
home dari web server. Folder htdocs berada pada path C:\
xampp\htdocs
Pada contoh ini, kami membuat folder dengan
nama niagahoster_login. Di dalam folder ini, Anda bisa
membuat folder baru bernama images sebagai tempat untuk
menyimpan asset gambar yang akan digunakan pada website.

Selanjutnya, buat file baru dengan ekstensi .php dan .css seperti
pada gambar di atas. Penjelasan lebih detail mengenai file-file
tersebut akan disampaikan di langkah berikutnya.

Baca juga: Cara Membuat Website dengan PHP

4. Menghubungkan Database (config.php)

Untuk membuat login session PHP, Anda perlu

menghubungkan database yang baru dibuat dengan website.
Caranya, isilah file config.php yang telah dibuat pada langkah
sebelumnya dengan kode untuk membuat koneksi ke database
sebagai berikut :
1
2 <?php
3
$server = "localhost";
4 $user = "root";
5 $pass = "";
6 $database = "niagahoster_login";
7
8 $conn = mysqli_connect($server, $user, $pass, $database);
9
if (!$conn) {
10
die("<script>alert('Gagal tersambung dengan database.')</script>");
11 }
12
13 ?>
14

Ubah baris kode $database =

"niagahoster_login"; dengan nama database yang telah Anda
buat. Jika nama yang dituliskan salah, maka koneksi dengan
database tidak dapat terhubung.

Baca juga: PHP 8.1 Telah Dirilis! Simak Fitur Baru,

Perubahan, Cara Upgrade
5. Membuat Halaman Login (index.php)

Pada tutorial php session login ini, index.php berisi kode yang
digunakan untuk halaman login. Jika Anda perhatikan, dalam
file ini terdapat 2 bagian.

Bagian pertama adalah kode PHP yang digunakan untuk

validasi email dan password untuk login. Sedangkan, bagian
kedua merupakan kode HTML halaman login yang terdiri dari
link file CSS dan kerangka form login.
1 <?php
2
include 'config.php';
3
4
error_reporting(0);
5
6 session_start();
7
8 if (isset($_SESSION['username'])) {
9 header("Location: berhasil_login.php");
10 }
11
if (isset($_POST['submit'])) {
12 $email = $_POST['email'];
13 $password = md5($_POST['password']);
14
15 $sql = "SELECT * FROM users WHERE email='$email' AND password='$passwo
16 $result = mysqli_query($conn, $sql);
17 if ($result->num_rows > 0) {
$row = mysqli_fetch_assoc($result);
18 $_SESSION['username'] = $row['username'];
19 header("Location: berhasil_login.php");
20 } else {
21 echo "<script>alert('Email atau password Anda salah. Silahkan coba
}
22 }
23
24 ?>
25
26 <!DOCTYPE html>
27 <html>
28 <head>
<meta charset="utf-8">
29 <meta name="viewport" content="width=device-width, initial-scale=1.0">
30
31 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-a
32
33 <link rel="stylesheet" type="text/css" href="style.css">
34
35 <title>Niagahoster Tutorial</title>
36 </head>
<body>
37 <div class="alert alert-warning" role="alert">
38 <?php echo $_SESSION['error']?>
39 </div>
40
41 <div class="container">
<form action="" method="POST" class="login-email">
42 <p class="login-text" style="font-size: 2rem; font-weight: 800
43 <div class="input-group">
44
45
46
47
48
<input type="email" placeholder="Email" name="email" value=
49 </div>
50 <div class="input-group">
51 <input type="password" placeholder="Password" name="passwo
52 </div>
<div class="input-group">
53 <button name="submit" class="btn">Login</button>
54 </div>
55 <p class="login-register-text">Anda belum punya akun? <a href
56 </form>
57 </div>
</body>
58 </html>
59
60
61
62
63

Nantinya, kode di atas akan memiliki tampilan seperti gambar

di bawah ini jika sudah ditambahkan kode pada
file style.css. Anda dapat mengakses form login dengan
url localhost/niagahoster_login
6. Membuat Halaman Register (register.php)

Pada halaman ini, Anda akan membuat form registrasi.

Halaman ini dibuat karena untuk melakukan login, Anda
memerlukan data user yang tersimpan di database.

Sama seperti halaman login, halaman register juga terdiri dari 2

bagian, kode PHP dan HTML.

Bagian PHP berisi kode untuk menambahkan data user yang

dimasukkan pada kolom registrasi,
yaitu : username, email dan password.
Untuk jaminan keamanan, password yang dimasukkan akan
langsung dienkripsi pada database sehingga admin sekalipun
tidak dapat mengetahui password Anda.

Bagian HTML berisi kode untuk membuat struktur halaman

dan form registrasi. Agar lebih jelas, silahkan salin kode di
bawah ini pada file register.php
1 <?php
2
include 'config.php';
3
4
error_reporting(0);
5
6 session_start();
7
8 if (isset($_SESSION['username'])) {
9 header("Location: index.php");
10 }
11
if (isset($_POST['submit'])) {
12 $username = $_POST['username'];
13 $email = $_POST['email'];
14 $password = md5($_POST['password']);
15 $cpassword = md5($_POST['cpassword']);
16
17 if ($password == $cpassword) {
$sql = "SELECT * FROM users WHERE email='$email'";
18 $result = mysqli_query($conn, $sql);
19 if (!$result->num_rows > 0) {
20 $sql = "INSERT INTO users (username, email, password)
21 VALUES ('$username', '$email', '$password')";
$result = mysqli_query($conn, $sql);
22 if ($result) {
23 echo "<script>alert('Selamat, registrasi berhasil!')</scri
24 $username = "";
25 $email = "";
26 $_POST['password'] = "";
$_POST['cpassword'] = "";
27 } else {
28 echo "<script>alert('Woops! Terjadi kesalahan.')</script>"
29 }
30 } else {
31 echo "<script>alert('Woops! Email Sudah Terdaftar.')</script>"
}
32
33 } else {
34 echo "<script>alert('Password Tidak Sesuai')</script>";
35 }
36 }
37
38
39
40
41
42
43
44 ?>
45
<!DOCTYPE html>
46
<html>
47 <head>
48 <meta charset="utf-8">
49 <meta name="viewport" content="width=device-width, initial-scale=1.0">
50
51 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-a
52
<link rel="stylesheet" type="text/css" href="style.css">
53
54 <title>Niagahoster Register</title>
55 </head>
56 <body>
57 <div class="container">
58 <form action="" method="POST" class="login-email">
<p class="login-text" style="font-size: 2rem; font-weight: 800
59 <div class="input-group">
60 <input type="text" placeholder="Username" name="username" v
61 </div>
62 <div class="input-group">
<input type="email" placeholder="Email" name="email" value=
63
</div>
64 <div class="input-group">
65 <input type="password" placeholder="Password" name="passwo
66 </div>
67 <div class="input-group">
<input type="password" placeholder="Confirm Password" name
68 </div>
69 <div class="input-group">
70 <button name="submit" class="btn">Register</button>
71 </div>
72 <p class="login-register-text">Anda sudah punya akun? <a href
</form>
73 </div>
74 </body>
75 </html>
76
77
78
79
80
81
Script PHP akan berjalan ketika tombol Register di klik.
Setelah penambahan file CSS, nantinya halaman login akan
seperti gambar berikut ini :

7. Membuat Halaman berhasil_login.php

Untuk mengecek apakah php login session sudah berhasil

dibuat, kami membuat lagi sebuah halaman baru dengan
nama berhasil_login.php.

Jika Anda dapat mengakses halaman ini setelah melakukan

login, artinya php session login berhasil dibuat.
Pada halaman ini, kami hanya menampilkan ucapan selamat
datang dan tombol untuk melakukan logout. Berikut kode
lengkapnya :
1
2
3 <?php
4
5 session_start();
6
7 if (!isset($_SESSION['username'])) {
header("Location: index.php");
8 }
9
10 ?>
11
12 <!DOCTYPE html>
13 <html lang="en">
14 <head>
<meta charset="UTF-8">
15 <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-a
17
18 <link rel="stylesheet" type="text/css" href="style.css">
19 <title>Berhasil Login</title>
</head>
20 <body>
21 <div class="container-logout">
22 <form action="" method="POST" class="login-email">
23 <?php echo "<h1>Selamat Datang, " . $_SESSION['username'] ."!"
24
25 <div class="input-group">
<a href="logout.php" class="btn">Logout</a>
26 </div>
27 </form>
28 </div>
29 </body>
30 </html>
31
32

Nah, ini dia tampilan halaman ketika berhasil melakukan login:

Untuk melakukan logout, Anda hanya perlu klik
tombol Logout. Tombol ini akan mengarahkan Anda kembali
ke halaman login.
8. Membuat File logout.php

Ketika tombol Logout di klik, script logout.php akan

dijalankan. Script ini berfungsi untuk menghapus
session. session_destroy() menandakan bahwa session telah
berakhir dan Anda akan diarahkan ke
halaman index.php (halaman login).
1 <?php
2
session_start();
3
session_destroy();
4
5
header("Location: index.php");
6
7 ?>
8
9. Menambahkan File style.css

Untuk memperindah tampilan web, Anda perlu menambahkan

file CSS. File style.css ini dipanggil pada script HTML
halaman login, halaman register serta halaman berhasil login.

Sebelumnya, siapkan gambar yang akan Anda gunakan untuk

background, ya. Lalu, ganti nama file background-image yang
terdapat pada selektor body. Berikut ini kode lengkapnya :
1 @import url('https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900
2
3
* {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7 font-family: 'Poppins', sans-serif;
}
8
9 body {
10 width: 100%;
11 min-height: 100vh;
12 background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(ima
13 background-position: center;
background-size: cover;
14 display: flex;
15 justify-content: center;
16 align-items: center;
17 }
18
.container {
19 width: 400px;
20 min-height: 400px;
21 background: #FFF;
22 border-radius: 5px;
23 box-shadow: 0 0 5px rgba(0,0,0,.3);
padding: 40px 30px;
24 }
25
26 .container .login-text {
27 color: #111;
28 font-weight: 500;
29 font-size: 1.1rem;
text-align: center;
30 margin-bottom: 20px;
31 display: block;
text-transform: capitalize;
32
}
33
34 .container .login-email .input-group {
35 width: 100%;
36 height: 50px;
37 margin-bottom: 25px;
}
38
39 .container .login-email .input-group input {
40 width: 100%;
41 height: 100%;
42 border: 2px solid #e7e7e7;
43 padding: 15px 20px;
font-size: 1rem;
44 border-radius: 30px;
45 background: transparent;
46 outline: none;
47 transition: .3s;
}
48
49 .container .login-email .input-group input:focus, .container .login-email .inp
50 border-color: #a29bfe;
51 }
52
53 .container .login-email .input-group .btn {
54 display: block;
width: 100%;
55 padding: 15px 20px;
56 text-align: center;
57 border: none;
58 background: #a29bfe;
59 outline: none;
border-radius: 30px;
60 font-size: 1.2rem;
61 color: #FFF;
62 cursor: pointer;
63 transition: .3s;
}
64
65 .container .login-email .input-group .btn:hover {
66 transform: translateY(-5px);
67 background: #6c5ce7;
68 }
69
70 .login-register-text {
color: #111;
71 font-weight: 600;
72 }
73
74 .login-register-text a {
75 text-decoration: none;
color: #6c5ce7;
76
}
77
78 .container-logout {
width: 500px;
79
min-height: 200px;
80 background: #FFF;
81 border-radius: 5px;
82 box-shadow: 0 0 5px rgba(0,0,0,.3);
83 padding: 40px 30px;
}
84
85 .container-logout .login-email .input-group .btn {
86 display: block;
87 width: 100%;
88 padding: 15px 20px;
89 text-align: center;
border: none;
90 background: #a29bfe;
91 outline: none;
92 border-radius: 30px;
93 font-size: 1.2rem;
color: #FFF;
94 cursor: pointer;
95 transition: .3s;
96 margin-top: 20px;
97 }
98
99 .container-logout .login-email .input-group .btn:hover {
transform: translateY(-5px);
10 background: #6c5ce7;
0 }
10
1 @media (max-width: 430px) {
10 .container {
2 width: 300px;
}
10 }
3
10
4
10
5
10
6
10
7
10
8
10
9
11
0
11
1
11
2
11
3
11
4
11
5
11
6
11
7
11
8
11
9
12
0
12
1
12
2
12
3
12
4
12
5
12
6

Nah, sekarang coba cek lagi website Anda. Apakah sudah

terlihat lebih indah?

Baca Juga : 7+ Situs Belajar PHP Gratis

Kesimpulan
Itulah tutorial membuat PHP login session untuk website.
Bagaimana, sudah berjalan dengan baik, bukan?

Jika tidak berjalan, coba perhatikan lagi apakah folder project

yang Anda buat sudah tersimpan dalam folder C:\xampp\
htdocs?
Anda juga bisa menyesuaikan tampilan websitenya dengan
mengubah file CSS dan mengedit kode HTML-nya. Kalau
belum ada perubahan, lakukan refresh atau cobalah
menggunakan web browser lain.

Yang perlu diingat, setiap mengakses website, Anda juga harus

menjalankan service web server Apache dan MySQL
di XAMPP terlebih dulu, ya. Kecuali, jika website Anda sudah
diupload ke hosting. Sebab, hosting sudah memiliki web server
sendiri.

Oh ya, jangan sembarangan menggunakan layanan hosting, ya.

Pilihlah layanan hosting yang memiliki web server mumpuni,
seperti Niagahoster.

Niagahoster menyediakan hosting dengan web server tercepat,

yaitu Litespeed Enterprise. Ini akan memberikan jaminan
website Anda dapat diakses dengan cepat.

Selain itu, Niagahoster juga menawarkan unlimited database

pada akun hosting Anda. Sehingga, Anda tidak perlu khawatir
jika database website Anda tidak bisa diakses karena kehabisan
ruang penyimpanan.

Menariknya, layanan tersebut bisa Anda dapatkan hanya

dengan harga mulai Rp10rb/bulan saja loh! Yuk, mulai
berlangganan sekarang!