When you are learning to develop websites, this application or this system is the one you have to develop many times. User Login system is used in almost every website which has major or minor user interaction involved in it. Usernames and passwords are stored in database and are retrieved at runtime using SQL Queries and based on the record set retrieved the match is performed and if it is in success the user is redirected to the welcome landing page or else on an error page or try again page.
Today I am going to teach you how to create user login system in a very simplistic way which doesn’t involve too much complications for a starter to get so annoyed to stop thinking of programming right away. Instead I am going to make it so easy that you will enjoy it and will be eager to learn more and will go to the next part to learn it all.
Today in this first part I am going to show you how to create user interface for login system and how to send values to the database and then write SQL statement to retrieve them from the database to perform the match for the provided username at the time of login attempt.
Step=1: Create Login Form
The form which I have created for this tutorial looks like this;
This is a very simple form which is aligned in HTML Table. Open a simple HTML file and paste the following code in the body section of the file.
<div id=”loginform” >
<form name=”form” action=”loginuser.php” method=”POST”>
Username </td><td> <input type=”text” name=”txtname” /></td></tr>
<tr><td>Password </td><td> <input type=”password” name=”txtpass” /></td></tr>
<tr><td><input type=”button” value=” Login ” onclick=”val()” /></td>
<td><input type=”reset” value=” Cancel ” /></td></tr></table>
The above code will create a simple form which will be aligned in the left corner of the page. To make some styling of this form, change the font, bring the form in the center of the page, I have written some CSS (Cascading Style Sheet) for the Div container in which the form is placed and the table which is used in the form. In the head section of this HTML page; simply paste the following code;
font-family:Arial, Helvetica, sans-serif;
Save the file and open it in the browser, the form will be displayed exactly as it is shown above in the image and will be centered in the middle of the page. Alright! Let’s move to the next step;
Step 2: Create Database
Before creating database, I need to tell you something. First of all, PHP is a server side scripting language so you need a web server to run it. Secondly Web Servers follow their own directory protocol so you need to follow them. Don’t be confused what that means, I will tell you later all about it in a theoretical and boring tutorial. Let’s just focus on this jolly part and I tell you that you will really feel thrilled when this will work on your machine and you will have a complete login system working with full understanding. The server which I am running is WAMP and if you want to use WAMP you can easily download it from WAMP Website or Search an alternative on Google.
The default directory to store your files in WAMP is C:\wamp\www if you have installed WAMP on your C-Drive. What I do mostly is to create folders in www folder so that I don’t get confused in my own files and especially it is good to separate files of different projects.
When you have WAMP installed, open your localhost page by typing http://localhost in your browser. It should take you to;
I already have a database called users, you can create one by going to database option write the name and hit create that’s it. Once you are in the database you have to create table. For this tutorial I am going to create a table by the name login with 5 fields in it. Follow the screens.
Once the database and the table are ready now is the time to understand the form and how to interact with the database. If you look at the first line of form tag you will see there is an attribute action=”loginuser.php” and method=”post”. Forms are the elements which are used for user interaction with the system. Forms take data from the user and send it to the server. These two attributes action and method tell the server from the form, what it should do with the data which is collected from the form. I have written a small form validation function too which I have called val() and have called it on onClick event of the submit button. The function performs basic form validation and submits the form if the validation checks are passed. These checks include empty fields and pure numeric data in username.
For Validation please include the following script before the style tags.
alert(‘Enter username first’);
else if (form.txtpass.value==””)
alert (“Enter password first”);
When the form is submitted the action attribute of the form tells where to send the data. We have loginuser.php as value of the action attribute which is actually a PHP file. What it does is, it creates a connection with the database, retrieve username and password values from the form and matches it with the values in table. If there is a match found it re-directs the user to a success page if not it will send the user an error message.
Alright! Let’s make the PHP Script file. Create a new PHP file save it as loginuser.php and make sure you place it in the same folder where your form file is. Now the first thing you need to do in the beginning of the file is to create a connection to the server and select the database which you want to use for this script. To create a connection there is a built-in function is PHP and its syntax is;
For my local machine the server name is localhost, the username is root and I don’t have a password for my local server. These are the by default settings if you have installed a fresh copy of WAMP or XAMP on your machine. The next statement is to select the database to use; same like connection PHP again has a built-in function to select the database and the syntax is;
So the beginning of our file will look like this;
The database which I am using is named as users in my local machine. Now it is time to fetch values of the form and store them in variables. It’s as easy as eating ice-cream. PHP uses built-in access methods based on the method used in the Form to send the data. In my form code I used method=”post” now I will use the same access reference and the syntax is;
And to store it in a variable I will simply save it in a variable of my choice like;
Where txtname, is the field name for user input box in the form, same thing we will do to save password in a variable;
Now is the time to mess with database. It is not actually messing in bad terms, it is just asking database like inquiring and we all know to inquire a database we write a query. The logic here is to fetch the record from the database which matches both username and password. The query is simple;
$query=”SELECT * from login WHERE username=’$username’ AND password=’$password’”;
The charm of blending sql in PHP is that we can use PHP variables in SQL Queries, Lovely isn’t it. So we wrote a query which will only select or gives a result if both of options are matched But it is not sufficient. After the query is written we have to tell the PHP compiler to execute the query and then save the results in a record set or a variable. Like;
Pretty simple, mysql_query() is a built-in PHP function which executes the query and fetch the records and to save the records we placed it in result variable. The next thing is to check whether the query return something or not. Again we use the power of PHP Built-in functions; we have a function which checks the number of rows in an array. The result from the query is fetched in form of array. The syntax of the function is mysql_num_rows(array). Here we use;
This will find number of rows in result variable and will store it in rows variable. Now when we have number of rows it is easy put a check using if statement; Following is the check which I wrote for this transaction;
echo “Incorrect Password”;
The logic used here is that if a row is returned from the query means the number of rows will be more than 0 and if this is the case we have a correct match and if it is 0 means we don’t have an exact match and password or username was incorrect. Here in this conditional statement I am using another built-in function in case the result is matched and I am redirecting the user to successful landing page which is createuser.php in my case but you can use any page you like or have made. Here is the full code of loginuser.php file;
$q=”SELECT * from login where username=’$username’ and password=’$password'”;
echo “Incorrect Password”;
To check for my login code working or not I have manually entered some users in my login table in the database. Here is the next page which is my user redirected to if the login is successful.
I will include this page in the next tutorial, which will cover insertion of records into database table and we will create users from this form and will code it in the background. Wallaaaa!! Thanks for now. Hope you have learned something good from this tutorial. Please drop your comments and let me know if you need any help. My Email address is email@example.com Never hesitate to drop me your message and comments.