Garis besar topik

  • Skrip Login PHP dengan Sesi

    Dalam tutorial ini, mari kita buat skrip login dengan sesi di PHP. Skrip ini berisi contoh sederhana penerapan autentikasi pengguna. Contoh ini menggunakan formulir login standar untuk mendapatkan detail login pengguna. Dan skrip ini mempertahankan status login dengan sesi PHP.

    Masuk adalah langkah pertama di banyak aplikasi. Terkadang, sebagian fungsi istimewa aplikasi akan meminta pengguna untuk masuk.

    Jadi, skrip login merupakan bagian integral dari sebuah aplikasi. Saya akan menunjukkan implementasi sistem login dengan kode minimal.

    Autentikasi akan membantu kami mengidentifikasi pengguna asli. Dengan mengaktifkan autentikasi, kami dapat melindungi situs web kami dari akses anonim.

    Apa isinya?

    1. Cara membuat sistem otentikasi
    2. Tentang contoh ini
    3. Struktur berkas
    4. Antarmuka login pengguna
    5. Kode PHP untuk memproses login
    6. Dapatkan data profil pengguna yang masuk untuk menampilkan pesan selamat datang
    7. Menangani kode logout di PHP
    8. Skrip basis data
    9. Detail login uji coba
    10. Skrip login PHP dengan keluaran sesi

    Cara membuat sistem otentikasi

    Ada berbagai cara untuk menerapkan sistem autentikasi. Cara yang paling populer adalah dengan mendapatkan nama pengguna dan kata sandi melalui formulir login dan melakukan autentikasi berdasarkan informasi tersebut.

    Skrip Login PHP dengan Sesi

    Belakangan ini, autentikasi menggunakan OTP juga menjadi hal yang umum. OTP bersifat dinamis dan hanya dapat digunakan sekali.

    Untuk autentikasi OTP, aplikasi mengirimkannya melalui SMS atau email. Di artikel sebelumnya, kita telah melihat contoh kode dalam PHP untuk masuk dengan mengirimkan OTP melalui email .

    Tentang contoh ini

    Contoh ini memiliki basis data pengguna berisi nama, email, kata sandi, dan detail lainnya. Terdapat juga formulir HTML dengan input untuk mendapatkan kredensial login pengguna.

    Kode PHP akan menerima data yang diposting ketika pengguna mengirimkan detail login mereka. Kode ini akan membandingkan data yang dimasukkan dengan data yang tersimpan di basis data pengguna.

    Jika kecocokan ditemukan, maka sesi login pengguna akan diatur. Kode autentikasi ini menyimpan ID pengguna dalam sesi PHP. Keberadaan sesi ini akan menentukan status autentikasi pengguna.

    Setelah autentikasi, variabel super global PHP $_SESSION akan berisi ID pengguna. $_SESSION[ΓÇ£member_idΓÇ¥] diatur untuk mengelola sesi yang sedang login. Variabel ini akan tetap ada hingga pengguna keluar atau menutup peramban.

    Selama logout, kami membatalkan semua variabel sesi menggunakan fungsi PHP unset() .

    Struktur berkas

    Tangkapan layar di bawah ini menunjukkan struktur berkas terorganisir dari contoh login pengguna ini. Member.php  adalah kelas model dengan fungsi autentikasi.

    File  DataSource.php berisi fungsi untuk mendapatkan koneksi dan mengakses database.

    Di  direktori tampilan  , saya telah membuat semua berkas terkait UI untuk antarmuka login dan dasbor. Direktori ini juga berisi lembar gaya yang digunakan untuk UI ini.

    index.php  adalah halaman arahan yang memeriksa sesi login pengguna. Kemudian, halaman ini mengarahkan pengguna untuk login atau ke dasbor .

    File login -action.php  dan  logout.php  adalah titik akhir PHP. File-file ini menangani tindakan yang diminta oleh pengguna melalui Antarmuka autentikasi interaktif.

    Struktur File Contoh Skrip Login dengan Sesi

    Antarmuka login pengguna

    Membuat formulir HTML untuk masuk adalah langkah pertama. Langkah ini bertujuan untuk mendapatkan detail login dari pengguna.

    Contoh ini memiliki dua bidang, nama pengguna dan kata sandi, untuk login pengguna.

    Saya telah menentukan fungsi validasi dan titik akhir PHP dengan tag formulir.

    HTML berisi elemen untuk menampilkan kesalahan validasi sisi klien. Selain itu, terdapat kode untuk menampilkan respons kesalahan sisi server berdasarkan hasil login.

    <html>
