Keranjang Coding : product


?>

Membuat Sistem Login Menggunakan Codeigniter4





Pada kesempatan kali ini, saya ingin menulis materi tutorial bagaimana caranya membuat sistem login pada aplikasi menggunakan codeigniter4, kenapa harus memakai login ? yang pastinya aplikasi yang kita buat harus memiliki sistem keamanan donk , dimana codeigniter4 ini framework yang baru rilis jadi masih sedikit yang memberikan tutorial terkait codeigniter4, disini matadeveloper ingin mengupas tuntas sampai menjadi sitem aplikasi kedepan nya, step by step saya akan membuat tutorial sampai benar benar menjadi aplikasi yang bisa teman-teman pelajari buat bahan belajar ataupun pengembangan kedepan nya.

Saya akan menjelaskan langkah langkah awal untuk membuat sistem login ini.

- Langkah Pertama Siapkan Database

Karena kita membuat sistem login pastinya kita membutuhkan akses masuk berupa username dan password sebelum masuk ke halaman dashboard aplikasi. kita buat database dengan nama belajar_ci4 , disini saya menggunakan database mysql, selanjutnya teman - teman bisa copy kan source code sql berikut ini untuk membuat tabel di database dengan menggunakan query :

/*
 Navicat Premium Data Transfer
 Source Server         : localhost_3307
 Source Server Type    : MySQL
 Source Server Version : 100140
 Source Host           : localhost:3307
 Source Schema         : belajar_ci4

 Target Server Type    : MySQL
 Target Server Version : 100140
 File Encoding         : 65001

 Date: 20/04/2020 13:56:08
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for tbl_mst_user
-- ----------------------------
DROP TABLE IF EXISTS `tbl_mst_user`;
CREATE TABLE `tbl_mst_user`  (
  `userid` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `fullname` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `username` varchar(30) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `password` varchar(30) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`userid`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of tbl_mst_user
-- ----------------------------
INSERT INTO `tbl_mst_user` VALUES (1, 'matadeveloper', 'admin', 'admin');

SET FOREIGN_KEY_CHECKS = 1;

Atau buat secara manual tabel dengan nama tbl_mst_user dan bisa lihat bentuk tabel nya seperti gambar berikut :

- Langkah Kedua Setting Koneksi Database

Selanjutnya masuk dalam folder htdocs, pada xampp kemudian pilih pada project anda , disini saya membuat folder pada htdocs belajar_ci4 yang sudah saya install, untuk cara menginstal codeigniter 4 lihat disini

kemudian pilih file env dan ganti namanya dengan .env

lalu cari bagian :

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi
//Ganti dengan
database.default.hostname = localhost:3307
database.default.database = belajar_ci4
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

Berhubung saya menggunakan beberapa port server dan untuk port in saya gunakan port 3307 di mysql, untuk hostname defaultnya yakni : localhost

disini saya tidak menggunakan migrate untuk membuat tabel dan field user, dikarenakan untuk membbuat aplikasi yang memerlukan banyak data itu untuk relasi antar tabel akan merasa kesusahan, saya sendiri lebih suka manual saja.

- Langkah kedua Membuat Controller Login

kemudian buat sebuah controller dengan nama Login.php pada folder app -> Controller, lalu copykan source code dibawah ini

<?php namespace App\Controllers;

use App\Models\M_login;
class Login extends BaseController {
     //pemanggilan pertama kali controller dijalankan
    public function __construct() {
        // Mendeklarasikan class ProductModel menggunakan $this->M_login
        // parent::__construct();
        $this->M_login = new M_login();
        /* Catatan:
        Apa yang ada di dalam function construct ini nantinya bisa digunakan
        pada function di dalam class Login
        */
        // Jika Ada session username maka akan dialihkan ke halaman dashboard
       
    }

    public function index()
    {
        if(session()->get('username')) {
           return redirect()->to(base_url('Dashboard'));
        }
        return view('login');
    }

    public function sign_in(){
        $username = $this->request->getPost('username');
        $password = $this->request->getPost('password');
        //kita jadikan inputan sebagai data array yang akan kita kirimkan menuju model
        $data     = ['username' => $username,'password' => $password];
        $login    = $this->M_login->sign_in($data);
        if(count($login) > 0){  // fungsi ini kita mengecek apakah data ada atau tidak, kalau data ada maka akan dibuat session dan dialihkan ke halaman dashboard
            $data = $login[0];
                $sess = [
                    'fullname' => $data->fullname,
                    'username' => $data->username
                ];
            session()->set($sess);
            return redirect()->to(base_url('Dashboard'));
            // print_r($login);
        }else{
            session()->setFlashdata('message','Kombinasi Username dan Password Anda Salah');
            return redirect()->back();
        }
    }
}

