Membuat Halaman Login Dengan Codeigniter


Membuat Halaman Login Codeigniter – Seperti yang sudah kami jelaskan sebelumnya, Codeigniter bisa kita gunakan untuk mengembangkan berbagai aplikasi web. Sehingga akan sangat berguna untuk pemula yang baru saja belajar tentang framework. Dengan memakai Codeigniter kita bisa membuat sebuah website sesuai dengan keinginan.

Salah satunya adalah membuat halaman login. Tentunya hal ini menjadi yang sangat familiar untuk Anda, terutama generasi milenial yang akrab dengan dunia maya. Sebelum mengakses suatu situs atau media sosial, kita perlu melakukan login agar kita bisa mengakses akun kita.

Maka dari itu pada kesempatan ini kami bahas tutorial membuat halaman login dengan Codeigniter. Ada beberapa tahap yang perlu kita lakukan. Antara lain membuat tabel users, membuat model user_model, membuat Controller Login, membuat halaman view untuk login dan melakukan uji coba login. Berikut akan dijelaskan satu per satu.

Baca juga: Cara Menggunakan Codeigniter Pemula

Langkah 1 – Membuat Tabel Users

Seperti yang sudah disinggung sebelumnya, pertama-tama kita perlu membuat tabel untuk menyimpan data user. Caranya, buka PHPMyAdmin, lalu buat tabel dengan nama users. Sedangkan Number of columns (jumlah kolom) isi 11.

Setelah itu atur tabel kurang lebih seperti berikut ini:

Langkah berikutnya, perhatikan kolom-kolom yang sudah kita buat. Pada dasarnya untuk membuat login kita hanya memerlukan tiga kolom, yakni user_id, username dan password. Hanya saja karena tabel users akan digunakan untuk menampung data lengkap user, maka kita memerlukan beberapa kolom tambahan, antara lain:

  1. Email: untuk menyimpan email user atau pengguna. Email ini yang nantinya akan dihubungi saat user meminta reset password.
  2. Full_name: merupakan nama lengkap user.
  3. Phone: adalah nomor telepon. Kita bisa memanfaatkan ini untuk melakukan SMS OTP atau 2FA.
  4. Role: tujuannya untuk membedakan user admin dan customer.
  5. Last_login: untuk mencatat login terakhir user.
  6. Photo: fungsinya untuk menyimpan foto dari user.
  7. Created_at: untuk mencatat kapan user tersebut dibuat.
  8. Is_active: untuk memberitahukan apakah suatu user sudah aktif atau belum.

Sebenarnya Anda bisa menambahkan kolom-kolom lain ke dalam tabel. Akan tetapi untuk memudahkan pemahaman, pada tutorial ini kita gunakan kolom-kolom di atas saja.

Langkah 2 – Membuat User Baru

Setelah membuat tabel users, langkah selanjutnya yang perlu kita lakukan adalah membuat user baru. User ini nantinya kita gunakan untuk melakukan uji coba terhadap aplikasi yang kita buat.

Caranya adalah dengan melakukan insert data ke tabel. Pertama-tama masuk ke menu Insert. Setelah itu isi data user seperti di bawah ini:

Untuk bagian password isi dengan hash yang dibuat dengan fungsi password_hash(). Kita juga bisa membuatnya lewat php interaktif seperti berikut.

Alternatifnya Anda bisa menggunakan hash (bcrypt) di bawah ini:

Password Hash (Bcrypt)
123 $2y$10$Dy4ySqOiDqKisEyoKJEsl.L2psUIjeKMwmp5W3iElRQLKZF0.kKbS
kopi $2y$10$TpipIS3PDfeHTJWggvnFO.eT/dVBMyVKI5OcYV1avGMnt8wTqOt5O
admin $2y$10$tonZkQrnGnp9n38rWeMTieLPNxtDfvy4Z/35Q4rlFObsm/xFnSae.

Setelah itu kita akan mempunyai user pertama yang memiliki user_id 1.

Password yang kita buat di atas dianjurkan disimpan dalam bentuk hash karena untuk alasan keamanan. Misalnya saat aplikasi kita dibobol oleh orang tak bertanggung jawab, maka ia tidak akan tahu password untuk mengakses aplikasi.

Langkah 3 – Membuat Model User

Berikutnya kita buat model user. Caranya, buat model baru dalam folder application/models/ dengan nama User_model.php. Langkahnya pada bagian models, klik kanan dan pilih New File, kemudian ketikkan User_model.php. Sesudah itu isi file tersebut dengan kode berikut.

<?php

class User_model extends CI_Model
{
    private $_table = "users";

    public function doLogin(){
		$post = $this->input->post();

        // cari user berdasarkan email dan username
        $this->db->where('email', $post["email"])
                ->or_where('username', $post["email"]);
        $user = $this->db->get($this->_table)->row();

        // jika user terdaftar
        if($user){
            // periksa password-nya
            $isPasswordTrue = password_verify($post["password"], $user->password);
            // periksa role-nya
            $isAdmin = $user->role == "admin";

            // jika password benar dan dia admin
            if($isPasswordTrue && $isAdmin){ 
                // login sukses yay!
                $this->session->set_userdata(['user_logged' => $user]);
                $this->_updateLastLogin($user->user_id);
                return true;
            }
        }
        
        // login gagal
		return false;
    }

    public function isNotLogin(){
        return $this->session->userdata('user_logged') === null;
    }

    private function _updateLastLogin($user_id){
        $sql = "UPDATE {$this->_table} SET last_login=now() WHERE user_id={$user_id}";
        $this->db->query($sql);
    }

}

Jika diamati, ada tiga method yang akan dibuat. Antara lain method doLogin(), isNotLogin(), dan _updateLastLogin(). Berikut penjelasan singkatnya.

Method doLogin()

Method doLogin() dibuat untuk melakukan login.

Method isNotLogin()

Method ini bertujuan untuk mengecek status apakah sudah login atau belum.

Method _updateLastLogin()

Fungsinya untuk melakukan update tanggal dan waktu login terakhir.

Langkah 4 – Membuat Controller Login

Di tahap keempat kita buat controller baru dalam folder controllers/admin/. Kita beri nama Login.php pada controller login baru itu. Caranya, pada folder admin, klik kanan lalu pilih New File dan ketikkan Login.php. Sesudah itu isi file tersebut dengan kode di bawah ini:

<?php

class Login extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model("user_model");
        $this->load->library('form_validation');
    }

    public function index()
    {
        // jika form login disubmit
        if($this->input->post()){
            if($this->user_model->doLogin()) redirect(site_url('admin'));
        }

        // tampilkan halaman login
        $this->load->view("admin/login_page.php");
    }

    public function logout()
    {
        // hancurkan semua sesi
        $this->session->sess_destroy();
        redirect(site_url('admin/login'));
    }
}

Berikutnya kita perlu mengedit controller yang lain untuk memastikan apakah user sudah login atau belum. Langkahnya buka Controller controller/admin/Overview.php dan controller/admin/Product.php. Kemudian tambahkan kode di bawah ini pada kedua Controller tersebut:

$this->load->model(“user_model”);

if($this->user_model->isNotLogin()) redirect(site_url(‘admin/login’));

Berikut adalah tampilan controller Overview.php setelah ditambah kode:

Sedangkan di bawah ini adalah tampilan kode dari controller Products.php:

Sebagai informasi, kode di atas perlu ditambahkan pada halaman atau controller yang membutuhkan login untuk mengaksesnya.

Langkah 5 – Membuat View Halaman Login

Langkah kelima adalah membuat view untuk halaman login. Caranya buat file baru pada folder application/views/admin/. Misalnya kita beri nama login_page.php. Isi file baru ini dengan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login Admin</title>

    <!-- Bootstrap core CSS-->
    <link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 text-center mt-5 mx-auto p-4">
                <h1 class="h2">Login Admin</h1>
                <p class="lead">Silahkan masuk ke Panel Admin</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-5 mx-auto mt-5">
                <form action="<?= site_url('admin/login') ?>" method="POST">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="text" class="form-control" name="email" placeholder="Pakai username juga bisa.." required />
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Password.." required />
                    </div>
                    <div class="form-group">
                        <div class="d-flex justify-content-between">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="rememberme" id="rememberme" />
                                <label class="custom-control-label" for="rememberme"> Ingat Saya</label>
                            </div>
                            <a href="<?= site_url('reset_password') ?>">Lupa Password?</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="submit" class="btn btn-success w-100" value="Login" />
                    </div>

                </form>
            </div>
        </div>
    </div>

</body>

</html>

Selanjutnya, buat link untuk logout. Langkahnya buka file views/admin/_partials/modal.php, lalu ubah alamat link Logout.

Cari dan ubah kode berikut ini:

<a class=”btn btn-primary” href=”login.html”>Logout</a>

Menjadi seperti di bawah ini:

<a class=”btn btn-primary” href=”<?= site_url(‘admin/login/logout’) ?>”>Logout</a>

Sehingga hasilnya akan seperti berikut:

Langkah 6 – Uji Coba Halaman Login

Setelah selesai mengubah dan menulis code, saatnya untuk melakukan uji coba fitur login yang baru saja kita buat. Hal ini penting, sebab kita bisa mengetahui apakah fitur login yang kita buat berjalan sebagaimana mestinya atau tidak. Sehingga jika ada kesalahan kita bisa segera memperbaikinya.

Misalnya halaman login yang kita buat sebelumnya adalah http://localhost/tokobuah/index.php/admin/. Maka buka link tersebut pada web browser. Anda bisa menggunakan browser apapun, baik Google Chrome, Mozilla Firefox, Opera dan lain sebagainya. Akan tetapi pastikan Anda menggunakan web browser terbaru agar semua proses uji coba berjalan lancar.

Langkah selanjutnya coba login dengan memakai email dan password dari yang sudah Anda buat sebelumnya. Dan akhiri dengan klik tombol Login. Jika berhasil Anda akan diarahkan ke halaman admin.

Baca juga: Membuat CRUD Dengan Codeigniter

Demikian tutorial membuat halaman login dengan Codeigniter. Langkah-langkah di atas merupakan contoh sederhana dalam membuat halaman login. Anda tentu saja bisa mengembangkan pembuatan halaman login berdasarkan contoh di atas dengan berbagai tambahan elemen atau fitur.

Misalnya dengan mengubah background halaman login, menambahkan kode keamanan dan lain sebagainya. Semoga apa yang kami sampaikan di website caraharian bermanfaat untuk Anda.



Loading...

Leave a Comment