🔧 Step 4: Finish the view-tasks.php file

Now that we have the PHP engine showing us all the correct content on our website, we are going to replace the static HTML content with the one that is on our database.

Make a connection in the index.php file

First, let’s create an SQL connection in the index.php file, at the very top of it, so that the connection would be made on each page load.
Grab the example SQL connection code from this article.

Modify your view-tasks.php file

In this file, we have two blocks of tasks.
In the first block, we want to show only these tasks, which are yet to be done. To check this, we added a column ‘status’ into our database. So we only want to show these ones, that have status = 0 in the table.

We will need to create a:
1. Query variable, which will be a general SQL statement (mysqli_query function, which selects all from “todo” table where status is 0)
2. Write a PHP loop function (use while-loop). Check the “Basic data selection” tutorial here and write the loop in similar way
3. Test your loop, by only echoing one field inside the loop. So maybe inside the loop, write only echo $row[‘title’]; and see if your site then shows all the todo titles from your database.

If you have passed step 3 and the titles are showing up fine, then you will need to wrap these database results into your HTML.

That means, the loop should START after the <h1> My to-do list</h1> and it should end before the div.tasks-block ends.

Remember, loop is starts with { and ends with } in PHP.

<div class="tasks-block">
   <h1>My to-do list</h1>
    <?php 
       while($row = mysqli_fetch_array($query)) 
       {
          echo "<div class='task-element-container'>";
           ...
       }
    ?>
</div>

For the task-title div, you will need to escape from the echo for a moment, and write the $row[‘title’] there. This is the dynamic part of this HTML result. All of your tasks’ titles are coming from the database.

Let’s add a link for each task

Let’s add links for our tasks, so that you could open one task, and see more details about it.

In your PHP loop, take the task title, and before the <p> tag, write an anchor tag.
So this is how we need the link to look like in each task element.

<a href="./?p=view-task&id=29">
   <p>Here is your title</p>
</a>

So clicking this link, would load your index.php file where ($p == view-task) and where $id=29.

If all your results in the website are showing the links, with unique ID value, structured the way as in this example, let’s move forward.

Bonus points, if you still solved it yourself, though. 😀

<?php 
    echo "<a href=\"?p=view-tasks&id=".$yourId."\"><p>".$yourTitle."</p></a>";
?>

Finalizing

You now should have a page with all the To-do tasks.
But we also need the second list as on our HTML layout – “Done tasks”.
For that, basically just duplicate the whole task-block with your SQL queries and loops, but this, with the second SQL query, select only these tasks, which’ statuses are “1”. And change the <h1> title from “My to-do list” to “Done tasks”.