Cara Membuat PHP Session Login dan Logout

Cara Membuat PHP Session Login dan Logout dengan Mudah

7+ Situs Belajar PHP Gratis dari Pemula sampai Mahir

Kalau website Anda membedakan pengunjung yang datang, misalnya member dan non member, membuat PHP login session sangat diperlukan.

Dengan login session PHP, Anda dapat membatasi hak akses pengunjung agar dapat mengakses konten atau menu sesuai role yang dimiliki.

Lalu, bagaimana cara membuat login dengan PHP menggunakan session? Tidak rumit, kok. Yuk, langsung saja simak panduan lengkapnya!

Daftar isi tutup

1 Tutorial PHP Login Session

1.1 1. Menjalankan XAMPP

1.2 2. Membuat Database

1.3 3. Membuat Struktur Project

1.4 4. Menghubungkan Database (config.php)

1.5 5. Membuat Halaman Login (index.php)

1.6 6. Membuat Halaman Register (register.php)

1.7 7. Membuat Halaman berhasil_login.php

1.8 8. Membuat File logout.php

1.9 9. Menambahkan File style.css

2 Kesimpulan

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 :

Menjalankan XAMPP
Membuat Database
Membuat Struktur Project
Menghubungkan Database
Membuat Halaman Login
Membuat Halaman Register
Membuat Halaman Berhasil Login
Membuat File logout.php
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 :

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.

Memasukkan nama database baru untuk php login session

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:

CREATE TABLE `users` (
  id int(11) NOT NULL AUTO_INCREMENT,
  username varchar(255) NOT NULL,
  email varchar(255) NOT NULL,
  password varchar(255) NOT NULL,
  PRIMARY KEY(id)
);

INSERT INTO `users` (`username`, `email`, `password`) VALUES
('Niagahoster Tutorial', 'nhtutorial@gmail.com', '0139a3c5cf42394be982e766c93f5ed0');

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.

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 :

<?php 

$server = "localhost";
$user = "root";
$pass = "";
$database = "niagahoster_login";

$conn = mysqli_connect($server, $user, $pass, $database);

if (!$conn) {
    die("<script>alert('Gagal tersambung dengan database.')</script>");
}

?>

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.

Gagal tersambung dengan database php login session

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.

<?php 

include 'config.php';

error_reporting(0);

session_start();

if (isset($_SESSION['username'])) {
    header("Location: berhasil_login.php");
}

if (isset($_POST['submit'])) {
 $email = $_POST['email'];
 $password = md5($_POST['password']);

 $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");
 } else {
  echo "<script>alert('Email atau password Anda salah. Silahkan 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="alert alert-warning" role="alert">
  <?php echo $_SESSION['error']?>
 </div>

 <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" 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">
    <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>

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

<?php 

include 'config.php';

error_reporting(0);

session_start();

if (isset($_SESSION['username'])) {
    header("Location: index.php");
}

if (isset($_POST['submit'])) {
 $username = $_POST['username'];
 $email = $_POST['email'];
 $password = md5($_POST['password']);
 $cpassword = md5($_POST['cpassword']);

 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>

Script PHP akan berjalan ketika tombol Register di klik. Setelah penambahan file CSS, nantinya halaman login akan seperti gambar berikut ini :

Tampilan halaman register untuk php login session

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 :

<?php 

session_start();

if (!isset($_SESSION['username'])) {
    header("Location: index.php");
}

?>

<!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="" method="POST" class="login-email">
   <?php echo "<h1>Selamat Datang, " . $_SESSION['username'] ."!". "</h1>"; ?>
   
   <div class="input-group">
            <a href="logout.php" class="btn">Logout</a>
   </div>
  </form>
 </div>
</body>
</html>

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).

<?php 

session_start();
session_destroy();

header("Location: index.php");

?>

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 :

@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;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    min-height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(images/bg5.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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 .login-text {
    color: #111;
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 20px;
    display: block;
    text-transform: capitalize;
}

.container .login-email .input-group {
    width: 100%;
    height: 50px;
    margin-bottom: 25px;
}

.container .login-email .input-group input {
    width: 100%;
    height: 100%;
    border: 2px solid #e7e7e7;
    padding: 15px 20px;
    font-size: 1rem;
    border-radius: 30px;
    background: transparent;
    outline: none;
    transition: .3s;
}

.container .login-email .input-group input:focus, .container .login-email .input-group input:valid {
    border-color: #a29bfe;
}

.container .login-email .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;
}

.container .login-email .input-group .btn:hover {
    transform: translateY(-5px);
    background: #6c5ce7;
}

.login-register-text {
    color: #111;
    font-weight: 600;
}

.login-register-text a {
    text-decoration: none;
    color: #6c5ce7;
}

.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;
}

.container-logout .login-email .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;
    margin-top: 20px;
}

.container-logout .login-email .input-group .btn:hover {
    transform: translateY(-5px);
    background: #6c5ce7;
}

@media (max-width: 430px) {
    .container {
        width: 300px;
    }
}

Nah, sekarang coba cek lagi website Anda. Apakah sudah terlihat lebih indah?

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!

Saya Ingin Berlangganan Hosting Niagahoster Sekarang!

Demikianlah panduan cara membuat login dengan php menggunakan session, semoga artikel ini bermanfaat pagi Anda ya 🙂

Nida Regita F

SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

NEXTTips Memanfaatkan Analisis SWOT untuk Bisnis Online Anda [Edisi 2021] »

PREVIOUS« Bootstrap: Pengertian, Kegunaan, Kelebihan, dan Kekurangannya

PUBLISHED BY

Nida Regita F

TAGS:loginlogoutphp

4 MONTHS AGO

Bootstrap 5 : Pengertian, Fitur, Keunggulan dan Cara Menggunakannya
Penggunaan Bootstrap untuk mengembangkan aplikasi web membuat proses koding lebih mudah dan cepat. Sayangnya, versi…
Mengenal Express.js: Pengertian, Cara Kerja, Keunggulan, Tutorial
Menggunakan framework dapat mempercepat proses pengembangan website. Sebenarnya, ada banyak pilihan framework yang bisa Anda…
Cloud Computing: Pengertian, Cara Kerja, dan Fungsinya
Cloud computing adalah teknologi komputasi yang harus mulai Anda manfaatkan, baik sebagai individu ataupun bisnis.…

Jasa SEO: Benarkah 7 Layanan Jasa SEO Ini Anda Butuhkan?

Ingin menggunakan jasa SEO? Sebaiknya ketahui dulu layanan apa saja yang ditawarkan, kelebihan, kekurangan, dan mengapa lebih baik Anda belajar…

21 hours ago

WEB DEVELOPMENT & DESIGN

Bootstrap 5 : Pengertian, Fitur, Keunggulan dan Cara Menggunakannya

Penggunaan Bootstrap untuk mengembangkan aplikasi web membuat proses koding lebih mudah dan cepat. Sayangnya, versi terdahulu Bootstrap masih membuat load…

2 days ago

WEB DEVELOPMENT & DESIGN

10 Front End Framework Terbaik untuk Developer [Update 2021]

Ada banyak cara membangun tampilan depan website melalui coding. Salah satu yang paling mudah yaitu dengan menggunakan front end framework.…

3 days ago

WORDPRESS

Cara Mengatasi Error 403 Forbidden Pada Website WordPress

Apakah website Anda menampilkan notifikasi error 403 Forbidden - you don’t have permission to access/on this server? Error tersebut biasanya…

4 days ago

WEB DEVELOPMENT & DESIGN

Mengenal Express.js: Pengertian, Cara Kerja, Keunggulan, Tutorial

Menggunakan framework dapat mempercepat proses pengembangan website. Sebenarnya, ada banyak pilihan framework yang bisa Anda gunakan. Tapi kali ini, kami…

6 days ago

WORDPRESS

30+ Plugin WordPress Terbaik yang Wajib Anda Install

Sekarang membangun website bisa Anda lakukan dengan mudah. Bahkan Anda tidak harus mengerti bahasa pemrograman yang rumit. Hanya dengan plugin…

7 days ago

BAHASA PEMOGRAMAN

Cari Blog Ini