Blog Development and Profile Management Using CodeIgniter4 (Part 3-Login Page Setup)

Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!

Di bagian ketiga dari tutorial “Blog Development and Profile Management Using CodeIgniter4”, kita akan membahas cara mengatur halaman login. Pada tahap ini, kita akan fokus pada pembuatan halaman login yang memungkinkan pengguna untuk masuk ke akun mereka dengan mudah dan aman. Langkah-langkahnya meliputi pembuatan form login, validasi data login seperti username dan password, serta pengelolaan sesi pengguna setelah berhasil login. Dengan setup yang tepat, halaman login ini akan memastikan bahwa hanya pengguna yang terdaftar yang bisa mengakses konten dan fitur-fitur penting dari blog yang kita kembangkan.

A. Persiapan Tools

• Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start

• Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge pastikan sudah membuka url berikut: localhost/myblog-nama-kelas/public

• Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya

B. Langkah-langkah Pengaturan Halaman Login

1. Persiapan View, Controller, & Route

View

• Bukalah folder app/Views/auth
• Buatlah file baru bernama v_login.php

• Copy seluruh paragraf script berikut dan Paste ke dalam file v_login.php lalu simpan

<form action="" method="post">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Username" name="username" value="" required>
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-user"></span>
            </div>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="password" class="form-control" placeholder="Password" name="password" required>
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-lock"></span>
            </div>
        </div>
    </div>
    <div class="text-center mt-2 mb-3">
        <button type="submit" class="btn bg-gray-dark btn-block">Login</button>
    </div>
</form>
<p class="mb-1 text-dark">Does not have an account? <a href="">Register here</a></p>

Controller

• Bukalah folder app/Controllers
• Tambahkan function baru di dalam class AuthController lalu simpan

Route

• Bukalah folder app/Config
• Ubah file Routes.php dengan menghilangkan url: $routes->get(‘/’, ‘Home::index’);
• Kemudian mendaftarkan url baru untuk memanggil halaman login lalu simpan

• Selanjutnya mencoba membuka halaman login pada Web Browser dengan mengetikan url berikut: localhost/myblog-nama-kelas/public/, kemudian tekan Enter

2. Aktifasi Fungsi Form Login

Model

• Bukalah folder app/Models
• Ubah file UserModel.php dengan menambahkan function baru di dalam class UserModel lalu simpan

Controller

• Bukalah folder app/Controllers
• Ubah file AuthController.php dengan menambahkan perintah method post di dalam function login() lalu simpan

View

• Bukalah folder app/Views/auth
• Ubah file v_login.php dengan menambahkan perintah validasi error sebelum tag <form>

• Kemudian tambahkan perintah mengirimkan data di dalam atribut action pada tag <form>

• Selanjutnya tambahkan perintah mempertahankan nilai input username di dalam atribut value pada tag <input>

• Kemudian tambahkan perintah berpindah ke halaman register di dalam atribut href pada tag <a> lalu simpan

Route

• Bukalah folder app/Config
• Ubah file Routes.php dengan mendaftarkan url baru untuk memproses input username dan password pada database di halaman login lalu simpan

• Selanjutnya mencoba melakukan proses login dengan menginputkan Username dan Password yang sudah didaftarkan ke dalam database sebelumnya saat di halaman register

• Jika menginputkan Username dan Password sesuai dengan data user yang sudah terdaftar di dalam database, maka akan berpindah ke halaman blog
• Proses login dikatakan berhasil jika muncul error 404 dikarenakan belum mempersiapkan halaman home blog

Download to PDF