Category List and Details Pages

You've seen a few different examples of how to not only retreive data from the database and display it on a web page, but also to create HTML forms that allow inserting and updating rows in the database.

In this step you'll create pages that allow authenticated users to add and edit categories of blog posts. We created the 'categories' table back when we first set up the database for this project. Now you will build a few web pages that will allow users to add and edit new categories of blog posts.

In theory, this step should be quite straight forward, albeit a bit tedious. You'll be following the same algorithm that you've seen with the blog and file pages in the control panel. If you can get through this step, you can adapt it to many situations when building a dynamic website. In my career I've used this algorithm countless times. So many times, that at one point I even wrote a script that allowed me to enter the column names (and data types) for a table, and it would generate all the PHP code for me!

Create a Category List Page

Create a page that lists all the rows from the categories table, it will look like this.

• In the 'control-panel' folder create a file named category-list.php
• You could cut and paste code from the blog list page, just be extra careful, there are lots of lines of code that need to be updated. It might be better to just use the blog list page as a guide and type everything into the category list page.
• Make sure the page is secure, meaning that the user must log in before viewing the page.
• When an EDIT link is clicked, the user should be directed to a page called category-details.php (you'll create that page a little later). When you generate the EDIT links, make sure to add a query string param to the URL called categoryId and set it to the id of the category that is being displayed in each row. Also, the Add New Category link should direct the user to category-details.php.
• Open the control-panel homepage and add a link to the category-list page.

Add Methods to the CategoryDataAccess Class

• Create a method named getCategoryById. It should take a param for the id of the category to fetch. And it should return an associative array that contains the categoryId, name, and active columns from the categories table. If something goes wrong with the query, the method should return false.
• Add the following code to the category-data-access-tests.php page to confirm the method is working properly. Note that one of the tests that we put in this page previously may fail! At that time we weren't sure if a method should throw an error or not.

  echo("<br>GET CATEGORY BY ID");
  $cat = $cda->getCategoryById(1);
  var_dump($cat);
  			

• Create a method named insertCategory. It should take an associative array as a param. The keys in this array should be name and active. It should return the same assoc array, but the categoryId assigned by the database should be added to it.
• Add the following code to the category-data-access-tests.php page to confirm the method is working properly.

  echo("<br>INSERT CATEGORY");
  
  // create a 'category' (assoc array) to insert
  $cat = array();
  $cat['name'] = "A NEW CATEGORY!";
  $cat['active'] = "yes";
  
  // insert it...
  $cat = $cda->insertCategory($cat);
  var_dump($cat);
  			

• Create a method named updateCategory. It should take an associative array as a param. The keys in this array should be categoryId, name, and active. It should return the same assoc array.
• Add the following code to the category-data-access-tests.php page to confirm the method is working properly.

  echo("<br>UPDATE CATEGORY");
  
  $cat['name'] = "AN UPDATED CATEGORY!";
  $cat['active'] = "no";
  
  // update it...
  $cat = $cda->updateCategory($cat);
  var_dump($cat);
  			

Create a Category Details Page

We'll create a page that looks like this.

• Create a file in the 'control-panel' called category-details.php
• It will work in much the same way as the other 'details' pages we've created.
• Be careful, take your time, ask for help!