top of page

How To Build A Website: Website Components I — Login Page

In this section, we will build a simple (but fairly insecure) login page. This page will require two files: an HTML file and a PHP file. We will start with the HTML file.

This is a very simple page, so we will only really need two fields and a button. If you want, you can include the site icon above the fields or just make the page look nice if you want. The first thing to do is to set up the form. The PHP file is named ‘validate.php’.

<form action=“validate.php” method=“post”>

...

</form>


This form will send a POST request to the validate.php file.

Now we place the fields within the form:


<label for=“username”>Username:</label>

<!-- This attaches a label to the field with this id -->

<input id=“username” name=“username”>


<label for=“password”>Password:</label>

<input type=“password” id=“password” name=“password”>

<!-- The type=“password” attribute hides the entered value of the field, showing only large dots -->

<button>Log In</button>


This completes the HTML form. This version is very simple, and it takes only little extra work to stylize it. The PHP file, however, is more complicated.

The first thing to do is to connect to a database on your server. This is accomplished by a mysqli_connect() statement:


$db = mysqli_connect("localhost", "root", "password", "db_name") ;


if(!$db){

die("Connection Failed:" .mysqli_connect_error());

}else {

//Leave this area blank; it doesn't make much difference either way.

}


The next ste is to put the posted data into variables. The posted data is contained in the $_POST[ ] variable:


$username = $_POST['username'];

//refer to the 'name' attribute of the HTML element as the $_POST item

$password = $_POST['password'];


Next, we run a query to see if we can find the name and password in the database. We also include conditional statements to abort the script execution if the entry is not found:


$uQuery = mysqli_query($db, "SELECT `usernames` FROM `table_of_userdata` WHERE `usernames` = $username");


$pQuery = mysqli_query($db, "SELECT `passwords` FROM `table_of_userdata` WHERE `passwords` = '$password'");


//These queries select the username and password columns and return any rows where the value of that column is the same as the value entered by the user.


$uRow = mysqli_num_rows($uQuery);

$pRow = mysqli_num_rows($pQuery);


//This function determines how many rows the above queries returned. This will be 0 if the value is not in the database.


if ($uRow == 0) {

//The == sign is a comparative operator meaning ‘the former value equals the latter value’.


header(“Location: login.html“);

exit;

//If the value is not in the database, return to the login and terminate the script


} else {

//If the condition above is false…


# Save any user data here, like $_SESSION[’name’] = $username; , in which case, begin the file with ‘session_start();’


header(“Location: somewheres.php”);


}


//Now we duplicate the above statement with the password:


if ($pRow == 0) {


header(“Location: login.html“);

exit;


} else {


header(“Location: somewheres.php”);


}

These files constitute a simple login system. The user enters data in a form, then the data is sent to the PHP file, which compares the data to what is in the database. Using this method, it is actually rather difficult to determine what the user entered, as the PHP files are hidden and the request was POST and not URL-apended. This login page, especially when combined with a login detector, is a fairly efficient security feature. You can use it in your own files to restrict access to site content, or to allow only certain users to access the site, as I did in mine.


Next, we will discuss some of the other HTML elements, like the iframe.


__RESOURCES__

A blank HTML starter file— Use this to build your login page

A blank PHP file —Use this to build the validator

A SERVER AND MYSQL DATABASE — not included. Although, a Raspberry Pi works well as a server....

12 views0 comments

Recent Posts

See All

Comments


Post: Blog2_Post
bottom of page