In this tutorial, I’m going to create a very basic login page which where the user can register and login with username and password. To keep this tutorial simple I’m not using huge CSS code so output may look ugly but here you will find everything you need to learn about how registration or login is done using PHP.
Here I’m going to assume that you already have followed my previous tutorial “PHP Tutorial 1- Setup PHP” and your system is ready to write PHP code.
Contents of this tutorial
- Database creation
- How login page will look like
- Create a form
- Full code of login.php
1) Database creation:
To keep this tutorial sort here I did not discuss how to create a database using phpmysql. If you don’t know how to create a database, you can check it here. PHP – How to create a database?
You have to create a database name “chat” under which add a table name “admin” which will store our registered user details. “admin” table has three fields “id”, “username”, “password”.
Create a project folder named “chat_system” under “htdocs” if you are using XAMPP or under “www” if you are using WAMP. If you do not know where those folders are please follow this.
Under “chat_system” folder create a file name “config.php”. This file stores our database information like database name, database user etc.
- ‘$dbname’ store database name which we are going to use in this tutorial.
- ‘$dbuser’ store database user, here we use default user which is ‘root’.
- ‘$dbpass’ store password for the database, we do not set any password for this database so it will be null. We denote null as ”.
3) login.php output(This is how login page will look like):
Under “chat_system” folder create a file called login.php in this file we will write our login page code. In this file, we will design a simple web page which consists of two text box and two buttons. In that text, box user can enter username and password. One of those buttons is for registration and another one for login.
the output of login.php will look like this,
I will divide login.php into several parts to explain everything. At the bottom, you will find the complete code of “login.php”.
4) Create a form:
Here in the first line, we create a form whose id is “myForm” which contains two input text and two buttons. The first button is for insert user data into database and second button is used for user login.
You may be asking why did not I did not use submit button. The reason behind it is there are two buttons if I use submit button then on the controller side it’s quite bit difficult to determine which button is clicked. Later I submit this form to those functions, you can see those below.
- document.getElementById(“ID”) – getElementById() method returns the element that has the ID attribute. Here we used document.getElementById(“ID”).value this will return the value stored by that element. So here we will get which is written in text boxes.
- objForm.action – Here I’m altering “myForm” action part. So now if the form is submitted then it will submit to this modified location.
- the action part is written as,
1. Name of the file in which control will be forwarded.
2. As you can see after filename an ‘?’ is added. “?” is known as a Query string. After this, we can pass key-values pairs and use the server side. Here we will use action and assign a name to action. This name should be unique as on the server side(forwarded page) we will identify this action by this name.
Full login.php code:
3. ‘&’ is used to append strings to a Query string. We will append all values which want to pass on the server side. Here first part of this is unique name which is used to retrieve the values, for example,
username is a unique name will be used in server side and uname is the value we are passing.
6) Full code of login.php:
After login.php is submitted page control will be forwarded to loginController.php. I will discuss that in next part of this tutorial. You can find that here.
I would like to hear from you, tell me in comments below if you have any queries or feedback. Thank you.