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.phpfooter.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.
login in codeigniter 2.1.3 from http://starzoneku.blogspot.com/2013/04/membuat-login-di-codeigniter-213.html
screenshot hasil login di codeigniter 2.1.3

61 comments:

  1. Suka ........
    masbro...
    salam kenal..
    Sesama IT :)

    ReplyDelete
    Replies
    1. salam balik juga, makasih udah ninggalin komen

      Delete
  2. Saya suka dengan cara anda yang lugas membangun tutorialnya.

    Saran : Bagaimana kalau anda juga menambahkan pemanfaatan aplikasi security seperti securimage sebagai bagian dari login. Bukankah sekarang sedang banyak yang membutuhkan login form + capcha image ?

    ReplyDelete
    Replies
    1. terima kasih atas pujian dan sarannya,
      ya pak kalau sempat saya tak buat tutorialnya

      Delete
  3. terima kasih tutorialnya..
    sangat bermanfaat... ^^

    ReplyDelete
  4. bermanfaat bgt gan buat ane yg masih nubie ini
    ane kagum ama kegigihan ente
    salam kenal

    ReplyDelete
  5. MANTEB Pakde, kebetulan lagi belajar CI nih :D

    mampir kalau sempet ya :D

    http://officialitoru.blogspot.com/

    ReplyDelete
  6. terimakasih pak sangat membantu nyelesaikan Tugas kuliah saya :)

    ReplyDelete
  7. gan ketika kita sudah logout supaya pas di klik tombol back di borwser tidak tampil halaman sesudah login gimana caranya?

    ReplyDelete
    Replies
    1. untuk function is_logged_in() diatas isinya diganti redirect('login');
      dan lakukan panggilan fungsi di constructor.
      mungkin yang paling enak fungsi itu dibuat di library, nanti di autoload kan

      Delete
  8. maaf mau nanya saya sebagai pemula yang baru belajar kok ngk ada tampilannya ya wktu dijlankn?? erorx "Unable to connect to your database server using the provided settings."
    itu buatnya gimana?makasi sebelumnya :)

    ReplyDelete
    Replies
    1. masuk ke application/config/database.php
      lalu dirubah kayak gini nih
      $db['default']['hostname'] = "localhost";

      $db['default']['username'] = "root";

      $db['default']['password'] = "";

      $db['default']['database'] = "database_name";

      $db['default']['dbdriver'] = "mysql";

      $db['default']['dbprefix'] = "";

      $db['default']['pconnect'] = TRUE;

      $db['default']['db_debug'] = FALSE;

      $db['default']['active_r'] = TRUE;

      Delete
  9. maaf mas, saya mau tanya,, saat saya mau login kok tidak bisa redirect ke beranda ya, padahal saya sudah create account ??? terima kasih ini sangat membantu ...

    ReplyDelete
    Replies
    1. fungsi redirect dalam codeigniter merupakan bagian dari helper url,
      jadi silkan di panggi dulu.
      bisa lewat autoload.
      mungkin seperti itu.
      terima kasih

      Delete
  10. Pak Darul, kalau misal kita sedikit modif field tablenya ditambahkan GroupID, terus kalau kita berhasil login maka setiap user dapat melihat list hanya yang groupid nya yang bersesuaian gimana yach cara codingnya ?
    Jadi sekenarionya masing masing groupid terdiri dari beberapa userid, dan kalau beda groupid maka userid tersebut hanya dapat melihat user list yang satu groupid aja

    ReplyDelete
    Replies
    1. ya itu kan mungkin bisa diakalin pake perintag select database ya??
      select * from user where groupID="bla bla";
      mungkin seperti itu yang anda maksud

      Delete
  11. pak..
    gimana cara agar dapat menggunakan background image di body ?
    solusi..?

    ReplyDelete
    Replies
    1. Ya seperti html biasa,
      Bisa di taruh di file template
      .php dan di tag body tambahkan atribut background=gambar.jpg
      atau
      Kalo file di atas bisa di tambahkan di file css

      Delete
  12. mas, kok kalo klik account tuh keluar "object not found" itu gimana? urlnya yang salah? ato gimana ?

    ReplyDelete
    Replies
    1. Mungkin setingan config anda.
      Di sesuaikan dengan keadaan anda

      Delete
    2. maksud saya pas klik "create account", itu apa masalah d config? ato dimana? soalnya sudah saya cek di MVCnya kayaknya gak ada yang salah

      Delete
    3. This comment has been removed by the author.

      Delete
    4. ya mungkin anda bisa lihat source code nya, dengan cara tekan Ctrl+U dari browser saudara, nanti di lihat skrip dari link 'create account'
      yang seharusnya

      sudah benarkah??

      Delete
    5. ya mungkin anda bisa lihat source code nya, dengan cara tekan Ctrl+U dari browser saudara, nanti di lihat skrip dari link 'create account'
      yang seharusnya link nya seperti ini
      href="http://localhost/tutorial7/index.php/login/signup">"
      sudah benarkah??

      Delete
    6. kalau belum bisa di print screen itu error nya...

      Delete
  13. sangat komunikatif....trims gan...!!!

    ReplyDelete
  14. thanks gan atas ilmunya.
    http://brothergiez.tumblr.com

    ReplyDelete
  15. keren,,, mksh banyak
    sangat membantu dan berguna pisan euyyyy
    nuhuuuuuuuuuuuuun

    ReplyDelete
  16. Mas Darul...mohon dibuat tutorial cara membuat Form Login yang persis sama dengan Form Login OrangeHrm v 3.1.1 terima kasih

    ReplyDelete
    Replies
    1. apa ya yang istimewa di login orangehrm??
      kan cuma tampilan...
      apa perlu dibuatkan..

      Delete
  17. saya seneng liatnya Mas Darul ...kalo tidak keberatan mohon dibuatkan Mas Darul tutorialnya ...dan maaf (permintaannya jadi melebar)...mohon dibuat juga sekalian dengan menu hal admin masih ala orangehrm 3.1.1 matur nuwun

    ReplyDelete
  18. mantap dan sangat membantu gan. terima kasih ilmu nya gan. mudah2an agan cepat kaya dan sukses slalu.. aminnnn... hehehehehee :matabelo

    gan,,kalo mau buat pake menu login pas d klik menu nya, muncul view login nya d tengah template,, kayak alert gtu gan. gmn cara nya gan???

    ReplyDelete
    Replies
    1. aminnnn.
      terima kasih
      ya tinggal dibuat modal, pake javascript , pake yang framework jquery juga ada.
      kalau pengen gampang lagi. pake bootstrap bisa juga..

      Delete
  19. bantu pliss,, ketika aku klik login, kok tampilan g berubah ya? masih tetap di http://localhost/login/index.php/login/validate_credentials

    semua udah di setting gan, bahkan udah aku full copas masih ttp bgtu,,
    mohon pencerahannya gan,,

    ReplyDelete
    Replies
    1. maaf, mungkin agan bisa download source kode diatas.
      memang kemaren baru ganti template, dan sedikit edit.
      kalau masih belum bisa, komen lagi ya...

      Delete
  20. Sama gan kasusnya, punyaku malah autentikasinya tidak jalan meski dikasih user passwd sembarang akan kembali ke login...hiks..

    ReplyDelete
    Replies
    1. maaf, mungkin agan bisa download source kode diatas.
      memang kemaren baru ganti template, dan sedikit edit.
      kalau masih belum bisa, komen lagi ya...

      Delete
  21. halo gan, maaf nih kok gakbis adi download link ny

    ReplyDelete
    Replies
    1. kok bisa ya punya saya...
      itu pake adfly klik tombol skip ads.
      langsung otomatis download

      Delete
  22. Gan ini gmn yah, ga tembus masalah ini

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: Site::$session

    Filename: controllers/site.php

    Line Number: 23


    Fatal error: Call to a member function userdata() on a non-object in C:\xampp\htdocs\coba\application\controllers\site.php on line 23

    ReplyDelete
  23. sama dengan Teguh setiawan..mohon balasannya hee
    ..link download jg mati

    ReplyDelete
  24. mas darul saya ingin bertanya , kok ketika saya login validasinya tidak ada proses yah, sedangkan saya coba menampilkan username dan passwordnya itu tampil mas mohon pencerahannya mas untuk validasinya sebelumnya terima kasih

    ReplyDelete
  25. pngen download,,, tp di dropbox nya ga ada :(

    ReplyDelete
  26. mas please upload ulang link source code nya, , error tuh T_T

    ReplyDelete
  27. A PHP Error was encountered

    Severity: Notice

    Message: Undefined property: Site::$session

    Filename: controllers/site.php

    Line Number: 23


    Fatal error: Call to a member function userdata() on a non-object in C:\xampp\htdocs\UAS\application\controllers\site.php on line 23

    maaf pak, itu errornya kenapa ya?

    ReplyDelete
    Replies
    1. tambahkan session pada $autoload['libraries']

      Delete
    2. Mkasudnya ditambahkan dimananya? mohon yg jelas

      Delete
  28. permisi mas, saya masih pemula banget nih di CI, yg saya mau tanyakan file .sql nya ditaruh di folder apa ya? kalau sampai keluar pesan eror:
    Unable to connect to your database server using the provided settings.

    Filename: C:\xampp\htdocs\site\system\database\DB_driver.php

    Line Number: 124

    itu diapakan ? trimakasih

    ReplyDelete
  29. bantuin dong klo pas baru mau masuk login awal kok ada tulisan
    "Fatal error: Call to undefined function form_open() in C:\xampp\htdocs\ci\application\views\login_form.php on line 8"

    itu kenapa ya tolong dong kasih tau terimakasih :)

    ReplyDelete
  30. gan kalo kaya gini gimana :
    Unable to load the requested file: includes/template.php

    ReplyDelete
  31. gan kenapa ya saya udah download file nya tapi tetep pas mau login malah balik lagi ke login/validate_credentials.. tolong bantuannya gan saya pengen belajar ci
    terima kasih

    ReplyDelete
  32. bagus tutorialnya.

    jangan lupa kunjungi juga blog kami di
    http://blog.microtrafh.com/
    blog share IT dan informasi

    ReplyDelete
  33. bos,, saya sudah coba tutorialnya tapi katanya

    Object not found!

    The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.

    If you think this is a server error, please contact the webmaster.

    Error 404

    localhost
    Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3

    ReplyDelete
  34. maaf mau tanya, folder css-nya ada dimana ya? kok di saya gaada folder css. makasih

    ReplyDelete