AJAX & Modals Task Information

Do not reproduct this page, Your page to reproduce can be found here


You are given three tables of information: companies,products, inventory
See the table at right for details on the table structure
The company table contains information about all the companies
The products table contains information about all the products
The inventory table connects the two. Each row contains both the company ID and product ID it is linked to.

That is to say that "Bread" (prod_id = 4) can be found in many rows for different companies
And that "Massa Ltd" (comp_id = 11) can be found in many rows for different products
Each row contains both the product ID and the company ID, as well as lists the price and quantity for this product at this company.
For a more detailed example:

the first row of inventory has the following details:
inv_comp_id = 12 (meaning it belongs to company ID 12 --> Carp Farmer's Market)
inv_prod_id = 1 (meaning is is product ID 1 --> Mackerel)
inv_pricePerUnit = 1.04
inv_quantity = 22

Which is to say that the Carp Farmer's Market is selling Mackarel for $1.04 per unit, and they have 22 of them

All of your work will be stored in the folder /var/www/html/students/studentFolder/XXXXXX/ajaxModals/
An appropriate database.php will already be found there
You each have your own database, nothing you do will impact anyone else's work
You are encouraged to make use of the available bootstrap template and bootstrap modal ajax examples

Take a good look at the proceeding page to make sure you are reproducing its functionality correctly.

Specifications broken down by level:

As always, the raw level of your mark is determined via functionality as defined below.
Code commenting, formatting, variable/function naming and efficiency determines +/-

Level 1

  • Read from the 'companies' table to display a list of companies, sorted and displayed the same way as shown.
  • Have each company's name be a clickable way to view their inventory (to a bootstrap modal)
  • Clicking on a company's name should activate a bootstrap modal
Level 2
  • All requirements from Level 1
  • When opened, the modal that appears for a company should list (in sorted order) the list of products in that company's inventory
  • This inventory should look as shown in the example. This list should include name, quantity and price.
  • This inventory list should not be generated with index.php - but should instead be fetched via an AJAX call
  • Each item should be a clickable
Level 3
  • All requirements from Level 2
  • When a product is clicked on (from within a company's inventory), the modal should repopulate via another AJAX call to show a form
  • This form should be prepopulated with values based on the current entry in the inventory table
  • There should be "Save Changes" and "Cancel" buttons on the modal
  • The Cancel button should close the modal having made no changes to the inventory
Level 4
  • All requirements from Level 3
  • The format of this form should look identical to the example
  • All formatting within your finished work must match the example
    • This includes the formatting of index.php as well as all title data and formatting within the modal
  • When the user clicks 'Save Changes'
    • Have the information be updated in the database
    • The user should be redirected to the index page
Level 4+ (any two of the following)
  • Include a green "Add New Inventory" button to the company inventory modal, allowing for a new form to submit a new entry
    • This includes a drop down to select from available products, quantity input and price input
  • Once finished updating an entry via the update form, the user should stay on the company inventory modal
  • Underneath the listing of companies, place an HR tag, then list all the products. Set up this list such that when the product is clicked on,
    a modal appears and lists all the companies that have this product in inventory, and it's associated price and quantity available.

Database Information

| Tables_in_ajaxtest |
| companies          |
| inventory          |
| products           |

companies table
| Field       | Type         |
| comp_id     | int(11)      |
| comp_name   | varchar(255) |
| comp_street | varchar(255) |
| comp_city   | varchar(255) |
| comp_prov   | varchar(32)  |
| comp_postal | varchar(16)  |
| comp_phone  | varchar(16)  |

products table
| Field     | Type         |
| prod_id   | int(11)      |
| prod_name | varchar(255) |

inventory table
| Field            | Type    |
| inv_id           | int(11) |
| inv_comp_id      | int(11) |
| inv_prod_id      | int(11) |
| inv_pricePerUnit | double  |
| inv_quantity     | int(11) |