<head>
<title>User Login</title>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" type="text/css" href="./view/css/form.css" />
<link rel="stylesheet" type="text/css" href="./view/css/style.css" />
</head>
<body>
	<div class="phppot-container tile-container text-center">
     <?php
    if (isset($_SESSION["errorMessage"])) {
        ?>
                <div class="validation-message"><?php  echo $_SESSION["errorMessage"]; ?></div>
                <?php
        unset($_SESSION["errorMessage"]);
    }
    ?>
        <form action="login-action.php" method="post" id="frmLogin"
			onSubmit="return validate();">
			<h2>Enter Login Details</h2>
			<div class="row">
				<label class="text-left" for="username">Username <span
					id="user_info" class="validation-message"></span></label> <input
					name="user_name" id="user_name" type="text" class="full-width">
			</div>
			<div class="row">
				<label class="text-left" for="password">Password <span
					id="password_info" class="validation-message"></span></label> <input
					name="password" id="password" type="password" class="full-width">
			</div>
			<div class="row">
				<input type="submit" name="login" value="Login" class="full-width"></span>
			</div>
		</form>
	</div>
</body>
</html>

    Validasi formulir login

    Skrip ini untuk memvalidasi data login di sisi klien. Jika pengguna mengirimkan login dengan kolom kosong, skrip ini akan mengembalikan nilai boolean yang salah.

    Ketika mengembalikan nilai false, skrip akan menampilkan pesan kesalahan validasi kepada pengguna. Dengan mengembalikan nilai boolean 0, skrip validasi formulir mencegah proses login lebih lanjut.

    function validate() {
    var $valid = true;
    document.getElementById("user_info").innerHTML = "";
    document.getElementById("password_info").innerHTML = "";

    var userName = document.getElementById("user_name").value;
    var password = document.getElementById("password").value;
    if (userName == "") {
        document.getElementById("user_info").innerHTML = "required";
        $valid = false;
    }
    if (password == "") {
        document.getElementById("password_info").innerHTML = "required";
        $valid = false;
    }
    return $valid;
}

    Kode PHP untuk memproses login

    Berkas login-action.php menerima dan menangani data login yang diposting. Berkas ini mengirimkan nama pengguna dan kata sandi ke fungsi processLogin().

    Metode ini mendapatkan rincian login dan membandingkannya dengan basis data pengguna.

    Fungsi ini menyiapkan kueri dan mengikat parameter login dengannya untuk menemukan kecocokan dari basis data. Fungsi processLogin() akan mengembalikan hasil jika kecocokan login ditemukan.

    Setelah berhasil masuk, login-action.php akan mengatur sesi pengguna yang sedang masuk. Jika tidak, akan muncul pesan kesalahan "Kredensial Tidak Valid".

    <?php
namespace Phppot;

require_once __DIR__ . "/class/Member.php";

use Phppot\Member;
if (! empty($_POST["login"])) {
    session_start();

    $member = new Member();
    $isLoggedIn = $member->loginMember();
    if (! $isLoggedIn) {
        $_SESSION["errorMessage"] = "Invalid Credentials";
    }
    header("Location: ./index.php");
    exit();
}
?>

    Dapatkan data profil pengguna yang masuk untuk menampilkan pesan selamat datang

    Kode ini untuk menampilkan dasbor setelah masuk. Kode PHP yang disematkan dengan HTML ini berfungsi untuk mengambil sesi pengguna dan data pengguna dari basis data.

    Menampilkan pesan selamat datang dengan menyapa pengguna dengan nama tampilan mereka.

    Dasbor berisi tautan keluar selain teks selamat datang.

    <?php
namespace Phppot;

use Phppot\Member;
if (! empty($_SESSION["userId"])) {
    require_once __DIR__ . '/../class/Member.php';
    $member = new Member();
    $memberResult = $member->getMemberById($_SESSION["userId"]);
    if (! empty($memberResult[0]["display_name"])) {
        $displayName = ucwords($memberResult[0]["display_name"]);
    } else {
        $displayName = $memberResult[0]["user_name"];
    }
}
?>
<html>
<head>
<title>User Login</title>
<link href="./view/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="phppot-container text-center">
			Welcome <b><?php echo $displayName; ?></b>, You have successfully
			logged in!<br> Click to <a href="./logout.php">Logout.</a>
	</div>
