Tutorial ini adalah lanjutan dari tutorial sebelumnya yaitu membuat login dan logout dengan PHP dan MySQL. Nah sekarang kita akan melanjutkan proses registrasi atau register dengan PHP dan MySQL.
Selain proses registrasi, dalam tutorial ini juga akan membahas bagaimana cara mengupdate profile atau data user setelah berhasil login.
Daftar Isi
Source code yang akan kita pakai dalam tutorial ini bisa kamu download dulu di sini ya: https://github.com/yusidabcs/login-php-mysql
Database design untuk proses register akan sama dengan tutorial sebelumnya. Jadi bisa kamu cek dulu tutorial sebelumnya ya.
Design Database dan User Tabel
Jika kamu belum membuat table users. Buat dahulu ya.
Buat tabel users.
CREATE TABLE `users` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`username` varchar(255) DEFAULT NULL,
`password` varchar(255) DEFAULT NULL,
`nama` varchar(255) DEFAULT NULL,
`terakhir_login` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Jadi nanti proses register itu akan menginsert data user ke dalam table users.
1. Buat File Register.php
Buat sebuah file dengan nama register.php. File ini akan digunakan untuk menampilkan form register.
<?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>Register Member - 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
}
?>
<?php
if(isset($_SESSION['message'])) {
?>
<div class="alert alert-success" role="alert">
<?php echo $_SESSION['message']?>
</div>
<?php
}
?>
<div class="card ">
<div class="card-title text-center">
<h1>Register Form</h1>
</div>
<div class="card-body">
<form action="process-register.php" method="post">
<div class="form-group">
<label for="username">Nama Lengkap</label>
<input type="text" name="nama" class="form-control" id="name" aria-describedby="name" placeholder="Nama lengkap" autocomplete="off">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" aria-describedby="username" placeholder="username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="password">Konfirmasi Password</label>
<input type="password" name="password_confirmation" class="form-control" id="password_confirmation" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<?php
session_destroy();
?>
Tampilan dari kode diatas adalah seperti dibawah ini.
Penjelasan File register.php berfungsi untuk menampilkan halaman register yang nanti jika submit akan disimpan ke dalam table users dengan action ke file process-register.php. Jika tidak berhasil disimpan, maka akan muncul pesan warning. Jika berhasil menyimpan user, maka muncul pesan berhasil.
Nah seperti itu flow dari proses register.
2. Buat file process-register.php
File process-register.php berfungsi untuk memproses data register form dan menyimpan data ke table users.
Isinya seperti dibawah ini.
<?php
session_start();
include "koneksi.php";
//dapatkan data user dari form register
$user = [
'nama' => $_POST['nama'],
'username' => $_POST['username'],
'password' => $_POST['password'],
'password_confirmation' => $_POST['password_confirmation'],
];
//validasi jika password & password_confirmation sama
if($user['password'] != $user['password_confirmation']){
$_SESSION['error'] = 'Password yang anda masukkan tidak sama dengan password confirmation.';
header("Location: register.php");
}
//check apakah user dengan username tersebut ada di table users
$query = "select * from users where username = ? limit 1";
$stmt = $mysqli->stmt_init();
$stmt->prepare($query);
$stmt->bind_param('s', $user['username']);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_array(MYSQLI_ASSOC);
//jika username sudah ada, maka return kembali ke halaman register.
if($row != null){
$_SESSION['error'] = 'Username yang anda masukkan sudah ada di database.';
header("Location: register.php");
}else{
//username unik. simpan di database.
$query = "insert into users (nama, username, password) values (?,?,?)";
$stmt = $mysqli->stmt_init();
$stmt->prepare($query);
$stmt->bind_param('sss', $user['nama'],$user['username'],$user['password']);
$stmt->execute();
$result = $stmt->get_result();
var_dump($result);
$_SESSION['message'] = 'Berhasil register ke dalam sistem. Silakan login dengan username dan password yang sudah dibuat.';
header("Location: register .php");
}
?>
Penjelasan:
- Pertama kita akan memvalidasi password harus sama dengan password confirmation. Jika tidak sama maka redirect lagi ke halaman register dan memunculkan pesan error.
- Kedua, kita akan mengecek apakah username sudah ada di database. Jika sudah ada maka redirect kembali ke halaman register dan munculkan pesan error.
- Ketiga, jika semua validasi sudah berhasil, maka kita insert datanya ke database dan munculkan pesan sukses.
Demo Register
Update Proses Register Agar Data Form Tidak Hilang
Ada 1 masalah yang muncul ketika proses validasi password atau username tidak berhasil, maka data nama dan username itu terhapus dari form.
Kita akan membuat jika passwordnya salah maka username dan nama tidak akan hilang dari form.
Caranya?
Kita akan pakai session.
Buka file proses-register.php dan lakukan perubahan seperti dibawah ini.
Update di bagian validasi password.
.
.
if($user['password'] != $user['password_confirmation']){
$_SESSION['error'] = 'Password yang anda masukkan tidak sama dengan password confirmation.';
$_SESSION['nama'] = $_POST['nama'];
$_SESSION['username'] = $_POST['username'];
header("Location: /register.php");
return;
}
Update di bagian validasi username.
.
.
//jika username sudah ada, maka return kembali ke halaman register.
if($row != null){
$_SESSION['error'] = 'Username: '.$user['username'].' yang anda masukkan sudah ada di database.';
$_SESSION['nama'] = $_POST['nama'];
$_SESSION['password'] = $_POST['password'];
$_SESSION['password_confirmation'] = $_POST['password_confirmation'];
header("Location: /register.php");
return;
}
Kita akan menambahkan session yang akan kita kirim balik ke halaman register.
File proses-register.php setelah diupdate:
<?php
session_start();
include "koneksi.php";
//dapatkan data user dari form register
$user = [
'nama' => $_POST['nama'],
'username' => $_POST['username'],
'password' => $_POST['password'],
'password_confirmation' => $_POST['password_confirmation'],
];
//validasi jika password & password_confirmation sama
if($user['password'] != $user['password_confirmation']){
$_SESSION['error'] = 'Password yang anda masukkan tidak sama dengan password confirmation.';
$_SESSION['nama'] = $_POST['nama'];
$_SESSION['username'] = $_POST['username'];
header("Location: /register.php");
return;
}
//check apakah user dengan username tersebut ada di table users
$query = "select * from users where username = ? limit 1";
$stmt = $mysqli->stmt_init();
$stmt->prepare($query);
$stmt->bind_param('s', $user['username']);
$stmt->execute();
$result = $stmt->get_result();
$row = $result->fetch_array(MYSQLI_ASSOC);
//jika username sudah ada, maka return kembali ke halaman register.
if($row != null){
$_SESSION['error'] = 'Username: '.$user['username'].' yang anda masukkan sudah ada di database.';
$_SESSION['nama'] = $_POST['nama'];
$_SESSION['password'] = $_POST['password'];
$_SESSION['password_confirmation'] = $_POST['password_confirmation'];
header("Location: /register.php");
return;
}else{
//hash password
$password = password_hash($user['password'],PASSWORD_DEFAULT);
//username unik. simpan di database.
$query = "insert into users (nama, username, password) values (?,?,?)";
$stmt = $mysqli->stmt_init();
$stmt->prepare($query);
$stmt->bind_param('sss', $user['nama'],$user['username'],$password);
$stmt->execute();
$result = $stmt->get_result();
var_dump($result);
$_SESSION['message'] = 'Berhasil register ke dalam sistem. Silakan login dengan username dan password yang sudah dibuat.';
header("Location: /register.php");
}
?>
Session sudah kita set. Selanjutnya adalah menampilan session tersebut di halaman register.php.
<?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>Register Member - 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
}
?>
<?php
if(isset($_SESSION['message'])) {
?>
<div class="alert alert-success" role="alert">
<?php echo $_SESSION['message']?>
</div>
<?php
}
?>
<div class="card ">
<div class="card-title text-center">
<h1>Register Form</h1>
</div>
<div class="card-body">
<form action="process-register.php" method="post">
<div class="form-group">
<label for="username">Nama Lengkap</label>
<input type="text" name="nama" class="form-control" id="name" value="<?php echo @$_SESSION['nama']?>" aria-describedby="name" placeholder="Nama lengkap" autocomplete="off">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control" id="username" value="<?php echo @$_SESSION['username']?>" aria-describedby="username" placeholder="username" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" value="<?php echo @$_SESSION['password']?>" placeholder="Password">
</div>
<div class="form-group">
<label for="password">Konfirmasi Password</label>
<input type="password" name="password_confirmation" class="form-control" id="password_confirmation" value="<?php echo @$_SESSION['password_confirmation']?>" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<?php
session_destroy();
?>
Kita coba hasil dari proses register sekarang.
Kita bisa cek hasil user yang tersimpan di table users.
Sekarang coba kalian login dengan username dan password yang sudah dibuat tadi ya.
Seharusnya kamu sudah bisa login dengan data tersebut.
Penutup
Itulah cara membuat proses register dengan PHP dan MySQL. Semoga artikel ini bermanfaat ya. Jika ada pertanyaan dan kesulitan bisa tinggalkan komentar. Saya akan pastikan secepatnya membantu teman-teman.
Source code tutorial ini bisa didownload disini: https://github.com/yusidabcs/login-php-mysql/tree/register
Next tutorialnya adalah kita akan membuat halaman update profile dan lupa password. Jadi setelah user login, mereka bisa merubah data profilenya.
