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

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 part, we are going to add a few more functions to the ‘MyDatabase’ class that will allow us to add, remove, and update the ‘checked’ status of each item in our database table. We will then add additional URI requests that will allow our JavaScript code to access and run those new database commands.

In our ‘database.php’ file we are going to add a few more functions to our ‘MyDatabase’ class. The first function we are going to add is called ‘addItem’ and will be used to add a new to-do list item to our database table. This function takes one parameter, the text value for the new item and runs an ‘insert’ statement on the database table, similar to how we added data to the database table. An interesting thing with PHP is that while within double quotes ‘”‘ variables can be evaluated, so even though our ‘text’ variable is within the string ‘insert’ statement it will be evaluated, or changed, to whatever the actual value of the variable.

Next, we are going to create a function to delete all the items from the database table. This will allow us to clear all the items from our to-do list. We can do this by running a ‘delete’ SQL statement and not applying any conditions to it so that it will delete all rows from the ‘items’ table.

Now we need a way to delete a specific item from the database. This function takes one parameter, the ‘id’ of the item we want to delete. The ‘delete’ SQL statement is similar to the one we just wrote but it has a ‘WHERE’ clause which means it will only delete items that match the ‘WHERE’ clause, such as the item that has the same ‘id’ as the ‘id’ parameter passed to the function.

The last function we are going to add to our ‘MyDatabase’ class is a function that will change the ‘checked’ value of each to-do list item. This will allow us to change is a to-do list item is checked or ‘done’. This function takes two parameters, the ‘id’ of the item and a boolean to be used for the value of the ‘checked’ field. We are going to use an ‘UPDATE’ SQL statement to set the ‘checked’ value to the passed in value for whichever row in the database table that matches the ‘id’ of the passed in parameter.

In our ‘server.php’ file we are going to change the code around to allow us to use the same URI for every database request. We will be able to do this by using different request methods for different operations. Along with getting the URI of the request we all need to get the request method of the request.

Next, we going to change the switch statement we used to determine what to return dependent on the request URI to an if-else chain. This will allow us to do specific things using more complex conditions, such as the value of the method and the value of the URI. Below I have changed the switch statement to a chain of if-else statements that will return the static pages of our web application for it’s corresponding URI and if the method of the request is equal to ‘GET’. The normal way a browser retrieves a static webpage is by using a ‘GET’ request method.

Now we add back the code we had that would return the list of items from the database. If the request method is equal to ‘GET’ and the request URI is equal to ‘/api/items’ we call the ‘getItems’ function from our database class and return its result.

Next we are going to add another ‘else if’ block to handle the adding of new items to our database table. You’ll notice that the URI is the same but the method is ‘POST’ instead of ‘GET, which may sound strange being able to send requests to the same URI but because the methods are different then it is perfectly allowed. When making a request to add a new item we must send some data with our request, the ‘text’ of the new item we wish to add. We can use PHP inbuilt function ‘$_POST’ to access a variable called ‘text’ that we will send with our request. The ‘addItem’ function doesn’t return any results but we still echo the results of the function just in case an error occurs we will want to see it on the client-side.

When sending a request to the URI ‘/api/items’ using the ‘DELETE’ method we can either delete one single item or all the items in the table, this will depend on if we send an ‘id’. IF we send an ‘id’ with the request then we can call the ‘deleteItem’ passing in the ‘id’ we sent to delete a single item. If we didn’t send an ‘id’ with the request then we will call the ‘clearItems’ function and delete all the items in a database table.

We can also send multiple variables with our requests, such as the ‘id’ and the ‘checked’ variables. We use the ‘PATCH’ method to modify a part of an item in the database table. Such as changing the status of ‘checked’ for a particular item where the ‘id’ matches the passed in id.

In this part of the tutorial series, we created server-side code to handle different requests that will allow us to modify the contents of our database table. In the next part, we will add the corresponding client-side code for these requests.

Further Reading

What is SQL?
REST Method Basics Explained
Basic SQL Commands Explained
If and Else If Statements

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 11

Leave a Reply