How to develop a login and registration system in CodeIgniter 3

In this topic, we will create a simple application for registration and login in CodeIgniter 3. We will use email id as the login id. There will be a simple home page with options for Signup and Login. Click on Signup to complete registration by entering name, email_id and password. Once registration is successful, customer can login into the application. The application will be developed using CodeIgniter 3 and MySQL. I will assume you have basic knowledge of CodeIgniter 3 and MySQL.

Step 1 - Create a MySQL table for customer details

Let us create the table named 'customer' in MySQL database. Table structure is given below:

Table: customer

This table stores details of all customers who completed signup successfully.

create login and registration page in CodeIgniter 3

Below are the columns in this table.

  1. id - It is the primary key and auto incremented id of the customer
  2. name - Name of the customer
  3. email - Email Id of the customer
  4. password - Password for login
MySQL create table script for this table is given below; you can use this code to create the table.

customer.sql

After you create the table, verify if table structure is same as above.

Folder Structure

I have created a folder named 'customer' under xampp/htdocs and kept all CodeIgniter folder/files in this folder along with our custom files. So, the root directory is xampp/htdocs/customer.

create login and registration in CodeIgniter

You can see, we have Controller - CustomerController.php, Model - ModelCustomer.php and three views under views folder. Folder 'assets' is created for the purpose of keeping all custom stylesheets, JavaScripts and image files. Here we have css/style.css and js/scripts.js for our application.

Step 2 - Create the views for Home, Signup and Login Pages

There are three views for home page (home.php), signup page (signup.php) and login page (login.php). Additionally, there will be a custom css file and a small piece of JavaScripts for showing/hiding password in login page. Let us take a look at them one by one.

View for Home Page

Our home page is simple, it just displays two links, one for signup and other for login when the customer is not logged in. But when customer is logged in, it will display welcome message with the name of the customer and a logout link. Below are the screens for before login and after login:

Before Login

codeigniter login and registration source code free download

After Login

codeigniter login and registration source code free download

Let's see the code below:

application/views/home.php

If session data is set, it displays "Welcome" with customer name. If session data is not available, it displays two links, Signup and Login.

View for Signup Page

codeigniter login and registration source code

Signup or registration page displays a form for the customer to fill and submit. It has name, email id, password and confirm password fields. Then a submit button. See the below code for signup page:

application/views/signup.php

In <form> action, it calls signup() method of the customer controller. For each input field validatione are done in the Controller and validation message for each input gets printed just below the input field in the form.

View for Login Page

codeigniter-login and registration

Login page will have email_id and password as input fields. For each input an error message will be displayed in case validation fails. In <form> action, it calls login() method of the controller. See below code for the login view:

application/views/login.php

We will use JavaScript function for the option "Show Password" which is added as checkbox in the login form. When user clicks on it, it calls a JavaScript function togglePwd() defined in scripts.js.

Below is the code for togglePwd() function:

scripts.js

This function changes the type of the password field in login page, from "password" to "text" and vice versa.

Let me give the stylesheet also I am using for all these views.

style.css

I just added few simple styles here, you can always add better styles.

So, our views are done, now let's go to controller section.

Step 3 - Write Controller code (CustomerController.php)

Our controller function has an index() method to display the home page, signup() method to display and process signup form, login() method for customer login and logout() method.

Controller method index()

index() method is executed by default in a controller. In this method it just loads the view that displays home page.

Controller Method signup()

It writes CodeIgniter 3 validation rules for each input field in the form. If validation is unsuccessful for a field, it reloads the view with error message displayed corresponding to the field for which validation failed. Let's see the code for signup() method.

Validations are performed on the input data using form_validation->set_rules() method. For details on how to do form validation in CodeIgniter 3, you can read the topic How to Validate Form Data in CodeIgniter.

For successful validation of all fields, it calls Model method signup() which inserts the signup details in database table

Controller Method login()

Method login() is called when user clicks on the Login link in Home page. This method does some validation and then checks with database table to see if credentials are matching. If match found, it redirects the user to home page, otherwise it reloads login view with the error message. Let's see the code:

It sets session data for email and name using an array $sess_array[] and redirects the user to the home page.

Controller Method logout()

Method logout() deletes the session and redirects the user to home page. See below:

So, these were our controller methods, now let's see the Model methods in next step.

Step 4 - Write Model code (ModelCustomer.php)

Customer Model has two methods, one for signup and other for login. For signup, model method name is signup(). This method takes the input data in an array and uses $db->insert() method to insert row in customer table. For login you have seen, check_user() method is used. So now let's see the code for these methods in the model:

Model Method signup()

Model Method check_user()

Our views, controller and model are developed. Now we need to do some setup/configuration changes in CodeIgniter before we run the application. Let's do that in next step.

Step 5 - Update Configuration files and Test the Application

We will update below files in config folder and also, we will have .htaccess file in the root directory. See below:

login in codeigniter with database

  1. Update autoload.php (application/config/autoload.php)

    I have added 'database', 'session' and 'form_validation' in autoload libraries.

    Also, 'url' and 'form' are added in helper array.

  2. Update config file (application/config/config.php)

    Set 'base_url' and 'index_page' as below in this file:

  3. Update database setup file (application/config/database.php)

    As I mentioned before, I am using a database named 'demo' in localhost with user 'root' and blank password, so I updated database.php as below:

  4. Update routes file (application/config/routes.php) I updated routes.php for default controller which is customer. So, below code is for routes.php:

    Here I only updated default_controller as customer, rest all in the file remain same.

  5. Update .htaccess (hypertext access) file to remove index.php from the URL

    .htaccess file is used to do configuration changes for a directory. I have kept .htaccess file in my root folder which is xampp/htdocs/customer.

    login and registration form in codeigniter 3

    Content of .htaccess file is given below:

    Using URL rewriting rule, it redirects all request except those which are not existing files or directories.

Test The Application

Make sure in your XAMPP control panel Apache server and MySQL services are running. Open the browser and run localhost/customer. You will see the home page displayed as below:

codeigniter 3 login and registration

Click on Signup and do a successful registration. Then using the email and password as given during registration, try to login. You should be able to login successfully and see the message displayed on the screen with the name and logout link. Also test the validation for signup and login.

Our development and testing are done. Hope you could understand all the steps and could test it successfully.

codeigniter 3 login pageNote: For simplicity, I have not enforced any password rule in signup form. You should add at least some minimum requirement for password, may be a minimum length can be given.

codeigniter 3 login formDownload Source Code

I have put codes for controller, model and the views in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can use the code as is or you can modify them as per your requirements.

codeigniter 3 register formConclusion

Developing registration and login forms in CodeIgniter 3 can help you understand CodeIgniter 3 if you have just started working with it. Creating the views, writing Controller functions, form validations and database select-insert statements, quite a few areas you have to code for. This gives you a better understanding of how CodeIgniter 3 works.