User registration and login using CodeIgniter
In this tutorial, we will learn about user registration and login using CodeIgniter. First, we will create a database cidb. In this database, we will create a MySQL table tblusers. Structure of tblusers table given below:
CREATE TABLE tblusers (
id int(11) NOT NULL,
FirstName varchar(150) DEFAULT NULL,
LastName varchar(150) DEFAULT NULL,
Email varchar(150) DEFAULT NULL,
Password varchar(255) DEFAULT NULL,
PostingDate timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;1. After creation of the database then configure your DB credential in application/config/database.php
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost', // your hostname
'username' => 'root', // your DB username
'password' => '', // DB password
'database' => 'cidb', // your database name
'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
);2. Load libraries and helpers in application/config/autoload.php that are used in this tutorial or you can load the libraries and helpers on the particular page also. We are using in the autoload.php
$autoload['libraries'] = array('form_validation','database','session');
$autoload['helper'] = array('html','url','form');- Database library used for database related queries
- Session library used for display success/error message using flash data.
- form_validation library used for form validation rules.
- Html Helper for used for link_tag
- form helper used for form.
- URL helper used for base_url.
3. Create a user registration form(signup.php) inside application/view/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>User Registration</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control, .btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #fff;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before, .signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #fff;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<h2>Register</h2>
<p class="hint-text">Create your account. It's free and only takes a minute.</p>
<?php echo form_open('Signup',['name'=>'userregistration','autocomplete'=>'off']);?>
<div class="form-group">
<!--success message -->
<?php if($this->session->flashdata('success')){?>
<p style="color:green"><?php echo $this->session->flashdata('success');?></p>
<?php } ?>
<!--error message -->
<?php if($this->session->flashdata('error')){?>
<p style="color:red"><?php echo $this->session->flashdata('error');?></p>
<?php } ?>
<div class="row">
<div class="col">
<?php echo form_input(['name'=>'firstname','class'=>'form-control','value'=>set_value('firstname'),'placeholder'=>'Enter First Name']);?>
<?php echo form_error('firstname',"<div style='color:red'>","</div>");?>
</div>
<div class="col">
<?php echo form_input(['name'=>'lastname','class'=>'form-control','value'=>set_value('lastname'),'placeholder'=>'Enter Last Name']);?>
<?php echo form_error('lastname',"<div style='color:red'>","</div>");?>
</div>
</div>
</div>
<div class="form-group">
<?php echo form_input(['name'=>'emailid','class'=>'form-control','value'=>set_value('emailid'),'placeholder'=>'Enter your Email id']);?>
<?php echo form_error('emailid',"<div style='color:red'>","</div>");?>
</div>
<div class="form-group">
<?php echo form_password(['name'=>'password','class'=>'form-control','value'=>set_value('password'),'placeholder'=>'Password']);?>
<?php echo form_error('password',"<div style='color:red'>","</div>");?>
</div>
<div class="form-group">
<?php echo form_password(['name'=>'confirmpassword','class'=>'form-control','value'=>set_value('confirmpassword'),'placeholder'=>'Password']);?>
<?php echo form_error('confirmpassword',"<div style='color:red'>","</div>");?>
</div>
<div class="form-group">
<?php echo form_submit(['name'=>'insert','value'=>'Submit','class'=>'btn btn-success btn-lg btn-block']);?>
</div>
</form>
<?php echo form_close();?>
<div class="text-center">Already have an account? <a href="<?php echo site_url('Signin');?>">Sign in</a></div>
</div>
</body>
</html>4.Create a controller for user registration/signup (Signup.php) inside application/controller. Also, set the validation rules in this controller.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Signup extends CI_Controller {
public function index()
{
//Form Validation
$this->form_validation->set_rules('firstname','First Name','required|alpha');
$this->form_validation->set_rules('lastname','Last Name','required|alpha');
$this->form_validation->set_rules('emailid','EmailId','required|valid_email|is_unique[tblusers.Email]');
$this->form_validation->set_rules('password','Password','required|min_length[6]');
$this->form_validation->set_rules('confirmpassword','Confirm Password','required|min_length[6]|matches[password]');
$this->form_validation->set_message('is_unique', 'This email is already exists.');
if($this->form_validation->run())
{
//Getting Post Values
$fname=$this->input->post('firstname');
$lname=$this->input->post('lastname');
$emailid=$this->input->post('emailid');
$password=$this->input->post('password');
$this->load->model('Signup_Model');
$this->Signup_Model->index($fname,$lname,$emailid,$password);
} else {
$this->load->view('signup');
}
}}5.Create a model for user registration/signup (Signup_Model.php) inside application/model.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Signup_Model extends CI_Model{
public function index($fname,$lname,$emailid,$password){
$data=array(
'FirstName'=>$fname,
'LastName'=>$lname,
'Email'=>$emailid,
'Password'=>$password);
$query=$this->db->insert('tblusers',$data);
if($query){
$this->session->set_flashdata('success','Registration successfull, Now you can login.');
redirect('signup');
} else {
$this->session->set_flashdata('error','Something went wrong. Please try again.');
redirect('signup');
}
}}6.Create a user login/signin form(signin.php) inside application/view/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>User Signin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control, .btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #fff;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before, .signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #fff;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<h2>Signin</h2>
<p class="hint-text">Sign in to start your session</p>
<?php echo form_open('Signin',['name'=>'userregistration','autocomplete'=>'off']);?>
<div class="form-group">
<!--error message -->
<?php if($this->session->flashdata('error')){?>
<p style="color:red"><?php echo $this->session->flashdata('error');?></p>
<?php } ?>
<?php echo form_input(['name'=>'emailid','class'=>'form-control','value'=>set_value('emailid'),'placeholder'=>'Enter your Email id']);?>
<?php echo form_error('emailid',"<div style='color:red'>","</div>");?>
</div>
<div class="form-group">
<?php echo form_password(['name'=>'password','class'=>'form-control','value'=>set_value('password'),'placeholder'=>'Password']);?>
<?php echo form_error('password',"<div style='color:red'>","</div>");?>
</div>
<div class="form-group">
<?php echo form_submit(['name'=>'insert','value'=>'Submit','class'=>'btn btn-success btn-lg btn-block']);?>
</div>
</form>
<?php echo form_close();?>
<div class="text-center">Not Registered Yet? <a href="<?php echo site_url('Signup');?>">Sign up here</a></div>
</div>
</body>
</html>7.Create a controller for user login/signin(Signup.php) inside application/controller. Also, set the validation rules in this controller.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Signin extends CI_Controller{
public function index(){
//Validation for login form
$this->form_validation->set_rules('emailid','Email id','required|valid_email');
$this->form_validation->set_rules('password','Password','required');
if($this->form_validation->run()){
$email=$this->input->post('emailid');
$password=$this->input->post('password');
$this->load->model('Signin_Model');
$validate=$this->Signin_Model->index($email,$password);
if($validate){
$this->session->set_userdata('uid',$validate->id);
$this->session->set_userdata('fname',$validate->FirstName);
redirect('welcome');
} else {
$this->session->set_flashdata('error','Invalid login details.Please try again.');
redirect('signin');
}
} else{
$this->load->view('signin');
}
}}8.Create a model for user login/signin (Signin_Model.php) inside application/model.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Signin_Model extends CI_Model{
public function index($email,$password){
$data=array(
'Email'=>$email,
'Password'=>$password);
$query=$this->db->where($data);
$login=$this->db->get('tblusers');
if($login!=NULL){
return $login->row();
}
}}9. After successful login user will redirect to welcome.php. We will validate this page with the session if any user try to access this page(welcome.php) directly then user will redirect to signin.php page.
Create a welcome.php inside application/view/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>User Signin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control, .btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #fff;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before, .signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #fff;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-form">
<h2>Welcome Back</h2>
<form>
<div class="form-group" style="font-size:20px; color:#000;" align="center">
Howdy <?php echo $firstname?>
</div>
<div class="form-group">
<a href="<?php echo site_url('Logout');?>" class="btn btn-success btn-lg btn-block" style="color:#fff;">Logout</a>
</div>
</form>
</div>
</body>
</html>10.Create a controller for welcome page(Welcome.php) application/controller. Validate the page with the user session id.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
//Validating login
function __construct(){
parent::__construct();
if(!$this->session->userdata('uid'))
redirect('signin');
}
public function index(){
$userfname=$this->session->userdata('fname');
$this->load->view('welcome',['firstname'=>$userfname]);
}
}11. Now create a logout controller(Logout.php) inside application/controllers for destroying the session.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Logout extends CI_Controller {
//Function for logout
public function index(){
$this->session->unset_userdata('uid');
$this->session->sess_destroy();
return redirect('signin');
}
}++++++++++++++++++++View Demo+++++++++++++++++
Download Full Source Code (User registration and login using CodeIgniter)
Size: 710 KB
Version: V 1.0
