Aplikasi Login Sederhana Codeigniter 4

Tutorial codeigniter 4 ini akan membahas bagaimana membuat aplikasi login sederhana.Fitur login adalah fitur yang standar ada disetiap aplikasi web,terlebih jika ada banyak pengguna di web kita.

Konfigurasi Awal dan Setting Database

Pertama silahkan buat database bernama ci4login. Lalu kita mensetting koneksi database,ini bisa dilakukan di dua tempat pertama di folder app/Config/Database.php. Ubah sesuaikan dengan koneksi database anda:

public $default = [
    'DSN'      => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => 'root',
    'database' => 'ci4login',
    'DBDriver' => 'MySQLi',
    'DBPrefix' => '',
    'pConnect' => false,
    'DBDebug'  => (ENVIRONMENT !== 'production'),
    'cacheOn'  => false,
    'cacheDir' => '',
    'charset'  => 'utf8',
    'DBCollat' => 'utf8_general_ci',
    'swapPre'  => '',
    'encrypt'  => false,
    'compress' => false,
    'strictOn' => false,
    'failover' => [],
    'port'     => 3306,
];

Atau dengan mengubah setting di file .env.

Pastikan file env sudah ada titiknya .env karena secara default belum ada.

Kemudian cari setting database seperti dibawah ini lalu sesuaikan:

database.default.hostname = localhost
database.default.database = ci4login
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi

Ubah juga mode environmentnya menjadi development

CI_ENVIRONMENT = development

Kemudian kita akan membuat tabel users menggunakan migrations.Jika belum paham migrations bisa dibaca disini Migration di Codeingiter 4.

Ketik di Terminal/CMD perintah berikut : php spark migrate:create users

Lalu buka file migrations di folder app/Database/Migrations,kemudian ubah fungsi up() menjadi seperti dibawah ini.

public function up()
{   
    //list field
    $this->forge->addField([
        'id'          => [
                'type'           => 'INT',
                'constraint'     => 11,
                'unsigned'       => TRUE,
                'auto_increment' => TRUE
        ],
        'username'       => [
                'type'           => 'VARCHAR',
                'constraint'     => '255',
        ],
        'password' => [
                'type'           => 'VARCHAR',
                'constraint'     => '255',
        ],
    ]);
    //primary key
    $this->forge->addKey('id', TRUE);
    //nama tabel
    $this->forge->createTable('users');
}

Jika sudah jalankan perintah : php spark migrate

Maka akan tercreate tabel users didatabase ,lalu kita isi dengan data contoh.

Yeay konfigurasi database selesai.Selanjutnya kita akan membuat model untuk Users

Membuat Model

Buat file baru bername UsersModel di folder app/Models/UsersModel kemudian isi dengan kode dibawah ini.

<?php namespace App\Models;

use CodeIgniter\Model;

class UsersModel extends Model
{
    protected $table = "users";
    protected $primaryKey = 'id';
}

Membuat Controller Fungsi Index

Buat file bernama Login.php dan simpan di folder app/Controllers/Login.php kemudian isi dengan kode dibawah ini.

<?php namespace App\Controllers;

class Login extends BaseController
{
	public function index()
	{
		echo view('login');
	}
}

Fungsi controller index diatas untuk menampilkan Tampilan Halaman Login dari view.

Buat file bernama login.php dan simpan di app/Views/login.php kemudian isi dengan kode dibawah ini.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
  </head>

  <body >
    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto mt-5">
          <?php
          if(session()->getFlashdata('message')){ ?>
          <div class="alert alert-info">
              <?= session()->getFlashdata('message') ?>
          </div>
          <?php } ?>
          <form method="post"  action="<?= base_url('login/auth') ?>">
            <h1 class="h3 mb-3 font-weight-normal">Aplikasi Login Sederhana Codeingiter 4</h1>
            <div class="form-group">
              <label>Username</label>
              <input type="text" class="form-control" name="username" required="" placeholder="Masukkan Username">
            </div>
            <div class="form-group">
              <label>Password</label>
              <input type="password" class="form-control" name="password" required="" placeholder="Masukkan Password">
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-block" type="submit">Login</button>
            </div>
          </form>
        </div>
      </div>  
    </div>
  </body>
</html>

Form Action kita arahkan ke Controller login fungsi auth jika dilihat di code view diatas.Selanjutnya kita akan membuat fungsi auth di controller.

Disini kita sudah bisa mencoba menjalankan aplikasi.Ketikkan perintah dibawah :

php spark serve

Kemudian buka di browser http://localhost:8080/login Jika tidak ada masalah maka akan tampil seperti dibawah ini.

Membuat Controller Users Fungsi Auth dan Logout

Buka kembali file Users.php di folder app/Controllers/Users.php dan tambahkan kode dibawah ini.

<?php namespace App\Controllers;
use App\Models\UsersModel;
class Login extends BaseController
{
	public function index()
	{
		echo view('login');
	}
	public function auth(){
	    $usersModel = new UsersModel();
		$username = $this->request->getPost('username');
	    $password = $this->request->getPost('password');
	    $user = $usersModel->where('username', $username)->first();

	    if(empty($user)){
	    	session()->setFlashdata('message', 'Username atau Password Salah');
	    	return redirect()->to('/login');
	    }
	    if($user['password']!=$password){
	    	session()->setFlashdata('message', 'Username atau Password Salah');
	    	return redirect()->to('/login');
	    }
	    session()->set('username',$username);
	    return redirect()->to('/home');
	}
	public function logout(){
		session()->remove('username');
		return redirect()->to('/login');
	}
}

Kenapa password tidak dibuat di where karena database mysql bukan casesensitive jadi tidak mengenali jika password huruf besar dan kecil.

Mengubah Controller Home

Buka file Home.php di folder app/Controllers/Home.php ubah menjadi seperti dibawah ini.

<?php namespace App\Controllers;

class Home extends BaseController
{
	public function index()
	{
		if(!session()->has('username')){
			return redirect()->to('/login');
		}
		$data['username']  = session()->get('username');
		echo view('index',$data);
	}
}

Di Fungsi index kita ada mengecheck apakah session username sudah terbentuk yang menandakan sudah login.Jika tidak akan diredirect ke halaman login.

Membuat View index.php

Buat file index.php di folder app/Views/index.php isi dengan kode seperti dibawah ini.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
  </head>
  <body >
    <div class="container">
      <div class="jumbotron mt-5">
            <h1 class="display-4">Aplikasi Login Sederhana Codeigniter 4</h1>
            <hr class="my-4">
            <p>Selamat Datang <b><?= $username ?></b></p>
            <p class="lead">
              <a class="btn btn-danger btn-lg" href="<?= base_url('login/logout') ?>" role="button">Logout</a>
            </p>
      </div>
    </div>
  </body>
</html>

Kita akan mencoba kembali aplikasi,jalankan kembali perintah dibawah jika sebelumnya belum dijalankan:

php spark serve

Kemudian coba masukkan username dan password yang salah maka akan muncul seperti tampilan dibawah ini.

Jika benar maka akan tampil seperti dibawah ini.

Yeay tutorial Membuat Aplikasi Login Sederhana sudah selesai.

Lihat tutorial Codeigniter 4 Lainnya disini.