How to create registration and login forms in CodeIgniter 3 and MySQL

Registraion and Login form in a web application is very common. using CodeIgniter 3, we can develop these forms easily. In this topic, we will create user registration and login using a menu in CodeIgniter 3 and MySQL. Customer can click on Signup from the menu to complete a signup form. Once Signup is successful, he/she can login into the application. After successful login, it displays the name of the user with logout link on the menu. You will also learn form validation in CodeIgniter 3.

Step 1 - Create a MySQL table in for customer details

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

Table: customer

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

signup and login using a menu 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 - Eamil Id of the customer
  4. password - Password for login
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, please verify if table structure is same as above.

Folder Structure

Before I go to next step, let me show the folder structure I am using. I have created a folder named 'user' under xampp/htdocs and kept all CodeIgniter folder/files in this folder along with our custom files. So, the root directory is xampp/htdocs/user.

signup and login using a menu in codeigniter 3

You can see, we have Controller - User.php, Model - ModelUser.php and views for header, footer, home, signup and login 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 Header (menu), footer and views for Signup and Login Pages

We will have a header and footer for each page. Our header will be the top menu. It displays the menu with signup and login as menu items. When customer is logged in, it shows a welcome message with the name of the customer and a logout link. See below:

Before Login

registration and Login in CodeIgniter 3

After Login

User Registration and Login System in CodeIgniter

This top menu will be included in every page. Let's see the code for this:

application/views/header.php

It simply checks if customer is logged in by verifying session login data. If logged in, it prints a message and logout link. If not logged in, just prints Signup and Login links.

Below is the code for footer:

application/views/footer.php

We will display this footer at the end of every page.

Now let us create the views for home page (home.php), signup page (signup.php) and login page (login.php).

View for Home Page

I am not creating a complete home page. I will just display the a line to show that this is the home page. There is some jQuery scripts added in every page, to highlight the selected (active) menu item in the menu bar.

application/views/home.php

It simply displays an <h1> element and a jQuery script. In the scripts it is adding active class for home menu item.

View for Signup Page

Codeigniter Login and Registration Tutorial with Source Code

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

application/views/signup.php

View for Login Page

Complete User Registration System Using Codeigniter 3

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:

application/views/login.php

A JavaScript function is used for the option "Show Password" When user clicks on it, it calls a JavaScript function togglePwd() written in scripts.js.

Below is the code for togglePwd() function:

assets/js/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 I am using for all these views.

style.css

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

So, these are the views, now let's go to controller section.

Step 3 - Write Controller code (User.php)

Our controller class will have an index() method to display the home page, signup() method, login() method and logout() method.

Controller method index()

In index() method, it just loads the view that displays home page.

You can see it loads the view for home page.

Controller Method signup()

When user clicks on Signup link from the menu, this method is called. It writes validation rules for each input field in the form. If all fields are validated successfully, it calls a model method to insert the row in the database table. Let's see the code:

Validations are performed on the input data name, email and password using form_validation->set_rules() method. For details on how to do form validation in CodeIgniter, you can read the topic How to Validate Form Data in CodeIgniter 3. For successful validation of all fields, it calls Model method signup()

Controller Method login()

Method login() is called when user clicks on Login link from the menu. Let's see the code:

If validation is successful, it calls a model method named check_user() with email and password as parameter. If they match with database stored values, it returns the selected row and sets session data for the email and name of the user and redirects the user to 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 (ModelUser.php)

The Model class will have two methods, one for signup and other for login. So now let's see the code for these methods in the model:

Model Method signup()

Model Method check_user()

It takes the parameters email_id and password and gets the row from customer table that matches these values. If it gets the matching row, it returns that row to the controller, otherwise, it returns false. Let's see the code below:

Note md5 hash is generated for password in where condition as password was stored in database with md5 hash during signup.

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

Step 5 - Update Configuration files and Test the Application

Let us now update few setup files before we run the application.

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

CodeIgniter 3 Login

  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' with no 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:
  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.

    CodeIgniter Database Login Form

    Content of .htaccess file is given below:

    Using URL rewriting rule, it redirects all request to new URLs without index.phpexcept those which are not existing files or directories.

Test The Application

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

How to create login and registration page in CodeIgniter 3

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

Also test the validation for signup and login. You should see the proper validation messages.

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

signup and login using a menu in codeigniter 3Note: 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.

download code for signup and login using a menu in codeigniter 3Download Source Code

I have put codes for controller, model and view 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.

signup and login using a menu in codeigniter 3Conclusion

Signup and login system is important in all projects. We have developed it using CodeIgniter 3 and MySQL database. Also, we have developed a simple top menu. Hope it will be useful for you.