Tutorial Codeigniter Part 23 – Membuat Fitur Register, Login dan Logout di Codeigniter

Hai selamat datang di tutorial warung belajar, dalam tutorial kali ini kita akan melanjutkan seri tutorial framework codeigniter, dalam tutorial ini kita akan belajar untuk membuat fitur register, login dan logout di codeigniter.

Sebelum kita membahas mengenai pembuatan fitur register dan login di codeigniter, ada baiknya anda telah memahami beberapa tutorial kami sebelumnya :

Penanganan Form dan Validasi di Codeigniter

Penggunaan Database di Codeigniter

Session di Codeigniter

baik saya asumsikan teman – teman sudah memahami beberapa hal yang nantinya kita perlukan, kita akan mulai dalam proses pembuatan fitur register dan login di codeigniter.

Saya asumsikan teman – teman sudah memiliki framework codeigniter yang telah terinstall di komputer anda masing masing, dalam contoh ini folder codeigniter saya bernama belajarcodeigniter, baiklah kita akan mulai prakteknya.

 

Buat Database yang diperlukan

Untuk langkah awal, anda harus membuat database beserta tabel yang diperlukan, dalam contoh ini :

Database kita beri nama db_siswa

Berikutnya kita buat tabel, tabel tersebut kita beri nama tb_user, untuk bagian tabel kita buat beberapa kolom antara lain :

  • username (varchar 255) (primary key)
  • password (varchar 255)
  • nama (varchar 255)

Anda juga dapat menggunakan perintah Query SQL untuk membuat database dan tabelnya :

 

 

 

Setting Autoload Library Codeigniter

Silahkan buka file autoload.php yang berada pada application/config/autoload.php, pada bagian libraries tuliskan seperti berikut ini  :

kita load beberapa library seperti database, session dan form validation

berikutnya dibagian helper tambahkan helper url :

 

 

 

Setting Config Codeigniter

Berikutnya silahkan setting config dari codeigniter, silahkan buka file application/config/config.php

dibagian base_url, ubah menjadi seperti berikut ini :

untuk alamat dibagian base_url isi sesuai alamat dari project codeigniter anda

 

 

 

Setting Config Database Codeigniter

Berikutnya silahkan setting config database di codeigniter agar dapat terhubung dengan database, silahkan buka file application/config/database.php

Keterangan :

ubah menjadi seperti diatas, yang perlu anda sesuaikan adalah :

  • hostname harusnya kalau menggunakan server lokal tetap tertulis localhost
  • username defaultnya adalah root
  • password defaultnya adalah kosong
  • database bisa disesuaikan dengan database yang anda buat, dalam contoh ini adalah siswa_db

oke sampai disini settingan kita sudah selesai untuk codeigniternya.

 

 

 

Tambahkan Library CSS Bootstrap agar tampilan lebih menarik

Agar tampilannya menarik kita perlu menggunakan CSS dari Bootstrap, kita gunakan bootstrap 4 dalam contoh ini, nah langkah – langkahnya silahkan download dulu file CSSnya pada alamat dibawah ini :

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Berikutnya silahkan buat folder assets lalu didalamnya buat folder css.

lalu silahkan pindahkan file bootstrap.min.css kedalam folder css yang barusan anda buat, sehingga tampilannya seperti berikut ini :

 

 

 

Membuat Fitur Register

Berikutnya kita akan buat fitur register, untuk langkah awal kita buat controller dengan nama Register.php, untuk posisi controller berada pada application/controller/Register.php

Keterangan :

Pada controller register kita buat ada 1 method yaitu index, method ini digunakan untuk load view dengan nama vw_register.php di line 14.

 

berikutnya kita buat file vw_register.php di dalam folder application/views/vw_register.php

Untuk Mengakses halaman register, anda bisa menggunakan alamat : localhost/belajarcodeigniter/index.php/register

Keterangan :

Pada file vw_register.php ini kita buat form untuk keperluan register user.

Pada Line 14 – 19 kita tulis code untuk melakukan pengecekan apakah ada error pada form validation, kita gunakan flashdata untuk mengirimkan data, jika ada error pada form validasi maka akan ditampilkan pesannya dengan perintah di Line 16 – 18

Pada Line 21 kita atur untuk proses save data user di controller register pada method proses

Untuk Form ini kita buat beberapa bagian form, yaitu :

  • Username Line 24
  • Password Line 28
  • Nama Line 32

 

 

 

Proses Save data Registrasi User

Berikutnya kita buka kembali file Register.php, dan tambahkan method proses, sehingga file controller Register.php menjadi seperti berikut ini :

 

Lalu berikutnya kita buat file model, dengan nama Auth.php, untuk tempat penyimpanan model adalah di folder application/models/Auth.php, isi code dari model adalah seperti berikut ini :

Keterangan :

