Membuat sistem login menggunakan codeigniter ion auth

Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses halaman admin dan melakukan penginputan data jalan, jembatan dan juga koordinat pada jalan dan jembatan. Oleh karena itu kita akan membuat sistem supaya hanya admin yang mempunyai email terdaftar saja yang bisa mengakses halaman admin dan melakukan sistem administrasi jalan, jembatan dan koordinat. Untuk mempermudah kita menggunakan codeigniter-ion-auth untuk membuat sistem registrasi dan login aplikasi simplegis.

Download codeigniter-ion-auth dan exstract terlebih dahulu, kemudian import file mysql ke dalam database yang kita gunakan untuk aplikasi simplegis. Secara default sistem akan menggunakan email : [email protected] dan password : password.

Apabila kita kita lihat hasil import file mysql tadi, terdapat 4 table yaitu :

  1. users
  2. groups
  3. users_groups
  4. login_attempts

Selanjutnya copy paste semua folder kecuali folder migrations, sql dan userguide ke dalam folder application di dalam aplikasi simple gis kita.

Setting codeigniter ion authnya sudah selesai, sekarang kita akan buat template dari halaman homepage yang kita buat sebelumnya pada saat membuat grafik menggunakan canvasJS.

Template-home

Pindahkan file homepage ke dalam folder views/home dan buat 3 buah file yaitu header-home.php, footer-home.php dan template-home.php di dalam folder templates.

1. header-home.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple Gis</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="<?php echo base_url('assets/js/canvasjs.min.js')?>"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <nav class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Simple Gis</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="<?php echo site_url();?>">Home</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="<?php echo site_url('login');?>">Login</a></li>

            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

2. footer-home.php

  </body>
</html>

3. template-home.php

<?php
$this->load->view('templates/header-home');
$this->load->view($content);
$this->load->view('templates/footer-home');
 ?>

4. Edit file Home.php

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

class Home extends CI_Controller{

    public function __construct(){
        parent::__construct();
        //Codeigniter : Write Less Do More
        $this->load->model(array('model_jalan',
        'model_jembatan'));
        $this->load->helper('url');
    }

    function index(){
        $data = array('content'=>'home/homepage',
            'itemjalan' => $this->model_jalan->getAll(),
        'itemjembatan'=>$this->model_jembatan->getAll());
        $this->load->view('templates/template-home',$data);//edit pada bagian ini untuk memanggil content
    }
    function loaddata(){
        if (!$this->input->is_ajax_request()) {
            show_404();
        }else{
            $status = 'success';
            $jalan = $this->model_jalan->getAll()->num_rows();
            $jembatan = $this->model_jembatan->getAll()->num_rows();
            $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'jalan'=>$jalan,'jembatan'=>$jembatan)));
        }
    }

}

Controller Login

Kemudian untuk sistem login buat controller Login.php dan file formlogin.php di folder views/home.

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

class Login extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		$this->load->library('session');
		$this->load->helper('form');
		$this->load->helper('url');
		$this->load->library('ion_auth');

	}
	public function index()
	{
		if ($this->input->post()) {
			$this->load->library('form_validation');
			$this->form_validation->set_rules('email', 'Email', 'required');
			$this->form_validation->set_rules('remember', 'Remember me', 'integer');
			if ($this->form_validation->run()==TRUE) {
				$remember = (bool) $this->input->post('remember');
				if ($this->ion_auth->login($this->input->post('email'),$this->input->post('password'),$remember)) {
					redirect('admin','refresh');
				}else{
					$this->session->flashdata('message',$this->ion_auth->errors());
					redirect('login','refresh');
				}
			}
		}
		if (!$this->ion_auth->logged_in()) {
			$data = array('content' => 'home/formlogin',
				'title'=>'Login Page',
				'description'=>'Login page');
			$this->load->view('templates/template-home',$data);
		}else{
            if ($this->ion_auth->in_group('admin')) {
                redirect('admin','refresh');
            }elseif ($this->ion_auth->in_group('members')) {
            	redirect('members','refresh');
            }else{
				redirect('login','refresh');
			}
        }
	}
	public function logout(){
		$this->ion_auth->logout();
  		redirect('login', 'refresh');
	}

}

/* End of file Login.php */
/* Location: .//var/www/fadlur/apps/controllers/Login.php */

 

