Codeigniter user login, register &logout system. We would love to share with you how to create register, login and logout system in codeigniter. You will learn in this tutorial how to authenticate users by it’s credential.
In this codeiniter user login and registration system, we will create two forms to show a login and registration. We will validate user data on server side, when user submits an empty form, it can display error message. After successfully registering or logging in, we will redirect the user to the dashboard.
In Every website wants to login our users for some activity. Without login users can not do something in any website, because they want to login our users in website.
In otherwords, Login script is used to provide the authentication for our web pages.
Codeigniter Login Register System
Contents
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Project
In this step we will download the latest version of Codeigniter, Go to this link Download Codeigniter download the fresh setup of codeigniter and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Basic Configurations
Next we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
$config['base_url'] = 'http://localhost/demo';
Create Database With Table
In this step, we need to create database name demo, so let’s open your phpmyadmin and create the database with the name demo . After successfully create a database, you can use the below sql query for creating 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)
);
Setup Database Credentials
In this step, We need to connect our project to database. we need to go application/config/ and open database.php file in text editor. After open the file in text editor, We need to setup database credential in this file like below.
$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 );
Create Controller
Now we need to create a controller name Auth.php. In this controller we will create some method/function. We will build some of the methods like :
- Index() – This is used to showing a login form
- post_login() – This function authenticates user credentials and starts moving forward
- register() – This is used to showing for user registration form
- post_register() – This is used to store the user information into database.
- logout() – It is used to destroy the built-in session
- dashboard – After successfully logging in, the user can redirect this method
<?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 Views
Now we need to create register.php, go to application/views/ folder and create register.php file. Here put the below html code for showing registration form.
<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>
Now we need to create views for showing login form also showing dashbaord. So now create first view name login.php and put the below html in this file.
<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>
Now we need to create dashboard.php, After login user can redirect this page. So create dashboard.php and put the below html here.
<!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>
Start Development server
For start development server, Go to the browser and hit below the url.
http://localhost/demo/auth
Conclusion
In this codiginator login, registration and logout tutorial – first we have created the registration form and after successfully registering the user, he redirects to the Dashboard. We’ve created a login form with its functionality. We have authenticated users who use authentication. After successfully being certified, users redirect to the dashboard page.
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
- Laravel 6 Ajax Form Submit With Validation Tutorial
- Google ReCaptcha Form Validation in laravel
- Laravel 6 | jQuery Form Validation Tutorial with Demo Example
- Form Validation Example In Laravel 6
- 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.