MEMBUAT LOGIN DI CODEIGNITER 2.1.3 (AUTHENTIKASI)

Kali ini saya akan membagikan tutorial tentang pembuatan login di codeigniter 2.1.3. Hasil akhir dari aplikasi ini adalah sobat akan disuguhi tampilan login (jika belum login) ada 2 pilihan Login atau SignUp (daftar sebagai member). Dalam Form signup akan ada validasi, ketika sobat berhasil akan di arahkan ke halaman pemberitahuan untuk login. Setelah berhasil login sobat akan di redirect ke halaman member_area. Ok langsung aja ke praktek.

---

STEP 1 : Membuat tabel
Sobat diasumsikan sudah membuat database bernama ci_series dan membuat tabel bernama membership dengan 6 field/kolom yaitu id, nama_depan, nama_belakang, username, password, email_address. Dengan field id kita set sebagai primary key dengan nilai auto_increment

---

STEP 2 : Membuat model
Buat application\models\membership_model.php dan isikan kode sebagai berikut :

<?php

class Membership_model extends CI_Model {

 function validate()
 {
  $this->db->where('username', $this->input->post('username'));
  $this->db->where('password', md5($this->input->post('password')));
  $query = $this->db->get('membership');
  
  if($query->num_rows == 1)
  {
   return true;
  }
  
 }
 
 function create_member()
 {
  
  $new_member_insert_data = array(
   'nama_depan' => $this->input->post('first_name'),
   'nama_belakang' => $this->input->post('last_name'),
   'email_address' => $this->input->post('email_address'),   
   'username' => $this->input->post('username'),
   'password' => md5($this->input->post('password'))      
  );
  
  $insert = $this->db->insert('membership', $new_member_insert_data);
  return $insert;
 }
}

function validate digunakan untuk memvalidasi hasil login sobat, jika username dan password yang dimasukkan cocok maka akan menghasilkan nilai true (benar). Dan untuk function create member digunakan untuk membuat member baru dengan memasukkan semua data ke field masing-masing.

---

STEP 2 : Membuat controller
Disini saya akan membuat 2 controller yaitu login.php dan site.php untuk yang pertama yaitu saya akan membuat application\controllers\login.php sebagai berikut :

<?php

class Login extends CI_Controller {
 
 function index()
 {
  $data['main_content'] = 'login_form';
  $this->load->view('includes/template', $data);  
 }
 
 function validate_credentials()
 {  
  $this->load->model('membership_model');
  $query = $this->membership_model->validate();
  
  if($query) // jika data user benar
  {
   $data = array(
    'username' => $this->input->post('username'),
    'is_logged_in' => true
   );
   $this->session->set_userdata($data);
   redirect('site/members_area');
  }
  else // username atau password salah
  {
   $this->index();
  }
 } 
 
 function signup()
 {
  $data['main_content'] = 'signup_form';
  $this->load->view('includes/template', $data);
 }
 
 function create_member()
 {
  $this->load->library('form_validation');
  
  // field name, error message, validation rules
  $this->form_validation->set_rules('first_name', 'Name', 'trim|required');
  $this->form_validation->set_rules('last_name', 'Last Name', 'trim|required');
  $this->form_validation->set_rules('email_address', 'Email Address', 'trim|required|valid_email');
  $this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[4]');
  $this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[4]|max_length[32]');
  $this->form_validation->set_rules('password2', 'Password Confirmation', 'trim|required|matches[password]');
  
  
  if($this->form_validation->run() == FALSE)
  {
   $this->load->view('signup_form');
  }
  
  else
  {   
   $this->load->model('membership_model');
   
   if($query = $this->membership_model->create_member())
   {
    $data['main_content'] = 'signup_successful';
    $this->load->view('includes/template', $data);
   }
   else
   {
    $this->load->view('signup_form');   
   }
  }
  
 }
 
 function logout()
 {
  $this->session->sess_destroy();
  $this->index();
 }

}

Yang kedua saya akan membuat controller  application\controllers\site.php sebagai berikut :

<?php

class Site extends CI_Controller 
{
 function __construct()
 {
  parent::__construct();
  $this->is_logged_in();
 }

 function members_area()
 {
  $this->load->view('logged_in_area');
 }
 
 function another_page() // just for sample
 {
  echo 'good. you\'re logged in.';
 }
 
 function is_logged_in()
 {
  $is_logged_in = $this->session->userdata('is_logged_in');
  if(!isset($is_logged_in) || $is_logged_in != true)
  {
   echo 'You don\'t have permission to access this page. <a href="../login">Login</a>'; 
   die();  
   //$this->load->view('login_form');
  }  
 } 

}

---

STEP 3 : Membuat template
Sebelum saya membuat view terlebih dahulu saya akan membuat template yang terdiri header.php, footer.php, tut_info.php(opsional) dan template.php.yang berada dalam direktori views\include.
Kode application\views\include\header.php

<!DOCTYPE html>

<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>Sign Up!</title>
 <link rel="stylesheet" href="<?php echo base_url();?>/css/style.css" type="text/css" media="screen" />
 
</head>
<body>

Kode application\views\include\footer.php

</body>
</html>

Kode application\views\include\template.php

<?php $this->load->view('includes/header'); ?>

<?php $this->load->view($main_content); ?>

<?php $this->load->view('includes/footer'); ?>

$main_content Merupakan variabel yang akan membuat template dinamis

Kode application\views\include\tut_info.php

