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
- Registrtion form validation using jquery validator
- jQuery Form Validation Custom Error Message
- jQuery AJAX Form Submit PHP MySQL
- Simple Registration Form in PHP with Validation
- jQuery Ajax Form Submit with FormData Example
- Google ReCaptcha Form Validation in laravel
- Codeigniter php jQuery Ajax Form Submit with Validation
Rrecommended Posts
Learn Remove index.php in web url using .htaccess file Codeigniter
If you have any questions or thoughts to share, use the comment form below to reach us.
Thank you so much for this post.