Ketika membuat website PHP, Anda perlu menambahkan halaman login untuk membedakan pengunjung yang datang, misalnya member dan non-member. Namun, untuk meningkatkan keamanan website, Anda sebaiknya juga membuat session login PHP di halaman login.
PHP login session memungkinkan website Anda untuk dapat mengidentifikasi pengguna yang masuk, membatasi akses ke informasi pribadi, dan memastikan hanya pengguna yang sah yang dapat mengaksesnya.
Nah! Artikel ini akan mengajak Anda belajar cara membuat session login PHP dengan database MySQL. Langkah-langkahnya cukup sederhana dan mudah dipraktikkan, bahkan oleh Anda yang masih pemula sekalipun.
Jika Anda sudah siap, ini dia panduan lengkapnya!
Cara Membuat PHP Session Login dan Logout
Pada tutorial ini, kami akan membuat login dengan PHP pada website online. Namun, jika website Anda masih berada di komputer lokal, Anda tetap dapat mengikuti panduan ini karena langkah-langkahnya tidak jauh berbeda. Yang penting, Anda telah menginstall aplikasi web server seperti XAMPP.
Ini dia cara membuat PHP login session dalam 9 langkah mudah:
- Login ke Member Area Niagahoster.
- Buat Database MySQL.
- Siapkan Struktur Project PHP.
- Hubungkan PHP dengan MySQL.
- Buat Halaman Login PHP.
- Rancang Form Registrasi Website.
- Bangun Halaman Berhasil Login.
- Tambahkan Fungsi Logout.
- Percantik Website dengan CSS.
Yuk langsung mulai dari langkah yang pertama!
1. Login ke Member Area Niagahoster
Bagi Anda pelanggan layanan web hosting Niagahoster, silakan awali cara membuat PHP login session dengan melakukan login ke Member Area.
Setelah berhasil masuk, Anda akan diarahkan ke tampilan Member Area Niagahoster, seperti pada gambar di bawah. Silakan klik tombol Kelola pada akun hosting Anda.
Pada Dashboard Pengelolaan Hosting, silakan klik menu Database seperti pada gambar:
Anda akan diarahkan menuju halaman Pengelolaan Database untuk membuat database baru.
2. Buat Database MySQL
Berikutnya, Anda dapat membuat database MySQL untuk menyimpan data pengguna, seperti alamat email, username, dan password.
Pada halaman Pengelolaan Database, silakan isi kolom Nama Database MySQL, Username MySQL, dan Password lalu klik tombol Buat. Jangan lupa untuk menyimpan detail database Anda.
Jika sudah, scroll ke bawah dan klik Masuk ke phpMyAdmin di sebelah kanan database yang baru Anda buat.
Anda akan dibawa menuju halaman phpMyAdmin dengan tampilan seperti di bawah. Silakan pilih opsi SQL pada toolbar atas.
Kemudian, salin perintah SQL berikut pada kolom yang tersedia. Jika sudah, klik tombol Go.
CREATE TABLE `users` (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(64) NOT NULL,
PRIMARY KEY(id)
);
INSERT INTO `users` (`username`, `email`, `password`) VALUES ('admin', 'admin@email.com', SHA2('password', 256));
Sekarang, database Anda telah memiliki tabel users yang berisi id, username, password, dan email.
3. Siapkan Struktur Project PHP
Setelah mengisi database, sekarang saatnya menyiapkan struktur project untuk bahasa pemrograman PHP.
Untuk membuat struktur project, silakan kembali ke Dashboard Pengelolaan Hosting dan pilih menu File Manager.
Setelah berada di File Manager, klik dua kali pada public_html untuk membuka folder tersebut.
Berikutnya, klik opsi Folder Baru untuk membuat folder baru bernama Images. Folder ini berfungsi untuk menyimpan asset gambar pada website Anda.
Jika sudah, waktunya membuat file baru dengan mengakses opsi File Baru. Ada 5 file yang harus Anda buat, yaitu:
- berhasil_login.php
- config.php
- index.php
- logout.php
- register.php
- style.css
4. Hubungkan PHP dengan MySQL
Langkah berikutnya dalam cara membuat session login PHP adalah menghubungkan PHP ke MySQL.
Caranya dengan mengklik kanan file config.php lalu pilih opsi Edit.
Setelah itu, salin contoh script PHP di bawah:
<?php
$server = "localhost";
$user = "username_database";
$pass = "password_database";
$database = "nama_database";
$conn = mysqli_connect($server, $user, $pass, $database);
if (!$conn) {
die("Koneksi ke database gagal: " . mysqli_connect_error());
}
?>
Ganti isian $user, $pass, dan $database dengan kredensial database yang telah Anda catat sebelumnya.
Jika sudah, klik tombol Save di pojok kanan atas.
5. Buat Halaman Login PHP
Pada tutorial session login dengan PHP ini, file index.php berisi kode yang akan digunakan untuk membuat halaman login. File ini terdiri dari dua bagian:
Bagian pertama adalah kode PHP untuk memvalidasi email dan password pengguna. Jika pengguna salah menginputkan kredensial, maka mereka tidak dapat login dan sistem akan menampilkan pesan error. Sedangkan bagian kedua berisi kode HTML untuk merancang tampilan form login.
Untuk membangun halaman login, edit file index.php lalu salin script login PHP berikut:
<?php
include 'config.php';
session_start();
if (isset($_SESSION['username'])) {
header("Location: berhasil_login.php");
exit();
}
if (isset($_POST['submit'])) {
$email = mysqli_real_escape_string($conn, $_POST['email']);
$password = hash('sha256', $_POST['password']); // Hash the input password using SHA-256
$sql = "SELECT * FROM users WHERE email='$email' AND password='$password'";
$result = mysqli_query($conn, $sql);
if ($result->num_rows > 0) {
$row = mysqli_fetch_assoc($result);
$_SESSION['username'] = $row['username'];
header("Location: berhasil_login.php");
exit();
} else {
echo "<script>alert('Email atau password Anda salah. Silakan coba lagi!')</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Niagahoster Tutorial</title>
</head>
<body>
<div class="container">
<form action="" method="POST" class="login-email">
<p class="login-text" style="font-size: 2rem; font-weight: 800;">Login</p>
<div class="input-group">
<input type="email" placeholder="Email" name="email" required>
</div>
<div class="input-group">
<input type="password" placeholder="Password" name="password" required>
</div>
<div class="input-group">
<button name="submit" class="btn">Login</button>
</div>
<p class="login-register-text">Anda belum punya akun? <a href="register.php">Register</a></p>
</form>
</div>
</body>
</html>
Jangan lupa untuk menyimpan perubahan yang baru saja Anda lakukan.
Kode PHP di atas akan menampilkan halaman seperti gambar berikut, setelah menambahkan kode pada file style.css. Anda dapat mengakses form login melalui alamat domain Anda, misalnya domainanda.com.
6. Rancang Form Registrasi Website
Setelah halaman login siap, lanjutkan dengan membuat form registrasi bagi pengguna baru yang ingin mendaftar. Halaman ini merupakan contoh pemanfaatan metode CRUD (Create, Read, Update, Delete) untuk menyimpan data pengguna ke database.
Layaknya file login.php, halaman ini juga terdiri dari dua bagian utama: PHP dan HTML. Bagian PHP berisi kode untuk menyimpan alamat email, username, dan password yang didaftarkan pengguna.
Silakan edit file register.php lalu tuliskan kode di bawah:
<?php
include 'config.php';
session_start();
if (isset($_SESSION['username'])) {
header("Location: index.php");
exit();
}
if (isset($_POST['submit'])) {
$username = $_POST['username'];
$email = $_POST['email'];
$password = hash('sha256', $_POST['password']); // Hash the input password using SHA-256
$cpassword = hash('sha256', $_POST['cpassword']); // Hash the input confirm password using SHA-256
if ($password == $cpassword) {
$sql = "SELECT * FROM users WHERE email='$email'";
$result = mysqli_query($conn, $sql);
if (!$result->num_rows > 0) {
$sql = "INSERT INTO users (username, email, password)
VALUES ('$username', '$email', '$password')";
$result = mysqli_query($conn, $sql);
if ($result) {
echo "<script>alert('Selamat, registrasi berhasil!')</script>";
$username = "";
$email = "";
$_POST['password'] = "";
$_POST['cpassword'] = "";
} else {
echo "<script>alert('Woops! Terjadi kesalahan.')</script>";
}
} else {
echo "<script>alert('Woops! Email Sudah Terdaftar.')</script>";
}
} else {
echo "<script>alert('Password Tidak Sesuai')</script>";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Niagahoster Register</title>
</head>
<body>
<div class="container">
<form action="" method="POST" class="login-email">
<p class="login-text" style="font-size: 2rem; font-weight: 800;">Register</p>
<div class="input-group">
<input type="text" placeholder="Username" name="username" value="<?php echo $username; ?>" required>
</div>
<div class="input-group">
<input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
</div>
<div class="input-group">
<input type="password" placeholder="Password" name="password" value="<?php echo $_POST['password']; ?>" required>
</div>
<div class="input-group">
<input type="password" placeholder="Confirm Password" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
</div>
<div class="input-group">
<button name="submit" class="btn">Register</button>
</div>
<p class="login-register-text">Anda sudah punya akun? <a href="index.php">Login</a></p>
</form>
</div>
</body>
</html>
Simpan file register.php setelah menyalin kode di atas.
Ini dia tampilan yang muncul di layar jika Anda mengakses halaman registrasi pengguna:
7. Bangun Halaman Berhasil Login
Untuk mengkonfirmasi apakah pengguna telah berhasil login, kami mengikutsertakan sebuah halaman bernama berhasil_login.php. Jika pengguna dapat mengakses halaman ini, maka PHP session login berhasil dibuat.
Halaman berhasil login hanya menampilkan teks “Selamat Datang” dan sebuah tombol untuk logout.
Ini dia script yang perlu Anda salin pada halaman berhasil_login.php:
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: index.php");
exit(); // Terminate script execution after the redirect
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Berhasil Login</title>
</head>
<body>
<div class="container-logout">
<form action="logout.php" method="POST" class="login-email">
<h1>Selamat Datang, <?php echo $_SESSION['username']; ?>!</h1>
<div class="input-group">
<button type="submit" class="btn">Logout</button>
</div>
</form>
</div>
</body>
</html>
Seperti ini hasil tampilan dari halaman berhasil login:
8. Tambahkan Fungsi Logout
Pada halaman sebelumnya, Anda telah melihat tampilan tombol logout. Namun jika diklik, tombol ini belum berfungsi sama sekali. Untuk itu, Anda perlu menambahkan fungsi logout pada file logout.php.
Untuk mempraktikkan cara membuat logout dengan PHP, edit file logout.php lalu salin script di bawah:
<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php");
exit();
?>
9. Percantik Website dengan CSS
Terakhir, Anda perlu menambahkan CSS dengan file style.css untuk mempercantik tampilan website. File CSS ini dimanfaatkan pada halaman login, registrasi, dan berhasil login.
Pertama, siapkan gambar yang akan Anda gunakan sebagai background. Lalu, upload gambar tersebut ke folder images.
Jika sudah, buka file style.css lalu salin kode di bawah:
@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;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(images/gambar.jpg);
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
color: #111;
}
.container {
width: 400px;
min-height: 400px;
background: #FFF;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
padding: 40px 30px;
}
.container-logout {
width: 500px;
min-height: 200px;
background: #FFF;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
padding: 40px 30px;
}
h1 {
font-weight: 500;
font-size: 1.1rem;
text-align: center;
margin-bottom: 20px;
display: block;
text-transform: capitalize;
}
.input-group {
width: 100%;
margin-bottom: 25px;
}
.input-group input {
width: 100%;
height: 50px;
border: 2px solid #e7e7e7;
padding: 15px 20px;
font-size: 1rem;
border-radius: 30px;
background: transparent;
outline: none;
transition: .3s;
}
.input-group input:focus, .input-group input:valid {
border-color: #a29bfe;
}
.input-group .btn {
display: block;
width: 100%;
padding: 15px 20px;
text-align: center;
border: none;
background: #a29bfe;
outline: none;
border-radius: 30px;
font-size: 1.2rem;
color: #FFF;
cursor: pointer;
transition: .3s;
}
.input-group .btn:hover {
transform: translateY(-5px);
background: #6c5ce7;
}
.login-register-text, .login-register-text a {
color: #111;
font-weight: 600;
text-decoration: none;
}
.login-register-text a {
color: #6c5ce7;
}
@media (max-width: 430px) {
.container {
width: 300px;
}
}
Pastikan untuk mengganti gambar.jpg dengan nama file Anda beserta ekstensinya.
Selamat! Anda telah berhasil mempraktikkan cara membuat session login PHP dari awal hingga akhir.
Setelah ini, Anda dapat memodifikasi website tersebut untuk menambah fitur-fitur baru, misalnya menggunakan PHP composer untuk memudahkan penulisan kode dan pengelolaan library.
Anda juga dapat mengunjungi berbagai situs belajar PHP untuk meningkatkan pemahaman terhadap bahasa pemrograman yang satu ini.
Kesimpulan
Dalam artikel ini, Anda telah mengetahui bagaimana cara membuat PHP login session dan logout dengan database MySQL. Menggunakan session login dapat membantu meningkatkan keamanan website PHP. Caranya dengan memastikan hanya pengguna terdaftar yang bisa mengakses halaman tertentu.
Namun, perlu diketahui bahwa keamanan website tidak hanya ditentukan oleh script atau kode yang digunakan. Pastikan Anda memilih layanan hosting yang memiliki sistem keamanan mutakhir, seperti Web Hosting Niagahoster.
Layanan ini dibekali berbagai fitur keamanan canggih, seperti Gratis SSL untuk melindungi informasi pribadi Anda, Pendeteksi Malware untuk menemukan dan menghapus file berbahaya, Perlindungan Privasi untuk menyembunyikan data WHOIS Anda, serta Pemblokiran IP dan Negara untuk menutup akses yang tidak diinginkan.
Menarik sekali, bukan? Jadi tunggu apalagi, yuk kembangkan website PHP Anda dengan Web Hosting Niagahoster sekarang!
FAQ PHP Login Session
Session di PHP digunakan untuk menyimpan data pengguna secara sementara saat mengunjungi suatu website. PHP dapat mengidentifikasi pengguna secara unik dan menyimpan data mereka selama sesi pengguna dalam situs tersebut. Hal ini dapat meningkatkan pengalaman pengguna dan fungsionalitas situs web.
Anda sebaiknya menggunakan session ketika Anda perlu menyimpan data pengguna saat mereka berada di halaman web Anda. Session berguna dalam beberapa situasi, misalnya autentikasi pengguna ketika login, penanganan keranjang belanja di website toko online, atau menyimpan preferensi cookies dari pengguna.
Untuk menghapus session dalam pemrograman PHP, Anda dapat memanfaatkan fungsi session_unset() untuk menghapus semua variabel session yang ada. Kemudian, lanjutkan dengan fungsi session_destroy() untuk mengakhiri sesi pengguna saat ini. Dengan cara ini, data session akan dihapus dan pengguna diarahkan keluar dari sesi mereka.
