Belajar PHP – Cara membuat login dan logout sederhana dalam PHP

By Admin
PHP
25 Jul 2022

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:

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.

Tampilan halaman login.php

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.

Cara membuat login dan logout sederhana dalam PHP
tampilan halaman index.php

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.

Login dengan PHP
Login dengan PHP

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:

  1. https://ngide.net/cara-membuat-login-dan-logout-sederhana-dalam-php/
  2. https://ngide.net/php-login-dan-logout-mysql/
  3. https://ngide.net/php-register-mysql/
  4. https://ngide.net/update-profile-php-mysql

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

Belajar PHP – Apa Itu Interface Dalam PHP?

Pada tutorial belajar PHP kali ini, kita akan membahas tentang yang namanya Interface dalam PHP. Apa itu interface?
Admin
5 min read

Pengertian PHP, Fungsi dan contohnya.

Halo teman ngide, kali ini kita akan membahas apa itu php, sejarah PHP. fungsi PHP secara umum dan juga istilah lainya yang berkaitan dengan PHP.
Admin
5 min read

Cara menginstall XAMPP di windows

Jika kamu ingin membuat website di komputer pribadi kamu, maka kamu membutuhkan sebuah web server. Nah salah satu aplikasi untuk membuat web server di komputer kamu adalah XAMPP.
Admin
5 min read

© 2024