Cara Membuat PHP Session Login dan Logout dengan Mudah

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!

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 Berhasil Login
Membuat File logout.php
Menambahkan File style_login.css
Menambahkan File style_berhasil_login.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 login_sidang. 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:

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
('Muhammaddun', 'madun2521@gmail.com', '12345');

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

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 = "login_sidang";
 
$conn = mysqli_connect($server, $user, $pass, $database);
 
if (!$conn) {
    die("<script>alert('Gagal tersambung dengan database.')</script>");
}
 
?>

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 = $_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" type="text/css" href="style_login.css">
 
    <title>Login Sidang</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>
            
        </form>
    </div>
</body>
</html>

6. Menambahkan File style_login.css

Untuk memperindah tampilan web, Anda perlu menambahkan file CSS. File style_login.css ini dipanggil pada script HTML halaman login.

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

Nantinya, kode di atas akan memiliki tampilan seperti gambar di bawah ini. Anda dapat mengakses form login dengan url localhost/login_sidang

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="style_berhasil_login.css">

    <title>Login Sidang</title>

</head>

<body>

    <div class="container">

        <div class="sidebar">

            <nav>

                <ul>

                    <li><a href="">Menu_1</a></li>

                    <li><a href="">Menu_2</a></li>

                    <li><a href="">Menu_3</a></li>

                    <li><a href="">Menu_4</a></li> 

                </ul>

            </nav>

        </div>

        <main class="content">

              <section class="hero">

                  <img src="online.png" alt="">

              <div class="hero-content">

                  <h1><?php echo "Selamat Datang, " . $_SESSION['username']; ?></h1><br></h2>Alhamdulillah Sudah bisa mengerjakan ujian sidang coding</h2><br><br>  

                  <p>Ujian sidang coding ini saya pelajari dalam waktu 4 tahun selama kuliah. Terima kasih bapak ibu yang telah mengajarkan saya selama ini.</p>

                <form action="" method="POST">

                  <a href="logout.php" class="action-btn">Logout</a>

                </form>

              </div>

                </section>

        </div>

    </div>    

</body>

</html>

8. Menambahkan File style_berhasil_login.css

Untuk memperindah tampilan web, Anda perlu menambahkan file CSS. File style_berhasil_login.css ini dipanggil pada script HTML halaman login.

* {

    margin: 0;

    padding: 0;

}

body {

    background-color: #eff1f2;

    font-family: sans-serif;

}

.content {

    grid-area: content;

}

.sidebar {

    grid-area: sidebar;

    background: linear-gradient(to right, rgba(200, 107, 142, 1), rgba(218, 105, 250, 1),

            rgba(110, 125, 253, 1));

    justify-content: center;

}

.footer {

    grid-area: footer;

    background: white;

}

.container {

    font-size: 1.5em;

    width: 100%;

    height: 100;

    height: 100vh;

    display: grid;

    grid-template-areas: "sidebar""content""footer";

    grid-template-columns: 1fr;

    grid-template-rows: 130px 800px 250px;

}

.content,

.sidebar,

.footer {

    padding: 1em;

}

nav ul {

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: space-between;

    text-align: center;

}

nav li {

    list-style: none;

    padding: 1em 0;

}

nav li a {

    color: white;

    font-weight: 700;

    opacity: 0.6;

    text-decoration: none;

    transition: 0.3s;

}

nav li a:hover {

    opacity: 1;

}

.hero {

    max-width: 90 px;

    margin: 0 auto;

    text-align: center;

}

.hero img {

    width: 200px;

}

.hero h1 {

    font-size: 2em;

    font-weight: 300;

    color: #373046;

}

.hero p {

    font-weight: 300;

    line-height: 1.3em;

    color: #98aBad;

}

.action-btn {

    display: inline-block;

    text-decoration: none;

    color: white;

    font-weight: 700;

    background: #567bfb;

    padding: 0.5em 2em;

    border-radius: 60px;

    margin: 1em 0;

    transition: 0.3s;

}

footer ul {

    max-width: 640px;

    margin: 2em auto;

    padding: 0;

    text-align: center;

    display: flex;

    flex-direction: row;

}

footer ul li {

    list-style: none;

    align-self: flex-end;

}

footer ul li a {

    text-decoration: none;

    color: #c1c6ce;

}

footer ul li img {

    width: 30%;

}

footer p {

    font-size: 0.8em;

}

@media (min-width: 1040px) {

    .container {

        grid-template-areas: "sidebar content""sidebar footer";

        grid-template-rows: 1fr auto;

        grid-template-columns: 300px 1f;

}

    nav ul {

        display: flex;

        justify-content: space-between;

        flex-direction: column;

}

    .sidebar {

        background: linear-gradient(rgba(200, 107, 142, 1), rgba(218, 105, 250, 1),

                rgba(110, 125, 253, 1));

        padding-top: 10em;

}

    .hero {

        text-align: left;

        margin: 7em 0;

}

    .hero img {

        width: 200px;

        float: right;

}

    .hero h1 {

        font-size: 3em;

}

    .hero p {

        width: 60%;

}

    footer ul {

        max-width: 900px;

        margin: 0 auto;

        padding: 1em 0;

}

    footer ul li a img {

        width: 20%;

}

}

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.

9. 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");
 
?>

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

Terima Kasih

Cari Blog Ini

BORNEO DEVELOPMENT SERVICES