6 Langkah Membuat login dengan codeigniter dan bootstrap

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
2. codeigniter
Daftar Topik

Membuat login dengan codeigniter dan bootstrap. Familiar dengan nama CodeIgniter? Bagi yang berkutat di bidang teknologi informasi tentu sudah tak asing lagi dengan nama ini. CodeIgniter merupakan sebuah web application network yang sifatnya open source, yang digunakan untuk membangun aplikasi PHP dinamis. Aplikasi ini berfungsi sebagai framework PHP dengan model MVC, yang mana dapat membangun website dinamis menggunakan PHP yang efektif dalam mempercepat pengembang ketika membuat sebuah aplikasi web. CodeIgniter kerap digunakan karena ringan dan cepat, selain itu juga memiliki dokumentasi yang amat lengkap beserta dengan contoh implementasi kode. CodeIgniter ini pertama kali dikembangkan di tahun 2006 oleh Rick Ellis. 

Seperti yang telah dijelaskan, CodeIgniter memungkinkan penggunanya untuk mengembangkan beragam aplikasi web, termasuk bagi pemula yang baru saja mempelajari mengenai framework. CodeIgniter menyediakan aneka fitur berguna yang membuat pengguna dapat membuat sebuah website sesuai dengan keinginan. Salah satunya adalah untuk membuat login form alias halaman login. Tentunya, kita sudah sangat familiar dengan login form ini, terutama bila menggunakan media sosial yang perlu melakukan proses login ke akun sebelum dapat mengakses akun. Nah, bagi kamu yang tertarik untuk mengetahui langkah-langkah Membuat login dengan codeigniter dan bootstrap, berikut penjelasannya. 

membuat login dengan codeigniter dan bootstrap

1. Membuat Tabel Users

Langkah pertama yang diperlukan untuk membuat login form adalah dengan membuat tabel yang berguna untuk menyimpan data pengguna atau user. Untuk membuatnya, buka PHPMyAdmin, kemudian buatlah tabel dengan nama users dan jumlah kolom sebanyak 11. Kolom ini masing-masing untuk user_id, username, dan password yang paling vital, kemudian ditambah dengan email, full_name, Phone (untuk SMS OTP/2FA), Role (untuk membedakan user admin dan customer), Last_login (untuk mencatat login terakhir user), Photo (untuk menyimpan foto user), Created_at (untuk mencatat kapan user tersebut dibuat) serta is_active (untuk menginformasikan apakah user sudah aktif atau belum). 

2. Membuat User Baru

Setelah membuat tabel users, maka langkah selanjutnya adalah membuat user baru. Langkah ini dimaksudkan untuk melakukan uji coba pada aplikasi yang tengah kita buat. Caranya, insert data ke tabel dengan menggunakan menu Insert untuk mengisi data user. Untuk bagian password, disarankan untuk disimpan dalam bentuk hash demi alasan keamanan, misalkan bila suatu waktu aplikasi kita dibobol orang tak bertanggung jawab, ia tidak akan mendapatkan informasi mengenai password untuk mengakses aplikasi. 

3. Membuat Model User

Langkah berikutnya adalah dengan membuat model user. Caranya ialah dengan membuat model baru di folder application/models/, yang diberi nama user_model.php. Kemudian, langkah berikutnya pada bagian models, klik kanan dan pilih menu New File dan ketikkan user_model.php 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);

    }

 

}

 

Pada kode diatas, terdapat tiga metode yaitu doLogin() yang dibuat untuk melakukan login, isNotLogin() yang bertujuan untuk mengecek status login ataupun belum login, dan _updateLastLogin() yang berguna untuk melakukan update tanggal serta waktu login terakhir. 

2. codeigniter

4. Membuat Controller Login

Langkah selanjutnya adalah membuat controller baru dalam folder controllers/admin/ dengan cara klik kanan pada folder admin dan pilih New File. Controller login baru ini kita namai dengan Login.php. Berikutnya, isilah file yang telah dibuat itu dengan kode berikut 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’));

    }

}

 

5. Membuat View Halaman Login

Setelah itu, langkah selanjutnya adalah membuat view untuk halaman login dengan cara membuat file baru pada folder application/views/admin/, lalu beri nama login_page.php dan isikan file tersebut 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>

3. ujicoba login codeigniter

6. Uji Coba Halaman Login

Nah, setelah selesai membuat login dengan codeigniter dan bootstrap, langkah terakhir adalah dengan melakukan uji coba fitur login yang baru dibuat, untuk mengetahui apakah fitur login yang kita buat berjalan sebagaimana harusnya ataupun tidak. Selamat mencoba!

Baca juga:
6 Cara Membuat Garis di Word dengan Mudah

septirm
septirm
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp

ARTIKEL LAINNYA

PEMESANAN:

Beras Organik RICE ME UP