Pada tutorial kali ini, kita akan membahas tentang cara membuat fitur login dan logout sederhana dalam PHP.
Adapun persiapan yang harus kamu ikuti sebelum lanjut ke artikel ini adalah:
Daftar Isi
Siapkan webserver di komputer local kamu. Kamu bisa baca tentang menginstall xampp di komputer kamu disini: Cara menginstall xampp di windows
Belajar tentang session di dalam PHP. Untuk yang belum tahu, bisa baca dulu pembahasan tentang session dalam php pada artikel ini: PHP Session
Membuat tampilan halaman login dan logout. Kita akan gunakan framework Boostrap 4, Buat yang belum tahu, Boostrap adalah framework css yang bisa memudahkan kita membuat tampilan website.
Jika persiapan di atas sudah kamu siapkan, kita akan lanjutkan ngodingnya.
Struktur File
Kalian bisa membuat 4 file seperti di bawah ini. Penjelasan mengenai masing-masing file akan kita bahas selanjutnya.
- login.php
- process.php
- index.php
- logout.php
Step 1. Membuat tampilan interface login form dan halaman admin
Pertama kita buat sebuah file login.php
, file ini yang akan menjadi halaman login form.
Kodenya ada di bawah ini.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Login & Logout PHP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<div class="card mt-5">
<div class="card-title text-center">
<h1>Login Form</h1>
</div>
<div class="card-body">
<form action="process.php" method="post">
<div class="form-group">
<label for="username">Email address</label>
<input type="text" name="username" class="form-control" id="username" aria-describedby="username" placeholder="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Tampilannya kurang lebih akan seperti ini.

Kedua, kita akan membuat sebuah file index.php
yang nantinya berfungsi sebagai halaman yang dituju setelah berhasil login.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Login & Logout PHP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 mt-5">
<div class="alert alert-success" role="alert">
Berhasil login ke dalam sistem.
</div>
<div class="card">
<div class="card-title text-center">
<h1>Halaman Admin</h1>
</div>
<div class="card-body">
<p>Hello username</p>
<p>Kamu berhasil ke halaman admin.</p>
<a href="logout.php" >Logout</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tampilan halamannya kurang lebih akan seperti gambar dibawah ini.

Step 2. Membuat file untuk memproses login form dan logout.
1. process.php
Pertama, buat sebuah file process.php
yang berfungsi sebagai file yang memproses form saat di submit.
<?php
session_start();
//list user yang valid
//selain user ini tidak bisa login.
$list_user = [
[
'username' => 'john',
'password' => '123456'
],
[
'username' => 'admin',
'password' => 'admin'
]
];
//dapatkan data user dari form
$user = [
'username' => $_POST['username'],
'password' => $_POST['password'],
];
//cocokan data user dengan list user yang valid.
//misalnya pakai looping saja.
$not_found = false;
foreach ($list_user as $key => $registered_user) {
//login success
if ($registered_user['username'] == $user['username']) {
if ($registered_user['password'] == $user['password']) {
$_SESSION['login'] = true;
$_SESSION['username'] = $user['username'];
$_SESSION['message'] = 'Berhasil login ke dalam sistem.';
header("Location: index.php");
break;
} else {
$_SESSION['error'] = 'Password anda salah';
$not_found = true;
}
} else {
$_SESSION['error'] = 'Password anda salah';
}
}
if ($not_found == true) {
header("Location: login.php");
}
Penjelasan process.php
Paling atas, kita tambahkan code session_start();
ini berfungsi agar kita bisa menggunakan session di dalam file ini.
Karena tutorial ini kita buat sangat sederhana, maka list user yang bisa login ke dalam sistem kite definisikan dlu di dalam variable $list_user
di line 6.
Di line 19, kita menampung informasi user yang didapatkan dari form di login.php
Di line 28 kita melakukan perulangan dari data $list_user
dan mengecek apakah username dan password dari form login sesuai dengan list_user.
Jika username & password benar, maka kita redirect ke halaman index.php
Jika salah maka kita redirect balik lagi ke halaman login.php
dengan pesan error session error
.
2. Logout.php
Kedua, buat sebuah file lagi untuk menghandle proses logout. Kita beri nama logout.php
<?php
session_start();
session_destroy();
header("Location: login.php");
?>
Penjelasan logout.php
Pada file logout.php, kita menghapus semua session yang dibuat sebelumnya, bisa di lihat di line 6.
Jika sudah logout, kita redirect lagi ke halaman login.php
dengan pesan logout berhasil.
Tambahan
Sedikit tambahan di file index.php
, jika tidak ada session login maka kita akan redirect ke halaman login.php
Jadi file index.php akan menjadi seperti berikut ini.
<?php
session_start();
if(empty($_SESSION['login'])){
header("Location: login.php");
}
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Login & Logout PHP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 mt-5">
<div class="alert alert-success" role="alert">
Berhasil login ke dalam sistem.
</div>
<div class="card">
<div class="card-title text-center">
<h1>Halaman Admin</h1>
</div>
<div class="card-body">
<p>Hello <?php echo $_SESSION['username']?></p>
<p>Kamu berhasil ke halaman admin.</p>
<center>
<a href="logout.php">Logout</a>
</center>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tambahan untuk halaman login.php
adalah menampilkan pesan error jika username atau password salah dan pesan saat sudah logout.
<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Login & Logout PHP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 mt-5">
<?php
if(isset($_SESSION['error'])) {
?>
<div class="alert alert-warning" role="alert">
<?php echo $_SESSION['error']?>
</div>
<?php
}
?>
<div class="card ">
<div class="card-title text-center">
<h1>Login Form</h1>
</div>
<div class="card-body">
<form action="process.php" method="post">
<div class="form-group">
<label for="username">Email address</label>
<input type="text" name="username" class="form-control" id="username" aria-describedby="username" placeholder="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Nah jika kalian sudah berhasil mengikuti tutorial ini akan mendapatkan tampilan yang seperti di bawah ini.

Gimana teman-teman? Cukup mudah kan? Ini adalah salah satu dasar dari proses autentikasi dalam PHP. Dasar login & logout menggunakan session sebagai pertanda apakah kita sedang login atau tidak.
Untuk artikel berikutnya, kita akan membahas lagi tentang proses login dan logout mungkin dengan menyambungkannya dengan database.
Jika tutorial ini bermanfaat, bisa di share dan komen jika ada pertanyaan ya.
List playlist tentang belajar PHP - Login & Register: