Cara membuat register dengan php

Selamat datang di warung belajar, dalam tutorial kali ini kita akan membahas mengenai bagaimana membuat fitur Login dan Register di PHP.

Table of Contents Show

Jalankan Service Apache & MySQL di Xampp
Membuat Database untuk keperluan menyimpan data User
Membuat Project
Buat File Koneksi ke database
Membuat Halaman Register
Membuat Fitur Login
Membuat Halaman home.php

Tutorial akan mengimplementasikan 3 tutorial kita sebelumnya mengenai session, cookie, password hash dan password_verify, jadi untuk teman – teman yang belum mengenal mengenai session, cookie password hash dan password_verify, bisa membaca tutorial kita sebelumnya :

Cara Menggunakan Session di PHP
Cara Menggunakan Cookie di PHP
Menggunakan password_hash dan password_verify di PHP

Baik saya asumsikan teman – teman sudah mengenal session, cookie password_hash, dan password_verify, kita langsung saja memulai membuat fitur tersebut.

Persiapan

Pada Tahap persiapan, pastikan teman – teman sudah menyiapkan tools sebagai berikut :

Text Editor, terserah pakai apa, kita menyarankan pakai visual studio code atau sublime
Web Browser : Google Chrome/Mozilla/Opera dll
Server PHP, dalam tutorial ini kita contohkan menggunakan Xampp karena didalamnya sudah ada PHP dan database MySQL, Tutorial Instalasi Xampp : Cara Menginstall Xampp

Nantinya untuk tampilan dari aplikasi kita gunakan bootstrap 4, kita sudah menyiapkan library CSS yang diperlukan, untuk download bisa klik disini Bahan Library CSS

Silahkan dibuka dan download dengan menekan tombol Clone Or Download –> Download Zip

Jalankan Service Apache & MySQL di Xampp

Karena dalam contoh ini saya gunakan xampp, saya perlu menjalankan service untuk apache dan MySQL, silahkan buka Xampp Control Panel dan jalankan 2 service tersebut.

Membuat Database untuk keperluan menyimpan data User

Sebelum kita membuat untuk fitur login & register, kita akan membuat database terlebih dahulu untuk menyimpan data user, langkah – langkanya adalah sebagai berikut :

1. Silahkan Buka browser dan ketikkan localhost/phpmyadmin

2. Lalu klik tombol Basis data / Database

3. Lalu Tuliskan nama databasenya pada form databasenya, dalam contoh ini saya tuliskan dengan nama database_user, lalu berikutnya klik tombol buat

4. Berikutnya buat tabel dengan nama tb_user dengan jumlah kolom 4, lalu klik kirim

5.Lalu buat kolom pada tb_user, dengan urutan sesuai berikut :

id (integer / Primary Key / Auto Increment)
username (varchar 255)
password (varchar 255)
nama (varchar 255)

Setelah itu klik simpan/save

Nah sampai bagian ini kita sudah membuat database yang nantinya kita gunakan untuk menyimpan data register, dan untuk keperluan login user

Membuat Project

Setelah kita membuat database, berikutnya kita sudah bisa memulai untuk membuat projectnya, karena dalam contoh ini kita membuatnya dengan menggunakan xampp, maka project kita akan disimpan di folder htdocs.

Untuk posisi dari folder htdocs, bisa disesuaikan di folder dari instalasi xampp, karena saya menyimpan di Drive C, maka folder htdocs, berada di C:/xampp/htdocs

kita buat folder didalam folder htdocs, dalam contoh ini kita membuat folder dengan nama app_login_register

Setelah itu buat 5 file dengan nama :

db_connect.php
home.php
login.php
logout.php
register.php

berikutnya extract hasil download file bahan, dan letakkan folder assets dalam folder app_login_register, jadi hasilnya adalah seperti berikut ini :

Buat File Koneksi ke database

Silahkan Buka file dengan nama db_connect.php, lalu tuliskan skrip seperti dibawah ini :

<?php