Untuk settingan routing pertama kali kita panggil controller Login.php class index, untuk settingan nya kita buka di file config-> routes.php, lalu ganti Router Setup dengan sorce code dibawah ini :

/**
 * --------------------------------------------------------------------
 * Router Setup
 * --------------------------------------------------------------------
 */
$routes->setDefaultNamespace('App\Controllers');
$routes->setDefaultController('Login');
$routes->setDefaultMethod('index');
$routes->setTranslateURIDashes(false);
$routes->set404Override();
$routes->setAutoRoute(true);

/**
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
 */

// We get a performance increase by specifying the default
// route since we don't have to scan directories.
$routes->get('/', 'Login::index');

- Langkah Ketiga Membuat View Login

Disini saya sudah langsung menggunakan template Admin LTE pada view untuk mempercantik halaman login kita, buat new file pada folder views dengan nama login.php, untuk isi viewnya bisa copy kan coding dibawah ini :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Belajar Buat Aplikasi Codeigniter4</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="assets/plugins/fontawesome-free/css/all.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="assets/dist/css/adminlte.min.css">
  <link rel="stylesheet" href="assets/dist/css/adminlte.css">
  <link rel="stylesheet" href="assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="assets/dist/css/font.css" rel="stylesheet">
  <link href="assets/dist/css/ionic.css" rel="stylesheet">
  <!-- Untuk icon -->
  <link rel="shortcut icon" href="assets/images/matadeveloper.png" /> <!-- mengambil file gambar pada folder asset -->
</head>
<body class="hold-transition login-page" style="background-image: linear-gradient(0deg,#381c88,#3c6dff);">
<div class="login-box">
  <div class="login-logo">
    <!-- <img src="assets/images/matadeveloper.png" width="100" height="100"><br> -->
    <b>Belajar Buat Aplikasi Codeigniter4</b>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg"><marquee>Silahkan Login Untuk Masuk</marquee></p>
      <?php if(session()->getFlashdata('message')){ ?>
      <div class="alert alert-warning alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h5><i class="icon fas fa-exclamation-triangle"></i>Perhatian !!!</h5>
       <?php echo session()->getFlashdata('message');?>
      </div>
      <?php } ?>
    <!-- <a href=""></a> -->
    <!-- Kita arahkan form login ke controller Login -->
      <form action="<?php echo base_url('Login/sign_in'); ?>" method="POST">
        <div class="input-group mb-3">
          <input type="text" name="username" class="form-control" placeholder="Username" >
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" name="password" class="form-control" placeholder="Password" >
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <div class="icheck-primary">
              <input type="checkbox" id="remember">
              <label for="remember">
                Remember Me
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-md-12">
            <button type="submit" name="login" class="btn btn-primary btn-block">LOGIN</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
      <!-- <form></form> -->
      <!-- /.social-auth-links -->
      <p class="mb-0" style="text-align: center;">
        <span style="text-align: center;">
          Page rendered in <strong>{elapsed_time}</strong> seconds
        </span>
      </p>
    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- jQuery -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="assets/dist/js/adminlte.js"></script>
<!-- OPTIONAL SCRIPTS -->
<script src="assets/dist/js/demo.js"></script>
<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="assets/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="assets/plugins/raphael/raphael.min.js"></script>
<script src="assets/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="assets/plugins/chart.js/Chart.min.js"></script>
<!-- PAGE SCRIPTS -->
<script src="assets/dist/js/pages/dashboard2.js"></script>
</body>
</html>

- Langkah Ketiga Membuat Model Login

Selanjutnya buat file baru di dalam folder models dengan nama M_login.php, kemudian copy kan source code dibawah ini

<?php namespace App\Models;

use CodeIgniter\Model;

class M_login extends Model {
    // protected $table = "tbl_mst_user";
    public function sign_in($data){
        // Cara lain menggunakan builder
        // return $this->table('products')
  //                       ->where('product_id', $id)
  //                       ->get()
  //                       ->getRowArray();

        $query = $this->db->query("SELECT * FROM tbl_mst_user where username='$data[username]' AND password='$data[password]'");
        return $query->getResult();
        
    }
}

Setelah semua dibuat kita buat juga Controller Dashboard.php, dimana fungsinya setelah kita melakukan login dan berhasil maka akan dialihkan ke Controller dashboard, berikut source code dashboard.php

<?php namespace App\Controllers;

use App\Models\M_login;
class Dashboard extends BaseController {

    function __construct(){
        $this->M_login = new M_login();
        if(!session()->get('username')) {
           session()->setFlashdata('message','Anda Harus Login terkebih Dahulu');
           return redirect()->to(base_url('Login'));
        }
    }

