This Github repository contains some sample code that show how to perform AJAX calls, client-side scripting, back-end programming using PHP, and MySQL access using PDO.
This is a demo page that features several different concepts and technologies. This is page is NOT a good starting point for a real shopping cart as it does not contain necessary security features nor is the code optimized for an actual shopping cart.
As you play with this page, you will notice:
- The site was constructed as a Responsive Web page. Make your browser window narrower and wider, and you’ll see how the content flows to fit the width.
- @media queries are used to dynamically change the look of the page based on the width of the browser window.
- The four product buttons are responsive images – they automatically shrink when the browser width is narrow.
- The products and their prices are stored in a MySQL database. The structure of the database can be seen in the Physical Database Model.
- The promotions (discount rules) are also stored in the database.
- AJAX is used in several places to make the user experience cleaner and faster.
- jQuery is used extensively to make the code easier to read and cross-browser compatible.
- This “on-page” pop-up box that you see now is a jQuery plugin.
- The site is tablet-friendly (such as iPads); in other words, it is touch-compatible (no mouse needed) and the content will fit to both landscape and portrait orientations.
- The backend is object-oriented PHP that uses PDO to access the MySQL database.
- All the typography is using @font-face and Google Webfonts to give the page a unique feel.
- Fields that display currency are using a Javascript library to format the number for US dollars.