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:
This table stores details of all customers who completed signup successfully.
Below are the columns in this table.
id - It is the primary key and auto incremented id of the customer
name - Name of the customer
email - Eamil Id of the customer
password - Password for login
Create table script for this table is given below; you can use this code to create the table.
After you create the table, please verify if table structure is same as above.
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.
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:
This top menu will be included in every page. Let's see the code for this:
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:
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.
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
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:
View for Login Page
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:
Below is the code for togglePwd() function:
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.
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:
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:
Update routes file (application/config/routes.php)
I updated routes.php for default controller which is customer. So, below code is for routes.php:
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.
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:
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.
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 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 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.