Bootstrap / Angular Exercise

In this project you will understand the evolution of web programming technologies with a simple hands-on exercise. First you will set up a simple database driven PHP MySQL web page using 1990s "postback" technology. Next you will add Bootstrap, making the page "responsive." Finally you will replace postback with AJAX/API technology using Angular.

Specifically you will be

  1. setting up and initializing a MySQL database.
  2. creating a form to select and display selected data records using postback.
  3. making the form "responsive" by adding Bootstrap.
  4. replacing the PHP Postback functionality with Angular and a database API.

Pages you will create

Initial version of the Display Office Sales form. Selecting a different office produces a postback request to the server, which generates a new page with the selected office sales. This page demonstrates basic "interactive" website using 1990s technology. OfficeSales.php
Bootstrap version of the Display Office Sales form. Resize the browser window to notice that the table columns resize accordingly. With extra narrow screens notice the data and destination fields overlap. This page demonstrates "responsive" web pages accommodating all screen size widths, available within the last five years. OfficeSalesBoostrap.php
Angular version of the Display Office Sales form. Notice the page doesn't refresh when a new office is selected. Angular was introduced by Google just within the last couple of years. OfficeSales.html

Follow these instructions:

1. Create Database Tables. Instructions for creating database tables and the database connection. Database Setup Code
2. Create OfficeSales.php. Instructions for creating initial version of Display Office Sales form using PHP and form postback. OfficeSales.php Code
3. Create OfficeSalesBootstrap.php. Line by line instructions for adding Bootstrap responsive functionality to OfficeSales.php. Bootstrap Instructions
4. Create OfficeSales_api.php. Line by line instructions editing OfficeSalesBootstrap.php down to an API that will return the offices or sales as a JSON formatted array. API Instructions
5. Create OfficeSales.html. Line by line instructions editing OfficeSalesBootstrap.php, removing the PHP and adding the JavaScript controller code and Angular directives. Angular Instructions