</body>
</html>

    Anggota.php

    Ini adalah kelas PHP yang dibuat dalam contoh ini untuk menangani proses login. Metode getMemberById meminta DataSource untuk mengambil hasil anggota.

    <?php
namespace Phppot;

use Phppot\DataSource;

class Member
{

    private $dbConn;

    private $ds;

    function __construct()
    {
        require_once __DIR__ . "/DataSource.php";
        $this->ds = new DataSource();
    }

    function getMemberById($memberId)
    {
        $query = "SELECT * FROM registered_users WHERE id = ?";
        $paramType = "i";
        $paramArray = array(
            $memberId
        );
        $memberResult = $this->ds->select($query, $paramType, $paramArray);

        return $memberResult;
    }

    function processLogin($username)
    {
        $query = "SELECT * FROM registered_users WHERE user_name = ?";
        $paramType = "s";
        $paramArray = array(
            $username
        );
        $memberResult = $this->ds->select($query, $paramType, $paramArray);
        return $memberResult;
    }

    function loginMember()
    {
        $memberResult = $this->processLogin($_POST["user_name"]);
        $loginPassword = 0;
        if (! empty($memberResult)) {
            $password = $_POST["password"];
            $hashedPassword = $memberResult[0]["password"];
            if (password_verify($password, $hashedPassword)) {
                $loginPassword = 1;
            }
            if ($loginPassword == 1) {
                $_SESSION["userId"] = $memberResult[0]["id"];
                return $memberResult;
            }
        }
    }
}
?>

    Mengarahkan pengguna untuk masuk atau Dasbor berdasarkan Sesi

    Halaman arahan index.php berisi kode untuk memeriksa sesi yang masuk dan mengarahkan pengguna sesuai dengan itu. Kode berikut menunjukkan cara mengarahkan pengguna berdasarkan sesi tersebut.

    <?php
session_start();
if(!empty($_SESSION["userId"])) {
    require_once __DIR__ . '/view/dashboard.php';
} else {
    require_once __DIR__ . '/view/login-form.php';
}
?>

    Menangani logout di PHP

    Mengklik tautan keluar dari dasbor akan memanggil skrip PHP ini. Skrip ini akan menghapus sesi masuk saat ini dan mengarahkan pengguna ke halaman masuk. Kode keluarnya adalah:

    <?php 
session_start();
$_SESSION["user_id"] = "";
session_destroy();
header("Location: index.php");
?>

    Sumber Data.php

    Kelas ini membuat objek koneksi untuk mengakses basis data berdasarkan permintaan. Kelas ini memiliki  fungsi select untuk menyiapkan kueri pengambilan dan mengembalikan hasilnya. Kelas ini tersedia dalam file zip unduhan proyek yang ditautkan di akhir tutorial ini.

    Skrip basis data

    Skrip ini berisi pernyataan CREATE untuk  tabel registered_users  . Selain itu, skrip ini juga memiliki dump data untuk memeriksa contoh dengan detail login pengujian.

    CREATE TABLE `registered_users` (
  `id` int(8) NOT NULL,
  `user_name` varchar(255) NOT NULL,
  `display_name` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;

INSERT INTO `registered_users` (`id`, `user_name`, `display_name`, `password`, `email`) VALUES
(1, 'admin', 'Kate Winslet', '$2a$10$0FHEQ5/cplO3eEKillHvh.y009Wsf4WCKvQHsZntLamTUToIBe.fG', 'kate@wince.com');

ALTER TABLE `registered_users`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `registered_users`
  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

    Detail login uji coba

    Setelah menetapkan contoh kode dan basis data ini di komputer Anda, gunakan data uji berikut untuk memeriksa sistem login contoh.

    Username: kate_91

    Password: kate@03

    Skrip login PHP dengan keluaran sesi

    Tangkapan layar keluaran ini menunjukkan antarmuka formulir masuk. Formulir ini memiliki kolom input untuk mendapatkan detail login pengguna.

    Tangkapan Layar Formulir Login Pengguna

    Ini adalah tangkapan layar pesan selamat datang. Setelah masuk, pengguna akan melihat respons ini di peramban.

    Tampilan ini akan menampilkan pesan selamat datang kepada pengguna yang telah masuk. Tampilan ini juga memiliki tautan untuk keluar, seperti yang ditunjukkan di bawah ini.


    • Materi Berkas PPT
      Siswa harus
      Tandai selesai
      580.5 KB · Diunggah 27/11/25, 11:31
    • code Berkas ZIP
      Siswa harus
      Tandai selesai
      7.7 KB · Diunggah 27/11/25, 11:31