Learn to build a CodeIgniter Login and Registration with source code.pdf

Learn to build a CodeIgniter Login and
Registration with source code
by Pawan
Hey, guys today we will learn how to build a simple yet powerful Codeigniter login and
registration system from scratch. And don’t worry at the end of the tutorial we will give you
the source of Codeigniter user login and registration.
If you are interested in trying to build a registration form in HTML and send emails via
PHPMailer then do check out this article as well. And as usual, we have already built a login
system with simple PHP.
Let’s start coding away:
Table of Contents
● What is CodeIgniter?
● How to Install CodeIgniter 4 via Composer?
● Install CodeIgniter 4 Manually
● CodeIgniter login and registration
● Link to Database
● Conclusion
What is CodeIgniter?

If you are someone who knows a little bit about backend programming languages like PHP,
ASP, or even Ruby on Rails. Then you must have heard of CodeIgniter.
CodeIgniter is a free, open-source framework of PHP. Fast, minimal code and uses MySQL,
which is easy to set up and it’s easy to learn too! All these features make CodeIgniter ideal
for any PHP beginner.
Not to mention, CI(as called by most coders) is also an MVC (model-view-controller) library.
And provides huge built-in libraries for ease of usage. Of course, there are many other PHP
frameworks like Laravel, CakePHP, Symfony, etc.
But CodeIgniter is especially amazing for beginners. Check out this infographic:
Infographic explaining the difference between CodeIgniter and Laravel.
And before we move to the next stage, check out our guide on how to use API in your
projects.

How to Install CodeIgniter 4 via Composer?
To build our CodeIgniter 4 login and registration, the easiest method would be to install CI
with Composer. We have explained why Composer is vital to any PHP developer in our
Gmail SMTP PHPmailer post.
Until CodeIgniter 3, using the composer was optional. But ever since CodeIgniter 4 update,
the composer is vital.
Why? Because without the composer you will have a very hard time upgrading your future CI
application. Doing an upgrade manually is time-consuming and prone to error.
So let’s start to install CodeIgniter with the composer. Here is the simple CLI command to
install a CI project. You use Powershell, command prompt, or your favorite code editors
terminal to run this.
composer create-project codeigniter4/appstarter your-project-name
As you can see we chose our project name “myfirstproject“.
Note: If this is the first time you are installing CI4 then there is a high chance you will
encounter the error of: “require ext-intl *> it is missing in your system”.
CodeIgniter 4 Installation Error
Resolving this error is simple. Follow these steps:
● Go to your PHP.ini file in XAMMP or Wamp.
● Then search for “extension=intl”. If it has a semicolon “;” before it. Remove it.
● And then restart your Apache of Xampp and Wamp.

Enable intl extension in php.ini to install Codeigniter 4 login session properly
Congrats! We have successfully installed CI and you should see the default greeting
message.
CodeIgniter welcome message after successful install
Install CodeIgniter 4 Manually
Even though using composer to install CodeIgniter is the best, sometimes you might need to
install CI manually. No worries it is a simple process:
1. Navigate to the Offical Website of CodeIgniter. Click here to Visit.
2. Choose your CodeIgniter version to download. We recommend choosing the latest
version. Don’t sweat, the coding process does not change dramatically anyway.

3. Download your CodeIgniter zip folder. And extract in your preferred localhost
environment and just run the project.
Now we are ready to code our Codeigniter user login and registration system.
CodeIgniter login and registration
Before we start now we will divide our code into 3 sections:
Views: Here we code our UI design with the help of Bootstrap5. We will use the include()
method to separate the header and footer. See below all files we created for view:
Views files in CodeIgniter
Login and Registration project
To make the navigation bar separate we have put them in:
“header.php“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Registration with CI4</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?php echo link_tag('assets/style.css'); ?>
</head>
<body class="parent_main">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo site_url(); ?>">Login & Register</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="<?php echo site_url(); ?>">Login</a>
</li>
<a class="nav-link" href="<?php echo site_url('register'); ?>">SignUp</a>
</li>
</ul>
</div>
</div>
</nav>
<?php if (isset($_SESSION['msg'])) : ?>
<div class="alert <?= $_SESSION['msg-class']; ?> alert-dismissible fade show"
role="alert"><?= $_SESSION['msg']; ?><button type="button" class="btn-close"
data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?>
Footer file has the basic code:
footer.php
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
In the end, we move on to the UI part of the login, register, and admin pages of Codeigniter 4
login and registration.
“home.php”
<?php include('includes/header.php'); ?>
<div class="container">
<div class="card mx-auto p-3 child_sub" style="width: 25rem;">
<h3 class="py-2 text-center mb-4">Login</h3>
<div class="card-body">
<form action="home/login" method="post">
<div class="input-group mb-4">
<span class="input-group-text"><i class="large material-icons">email</i></span>
<input type="email" class="form-control" placeholder="Email Address" name="email"
required>

</div>
<span class="input-group-text"><i class="large material-icons">fingerprint</i></span>
<input type="password" class="form-control" placeholder="Password" name="password"
required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-success" name="submit">Login</button>
</div>
</form>
</div>
<div class="result text-center"></div>
</div>
</div>
<?php include('includes/footer.php'); ?>
“register.php“
<?php include('includes/header.php'); ?>
<h3 class="py-2 text-center mb-4">Register</h3>
<form action="register/signup" method="post">
<span class="input-group-text"><i class="large material-icons">insert_emoticon</i></span>
<input type="text" class="form-control" placeholder="Name" name="name">
</div>
<span class="input-group-text"><i class="large material-icons">email</i></span>
<input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<span class="input-group-text"><i class="large material-icons">fingerprint</i></span>
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="text-center">
<button type="submit" class="btn btn-success" name="submit">Register</button>
</div>
</form>
</div>
<div class="result text-center"></div>
</div>
</div>
And our admin UI file:

