Membuat Halaman Login Codeigniter Multilevel

Ini merupakan postingan pertama saya membahas tentang programing. Tutorial membuat halaman login codeigniter pun sudah banyak tersebar di internet. tapi tidak ada salahnya saya share agar kita sama-sama belajar.

Kali ini kita akan membuat halaman login codeigniter dengan menggunakan session. yang mana session inilah yang akan menyimpan informasi kamu saat kamu sedang login. Dan akan terhapus saat kamu melakukan logout, atau keluar dari browser yang kamu gunakan.

Kamu mahasiswa ? baca juga: ciri ciri plagiat

Membuat halaman Login Codeigniter 3

Disini kita akan menggunakan framework Codeigniter 3 agar mempermudah kita dalam melakukan pengerjaan, karena kerangka kerja untuk pembuatan form login nanti lebih mudah dan tidak berantakan.

Dan ya form login yang akan kita buat ini sudah menggunakan multi-level ya.

Agar mempermudah dalam tutorial kali ini, ada baiknya menggunakan studi kasus, Studi kasus yang saya gunakan untuk membuat form login ini yaitu sebagai dosen dan mahasiswa.

Untuk administrator (dosen), angka levelnya = 1 dan untuk mahasiswa levelnya = 2.

Oke berikut tutorial membuat form login codeigniter multilevel

1. Persiapan

Adapun persiapan ini adalah kamu harus menyediakan bahan bahan dalam pembuat form login codeigniter ini. Adalah sebagai berikut:

1. Framework codeigniter, Silahkan download di link berikut www.codeigniter.com
2. Bootsrap, karena saya menggunakan template bootstrap adminLTE, silahkan kamu download di link berikut www.adminlte.io.

Note: kenapa tidak men-download javascript atau menggunakan template lain? menurut saya template ini sudah sangat user friendly dan mana tau saya tetap bersemangat, jadi progres pembuatan web nantinya bisa secara continue

2. Struktur Database dan Table

Untuk pembuatan database, kamu tinggal melakukan copy paste syntax berikut. saya menggunakan localhost untuk mengeksekusinya.

CREATE DATABASE db_kampus;

Buat tabel user login seperti dibawah ini:

CREATE TABLE `tb_user` (
  `user_id` int(11) PRIMARY KEY AUTO_INCREMENT NOT NULL,
  `nama` varchar(100) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `level_id` int(11) NOT NULL,
  `create_at` datetime NOT NULL,
  `update_at` datetime NOT NULL,
  `last_login` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Buat juga tabel level, tabel ini yang menentukan level dari user nanti. buat seperti dibawah ini:

CREATE TABLE `tb_level` (
  `level_id` int(11) PRIMARY KEY AUTO_INCREMENT NOT NULL,
  `nama` varchar(50) NOT NULL,
  `keterangan` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Insert data ke tabel user seperti dibawah ini:

INSERT INTO `tb_user` (`user_id`, `nama`, `username`, `password`, `level_id`, `create_at`, `update_at`, `last_login`) VALUES
(1, 'Ir. Surya Kencana', 'dosen', 'ce28eed1511f631af6b2a7bb0a85d636', 1, '2020-02-13 05:22:13', '2020-02-13 00:14:06', '2020-02-14 10:32:36'),
(2, 'Rizky setia Budi', 'siswa', 'bcd724d15cde8c47650fda962968f102', 2, '2020-02-13 10:27:27', '2020-02-13 14:34:31', '2020-02-14 10:30:32');

insert data pada tabel level seperti dibawah ini:

INSERT INTO `tb_level` (`level_id`, `nama`, `keterangan`) VALUES
(1, 'Administrator', 'Administrator'),
(2, 'Mahasiswa', 'Mahasiswa');

3. Instalasi Codeigniter

Setelah kamu selesai mendownload framework codeigniter tadi, silahkan kamu ekstrak menggunakan winrar ke folder www (jika menggunakan wampserver) atau ke folder htdocs (jika menggunakan XAMPP).

Setelah proses ekstrak selesai, silahkan kamu rename folder tersebut dengan project name yang kamu inginkan, disini saya mengganti nama menjadi project_kampus.

Setelah rename folder, buatlah folder assets untuk meletakkan css, javascript dan file pendukung lainnya.

Gambar diatas dapat dilihat bahwa file pendukung seperti css, javascript diletakkan di folder assets.

4. Konfigurasi Dasar Codeigniter

Hal pertama yang harus kamu lakukan adalah membuat file .htaccess copy dan save dengan nama .htaccess di folder setara application.

<IfModule mod_rewrite.c>
  Options -Indexes

  RewriteEngine On
  RewriteCond $1 !^(index\\.php|resources|robots\\.txt)
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.+)$ index.php?/$1 [L,QSA]
</IfModule>

Hal kedua yang harus kamu lakukan adalah membuka application/config/config.php.

Lalu ganti/ copy syntax dibawah ini agar nantinya css, javascript dan file lainnya dapat terload.

$config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= preg_replace('@/+$@','',dirname($_SERVER['SCRIPT_NAME'])).'/';

Kelebihan dari syntax ini, kita dapat melakukan memuat halaman web apapun nantinya yang terdapat di web kamu pastinya.

Lalu buka application/config/autoload.php copy aja, tapi perhatikan baik baik!

$autoload['libraries'] = array('database','session','form_validation','pagination');
$autoload['helper'] = array('url','file','form');
$autoload['model'] = array('app_login_model');

Disini saya menset libraries, helper, model, agar nantinya mempermudah proses pengerjaan. sebenarnya kalau diarkan secara default tidak masalah, tapi agar saat menjalan program nantinya, model, helper dan libraries inilah yang akan di kerjakan pertama kali.

Buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_kampus',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Ganti database dengan database yang ingin kamu gunakan (db_kampus). username ganti menjadi root dan password biarkan saja secara default.

Hal terakhir dalam membuat halaman login codeigniter adalah mengganti routes kamu, yaitu masuk ke application/config/routes.php

Scroll ke bagian paling bawah dan ganti dengan syntax dibawah ini

$route['default_controller'] = 'login';

5. Buat model Login ( Login_model)

buatlah file baru dan beri nama Login_model dan letakkan di application/model

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Login_model extends CI_Model {


	public function getLoginData($data)

	{

		$login['username'] = $data['username'];
		$login['password'] = md5($data['password']);

		$cek = $this->db->get_where('tb_user', $login);
		if($cek->num_rows()>0)
		{
			foreach($cek->result() as $qad)
			{
				$sess_data['logged_in'] 	= 'yeslogin';
				$sess_data['user_id'] 		= $qad->user_id; //mengambil user id
				$sess_data['username'] 		=$qad->username;
				$sess_data['nama'] 			= $qad->nama; // mengambil nama
				$sess_data['level_id'] 		= $qad->level_id;

				$this->session->set_userdata($sess_data);
				$this->db->where('user_id',$qad->user_id);
                $this->db->update('tb_user', array('last_login'=> date('Y-m-d H:i:s')));
			
			}
			if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="1")
			{
				redirect('dosen');
			} 
			else if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="2")
			{
				redirect('mahasiswa');
			}
		}
		else
		{	

			$this->session->set_flashdata('message', '<div class="alert alert-danger" role="alert"> Maaf, kombinasi username dan password yang anda masukkan tidak valid dengan database kami.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');

			// $this->session->set_flashdata('result_login', "Maaf, kombinasi username dan password yang anda masukkan tidak valid dengan database kami.");
			redirect('login');
		}
	}

}

6. Buatlah View login

langkah selanjutnya untuk membuat halaman login codeigniter multilevel adalah membuat view login. beri nama file login.php dan letakkan di application/view

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Membuat halaman login codeigniter | Log in</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="16x16" href="<?=base_url().'assets/' ?>dist/img/favicon-16x16.png">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>dist/css/adminlte.min.css">
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>dist/css/adminlte.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="https://trenpedia.com/"><b>Login</b> Multilevel</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <center><img width="170px" src="<?php echo base_url();?>assets/dist/img/Logo.png"></center>
      <h1></h1>
        <?php echo form_open('login'); ?>

        <?php echo $this->session->userdata('message');?>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Username" name="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" class="form-control" placeholder="Password" name="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>
          <!-- /.col -->
          <div class="col-4">
            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
          </div>
          <!-- /.col -->
        </div>
         <?php echo form_close(); ?>


    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="<?=base_url().'assets/' ?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?=base_url().'assets/' ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?=base_url().'assets/' ?>dist/js/adminlte.min.js"></script>

</body>
</html>

7. Buatlah controller Login

