Login for Conventional Web Development Site with PHP and MySQL
Conventional Web Development with PHP and MySQL – Part 7
Forward: In this part of the series, we look at login features for the simple Conventional Web Development project with PHP and MySQL.
By: Chrysanthus Date Published: 2 Aug 2012
Introduction
To login, the user (student) has to fill in his user name and password in the login Form at the browser. When he clicks the Submit button of the login Form, the dataset (user name and password) will go to the server. Now, do not confuse between the web server and the database server. These are two different software, each with its own directory tree. The web server directories have the HTML and PHP files. The database directories keep the databases and their tables. The login PHP file that the login Form calls is called, “login.php”. In this project, it is kept in the home directory of the web server, like all the other PHP files of the project.
Functions of the Login File
In this simple project, the login file will receive the user name and the password of the user. It will attempt to make a non-persistent connection. If the connection is successful, then it will read the credentials corresponding to the user in a row in the Members table in the Bookshop database. After it has read the credentials, it will add HTML tags to the data and send to the browser. In other words, the data of the credentials are formatted with HTML tags before being sent to the browser. In that way, the data will be well presented.
It is not only the formatted data that will be sent, a whole HTML document will be sent, and the data will be part of the document.
In this simple project, we are dealing with the home (index) page, the books page, the pens page and the login/registration page. Each of these pages has a menu (horizontal) at its top. In the menu you have the hyperlink with the name (text), Login. Normally, when this login page is clicked, the login/registration page opens (downloaded and displayed at the browser). If the user successfully logs in; that is the login.php script makes a connection and sends an HTML document with the user’s credentials to the browser, in this project, the Login hyperlink should change to Logout hyperlink. This will make it possible for the user to logout.
Again, the user name and password will also be sent with the credential data in the same page (document) to the browser. At the browser, this user name and password will be saved in the client’s computer, using the sessionStorage (web application) technique. As long as the client is using the site (does not stop using the site) in one session, the user name and password will be in his computer. In the session, for any subsequent connection, the web page of the site should read the user name and password from the computer and send to the server. At the server, the relevant PHP script will use these to connect to the database. In the past, this kind of thing was done with cookies. Today, the sessionStorage technique has replaced cookies. We thank the inventor of cookies, all the same.
Back to the article: So, for the browser user (student), there is a session. Actually the session is only at the browser and at the web server, not at the database server. At the server, each time the user wants data from the database, a relevant PHP script has to login (non-persistent connection). So, from the point of view of the database server, there are many sessions, while from the point of view of the user, there is only one session.
After the login has been successfully done, if a page that has the login hyperlink is reloaded or downloaded, the Login link will change to Logout link. You need an ECMAScript for this.
Now, the login.php script will not only send the user name, password, and user credentials to the browser. It will also send the datum, "login". This variable datum will be stored for the session in the client’s computer. The Logout ECMAScript will check if the sessionStorage value, "login", exist, each time the page is reloaded or downloaded. If it exists, it changes the Login hyperlink to Logout hyperlink. The Logout ECMAScript has to be in every page that has the login link.
Note: if the user clicks the Back button at his browser to go to a previous page, the Logout ECMAScript may not go into effect. However, if the user clicks a link in a current page to go back to a previous page, Logout ECMAScript must go into effect. In this way, the user can logout in any page he ends up with, in a session.
Here is the Logout ECMAScript:
<script type="text/ecmascript">
if (sessionStorage.login == "login")
{
document.getElementById('login').href = "logout.htm";
document.getElementById('login').textContent = "Logout";
}
else
{
document.getElementById('login').href = "login-registration.htm";
document.getElementById('login').textContent = "Login";
}
</script>
Note the use of the session storage login variable in the if-condition. Also note how the block of the if-statement changes the properties of the Login Hyperlink. The else block takes care of situations after logout. You should add this code to all the HTML pages in the project (that have the login hyperlink).
There has to be a “logout.htm” file in the home directory of the web server. When the user wants to close the session (as he sees it) he would click the Logout hyperlink. When he clicks the Logout hyperlink, the “logout.htm” document (page) will be downloaded from the server, and be displayed at the browser. The “logout.htm” file will have as a minimum the following script, which is not visible to the user:
<script type="text/ecmascript">
sessionStorage.login = "";
sessionStorage.password = "";
sessionStorage.username = "";
</script>
As you can see, the “logout.htm” file erases all the login data in the client’s computer. From this point, the user can no longer obtain information from the database; that is, no page on the site can read the login data from the user’s computer and log into the database.
Well, I will not discuss the “logout.htm” file any further. If you have read the prerequisite at the beginning of this series, then you should know the HTML elements to use in the “logout.htm” file.
The first segment of the login file is:
<?php
$username = $_POST['username'];
$password = $_POST['password'];
This assigns the password and user name from the $_POST array to the normal variables.
The second code segment is:
$link = mysql_connect('localhost', $username, $password);
if (!$link)
{
echo "<body><h3>Connection could not be made with the server! Check password and/or user name.</h3></body>";
}
else
{
This segment uses the user account name (of the student) to attempt a connection with the database. If the connection fails, because of say, wrong username and/or wrong password, the segment sends a feedback to the user. If the connection succeeds, it then executes the else part of the if-statement. The rest of the code in this file is in the else-block.
The third segment is:
//echo the top of the page
echo "<!DOCTYPE HTML>
<html>
<head>
<title>Login at University Bookshop</title>
<style type='text/css'>
img {width:200px;height:200px}
</style>
</head>
<body>
<header>
<h1>Logged in at University Bookshop Site</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='logout.htm' id='login'>Logout</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article> <h3>Credentials</h3>";
The PHP script has to send a whole HTML document out to the user’s browser. And so this segment sends the top half of the HTML document. The top half forms a string in the code segment. Note that there is no double quote in the string, in order to avoid conflict with the delimiting double string quotes in PHP script.
The fourth code segment is:
mysql_select_db('Bookshop', $link);
$credentialsSlct = "select username, email, phone, firstname, middlename, lastname, university, address, city, state, country FROM Members WHERE username="$username"";
$result = mysql_query($credentialsSlct, $link);
while ($row = mysql_fetch_assoc($result))
{
echo "User: ", $row["username"], "<br>";
echo "Email: ", $row["email"], "<br>";
echo "Phone: ", $row["phone"], "<br>";
echo "First Name: ", $row["firstname"], "<br>";
echo "Middle Name: ", $row["middlename"], "<br>";
echo "Last Name: ", $row["lastname"], "<br>";
echo "University: ", $row["university"], "<br>";
echo "address: ", $row["address"], "<br>";
echo "city: ", $row["city"], "<br>";
echo "state: ", $row["state"], "<br>";
echo "Country: ", $row["country"], "<br>";
}
The fifth code segment is:
//echo the ECMAScript to store the user login data
echo "<script type='text/ecmascript'>
sessionStorage.login = "login";
sessionStorage.password = "$username";
sessionStorage.username = "$password";
</script>";
This segment sends an ECMAScript to the browser page as a string. Note that there is no pure double quote in the string, to avoid conflict with delimiting PHP string double quotes. Read through the segment if you have not already done so. At the browser page (document) this ECMAScript will be printed and executed as follows:
<script type='text/ecmascript'>
sessionStorage.login = "login";
sessionStorage.password = "username";
sessionStorage.username = "pswrd";
</script>
I hope the minimum requirement for the “logout.htm” page mentioned above is now clear to you.
The last segment is:
//echo the bottom of the page
echo "</article>
</body>
</html>";
}
mysql_close($link);
?>
The segment echoes the end of the HTML document and closes the connection to the database.
You should now be in the position to create a simple login page response. Remember, you can assemble the code segments above to form a file. Well, time to take a break. We end here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT