Assignment Two (Part 3) Supplement

1. Assignment Two (Part 3) Supplement

2. The following slides are a step by step process to demonstrate the use of HTML/jQuery/PHP to create a simple shopping cart. It is a starting guide only and should treated as such.

3. The index page on first load. The code above simply activates as soon as the index.php page is loaded. Notice there are noclickor any other events. I make use of the jQuery load() function to get the contents from the paths specified and return the output back to the two areas on the index.php page called ‘#main_content’ and ‘aside.25’. These happen to be the main un-categorised items and items on special.

4. The Query String You will have noticed the path appended to the load() function goes to a file called controller.php. This path had two variables attached called “action” and “page” to form the query string. The GET method is used to pass the two variables to the controller page. We can use the controller page to decide how to handle these values.

5. The controller.php file Here you create a switch statement to determine the value of the “action” variable contained in the PHP super global variable $_GET. The $_GET variable at this point holds an array containing the two variables “action” and “page”. Since the value of the variable “action” is “get_page” and the value of the variable “page” is “home”, we can retrieve the home page. You will notice the include ‘pages.php’ file at the top of the code. This file holds the Pageclass with a static method called “getPage”. We will pass to the method the entire $_GET variable

6. The pages.php file Here a page class is created to manage the database product queries that get displayed. In this instance the code above retrieves the data for products that will display when the home page is loaded or the home page link is clicked. Notice at the end of the code there is a call to a static function called Display($db, $class). The function is part of the Page class. The purpose of this function is to output the result of the query. The output gets returned to the original jQuery load() function call and displayed in the area specified e.g.$(“#main_content”)

7. The Display() function $db is passed to the function because it holds the query string used to get each record that gets displayed $class is used so we can alter the width of the <section> box meaning we can reuse the code for most of the page queries

8. The index page is loaded

9. Once the index page is loaded • This HTML code is the home page link found on the index.php page: Here I have created the query string that will be appended to the URL path in the jQuery AJAX function. When the user clicks this link, this will be added to that URL path.

10. Managing the clicked Hyperlinks Place this code just under The previous load() functions

11. The Shopping Cart The link below is the “add to cart” hyperlink from the Page::Display() function, and you Can see that we are supplying many more variables to the query string. These variables Will be used to populate an PHP product item object that gets added to the shopping cart The action this time will be “add” which means add this item to the cart. When the link is clicked the jQuery AJAX function will pass this query string to the controller.php page.

12. Back to the controller.php page Add a reference to the cart class Create an item object. Note the values are set on instantiation

13. The CartItem Class The constructor

14. Adding the Item to the Cart

15. The Carts display() Function First Part of Code

16. The Carts display() Function Second Part of Code

17. The Carts display() Function Final Part of Code

18. The update The following code was extracted from the Cart::display() function. When the user updates the quantity in the text box the event gets handled by the jQuery change() function.

19. Now your on your own