This is the second part of the six part series about creating a php online store. Be sure to check the first part so that you’ll know the scope of this tutorial. What I’ll discuss and what I will not discuss.
In this tutorial I’m going to show you how you can make a login system. The one that you see in most social networking sites. Wherein the user should create an account. And log in with that account so he can use the entirety of the system.
Requirements
Please download and install the requirements which I mentioned above before you begin with the tutorial.
Creating the Database
First thing that we have to do is to create the database. To do that you have to launch Wampserver. Then navigate to: http://localhost/phpmyadmin/ on your browser. And create a database, use the screenshot below as an example:
User Registration
Second, we will have to make a form in which the user can input his username and password. Launch your text editor. And start typing the code below. You can also copy and paste it if you’re in a hurry. But be sure that you understand what it does. Either by testing it on your browser or reading the comments in the code. If you don’t understand something, there’s always Google who can help you.
<form action="regact.php" method="post">
<h2>User Registration</h2>
<label for="uname">Username:</label>
<input type="text" id="uname" name="uname"/>
<label for="pw">Password:</label>
<input type="password" id="pw" name="pw"/>
<input type="submit"/>
</form>
The first line of code, says that we will be using the method post when submitting the contents of the form to ‘regact.php’ which contains the code for inserting records into the database.
Here’s an in depth explanation of the methods for submitting html forms:
http://www.cs.tut.fi/~jkorpela/forms/methods.html
Here’s a summary of POST and GET methods:
POST
- More secure
- Data is hidden
- Unlimited amount of data can be passed
GET
- Data is visible on the URL
- Less secure
- Limited amount of data can be passed
POST method sounds to be much more desirable. But if you are a beginner. It will be useful to use the GET method. Since you can see data the data that will be manipulated is visible on the URL. You can use it to determine if your program is passing the correct values or not.
Next thing that we have to do is to create the ‘regact.php’. Where we are going to create the query which will insert the username and password into the database.
Create a new file and name it to ‘regact.php’ or whichever you have placed in the form that you created a while ago.
Declare a connection between the database and your program. Name this file to conn.php.
<?php
$conk=mysql_connect("localhost","root","1234");
$db=mysql_select_db("loginsystem", $conk);
?>
Remember that you always have to enclose php codes inside php tags. Which I declared on lines 1 and 4. And variables in php should always begin with the dollar sign($).
The $conk variable basically stores the host name which is in most cases localhost. It also stores the username which is by default called root. And the password for that user. In my case its 1234 but the default is that there is no password for the root user. So you might as well delete the 1234 there and leave it blank.
Create another file named regact.php. And type the codes below. What the include does is to include another php file into your current php file. Its like an inheritance in programming. Since all the variables that you have delcared on that external php file can also be used by the php file where you have included it. Conn.php contains the methods for connecting to the database. So what the include does in this case is to allow regact.php to use the connection so that it could also execute some queries and manipulate the database.
<?php include('conn.php'); ?>
$un=$_POST['uname'];
$pw=md5($_POST['pw']);
mysql_query("INSERT INTO users(Username, Password)
VALUES('$un','$pw'));
mysql_close();
The first and second line, just fetches the value which the user inputted in the form. And stores it on the $un variable. And the $pw variable.
Notice that in the $pw variable I enclosed it on md5. Which is a function in php. What it does is jumbling the data which is inputted in the password field. Before it stores it into the database. Its like encrypting the password so that even if someone has access to the database and opened the user table. They won’t actually see the actual password. And therefore makes the system more secured. Of course there would be no function in php which is the opposite of md5. Since it would be worthless to encrypt something if a function for decrypting is also available.
The fourth line of code also makes use of a php function. Which is purposely made for talking to mysql database. What it does is to (surprise!), query the mysql database. You have to make sure that the fields Username and Password. Matches the fields that you declared in your table. And the variables $un and $pw matches what you have declared to store the user input. Lastly make sure that the number of fields matches the number of variables which you included in your query. In this case, we have two variables and two fields.
The sixth line just closes the connection.
After typing the codes. Go try it out on your browser. If it works. Try and examine the contents of the password field on your user table. And you will see the encrypted version of the password which you have inputted.
Login
Next thing that we have to create is the login module. There’s no need to explain what it does since you always login with your facebook account everyday. And you already know how this works.
Let’s not waste our time. So we just have to reuse the registration form and change the form action and the header:
<form action="verify.php" method="post">
<h2>User Login</h2>
<label for="uname">Username:</label>
<input type="text" id="uname" name="uname"/>
<label for="pw">Password:</label>
<input type="password" id="pw" name="pw"/>
<input type="submit"/>
</form>
There you go, I just changed lines 1 and 2 for this. Its basically the same with the user registration form which we declared above.
Next thing, create a new file named verify.php. Or whatever you have put in your form action.
$uname = mysql_real_escape_string($_POST['uname']);
$pword = $_POST['pw'];
$pwordmd5=md5($pword);
$query =mysql_query("SELECT * FROM users
WHERE Username = '$uname' AND Password = '$pwordmd5');
$num_rows = mysql_num_rows($query);
if($query){
if($num_rows > 0){
session_start();
$_SESSION['loginUser'] = "1";
$_SESSION['Uneym'] = $uname;
header ("Location: userpage.php");
}else {
session_start();
$_SESSION['loginUser'] = "";
header ("Location: ../login.php");
}
}else{
$errorMessage = "Error logging on, please try again.";
}
?>
Lines 1 to 3 needs not be explained. Line 5 just select all of the records which is stored on the ‘users’ table in which the field Username contains the value equal to the one inputted by the user on the login form. And the Password field record equal to the encrypted version of the password inputted by the user.
Line 6 basically counts the number of records in the table which matches the criteria.
Line 10, says that if query is a valid query. Then it moves on to line 11.
Line 11, just says. That if the variable $num_rows has value greater than 0 then one of the records in the table matches the criteria specified by the query.
Line 12, (surprise) starts a session.
Line 13, creates the variable loginUser. Which is then initialized to 1. This variable will be checked on every page which requires a user to be logged in before he can see its contents. Another variable named Uneym is also created. Which stores the username to the session. It will be used to display the users name in every page which can be accessed after logging in.
Line 18, just instructs the browser to redirect the page to userpage.php. Which is basically what we refer to as profile page.
Lines 25 to 33. Just specifies what needs to be done in case the Username and Password inputted by the user in the login page does not match any of the records in the users table.
Pages
I’m not feeling creative so I just placed pages. This is the section where I tell you about checking if the user is logged in or not. These lines of code must be placed on every page which requires the user to log in.
<?php
session_start();
if (!(isset($_SESSION['loginUser']) && $_SESSION['loginUser'] != '')) {
header ("Location: ../login.php");
}
?>
What the code above does is to check if session variable loginUser is set. If it is set then the page where it is declared can be seen by the user. If it is not, then the browser will redirect to the login page.
Logout
Create a new file named (surprise!) , logout.php. It would now be boring to tell what it does. So here’s two lines of code:
session_start();
session_destroy();
Line 1 is needed to tell the browser that were dealing with sessions.
Line 2 tells to destroy the session that has been set. You can also achieve a similar effect when clearing the browser history and cookies. Using the keyboard shortcut ctrl +shift +del.
Conclusion
That’s a simple php login system tutorial. I hope it helped you. If it helped you, like I always say. Then help spread the word about this blog by using any of the buttons below. Thanks!
