In this example we will learn,how to develop a login form in CodeIgniter 4. Below are the steps to implement this , you need to simply follow below steps.
Download & Configure CodeIgniter 4 Application.
Download the fresh version of CodeIgniter from https://codeigniter.com/download and unzip this in your working directory and configure the base url in app/Config/App.php.
public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/crud/public';
Configure Database And Create Table.
In this step we will create database crud and table products in the crud database.
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_name` varchar(100) NOT NULL, `password` varchar(250) NOT NULL PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1
Now update the database credential in app/Config/Database.php.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'login',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
Create Model.
The model is used to communicate with the user table. So create model LoginModel in the app/Models/ directory and put the below code.
<?php
namespace App\Models;
use CodeIgniter\Model;
class LoginModel extends Model
{
protected $table = 'user';
}
Create Controller.
In this step we will create a controller named as LoginController. So create controller in the app/Controllers directory and put the below code .
<?php
namespace App\Controllers;
use App\Models\LoginModel;
use CodeIgniter\Controller;
class LoginController extends Controller
{
private $login = '' ;
public function __construct(){
$this->login = new LoginModel();
}
// show login form
public function index() {
$session = session();
$session->setFlashdata('msg', '');
return view('login');
}
//check user is exist or not
public function login(){
$data = array('user_name'=>$this->request->getVar('user_id'),'password'=>md5($this->request->getVar('password')));
$user = $this->login->where($data);
$rows = $this->login->countAllResults();
$session = session();
if($rows==1){
return view('success');
}else{
$session->setFlashdata('msg', 'Invalid User');
return view('login');
}
}
}
Add below code in route inside the app/Config/Routes.php.
$routes->get('/', 'LoginController::index');
$routes->post('login', 'LoginController::login');
Create Login View.
<html>
<head>
<style>
html {
background-color: #56baed;
}
body {
font-family: "Poppins", sans-serif;
height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #fff;
padding: 30px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type=text] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=password] {
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
input[type=text]:placeholder {
color: #cccccc;
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
}
</style>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper fadeInDown">
<div id="formContent">
<div class="fadeIn first">
<i class="fa fa-sign-in" aria-hidden="true" style='font-size:50px'></i>
</div>
<span style='color:red;font-size:15px;'><?= session('msg');?></span>
<form method="post" action="<?= site_url('/login') ?>">
<input type="text" id="user_id" name="user_id" placeholder="User Name">
<input type="password" id="password" name="password" placeholder="Password">
<input type="submit" value="Log In">
</form>
<div id="formFooter">
</div>
</div>
</div>
</body>
</html>
Create Success View.
<html>
<head>
</head>
<body>
<div class="container">
<div class="row text-center">
<div class="col-sm-6 col-sm-offset-3">
<br><br> <h2 style="color:#0fad00">Success</h2>
</div>
</div>
</body>
</html>