    public function index()
    {
        return view('dashboard');
    }

    public function log_out() {
       $array_items = ['fullname', 'username'];
       session()->remove($array_items);
       session()->setFlashdata('message','Anda Berhasil Keluar');
       return redirect()->to(base_url('Login'));
    }

}

mari kita test untuk melakukan login, pada controller login itu saya buat pemberitahuan apabila username dan password yang dimasukkan salah maka akan diberi alert. untuk data pada tabel tbl_mst_user tadi sudah kita buat dengan username : admin dan password : admin, kalau kita memasukkan username dan password yang salah maka akan menampilkan gambar seperti dibawah ini :

Selanjutnya kita buat template default dalam folder view, buat folder baru dengan nama template, seperti gambar berikut  :

kemudian buat file baru bernama default.php lalu copy kan folder dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>Aplikasi Inventory Barang</title>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="assets/plugins/fontawesome-free/css/all.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="assets/dist/css/adminlte.min.css">
  <link rel="stylesheet" href="assets/dist/css/adminlte.css">
  <link rel="stylesheet" href="assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="assets/dist/css/font.css" rel="stylesheet">
  <link href="assets/dist/css/ionic.css" rel="stylesheet">
  <!-- Untuk icon -->
  <link rel="shortcut icon" href="assets/images/matadeveloper.png" />
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="dashboard" class="nav-link">Home</a>
      </li>
    </ul>
    <!-- SEARCH FORM -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <!-- Notifications Dropdown Menu -->
       <a class="nav-link"><?php echo session()->get('username');?></a>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-user"></i>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
      </li>
    </ul>
  </nav>

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="index3.html" class="brand-link">
      <span class="brand-text font-weight-light">Aplikasi Inventory Barang</span>
    </a>
    <div class="sidebar">
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="assets/images/matadeveloper.png" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">Belajar Codeigniter4</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
            <a href="<?php echo base_url();?>/dashboard" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-copy"></i>
              <p>
                Form Master
                <i class="fas fa-angle-left right"></i>
                <span class="badge badge-info right"></span>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="<?php echo base_url();?>Master/User" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Master User</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="pages/layout/top-nav-sidebar.html" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Master Kategori</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="pages/layout/boxed.html" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Master Barang</p>
                </a>
              </li>
            </ul>
          </li>
          <li class="nav-header">Logout</li>
          <li class="nav-item">
            <a href="Dashboard/log_out" class="nav-link">
              <i class="fas fa-circle nav-icon"></i>
              <p>Logout</p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

    <!-- /.content-header -->

  <?= $this->renderSection('content') ?>

    <!-- end content -->

  <footer class="main-footer">
    <strong>Copyright © 2020 <a href="www.matadeveloper.com">Matadeveloper</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0.1
    </div>
  </footer>
</div>
  <!-- /.navbar -->
<script src="assets/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="assets/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="assets/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="assets/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="assets/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="assets/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="assets/plugins/moment/moment.min.js"></script>
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="assets/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="assets/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="assets/dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="assets/dist/js/pages/dashboard.js"></script>
<script src="assets/dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="assets/dist/js/demo.js"></script>
</body>
</html>

Pada bagian coding sudah saya jelaskan untuk mengisi content pada view dashboard, lalu buat file baru bernama dashboard.php pada folder view, lalu copy kan source code dibawah ini :

<?= $this->extend('template/default') ?> // memanggil file defau;t pada foldet template
<?= $this->section('content') ?>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Dashboard</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Belajar CI4</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
    <div class="card">
        <div class="card-header">
          <h3 class="card-title"></h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
          Selamat Datang <?php echo session()->get('username');?>
        <!-- /.card-body -->
      </div>
  </div>

<?= $this->endsection() ?>

apabila sudah selesai semua mari kita test login dengan userrname dan password yag benar maka akan tampil gambar seperti dibawah ini :

- Kesimpulan

Dari pembahasan diatas kita sudah bisa membuat login sampai muncul ke halaman dashboard aplikasi, untuk pembahasan selanjutnya kita akan membuat master kategori barang, saya akan jelaskan step by step lagi sampai jadi 1 aplikasi inventory barang sederhana menggunakan codeigniter4. mungkin itu saja pembahasan kali ini, sampai jumpa dipembahasan codeigniter4 selanjutnya, Terima kasih Banyak, Selamat mencoba

Untuk Source code bisa di download disini

Tags : php codeigniter

Sekilas Tentang Penulis


Kharisma Maulana Pasaribu,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Menambahkan Fitur Filter data di Grafik
Next Post
Tutorial Cara Menginstall Codeigniter 4