Membuat notifikasi berhasil login di php

Catatan kali ini adalah mengenai cara membuat sebuah form login dan juga logout dengan menggunakan Session pada PHP. Pertanyaan yang muncul pertama kali dalam benak Anda mungkin adalah Apa itu Session?. Saat Anda menggunakan sebuah aplikasi, Anda membuka aplikasi tersebut, melakukan beberapa perubahan pada aplikasi tersebut dan Anda menutup aplikasi tersebut. Ini bisa disebut seperti Session. Komputer bisa mengetahui siapa Anda, kapan Anda membuka Aplikasi dan kapan Anda menutup Aplikasi. Tapi dalam internet, ini merupakan sebuah masalah. Internet tidak bisa mengetahui siapa Anda atau apa yang sedang Anda lakukan karena alamat HTTP tidak bisa menyimpan sebuah status/informasi.

Dari cerita singkat tadi, masalah yang ada pada internet bisa diatasi dengan yang namanya Session. Session dapat menyimpan sebuah informasi dimana informasi tersebut bisa kita akses pada semua halaman website yang kita buat. Secara default, Session akan terhapus sampai Anda menutup browser.

Jadi intinya Session ini bisa menyimpan informasi yang bisa di akses pada semua halaman sampai browser nya ditutup.

Akun User
Saya telah menyiapkan 2 data user untuk tutorial ini, diantaranya :

User Admin
Username : rizaldi
Password : 12345678
User Operator
Username : siska
Password : siska123

DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.

STEP 1 – PERSIAPAN
Sebagai persiapan awal, silahkan buat sebuah folder baru dengan nama login_php, lalu simpan pada folder xampp/htdocs/.

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

Buat sebuah database dengan nama mynotescode.

Buat sebuah tabel dengan nama user. Struktur tabelnya sebagai berikut :

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `nama` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
)

STEP 3 – KONEKSI DATABASE
Pada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folder xampp/htdocs/login_php/. Berikut ini kodenya :

<?php
$host = 'localhost'; // Nama hostnya
$username = 'root'; // Username
$password = ''; // Password (Isi jika menggunakan password)
$database = 'mynotescode'; // Nama databasenya

// Koneksi ke MySQL dengan PDO
$pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>

STEP 4 – FORM LOGIN
Langkah selanjutnya adalah membuat 1 buah file yang berisi form loginnya. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/login_php/. Berikut tampilan dan kodenya :

<?php
session_start(); // Start session nya

// Kita cek apakah user sudah login atau belum
// Cek nya dengan cara cek apakah terdapat session username atau tidak
if(isset($_SESSION['username'])){ // Jika session username ada berarti dia sudah login
  header("location: welcome.php"); // Kita Redirect ke halaman welcome.php
}
?>

<html>
<head>
  <title>Halaman Sebelum Login</title>
</head>
<body>
  <h2>Silahkan login terlebih dahulu...</h2>
  
  <div style="color: red;margin-bottom: 15px;">
    <?php
    // Cek apakah terdapat cookie dengan nama message
    if(isset($_COOKIE["message"])){ // Jika ada
      echo $_COOKIE["message"]; // Tampilkan pesannya
    }
    ?>
  </div>
  
  <form method="post" action="login.php">
    <label>Username</label><br>
    <input type="text" name="username" placeholder="Username"><br><br>
    
    <label>Password</label><br>
    <input type="password" name="password" placeholder="Password"><br><br>
    
    <button type="submit">Login</button>
  </form>
</body>
</html>

session_start();
Skrip ini berfungsi untuk memulai/menjalankan session. karena disini kita akan membuat login menggunakan session.

$_SESSION[‘username‘]
Salah satu cara untuk mengambil value dari sebuah session adalah dengan struktur berikut $_SESSION[‘nama_session‘]. nama_session tersebut diisi sesuai dengan nama session yang kita buat saat mendeklarasikan/men-set sessionnya. Dalam tutorial ini saya set sessionnya dengan nama “username“. Kita akan set sessionnya pada proses login nanti pada step selanjutnya.

$_COOKIE[“message“]
Disini kita juga menggunakan yang namanya cookie. Apa sih cookie? cookie inifungsinya hampir sama dengan session. Hanya saja perbedaannya adalah cookie menyimpan informasinya di browser yang kita gunakan. Sementara session menyimpan informasinya pada server dari web itu sendiri. Cara untuk mengambil value dari cookie pun hampir sama dengan session yakni $_COOKIE[‘nama_cookie‘]. Cookie pada tutorial ini kita gunakan untuk menampung pesan error apabila login gagal.

STEP 5 – PROSES LOGIN
Langkah selanjutnya kita akan buat file untuk proses loginnya. Buat sebuah file dengan nama login.php, lalu simpan pada folder xampp/htdocs/login_php/. Berikut kodenya :

<?php
session_start(); // Start session nya

include "koneksi.php"; // Load file koneksi.php

$username = $_POST['username']; // Ambil value username yang dikirim dari form
$password = $_POST['password']; // Ambil value password yang dikirim dari form
$password = md5($password); // Kita enkripsi (encrypt) password tadi dengan md5

// Buat query untuk mengecek apakah ada data user dengan username dan password yang dikirim dari form
$sql = $pdo->prepare("SELECT * FROM user WHERE username=:a AND password=:b");
$sql->bindParam(':a', $username);
$sql->bindParam(':b', $password);
$sql->execute(); // Eksekusi querynya

