Membuat web login php

Question

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.

- index.php
- login.php
- logout.php
- process.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">
						<h2>Login Form</h2>
					</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">
						<h2>Halaman Admin</h2>
					</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.

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.

foreach ($list_user as $key => $value) {

	//login success
	if($value['username'] == $user['username'] && $value['password'] == $user['password']){

		$_SESSION['login'] = true;
		$_SESSION['username'] =  $data['username'];
		$_SESSION['message']  = 'Berhasil login ke dalam sistem.';

		header("Location: index.php");

	}

	//password salah
	else if($value['username'] == $user['username'] && $value['password'] !== $user['password']){
		$_SESSION['error'] = 'Password anda salah';
		header("Location: login.php");

	}

	//username salah
	else if($value['username'] !== $user['username']){
		$_SESSION['error'] = 'Username anda tidak ditemukan.';
		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 session.

2. Logout.php

Kedua, buat sebuah file lagi untuk menghandle proses logout. Kita beri nama logout.php

 <?php
 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">
						<h2>Halaman Admin</h2>
					</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">
						<h2>Login Form</h2>
					</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

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: