Learn to build a CodeIgniter Login and Registration with source code

by Pawan

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 PHPbeginner.

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 useAPI 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 PHPdeveloper in our Gmail SMTPPHPmailer 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 PHPini file in XAMMPor Wamp

● Then search for “extension=intl”. If it has a semicolon “;” before it. Remove it.

● And then restart yourApache of Xampp and Wamp

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

<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>

<li class="nav item">

<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: footerphp

<script src="https://code jquerycom/jquery 3 6 0 min js"></script> <script src="https://cdn jsdelivrnet/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/headerphp'); ?>

<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="EmailAddress" name="email" required>

</div>

<div class="input group mb 4">

<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/footerphp'); ?> “register.php“

<?php include('includes/headerphp'); ?>

<div class="container">

<div class="card mx auto p 3 child sub" style="width: 25rem;"> <h3 class="py 2 text center mb 4">Register</h3>

<div class="card body"> <form action="register/signup" method="post"> <div class="input group mb 4">

<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>

<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="EmailAddress" name="email"> </div>

<div class="input group mb 4">

<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> <?php include('includes/footerphp'); ?>

And our admin UI file:

<!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"> <li class="nav item"> <a class="nav-link active" aria-current="page" href="<?php echo site url(); ?>">Login</a> </li>

<li class="nav item"> <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; ?> <div class="container"> <div class="card mx auto p 3 child sub" style="width: 25rem;"> <div class="card body">

<h4 class="py 2 text center mb 4">Welcome toAdmin, <?php echo $ SESSION['loginname']; ?></h4> </div> </div> </div> <?php include('includes/footer.php'); ?> Controller: Here goes our logic which takes data from the view’s HTMLform and then processes and sends it to our MySQLdatabase. Here are our controller’s names that we will use in CodeIgniter 4 login and Registration:

$ 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!TryAgain', 300); $this >session >setTempdata('msg class', 'alert danger', 300); return redirect()->to('/'); } } else { $this >session >setTempdata('msg', 'You Email is incorrect', 300); $this >session >setTempdata('msg class', 'alert danger', 300); return redirect() >to('/'); } } }

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 namespaceApp\Controllers; useApp\Models\Registermodal; class Register extends BaseController { public $registermodal; public function construct() { $this >registermodal = new Registermodal(); } public function index() { return view('register'); } public function signup() { $request = \Config\Services::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); return redirect() >to('/'); } else {

$this >session >setTempdata('msg', 'Registration Failed', 300); $this->session->setTempdata('msg-class', 'alert-danger', 300); return redirect() >to('/'); } } }

Lastly, we have our final controller “Admin php” This simple controller summarizes code related to theAdmin page And also it is the code that let us log out of our application by using the session destroy method.

“Admin.php” <?php namespaceApp\Controllers; classAdmin extends BaseController { public function index() { return view('admin'); } public function logout() { $this->session->destroy(); return redirect() >to('/'); } }

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 namespaceApp\Models; use CodeIgniter\Model; class Registermodal extends Model { public $db; public function construct() { $this >db = \Config\Database::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 MySQLdatabase

Database in Codeigniter user login and registration

You can learn to create a simple database from this post But to link your MySQLdatabase with the CodeIgniter app, we must edit the file “database php”

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