$data = $sql->fetch(); // Ambil datanya dari hasil query tadi

// Cek apakah variabel $data ada datanya atau tidak
if( ! empty($data)){ // Jika tidak sama dengan empty (kosong)
  $_SESSION['username'] = $data['username']; // Set session untuk username (simpan username di session)
  $_SESSION['nama'] = $data['nama']; // Set session untuk nama (simpan nama di session)
  
  setcookie("message","delete",time()-1); // Kita delete cookie message
  
  header("location: welcome.php"); // Kita redirect ke halaman welcome.php
}else{ // Jika $data nya kosong
  // Buat sebuah cookie untuk menampung data pesan kesalahan
  setcookie("message", "Maaf, Username atau Password salah", time()+3600);
  
  header("location: index.php"); // Redirect kembali ke halaman index.php
}
?>

include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.

$sql = $pdo->prepare(“SELECT * FROM user WHERE username=:a AND password=:b”);
$sql->bindParam(‘:a’, $username);
$sql->bindParam(‘:b’, $password);
$sql->execute();
Kode tersebut berfungsi untuk melakukan query ke database dan mengeksekusinya. Pada cotoh diatas, kita akan melakukan query untuk menampilkan data user berdasarkan username dan password yang telah di input pada form login.

$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel $data. Dimana nantinya kita bisa memanggil data dari tabel pengguna dari hasil query diatas. Pada form login, saya memasukan username : rizaldi dan password: 12345678. Kalau kita lakukan print_r($data), maka hasilnya akan menjadi seperti gambar berikut :

Karena bentuk dari $data adalah array, maka ketika kita ingin mengakses data nya, kita tinggal panggil dengan $data[‘index_array‘]. Sebagai contoh saya ingin mengambil nama dari usernya, kita tinggal panggil $data[‘nama‘] atau kita juga bisa panggil dengan $data[3].

$_SESSION[‘username’] = $data[‘username’];
$_SESSION[‘nama’] = $data[‘nama’];
$_SESSION[‘role’] = $data[‘role’];
Sesuai yang saya katakan pada step sebelumnya, pada proses login, ketika data username dan password yang di masukkan pada form login sesuai dengan yang ada di database. Maka kita akan membuat/men-set sebuah session. Disini saya set 2 session, yang pertama adalah session username ($_SESSION[‘username’]). Session username ini saya isi dengan username yang diambil dari hasil query tadi ($data[‘username’]). Yang kedua adalah session nama ($_SESSION[‘nama’]). Session nama ini juga saya isi dengan nama yang diambil dari hasil query tadi ($data[‘nama’]).

setcookie(“message”, “Maaf, Username atau Password salah”, time()+3600);
Kode ini berfungsi untuk membuat sebuah cookie. Seperti yang saya jelaskan, cookie ini akan kita gunakan untuk menyimpan pesan error yang nantinya akan kita tampilkan pada form login. Disini saya set masa berlaku cookie nya 1 jam (time()+3600). Struktur dasar untuk set cookie ini adalah setcookie(“nama_cookie”, “isi_cookie”, masa_berlaku);

STEP 6 – HALAMAN SETELAH LOGIN
Selanjutnya kita akan buat file untuk halaman setelah loginnya. Buat sebuah file dengan nama welcome.php, lalu simpan pada folder xampp/htdocs/login_php/. Berikut tampilan dan kodenya :

<?php
session_start(); // Start session nya

// Kita cek apakah user sudah login atau belum
// Cek nya dengan cara cek apakah terdapat session username atau tidak
if( ! isset($_SESSION['username'])){ // Jika tidak ada session username berarti dia belum login
  header("location: index.php"); // Kita Redirect ke halaman index.php karena belum login
}
?>

<html>
<head>
  <title>Halaman Setelah Login</title>
</head>
<body>
  <h2>Selamat datang <?php echo $_SESSION['nama']; ?></h2>
  <h4>Anda berhasil login ke dalam aplikasi</h4>
  
  <a href="logout.php">Logout</a>
</body>
</html>

echo $_SESSION[‘nama’];
Skrip ini berfungsi untuk memanggil session nama yang telah kita set tadi pada proses login. Dimana isinya adalah nama dari user yang login yang kita ambil dari tabel user di database.

STEP 7 – PROSES LOGOUT
Selanjutnya kita akan buat file untuk proses logoutnya. Buat sebuah file dengan nama logout.php, lalu simpan pada folder xampp/htdocs/login_php/. Berikut kodenya :

<?php
session_start(); // Start session nya
session_destroy(); // Hapus semua session

header("location: index.php"); // Redirect ke halaman index.php
?>

session_destroy();
Kode ini berfungsi untuk menghapus semua session yang ada pada website kita.

Sekian untuk tutorial kali ini. Jika ada hal yang ingin ditanyakan, langsung tanyakan saja lewat kolom komentar dibawah ini. Jangan lupa LIKE dan SHARE nya hehe, Terimakasih.

SOURCE CODE
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi PDO : Link download yang sesuai tutorial ini yakni menggunakan fungsi PDO untuk query ke databasenya
– Download versi MySQLi : Link download untuk Anda yang ingin source code versi MySQLi dari tutorial ini

SUMBER & REFERENSI
https://www.w3schools.com/php/php_sessions.asp

Tutorial membuat login dengan session di php, Tutorial mudah membuat form login menggunakan session dengan php dan mysql. Buat login pakai session dengan php. Cara buat form login dengan php dan mysql. Source code login dengan session di php