Login Registration Form in Codeigniter with Validation & Session

1 Comment on Login Registration Form in Codeigniter with Validation & Session

Codeigniter authentication tutorial, We would love to share with you how to create registration, login and logout form in Codeigniter using session and validation.

Codeigniter Login Registration Form with Validation and Session

Here are steps:

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Table in Database
  • Configure Database
  • Make Auth Controller
  • Create Login and Registration Form
  • Test This Project

Download Codeigniter Project

In this step, we will download the latest version of Codeigniter, and unzip the setup in your local system xampp/htdocs/.

Basic Configurations

Add project base URL in application/config/config.php file:

$config['base_url'] = 'http://localhost/demo';

Create Table in Database

Run the below sql query to create a table in your database.

CREATE TABLE IF NOT EXISTS users(
    id int(10) unsigned NOT NULL auto_increment,
    user_name varchar(150) collate latin1_general_ci NOT NULL,
    password varchar(100) collate latin1_general_ci NOT NULL,
    first_name varchar(45) collate latin1_general_ci NOT NULL,
    last_name varchar(45) collate latin1_general_ci NOT NULL,
    PRIMARY KEY  (id)
  );

Configure Database

Set up database in application/config/database.php file:

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'demo',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Make Auth Controller

Create a controller name Auth.php and methods into it to handle login, registration and logout process:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Auth extends CI_Controller {
 
	 public function __construct()
	 	{
	 	 parent::__construct();
		 $this->load->model('Form_model');
	         $this->load->library(array('form_validation','session'));
                 $this->load->helper(array('url','html','form'));
                 $this->user_id = $this->session->userdata('user_id');
	 	}
 
 
	public function index()
	{
	 $this->load->view('login');
	}
	public function post_login()
        {
        $this->form_validation->set_rules('email', 'Email', 'required');
        $this->form_validation->set_rules('password', 'Password', 'required');
        $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
        $this->form_validation->set_message('required', 'Enter %s');
        if ($this->form_validation->run() === FALSE)
        {  
            $this->load->view('login');
        }
        else
        {   
        	$data = array(
	           'email' => $this->input->post('email'),
	           'password' => md5($this->input->post('password')),
	         );
  
            $check = $this->Form_model->auth_check($data);
           
            if($check != false){
	             $user = array(
			     'user_id' => $check->id,
			     'email' => $check->email,
			     'first_name' => $check->first_name,
			     'last_name' => $check->last_name
			    );
 
            $this->session->set_userdata($user);
             redirect( base_url('dashboard') ); 
            }
           $this->load->view('login');
        }
        
    }	
    public function post_register()
    {
        $this->form_validation->set_rules('first_name', 'First Name', 'required');
        $this->form_validation->set_rules('last_name', 'Last Name', 'required');
        $this->form_validation->set_rules('contact_no', 'Contact No', 'required');
        $this->form_validation->set_rules('email', 'Email', 'required');
        $this->form_validation->set_rules('password', 'Password', 'required');
        $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
        $this->form_validation->set_message('required', 'Enter %s');
        if ($this->form_validation->run() === FALSE)
        {  
            $this->load->view('register');
        }
        else
        {   
        	$data = array(
	           'first_name' => $this->input->post('first_name'),
	           'last_name' => $this->input->post('last_name'),
	           'mobile_number' => $this->input->post('contact_no'),
	           'email' => $this->input->post('email'),
	           'password' => md5($this->input->post('password')),
	         );
  
            $check = $this->Form_model->insert_user($data);
            if($check != false){
             	$user = array(
			     'user_id' => $check,
			     'email' => $this->input->post('email'),
			     'first_name' => $this->input->post('first_name'),
			     'last_name' => $this->input->post('last_name'),
			    );
             }
 
             $this->session->set_userdata($user);
             redirect( base_url('auth/dashboard') ); 
            }
        
    }
    public function logout(){
	$this->session->sess_destroy();
	redirect(base_url('auth'));
   }	
   public function dashboard(){
       if(empty($this->user_id)){
	    redirect(base_url('auth'));
	  }
	   $this->load->view('dashboard');
	}
}

Create Model

Next step Go to models and create Form_model.php, We need to create Form_model.php file for checking the credential from database. This file contain business logic for login. So puth below code inside this file.

<?php
class Form_model extends CI_Model {

    public function __construct()
    {
        $this->load->database();
    }

    public function auth_check($data)
    {
        $query = $this->db->get_where('users', $data);
        if($query){
         return $query->row();
        }
        return false;
    }
    public function insert_user($data)
    {
        $insert = $this->db->insert('users', $data);
        if ($insert) {
           return $this->db->insert_id();
        } else {
            return false;
        }
    }
}

Create Login and Registration Form

Create register.php file in application/views/ folder and implement registration form in it:

<html>
<head>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <title>Sign Up</title>
</head>
<style type="text/css">
	
	body {
        background-color: #F3EBF6;
        font-family: 'Ubuntu', sans-serif;
    }
    div.error {
    	margin-bottom: 15px;
        margin-top: -6px;
        margin-left: 58px;
        color: red;
    }
    .main {
        background-color: #FFFFFF;
        width: 400px;
        height: 620px;
        margin: 7em auto;
        border-radius: 1.5em;
        box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
    }
    
    .sign {
        padding-top: 40px;
        color: #8C55AA;
        font-family: 'Ubuntu', sans-serif;
        font-weight: bold;
        font-size: 23px;
    }
    
    .un {
    width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
    margin-left: 46px;
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Ubuntu', sans-serif;
    }
    
    form.form1 {
        padding-top: 40px;
    }
    
    .pass {
            width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
    margin-left: 46px;
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Ubuntu', sans-serif;
    }
    
   
    .un:focus, .pass:focus {
        border: 2px solid rgba(0, 0, 0, 0.18) !important;
        
    }
    
    .submit {
      cursor: pointer;
        border-radius: 5em;
        color: #fff;
        background: linear-gradient(to right, #9C27B0, #E040FB);
        border: 0;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
        padding-top: 10px;
        font-family: 'Ubuntu', sans-serif;
        margin-left: 35%;
        font-size: 13px;
        box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
    }
    
    .forgot {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #E1BEE7;
        padding-top: 15px;
    }
    
    button {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #E1BEE7;
        text-decoration: none
    }
    
    @media (max-width: 600px) {
        .main {
            border-radius: 0px;
        }
        
</style>
<body>
  <div class="main">
    <p class="sign" align="center">Sign Up</p>
    <form action="<?php echo base_url('auth/post_register') ?>" method="post" accept-charset="utf-8">
      <input class="un " type="text" align="center" name="first_name" placeholder="first name">
      <?php echo form_error('first_name'); ?>   
      <input class="un " type="text" align="center" name="last_name" placeholder="last name">
      <?php echo form_error('last_name'); ?>  
      <input class="un " type="text" align="center" name="contact_no" placeholder="contact number" maxlength="10">
      <?php echo form_error('contact_no'); ?> 
      <input class="un " type="text" align="center" name="email" placeholder="email">
      <?php echo form_error('email'); ?> 
      <input class="pass" type="password" align="center" name="password" placeholder="Password">
      <?php echo form_error('password'); ?> 
      <button type="submit" align="center" class="submit">Sign Up</button>
     </form>                
    </div>
</body>
</html>

Create login.php in application/views folder to show login form in it:

<html>
<head>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  <title>Sign in</title>
</head>
<style type="text/css">
	
	body {
        background-color: #F3EBF6;
        font-family: 'Ubuntu', sans-serif;
    }
    div.error {
    	margin-bottom: 15px;
        margin-top: -6px;
        margin-left: 58px;
        color: red;
    }
    .main {
        background-color: #FFFFFF;
        width: 400px;
        height: 400px;
        margin: 7em auto;
        border-radius: 1.5em;
        box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
    }
    
    .sign {
        padding-top: 40px;
        color: #8C55AA;
        font-family: 'Ubuntu', sans-serif;
        font-weight: bold;
        font-size: 23px;
    }
    
    .un {
    width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
    margin-left: 46px;
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Ubuntu', sans-serif;
    }
    
    form.form1 {
        padding-top: 40px;
    }
    
    .pass {
            width: 76%;
    color: rgb(38, 50, 56);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(136, 126, 126, 0.04);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    outline: none;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0.02);
    margin-bottom: 50px;
    margin-left: 46px;
    text-align: center;
    margin-bottom: 27px;
    font-family: 'Ubuntu', sans-serif;
    }
    
   
    .un:focus, .pass:focus {
        border: 2px solid rgba(0, 0, 0, 0.18) !important;
        
    }
    
    .submit {
      cursor: pointer;
        border-radius: 5em;
        color: #fff;
        background: linear-gradient(to right, #9C27B0, #E040FB);
        border: 0;
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 10px;
        padding-top: 10px;
        font-family: 'Ubuntu', sans-serif;
        margin-left: 35%;
        font-size: 13px;
        box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
    }
    
    .forgot {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #E1BEE7;
        padding-top: 15px;
    }
    
    button {
        text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
        color: #E1BEE7;
        text-decoration: none
    }
    
    @media (max-width: 600px) {
        .main {
            border-radius: 0px;
        }
        
</style>
<body>
  <div class="main">
    <p class="sign" align="center">Sign in</p>
    <form action="<?php echo base_url('auth/post_login') ?>" method="post" accept-charset="utf-8">
      <input class="un " type="text" align="center" name="email" placeholder="email">
      <?php echo form_error('email'); ?> 
      <input class="pass" type="password" align="center" name="password" placeholder="Password">
      <?php echo form_error('password'); ?> 
      <button type="submit" align="center" class="submit">Sign in</button>
     
     </form>                
    </div>
     
</body>
</html>

Create dashboard.php file in application/views folder:

<!DOCTYPE html>
<html lang="en">
 <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    </head>
    <body>
    <div class="container">
      <div class="row">
         <div class="col-md-6">
           <div class="row">
            <div class="col-md-12">
                <h3>Login Successful <?=$this->session->userdata('first_name')?>  <?=$this->session->userdata('last_name')?></h3>
                <a href="<?= base_url();?>auth/logout">Logout</a>                                               
               </div>
             </div>
          </div>               
      </div>
  </div>        
    </body>
</html>

Test This Project

Go to the browser and hit below the url.

http://localhost/demo/auth

Conclusion

In this CodeIgniter Login, Registration, and Logout Form tutorial, we created a registration and login form that allows users to register and login to the application, and created the dashboard page that will be displayed to the user after login.

You may like

  1. Registrtion form validation using jquery validator
  2. jQuery Form Validation Custom Error Message
  3. jQuery AJAX Form Submit PHP MySQL
  4. Simple Registration Form in PHP with Validation
  5. jQuery Ajax Form Submit with FormData Example
  6. Google ReCaptcha Form Validation in laravel
  7. Codeigniter php jQuery Ajax Form Submit with Validation

Live Demo

Rrecommended Posts

Learn Remove index.php in web url using .htaccess file Codeigniter

How to Install Codeigniter Using Composer

If you have any questions or thoughts to share, use the comment form below to reach us.

Filed Under: Codeigniter

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

One reply to Login Registration Form in Codeigniter with Validation & Session

  1. Thank you so much for this post.

    Reply

Leave a Reply

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