Tutorial Codeigniter 4 – Part 10 – Membuat Fitur Login dan Register dengan Codeigniter 4
Selamat datang di warung belajar, dalam tutorial kali ini saya akan meneruskan pembahasan terkait tutorial codeigniter 4, pada part 10 kita akan membahas cara membuat Halaman Login dan Register dengan Codeigniter 4.
Fitur ini saya rasa sangat penting untuk teman – teman ketika membuat sebuah aplikasi berbasis web dengan menggunakan Codeigniter 4, untuk tutorial login dan register disini kita tidak akan menggunakan Library pihak ketiga semacam My Auth dsb, kita akan menggunakan method bawaan PHP untuk hash password, dan verifikasi password, baik kita langsung mulai saja ya, kita akan bahas mulai dari tahap instalasi codeigniter 4 hingga nanti proses pembuatan fitur Register dan Login.
Video Tutorial Codeigniter 4 – Part 10 – Membuat Fitur Login dan Register (Bagian 1 – Persiapan)
Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial membuat Fitur Login dan Register untuk bagian 1 membahas tahap persiapan, seperti instalasi Codeigniter 4, dan membuat tabel menggunakan fitur migration
Instalasi Codeigniter 4
Untuk langkah awal kita perlu menginstall codeigniter 4 terlebih dahulu, dalam contoh ini kita install codeigniter 4 dalam folder dengan nama authappci4.
karena dalam contoh ini kita gunakan xampp, dan secara default untuk web direktori xampp berada di C:/xampp/htdocs, jadi silahkan masuk kedalam folder tersebut, melalui terminal, lalu berikutnya ketikkan perintah seperti gambar dibawah ini :
|
1 |
composer create-project codeigniter4/appstarter authappci4 |
Sehingga gambar berikut ini :
lalu tekan enter, tunggu hingga proses instalasi selesai.. untuk mempelajari lebih lanjut terkait dengan cara menginstall Codeigniter 4 silahkan buka tutorial kita sebelumnya : Cara Menginstall Codeigniter 4
Membuat Migration
baik langkah – langkah untuk proses pembuatan migration adalah sebagai berikut :
Silahkan buka terminal dan masuk kedalam direktori : C:\Xampp\htdocs\authappci4, lalu tuliskan perintah :
|
1 |
php spark migrate:create Users |
Lalu tekan enter
Lalu akan terbuat sebuah file didalam folder app/Database/Migrations, nama file tersebut akan diakhiri dengan nama Users, buka file tersebut, dan isi dengan code seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php namespace App\Database\Migrations; use CodeIgniter\Database\Migration; class Users extends Migration { public function up() { $this->forge->addField([ 'username' => [ 'type' => 'VARCHAR', 'constraint' => '100', ], 'password' => [ 'type' => 'VARCHAR', 'constraint' => '100', ], 'name' => [ 'type' => 'VARCHAR', 'constraint' => '100', ], 'created_at' => [ 'type' => 'DATETIME', 'null' => true, ], 'updated_at' => [ 'type' => 'DATETIME', 'null' => true, ] ]); $this->forge->addPrimaryKey('username', true); $this->forge->createTable('users'); } //-------------------------------------------------------------------- public function down() { $this->forge->dropTable('users'); } } |
Perintah diatas digunakan untuk membuat sebuah tabel dengan nama users, yang berisi kolom antara lain :
- username (varchar 100, Primary Key)
- password (varchar 100)
- name (varchar 100)
- created_at (date time)
- updated_at (date time)
Membuat Database
Setelah anda menuliskan perintah didalam migration untuk kebutuhan membuat tabel di database, berikutnya kita akan membuat database, didalam database ini akan kita buat tabel didalamnya dengan menggunakan perintah migration yang baru saja kita buat, langkah – langkahnya adalah sebagai berikut :
Silahkan akses alamat localhost/phpmyadmin di browser, tapi sebelum itu jangan lupa untuk mengaktifkan service apache dan MySQL, lalu berikutnya silahkan klik menu Database untuk membuat database baru.
Berikutnya dibagian menu database silahkan masukkan nama database yang ingin dibuat.., dalam contoh ini nama database adalah dbuser, lalu kita klik tombol Create
Setting Codeigniter 4 agar dapat terkoneksi dengan database
Setelah kita membuat database, dalam contoh ini adalah database dbuser, berikutnya kita akan setting codeigniter agar dapat terkoneksi dengan database, langkah – langkahnya adalah sebagai berikut :
didalam folder dari project codeigniter4 terdapat file dengan nama env silahkan rename menjadi .env
berikutnya buka file .env tersebut dan edit code didalamnya, untuk konfigurasi database berada pada line 52 – 56, hilangkan tanda # untuk mengaktifkan konfigurasi tersebut.
|
1 2 3 4 5 |
database.default.hostname = localhost database.default.database = dbuser database.default.username = root database.default.password = database.default.DBDriver = MySQLi |
Keterangan :
- hostname adalah alamat server dari database
- database adalah nama database yang barusan kita buat, jadi kita isi nilainya dengan nama dbuser
- username adalah nama user dari database dalam contoh ini adalah root
- password adalah password dari database dalam contoh ini saya biarkan kosong, karena default dari password user root di xampp itu kosong
- DBDriver saya biasakan default yaitu MySQLi
Menjalankan File Migration untuk membuat tabel di database
Berikutnya kita akan menjalankan file migration untuk membuat tabel didatabase, silahkan masuk ke project codeigniter anda melalui terminal, lalu jalankan perintah :
|
1 |
php spark migrate |
Jadi kurang lebih seperti ini tampilannya :
lalu tekan enter, jika proses berhasil maka tampilannya adalah sebagai berikut :
maka sampai pada step ini kita sudah membuat tabel dengan nama Users, didatabase dbuser yang sebelumnya sudah kita buat.
untuk pembahasan lebih lanjut terkait dengan migration, kita sudah membahasnya lebih rinci dalam tutorial kita sebelumnya : Mengenal Fitur Migration, Seeding, dan Library Faker di Codeigniter
Video Tutorial Codeigniter 4 – Part 10 – Membuat Fitur Login dan Register (Bagian 2 – Membuat Fitur Register)
Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial membuat Fitur Login dan Register untuk bagian 2 membahas pembuatan fitur Register
Membuat Model untuk komunikasi dengan Tabel Users
Berikutnya setelah kita membuat tabel didatabase dengan menggunakan perintah migration, berikutnya kita akan membuat model yang digunakan untuk berkomunikasi dengan tabel Users didatabase.
Silahkan buat file model dengan nama UsersModel.php didalam folder app/Models
Untuk isi file UsersModel.php adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php namespace App\Models; use CodeIgniter\Model; class UsersModel extends Model { protected $table = "users"; protected $primaryKey = "username"; protected $returnType = "object"; protected $useTimestamps = true; protected $allowedFields = ['username', 'password', 'name']; } |
Keterangan :
- untuk classnya kita beri nama yang sama dengan nama filenya yaitu UsersModel
- beberapa settingan yang kita tulis adalah :
- $table dengan nilai pegawai karena kita akan komunikasi dengan tabel users
- $primaryKey dengan nilai username karena kolom username merupakan primary key dari tabel users
- $returnType dengan nilai object karena kita ingin untuk return type nanti berupa object
- $useTimestamps dengan nilai true karena kita akan mengisikan kolom created_at (saat insert data), dan kolom updated_at (saat update data)
- $allowedFields kita isikan nama kolom di tabel users yang boleh diinsert data..
setelah kita membuat model, kita akan membuat fitur dari proses Register data user terlebih dahulu.
untuk tutorial terkait penggunaan model di codeigniter 4, bisa dilihat di tutorial kita sebelumnya : Cara Membuat Model dan Interaksi Database Melalui Model di Codeigniter 4
Membuat Controller Untuk Kebutuhan Register Data User
Berikutnya setelah kita buat file UsersModel kita akan buat file controller dengan nama Register untuk membuat fitur register data user, silahkan buat file dengan Register.php didalam folder app/Controllers
lalu isi code pada file Register.php seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php namespace App\Controllers; use App\Models\UsersModel; class Register extends BaseController { public function index() { return view('vw_register'); } } |
Keterangan :
- Line 7 kita buat class dengan nama Register kita sesuaikan dengan nama file Controllernya
- Line 5 kita load model dengan nama UsersModel
- Line 9 kita buat method dengan nama index, dimana saat method index ini diakses, akan mengakses file view dengan nama vw_register
Membuat File View untuk kebutuhan Form Register
Berikutnya kita buat file dengan nama vw_register.php didalam folder app/Views
Lalu isikan file tersebut dengan code seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!doctype html> <html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Hugo 0.79.0"> <title>Sticky Footer Template · Bootstrap v5.0</title> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sticky-footer/"> <!-- Bootstrap core CSS --> <link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- Favicons --> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico"> <meta name="theme-color" content="#7952b3"> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } </style> <!-- Custom styles for this template --> <link href="https://getbootstrap.com/docs/5.0/examples/sticky-footer/sticky-footer.css" rel="stylesheet"> </head> <body class="d-flex flex-column h-100"> <!-- Begin page content --> <main class="flex-shrink-0"> <div class="container"> <h1 class="mt-5">Register Form</h1> Silahkan Daftarkan Identitas Anda <hr /> <?php if (!empty(session()->getFlashdata('error'))) : ?> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <h4>Periksa Entrian Form</h4> </hr /> <?php echo session()->getFlashdata('error'); ?> </div> <?php endif; ?> <form method="post" action="<?= base_url(); ?>/register/process"> <?= csrf_field(); ?> <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username" name="username"> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" name="password"> </div> <div class="mb-3"> <label for="password_conf" class="form-label">Confirm Password</label> <input type="password" class="form-control" id="password_conf" name="password_conf"> </div> <div class="mb-3"> <label for="name" class="form-label">Name</label> <input type="text" class="form-control" id="name" name="name"> </div> <div class="mb-3"> <button type="submit" class="btn btn-primary">Register</button> </div> </form> <hr /> </div> </main> <footer class="footer mt-auto py-3 bg-light"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> </body> </html> |
Keterangan :
Code diatas cukup panjang ya teman – teman, tapi aslinya yang membuat panjang hanyalah template tampilan dari bootstrap, saya disini menggunakan Bootstrap 5, dan untuk library CSS dan JSnya saya akses langsung diserver mereka, jadi untuk menggunakan tampilan ini ada baiknya teman – teman menggunakan koneksi internet untuk mengakses library CSS dan JS dari bootstrap
Kita akan fokus pada line 58 – 86 dari mulai pengecekan jika ada proses registrasi yang gagal menggunakan session flashdata (58 – 64), hingga pembuatan form (65 – 86)
Line 58 – 64 kita melakukan pengecekan session flashdata dengan nama error, jika ada maka akan menampilkan error form validation
Line 65 kita menggunakan tag form dengan menggunakan method post, dan untuk proses registrasi formnya akan diarahkan kedalam URL : base_url/register/process (kita akan buat method process ini didalam controller register nantinya)
Line 66 kita gunakan perintah csrf_field() untuk memberikan token csrf dibagian form ini
Line 69 kita buat inputan text dengan nama “username”
Line 73 kita buat inputan dengan nama “password”
Line 77 kita buat inputan dengan nama “password_conf”
Line 81 kita buat inputan dengan nama “name”
Line 84 kita buat tombol untuk kebutuhan submit form register
Membuat Method untuk memproses fitur Registrasi
Buka lagi file controller dengan Register.php, dan buat method dengan nama process didalamnya, sehingga nantinya isi code File Controller Register.php menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?php namespace App\Controllers; use App\Models\UsersModel; class Register extends BaseController { public function index() { return view('vw_register'); } public function process() { if (!$this->validate([ 'username' => [ 'rules' => 'required|min_length[4]|max_length[20]|is_unique[users.username]', 'errors' => [ 'required' => '{field} Harus diisi', 'min_length' => '{field} Minimal 4 Karakter', 'max_length' => '{field} Maksimal 20 Karakter', 'is_unique' => 'Username sudah digunakan sebelumnya' ] ], 'password' => [ 'rules' => 'required|min_length[4]|max_length[50]', 'errors' => [ 'required' => '{field} Harus diisi', 'min_length' => '{field} Minimal 4 Karakter', 'max_length' => '{field} Maksimal 50 Karakter', ] ], 'password_conf' => [ 'rules' => 'matches[password]', 'errors' => [ 'matches' => 'Konfirmasi Password tidak sesuai dengan password', ] ], 'name' => [ 'rules' => 'required|min_length[4]|max_length[100]', 'errors' => [ 'required' => '{field} Harus diisi', 'min_length' => '{field} Minimal 4 Karakter', 'max_length' => '{field} Maksimal 100 Karakter', ] ], ])) { session()->setFlashdata('error', $this->validator->listErrors()); return redirect()->back()->withInput(); } $users = new UsersModel(); $users->insert([ 'username' => $this->request->getVar('username'), 'password' => password_hash($this->request->getVar('password'), PASSWORD_BCRYPT), 'name' => $this->request->getVar('name') ]); return redirect()->to('/login'); } } |
Keterangan :
- Line 14 kita buat method dengan nama process
- Line 16 – 48 kita buat form validasi, atas form registrasi dengan rules sebagai berikut :
- username : Harus diisi|minimal panjang 4 karakter|maksimal panjang 20 karakter|username harus unique didalam kolom username di tabel users
- password : Harus diisi|minimal panjang 4 karakter|maksimal panjang 50 karakter
- password_conf : isinya harus seperti dibagian password
- name : Harus diisi|minimal panjang 4 karakter|maksimal panjang 100 karakter
- Line 49 – 50 code ini akan dijalankan ketika ada rules di form validation tidak sesuai, akan generate session flashdata dengan nama error, dengan isinya adalah daftar error dari form validasi, serta akan redirect kembali ke form registrasi (Line 50)
- Line 52 kita buat object dengan variabel $users dengan menggunakan class UsersModel
- dengan menggunakan variabel $users yang merupakan object, kita menggunakan method insert untuk insert data ke database, dimana parameternya adalah berupa array, dengan key adalah nama kolom di tabel users dan value adalah inputan dari bagian form register
- Line 58 setelah proses insert data berhasil akan diredirect ke dalam halaman login.
Membuat Routing untuk proses Register
Berikutnya kita akan membuat routing untuk fitur register ini, untuk handling URL saat menampilkan form registrasi, dan handling URL saat memproses form registrasi.
buka file Routes.php didalam folder app/Config
tambahkan code dibawah ini setelah line 34 :
|
1 2 |
$routes->get('/register', 'Register::index'); $routes->post('/register/process', 'Register::process'); |
Keterangan :
- Line 1 untuk handling jika ada akses URL : base_url/register dengan method get akan diarahkan ke method index pada controller Register
- Line 2 untuk handling jika ada akses URL : base_url/register/process dengan method post akan diarahkan ke method process pada controller Register
pembahasan terkait routing di codeigniter 4 bisa dibaca di tutorial kita sebelumnya : Membuat Routing di Codeigniter 4
Testing Fitur Register
Berikutnya kita akan testing fitur register yang barusan kita buat, langkah – langkahnya adalah sebagai berikut :
Jalankan dulu local development server dengan perintah :
|
1 |
php spark serve |
Lalu berikutnya akses url untuk mengakses form register :
|
1 |
localhost:8080/register |
Tampilannya kurang lebih seperti berikut ini :
Lalu isikan data pada form register tersebut, dan klik tombol Register
setelah anda klik tombol Register, jika proses register berhasil, harusnya anda akan diarahkan ke alamat localhost:8080/login
tampilan akan semacam ini, error 404 – File Not Found, hal ini dikarenakan kita belum membuat controller untuk handling bagian login ini.
Sampai disini target kita adalah data yang kita register harus masuk ke dalam tabel users, coba sekarang kita akses tabel users di database dbuser
coba akses phpmyadmin, melalui URL : localhost/phpmyadmin lalu masuk kedalam database dbuser dan masuk kedalam tabel users
terlihat terdapat 1 record dengan username budi2000, ini adalah data yang kita insert melalui form register sebelumnya.
Video Tutorial Codeigniter 4 – Part 10 – Membuat Fitur Login dan Register (Bagian 3 – Membuat Fitur Login)
Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial membuat Fitur Login dan Register untuk bagian 3 membahas pembuatan fitur Login
Membuat Controller untuk fitur Login
Setelah bagian sebelumnya kita sudah membuat fitur register, berikutnya kita akan membuat fitur login, kita akan mulai dari proses membuat controller Login.
Buat file Controller dengan nama Login.php didalam folder app/Controllers, untuk isi codenya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php namespace App\Controllers; use App\Models\UsersModel; class Login extends BaseController { public function index() { return view('vw_login'); } } |
Keterangan :
- Line 7 kita buat class dengan nama Login kita samakan dengan nama file controller
- Line 5 kita load model dengan nama UsersModel
- Line 9 kita buat method dengan nama index, dimana ketika method index ini diakses maka akan menampilkan tampilan view dengan nama vw_login (Line 11)
Membuat file View untuk kebutuhan form login
Buat file view dengan nama vw_login.php didalam folder app/Views, dan isikan dengan code seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Hugo 0.79.0"> <title>Signin Template · Bootstrap v5.0</title> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sign-in/"> <!-- Bootstrap core CSS --> <link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- Favicons --> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico"> <meta name="theme-color" content="#7952b3"> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } </style> <!-- Custom styles for this template --> <link href="https://getbootstrap.com/docs/5.0/examples/sign-in/signin.css" rel="stylesheet"> </head> <body class="text-center"> <main class="form-signin"> <?php if (!empty(session()->getFlashdata('error'))) : ?> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <?php echo session()->getFlashdata('error'); ?> </div> <?php endif; ?> <form method="post" action="<?= base_url(); ?>/login/process"> <?= csrf_field(); ?> <h1 class="h3 mb-3 fw-normal">Login</h1> <input type="text" name="username" id="username" placeholder="Username" class="form-control" required autofocus> <input type="password" name="password" id="password" placeholder="Password" class="form-control" required> <button type="submit" class="w-100 btn btn-lg btn-primary">Login</button> <p class="mt-5 mb-3 text-muted">© Warung Belajar</p> </form> </main> </body> </html> |
Keterangan :
- Code diatas cukup panjang ya teman – teman, tapi aslinya yang membuat panjang hanyalah template tampilan dari bootstrap, saya disini menggunakan Bootstrap 5, dan untuk library CSS dan JSnya saya akses langsung diserver mereka, jadi untuk menggunakan tampilan ini ada baiknya teman – teman menggunakan koneksi internet untuk mengakses library CSS dan JS dari bootstrap
- Line 53 – 57 digunakan untuk mengecek session flash data dengan nama error untuk menampilkan pesan ketika ada error pada saat proses login
- Line 58 – 65 kita buat form login
- Tag form kita buat pada line 58 dengan method adalah post, dan bagian kita set agar ketika tombol submit di klik form akan diproses di URL base_url/login/process
- Line 61 kita buat inputan untuk bagian username, kita beri value atas attribute name adalah username
- Line 62 kita buat inputan untuk bagian password, kita beri value atas attribute name adalah password
- Line 63 kita buat tombol submit untuk kebutuhan Login
Membuat Method untuk memproses fitur Login
Berikutnya kita buat method yang digunakan untuk memproses bagian fitur Login, silahkan masuk kedalam file controller Login.php, lalu tambahkan method baru dengan nama process, sehingga controller Login menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php namespace App\Controllers; use App\Models\UsersModel; class Login extends BaseController { public function index() { return view('vw_login'); } public function process() { $users = new UsersModel(); $username = $this->request->getVar('username'); $password = $this->request->getVar('password'); $dataUser = $users->where([ 'username' => $username, ])->first(); if ($dataUser) { if (password_verify($password, $dataUser->password)) { session()->set([ 'username' => $dataUser->username, 'name' => $dataUser->name, 'logged_in' => TRUE ]); return redirect()->to(base_url('home')); } else { session()->setFlashdata('error', 'Username & Password Salah'); return redirect()->back(); } } else { session()->setFlashdata('error', 'Username & Password Salah'); return redirect()->back(); } } } |
Keterangan :
Method Process itu berada pada line 14 – 38
Line 16 kita buat variabel $users untuk dijadikan sebuah object dengan menggunakan class UsersModel
Line 17 – 18 kita buat 2 variabel dengan nama username dan password, untuk menyimpan inputan dari form login
Line 19 kita cari data didalam tabel users, kita gunakan variabel $users yang merupakan object, dengan menggunakan method where kita akan melakukan pengecekan apakah ada data di tabel users yang memiliki username yang sama dengan username yang dimasukkan dibagian form login, serta kita menggunakan method first untuk mendapatkan data pertama dari hasil query.
Line 22 kita menggunakan perintah IF untuk melakukan pengecekan apakah data user tersebut ada, jika datanya ada maka akan menjalankan line 23 – 33, jika data tidak ada akan menjalankan perintah pada line 35 – 36
Line 23 kita gunakan method password_verify untuk memastikan password yang diinputkan didalam form login sesuai dengan password yang berada pada data users yang ditemukan
Line 24 – 28 kita set session, disini ada 3 data session dengan nama :
- username
- name
- logged_in
setelah membuat session berikutnya kita akan redirect ke alamat url home
Jika proses login salah akan diredirect kembali ke halaman form login, dan menyertakan session flashdata dengan nama error, dan value adalah “Username & Password Salah” itu nanti yang akan tampil dihalaman login saat proses login gagal.
Membuat Controller Home
Berikutnya kita akan melanjutkan ke pembuatan halaman home, dimana halaman home ini adalah halaman yang akan ditampilkan saat proses login berhasil, untuk controller Home sudah terbuat otomatis saat kita menginstall Codeigniter 4, bisa anda buka file Home.php yang berada pada folder app/Controllers, lalu ubah codenya menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 |
<?php namespace App\Controllers; class Home extends BaseController { public function index() { return view('vw_home'); } } |
Keterangan :
yang kita ubah disini adalah pada bagian method index, kita ubah nama view yang ditampilkan menjadi vw_home.
Membuat file vw_home.php untuk tampilan halaman Home
Berikutnya kita akan membuat tampilan untuk halaman home, silahkan buat file view dengan nama vw_home.php didalam folder app/Views, lalu isikan dengan code sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <meta name="generator" content="Hugo 0.79.0"> <title>Starter Template · Bootstrap v5.0</title> <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/starter-template/"> <!-- Bootstrap core CSS --> <link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <!-- Favicons --> <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json"> <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3"> <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico"> <meta name="theme-color" content="#7952b3"> <style> .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } </style> <!-- Custom styles for this template --> <link href="https://getbootstrap.com/docs/5.0/examples/starter-template/starter-template.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="https://warungbelajar.com">Warung Belajar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item active"> <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="<?= base_url(); ?>/logout">Logout</a> </li> </ul> </div> </div> </nav> <main class="container"> <div class="starter-template text-center py-5 px-3"> <h1>Hai ! <?= session()->get('name'); ?></h1> <p class="lead">Selamat Datang di Warung Belajar, Kita sudah belajar membuat Authentikasi dengan Codeigniter 4</p> </div> </main><!-- /.container --> <script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html> |
Keterangan :
Untuk tampilannya disini saya menggunakan template dari bootstrap 5, dan untuk library JS dan CSS saya langsung link ke server bootstrap, jadi teman – teman harus memiliki akses internet untuk menjalankan tampilan ini.
perhatikan pada line 74 – 77 kita membuat tampilan yang akan ada dibagian halaman home, kita mengambil data pada session dengan nama “name” (Line 75) kita gunakan perintah
|
1 |
session()->get('name') |
kita juga buat tombol logout pada line 65, dimana jika tombol itu diklik akan mengakses URL : base_url/logout
Membuat Method Logout di Controller Login
Berikutnya kita akan menambahkan method dengan nama logout di controller Login, yang digunakan untuk proses logout dari dalam aplikasi, tambahkan method logout sehingga code didalam controller Login menjadi seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?php namespace App\Controllers; use App\Models\UsersModel; class Login extends BaseController { public function index() { return view('vw_login'); } public function process() { $users = new UsersModel(); $username = $this->request->getVar('username'); $password = $this->request->getVar('password'); $dataUser = $users->where([ 'username' => $username, ])->first(); if ($dataUser) { if (password_verify($password, $dataUser->password)) { session()->set([ 'username' => $dataUser->username, 'name' => $dataUser->name, 'logged_in' => TRUE ]); return redirect()->to(base_url('home')); } else { session()->setFlashdata('error', 'Username & Password Salah'); return redirect()->back(); } } else { session()->setFlashdata('error', 'Username & Password Salah'); return redirect()->back(); } } function logout() { session()->destroy(); return redirect()->to('/login'); } } |
Keterangan :
Method logout berada pada line 40 – 44
pada method logout kita akan menjalankan perintah untuk menghapus session dengan perintah :
|
1 |
session()->destroy(); |
setelah proses hapus data session selesai kita akan diredirect ke halaman login
Buat Routing untuk kebutuhan fitur Login
Berikutnya kita akan buat routing untuk handling kebutuhan fitur login yang barusan saja kita buat, silahkan buat file dengan nama
|
1 2 3 |
$routes->get('/login', 'Login::index'); $routes->post('/login/process', 'Login::process'); $routes->get('/logout', 'Login::logout'); |
Keterangan :
- ketika mengakses url /login dengan method get akan diarahkan kedalam controller Login kedalam method index
- ketika mengakses url /login/process dengan method post, maka akan diarahkan kedalam controller Login di method process
- ketika url mengakses url /logout dengan method get, maka akan diarahkan kedalam controler Login di method logout
Testing Proses Login
Berikutnya kita akan mencoba fitur login yang barusan saja kita buat, dalam tutorial sebelumnya kan kita sudah membuat sebuah user baru dengan detail sebagai berikut :
- username : budi2000
- password : 12345678
kita akan coba untuk menggunakan user tersebut untuk login kedalam aplikasi yang kita buat, langkah – langkahnya adalah sebagai berikut :
jalankan dulu local development server dengan menjalankan perintah :
|
1 |
php spark serve |
Lalu silahkan akan alamat :
|
1 |
localhost:8080/login |
maka tampilannya adalah sebagai berikut :
Kita masukkan username dan password, lalu klik tombol Login
Jika proses login berhasil maka akan diarahkan ke halaman Home
Maka anda akan masuk ke halaman home, dan ada informasi nama user yang sedang login yaitu “Budi Santoso”
Berikutnya kita coba kita logout, silahkan klik tombol logout.., lalu anda akan dikembalikan ke halaman login
Video Tutorial Codeigniter 4 – Part 10 – Membuat Fitur Login dan Register (Bagian 4 – Membuat Pembatasan Akses dengan Filter)
Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial membuat Fitur Login dan Register untuk bagian 4 membahas pembatasan akses dengan Filter
Membuat Pembatasan Akses dengan menggunakan Filter
Setelah kita belajar bagaimana cara membuat fitur register, login dan logout, berikutnya kita akan belajar untuk membuat pembatasan akses, jika user belum melakukan login.
Seperti yang kita telah set sebelumnya ketika berhasil login akan diarahkan kehalaman home, nah sebenarnya saat ini kita hanya membuat fitur login saja, kita belum membuat pembatasan akses ketika user yang belum login, jadi user yang belum login tetap bisa mengakses halaman Home, harusnya kan tidak boleh.
Kita akan membuat pembatasan akses dengan memanfaatkan fitur Filter, Filter ini termasuk kedalam jenis Controller, dengan menggunakan Filter kita bisa menjalankan method tertentu sebelum atau setelah controller dieksekusi.
Jadi ilustrasinya kita akan membuat method untuk melakukan cek apakah user tersebut sudah login atau belum, dan method itu akan dijalankan sebelum controller dieksekusi, sehingga ketika users belum login dan mengakses menu tertentu maka akan ditolak oleh sistem, sistem akan redirect ke dalam halaman login, agar user tersebut login terlebih dulu.
Untuk langkah awal kita buat dulu controller Filter, silahkan buat file dengan UsersAuthFilter.php dan simpan di folder app/Filters, untuk isi file UsersAuthFilter.php adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php namespace App\Filters; use CodeIgniter\HTTP\RequestInterface; use CodeIgniter\HTTP\ResponseInterface; use CodeIgniter\Filters\FilterInterface; class UsersAuthFilter implements FilterInterface { public function before(RequestInterface $request, $arguments = null) { if(is_null(session()->get('logged_in'))) { return redirect()->to(base_url('login/index')); } } //-------------------------------------------------------------------- public function after(RequestInterface $request, ResponseInterface $response, $arguments = null) { // Do something here } } |
Keterangan :
- Kita buat class dengan nama yang sama dengan nama file yaitu UsersAuthFilter
- Karena kita ingin method ini dijalankan sebelum eksekusi controller sehingga kita mengisi bagian method before
- Pada method before kita akan cek apakah session dengan nama logged_in tidak ada, jika tidak ada session dengan nama logged_in maka kita akan diredirect ke url base_url/login
Berikutnya kita akan aktifkan filter ini akan bisa dijalankan, silahkan buka file dengan nama Filters.php yang berada pada folder app/Config/
Silahkan tambahkan filter baru tersebut dibagian $aliases sehingga menjadi seperti berikut ini :
|
1 2 3 4 5 6 |
public $aliases = [ 'csrf' => \CodeIgniter\Filters\CSRF::class, 'toolbar' => \CodeIgniter\Filters\DebugToolbar::class, 'honeypot' => \CodeIgniter\Filters\Honeypot::class, 'usersAuth' => \App\Filters\UsersAuthFilter::class, ]; |
Terlihat kita tambahkan filter UsersFilter kita buat alias dengan nama usersAuth
Berikutnya silahkan tambahkan bagian $globals menjadi seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public $globals = [ 'before' => [ 'csrf', 'usersAuth' => [ 'except' => [ 'login/*', 'logout/*' ] ] ], 'after' => [ 'toolbar', //'honeypot' ], ]; |
Keterangan :
tambahkan dibagian before, kita tambahkan 2 perintah yang akan dijalankan yaitu :
- Csrf : ini diaktifkan agar dibagian form terdapat token
- usersAuth, dibagian usersAuth ini kita tulis agar dilakukan pengecekan apakah user sudah login atau belum, serta kita berikan except / pengecualian agar method ini tidak dijalankan di URL login dan logout
Testing Authentikasi
Untuk melakukan testing proses authentikasi, pastikan anda belum login ke aplikasi sebelumnya, jika sudah login silahkan login terlebih dahulu
Sampai disini kita asumsikan teman – teman belum login ya, jangan lupa jalankan local development server, lalu coba akses url :
|
1 |
localhost:8080/home |
Harusnya teman – teman akan diredirect ke halaman login…, karena authentikan pengecekan session logged_in akan dijalankan, sehingga ketika mengakses halaman home dan anda belum login maka anda diharuskan login terlebih dahulu..
Jadi kurang lebih seperti itu ya teman – teman untuk pembuatan fitur authentikasi, dari mulai register, login, logout dan pengecekan authentikasi menggunakan filter di Codeigniter 4, sebenarnya masih banyak lagi teknik yang bisa teman – teman gunakan bisa menggunakan library pihak ketiga, cuma saya sendiri suka menggunakan cara seperti ini.
untuk teman – teman yang ingin download source code dari belajar Authentikadi di Codeigniter 4, bisa klik tombol dibawah ini :
sekian dulu ya teman – teman sampai jumlah di tutorial codeigniter 4 part berikutnya.