Kita mulai dengan method yang digunakan untuk memproses bagian form register, kita fokus di method proses di controller Register.php Line 17 – 36

Pada Line 19 – 21 kita menuliskan aturan untuk form validasi.

Jika inputan form valid maka akan lanjut kedalam proses di Line 24 – 29, tapi jika gagal akan mengakses line 33 – 34 untuk membuat flashdata untuk menampilkan error dan diredirect kedalam method index di controller Register.php untuk menampilkan form register

Kita lanjutkan dibagian pemrosesan data registernya, Line 24 – 26 kita tangkap terlebih inputan dari form untuk bagian username, password, dan nama

Berikutnya pada line 27 kita akses method register di model Auth, dengan menuliskan variabel $username, $password, dan $nama yang berisi inputan dibagian form, sebagai parameter untuk method register di model Auth

 

Berikutnya buka file model Auth.php

Kita fokus di method register Line 10, kita membuat method register dengan menuliskan 3 parameter yaitu $username, $password, dan $nama

Berikutnya kita buat variabel array dengan nama $data_user dimana berisi variabel yang dijadikan parameter tersebut, untuk key pada array tersebut kita sesuaikan dengan kolom yang ada di tabel tb_user,  untuk bagian password, kita gunakan password_hash untuk melakukan hash terhadap bagian password Line (14)

Berikutnya pada Line 17 kita buat perintah untuk query insert data ke tabel “tb_user“, dengan data yang diinsert adalah data yang barada dalam array di variabel $data_user

 

Setelah proses insert data berhasil, berikutnya anda kembali controller Register.php dan menjalankan Line 28 untuk membuat flashdata dengan nama success_register dengan nilai ‘Proses pendaftaran User Berhasil’, pesan ini yang akan ditampilkan ketika proses register berhasil, lalu berikutnya diredirect ke controller login

controller login ini belum kita buat, kita akan bahas dibagian proses login.

 

 

 

Membuat Fitur Login

Berikutnya kita akan membuat fitur untuk melakukan login, untuk langkah awal silahkan buat Controller dengan nama Login.php, untuk posisi file controller berada di application/controller/Login.php

Untuk isi dalam file controller Login.php adalah sebagai berikut :

 

Berikutnya kita akan menambahkan perintah dibagian model Auth, untuk handling proses login, kita menambahkan method login_user dan cek_login, sehingga untuk model Auth menjadi seperti berikut ini :

 

Membuat File View untuk form login

berikutnya kita akan buat untuk file view dengan nama vw_login.php, file view ini digunakan untuk membuat  form login, perhatikan line 12 method index di Controller Login, kita load view dengan nama vw_login.php

Baik kita buat file view dengan nama vw_login.php, posisi file view ini berada pada application/view/vw_login.php, untuk isi codenya adalah sebagai berikut :

Untuk Mengakses Halaman Login anda bisa mengakses alamat : localhost/belajarcodeigniter/index.php/login

Keterangan :

Baik penjelasannya kita mulai dari controller Login, perhatikan method index (Line 12), yang load file dengan nama vw_login, dimana file vw_login ini berisi form login.

 

Berikutnya kita beralih ke file vw_login, file ini berisi form login, kita akan mulai membahasnya

Line 14 – 19 adalah code php yang digunakan untuk melakukan pengecekan apakah proses loginnya mengalami error, seperti username & password yang salah,, kita melakukan pengecekan terhadap bagian flashdata error

Pada Line 23 – 28 kita tuliskan code untuk melakukan pengecekan apakah proses register user berhasil, karena ketika user berhasil register akan diarahkan kedalam form login, kita melakukan pengecekan terhadap flashdata success_register

Berikutnya kita membuat form (Line 30) dengan nilai attribute action mengarah ke controller Login dengan method proses, berarti nanti untuk proses login akan menggunakan controller Login dengan method proses

Lalu kita buat inputan username Line 33 untuk membuat inputan username

Lalu kita buat inputan password Line 37

 

Pembahasan Proses Login

Berikutnya ketika proses tombol login disubmit, maka akan melakukan proses login ke dalam method proses di controller Login, penjelasannya sebagai berikut :

Line 19 – kita simpan hasil input username kedalam variabel $username

Line 20 – kita simpan hasil input password kedalam variabel $password

Line 21 kita mengakses method login_user di dalam model Auth, karena nantinya return berupa nilai boolean TRUE atau FALSE sehingga kita menggunakan perintah IF, untuk mengakses method login_user kita perlu menyertakan variabel $username dan $password sebagai parameter untuk keperluan pengecekan proses login

 

Berikutnya kita beralih ke model Auth, kita mengakses method login_user perhatikan line 20 – 39, pada method ini juga harus menyertakan parameter $username dan $password

Pada Line 22 kita tuliskan perintah query untuk melakukan pengecekan apakah ada data di tabel tb_user yang memiliki username yang sesuai dengan nilai di variabel $username

