Membuat Simple Login dan Register Menggunakan CodeIgniter

1 botol Green tea ukuran sedang dan secangkir kopi miliknya. Di suatu sore yang tak terasa berganti malam. Siang tadi kami bertemu, di antara ketidak sengajaan atau mungkin pertemuan ini sudah diatur sedemikian rupa oleh kuasa kasat mata di sebuah kopi tua di pojok kota. Bertukar cerita, ngalor ngidul membicarakan banyak hal.

Di akhir pertemuan, dia bertanya.

“Punya akun line ga?” twitter? Atau Facebook?

Seperti biasa, hal yang sering ditanyakan saat baru berkenalan. Menanyakan akun media sosial. Kalau kata teman saya, salah satu ciri orang yang ‘kekinian’ adalah memiliki akun media sosial. Dan bisa dipastikan, berdasar hasil observasi saya sendiri, hampir semua teman di kelas saya memiliki akun media sosial. Entah itu akun Facebook, Twitter, Path, Instagram ataupun media sosial lainnya. Memang sebagai generasi yang hidup, berkembang dan mendewasa di era digital, kita dapat dengan mudah berinteraksi dan saling sapa. Salah satunya dengan media sosial. Kita bisa dengan mudah memiliki akun media sosial hanya dengan klak – klik saja. Belum lagi ponsel canggih yang mendukung kemudahan – kemudahan lainnya. Kita cukup mendaftar, masukan data diri, dan...

voila!~ Kita sudah dapat akun media sosial!

 

via google.com, credit to owner

...

Dan, karena informasi perkuliahan itu adanya di grup facebook, mau ga mau¸ saya juga harus punya akun facebook. Bukan kok. Bukan karena pengen ikut – ikutan kekinian! Seperti biasa, sewaktu mendaftar akun facebook..

“Bagaimana ya caranya membuat sebuah fitur untuk mendaftar akun dan kita bisa langsung login setelah mendaftar, seperti media sosial?”. Tetiba saja terlintas di pikiran saya, bagaimana ya caranya?

Seperti yang apa saya tulis di Code-writerTalk #1, ide itu memang tidak pernah jauh dari sekitar kita. Kitanya aja yang mesti peka. Hihi

...

Yep, di seri tutorial CodeIgniter kali ini, kita akan membuat project Simple Login Register menggunakan CodeIgniter. Di dalam project ini, kita akan membuat sebuah fitur yang digunakan untuk proses registrasi akun dan login ke dalam aplikasi CodeIgniter yang kita bangun. Selain itu, kita juga akan mencoba membuat sebuah library CodeIgniter sederhana untuk fitur Login.

Lalu, apa saja langkah-langkah dalam membuat project Simple Login Register CodeIgniter? Check this out, ya! 

Tutorial CodeIgniter : Membuat Simple Login dan Register Menggunakan CodeIgniter

[1] Persiapan

Sebelum memulai alangkah baiknya kita berdoa terlebih dahulu, supaya codingnya berjalan dengan lancar. :)

Sudah?

Ya, selanjutnya kita cek apa saja yang kita gunakan. Dan spesifikasi peralatan yang saya gunakan adalah sebagai berikut:

    [a] PHP Version 5.5.35 (XAMPP 5.5.35)
    [b] MariaDB (XAMPP 5.5.35)
    [c] CodeIgniter versi 3.1.0

Kamu bisa download CodeIgniter di web official CodeIgniter [Here]. Klik link 'Download' untuk download CodeIgniter versi terbaru.

Kalau sudah kamu download, extract zip file (CodeIgniter-3.1.0.zip) dan rename folder. Misalnya, CodeIgniter-3.1.0 di-rename menjadi 'ci3'. Setelah itu pindahkan folder 'ci3' ke direktori webroot, yaitu C:\xampp\htdocs\.

[2] Membuat Database

Oke, setelah semua persiapan sudah siap. Langkah berikutnya adalah membuat database. Buatlah database dengan nama dbci3. Nah, selanjutnya kita akan membuat tabel. Klik menu SQL di PHPMyadmin.

Lalu, copy kode berikut ke dalam textarea.

 CREATE TABLE IF NOT EXISTS `users` (   
  `id_user` int(11) NOT NULL AUTO_INCREMENT,   
  `nama` varchar(100) NOT NULL,   
  `email` varchar(255) NOT NULL,   
  `username` varchar(32) NOT NULL,   
  `password` varchar(64) NOT NULL,   
  PRIMARY KEY (`id_user`),   
  UNIQUE KEY `email` (`email`)   
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;   

Kemudian, klik tombol Go.

Maka, secara ajaib akan muncul tabel users di dalam database kita. Iya, iya.. maksudnya perintah SQL sudah dieksekusi.. :D
Oke, selanjutnya...

...

[3] Mengatur Config

Buka config.php di direktori application/config/ di dalam folder ci kamu. :D

Cek line ke 26 di dalam file config.php untuk mengatur config buat base_url. kita atur base_url sesuai dengan nama folder ci yang kita buat. Karena nama folder ci saya 'ci3', saya atur base_url seperti di bawah ini:

$config['base_url'] = 'http://localhost/ci3/';

Simpan kembali file config.php dengan menekan tombol ctrl+s.

Selanjutnya, kita atur autoload. Buka autoload.php masih di direktori yang sama, yaitu direktori application/config/. Cek line ke 61 untuk mengatur autoload library. Ubah kode di bawah ini:

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

Menjadi :

$autoload['libraries'] = array('form_validation','session','database','simple_login'); 

Selanjutnya, cek line ke 92 untuk mengatur autoload helper.

$autoload['helper'] = array(); 

Ubah menjadi:

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

Selanjutnya, kita atur autoload model. Cek line ke 135.

$autoload['model'] = array(); 

Ubah menjadi:

$autoload['model'] = array('m_account'); 

Simpan kembali file autoload.php dengan menekan tombol ctrl+s.

Nah, selanjutnya kita akan mengatur config database. Buka file database.php, masih di direktori yang sama yaitu application/config/. Cek line ke 76. Kamu dapat melihat sintaks seperti sintaks kode di bawah ini:

 $db['default'] = array(
      'dsn'     => '',
      'hostname' => 'localhost',
      'username' => '',
      'password' => '',
      'database' => '',
      '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
 );

lalu atur konfigurasi database seperti di bawah ini:

 $db['default'] = array(
      'dsn'     => '',
      'hostname' => 'localhost',
      'username' => 'root',
      'password' => '',
      'database' => 'dbci3',
      '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
 );

Kalau sudah, seperti biasa simpan kembali file database.php dengan menekan tombol ctrl+s.
Yang terakhir, buka file routes.php. Iya, iya kamu bener. Itu masih di direktori application/config/ :D
Cek di paliiiiing ujung, yaitu line 52. Kita ubah default controller menjadi :

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

Simpan. Dan selesai. :D

[4] Membuat file Controller, Library, Model dan View

Dan, langkah selanjutnya adalah coding, Yeay! :D

Sekarang kita akan buat beberapa file PHP. Yaitu file controller, library untuk login, model, dan juga view.

Kawan, sekarang kita akan membuat file views. Nah, sebelumnya kita buat folder baru dengan nama 'account' di direktori application/views/. Kamu bisa lihat di gambar ini.

Lalu, selanjutnya kita akan buat beberapa file views di dalam folder 'account' tersebut.

Pertama kita buat file views dengan nama beranda.php. File ini digunakan sebagai halaman utama project Simple Login Register CodeIgnter yang sedang kita bangun lho! Nah, sekarang buka teks editor kesayanganmu, lalu ketik kode berikut ini ya...

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?><!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>
         Beranda | Tutorial Simple Login Register CodeIgniter @ http://recodeku.blogspot.com
     </title>
 </head>
 <body>
     <h1>Selamat Datang di Situs kami.</h1>
     <p>  
     Silakan klik link
     <?php echo anchor('login','Masuk'); ?>
     untuk masuk ke dalam sistem atau
     <?php echo anchor('register','Daftar'); ?>
     untuk mendaftar.
     </p>      
 </body>
 </html>

Setelah itu, simpan (tekan ctrl+s) file beranda.php di dalam folder 'account' yang sudah kita buat tadi.

...

Selanjutnya, kita buat file v_register.php. Iya, kawan.. file ini digunakan sebagai halaman untuk pendaftaran atau registrasi akun. Sekarang ayo kita buka kembali teks editor kesayangan, lalu kita ketik sintaks kode di bawah ini ya.. ^^

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?><!DOCTYPE html>  
 <head>
   <meta charset="UTF-8">
   <title>
     Pendaftaran Akun | Tutorial Simple Login Register CodeIgniter @ http://recodeku.blogspot.com
   </title>
 </head>
 <body>
     <h2>Pendaftaran Akun</h2>
 
     <?php echo form_open('register');?>
     <p>Nama:</p>
     <p>
     <input type="text" name="name" value="<?php echo set_value('name'); ?>"/>
     </p>
     <p> <?php echo form_error('name'); ?> </p>
 
     <p>Username:</p>
     <p>
     <input type="text" name="username" value="<?php echo set_value('username'); ?>"/> 
     </p>
     <p> <?php echo form_error('username'); ?> </p>
 
     <p>Email:</p>
     <p>
     <input type="text" name="email" value="<?php echo set_value('email'); ?>"/>
     </p>
     <p> <?php echo form_error('email'); ?> </p>
 
     <p>Password:</p>
     <p>
     <input type="password" name="password" value="<?php echo set_value('password'); ?>"/>
     </p>
     <p> <?php echo form_error('password'); ?> </p>
 
     <p>Password Confirm:</p>
     <p>
     <input type="password" name="password_conf" value="<?php echo set_value('password_conf'); ?>"/>
     </p>
     <p> <?php echo form_error('password_conf'); ?> </p>
 
     <p>
     <input type="submit" name="btnSubmit" value="Daftar" />
     </p>
 
     <?php echo form_close();?>
 
     <p>
     Kembali ke beranda, Silakan klik <?php echo anchor(site_url().'/beranda','di sini..'); ?>
     </p>
 </body>
 </html>

Simpan file v_register.php di folder 'account'.

Dan selanjutnya, buat file views dengan nama v_success.php. File v_success.php ini digunakan untuk menampilkan notifikasi jika proses registrasi berhasil. Ok, kita buka lagi teks editor kesayangan dan lalu kita ketik sintaks di bawah ini ya!

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?><!DOCTYPE html>  
 <head>
   <meta charset="UTF-8">
   <title>
     Notifikasi | Tutorial Simple Login Register CodeIgniter @ http://recodeku.blogspot.com
   </title>
 </head>
 <body>
   <h3><?php echo $message; ?></h3>
    <p><?php echo anchor('beranda','Kembali ke beranda'); ?></p>
 </body>
 </html>

Simpan filenya di folder account.

Langkah berikutnya, kita akan membuat halaman untuk login dengan nama v_login.php. Sekarang ayo kita ketik kode berikut ini!

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?><!DOCTYPE html>  
 <head>
   <meta charset="UTF-8">
   <title>
     Halaman Login | Tutorial Simple Login Register CodeIgniter @ http://recodeku.blogspot.com
   </title>
 </head>
 <body>
      <h2>Halaman Login</h2>
      <?php
   // Cetak jika ada notifikasi
      if($this->session->flashdata('sukses')) {
           echo '<p class="warning" style="margin: 10px 20px;">'.$this->session->flashdata('sukses').'</p>';
      }
      ?>
 
      <?php echo form_open('login');?>
      <p>Username:</p>
      <p>
           <input type="text" name="username" value="<?php echo set_value('username'); ?>"/>
      </p>
      <p> <?php echo form_error('username'); ?> </p>
 
      <p>Password:</p>
      <p>
           <input type="password" name="password" value="<?php echo set_value('password'); ?>"/>
      </p>
      <p> <?php echo form_error('password'); ?> </p>
 
      <p>
           <input type="submit" name="btnSubmit" value="Login" />
      </p>
 
      <?php echo form_close();?>
 
      <p>
           Kembali ke beranda, Silakan klik <?php echo anchor(site_url().'/beranda','di sini..'); ?>
      </p>
 </body>
 </html>

Yep, simpan file v_login.php di folder account.

Berikutnya, kita buat file dengan nama v_dashboard.php. Iya, kamu benar. Ketik lagi sintaks kode di bawah ini. :D

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 ?><!DOCTYPE html>  
 <head>
   <meta charset="UTF-8">
   <title>
     Dashboard | Tutorial Simple Login Register CodeIgniter @ http://recodeku.blogspot.com
   </title>
 </head>
 <body>
      <h3>Dashboard</h3>
      <p>
           Selamat datang di halaman dashboard, <?php echo ucfirst($this->session->userdata('username')); ?>!
           Untuk logout dari sistem, silakan klik <?php echo anchor('login/logout','di sini...'); ?>
      </p>
 </body>
 </html>

Yep, simpan filenya. Tetap di folder yang sama, yaitu folder account.

...

Nah, jadi di folder account ada 5 file views, yaitu file beranda.php, v_dashboard.php, v_login.php, v_register.php dan v_success.php. Ya, kamu bisa lihat pada gambar di bawah ini:

Langkah berikutnya kita akan membuat file model dengan nama M_account.php. Di dalam file M_account.php terdapat sebuah class model dengan nama M_account yang memiliki satu method yaitu method daftar(). Fungsi method daftar() ini untuk menambah (insert) data akun baru ke dalam tabel users.

Sekarang kamu buka kembali teks editor kesayanganmu. Yuk kita ketik kode untuk file M_account.php!

  <?php
  defined('BASEPATH') OR exit('No direct script access allowed');
 
  class M_account extends CI_Model{

       function daftar($data)
       {
            $this->db->insert('users',$data);
       }
  }
 

Setelah kamu ketik kodenya, jangan lupa simpan file model M_account.php di direktori application/models/.

Setelah membuat file model, kita akan membuat sebuah library sederhana yang nantinya digunakan untuk login, proteksi halaman dan juga logout dengan nama file Simple_login.php. Di dalam library ini terdapat tiga method, yaitu:
    [a] login() :: Digunakan untuk cek ketersediaan username dan password pada table users, jika tersedia, set session berdasar data user dari table users.
    [b] cek_login() :: Digunakan untuk proteksi halaman dengan cara mengecek data session login, apabila tidak ada, maka pengguna akan dialihkan ke halaman login.
    [c] logout() :: Untuk keluar dari halaman dashboard. Hapus session, lalu set notifikasi dalam flashdata session kemudian alihkan ke halaman login.

Nah, sekarang yuk kita koding lagi. Buka teks editor kesayanganmu, lalu ketik kode di bawah ini.

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
 /*
  * Simple_login Class
  * Class ini digunakan untuk fitur login, proteksi halaman dan logout
  * @author  Gun Gun Priatna
  * @url    https://recodeku.blogspot.com
  */
 
 class Simple_login {
 
     // SET SUPER GLOBAL
     var $CI = NULL;
 
     /**
      * Class constructor
      *
      * @return   void
      */
     public function __construct() {
         $this->CI =& get_instance();
     }
 
     /*
     * cek username dan password pada table users, jika ada set session berdasar data user dari
     * table users.
     * @param string username dari input form
     * @param string password dari input form
     */
     public function login($username, $password) {
         
         //cek username dan password
         $query = $this->CI->db->get_where('users',array('username'=>$username,'password' => md5($password)));
 
         if($query->num_rows() == 1) {
             //ambil data user berdasar username
             $row  = $this->CI->db->query('SELECT id_user FROM users where username = "'.$username.'"');
             $admin     = $row->row();
             $id   = $admin->id_user;
 
             //set session user
             $this->CI->session->set_userdata('username', $username);
             $this->CI->session->set_userdata('id_login', uniqid(rand()));
             $this->CI->session->set_userdata('id', $id);
 
             //redirect ke halaman dashboard
             redirect(site_url('dashboard'));
         }else{
 
             //jika tidak ada, set notifikasi dalam flashdata.
             $this->CI->session->set_flashdata('sukses','Username atau password anda salah, silakan coba lagi.. ');
 
             //redirect ke halaman login
             redirect(site_url('login'));
         }
          return false;
      }
     
     /**
      * Cek session login, jika tidak ada, set notifikasi dalam flashdata, lalu dialihkan ke halaman
      * login
      */
     public function cek_login() {
 
         //cek session username
         if($this->CI->session->userdata('username') == '') {
 
             //set notifikasi
             $this->CI->session->set_flashdata('sukses','Anda belum login');
 
             //alihkan ke halaman login
             redirect(site_url('login'));
         }
     }
 
     /**
      * Hapus session, lalu set notifikasi kemudian di alihkan
      * ke halaman login
      */
     public function logout() {
         $this->CI->session->unset_userdata('username');
         $this->CI->session->unset_userdata('id_login');
         $this->CI->session->unset_userdata('id');
         $this->CI->session->set_flashdata('sukses','Anda berhasil logout');
         redirect(site_url('login'));
     }
 }

Simpan file library Simple_login.php di direktori application/libraries/.

...

Langkah berikutnya adalah membuat file controller. Ada 4 file controller yang akan kita buat yaitu Beranda.php, Register.php, Login.php dan Dashboard.php.

Nah, sekarang kita buat file controllers Beranda.php, berikut ini adalah kodenya:

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Beranda extends CI_Controller {
 
      public function index()
      {
           $this->load->view('account/beranda');
      }
 }
 

Simpan file  controller Beranda.php di direktori application/controllers/.

...

File controller berikutnya adalah Register.php, yuk kita ketik lagi kodenya. Ini sintaks kodenya:

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Register extends CI_Controller {
     
     function __construct(){
         parent::__construct();
         $this->load->library(array('form_validation'));
         $this->load->helper(array('url','form'));
         $this->load->model('m_account'); //call model
     }
 
     public function index() {
 
         $this->form_validation->set_rules('name', 'NAME','required');
         $this->form_validation->set_rules('username', 'USERNAME','required');
         $this->form_validation->set_rules('email','EMAIL','required|valid_email');
         $this->form_validation->set_rules('password','PASSWORD','required');
         $this->form_validation->set_rules('password_conf','PASSWORD','required|matches[password]');
         if($this->form_validation->run() == FALSE) {
             $this->load->view('account/v_register');
         }else{
 
             $data['nama']   =    $this->input->post('name');
             $data['username'] =    $this->input->post('username');
             $data['email']  =    $this->input->post('email');
             $data['password'] =    md5($this->input->post('password'));
 
             $this->m_account->daftar($data);
             
             $pesan['message'] =    "Pendaftaran berhasil";
             
             $this->load->view('account/v_success',$pesan);
         }
     }
 }

Sama, file Register.php ini kita simpan di direktori application/controllers/ juga.

...

Sekarang kita buat file controller yang ketiga, Login.php, berikut ini adalah sintaks kodenya:

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Login extends CI_Controller {
 
     public function index() {
 
         // Fungsi Login
         $valid = $this->form_validation;
         $username = $this->input->post('username');
         $password = $this->input->post('password');
         $valid->set_rules('username','Username','required');
         $valid->set_rules('password','Password','required');
 
         if($valid->run()) {
             $this->simple_login->login($username,$password, base_url('dashboard'), base_url('login'));
         }
         // End fungsi login
         $this->load->view('account/v_login');
     }
 
     public function logout(){
         $this->simple_login->logout();
     }        
 }

Simpan di direktori application/controllers/ dengan nama file Login.php.

...

And the last one is, Dashboard.php. type this syntax ya! :D

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Dashboard extends CI_Controller {
     function __construct(){
         parent::__construct();
         $this->simple_login->cek_login();
     }
 
     //Load Halaman dashboard
     public function index() {
         $this->load->view('account/v_dashboard');
     }
 }

Simpan di direktori yang sama yaitu application/controllers/ dengan nama Dashboard.php.

...

Jadi, kita punya empat file controller, yaitu Beranda.php, Dashboard.php, Login.php dan Register.php.

[5] Uji Coba

Yes, in the next step we will try our program. First, open your browser. Lalu kita ketik alamat berikut di browser:

Localhost/ci3/

Maka bakalan muncul tampilan kaya di bawah. :D

Karena kita belum punya akun untuk login, sekarang kita harus daftar terlebih dahulu.. Sekarang kita coba klik link 'daftar' untuk mendaftar.

Coba kamu isi formnya. Saya juga coba isi. :D

Lalu klik tombol daftar, maka akan muncul pemberitahuan pendaftaran sudah berhasil.  yeay! :D

Nah selanjutnya, kita klik link Kembali ke beranda. Lalu kita coba login dengan mengklik link masuk.

Coba kamu isi username dan password yang kamu isi di form login. :D

Lalu klik tombol Login.

Tadaaa!!! Kita berhasil login menggunakan akun kita. :D

Untuk logout, klik link 'di sini'. Maka kita akan kembali ke halaman login. :D

***

Gimana, mudah kan bikinnya?
Oh iya kamu juga bisa mendownload full source codenya di sini.

Semangat terus ya! Selamat belajar.. Semoga menyenangkan.. :D


***
[Update 22 October 2016]
Requirement for updated tutorial :
[a] PHP Version 5.5.35 (XAMPP 5.5.35) and PHP 7
[b] MariaDB (XAMPP 5.5.35)
[c] CodeIgniter versi 3.1.0

Requirement for previous tutorial:
[a] XAMPP version 1.7.7 (PHP 5.3.8) 
[b] CodeIgniter 3.0.1 
[c] MySQL 5.5.16


***
Referensi: 
Web Official CodeIgniter @ https://codeigniter.com
Documentasi CodeIgniter @ https://codeigniter.com/user_guide/
Session Library CodeIgniter @ https://codeigniter.com/user_guide/libraries/sessions.html
Membuat Library @ https://codeigniter.com/user_guide/general/creating_libraries.html

Membuat Simple Login dan Register Menggunakan CodeIgniter 2016-03-01T08:55:00-08:00 Rating: 4.5 Diposkan Oleh: Kabar Viral