Studi Kasus : Membuat sistem login (+logout) dengan codeigniter

Kebutuhan : Webserver Package, already installed. CodeIgniter bundle.

Login (dan juga Logout) hampir selalu ada dalam semua sistem / aplikasi yang didevelop dengan bahasa pemrograman tertentu, dalam kasus kali ini adalah PHP dengan framework CodeIgniter. Konsep dasar dari Login adalah mencocokkan username dan password yang dimasukkan oleh user dengan daftar username+password yang tersimpan dalam database. Dengan alasan keamanan, biasanya password disimpan dalam database dengan menggunakan fungsi MD5. MD5 adalah salah satu fungsi hash (satu arah) yang cukup terkenal dalam kriptografi, biasa digunakan untuk autentifikasi user.

Sedangkan Logout memiliki konsep dasar yang cukup sederhana, yaitu dengan men-destroy session dari user yang login tersebut.

Anyway… just let trying it :)

Step 1 : Konfigurasi CI (selalu dimulai dengan ini)

  1. Buka file config.php yang berada dalam folder system-application-config-config.php
  2. Ubah base url, sesuaikan dengan lokasi dimana folder CI-mu berada (tempat ekstrak-an tadi). Contoh : Folder CI anda berada dalam folder www/cimaka ubah baris $config['base_url']="http://example.com/";dengan
    $config['base_url'] = "http://localhost/ci/";
  3. Setting database. Buka file database.php yang berada dalam folder yang sama dengan config.php. Ubah hostname, username, password, dan nama database. Sesuaikan dengan pengaturan mysql anda. Contoh :
    $db['default']['hostname'] = "localhost";
    $db['default']['username'] = "root";
    $db['default']['password'] = "";
    $db['default']['database'] = "db_tutorial";

Step 2 : Siapkan Database

  1. Buat database dengan nama db_tutorial (via phpmyadmin)
  2. Siapkan tabel dengan nama tb_user (untuk strukturnya, lihat gambar dibawah ini)
  3. Insertkan beberapa sample data untuk user yang akan login, sebagai contoh insertkan data seperti tabel dibawah ini. INGAT : ketika memasukkan password, pilih fungsi MD5 (lihat gambar dilingkari merah)
  4. Maka hasil dari insert sample data (dengan password dikenai fungsi MD5) adalah seperti gambar dibawah,
  5. Done with database !

Step 3 : Membuat Form Login (view)

  1. Ketikkan script berikut,
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Login with CI</title>
    <center>
    <h2> <b> Login with CI </b> <h2>
    <form action="<?=base_url();?>login/proseslogin" method="post">
    <table border="0" align="center">
    <tr>
    <td> Username</td>
    <td> <input name="username" type="text"> </td>
    </tr>
    <tr>
    <td> Password</td>
    <td> <input name="password" type="password"> </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> <input name="submit" type="submit" value="login"> </td>
    </tr>
    </table>
    </form>
    <?php if(isset($error)) echo "<b><span style='color:red;'>$error</span></b>";
    if(isset($logout)) echo "<b><span style='color:red;'>$logout</span></b>"; ?>
    </center>
    </body></html>
  2. Simpan dengan nama login_view.php, dalam folder system-application-views

Step 4 : Membuat Controller Pemrosesan Login + Logout

  1. Ketikkan script berikut,
    <?php
    class Login extends Controller {
    //constructor
    function login() {
    parent::Controller();
    $this->load->helper('url');	
    $this->load->helper('form');
    $this->load->library('form_validation');
    $this->load->library('session');				
    }
    //index for showing the login form
    function index() {
    $this->load->view('login_view');
    }
    //this function will do the login process 
    function proseslogin() {
    $username = $this->input->post('username'); //read the username that filled by the user
    $password = $this->input->post('password'); //read the password that filled by the user
    $passwordx = md5($password); //this is for change $password into MD5 form
    //the query is to matching the username+password user with username+password from database
    $q = $this->db->query("SELECT * FROM tb_user WHERE username='$username' AND userpass='$passwordx'");
    if ($q->num_rows() == 1) { 
    // if the query is TRUE, then save the username into session and load the welcome view
    $nama = $q->row()->username;
    $this->session->set_userdata('username',$nama);
    $data['welcome'] = "Welcome $nama";
    $this->load->view('welcome_view', $data);
    }
    else { 
    // query error
    $data['error']='!! Wrong Username or Password !!';
    $this->load->view('login_view', $data);
    }
    }
    //to do logout process
    function logout() {	
    $this->session->sess_destroy();
    $data['logout'] = 'You have been logged out.';		
    $this->load->view('login_view', $data);
    }
    }
    ?>
    
  2. Simpan dengan nama login.php dalam folder system-application-controllers
  3. Untuk keterangan dari script diatas, bisa dilihat dari script comment.

Step 5 : Membuat tampilan sukses login (view)

  1. Ketikkan script berikut,
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Login with CI</title>
    <center>
    <?php if(isset($welcome)) echo "<h2><span style='color:red;'>$welcome</span></h2>";
    echo "<br/>";
    echo anchor("login/logout", 'Logout') ?>
    </center>
    </body></html>
    
  2. Simpan dengan nama welcome_view.php dalam folder system-application-views

Step 6 : Testing Code

  1. Buka browser, pergi ke http://localhost/namaFolderCIkamu/login
  2. Akan muncul tampilan seperti dibawah,
  3. Masukkan username+password yang benar, yaitu yang ada didatabase (username : june, password : june)
  4. Maka anda akan diarahkan menuju halaman sukses login,yaitu halaman welcome seperti dibawah,
  5. Klik logout untuk keluar dari halaman welcome.
  6. Sekarang masukkan username+password salah (misal username : admin, password : admin)
  7. Maka akan ditampilkan warning seperti gambar dibawah.

Okay, Happy Coding :)
Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

Pencarian ke sini:


Related Articles:

Artikel terkait:

: PHP

About the author

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she lo

25 Comments

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: