Introduction

Here we will see a post on CodeIgniter login logout example. So here I will show you how to use CodeIgniter’s session library to store data into session or fetch data from session. We will also see how to allow a user access private area of the application once user logs into the system. We will use CodeIgniter’s form validation library to validate the input fields.

Prerequisites

Apache HTTP Server 2.4, PHP 7.3.5, CodeIgniter 3.1.10, MySQL Server 5.6

Please go through the following steps to implement CodeIgniter login logout example.

Creating Project Directory

It’s assumed that you have setup Apache 2.4, PHP 7.3.5 and Codeigniter 3.1.10 in Windows system.

Now we will create a project root directory called codeIgniter-3.1.10-login-logout under the Apache server’s htdocs folder.

Now move all the directories and files from CodeIgniter 3.1.10 framework into codeIgniter-3.1.10-login-logout directory.

We may not mention the project root directory in subsequent sections and we will assume that we are talking with respect to the project root directory.

Autoload Configuration

We need some configurations, such as, auto-loading for helpers to avoid loading every time we need to use.

Modify application/config/autoload.php file for auto-loading libraries and helper functions.

This one time auto-loading gives flexibility to uniformly use the helpers and libraries anywhere throughout the application without loading repeatedly.

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

Creating Language File

If you want to display information on website in different languages, then you need to create different language files for your application. Therefore, we need to create language specific files from where the information will be loaded for a particular language when chosen by end users.

Here I will create only English language file to store few messages. The language file must end with _lang.php, though while loading the language file we will not use this suffix.

Create a file called msg_lang.php under application/language/english folder.

<?php

$lang['incorrect_credentials'] = 'Incorrect username or password';
$lang['login_success'] = 'You have been successfully logged in';
$lang['logout_success'] = 'You have been successfully logged out';

/* End of file msg_lang.php */
/* Location: ./application/language/english/msg_lang.php */

Creating MySQL Table

We want to store user information into MySQL database, so we need to create a table for this.

CREATE TABLE login (
    id INT(10) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL,
    last_login DATETIME DEFAULT CURRENT_TIMESTAMP
);

Inserting Data into Table

Insert a row into the above table so that we can test our application once implementation is complete.

Ideally password should not be kept as a plain text, you should consider always security for this and use some encryption mechanism.

insert into login(username,password) values ('user','user');

Creating Model Class

We perform database operations to store, fetch or update data into database.

Create a file authmodel.php under applications/models folder to create the required model class.

In the below model class we fetch the user for a given username and password from the login table. If no user found then we simply return NULL.

<?php

defined('BASEPATH') OR exit('No direct script access allowed');
	
/**
* Description of AuthModel
*
* @author https://www.roytuts.com
*/

class AuthModel extends CI_Model {
	
	private $login = 'login';

	function get_user($username, $password) {
		$this->db->where('username', $username);
		$this->db->where('password', $password);
		
		$result = $this->db->get($this->login)->result();
		
		if($result) {
			return $result;
		}
		
		return NULL;
	}
	
}

/* End of file authmodel.php */
/* Location: ./application/models/authmodel.php */

Creating Library

We will create a library to provide common functions related to user’s authentication.

Create a PHP file authlibrary.php under application/libraries folder.

In the below library class we have defined two constants – STATUS_ACTIVATED and STATUS_NOT_ACTIVATED. These two constants will indicate whether current user is logged in or not.

We have defined few functions, such as, login(), logout(), is_logged_in(), get_user_name(), get_error_msg() into this library to make our life easier.

We have retrieved the CodeIgniter instance, we have loaded language file and model class inside the constructor. You may also auto-load the language file and model class.

<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

define('STATUS_ACTIVATED', '1');
define('STATUS_NOT_ACTIVATED', '0');

/**
 * Description of AuthLibrary
 *
 * @author https://www.roytuts.com
 */
class AuthLibrary {

    private $ci;
    private $msg;

    function __construct() {
        $this->ci = & get_instance();
        $this->ci->lang->load('msg');
		$this->ci->load->model('authmodel');
    }

    /*
     * get message
     */

    private function get_msg($msg) {
        $this->msg .= $msg . nl2br("\n");
    }

    /*
     * display message
     */

    function display_msg() {
        return $this->msg;
    }

    /**
     * Login user on the site. Return TRUE if login is successful
     * (user exists and activated, password is correct), otherwise FALSE.
     *
     * @param	string	(username)
     * @param	string  (password)
     */
    function login($username, $password) {
        if ((strlen($username) > 0) AND (strlen($password) > 0)) {
			$user = $this->ci->authmodel->get_user($username, $password);
            if ($user !== NULL) {
				$this->ci->session->set_userdata(array(
					'user_name' => $user->username,
					'last_login' => $user->last_login,
					'user_status' => STATUS_ACTIVATED
				));
                return TRUE;
            } else {               // fail - wrong creadentials
                $this->get_msg($this->ci->lang->line('incorrect_credentials'));
            }
        }
        return FALSE;
    }

    /**
     * Logout user from the site
     *
     * @return	void
     */
    function logout() {
        $this->ci->session->set_userdata(array('user_name' => '', 'last_login' => '', 'user_status' => ''));
        $this->ci->session->sess_destroy();
    }

    /**
     * Check if user logged in. Also test if user is activated or not.
     *
     * @param	bool
     * @return	bool
     */
    function is_logged_in($activated = TRUE) {
        return $this->ci->session->userdata('user_status') === ($activated ? STATUS_ACTIVATED : STATUS_NOT_ACTIVATED);
    }

    /**
     * Get user_name
     *
     * @return	string
     */
    function get_username() {
        if ($this->ci->session->userdata('user_name')) {
            return $this->ci->session->userdata('user_name');
        }
        return '';
    }

    /**
     * Get error message.
     * Can be invoked after any failed operation such as login or register.
     *
     * @return	string
     */
    function get_error_message() {
        return $this->msg;
    }

}

/* End of file authlibrary.php */
/* Location: ./application/libraries/authlibrary.php */

Creating Controller Class

Create a controller file authcontroller.php under application/controllers with the following source code.

The below controller class handles request and response for clients.

The controller class has a method called index() that first checks if the current user is already logged into the application. If the current user not logged in then the user will be redirected to the login page.

The login() function performs some validations on user’s credentials input through login form. If the validations are passed then user will see the private area of the application otherwise user will be redirected to the login form with error message.

The logout() function simply clears out all session data and redirects user to the login page.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * Description of AuthController
 *
 * @author https://www.roytuts.com
 */

class AuthController extends CI_Controller {

	private $msg;
	
    function __construct() {
        parent::__construct();
		$this->lang->load('msg');
		$this->load->library('authlibrary');
        $this->load->library('form_validation');
    }
	
    private function display_msg($msg) {
        $this->msg .= $msg . nl2br("\n");
    }
	
	function index() {
		if (!$this->authlibrary->is_logged_in()) {
            redirect('authcontroller/login');
        } else {
			$this->load->view('home');
		}
	}
	
	function login() {
        if ($this->input->post('login')) {
            $this->form_validation->set_rules('username', 'Username', 'trim|required|max_length[100]|xss_clean');
            $this->form_validation->set_rules('password', 'Password', 'trim|required|max_length[25]|xss_clean');
            if ($this->form_validation->run()) {        // validation ok
				$username = $this->input->post('password');
                $password = $this->input->post('password');
                if ($this->authlibrary->login($username, $password)) {        // success
                    $this->session->set_flashdata($this->config->item('msg_key'), $this->lang->line('login_success'));
                    $this->session->keep_flashdata($this->config->item('msg_key'));
                    redirect('/');
                } else {
                    $errors = $this->authlibrary->get_error_message();
                    $this->display_msg($errors);
                }
            }
        }
        $data['errors'] = $this->msg;
        $data['msg'] = '';
        if ($message = $this->session->flashdata($this->config->item('msg_key'))) {
            $data['msg'] = $message;
        }
        $this->load->view('login', $data);
    }
	
    function logout() {
        if ($this->authlibrary->is_logged_in()) {
            $this->authlibrary->logout();
            $this->session->set_flashdata($this->config->item('msg_key'), $this->lang->line('logout_success'));
            $this->session->keep_flashdata($this->config->item('msg_key'));
        }
        redirect('authcontroller/login');
    }
}

Creating View Files

The view file is responsible for displaying information on the web page.

So we will create here two view files login.php and home.php under application/views folder.

The login.php file will display input fields along with submit button. The user will use these input fields to input his/her credentials to log into the application.

The home.php page will be shown upon successful login to the application with welcome message, last login date time and logout link.

login.php

Add below source to login.php file.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Codeigniter Login Logout Example</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/login.css" media="screen" />
    </head>
    <body>
        <div class="wrap">
            <div id="content">
                <div id="main">
                    <div class="full_w">
                        <?php
							if ($msg) {
								echo '<div class="n_ok"><p>';
								echo $msg;
								echo '</p></div>';
							}
							
							if($this->session->flashdata($this->config->item('msg_key'))) {
								echo $this->session->flashdata($this->config->item('msg_key'));
							}
                        ?>
                        <?php
							echo form_open($this->uri->uri_string());
							if (validation_errors()) {
								echo '<div class="n_error">';
								echo validation_errors();
								echo '</div><div class="sep"></div>';
							}
							if (isset($errors) && strlen($errors)) {
								echo '<div class="n_error">';
								echo $errors;
								echo '</div><div class="sep"></div>';
							}
                        ?>
                        <label for="username">Username:</label>
                        <input id="username" name="username" class="text" type="text"
                               maxlength="100"/>
                        <label for="password">Password:</label>
                        <input id="password" name="password" type="password"
                               class="text" maxlength="25"/>
                        <div class="sep"></div>
                        <input type="submit" name="login" id="login" value="Login"/>
                        <?php
                        echo form_close();
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Now in our above view file we have added login.css file to apply some styles.

Here is the source code of login.css file.

* {
    margin: 0;
    padding: 0;
}
body{
    background: #f3f3f3 url(../img/bg_login_top.jpg) no-repeat top center;
    color: #bebebe;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0;
}

a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

h1, h2, h3, h4{
    font-family: Arial, sans-serif;
    color: #444444;
}


button, .button{
    background: #F3F3F3;
    border: 1px solid #DCDCDC;
    border-radius: 2px;
    color: #444444;
    cursor: pointer;
    display: inline-block;
    font: 700 11px Tahoma, Arial, sans-serif;
    margin-right: 10px;
    padding: 7px 12px 7px 12px;
    position: relative;
    text-decoration: none;
    text-shadow: 0px 1px 0px #FFFFFF;
}
button:hover, .button:hover{
    border-bottom-color: #999999;
    border-left-color: #999999;
    border-right-color: #999999;
    border-top-color: #999999;
    color: #333333;
    text-decoration: none;
}

.wrap{
    margin: 0 auto;
    width: 400px;
}

#content{
    margin: 120px 0 10px 0;
}
#content .b1{
    background: #ffffff;
}
#content .b2{
    background: #eaeaea;
}


/* CONTENT MAIN START */

#content #main{
    float: right;
    margin: 0 0 12px 0;
    width: 400px;
}
#main .full_w{
    background: #ffffff;
    border: 1px solid #DCDDE1;
    border-radius: 5px;
    -webkit-box-shadow:  2px 2px 0px 1px rgba(235, 235, 235, 1);
    -moz-box-shadow:  2px 2px 0px 1px rgba(235, 235, 235, 1);
    box-shadow:  2px 2px 0px 1px rgba(235, 235, 235, 1);
    color: #848484;
    margin: 0 0 5px 0;
}
#main .full_w .h_title{
    background: url(../img/bg_box_head.jpg) repeat-x;
    color: #bebebe;
    font-size: 11px;
    font-weight: normal;
    height: 22px;
    padding: 7px 0 0 15px;
    text-shadow: #0E0E0E 0px 1px 1px;
}

/* CONTENT MAIN FORM */

.left{ 	float: left; width: 230px;}
.right{ float: right; width: 215px;}
.right h3{	margin: 0 0 8px 0;}
.right p{	margin: 0 0 8px 0;}

#main form{
    margin: 15px;
}
#main form .element{
    clear: both;
    border-bottom: 1px dashed #ededed;
    display: block;
    margin: 0;
    padding: 10px 10px;
}
#main form label{
    color: #575757;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px 0;
    padding: 0 0 0 3px;
}
#main form label span{
    color: #b8b8b8;
    font-size: 11px;
    font-weight: normal;
}
#main form input, #main form select, #main form textarea{
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    font-size: 11px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    padding: 5px 3px;
}
#main form input:focus, #main form select:focus, #main form textarea:focus{border: 1px solid #b3b3b3;}

#main form select{
    border: 1px solid #DDDDDD;
    border-radius: 3px;

}
#main form .text{
    margin: 0 0 12px 0;
    width: 98%;
}

#main form .ok{
    background: #F3F3F3 url(../img/i_ok.png) no-repeat 4px center;
    padding-left: 25px;
}

#main .footer{
    margin: 0 15px;
    text-align: center;
    text-shadow: 1px 1px 0px #ffffff;
}
#main .footer a{
    color: #bebebe;
}

/* MAIN NOTIFY */

#main .n_warning{background: #FFF7CE;border: 1px solid #D9C65B; border-radius: 3px; margin: 20px 15px;padding: 1px;}
#main .n_warning p{	background: #FDF0B1 url(../img/i_warning.png) no-repeat 4px center;	color: #756B30;	padding: 7px 25px;}
#main .n_warning a{	color: #756B30;	font-weight: bold;}

#main .n_ok{background: #F6FFEC;border: 1px solid #89B755; border-radius: 3px; margin: 20px 15px;padding: 1px;}
#main .n_ok p{background: #DFF6C5 url(../img/i_ok.png) no-repeat 4px center; color: #496528; padding: 7px 25px;}
#main .n_ok a{color: #756B30;	font-weight: bold;}

#main .n_error{background: #FDE4E1;border: 1px solid #B16A6C; border-radius: 3px; margin: 20px 15px;padding: 1px;}
#main .n_error p{background: #F4CAC6 url(../img/i_error.png) no-repeat 4px center; color: #630E18; padding: 7px 25px;}
#main .n_error a{color: #756B30;	font-weight: bold;}


/* HELPERS START */

.entry{ color: #444; margin: 5px 0; padding: 5px 15px; text-shadow: 0px 1px #ffffff; }
.sep{ border-bottom: 1px dashed #DDDDDD; margin: 10px 0;}

.clear{ clear: both; }

.align-left{ text-align: left; }
.align-right{ text-align: right; }

#top p{
    text-shadow: #000 0px 1px 1px;
}

Now in the above css file we have used many images, so you can download images or whole source code later from this tutorial.

home.php

This is the file which gets loaded once a user is successfully logged into the application.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CodeIgniter Login Logout Example</title>

	<style type="text/css">

	::selection { background-color: #E13300; color: white; }
	::-moz-selection { background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}

	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	#body {
		margin: 0 15px 0 15px;
	}

	p.footer {
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}

	#container {
		margin: 10px;
		border: 1px solid #D0D0D0;
		box-shadow: 0 0 8px #D0D0D0;
	}
	</style>
</head>
<body>

<div id="container">
	<div id="body">
		<p>
			<?php
				if($this->session->flashdata($this->config->item('msg_key'))) {
					echo $this->session->flashdata($this->config->item('msg_key'));
				}
			?>
		</p>
		<p>Welcome to Dashboard</p>
		<p>
			Last login: <strong><?php echo $this->session->userdata('last_login') == NULL ? 'First Time' : $this->session->userdata('last_login'); ?></strong>
			Welcome,</span> <strong><?php echo $this->session->userdata('user_name'); ?></strong> 
			<?php echo anchor('authcontroller/logout', '[ Logout ]'); ?>
		</p>
	</div>
</div>

</body>
</html>

Configuring Route

We need to replace our default controller in application/config/routes.php file as shown below:

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

Running the Application

Make sure your Apache HTTP Server 2.4 is running.

Testing the Application

Login Page

Hit the URL http://[::1]/codeIgniter-3.1.10-login-logout/index.php/authcontroller/login.

Login Error

Click

Login Success

When user logs in successfully, the user will see below home page.

Source Code

Thanks for reading.

Tags:

3 thoughts on “CodeIgniter Login Logout Example

  1. Hello, when testing your script it turns out that it does not display the username after logging in, how to fix it?

Leave a Reply

Your email address will not be published. Required fields are marked *