Tutorial Codeigniter: Membuat Fitur Login

Rencananya:

Pada aplikasi yang kita buat ini, akan ada dua jenis user yang bisa login, yakni admin dan customer.

Kita juga nanti akan membuat halaman khusus untuk customer.

Tapi…

Untuk saat ini, kita fokus dulu mengerjakan halaman admin.

Karena adminlah yang akan berperan pertama kali untuk menginput data produk dan data lainnya.

Baiklah, kita langsung saja masuk ke tutorial.

Jadi, berikut ini langkah-langkah yang harus kita kerjakan untuk membuat fitur login:

TODO:

  1. ◻️ Membuat tabel users;
  2. ◻️ Membuat model User_model;
  3. ◻️ Membuat Controller Login;
  4. ◻️ Membuat halaman view untuk Login;
  5. ◻️ Uji Coba Login.

Mari kita mulai…

1. Membuat Tabel untuk Users

Pertama kita membutuhkan sebuah tabel untuk menyimpan data user.

Silahkan buka Phpmyadmin, kemudian buatlah tabel bernama users dengan 11 kolom.

Membuat tebal user di phpmyadmin

Kemudian, buat skema tabelnya seperti ini:

Membuat tabel user di PHPmyadmin

Kalau mau cepat.. kamu bisa juga buat tabel users dengan printah SQL ini:

CREATE TABLE `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(64) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `full_name` varchar(255) NOT NULL,
  `phone` varchar(20) NOT NULL,
  `role` enum('admin','customer') NOT NULL DEFAULT 'customer',
  `last_login` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `photo` varchar(64) NOT NULL DEFAULT 'user_no_image.jpg',
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `is_active` tinyint(1) NOT NULL DEFAULT '0',
  PRIMARY KEY (`user_id`)
);

Jika kamu sudah membuat tabel, sekarang coba perhatikan kolom-kolomnya.

Sebenarnya, kita hanya butuh tiga kolom untuk membuat login user_id, username, dan password.

Tapi karena tabel users akan kita gunakan untuk menampung data lengkap dari user, kita membutuhkan beberapa kolom lagi, yakni:

  • email untuk menyimpan email user, agar bisa kita hubungi apabila ia meminta untuk reset password
  • full_name untuk nama lengkap user;
  • phone untuk nomer telepon, yang bisa kita manfaatkan juga untuk SMS OTP atau 2FA;
  • role untuk membedakan user admin dan customer;
  • last_login untuk mencatat kapan terakhir user login;
  • photo untuk menyimpan foto dari user;
  • created_at untuk mencatat kapan user tersebut dibuat;
  • is_active untuk menyatakan user tersebut aktif atau tidak (sudah verifikasi email atau belum).

Kalau mau ditambahkan kolom lain juga boleh kok…

Tapi khusus untuk tutorial ini, kita pakai kolom ini aja ya.

Sebelum kita lanjut ke langkah berikutnya, kita butuh satu hal lagi nih di database.

Apa itu?

Sebuah user baru.

Kita anggap saja ini adalah user pertama yang akan kita pakai untuk uji coba aplikasi.

Cara buatnya gimana?

Cara buatnya, tinggal insert data ke tabel users.

Gampang kan?

Mari kita buat.

Masuk ke menu Insert, kemudian isi data user seperti ini:

Membuat user pertama

Nah untuk password, silahkan isi dengan hash yang dibuat dengan fungsi password_hash().

Kamu bisa buat melalui php interaktif seperti ini.

Membuat password untuk user pertama

Atau kalau tidak mau repot, kamu bisa gunakan beberapa hash berikut:

PasswordHash (Bcrypt)
123$2y$10$Dy4ySqOiDqKisEyoKJEsl.L2psUIjeKMwmp5W3iElRQLKZF0.kKbS
kopi$2y$10$TpipIS3PDfeHTJWggvnFO.eT/dVBMyVKI5OcYV1avGMnt8wTqOt5O
admin$2y$10$tonZkQrnGnp9n38rWeMTieLPNxtDfvy4Z/35Q4rlFObsm/xFnSae.
petanikode$2y$10$TVOh1TQYRccy6JfjPt8rrOn4ea5kCrsk/Mxmkgy9MAi.meHpDAX72

Kalau sudah, kita akan memiliki user pertama dengan user_id adalah 1.

User pertama

Mengapa sih password harus disimpan dalam bentuk hash?

Ini untuk keamanan, jika suatu saat ada orang yang berhasil membobol aplikasimu. Maka Si pembobol nggak akan tahu password-nya.

Oke dengan begini, tugas pertama kita selesai.

TODO:

  1. Membuat tabel users;
  2. ◻️ Membuat model User_model;
  3. ◻️ Membuat Controller Login;
  4. ◻️ Membuat halaman view untuk Login;
  5. ◻️ Uji Coba Login.

Lanjut ke langkah berikutnya:

2. Membuat Model User

Silahkan buat model baru di dalam folder application/models/ dengan nama User_model.php.

Membuat model baru

Kemudian isi 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);
    }

}

Perhatikan kode di atas!

Ada tiga method yang kita buat:

  1. Method doLogin() untuk melakukan login;
    Penjelasan kode untuk method doLogin()
  2. Method isNotLogin() untuk mengecek status, apakah sudah login atau belum;
    Penjelasan kode untuk method isNotLogin()
  3. Method _updateLastLogin() untuk mengupdate tanggal dan waktu login terakhir;
    Penjelasan kode untuk method _updateLastLogin()

Sebenarnya ada beberapa method lagi yang perlu kita tambahkan, yakni add(), update(), dan delete().

Tapi nanti saja kita buat, saat membuat fitur manajemen user.

Baik, dengan begini tugas kedua kita sudah selesai…

TODO:

  1. Membuat tabel users;
  2. Membuat model User_model;
  3. ◻️ Membuat Controller Login;
  4. ◻️ Membuat halaman view untuk Login;
  5. ◻️ Uji Coba Login.

…lnajut ke langkah berikutnya:

3. Membuat Controller Login

Silahkan membuat controller baru, di dalam folder controllers/admin/ dengan nama Login.php

Membuat controller login

…kemudian isi dengan kode berikut:

<?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'));
    }
}

Setelah membaut controller Login…

Berikutnya kita harus edit controller yang lain untuk mengecek apakah user sudah login atau belum.

Silahkan buka Controller berikut:

  1. controller/admin/Overview.php
  2. controller/admin/Product.php

Lalu, tambahkan kode ini di dalam konstruktor di setiap Controller:

$this->load->model("user_model");
if($this->user_model->isNotLogin()) redirect(site_url('admin/login'));

Sehingga controller Overview.php akan menjadi seperti ini:

Kode Controller Overview

Dan controller Products.php akan menjadi seperti ini:

Kode Controller Products

Intinya, kita harus menambahkan kode tersebut pada halaman atau controller yang memerlukan login untuk mengaksesnya.

Nah, dengan begini.. urusan kita dengan controller sudah selesai.

TODO:

  1. Membuat tabel users;
  2. Membuat model User_model;
  3. Membuat Controller Login;
  4. ◻️ Membuat halaman view untuk Login;
  5. ◻️ Uji Coba Login.

Tinggal satu hal lagi yang belum kita kerjakan, yaitu:

4. Membuat View untuk Halaman Login

Buatlah file baru di dalam folder application/views/admin/ dengan nama login_page.php

Membuat view untuk halaman login

Kemudian isi 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>

Berikutnya, kita harus membuat link untuk logout.

Silahkan buka file views/admin/_partials/modal.php, kemudian ubah alamat link Logout.

Dari kode ini:

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

Ubah menjadi:

<a class="btn btn-primary" href="<?= site_url('admin/login/logout') ?>">Logout</a>

Sehingga akan menjadi seperti ini:

Membuat Link untuk Logout

Akhirnya, selesai.. yay! 🎉

TODO:

  1. Membuat tabel users;
  2. Membuat model User_model;
  3. Membuat Controller Login;
  4. Membuat halaman view untuk Login;
  5. ◻️ Uji Coba Login.

Tapi jangan senang dulu, karena ini belum kita coba.

Mungkin saja akan ada error.

Karena itu, mari kita lakukan:

5. Uji Coba Fitur Login

Untuk percobaan pertama, silahkan buka halaman http://localhost/tokobuah/index.php/admin/.

Jika kamu diarahkan ke halaman login, maka artinya autentikasi untuk halaman tersebut sudah berhasil.

Sekarang coba login…

Halaman Login

Jika berhasil, maka akan diarahkan ke halaman admin.

Sukses!

Fitur Login sudah kita buat… 🎉

TODO:

  1. Membuat tabel users;
  2. Membuat model User_model;
  3. Membuat Controller Login;
  4. Membuat halaman view untuk Login;
  5. Uji Coba Login.

Oh iya, source code untuk tutorial ini dapat kamu download di Github.

[⬇️ Download Source Code]

Apa Selanjutnya?

Kita baru saja membuat fitur login untuk admin. Fitur ini akan digunakan untuk autentikasi halaman admin.

Namun ada beberapa bagian yang belum kita buat, seperti Remember Me agar admin bisa tetap login dan Lupa Password? untuk reset password.

Kita akan lanjutkan ini nanti ya…