DailyBlog.id - Saat ini hampir setiap situs web menyediakan halaman login dan register. Oleh karena itu, perlu adanya penambahan sistem login dan register pada aplikasi web modern. Maka dari itu di sini saya akan membahas bagaimana cara membuat halaman login dan register menggunakan script PHP dan MySQL.
Dalam pembuatan halaman login dan register ini, nantinya diharapkan pengguna dapat memilki dan membuat akun dengan data pada akun yaitu nama pengguna, kata sandi, dan email. Setelah itu jika pengguna telah membuat akun mereka pada halaman register, maka pengguna akan masuk ke akun mereka pada halaman login nanti dan akan dialihkan menuju halaman dasbor, jika pengguna berhasil login ke akunnya. Maka dari itu perlu menggunakan PHP dan MySQL dalam pembuatan halaman login dan register, agar semuanya bisa saling terkoneksi satu sama lain.
Dan tidak lupa nanti saya akan menunjukkan kepada kalian, bagaimana cara membuat halaman aman yang hanya dapat diakses oleh pengguna yang masuk. Tanpa login, pengguna tidak dapat mengakses halaman.
Membuat Login dan Register Dengan PHP & MySQL
- Membuat database dan tabel databasenya
- Menghubungkan ke database
- Membuat session untuk pengguna yang masuk
- Membuat halaman login dan register
- Membuat halaman dasbor
- Membuat halaman logout
- Membuat CSS untuk desain tampilan
Maka langsung saja ikuti tutorial yang ada di bawah ini:
1. Membuat database dan tabel databasenya
Disaat membuat database beserta tabelnya, kalian bisa menuju pada halaman phpMyAdmin setelah itu buat database baru jika belum mempunyai databasenya. Untuk membuat database baru, kalian bisa klik Create Database pada halaman Database. Setelah itu masukan nama database yang ingin kalian buat, seperti ini:
atau kalian juga bisa ketik dan execute query yang ada di bawah ini di halaman SQL:
CREATE DATABASE dailyblogid_db;
Setelah itu masuk pada database yang sudah kalian buat. Dan tahap selanjutnya yaitu pembuatan tabel databasenya. Tabel yang akan dibuat yaitu tabel pengguna dan memiliki fields :
- id – int(11)
- nama_pengguna – varchar(50)
- email – varchar(50)
- kata_sandi – varchar(255)
- tanggal_buat – datetime
Kalian bisa copy query yang ada di bawah ini lalu jalankan pada halaman SQL:
CREATE TABLE IF NOT EXISTS `pengguna` (
`id` int NOT NULL AUTO_INCREMENT,
`nama_pengguna` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`kata_sandi` varchar(255) NOT NULL,
`tanggal_buat` datetime NOT NULL,
PRIMARY KEY (`id`)
);
Setelah dibuat, maka tampilan dari struktur tabelnya akan seperti ini:
2. Menghubungkan ke database
Setelah membuat database beserta tabelnya, maka langkah selanjutnya agar PHP dan Databasenya bisa saling terkoneksi, maka kalian harus membuat script untuk mengkoneksikan ke MySQL nya. Untuk mengkonekannya, kalian bisa buat file dengan nama db.php lalu copy script yang ada di bawah ini.
db.php
<?php
// Ganti localhost, root, katasandi, dan nama database sesuai dengan punya kalian
$con = mysqli_connect("localhost", "root", "sandi", "dailyblogid_db");
// Cek apakah berhasil terkoneksi atau tidak
if (mysqli_connect_errno())
{
echo "Gagal terhubung ke database: ".mysqli_connect_error();
}
?>
3. Membuat session untuk pengguna yang masuk
Setelah itu, untuk mendeteksi apakah pengguna sudah masuk atau belum. Kalian bisa membuat file untuk cek session pengguna nantinya. Untuk nama filenya session_pengguna.php, lalu copy script yang ada di bawah ini.
session_pengguna.php
<?php
session_start();
if (!isset($_SESSION["login"])) {
header("Location: login.php");
exit();
}
?>
4. Membuat halaman register dan login
Berikut ini cara buat halaman register dan login untuk pengguna nantinya.
- Halaman Register
Buat file dengan nama register.php setelah itu kalian copy script yang ada di bawah ini.
<?php include('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Halama Register</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<?php
// Disaat pengguna klik submit, maka insert ke database
if (isset($_POST['submit']))
{
// cegah karakter spesial (biar ga bisa di sql injection)
// hapus backslashes
$namapengguna = mysqli_real_escape_string($con, stripslashes($_POST['username']));
$email = mysqli_real_escape_string($con, stripslashes($_POST['email']));
$sandi = mysqli_real_escape_string($con, stripslashes($_POST['password']));
$sandi = password_hash($sandi, PASSWORD_BCRYPT);
$tanggalbuat = date("Y-m-d H:i:s");
$result = mysqli_query($con, "INSERT into `pengguna` (nama_pengguna, kata_sandi, email, tanggal_buat)
VALUES ('$namapengguna', '$sandi', '$email', '$tanggalbuat')");
if ($result)
{
echo "<div class='form'>
<h3>Anda berhasil mendaftar.</h3><br/>
<p class='link'>Sekarang Anda bisa masuk ke akun, <a href='login.php'>masuk Sekarang</a>.</p>
</div>";
}
else
{
echo "<div class='form'>
<h3>Tidak dapat membuat akun.</h3><br/>
<p class='link'>Silahkan klik <a href='register.php'>daftar</a> lagi.</p>
</div>";
}
}
else { ?>
<form class="form" method="post">
<h1 class="login-title">Pendaftaran</h1>
<input type="text" class="login-input" name="username" placeholder="Nama Pengguna" required /><br/>
<input type="text" class="login-input" name="email" placeholder="Alamat Email"><br/>
<input type="password" class="login-input" name="password" placeholder="Kata Sandi"><br/>
<input type="submit" name="submit" value="Daftar" class="login-button"><br/><br/>
<p class="link">Apakah sudah memiliki akun? <a href="login.php">Masuk sekarang</a>.</p>
</form>
<?php } ?>
</body>
</html>
Maka nanti tampilannya akan seperti ini (jika sudah didesain nanti):
- Halaman Login
Kalian bisa buat file dengan nama login.php dan copy script yang ada di bawah ini. Di halaman login nantinya, pengguna akan memasukan email dan kata sandinya.
login.php
<?php include('db.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Login</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<?php
session_start();
// Disaat pengguna klik submit, cek dan buat session login
if (isset($_POST['submit']))
{
$email = mysqli_real_escape_string($con, stripslashes($_POST['email']));
$password = mysqli_real_escape_string($con, stripslashes($_POST['password']));
// Cek nama pengguna ada atau tidak. Dan katasandinya benar atau salah.
$result = mysqli_query($con, "SELECT email, nama_pengguna, kata_sandi FROM `pengguna` WHERE email='$email'") or die(mysql_error());
$fetch = mysqli_fetch_object($result);
// Cek pengguna dan katasandinya
if (mysqli_num_rows($result) == 1 && password_verify($password, $fetch->kata_sandi) > 0)
{
$_SESSION['login'] = $fetch->nama_pengguna;
// Redirect pengguna ke halaman dashboard
header("Location: dashboard.php");
}
else
{
echo "<div class='form'>
<h3>Nama pengguna atau kata sandi salah.</h3><br/>
<p class='link'>Klik disini untuk <a href='login.php'>Login</a> lagi.</p>
</div>";
}
}
else { ?>
<form class="form" method="post" name="login">
<h1 class="login-title">Masuk</h1>
<input type="text" class="login-input" name="email" placeholder="Alamat Email" autofocus="true"/>
<input type="password" class="login-input" name="password" placeholder="Kata Sandi"/>
<input type="submit" value="Login" name="submit" class="login-button"/>
<p class="link">Belum memiliki akun? <a href="register.php">Daftar Sekarang</a></p>
</form>
<?php } ?>
</body>
</html>
Maka nanti tampilannya akan seperti ini (jika sudah didesain nanti):
5. Membuat halaman dasbor
Setelah halaman login dan registernya sudah dibuat, langkah selanjutnya yaitu membuat halaman dasbor penggunanya. Kalian bisa buat file dengan nama dashboard.php, lalu copy script yang ada di bawah ini.
dashboard.php
<?php include("session_pengguna.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Halaman Dashboard</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="form">
<p>Hai kamu, <b><?=$_SESSION['login'];?></b>!</p>
<p>Ini merupakan tampilan dashboard setelah pengguna melakukan login.</p>
<p><a href="logout.php">Keluar dari akun</a></p>
</div>
</body>
</html>
Untuk tampilan dari dashboard setelah pengguna melakukan login akan seperti ini (jika sudah didesain nanti):
6. Membuat halaman logout
Tidak lupa jika pengguna telah melakukan login, maka ada halaman untuk keluar dari akun pengguna. Maka kalian bisa buat file dengan nama logout.php, setelah itu copy script yang ada di bawah ini.
logout.php
<?php
session_start();
// Hapus atau destroy session masuk pengguna
if (session_destroy()) {
// Redirect user ke halaman login
header("Location: login.php");
}
?>
7. Membuat CSS untuk desain tampilan
Agar tampilan dari halaman login, register, dan dashboard terlihat menarik seperi gambar screenshot di atas. Kalian bisa buat file dengan nama style.css, lalu copy css yang ada di bawah ini.
style.css
body {
background: #3e4144;
}
.form {
margin: 50px auto;
width: 300px;
padding: 30px 25px;
background: white;
}
h1.login-title {
color: #666;
margin: 0px auto 25px;
font-size: 25px;
font-weight: 300;
text-align: center;
}
.login-input {
font-size: 15px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 25px;
height: 25px;
width: calc(100% - 23px);
}
.login-input:focus {
border-color:#6e8095;
outline: none;
}
.login-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: 100%;
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.link {
color: #666;
font-size: 15px;
text-align: center;
margin-bottom: 0px;
}
.link a {
color: #666;
}
h3 {
font-weight: normal;
text-align: center;
}
Dan begitulah cara buat halaman login dan register menggunakan PHP dan MySQL. Kalian bisa coba untuk daftar pengguna baru, lalu login seperti biasa. Jika kalian ingin unduh scriptnya, kalian bisa unduh melalui link berikut ini.
https://github.com/andspdev/tutorial-login-register-php-mysql
Mungkin cukup sekian artikel yang saya berikan, semoga artikel ini dapat bermanfaat bagi kalian. Dan jika ada script yang error atau masih belum tau fungsinya apa. Silahkan komen atau hubungi saya lewat email. Jika saya ada salah kata atau pengetikan, mohon maaf. Sekian dan terima kasih!.
Selamat mencoba!