4 Simple MD5 Login System (+Logout) with CodeIgniter ~ Tutorial

Case Study : Create Simple MD5 Login System (+Logout) with CodeIgniter
Requirements: Webserver Package, already installed. CodeIgniter bundle.
Login (and Logout) is almost exist in any application that developed with certain programming language, in this case is PHP with framework CodeIgniter. The very basic concept of login is matching the username and password from user with the ones that are in the databases. With a security reason, usually the password is encoded using MD5. MD5 is one of hash function (one-way) that quite popular in cryptography, usually for user autentification.
On the other hand, logout has the simplest basic concept, that is with destroy the user’s session.
Anyway… just let trying it
Step 1 : CI Configuration (always start with it)

Open the config.php file located in the system-application-config
Change base_url, adjust according where your ci folder are. FOr example: your ci folder located in www/ci folder
so change the line $config['base_url']="http://example.com/";
with
$config['base_url']="http://localhost/ci";
Setting the database. Open file database.php located in the same folder as config.php. Change hostname, username, password, and the database name according to your mysql setting. For example :
$db['default']['hostname'] = "localhost"; $db['default']['username'] = "root"; $db['default']['password'] = ""; $db['default']['database'] = "db_tutorial";

Step 2 : Prepare the Database

Make a database named db_tutorial.
Prepare a table named tb_book (for table’s structure, see picture below)
Insert some sample data, for example insert some sample data just like the picture below (REMEMBER : when you inserting some sample data, use MD5 function in to password field —> see the red circle on the picture)
This is the result of sample data (with MD5 password)
Ok, we’re done with database !

Step 3 : Create the Login Form (view)

Type the following script,

<!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>

Save with the name login_view.php in the system-application-views folder

Step 4 : Create the Processing Controller for Login+Logout

Type the following script,

<?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);
}
}
?>

Save with the name login.php in the system-application-controllers folder
Penjelasan :See at the script’s comment.

Step 4 : Create the Success View

Type the following script,

<!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>

Save with the name welcome_view.php in the system-application-views folder

Step 7 : Testing the Code

Go to http://localhost/namaFolderCIKamu/login
You will see something like this,
Insert the correct username+password, that is the one in the database (username : june, password : june)
You will be redirected into success login page, that is welcome page like in the picture below,