Membuat fitur login dan register php & mysql

Selamat datang di warung belajar, dalam tutorial kali ini kita akan membahas mengenai bagaimana membuat fitur Login dan Register di 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 :

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 :

  1. Text Editor, terserah pakai apa, kita menyarankan pakai visual studio code atau sublime
  2. Web Browser : Google Chrome/Mozilla/Opera dll
  3. 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 :

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 :

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.

 

Membuat Fitur Login

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

 

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

 

Membuat Halaman home.php

Halaman home.php adalah halaman yang diakses ketika proses login berhasil, silahkan buka file home.php dan isi codenya sebagai berikut :

Untuk mengakses anda bisa menggunakan alamat http://localhost/app_login_register/home.php, kurang Lebih tampilannya adalah sebagai berikut :

Keterangan :

  • Karena kita sudah berhasil login dengan username administator, maka akan tampil Tulisan Selamat Datang “Aris Samsudin” tulisan Aris Samsudin adalah nama dari usernya atas username administrator
  • Baris 2 (home.php) kita menuliskan session_start(); karena akan mengakses data session
  • Baris 66 (home.php) kita menuliskan perintah echo $_SESSION[‘nama’]; yang digunakan untuk menampilkan session dengan name “nama” sehingga menampilkan nama sesuai yang sedang login dalam hal contoh ini  “Aris Samsudin”
  • Baris 58 (home.php) kita membuat link dengan tulisan Logout, dimana link ini akan mengakses file logout.php

Itu adalah file home, berikutnya kita akan membuat file logout.php

 

Membuat Fitur Logout

Fitur Logout ini digunakan untuk menghapus session dan cookie dari user yang sedang login, silahkan buka file logout.php dan isikan dengan code berikut ini :

Keterangan :

  • Baris 2 (logout.php) digunakan untuk menjalankan session
  • Baris 3 – 4 (logout.php) digunakan untuk menghapus data session dari user
  • Baris 5 – 6 (logout.php) digunakan untuk menghapus data cookie
  • Baris 7 (logout.php) digunakan untuk redirect ke halaman login.php

 

 

Membuat Fitur Pembatasan Akses untuk user yang belum login

Fungsi dari fitur login salah satunya adalah memberikan pembatasan akses dari sebuah fitur aplikasi.

Sebagai contoh halaman home.php hanya bisa diakses untuk user yang sudah login saja.

Perhatikan code pada baris 3 (home.php) kita melakukan pengecekan, jika tidak ditemukan session dengan nama “is_login”, maka akan menjalankan baris 5 yang akan meredirect ke halaman login.php, sehingga pengguna aplikasi harus login terlebih dahulu

 

Seperti yang telah dibahas saat fitur login baris 34 (db_connect.php), ketika user berhasil login akan dibuatkan session dengan nama is_login dengan TRUE, tetapi jika user belum login maka tidak memiliki session dengan nama is_login, sehingga untuk melakukan pengecekan user sudah login atau belum cukup dengan melakukan cek SESSION dengan nama is_login

 

 

Membuat Fitur Pengecekan User yang sudah login di halaman login

Jika user sudah login, seharusnya ketika mengakses di halaman login.php, akan diredirect ke halaman home.php karena user sudah dinggap login sehingga tidak perlu login ulang, nah perhatikan perintah berikut ini :

Keterangan :

  • Pada baris 6 (login.php) code ini digunakan untuk melakukan pengecekan jika ada session dengan nama is_login, maka akan diredirect ke halaman home.php (baris 7 – login.php)
  • Karena jika user memiliki session dengan is_login maka dianggap user tersebut sudah login, sehingga tidak perlu login lagi

 

 

Fitur Relogin dengan Cookie

Seperti saat kita membahas mengenai cookie, cookie memiliki kelebihan bisa mengatur waktu expired, berbeda dengan session, jika session otomatis akan dihapus ketika browser diclose.

nah pada bagian form login ada fitur checkbox remember, ketika checkbox remember dichecklist maka akan dibuatkan COOKIE saat proses login.

Jadi ilustrasinya ketika kita checklist bagian remember saat login, maka user akan dibuatkan cookie, dan ketika anda close browser, lalu membuka browser kembali, dan mengakses halaman login, harusnya anda langsung diredirect ke halaman home, anda tidak perlu login ulang karena informasi data user anda masih disimpan di cookie, karena cookie tidak akan dihapus meskipun browser diclose.

perhatikan perintah berikut ini di file login.php :

Keterangan :

  • Baris 11 (login.php) perintah itu melakukan pengecekan apakah memiliki COOKIE dengan nama username
  • Jika memiliki COOKIE dengan nama username, maka akan menjalankan code di baris 13 – 14 (login.php)
  • Baris 13 (login.php) perintah itu mengakses relogin di class database, dengan parameter COOKIE dengan nama username
  • Perintah baris 39 (db_connect.php) pada function relogin, function relogin memiliki 1 paremeter dengan variabel $username.
  • baris 41 (db_connect.php) perintah untuk melakukan query untuk mencari data pada tb_user dengan username sesuai dengan variabel $username
  • baris 42 (db_connect.php) kita buat variabel $data_user untuk menyimpan data user sesuai username sesuai dengan variabel $username, data yang disimpan berupa array karena kita menggunakan fetch_array()
  • baris 43 (db_connect.php) kita membuat SESSION dengan nama “username” dengan nilai dari variabel $username
  • baris 44 (db_connect.php) kita membuat SESSION dengan nama “nama” dengan nilai dari kolom nama pada table tb_user sesuai username di variabel $username
  • baris 45 (db_connect.php) kita membuat SESSION dengan nama “is_login” dengan nilai TRUE
  • lalu berikutnya meredirect ke halaman home.php (baris 14 – login.php)

 

Jadi kurang lebih seperti itu teman – teman pembahasan tutorial kali ini, kita telah membuat fitur login, register, yang menggunakan session dan cookie, serta menggunakan fitur password_hash dan password_verify.

Untuk source code hasil belajar bisa didownload dengan Klik Disini

Jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.

2 Comments

  1. Fery isniady September 18, 2019

    Selamat pagi bang.. Bang saya lg belajar utk login multi level tp gk paham2, seandainya saya hnya mau menampilkan data inputan sesuai dengan yg dbuat akun username tersebut gmn bang.. Jd tiap2 user hnya bs melihat data nya sendiri… Terima kasih bang..

    • Aris Samsudin September 19, 2019

      selamat pagi mas, kalau membuat seperti itu biasanya saya pada bagian tabel datanya, semisal tabel barang gitu ya,, saya tambahkan kolom user_entry, sehingga pada waktu user tersebut masuk ke menu tersebut, data yang ditampilkan hanya berdasarkan user itu, bisa dibuat query contohnya semacam ini : select * from nama_tabel where user_entry=nama_user, nanti nama user didapat dari session kurang lebih saya biasanya seperti itu

Leave a Comment

Your email address will not be published.