Simple Login Form in CodeIgniter, MySQL and Bootstrap

By | January 4, 2017

In this tutorial we will see simple Login form in CodeIgniter, MySQL and bootstrap. CodeIgniter is a very popular PHP framework. We have also covered a nice CodeIgniter tutorial for beginners. We had previously covered simple login system with CodeIgniter however today we will share using Twitter Bootstrap. We have improved our UI thanks to inbuild classes in Bootstrap.

login form in codeigniter

 

LIVE DEMO

Simple Login Form in CodeIgniter, MySQL and Bootstrap

CodeIgniter Login Form Tutorial

Database


CREATE DATABASE `codeigniter_insert` ;

CREATE TABLE IF NOT EXISTS `login` (
`id` int(10) AUTO INCREMENT,
`email` varchar(55) NOT NULL,
`password` varchar(55) NOT NULL
) ;

login_view.php (View)

In this file we will input email and password. When we will click on login we will make request to Login controller and call chk_login() function. The function checks if email id and password exists. If the user exists then User will be able to login successfully.

If the user click on logout the session will be destroyed.

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

#main{

position: absolute;
top:200px;
left:550px;
width: 220px;
padding: 10px;
border: 3px solid green;
margin: 1;

}

</style>

</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TechPlugg Dashboard</a>
</div>

<ul class="nav navbar-nav navbar-right">
</ul>

</div>

<!-- /.navbar-collapse -->
</div>

<!-- /.container-fluid -->
</nav>

<center>

<h1>Welcome to TechPlugg</h1>

We are a Tech Blog with Programming tutorials

</center>
<form enctype="multipart/form-data" action="<?php echo base_url(); ?>index.php/Login/chk_login" method="post" >
<div id ="main">

<input type="text" name="email" placeholder="Enter your Email ID" /><br/><br/><br/>
<input type="password" name="password" placeholder="Enter a password"/><br/><br/><br/>

<center><input type="submit" value="Login" class="btn btn-primary"/></center>
</form></div>
</form>
</body>
</html>

Login.php (Controller)

We have two functions chk_login() and logout(). Chk_login() simply checks if email id and password exists in the database.

<?php
class Login extends CI_Controller {

 function __construct()
 {
 parent::__construct();
 $this->load->helper(array('form', 'url'));
 }

 //index function
 function index()
 {
 //load file upload form
 $this->load->view('login_view');
 }

 
 function chk_login()
 {
 

 
 $email = $this->input->post('email');
 $password = md5(trim($this->input->post('password')));
 if($email !='' && $password!='')
 {

 $query = "select * from login where email = '" . $email . "' and password = '" . $password . "'";
 $res = $this->db->query($query);
 $count = $res->num_rows();
 if($count>0)
 {
 $sessiondata = array(
 'email' => $email,
 'user_login' => TRUE
 );
 
 $this->session->set_userdata($sessiondata);
 $this->load->view('success_login', $sessiondata);
 } 
 else
 {
 echo "Incorrect Email or password";
 
 }
 
 } 
 else
 {
 redirect(base_url().'index.php/Login/');
 
 }
 }
 
 function logout()
 {
 $this->session->sess_destroy();
 redirect(base_url().'index.php/Login/');
 } 

}
?>

success_view.php (View)

<?php
echo "Login Successful";

?>

<a href="<?php echo base_url(); ?>index.php/Login/logout">Logout</a>

 

So this was simple Login form in CodeIgniter, MySQL and bootstrap. If you like this tutorial please share it with your friends. Do let me know any doubts in comments.