Pada Line 23 kita lakukan pengecekan apakah terdapat data dengan username tersebut, jika iya maka akan menjalankan perintah di line 25 – 33

Pada Line 25 kita menyimpan data dari user tersebut ke dalam variabel $data_user

Pada Line 26 kita lakukan verifikasi password, apakah password sesuai

jika password sesuai bisa dikatakan user berhasil login, dan mendaftarkan data user kedalam session, perhatikan line 27 – 29

session yang kita daftarkan adalah username, nama, dan is_login, selain itu kita juga akan return nilai TRUE yang akan dibaca oleh Login Controller

tetapi jika proses verifikasi password gagal maka user dinyatakan tidak berhasil login, sehingga model akan return nilai FALSE yang akan dibaca oleh Login Controller

 

Kita kembali ke Controller Login setelah mempelajari proses login di method login_user di method Auth, jika user berhasil login maka akan menjalankan line 23 (Controller Login), dimana kita diredirect kedalam controller Home, controller ini akan kita buat di step berikutnya

tetapi jika proses login gagal, maka yang akan dijalankan adalah line 27 – 28 (Controller Login), dimana akan generate flashdata dengan nama error, dengan nilai “Username & Password Salah”, dan diredirect kedalam controller login untuk mengakses method index yang artinya menampilkan form login kembali

 

 

 

Membuat Halaman Home

Berikutnya kita akan membuat controller Home, yang nantinya akan ditampilkan ketika proses login berhasil, silahkan buat file controller dengan nama Home.php didalam folder application/controllers/Home.php, untuk isi codenya adalah sebagai berikut :

 

Berikutnya kita buat file view dengan nama vw_home.php, posisinya adalah di application/views/vw_home.php

Keterangan :

Ketika user berhasil login akan diredirect kedalam controller home (Controller Login.php line 28).

Pembahasan file controller Home.php kita mulai dibagian method __construct, dimana method ini akan diakses ketika controller Home.php dijalankan.

Pada file controller Home.php kita load model Auth pada line 9

Berikutnya kita mengakses method cek_login didalam model Auth

method ini jika kita melihat didalam model Auth, isinya sebagai berikut :

Pada perintah diatas kita melakukan pengecekan apakah memiliki session dengan nama is_login, jika ternyata empty / tidak memiliki, maka akan diredirect ke controller Login untuk diminta login terlebih dahulu, jadi intinya perintah ini adalah melakukan pengecekan apakah kita sudah login atau belum.

 

Berikutnya kita menuju ke method index didalam controller Home.php kita load file view dengan nama vw_home.php.

Pada file view vw_home.php pada line 13 kita akan mengakses data session dengan name “nama

sehingga akan menampilkan nama user yang sedang login

Berikutnya di line 15 kita buat tombol Logout, yang mengakses method logout di controller login.

kita coba perhatikan method logout di controller login

Perintah diatas adalah digunakan untuk menghapus data session, dengan nama username, nama, dan is_login, setelah itu redirect ke dalam login

 

 

 

Testing Fitur Register dan Login

Kita akan coba melakukan register terlebih dahulu, silahkan akses alamat http://localhost/belajarcodeigniter/index.php/register

Berikunya kita akan register user baru dengan data sebagai berikut ini :

  • Username : taufik
  • Nama : Taufik Hidayat
  • Password : 12345678

jika sudah terisi, silahkan klik tombol Register, maka tampilan jika berhasil seperti berikut ini :

Nah kita sudah berhasil mendaftarkan untuk usernya, berikutnya kita akan coba login, untuk login bisa menggunakan alamat : http://localhost/belajarcodeigniter/index.php/login

lalu masukkan username dan passwordnya, dalam contoh ini :

  • username : taufik
  • password : 12345678

lalu klik login

 

Jika Login berhasil maka akan diarahkan kedalam halaman home, sehingga tampilannya adalah sebagai berikut :

Maka anda akan masuk ke halaman Home, dan ditampilkan nama user yang sedang login, untuk melakukan logout bisa klik tombol logout, maka anda akan diarahkan kembali ke halaman Login

 

 

 

Source Code Lengkap

Berikutnya kita akan tuliskan code lengkap di masing – masing bagian file, seperti controller, models, dan view, kurang lebih sebagai berikut :

File Controller Register.php
 

File Controller Login.php
 

File Controller Home.php
 

File Model Auth.php
 

File view vw_register.php
 

File view vw_login.php
 

File view vw_home.php
Untuk Source Code Lengkapnya bisa klik disini : Source Code Register Login Codeigniter 3

 

Baik sekian dulu teman – teman pembahasan tutorial kali ini, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial codeigniter berikutnya.

Leave a Reply

Your email address will not be published. Required fields are marked *