2. formlogin.php

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-4">
            <div class="panel panel-default">
    			<div class="panel-heading"><span class="glyphicon glyphicon-log-in"></span> Login</div>
    			<div class="panel-body">
    				<?php echo $this->session->flashdata('message');?>
    				<form action="<?php echo site_url('login'); ?>" method="post">
    					<div class="form-group">
    						<?php echo form_error('email'); ?>
    						<label for="email">Email</label>
    						<input type="email" class="form-control" id="email" name="email">
    					</div>
    					<div class="form-group">
    						<?php echo form_error('password'); ?>
    						<label for="password">Password</label>
    						<input type="password" class="form-control" id="password" name="password">
    					</div>
    					<div class="form-group">
    						<label>
    							<?php echo form_checkbox('remember','1',FALSE);?> Remember me
    						</label>
    					</div>
    					<div class="form-group">
    						<button class="btn-primary btn form-control" id="loginbutton">Login</button>
    					</div>
    				</form>
    			</div>
    		</div>
        </div>
    </div>
</div>

Selanjutnya sesuaikan file routes.php menjadi berikut :

$route['default_controller'] = 'home';
$route['admin'] = 'admin/jalan';
$route['members'] = 'members/koordinat';
$route['logout'] = 'login/logout';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

Setelah proses login berhasil dibuat, kemudian edit _construct() 4 file di dalam folder admin yaitu Jalan.php, Jembatan.php, Koordinatjalan.php dan Koordinatjembatan.php.

Jalan.php

public function __construct()
    {
        parent::__construct();
        //kita load model yang dibutuhkan, yaitu model jalan
        $this->load->model(array('model_jalan'));
        $this->load->helper('url');
        $this->load->library(array('form_validation','ion_auth'));
        if (!$this->ion_auth->logged_in()) {//cek login ga?
    		redirect('login','refresh');
    	}else{
            if (!$this->ion_auth->in_group('admin')) {//cek admin ga?
                redirect('login','refresh');
            }
        }
    }

Jembatan.php

public function __construct()
    {
        parent::__construct();
        //kita load model yang dibutuhkan, yaitu model jembatan
        $this->load->model(array('model_jembatan'));
        $this->load->helper('url');
        $this->load->library(array('form_validation','ion_auth'));
        if (!$this->ion_auth->logged_in()) {//cek login ga?
    		redirect('login','refresh');
    	}else{
            if (!$this->ion_auth->in_group('admin')) {//cek admin ga?
                redirect('login','refresh');
            }
        }
    }

Koordinatjalan.php

public function __construct()
    {
        parent::__construct();
        //Codeigniter : Write Less Do More
        $this->load->model(array('model_koordinatjalan','model_jalan'));
        $this->load->helper('url');
        $this->load->library(array('form_validation','ion_auth','cart'));
        if (!$this->ion_auth->logged_in()) {//cek login ga?
    		redirect('login','refresh');
    	}else{
            if (!$this->ion_auth->in_group('admin')) {//cek admin ga?
                redirect('login','refresh');
            }
        }
    }

Koordinatjembatan.php

public function __construct()
    {
        parent::__construct();
        //load model dan library seperti di controller jalan dan jembatan
        $this->load->model(array('model_jembatan','model_koordinatjembatan'));
        $this->load->helper('url');
        $this->load->library(array('form_validation','ion_auth','cart'));
        if (!$this->ion_auth->logged_in()) {//cek login ga?
    		redirect('login','refresh');
    	}else{
            if (!$this->ion_auth->in_group('admin')) {//cek admin ga?
                redirect('login','refresh');
            }
        }
    }

Terakhir edit navbar di header-admin.php seperti dibawah ini :

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"></a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class="glyphicon glyphicon-list"></span> Data <b class='caret'></b></a>
                  <ul class='dropdown-menu'>
                      <li><?php echo anchor('admin/jalan','Jalan') ?></li>
                      <li><?php echo anchor('admin/jembatan','Jembatan') ?></li>
                  </ul>
              </li>
              <li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class="glyphicon glyphicon-globe"></span> Koordinat <b class='caret'></b></a>
                  <ul class='dropdown-menu'>
                      <li><?php echo anchor('admin/koordinatjalan','Koordinat Jalan') ?></li>
                      <li><?php echo anchor('admin/koordinatjembatan','Koordinat Jembatan') ?></li>
                  </ul>
              </li>

            </ul>

            <ul class="nav navbar-nav navbar-right">
              <li><a href="<?php echo site_url('logout')?>"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!--header admin-->

Selamat mencoba. 😀

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.