Tutorial Login Dan Logout Menggunakan Framework Codeigniter

Tutorial Login Dan Logout Menggunakan Framework Codeigniter. Hei Netter, masih sehat, Kesempatak Kali ini saya akan sedikit berbagi bagaimana membuat Login dengan Logout menggunakan framework codeigniter, nah untuk itu ikuti cara berikut step by step.

• Membuat Database terlebih dahulu (Terserah Anda)
• Membuat Tabel user Seperti gambar Berikut.

• Masuk Folder Config dan setting beberapa File, antara lain routes.php, autoload.php, database.php
• Setting File autoload.php Seperti ini

$autoload['libraries'] = array('database','session'); $autoload['helper'] = array('url');

• Setting File database.php Seperti berikut ini.

$db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'SESUAI DATABASE ANDA'; $db['default']['dbdriver'] = 'mysql'; $db['default']['dbprefix'] = ''; $db['default']['pconnect'] = TRUE; $db['default']['db_debug'] = TRUE; $db['default']['cache_on'] = FALSE; $db['default']['cachedir'] = ''; $db['default']['char_set'] = 'utf8'; $db['default']['dbcollat'] = 'utf8_general_ci'; $db['default']['swap_pre'] = ''; $db['default']['autoinit'] = TRUE; $db['default']['stricton'] = FALSE;

• Setting File Routes.php Seperti dibawah ini

$route['default_controller'] = "login"; $route['404_override'] = '';

• Setelah Setting selesai, sekarang kita menuju folder Controller, dimana dalam folder ini kita akan membuat Controller dari file login yang kita buat, file yang kita buat dalam folder ini adalah file , login.php, verifylogin.php, home.php
• File Pertama Yaitu file login.php seperti di bawah ini

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Login extends CI_Controller { function __construct() { parent::__construct(); } function index() { $this->load->helper('form'); $this->load->view('login_view'); } }

• File Controller yang kedua adalah verifylogin.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class VerifyLogin extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('user','',TRUE); } function index() { //This method will have the credentials validation $this->load->library('form_validation'); $this->form_validation->set_rules('email', 'Email', 'trim|required|xss_clean'); $this->form_validation->set_rules('pass', 'Password', 'trim|required|xss_clean|callback_check_database'); if($this->form_validation->run() == FALSE) { //Field validation failed. User redirected to login page $this->load->view('login_view'); } else { //Go to private area redirect('home', 'refresh'); } } function check_database($password) { //Field validation succeeded. Validate against database $email = $this->input->post('email'); //query the database $result = $this->user->login($email, $password); if($result) { $sess_array = array(); foreach($result as $row) { $sess_array = array( 'id' => $row->id, 'email' => $row->user ); $this->session->set_userdata('logged_in', $sess_array); } return TRUE; } else { $this->form_validation->set_message('check_database', 'Invalid username or password'); return false; } } }

• File Controller ketiga adalah home.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); session_start(); //we need to call PHP's session object to access it through CI class Home extends CI_Controller { function __construct() { parent::__construct(); } function index() { if($this->session->userdata('logged_in')) { $session_data = $this->session->userdata('logged_in'); $data['email'] = $session_data['email']; $this->load->view('home_view', $data); } else { //If no session, redirect to login page redirect('login', 'refresh'); } } function logout() { $this->session->unset_userdata('logged_in'); session_destroy(); redirect('home', 'refresh'); } }

• Nah Karena File file dari Controller sudah kelar sekarang kita akan mencoba membuat file modelnya, pidah ke folder model dan buat file user.php

<?php Class User extends CI_Model { function login($email, $password) { $this -> db -> select('id, email, pass'); $this -> db -> from('user'); $this -> db -> where('email = ' . "'" . $email . "'"); $this -> db -> where('pass = ' . "'" . MD5($password). "'"); $this -> db -> limit(1); $query = $this -> db -> get(); if($query -> num_rows() == 1) { return $query->result(); } else { return false; } } } ?>

• Setelah Controller dan model kelar, selanjutnya adalah file view nya untuk menampilkan hasil daripada proses tersebut. Masuk kedalam folder view, dan di sini kita membuat dua file yaitu login_view.php dan home_view.php
• Login_view.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Halaman Login</title> <link href="<?php echo base_url(); ?>asset/css/style.css" rel="stylesheet" type="text/css" /> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/plugins/jquery-1.7.min.js'></script> <script type='text/javascript' src='<?php echo base_url(); ?>js/plugins/jquery-ui-1.8.16.custom.min.js'></script> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body class="login"> <div class="loginbox radius3"> <div class="loginboxinner radius3"> <div class="loginheader"> <h1 class="bebas"> Halaman Login</h1> <div class="logo"> <img src="images/starlight_admin_template_logo.png" alt="" /></div> </div> <!--loginheader--> <div class="loginform"> <div class="loginerror"> </div> <?php echo form_open('verifylogin'); ?> <p> <label for="email" class="bebas">Email</label> <input type="text" id="email" name="email" class="radius2" /> </p> <p> <label for="password" class="bebas">Password</label> <input type="password" id="pass" name="pass" class="radius2" /> </p> <p> <button class="radius3 bebas" value="Login" >Sign in</button> </p> <p> <?php echo validation_errors(); ?> </p> </form> </div> <!--loginform--> </div> <!--loginboxinner--> </div> <!--loginbox--> </body> </html>

• home_view.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dashboard |</title> <link href="<?php echo base_url(); ?>asset/css/style.css" rel="stylesheet" type="text/css" /> <!--[if IE 9]> <link rel="stylesheet" media="screen" href="css/ie9.css"/> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" media="screen" href="css/ie8.css"/> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" media="screen" href="css/ie7.css"/> <![endif]--> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/plugins/jquery-1.7.min.js'></script> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/plugins/jquery.flot.min.js'></script> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/plugins/jquery.flot.resize.min.js'></script> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/plugins/jquery-ui-1.8.16.custom.min.js'></script> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/custom/general.js'></script> <script type='text/javascript' src='<?php echo base_url(); ?>asset/js/custom/dashboard.js'></script> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body class="loggedin"> <!-- START OF HEADER --> <div class="header radius3"> <div class="headerinner"> <a href="#"><img src="<?php echo base_url(); ?>asset/images/starlight_admin_template_logo_small.png" alt=""/> </a> <div class="headright"> <div class="headercolumn">  </div> <div id="searchPanel" class="headercolumn"> <div class="searchbox"> <form action="#" method="post"> <input type="text" id="keyword" name="keyword" class="radius2" value="Search here" /> </form> </div> <!--searchbox--> </div> <!--headercolumn--> <div id="notiPanel" class="headercolumn"> <div class="notiwrapper"> <a href="ajax/messages.html" class="notialert radius2">5</a> <div class="notibox"> <ul class="tabmenu"> <li class="current"><a href="ajax/messages.html" class="msg">Messages (2)</a></li> <li><a href="ajax/activities.html" class="act">Recent Activity (3)</a></li> </ul> <br clear="all" /> <div class="loader"> <img src="<?php echo base_url(); ?>asset/images/loaders/loader3.gif" alt="Loading Icon"/> Loading...</div> <div class="noticontent"> </div> <!--noticontent--> </div> <!--notibox--> </div> <!--notiwrapper--> </div> <!--headercolumn--> <div id="userPanel" class="headercolumn"> <a href="#" class="userinfo radius2"> <img src="<?php echo base_url(); ?>asset/images/avatar.png" alt="" class="radius2"/> <span><strong> <?php echo $email ; ?> Justin Meller</strong></span> </a> <div class="userdrop"> <ul> <li><a href="#">Profile</a></li> <li><a href="#">Account Settings</a></li> <li><a href="home/logout">Logout</a></li> </ul> </div> <!--userdrop--> </div> <!--headercolumn--> </div> <!--headright--> </div> <!--headerinner--> </div> <!--header--> <!-- END OF HEADER --> <!-- START OF MAIN CONTENT --> <div class="mainwrapper"> <div class="mainwrapperinner"> <div class="mainleft"> <div class="mainleftinner"> <div class="leftmenu"> <ul> <li class="current"><a href="dashboard.html" class="dashboard"><span>Dashboard</span></a></li> <li><a href="widgets.html" class="widgets"><span>Widgets</span></a></li> <li><a href="tables.html" class="tables"><span>Tables</span></a></li> <li><a href="elements.html" class="elements"><span>Elements</span></a></li> <li><a href="charts.html" class="charts"><span>Graphs & Charts</span></a></li> <li><a href="media.html" class="media"><span>Media</span></a></li> <li><a href="form.html" class="editor menudrop"><span>Forms</span></a> <ul> <li><a href="form.html"><span>Form Styling</span></a></li> <li><a href="editor.html"><span>WYSIWYG Editor</span></a></li> <li><a href="wizard.html"><span>Wizard</span></a></li> </ul> </li> <li><a href="grid.html" class="grid"><span>Grid</span></a></li> <li><a href="calendar.html" class="calendar"><span>Calendar</span></a></li> <li><a href="buttons.html" class="buttons"><span>Buttons & Icons</span></a></li> <li><a href="chat.html" class="chat"><span>Chat Support</span></a></li> <li><a href="404.html" class="error"><span>Error Pages</span></a></li> </ul> </div> <!--leftmenu--> <div id="togglemenuleft"> <a></a></div> </div> <!--mainleftinner--> </div> <!--mainleft--> <div class="maincontent"> <div class="maincontentinner"> <ul class="maintabmenu"> <li class="current"><a href="dashboard.html">Dashboard</a></li> </ul> <!--maintabmenu--> <div class="content"> <ul class="widgetlist"> <li><a href="calendar.html" class="events">Latest Events</a></li> <li><a href="editor.html" class="message">New Message</a></li> <li><a href="dashboard.html" class="upload">Upload Image</a></li> <li><a href="calendar.html" class="events">Statistics</a></li> <li><a href="editor.html" class="message">New Message</a></li> </ul> <br clear="all" /><br /> <div class="contenttitle"> <h2 class="chart"> <span>Simple Chart</span></h2> </div> <!--contenttitle--> <br /> <div id="chartplace2" style="height:300px;"> </div> <br /><br /> <div class="one_half"> <div class="widgetbox"> <div class="title"> <h2 class="tabbed"> <span>Latest Announcement</span></h2> </div> <div class="widgetcontent announcement"> <p> <span class="radius2">Jan 19, 2012</span> <br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p> <p> <span class="radius2">Jan 18, 2012</span> <br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p> </div> <!--widgetcontent--> </div> <!--widgetbox--> </div> <!--one_half--> <div class="one_half last"> <div class="widgetbox"> <div class="title"> <h2 class="tabbed"> <span>Statements</span></h2> </div> <div class="widgetcontent padding0 statement"> <table cellpadding="0" cellspacing="0" border="0" class="stdtable"> <colgroup> <col class="con0" /> <col class="con1" /> <col class="con0" /> </colgroup> <thead> <tr> <th class="head0">Date</th> <th class="head1">Sales</th> <th class="head0">Earnings</th> </tr> </thead> <tbody> <tr> <td>01/12/12</td> <td>10</td> <td>$250.12</td> </tr> <tr> <td>01/11/12</td> <td>5</td> <td>$100.43</td> </tr> <tr> <td>01/10/12</td> <td>22</td> <td>$1010.00</td> </tr> <tr> <td>01/09/12</td> <td>21</td> <td>$1000.23</td> </tr> <tr> <td>01/08/12</td> <td>14</td> <td>$500.22</td> </tr> </tbody> </table> </div> <!--widgetcontent--> </div> <!--widgetbox--> </div> <!--one_half--> <br clear="all" /><br /> <div class="one_half"> <div class="contenttitle"> <h2 class="chart"> <span>Icon Buttons With Text (80)</span></h2> </div> <!--contenttitle--> <br /> <ul class="buttonlist"> <li><a href="#" class="btn btn_search radius50"><span>Search</span></a></li> <li><a href="#" class="btn btn_trash"><span>Trash</span></a></li> <li><a href="#" class="btn btn_link"><span>Link</span></a></li> </ul> </div> <!--one_half--> <div class="one_half last"> <div class="contenttitle"> <h2 class="chart"> <span>Icon Buttons Without Text (80)</span></h2> </div> <!--contenttitle--> <br /> <ul class="buttonlist"> <li><a href="#" class="btn btn3 btn_search"></a></li> <li><a href="#" class="btn btn3 btn_trash"></a></li> <li><a href="#" class="btn btn3 btn_flag"></a></li> <li><a href="#" class="btn btn3 btn_home"></a></li> <li><a href="#" class="btn btn3 btn_link"></a></li> </ul> </div> <!--one_half--> <br clear="all" /><br /> <div class="one_half"> <div class="contenttitle"> <h2 class="chart"> <span>Rounded Buttons With Text (80)</span></h2> </div> <!--contenttitle--> <br /> <ul class="buttonlist"> <li><a href="#" class="btn btn2 btn_search"><span>Search</span></a></li> <li><a href="#" class="btn btn2 btn_trash"><span>Trash</span></a></li> <li><a href="#" class="btn btn2 btn_flag"><span>Flag</span></a></li> </ul> </div> <!--one_half--> <div class="one_half last"> <div class="contenttitle"> <h2 class="chart"> <span>Rounded Buttons Without Text (80)</span></h2> </div> <!--contenttitle--> <br /> <ul class="buttonlist"> <li><a href="#" class="btn btn4 btn_search"></a></li> <li><a href="#" class="btn btn4 btn_trash"></a></li> <li><a href="#" class="btn btn4 btn_flag"></a></li> <li><a href="#" class="btn btn4 btn_home"></a></li> <li><a href="#" class="btn btn4 btn_link"></a></li> </ul> </div> <!--one_half--> <br clear="all" /><br /> <div class="contenttitle"> <h2 class="widgets"> <span>Notification Messages</span></h2> </div> <!--contenttitle--> <br /> <div class="notification msginfo"> <a class="close"></a> <p> This is an information message.</p> </div> <!-- notification msginfo --> <div class="notification msgsuccess"> <a class="close"></a> <p> This is a success message.</p> </div> <!-- notification msgsuccess --> <div class="notification msgalert"> <a class="close"></a> <p> This is an alert message.</p> </div> <!-- notification msgalert --> <div class="notification msgerror"> <a class="close"></a> <p> This is an error message.</p> </div> <!-- notification msgerror --> <br /> <div class="contenttitle radiusbottom0"> <h2 class="table"> <span>Table with Quick Edit/View</span></h2> </div> <!--contenttitle--> <table cellpadding="0" cellspacing="0" border="0" class="stdtable dashtable"> <colgroup> <col class="con0" /> <col class="con1" /> <col class="con0" /> <col class="con1" /> <col class="con0" /> <col class="con1" /> </colgroup> <thead> <tr> <th class="head0">Rendering engine</th> <th class="head1">Browser</th> <th class="head0">Platform(s)</th> <th class="head1">Engine version</th> <th class="head0">CSS grade</th> <th class="head1"> </th> </tr> </thead> <tfoot> <tr> <th class="head0">Rendering engine</th> <th class="head1">Browser</th> <th class="head0">Platform(s)</th> <th class="head1">Engine version</th> <th class="head0">CSS grade</th> <th class="head1"> </th> </tr> </tfoot> <tbody> <tr> <td class="con0">Trident</td> <td class="con1">Internet Explorer 4.0</td> <td class="con0">Win 95+</td> <td class="center">4</td> <td class="center">X</td> <td class="center"><a href="ajax/tabledata.html" class="toggle">Quick View</a></td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> <td class="center"><a href="ajax/tabledata.html" class="toggle">Quick View</a></td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> <td class="center"><a href="ajax/tabledata.html" class="toggle">Quick View</a></td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> <td class="center"><a href="ajax/tabledata.html" class="toggle">Quick View</a></td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> <td class="center">A</td> <td class="center"><a href="ajax/tabledata.html" class="toggle">Quick View</a></td> </tr> </tbody> </table> <br /><br /> </div> <!--content--> </div> <!--maincontentinner--> <div class="footer"> <p> Starlight Admin Template © 2012. All Rights Reserved. Designed by: <a href="#">ThemePixels.com</a></p> </div> <!--footer--> </div> <!--maincontent--> <div class="mainright"> <div class="mainrightinner"> <div class="widgetbox"> <div class="title"> <h2 class="chart"> <span>Visitors Overview</span></h2> </div> <div class="chartbox widgetcontent"> <div id="chartplace" class="chartplace"> </div> <div class="one_half"> <div class="analytics analytics2"> <small>Visitors For Today</small> <h1> 23 321</h1> <small>18,222 unique</small> </div> <!--visitoday--> </div> <!--one_half--> <div class="one_half last"> <div class="one_half"> <div class="analytics"> <small>bounce</small> <h3> 23.2%</h3> </div> <!--analytics--> </div> <!--one_half--> <div class="one_half last"> <div class="analytics textright"> <small class="block">visitors</small> <h3> 56.8%</h3> </div> <!--analytics--> </div> <!--one_half last--> <br clear="all" /> <div class="analytics average margintop10"> Average <h3> 87.44%</h3> </div> <!--analytics--> </div> <!--one_half--> <br clear="all" /> </div> <!--widgetcontent--> </div> <!--widgetbox--> <div class="widgetbox"> <div class="title"> <h2 class="calendar"> <span>Event Calendar</span></h2> </div> <div class="widgetcontent padding0"> <div id="datepicker"> </div> </div> <!--widgetcontent--> </div> <!--widgetbox--> <div class="widgetbox"> <div class="title"> <h2 class="tabbed"> <span>Tabbed Widget</span></h2> </div> <div class="widgetcontent padding0"> <div id="tabs"> <ul> <li><a href="#tabs-1">Products</a></li> <li><a href="#tabs-2">Posts</a></li> <li><a href="#tabs-3">Media</a></li> </ul> <div id="tabs-1"> <ul class="listthumb"> <li><img src="images/thumb/small/thumb1.png" alt="" /> <a href="#">Proin elit arcu, rutrum commodo</a></li> <li><img src="images/thumb/small/thumb2.png" alt="" /> <a href="#">Aenean tempor ullamcorper leo</a></li> <li><img src="images/thumb/small/thumb3.png" alt="" /> <a href="#">Vehicula tempus, commodo a, risus</a></li> <li><img src="images/thumb/small/thumb4.png" alt="" /> <a href="#">Donec sollicitudin mi sit amet mauris</a></li> <li><img src="images/thumb/small/thumb5.png" alt="" /> <a href="#">Curabitur nec arcu</a></li> </ul> </div> <div id="tabs-2"> <ul> <li><a href="#">Proin elit arcu, rutrum commodo</a></li> <li><a href="#">Aenean tempor ullamcorper leo</a></li> <li><a href="#">Vehicula tempus, commodo a, risus</a></li> <li><a href="#">Donec sollicitudin mi sit amet mauris</a></li> <li><a href="#">Curabitur nec arcu</a></li> </ul> </div> <div id="tabs-3"> <ul class="thumb"> <li><a href="#"><img src="images/thumb/xsmall/thumb1.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb2.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb3.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb4.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb5.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb6.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb7.png" alt="" /></a></li> <li><a href="#"><img src="images/thumb/xsmall/thumb8.png" alt="" /></a></li> </ul> </div> </div> <!--#tabs--> </div> <!--widgetcontent--> </div> <!--widgetbox--> </div> <!--mainrightinner--> </div> <!--mainright--> </div> <!--mainwrapperinner--> </div> <!--mainwrapper--> <!-- END OF MAIN CONTENT --> </body> </html>

• Semua file sudah selesai dan hasilnya sebagai berikut, tapi mohon maaf untuk templatesnya belum bisa saya share disini, untuk lain kali Insya Allah.
• Tampilan Halaman Login.

• Tampilan Halaman Home/Dashboard

Sekian Tutorial Login Dan Logout Menggunakan Framework Codeigniter,semoga bermanfaat, jika ada yang mau menambahkan silahkan berkomentar di kolom komentar dibawah.