Selanjutnya buatlah controller login dengan nama login.php dan letakkan di application/controller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		
		$this->load->library('form_validation');
	}

	public function index()
	{
		if($this->session->userdata('logged_in')=="")
		{
		
			
			$this->form_validation->set_rules('username', 'username', 'trim|required');
			$this->form_validation->set_rules('password', 'Password', 'trim|required');
			
			
			if ($this->form_validation->run() == FALSE)
			{
				$this->load->view('login');
			}
			else
			{
				$dt['username'] 	= $this->input->post('username');
				$dt['password'] 	= $this->input->post('password');
				$dt['password'] 	= $this->input->post('password');
				$dt['last_login'] = date('Y-m-d H:i:s');

				

				$this->Login_model->getLoginData($dt);

			}
		}
		else if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="1")
		{
			redirect('dosen');
		}
	}


	public function logout(){
        $this->session->sess_destroy();
        redirect('login');
    }

}

Setelah proses pembuatan form login codeigniter selesai, baik itu model, view dan controller. kita akan membuat halaman yang akan menjadi dashboard dari dosen, ataupun mahasiswa.

8. Buat View Dosen

Pertama buatlah folder baru di view dengan nama dosen. Buatlah view dosen seperti code dibawah ini, disini saya membagi 4 bagian, terdiri dari dashboard, sidebar, header, dan footer. saya melakukan ini agar suatu saat melakukan proses kostumisasi akan memudahkan kamu.

Ini saya terapkan sejak dari dini, agar mempermudah kamu. baca juga untuk tutorial memisahkan dashboard,sidebar,header,dan footer.

syntax atau koding welcome.php save di application/view/dosen

<!DOCTYPE html>
<html>
<head>
	<title>membuat halaman login codeigniter multilevel</title>
</head>
<body>
	<h1>Welcome Dosen<a> Hi, <?php echo $this->session->userdata('nama'); ?></a></h1>

	<li class="nav-item has-treeview">
		<a href="<?php echo base_url('login/logout');?>" class="nav-link">
            <i class="nav-icon far fa-window-close"></i>
             	<p>
                  Logout
                </p>
            </a>
        </li>
</body>
</html>

9. Buat Controller Dosen

Buat controller dosen dengan nama Dosen.php letakkan di application/controller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Dosen extends CI_Controller {

	public function index()
	{
		if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="1")
			{

				$this->load->view('dosen/welcome');
			}
		else
			{

			redirect('login/logout');
		}
	}
}

10. Buat View Mahasiswa

Langkah selanjutnya dalam pembuat form login codeigniter, membuat view mahasiswa beri nama welcome.php letakkan application/view/mahasiswa. lalu copy kan syntax berikut.

<!DOCTYPE html>
<html>
<head>
	<title>membuat halaman login codeigniter multilevel</title>
</head>
<body>
	<h1>Welcome Mahasiswa<a> Hi, <?php echo $this->session->userdata('nama'); ?></a></h1>
	
	<li class="nav-item has-treeview">
		<a href="<?php echo base_url('login/logout');?>" class="nav-link">
            <i class="nav-icon far fa-window-close"></i>
             	<p>
                  Logout
                </p>
            </a>
        </li>
</body>
</html>

11. Buat Controller Mahasiswa

Buatlah controller dengan Mahasiswa.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Mahasiswa extends CI_Controller {

	public function index()
	{
		if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="2")
			{

				$this->load->view('mahasiswa/dashboard');
			}
		else
			{

			redirect('login/logout');
		}
	}
}

12. Testing Aplikasi Halaman Login Codeigniter Multilevel

Sekarang adalah tahap terakhir, yaitu testing. kamu dapat melakukan testing dengan mengunjungi http://localhost/project_kampus/index.php/login

Maka akan tampil seperti ini…

Silahkan login dengan level mahasiswa atau dosen, dan kamu akan melihat perbedaan hak akses.

Login menggunakan id dosen

Tampilan ini merupakan tampilan dari adminlte yang sudah saya modifikasi sedikit. alasan saya tidak mengetik codingnya karena akan terlihat membosankan nantinya. Hasil akhir dari pengerjaan ini dapat dilihat di link yang ada dibawah ya.

Login menggunakan username mahasiswa

Sekian tutorial kali ini, membuat halaman login codeigniter multilevel, Semoga bermanfaat!

Download Source

Alasan saya menggunakan logo kampus saya adalah sebagai bahan promosi kepada kampus saya.