classdatabase{

var$host="localhost";

var$username="root";

var$password ="";

var$database="database_user";

var$koneksi;

function__construct(){

$this->koneksi =mysqli_connect($this->host,$this->username,$this->password,$this->database);

}

function register($username,$password,$nama)

{

$insert=mysqli_query($this->koneksi,"insert into tb_user values ('','$username','$password','$nama')");

return$insert;

}

functionlogin($username,$password,$remember)

{

$query=mysqli_query($this->koneksi,"select * from tb_user where username='$username'");

$data_user=$query->fetch_array();

if(password_verify($password,$data_user['password']))

{

if($remember)

{

setcookie('username',$username,time()+(60*60* 24*5),'/');

setcookie('nama',$data_user['nama'],time()+(60 *60*24*5),'/');

}

$_SESSION['username']=$username;

$_SESSION['nama']=$data_user['nama'];

$_SESSION['is_login']=TRUE;

returnTRUE;

}

functionrelogin($username)

{

$query=mysqli_query($this->koneksi,"select * from tb_user where username='$username'");

$data_user=$query->fetch_array();

$_SESSION['username']=$username;

$_SESSION['nama']= $data_user['nama'];

$_SESSION['is_login']=TRUE;

}

Keterangan :

Perhatikan baris 3 – 11 (db_connect.php) itu adalah baris skrip yang kita gunakan untuk membuat koneksi ke database_user, dimana koneksinya disimpan dalam variabel $koneksi, jika anda belum mengetahui perintah untuk koneksi ke database, bisa melihat tutorial kami sebelumnya mengenai cara membuat koneksi php ke database mysql menggunakan oop
Untuk Bagian skrip lainnya kita akan jelaskan fungsinya pada tutorial berikutnya.

Membuat Halaman Register

Silahkan buka file register.php, lalu isi dengan code seperti berikut :

<?php

include_once('db_connect.php');

$database=newdatabase();

if(isset($_POST['register']))

{

$username=$_POST['username'];

$password=password_hash($_POST['password'],PASSWORD_DEFAULT);

$nama =$_POST['nama'];

if($database->register($username,$password,$nama))

{

header('location:login.php');

}

<!doctype html>

<head>

<title>Register Form</title>

<style>

.bd-placeholder-img {

font-size: 1.125rem;

text-anchor:middle;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

}

@media (min-width: 768px) {

.bd-placeholder-img-lg {

font-size:3.5rem;

}

</style>

</head>

<h2 class="mt-5">Register Form</h2>

<pclass="lead">Silahkan Daftarkan Identitas Anda</p>

<hr/>

<label for="username"class="col-sm-2 col-form-label">Username</label>

</div>

</div>

<label for="password"class="col-sm-2 col-form-label">Password</label>

</div>

<ahref="login.php" class="btn btn-success">Login</a>

<button type="submit"class="btn btn-primary"name="register">Register</button>

</div>

</form>

</div>

</main>

<span class="text-muted">Warung Belajar@2019</span>

</div>

</footer>

</body>

</html>

Lalu jalankan dengan perintah : http://localhost/app_login_register/register.php maka tampilannya adalah sebagai berikut :

Keterangan :

Baris 2 (register.php) kita include file db_connect yang berisi class database untuk melakukan koneksi ke database
Baris 3 (register.php) kita membuat object dari class database
Baris 58 (register.php) kita membuat form dengan method post, dan attribute action dengan nilai kosong, yang artinya jika tombol register diklik form akan di proses di file ini juga.
Baris 62 (register.php) kita membuat inputan form dengan type text, dengan name username
Baris 69 (register.php) kita membuat inputan form dengan type text, dengan name nama
Baris 79 (register.php) kita membuat input form dengan type password, dengan name password
Baris 83 (register.php) kita membuat tombol submit dengan name register
Baris 4 (register.php) kita menulis perintah untuk melakukan pengecekan terhadap tombol form dengan nama register menggunakan perintah if dan isset, sederhananya perintah ini digunakan untuk mendeteksi apakah tombol register pada form register di klik, tulisan register disini mengacu pada value name pada tombol register Baris 83 (register.php)
Untuk teman – teman yang belum mengetahui konsep penanganan form di PHP, bisa melihat tutorial kami sebelumnya : Penanganan Form di PHP
Jika baris kode di baris 4 (register.php) bernilai TRUE, maka akan menjalankan perintah pada line 6 – 12
Baris 6 (register.php) kita menangkap inputan username dari form dan menyimpannya di variabel $username
Baris 7 (register.php) kita menangkap inputan password dari form dan membuat hash password menggunakan function password_hash bawaan dari PHP, dan disimpan di variabel $password, untuk pembahasan password_hash bisa dilihat disini : Menggunakan password_hash dan password_verify di PHP
Baris 8 (register.php) kita menangkap inputan nama dari form dan menyimpannya di variabel $nama
Baris 9 (register.php) kita memanggil function register di class database, dengan menyertakan 3 parameter yaitu variabel $username, $password, dan $nama, kita menggunakan perintah if karena nantinya function register akan mengembalikan nilai TRUE jika proses berhasil, dan jika nilai pengembaliannya TRUE maka akan menjalankan perintah pada baris 11 (register.php)
Nah sekarang kita kembali ke file db_connect.php perhatikan pada baris 14 (db_connect.php) pada function register, function register memiliki 3 parameter yaitu variabel $username, $password, dan $nama, variabel ini dikirim dari file register.php pada baris 9 (register.php)
Baris 16 (db_connect.php) pada function register ini kita menjalankan perintah query untuk insert data ke dalam tabel tb_user, dengan nilai yang ada pada parameter variabel $username, $password, dan $nama, jika proses insert data ke tb_user berhasil maka akan mengembalikan nilai TRUE.
Urutan penulisan value saat perintah insert data ke tabel, adalah disesuaikan dengan urutan nama kolom di tabel tb_user, jika anda belum mengenal query insert bisa dilihat di tutorial kita sebelumnya : Membuat Crud PHP Mysql menambah data
Jika function register ini mengembalikan nilai TRUE, maka program akan menjalankan baris 11 (register.php), perintah ini digunakan untuk memanggil file login.php yang berisi halaman login.

Mohon maaf kalau penjelasannya cukup panjang, kita hanya coba menjelaskan perbarisnya, jadi memahaminya pelan – pelan saja ya : ), untuk tampilan dari bootstrapnya anda bisa copy paste saja, dan jangan lupa untuk library CSSnya yang kita siapin sudah diextract dan diletakkan di satu folder project kita.

Testing Form Register

Silahkan akses form register di alamat http://localhost/app_login_register/register.php, lalu kita coba isikan ya datanya :

Setelah diisi kita tekan tombol Register, jika anda diarahkan ke halaman login berarti anda sudah berhasil register user.

Cek data user di database

Coba anda masuk kedalam localhost/phpmyadmin, lalu masuk kedalam database dengan nama database_user, lalu klik di table tb_user.

terlihat terdapat 1 record data dengan yang berisi username (administrator), nama (Aris Samsudin)

Nah berarti sampai sini kita sudah berhasil membuat fitur Register Form untuk registrasi user baru, kita akan lanjut dibagian Fitur Login User.

Untuk membuat fitur login, silahkan buka file login.php dan isikan dengan code sebagai berikut :

<?php

session_start();

include_once('db_connect.php');

$database=newdatabase();

if(isset($_SESSION['is_login']))

{

header('location:home.php');

}

if(isset($_COOKIE['username']))

{

$database->relogin($_COOKIE['username']);

header('location:home.php');

}

if(isset($_POST['login']))

{

$username= $_POST['username'];

$password=$_POST['password'];

if(isset($_POST['remember']))

{

$remember=TRUE;

}

else

{

$remember=FALSE;

}

if($database->login($username,$password,$remember))

{

header('location:home.php');

}

<!doctype html>

<head>

<title>Login Form</title>

<style>

.bd-placeholder-img {

font-size:1.125rem;

text-anchor:middle;

-webkit-user-select: none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

}

@media (min-width: 768px) {

.bd-placeholder-img-lg {

font-size:3.5rem;

}

</style>

</head>

<h2 class="h3 mb-3 font-weight-normal">Please sign in</h2>

<label for="username"class="sr-only">Username</label>

<label for="password"class="sr-only">Password</label>

<label>

<input type="checkbox"value="remember-me"name="remember">Remember me

</label>

</div>

<ahref="register.php" class="btn btn-lg btn-success btn-block">Register</a>

</form>

</body>

</html>

Untuk menjalankan anda bisa mengaksesnya di alamat http://localhost/app_login_register/login.php

Tampilannya adalah seperti berikut ini :

Keterangan :

Saya coba login dengan username “administrator” dan password yang dibuat dibagian register, lalu saya klik tombol Sign in
Untuk tampilan kita gunakan template standart login dari bootstrap 4, yang terpenting anda telah meletakkan folder assets hasil bahan di folder project.
Baris 3 (login.php) kita include file db_connect.php untuk includekan file db_connect.php yang berisi class database
Baris 4 (login.php) kita membuat object $database dengan menggunakan class database
Baris 72 (login.php) kita membuat form dengan method post, dan action dengan value kosong, yang artinya proses form ini akan dilakukan di file ini sendiri.
Baris 76 (login.php) kita membuat input type text dengan name username
Baris 78 (login.php) kita membuat input type password dengan name password
Baris 81 (login.php) kita membuat checkbox dengan name remember, checkbox ini digunakan untuk mengaktifkan fitur penyimpan data user di cookie, jika bagian checkbox ini di centang
Baris 84 (login.php) kita membuat button dengan type submit dengan name login.
Pemrosesan form dilakukan di Baris 17 (login.php) dengan melakukan check apakah klik pada tombol dengan name “login”, tombol yang dimasud adalah tombol register, jika pengecekan ini bernilai TRUE (artinya tombol login diklik) maka program akan menjalankan code di baris 19 – 33 (login.php)
Baris 19 (login.php) inputan form dengan name username disimpan di variabel $username
Baris 20 (login.php) inputan form dengan name password disimpan di variabel $password
Baris 21 (login.php) dilakukan pengecekan apakah checkbox dengan name remember di centang / di checklist, jika dichecklist maka variabel $remember akan bernilai TRUE, tetapi jika tidak maka variabel $remember akan bernilai FALSE
Baris 30 (login.php) memanggil function login didalam class database menggunakan object $database, dimana pada function login, mengirimkan 3 parameter dengan nama $username, $password, dan $remember, pemanggilan function login menggunakan IF, karena function login mengembalikan return TRUE, jika proses login berhasil yang akan menjalankan baris 32 (login.php) untuk mengakses halaman home.php
Berikutnya kita coba lihat file db_connect.php pada baris 20 (db_connect.php) pada function login, terlihat pada function ini memiliki 3 parameter juga yaitu $username, $password, dan $remember, 3 paremeter ini dikirim oleh file login.php di baris 30
Baris 22 (db_connect.php) kita menuliskan perintah untuk menampilkan data user dengan username yang sesuai dari variabel $username.
Baris 23 (db_connect.php) kita menampung hasil data user pada variabel $data_user, data berupa array karena kita menggunakan perintah fetch_array()
Baris 24 (db_connect.php) kita menggunakan perintah password_verify untuk mencocokan password hasil inputan dari form login (variabel $password) dan nilai password di tabel user atas username administrator, jika password sesuai maka akan menjalankan code dibaris 26 – 35 (db_connect.php)
Baris 27 (db_connect.php) kita melakukan pengecekan apakah nilai dari variabel $remember adalah TRUE (variabel $remember bernilai TRUE jika checkbox remember dicentang) jika bernilai TRUE maka akan menjalankan perintah di baris 29 – 30 (db_connect.php)
Baris 29 (db_connect.php) kita membuat COOKIE dengan nama “username” dengan nilai value dari variabel $username dalam hal ini “administrator”
Baris 30 (db_connect.php) kita membuat COOKIE dengan nama “nama” dengan nilai value dari kolom nama dari tb_user dengan username “administrator” dalam hal ini “Aris Samsudin”
Baris 32 (db_connect.php) kita membuat SESSION dengan nama “username” dengan value variable $username dalam hal ini “administrator”
Baris 33 (db_connect.php) kita membuat SESSION dengan nama “nama” dengan value kolom nama di tabel tb_user hasil query dibaris 22 dalam hal ini adalah “Aris Samsudin”
Baris 34 (db_connect.php) kita membuat SESSION dengan nama “is_login” dengan value TRUE.
Baris 35 (db_connect.php) kita mengembalikan nilai TRUE, yang akan menjalankan Baris 32 (login.php) yang akan meredirect halaman ke home.php

Baik itu adalah penjelasan dari proses fitur login, berikutnya kita akan membuat halaman home, yang berfungsi sebagai halaman yang akan ditampilkan ketika login berhasil