“admin.php“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?php echo link_tag('assets/style.css'); ?>
</head>
<body class="parent_main">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo site_url('admin'); ?>">Admin Panel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page" href="<?php echo site_url(); ?>">Login</a>
</li>
<a class="nav-link" href="<?php echo site_url('register'); ?>">SignUp</a>
</li>
</ul>
<li class="d-flex">
<a class="btn btn-outline-danger" href="<?php echo site_url('logout'); ?>">Logout</a>
</li>
</div>
</div>
</nav>
<?php if (isset($_SESSION['msg'])) : ?>
<div class="alert <?= $_SESSION['msg-class']; ?> alert-dismissible fade show"
role="alert"><?= $_SESSION['msg']; ?><button type="button" class="btn-close"
data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<?php endif; ?>

<h4 class="py-2 text-center mb-4">Welcome to Admin, <?php echo
$_SESSION['loginname']; ?></h4>
</div>
</div>
</div>
Controller: Here goes our logic which takes data from the view’s HTML form and then
processes and sends it to our MySQL database. Here are our controller’s names that we will
use in CodeIgniter 4 login and Registration:
Controllers in Codeigniter user login
and registration project
Let’s go into the coding section for each file. BaseController is created by default by CI so
we don’t need to edit it.
Home.php
<?php
namespace AppControllers;
use AppModelsRegistermodal;
class Home extends BaseController
{
public $registermodal;
public function __construct()
{
$this->registermodal = new Registermodal();
}
public function index()
{
return view('home');
}
public function login()
{
$request = ConfigServices::request();
$email = $request->getVar('email');
$password = md5($request->getVar('password'));
$data = $this->registermodal->loginData($email);
if ($data->email == $email) {
if ($password == $data->password) {

$_SESSION['loginemail'] = $email;
$_SESSION['loginname'] = $data->name;
$this->session->setTempdata('msg', 'Login Details Success!', 300);
$this->session->setTempdata('msg-class', 'alert-success', 300);
return redirect()->to('/admin');
} else {
$this->session->setTempdata('msg', 'Password is incorrect! Try Again', 300);
$this->session->setTempdata('msg-class', 'alert-danger', 300);
return redirect()->to('/');
}
} else {
$this->session->setTempdata('msg', 'You Email is incorrect', 300);
}
}
}
The “Home.php” controller handles our login page in the project. It’s linked to our Model
“Registermodal.php” and processes the code of login.
Next up is “Register.php“. This controller controls the logic of the registration process.
<?php
use AppModelsRegistermodal;
class Register extends BaseController
{
public $registermodal;
{
$this->registermodal = new Registermodal();
}
{
return view('register');
}
public function signup()
{
$request = ConfigServices::request();
$password = md5($request->getVar('password'));
$insData = [
'name' => $request->getVar('name'),
'email' => $request->getVar('email'),
'password' => $password
];
if ($this->registermodal->insertData($insData)) {
$this->session->setTempdata('msg', 'Registration Successfully', 300);

$this->session->setTempdata('msg-class', 'alert-success', 300);
} else {
$this->session->setTempdata('msg', 'Registration Failed', 300);
}
}
}
Lastly, we have our final controller “Admin.php”. This simple controller summarizes code
related to the Admin page. And also it is the code that let us log out of our application by
using the session destroy method.
“Admin.php”
<?php
class Admin extends BaseController
{
{
return view('admin');
}
public function logout()
{
$this->session->destroy();
}
}
Model: This handles all the coding behind the database data insert. For this purpose, we
have the “Registermodal.php” file. Here is its code:
<?php
namespace AppModels;
use CodeIgniterModel;
class Registermodal extends Model
{
public $db;
{
$this->db = ConfigDatabase::connect();
}
public function insertData($data)
{
$builder = $this->db->table('users');

$result = $builder->insert($data);
return $result;
}
public function loginData($email)
{
$builder = $this->db->table('users')->where('email', $email);
$query = $builder->get();
return $query->getRow();
}
}
Congrats, we are almost finished. By now if you are tired then check out 15 isekai anime
recommendations for fun.
And here is a live demo of our CodeIgniter Login and Registration System:
Demo
Link to Database
To keep our login data, we are using our favorite MySQL database.
Database in Codeigniter user login and registration
You can learn to create a simple database from this post. But to link your MySQL database
with the CodeIgniter app, we must edit the file “database.php”.

Link Database to CodeIgniter 4
Conclusion
We hope you enjoyed our article on how to build a CodeIgniter 4 login and registration
system. We have made the login and registration source code available on GitHub, so check
it out if you’re interested in learning more about CodeIgniter.
Download CodeIgniter Login and Registration Source Code
We hope you enjoyed it, and thanks for reading along! Also check our post on how to build
an Image Converter that works with PNG, JPG, and GIF formats.
Ta-da! And Keep Coding.

Learn to build a CodeIgniter Login and Registration with source code.pdf

More Related Content

Similar to Learn to build a CodeIgniter Login and Registration with source code.pdf

More from Be Problem Solver

Recently uploaded

Learn to build a CodeIgniter Login and Registration with source code.pdf