CSC 5750 Principles of Web Technology

Homework 4 Part 2 of 2 [your name]

18 of 25 points Due March 22, 5pm

Late deadline is March 24, 11:59pm, but 3 points off

a) Save this document with your name and the homework number somewhere in the file name.

b) Type/paste your answers into the document.

c) Gather the following files into a ZIP file:

This document

File Admin page (.HTML)

File Admin Response page (.PHP)

Inventory Manager page (.HTML)

Inventory Summary page (.PHP)

CSS file (.CSS)

Any other optional files specific to your implementation

d) Submit the ZIP file to the Blackboard item where you downloaded this document.

SOULUTIONS FOR HW # 3 IS IN THE SCREENSHOT. You're continuing to operate your storefront business to sell products and/or services. Now you need to add a web page to enable staffers to upload files to the web server, and to convert the inventory summary page from an HTML file to a PHP file. Enhance the web site you created in Homework 3 with the following changes. You may start with your Homework 3 or the Homework 3 key on Blackboard.

Products.json file

Create a text file in JSON format that contains your products array. The data is nearly identical to the array declaration in your Inventory Manager page. Call the file Products.json.

uploads folder

Add folder uploads as a subfolder to your web server folder (in AMPPS, the web server folder is C:\Program Files (x86)\Ampps\www).

File Admin page

Add a File Admin page to enable your staff to upload files to your web server. This may be modeled after the Sample Code version on Blackboard.

Add ", v4" to the end of the page title and heading. This indicates that the page belongs to version 4 of the web site.

File Admin Response page

Add a File Admin Response page to process upload files to your web server. This may be modeled after the Sample Code version on Blackboard. Limit the files that may be uploaded to only those with a file extension of json.

Add ", v4" to the end of the page title and heading. This indicates that the page belongs to version 4 of the web site.

File upload

Run pages File Admin and File Admin Response to upload file Products.json to your web server.

Inventory Manager page

Add ", v4" to the end of the page title and heading. This indicates that the page belongs to version 4 of the web site.

Remove the products array declaration since the data is now coming from an AJAX request.

Add an AJAX request in function loadProductData to get file Products.json from the server. Use path uploads/Products.json to access the file. Make the request synchronous so that processing doesn't continue until the file is retrieved.

Move the logic for determining the product count, inventory count, and inventory value from the Inventory Summary page to this page.

Add logic to build a query string that contains three name-value pairs:

Product count

Inventory count

Inventory value

Add logic to open page Inventory Summary (InventorySummary.php) with the query string appended.

Inventory Summary page

Change the file extension of the page from .html to .php.

The only JavaScript remaining should be to open page Inventory Manager.

Add ", v4" to the end of the page title and heading. This indicates that the page belongs to version 4 of the web site.

Use PHP global variable $_GET to retrieve the values from the query string and embed them within the existing HTML.

File Admin page

[your File Admin page HTML code here]*

If possible, format your code like this:

Font Courier New

Font size 9

Bold

[your File Admin page screenshot here]**

File Admin Response page

[your File Admin Response page HTML code here]*

If possible, format your code like this:

Font Courier New

Font size 9

Bold

[your File Admin Response page screenshot here]**

Products.json file

[your Products.json file screenshot here]**

uploads folder

[your uploads folder screenshot here after uploading Products.json file]**

Inventory Manager page

[your Inventory Manager page HTML code here]*

If possible, format your code like this:

Font Courier New

Font size 9

Bold

[your Inventory Manager page screenshot here]**

Inventory Summary page

[your Inventory Summary page HTML code here]*

If possible, format your code like this:

Font Courier New

Font size 9

Bold

[your Inventory Summary page screenshot here]**

* Copying-and-pasting web page code to a Word document

1) From the HTML editor window, press CTRL-A and press CTRL-C.

2) From within the Word document, press CTRL-V.

** Copying-and-pasting application output to a Word document

1) From the web page, maximize the browser window.

2) From the browser window, press ALT-PrintScreen.

3) From within the Word document, press CTRL-V.

Bcat Buidars Imventory Manager, v X filexi/Users/HarshBhagat/Desktop/CSC 5750/Homeworks KeyHomeworks key 3yBoatBuil er.htmSearh IN a Boat Builders Inventory Manager, v3 Product: Select product... Show Info Count: Cost ($) Value ($) Inventory transaction Ordered Sold Amount: Update New count: New value ($) Reset Summary Bcat Buidars Imventory Manager, v X filexi/Users/HarshBhagat/Desktop/CSC 5750/Homeworks KeyHomeworks key 3yBoatBuil er.htmSearh IN a Boat Builders Inventory Manager, v3 Product: Select product... Show Info Count: Cost ($) Value ($) Inventory transaction Ordered Sold Amount: Update New count: New value ($) Reset Summary