How To Create A Simple To Do List App Using HTML, CSS, JS, and PHP – Part 8

This is the continuation of a series of tutorials about creating a to-do list web application, if you haven’t checked out the entire tutorial please start from Part 1.

In this tutorial, we are going to add some PHP to our web application. PHP is a server-side web programming language. Server-side languages will execute before sending the webpage to the user, therefore the user won’t be able to see any of the PHP code in your website as it will already have been executed before the user receives the webpage. If you’re unfamiliar with PHP there are a few posts linked at the bottom of this post to explain what PHP is and more information about server-side programming.

You will need to install PHP to continue with this tutorial. To download PHP you will need to visit https://www.php.net and download the archive (e.g. .zip) corresponding to your operating system (e.g. Windows) and then extract the archive into the root of your hard drive, this means opening up a file explorer navigating to C:/ (unless your hard drive uses a different letter) and extracting the PHP folder there. You can actually extract the PHP archive anywhere, but you will have to remember where it is and ensure it is available on your command line (e.g. command prompt on Windows). If you’re using Windows this means adding a path variable. There will be posts at the bottom of this post with more detail about PATH variables and the basics of the command prompt in Windows.

The first thing we need to do is create a new file called ‘server.php’ and add two PHP tags into that file. These two PHP act as an opening and closing tag for our PHP file, all of our PHP code will be contained inside these tags. This is like using an opening and closing HTML tag to show the start and end of an HTML document.

We now need some code that will serve the pages of our website, this is so when we run the PHP built-in server we can visit the site URL and it will be able to locate and give us the correct pages. We need to first grab the URI that the user is searching for, the URI of a URL is basically the bit of the URL that comes after the website address so in “http://www.yahoo.com/entertainment” the URI would be “/entertainment”. PHP has a built-in array called ‘$_SERVER’ that contains the requesting URI. We can retrieve that and store it into a variable called ‘request_uri’. Notice how variables in PHP are declared by prefixing a dollar sign ‘$’ which is comparable to how we define variables in JavaScript by prefixing them with the ‘var’ keyword.

Next, we are going to use a switch statement to return certain things depending on the value of the URI the user requested. Switch statements are explained in other posts in more depth that will be linked at the bottom of this post, they are essentially a different way of doing if else statements chains and doing specific actions based on the value of a variable. The first three cases refer to the static pages we already have, the HTML; CSS; and JavaScript file we created in previous tutorials. Using PHP we are able to return those files by using the ‘DIR‘ variable, which refers to the current directory of the PHP file and then using the ‘require’ keyword which will essentially write out the contents of the file onto the page, e.g. it will write the contents of the HTML page onto the page and then server the entire page to the user but as the rest of the page is made up of PHP code, which doesn’t get sent to the user, the user will only receive the contents of the HTML page. We create another two cases, one for the JavaScript file and another for the CSS file. The final case statement refers to a URI that we have made up, ‘/api/test’ which will simply write the string value “Hello World” to the page and return that the user instead. Again, none of the PHP code will be sent to the user as that gets executed before it is sent to the user.

We are now done with our PHP file, so we can save it and open up our JavaScript file. We are going to write some JavaScript to send a request to the new ‘/api/test’ URI and log the result, which will be the string value “Hello World”, to the developer console. We are going to use AJAX to do this, or more specifically an XMLHttpRequest, which will allow us to send a request to the server without having to refresh the webpage. AJAX and XMLHttpRequests are covered in more detail in a post that will be linked at the end of this post.

Firstly we are going to create a function that we can use repeatedly to easily send AJAX requests to the server. Each request requires the method (GET, POST, etc) we are using to send the request, the URI that we are sending the request to, and a callback function that will be called with the result of the request. Request methods will be covered in a post linked below in more detail, there are different ways you can request something from a server. Normally your browser will use a GET request method if you are just loading a normal page. In this function we will create an XMLHttpRequest, then add a function that will be called whenever it’s ‘readstate’ changes. Within the ready state change function, we will check that the request is ready, and didn’t fail, and then call the callback function remembering to pass the response from the server. Then we need to tell the XMLHttpRequest what method and URI to open the request on and send it to the server. The final parameter in we send in the open function is a boolean value which is the ‘async’ property, it determines if we want the request to be run in the background or to block the webpage and wait for the reply.

Now we just need to call the function, passing in a method of ‘GET’, the URI we defined in PHP of ‘/api/test’ and a callback function that logs the response to the developer console. This will result in the string “Hello World” being printed to the developer console.

Now we can run our PHP code, using the in-built PHP server, by opening up a command line interface (such as command prompt on Windows) in the directory of our ‘server.php’ (and the rest of our web app files) and running the following command “PHP -S localhost:8080 server.php”. This tells PHP to run a in-built server using the address “localhost” on port “8080” and run the file ‘server.php’ whenever a user sends any request to the page. Now we navigate to that page in a browser by typing “localhost:8080/” in the URL bar, the website will look the same as the previous tutorial but will now be served using PHP and in the developer console you should see the text “Hello World”.

Further Reading

What is PHP
Client-Side Vs Server-Side Programming
What are Path Variables in Windows
The Basics of Command Prompt in Windows
Case and Switch Statement
Switch Statements In JavaScript
What is AJAX?
XMLHttpRequest in JavaScript
Synchronous vs Asynchronous

Remember all of the code for this tutorial series can be seen at the following link: https://github.com/acroynon/tutorial-to-do-list-app
and a demo of the to-do list application can be seen at the following link: https://acroynon.github.io/tutorial-to-do-list-app/

Continue to Part 9

Leave a Reply