How to Create Login Form in CodeIgniter, MySQL and Twitter Bootstrap

Hi I'm back with CodeIgniter Bootstrap Login Tutorial. In this post, we'll see How to Create Login Form in CodeIgniter and Bootstrap Framework along with MySQL Database. Similar to other articles in our codeigniter tutorial series, here too we use twitter bootstrap css to design user interface. Twitter Bootstrap has ready to use HTML Form Components which we use to style our codeigniter login form in seconds.

To create codeigniter login page, I'm going to use MySQL as backend but you can switch over it to any other relational DBMS. Just change over database connection settings in codeigniter config file and you are done!

Creating CodeIgniter Login Form

Before heading to write any code for the login form in codeigniter, we'll fix the MySQL Database we need to use in our example.

Don't Miss: Codeigniter Login, Logout & Sigup System using MySQL & Bootstrap

Create MySQL Database

DB Name: Employee

Table Name: tbl_usrs

CREATE TABLE IF NOT EXISTS `tbl_usrs` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(40) NOT NULL,
  `email` varchar(60) NOT NULL,
  `status` varchar(8) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

INSERT INTO `tbl_usrs` (`username`, `password`, `email`, `status`) VALUES
('admin', '21232f297a57a5a743894a0e4a801fc3', 'admin@mydomain.com', 'active');

Run this SQL Command in MySQL Database to create the users table required for the codeIgniter bootstrap login system.

Note: The above sql statement will create the table with a sample user record for testing. The password has been md5 'ed and stored in the db. Use this login credentials for testing purpose, username: admin password: admin

Here is the Flow for the Login Form in CodeIgniter and Bootstrap we are going to build.

1. User enters the username and password.
2. Read database & check if an active user record exists with the same username and password.
3. If succeeds, redirect user to the Main/Home Page.
4. If it fails, show ERROR message.

Also Read: CodeIgniter Database CRUD Operations for Absolute Beginners

The Model

First create the model file for login form in codeigniter with name "login_model.php" in the "application/models" folder.

login_model.php

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

class login_model extends CI_Model
{
     function __construct()
     {
          // Call the Model constructor
          parent::__construct();
     }

     //get the username & password from tbl_usrs
     function get_user($usr, $pwd)
     {
          $sql = "select * from tbl_usrs where username = '" . $usr . "' and password = '" . md5($pwd) . "' and status = 'active'";
          $query = $this->db->query($sql);
          return $query->num_rows();
     }
}?>

The Controller

Next create the controller for our codeigniter login form with the name "login.php" in the "application/controllers" folder.

login.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class login extends CI_Controller
{

     public function __construct()
     {
          parent::__construct();
          $this->load->library('session');
          $this->load->helper('form');
          $this->load->helper('url');
          $this->load->helper('html');
          $this->load->database();
          $this->load->library('form_validation');
          //load the login model
          $this->load->model('login_model');
     }

     public function index()
     {
          //get the posted values
          $username = $this->input->post("txt_username");
          $password = $this->input->post("txt_password");

          //set validations
          $this->form_validation->set_rules("txt_username", "Username", "trim|required");
          $this->form_validation->set_rules("txt_password", "Password", "trim|required");

          if ($this->form_validation->run() == FALSE)
          {
               //validation fails
               $this->load->view('login_view');
          }
          else
          {
               //validation succeeds
               if ($this->input->post('btn_login') == "Login")
               {
                    //check if username and password is correct
                    $usr_result = $this->login_model->get_user($username, $password);
                    if ($usr_result > 0) //active user record is present
                    {
                         //set the session variables
                         $sessiondata = array(
                              'username' => $username,
                              'loginuser' => TRUE
                         );
                         $this->session->set_userdata($sessiondata);
                         redirect("index");
                    }
                    else
                    {
                         $this->session->set_flashdata('msg', '<div class="alert alert-danger text-center">Invalid username and password!</div>');
                         redirect('login/index');
                    }
               }
               else
               {
                    redirect('login/index');
               }
          }
     }
}?>

The View

Finally create the view file with name "login_view.php" in the folder "application/views". Here is where we integrate bootstrap with codeigniter php framework and add HTML tags to create the actual login form in the codeigniter view.

login_view.php

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Form</title>
     <!--link the bootstrap css file-->
     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
     
     <style type="text/css">
     .colbox {
          margin-left: 0px;
          margin-right: 0px;
     }
     </style>
</head>
<body>
<div class="container">
     <div class="row">
          <div class="col-lg-6 col-sm-6">
               <h1>LIVEDOTCOM</h1>
          </div>
          <div class="col-lg-6 col-sm-6">
               
               <ul class="nav nav-pills pull-right" style="margin-top:20px">
                    <li class="active"><a href="#">Login</a></li>
                    <li><a href="#">Signup</a></li>
               </ul>
               
          </div>
     </div>
</div>
<hr/>

<div class="container">
     <div class="row">
          <div class="col-lg-4 col-sm-4 well">
          <?php 
          $attributes = array("class" => "form-horizontal", "id" => "loginform", "name" => "loginform");
          echo form_open("login/index", $attributes);?>
          <fieldset>
               <legend>Login</legend>
               <div class="form-group">
               <div class="row colbox">
               <div class="col-lg-4 col-sm-4">
                    <label for="txt_username" class="control-label">Username</label>
               </div>
               <div class="col-lg-8 col-sm-8">
                    <input class="form-control" id="txt_username" name="txt_username" placeholder="Username" type="text" value="<?php echo set_value('txt_username'); ?>" />
                    <span class="text-danger"><?php echo form_error('txt_username'); ?></span>
               </div>
               </div>
               </div>
               
               <div class="form-group">
               <div class="row colbox">
               <div class="col-lg-4 col-sm-4">
               <label for="txt_password" class="control-label">Password</label>
               </div>
               <div class="col-lg-8 col-sm-8">
                    <input class="form-control" id="txt_password" name="txt_password" placeholder="Password" type="password" value="<?php echo set_value('txt_password'); ?>" />
                    <span class="text-danger"><?php echo form_error('txt_password'); ?></span>
               </div>
               </div>
               </div>
                              
               <div class="form-group">
               <div class="col-lg-12 col-sm-12 text-center">
                    <input id="btn_login" name="btn_login" type="submit" class="btn btn-default" value="Login" />
                    <input id="btn_cancel" name="btn_cancel" type="reset" class="btn btn-default" value="Cancel" />
               </div>
               </div>
          </fieldset>
          <?php echo form_close(); ?>
          <?php echo $this->session->flashdata('msg'); ?>
          </div>
     </div>
</div>
     
<!--load jQuery library-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--load bootstrap.js-->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Note: You can load Bootstrap files from CDN to load faster. Include jQurey.js prior to bootstrap.js files as they depend on jQuery library.

Must Read: CodeIgniter User Registration Page with Email Confirmation

Have any problem in implementing this login form in codeigniter, bootstrap and mysql? Got some suggestion for improvement? Let me know through your comments.

Look into our CodeIgniter Tutorials Section for more advanced articles.

Last-Modified: Dec-24-2016