Create a Register and Login System with Codeigniter and Bootstrap - Part 1

Hi guys! I'm back with a new article for web development. Frameworks are widely used now  in web development field. They make our projects easy and not difficult to use if anyone learns it carefully. There are so many frameworks freely available for front end and back end of a web application. Here I will use the two frameworks called Bootstrap and CodeIgniter to create this login system. If anyone has no idea about these frameworks, Bootstrap is a CSS framework and CodeIgniter is  a PHP framework. For more details, just google it...

I have already uploaded article about configuring  Bootstrap and CodeIgniter. If you are unaware of it, links are here.

For Bootstrap : Bootstrap configuration

For CodeIgniter : CodeIgniter configuration

The first thing I need to tell is only the important points  will be explained here.
Download source files from my Github.

• First make a project folder to include these files. My folder -> CILoginApp

• Then place the CodeIgniter folders and files in this folder which is extracted from the downloaded zip. 

• Now make a sub folder called assets within the project folder. 

• Go to the official site of Bootstrap and download the version 3 or 4 that you like. Visit here: https://getbootstrap.com/docs/4.1/getting-started/download/

• Extract the zip file. There are 2 folders called css and js (sometimes there may be a fonts folder).

• Then copy and paste the 2 Bootstrap folders into the assets folder. 

• If you need to have font-awesome icons in your files, download the font-awesome zip and extract it.  Link: https://fontawesome.com
  Then place that folder in the project folder, as I have done here.  Final Structure;

Now you need to create a database to store the user details. In my case database details like this. You can use cidb.sql file in the source, to create database.

DB name  ->  cidb
DB table  ->  users
DB structure  ->

Before start coding, you should configure some files in CodeIgniter to make our system working.

Go to application/config/autoload file. You need to include some libraries and helpers that are needed for our app. Those will be auto loaded whenever it is used by doing these changes. Do the following changes.

$autoload['libraries'] = array('database', 'form_validation', 'session')

$autoload['helper'] = array('url', 'form','html');

Then go to application/config/database file. Here you need to include your DB details to build up the database connection.
For DB connection; visit : Configure DB

Now you have to create two views including forms called register_view.php and login_view.php to take the data of a user.
First move  to the code of register_view.php
Important: You will come across some confusing parts;
     echo form_open( ), form_close( ), validation_errors( )
I will explain them late in this tutorial. Don't think about it now and get the idea of  coding the registration form with Bootstrap.
Get the code through this link :
https://github.com/SalithaUCSC/LoginWithCI/blob/master/application/views/register_view.php

Final form will be like this.

Now navigate to  application/controllers/ folder. Create controllers called Login for login, Register for registration and another called Home.

Home Controller

What is this? This is used later. But create now for future purposes. This file contains the functions to load the UI's. Specially when you have some pages with no database connected activities, You have to just load the page. When you visit web sites, there are contact pages, about us pages and many other pages which are just views. They haven't backend coded in PHP and they are just UI pages coded  in HTML and other stuff. As an example, when registration is done you need to redirect to the same register page again. You do not have back end for this; only the view. So we can do it like this.
In Home controller, include a function called Register( ).
Its code is  to just load the view. Here, register_view is the view for registration which is going to be created next.

    public function Register() {
        $this->load->view('register_view');
    }

We can create another function similarly to load the login page.

Now  move to the code of Register.php file and register_view.php.

Function - registerUser( ); Register Controller

This is used to add new users into the database through the registration form. Create class with the name same as the  name of controller. Extend the class to CI_Controller. Now see the code.

Note: Any time you want to open this  controller, use the below URL ;
localhost/Projects/CILoginApp/index.php/Home/Register

1. $this->form_validation->set_rules();

$this->form_validation->set_rules('username','Username','required|is_unique[users.username]');

I have used 3 parameters. Last parameter is the validation rules  defined in CodeIgniter. Parameters are separated with | symbol.
required means you can not submit data without a particular input.
is_unique[users.username] means the particular input should be unique. In my case, user can not use the same name for username already stored in the database.
users.username refers to the relevant field for the username in the table name user.
So every input field must be checked like this according to your choice.


2. echo form_open('Controller/Method'); and echo form_close('');

When we create forms, normally we are used to be include the below line for backend; 

       <form method="POST" action="action_page.php"></form>

When it comes to CodeIgniter we use the echo form functions for this. Similar to the starting tag of traditional form, we use echo form_open(''). Open a php tag since this is a php part and echo it. We shout pass the action page within this form_open. Where is the action page? It is the controller file going to be used for registration. So we include here the relevant Controller/Method. In my case;

   <?php echo form_open('Register/registerUser') ?>

After opening the echo for opening of the form it should be closed at the end of form. So, there we use 

   <?php echo form_close() ?>

3. $this->form_validation->run()

This is  used to run the validation as the meaning of the words. This can be equal to TRUE or FALSE. If this becomes TRUE, then next step should be to insert them to the DB. 

Since this step is connected with the database, you need to create a Model file in models folder. I have created it as Model_user.php. The logic behind the insertion of data and all other function that use database, is in this model file.

Function - insertUser( ); Model_user Model

This is used to code the  logic for database activity of insertion. Create class with the name same as the  name of model. Extend the class to CI_Model. Now see the code.

4. $this->input->post('username')

Add a function called insertUser in the model to get the input data into DB.
Create an array to assign the inputs as its elements. In my case the array; $data = array( )
Then assign all the inputs  to this using the below method.

   'username' => $this->input->post('username')

After assigning them, you need to insert the data in this array, to the database table; users. Here, password  is encrypted with sha1 function and stored in the database for security measures.

5. $this->db->insert('table_name',$array);

Now the data can be inserted to the database. After finishing this model function, you need call this through the Controller file. Again move to the controller file.
Now we are going load the model and the method inside it to insert data.

    $this->load->model('Model_user');
    $this->Model_user->insertUser();

Now we need to get to know whether the data has been entered or not to the DB. As usual a message is used to do this.

6. $this->session->set_flashdata('success','You are registered!');

Here, session library is set and flashdata() is used to display a temporary message for a particular session. Message name is success and the message is You are Registered!. This should be displayed in the register_view file. So we include another CodeIgniter function in the register_view.php file before the form. For these messages, I have included a style defined for in-built alert in Bootstrap.

If the session has got a correct registration, success message will be passed to display th the register_view like this.

Question?
If someone has not entered the input for contact number, what would happen? 
According to my code, user needs to enter data to all the fields to register. So in this situation, data should not be submitted. Error messages are required to be shown.

Here you find  echo validation_errors(); I think your confusion appeared for register_view  is  gone now?
Validation messages are not made by me. Those have been defined in CodeIgniter according to your validation rules given for inputs(3rd parameter). 

When I tried with already stored username, no value for NIC and wrong value for confirm password  I got the following error messages as I included "required" for all inputs, "is_unique" for username and "matches['password']" for confirm password.

After a successful registration, user is redirected to the register_view with a message. This Redirect is  not the same as viewing of views or models. We don't use $this->load->view(''); to redirect. For this we use the  Home controller we created first. Register function in the Home controller is called and then the view is displayed.

    redirect('Home/Register');

If the form_validation_run() becomes FALSE, again the view file is loaded in the else part.

Okay...! Now you have a Registration system. I think you got the idea to create this. Compare the source files with this explanation. Your doubts will be disappeared. Next part of this article will be based on how to login through this registration. Wait for it!
Good Luck!