<div id="tutInfo">Tutorial created by <a href="http://www.facebook.com/ahmaddarulabror">Ahmad Darul Abror</a> for <a href="http://starzoneku.blogspot.com">My Blog</a></div>

---

STEP 4 : Membuat Views
Saya akan membuat 4 views, yaitu :

1. application\views\login_form.php yang memuat view yang menampilkan form untuk login

   <?php $this->load->view('includes/header'); ?>
   
   <div id="login_form">
   
    <h1>Login, Fool!</h1>
       <?php 
    echo form_open('login/validate_credentials');
    echo form_input('username', 'Username');
    echo form_password('password', 'Password');
    echo form_submit('submit', 'Login');
    echo anchor('login/signup', 'Create Account');
    echo form_close();
    ?>
   
   </div><!-- end login_form-->
   
   <?php $this->load->view('includes/tut_info'); ?>
    
   <?php $this->load->view('includes/footer'); ?>

2. application\views\signup_form.php view ini menampilkan form pendaftaran atau signup

   <?php $this->load->view('includes/header'); ?>
   
   <h1>Create an Account!</h1>
   <fieldset>
   <legend>Personal Information</legend>
   <?php
      
   echo form_open('login/create_member');
   
   echo form_input('first_name', set_value('first_name', 'First Name'));
   echo form_input('last_name', set_value('last_name', 'Last Name'));
   echo form_input('email_address', set_value('email_address', 'Email Address'));
   ?>
   </fieldset>
   
   <fieldset>
   <legend>Login Info</legend>
   <?php
   echo form_input('username', set_value('username', 'Username'));
   echo form_input('password', set_value('password', 'Password'));
   echo form_input('password2', 'Password Confirm');
   
   echo form_submit('submit', 'Create Acccount');
   ?>
   
   <?php echo validation_errors('<p class="error">'); ?>
   </fieldset>
   
   <?php $this->load->view('includes/tut_info'); ?>
   
   <?php $this->load->view('includes/footer'); ?>

3. application\views\signup_successful.php yang berisikan informasi bahwa signup sukses, lalu view member akan di suguhi link login.

   <h1>Congrats!</h1>
   <p>Your account has not been created. <?php echo anchor('login', 'Login Now');?></p>

4. application\views\logged_in_area.php view member yang sudah login

   <!DOCTYPE html>
   
   <html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>untitled</title>
   </head>
   <body>
    <h2>Selamat datang kembali, <?php echo $this->session->userdata('username'); ?>!</h2>
        <p>This section represents the area that only logged in members can access.</p>
    <h4><?php echo anchor('login/logout', 'Logout'); ?></h4>
   </body>
   </html>

---

STEP 5 : Membuat file css
Untuk mempercanti tampilan sobat tambahkan file css di css/style.css dengan css adalah folder diluar sistem, dan isikan file dengan skrip dibawah :

body {
 background: #b6b6b6;
 margin: 0;
 padding: 0;
 font-family: arial;
}
#login_form {
 width: 300px;
 background: #f0f0f0 url(../img/login_bg.jpg) repeat-x 0 0;
 border: 1px solid white;
 margin: 250px auto 0;
 padding: 1em;
 -moz-border-radius: 3px;
}
h1,h2,h3,h4,h5 {
 margin-top: 0;
 font-family: arial black, arial;
 text-align: center;
}

input[type=text], input[type=password] {
 display: block;
 margin: 0 0 1em 0;
 width: 280px;
 border: 5px;
 -moz-border-radius: 1px;
 -webkit-border-radius: 1px;
 padding: 1em;
}

input[type=submit], form a {
 border: none;
 margin-right: 1em;
 padding: 6px;
 text-decoration: none;
 font-size: 12px;
 -moz-border-radius: 4px;
 background: #348075;
 color: white;
 box-shadow: 0 1px 0 white;
 -moz-box-shadow: 0 1px 0 white;
 -webkit-box-shadow: 0 1px 0 white;

}

input[type=submit]:hover, form a:hover {
 background: #287368;
 cursor: pointer;
}




/* Validation error messages */

.error {
 color: #393939;
 font-size: 15px;
}

fieldset {
 width: 300px;
 margin: auto;
 margin-bottom: 2em;
 display: block;
}

/* FOR FUN */

h1 {
 text-shadow: 0 1px 0 white;
}

/* Not necessary. Just the "tutorial created by" stuff at the bottom */

#tutInfo {
 background: #e3e3e3;
 border-top: 1px solid white;
 position: absolute;
 bottom: 0;
 width: 100%;
 padding: .7em .7em .7em 2em;
}

---

STEP TERAKHIR : Konfigurasi CodeIgniter

Buka application\config\autoload.php dan edit konfigurasi default sebagai berikut :

$autoload['libraries'] = array('database');

$autoload['helper'] = array('url','form');

Juga buka application\config\config.php dan konfigurasi seperti dibawah ini :

$config['base_url'] = 'http://localhost/tutorial7/';
//tutorial7 adalah nama folder tempat kerja sobat

Edit application\config\database.php seperti dibawah ini :

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = 'root';
$db['default']['database'] = 'ci_series';
$db['default']['dbdriver'] = 'mysql';

Juga buka application\config\routes.php dan konfigurasi seperti dibawah ini :

$route['default_controller'] = "site";

Kalau sobat sukses, hasilnya seperti dibawah ini, Sobat bisa download sourcenya di link bawah. Jika sobat ada masukan atau saran ataupun kurang paham. Kasih komentar ya sobat.

screenshot hasil login di codeigniter 2.1.3

DOWNLOAD SOURCE CODE