For starters, I will assume that you have already downloaded and installed XAMPP, and it is working properly. Here is the link: XAMPP download. I am also going to assume that you are using XAMPP for Windows, although it does not really matter which version you are using. It is pretty much the same. When you have it installed, open your browser and type localhost in the address bar. If everything is working properly, you should see the XAMPP main page. If not, refer to the XAMPP docs to figure out how to start XAMPP. You can close your browser for now.
The first thing we need to do is to create a folder for our project. Open Window’s explorer, and drill down to wherever you installed XAMPP (on Windows it will be installed in your C: drive). Open the subfolder called htdocs and create a new folder called password_test. This becomes our project folder. Next, we are going to create the first of three files that will be placed in this folder. For starters, create a text file called password.txt, and type in the following line:
qwerty:123456
Save the file and close it. That is the file we will use to check our username and password combinations. The next file we want to create is the index page, which is the page that PHP defaults to when a project is run. Use the following code. Before any html purists jump down my throat, I fully realize that I omitted the doctype declaration. For this exercise it is not necessary, and only detracts from the lesson. So create a page called index.php, and make sure to save it in the password_test folder. Place the following code in it:
<html> <head> <title>Password test</title> <head> <body> <h1>This is a test</h1> </body> </html>
Save it. Open your browser again (with XAMPP running), and type in the following: localhost/password_test. If everything is working correctly, you should see a plain web page that displays ‘This is a test’ in large letters. If not, back up and make sure that XAMPP is running, and that you followed the instructions to this point. An important note here, unless you want to mess with the XAMPP configuration files, the name of the file must be index.php, otherwise Apache will not know what to do.
Some of you may have noticed that, so far, this looks suspiciously like HTML. It is. Apache (the ‘A’ in XAMPP) can be used to serve up plain HTML, even when disguised as a PHP file. Without worrying about the nuts and bolts behind how all that works, let’s go ahead and create a form that will accept a username and password combination. Using a form I borrowed from HTML Code Tutorial dot com, I modified the index.php file to look like the following:
<html> <head> <title>Password test</title> <head> <body> <FORM ACTION=process_form.php METHOD=POST> name: <INPUT TYPE=TEXT NAME="realname"><BR> password: <INPUT TYPE=PASSWORD NAME="mypassword"> <P><INPUT TYPE=SUBMIT VALUE="submit"> </FORM> </body> </html>
Save it, and run your project again (open your browser and type in localhost/password_test. If you hit the submit button, you should get an error message since we have not created a file called process_form.php yet, which is the next step. So let’s go ahead and create that file now, which is simply a text file. This is where it starts to get a bit tricky, so we will go step-by-step. Paste in the following code:
<html> <head> <title>Password test, page 2</title> <head> <body> <?php $name = $_POST['realname']; $pass = $_POST['mypassword']; echo $name; ?> <br> <?php echo $pass; ?> <br> </body> </html>
Save the code, and then run your project. If all is working properly, you should see your username and password displayed on the screen. If not, back up and make sure that you followed all of the steps. Now for a quick explanation of what is happening with the code. Quite simply, the majority of it is HTML, but you will notice some sections that start with <?php, and end with ?>. This tells Apache that whatever comes between those sections is PHP, and it must be handled differently. All we are doing at this point is making sure that our username and password combination is being properly handed to the .php file that is going to do the actual work (process_form.php). These two lines get the information from the form:
$name = $_POST['realname'];
$pass = $_POST['mypassword'];
If you go back to the index.php page, you will see in our form that the field where we type in our name has a parameter called ‘Name’, and the value assigned to it is ‘realname’. Likewise, the password field also has a parameter called ‘Name’, and it is assigned a value of ‘mypassword’. You should also notice that the password field has a parameter called ‘TYPE’, and it is assigned a value of ‘PASSWORD’. The next two lines just echo the output to the browser, and are only used to make sure that we have no errors so far. Coding this way is a good practice; do a little code and then test it. It is easier to find an error in four lines of code than it is to find the error in four hundred, or four thousand, lines of code.
At this point, if everything is working properly, we are going to alter our code a bit:
<html> <head> <title>Password test, page 2</title> <head> <body> <?php $name = $_POST['realname']; $pass = $_POST['mypassword']; ?> <br> </body> </html>
Since we know our password and user name are making it through, then we can drop those two lines of code. Now we need to read our password and user combination from our password text file. Let’s add the following code. I added comments throughout to explain what is happening, so hopefully that is enough:
<html>
<head>
<title>Password test, page 2</title>
<head>
<body>
<?php
$name = $_POST['realname'];
$pass = $_POST['mypassword'];
//read the contents of our password file.
$myFile = "password.txt";
$fh = fopen($myFile, 'r');
$data = fgets($fh);
fclose($fh);
//echo the data from the text file
echo $data;
//print out an HTML line break
print "<br>";
//now we need to split our line of data from the text
//file so that we can do the comparison.
//split the text into an array
$text = explode(":",$data);
//echo the split user name
echo $text[0];
//print out an HTML line break
print "<br>";
//echo the split password
echo $text[1];
//assign the data to variables
$good_name = $text[0];
$good_pass = $text[1];
//print out an HTML line break
print "<br>";
//compare the strings
if( $name === $good_name && $pass === $good_pass){
echo "That is the correct log-in information";
}else{
echo "That is not the correct log-in information.";
}
?>
<br>
</body>
</html>So now for a quick summary of the entire project; First, we created a text file that holds our username and password combination. Then we created a simple html form to accept our user name and password combination. Finally, we created a ‘controller’ that took the password and user name combination from the form, read in the user name and password combination from the password.txt file, and then compared them to see if they were the same. A message was then displayed, which depended on whether or not the combinations matched.
That’s really all there is to it. In the real world, passwords would likely be stored in a database, and there would be more than one valid username/password combination, but this provides a quick start. If the password and username matched, one would also set a cookie on the user’s computer so that the server could keep track of which users were logged in, and which users were not.
Back to top
