SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
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>
<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:
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>
<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/footer.php'); ?>
“register.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">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="Email Address" 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/footer.php'); ?>
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">
<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 to Admin, <?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 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);
$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
namespace AppControllers;
use AppModelsRegistermodal;
class Register extends BaseController
{
public $registermodal;
public function __construct()
{
$this->registermodal = new Registermodal();
}
public function index()
{
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);
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 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
namespace AppControllers;
class Admin 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
namespace AppModels;
use CodeIgniterModel;
class Registermodal extends Model
{
public $db;
public function __construct()
{
$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.

Weitere ähnliche Inhalte

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

Validating A Product Key In A Vs
Validating A Product Key In A VsValidating A Product Key In A Vs
Validating A Product Key In A Vs
Raj Chanchal
 

Ähnlich wie Learn to build a CodeIgniter Login and Registration with source code.pdf (20)

Some Features make CodeIgniter Powerfull PHP framework.pdf
Some Features make CodeIgniter Powerfull PHP framework.pdfSome Features make CodeIgniter Powerfull PHP framework.pdf
Some Features make CodeIgniter Powerfull PHP framework.pdf
 
CODE IGNITER
CODE IGNITERCODE IGNITER
CODE IGNITER
 
Build a notepad application with PHP, MongoDB, and IBM Bluemix - by Vikram Va...
Build a notepad application with PHP, MongoDB, and IBM Bluemix - by Vikram Va...Build a notepad application with PHP, MongoDB, and IBM Bluemix - by Vikram Va...
Build a notepad application with PHP, MongoDB, and IBM Bluemix - by Vikram Va...
 
Proper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino DevelopersProper Connections Development for Proper Domino Developers
Proper Connections Development for Proper Domino Developers
 
OpenWhisk by Example - Auto Retweeting Example in Python
OpenWhisk by Example - Auto Retweeting Example in PythonOpenWhisk by Example - Auto Retweeting Example in Python
OpenWhisk by Example - Auto Retweeting Example in Python
 
Dixio ForWeb, the smart dictionary for your web
Dixio ForWeb, the smart dictionary for your webDixio ForWeb, the smart dictionary for your web
Dixio ForWeb, the smart dictionary for your web
 
Benefits of the CodeIgniter Framework
Benefits of the CodeIgniter FrameworkBenefits of the CodeIgniter Framework
Benefits of the CodeIgniter Framework
 
Automation in iOS development
Automation in iOS developmentAutomation in iOS development
Automation in iOS development
 
Designing Modules in Python
Designing Modules in PythonDesigning Modules in Python
Designing Modules in Python
 
How CodeIgniter Made Me A Freelancer
How CodeIgniter Made Me A FreelancerHow CodeIgniter Made Me A Freelancer
How CodeIgniter Made Me A Freelancer
 
Introduction To Code Igniter
Introduction To Code IgniterIntroduction To Code Igniter
Introduction To Code Igniter
 
Git and git hub basics
Git and git hub basicsGit and git hub basics
Git and git hub basics
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Ct bot tutorial
Ct bot tutorialCt bot tutorial
Ct bot tutorial
 
Appium_set_up
Appium_set_upAppium_set_up
Appium_set_up
 
Developer Tutorial: WebAuthn for Web & FIDO2 for Android
Developer Tutorial: WebAuthn for Web & FIDO2 for AndroidDeveloper Tutorial: WebAuthn for Web & FIDO2 for Android
Developer Tutorial: WebAuthn for Web & FIDO2 for Android
 
Codeigniter, a MVC framework for beginner
Codeigniter, a MVC framework for beginnerCodeigniter, a MVC framework for beginner
Codeigniter, a MVC framework for beginner
 
Validating A Product Key In A Vs
Validating A Product Key In A VsValidating A Product Key In A Vs
Validating A Product Key In A Vs
 
Codeigniter framework
Codeigniter framework Codeigniter framework
Codeigniter framework
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC Frameworks
 

Mehr von Be Problem Solver

6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf
Be Problem Solver
 

Mehr von Be Problem Solver (6)

Image Converter script for PNG to JPG & JPG to PNG.pdf
Image Converter script for PNG to JPG & JPG to PNG.pdfImage Converter script for PNG to JPG & JPG to PNG.pdf
Image Converter script for PNG to JPG & JPG to PNG.pdf
 
Link your HTML Form to Google Sheet in just 3 Steps.pdf
Link your HTML Form to Google Sheet in just 3 Steps.pdfLink your HTML Form to Google Sheet in just 3 Steps.pdf
Link your HTML Form to Google Sheet in just 3 Steps.pdf
 
Submit form with Ajax and jQuery without reloading page.pdf
Submit form with Ajax and jQuery without reloading page.pdfSubmit form with Ajax and jQuery without reloading page.pdf
Submit form with Ajax and jQuery without reloading page.pdf
 
Learn how to use API with 2 API examples.pdf
Learn how to use API with 2 API examples.pdfLearn how to use API with 2 API examples.pdf
Learn how to use API with 2 API examples.pdf
 
How to develop an API with PHP, JSON, and POSTMAN in 9 Steps.pdf
How to develop an API with PHP, JSON, and POSTMAN in 9 Steps.pdfHow to develop an API with PHP, JSON, and POSTMAN in 9 Steps.pdf
How to develop an API with PHP, JSON, and POSTMAN in 9 Steps.pdf
 
6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf
 

Kürzlich hochgeladen

The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
heathfieldcps1
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
中 央社
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyes
ashishpaul799
 

Kürzlich hochgeladen (20)

Discover the Dark Web .pdf InfosecTrain
Discover the Dark Web .pdf  InfosecTrainDiscover the Dark Web .pdf  InfosecTrain
Discover the Dark Web .pdf InfosecTrain
 
MichaelStarkes_UncutGemsProjectSummary.pdf
MichaelStarkes_UncutGemsProjectSummary.pdfMichaelStarkes_UncutGemsProjectSummary.pdf
MichaelStarkes_UncutGemsProjectSummary.pdf
 
An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptx
 
Essential Safety precautions during monsoon season
Essential Safety precautions during monsoon seasonEssential Safety precautions during monsoon season
Essential Safety precautions during monsoon season
 
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdfPost Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17How to Analyse Profit of a Sales Order in Odoo 17
How to Analyse Profit of a Sales Order in Odoo 17
 
Championnat de France de Tennis de table/
Championnat de France de Tennis de table/Championnat de France de Tennis de table/
Championnat de France de Tennis de table/
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17How to the fix Attribute Error in odoo 17
How to the fix Attribute Error in odoo 17
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
 
ppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyesppt your views.ppt your views of your college in your eyes
ppt your views.ppt your views of your college in your eyes
 

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

  • 1. 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?
  • 2. 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.
  • 3. 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.
  • 4. 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.
  • 5. 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>
  • 6. <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: 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>
  • 7. </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/footer.php'); ?> “register.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">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="Email Address" 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/footer.php'); ?> And our admin UI file:
  • 8. “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"> <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">
  • 9. <h4 class="py-2 text-center mb-4">Welcome to Admin, <?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 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) {
  • 10. $_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); $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 namespace AppControllers; use AppModelsRegistermodal; class Register extends BaseController { public $registermodal; public function __construct() { $this->registermodal = new Registermodal(); } public function index() { 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);
  • 11. $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 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 namespace AppControllers; class Admin 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 namespace AppModels; use CodeIgniterModel; class Registermodal extends Model { public $db; public function __construct() { $this->db = ConfigDatabase::connect(); } public function insertData($data) { $builder = $this->db->table('users');
  • 12. $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”.
  • 13. 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.