Syllabus Schedule Project Labs Canvas Server Access phpMyAdmin Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9
Project

The term project is to add enhancements to your on-line store. This is your opportunity to be creative!  

  1. Enhancement ideas

  2. Instructions for turning in project

  3. Project grading

1. Enhancement Ideas

Make sure that your bookstore has the basic features found in the sample site before you add enhancements. The value of enhancements is significantly discounted if the store's basic functionality is missing.

Also, check that all user supplied inputs are cleaned so that single-quotes do not cause exceptions or expose your site to SQL injection. Inputs can be easily cleaned using the mySqli_real_escape_string() function.

Tip: Before starting to work on enhancements that could cause existing code to malfunction I suggest that you copy your project to a new folder. For instance, the Bookstore folder could be copied to Bookstore2.

Grading: The point value of enhancements depends upon their difficulty and how well they are implemented. The typical point value for a few more popular enhancements is in parenthesis at the end of each bullet point.

Possible enhancements ideas include, but are not restricted to, the following:

  1. Upgrade the graphical appearance of your store. (1-4 pts.)
  2. Write the user's email address to a cookie and use it to automatically fill in the email box on subsequent visits (i.e. XML Music). (1)
  3. Add category item counts to the browse menu. (2)
  4. Truncate product descriptions on whole words rather than on a fixed number of characters (i.e. XML Music). (1)
  5. Send an HTML email confirmation rather than a plain text confirmation (i.e. XML Music). HTML emails support fancier formatting such as tables, colors, images, hyperlinks, etc. See php documentation for syntax.
    Note: to use a display name for the sender requires a workaround with PHP on Windows servers. Either uses this send php email with display name workaround (source) or simply do not use a display name. (3-4)
  6. Display images more elegantly. Options include Lightbox, Graybox, Highslide or more sophisticated features like zoom (Amazon, REI). The book images in the right column of this page use Highslide. (4)
  7. When a search or browse returns only one item, display the productPage.php rather than the searchResponse.php page. (i.e. Amazon.com search for "0596005601") (1)
  8. Utilize a site template to eliminate duplicate HTML & CSS.  The following example uses variables to hold the dynamic content for each page. The variables are then output in a page template. ListCityZips.php (source, template) (4)
  9. Add a shopping cart status box that tells the user how many items are in the shopping cart (i.e. XML Music). (1-2)
  10. Improve efficiency by displaying authors using the GROUP_CONCAT() mySQL function rather than executing a separate SQL statement to retrieve author names (see assignment 5). Turns out that this is LESS efficient. (0)
  11. Add a listing of "visited pages" so the user can easily get back to previously viewed items (i.e. Amazon.com, XML Music). (4)
  12. Add a list of best selling items (see Amazon.com, XML Music) (3-4)
  13. Add recommendations to the product page: "Customers who bought this item also bought..." (see Amazon.com, XML Music) (4-5)
  14. Use AJAX. This example uses AJAX for the home, searchBrowse and product pages. The functionality of the three pages is consolidated into index.php. The search is executed with each keystroke. The example reports database access times, which is not a requirement. (6-8)
  15. Google's Address Autocomplete in the checkout (still need server side validation). (4-6)
  16. Add lazy loading to the order history page. Photo Gallery utilizes lazy loading. (4)
  17. Add "Customer Reviews" to the product page. (see Amazon.com, XML Music) (7-9)
  18. Add a verification image (CAPTCHA) to the login page (Checkout01.php) and/or the product recommendations. Verification images make it difficult for spam robots to submit forms. reCaptcha is easy to implement and offers a sound option for blind users (example) (4-6)
  19. Add a database driven "Wish List" (see Amazon.com) (8)
  20. Optimize the site for mobile. (4-5)
    Three major approaches:
    1. Responsive - utilizes CSS media queries to modify the layout to fit the display.  Developers typically utilize grid based response frameworks such as Twitter Bootstrap, Foundation, or Skeleton. The MIS 324 project MVC Music site and the MIS 314 class web site (including this page) uses Bootstrap.
    2. Dynamic serving - adds server-side logic to responsive designs to better improve the user experience. This allows different content to be sent to different devices (e.g. less content, smaller images, different ads, etc.).
    3. Separate mobile site - completely different site for mobile devices. This option can provide the best user experience but is also expensive to develop and maintain.  This approach is utilized by major sites such as Amazon, Fool.com, and ThinkGeek.
    The sample Bookstore uses the second approach. However responsive grid frameworks have grown tremendously in popularity and are Google's recommended design pattern. A major reason for Google support of responsive deigns is its simplicity.  Dynamic serving and separate URL can provide a superior user experience but can also fail miserably if implemented incorrectly and/or are not maintained. I recommend using Twitter Bootstrap which claims to be the " most popular HTML, CSS, and JS library in the world."
    1. Google's developer site has a good overview of responsive design.
    2. Mobile sites typically utilize only one column. Since screen sizes vary dramatically in size it typically is more effective to size elements with percentages rather than fixed sizes.
    3. Chrome's Mobile Emulator is handy for testing your site.
    4. Your site will be easier to modify if it uses a template. Many of the site modifications can be made on the template rather than on every page of the site.
  21. Recommend items to customers based upon their previous purchases.
  22. Use server-side caching to improve performance: PHP caching example (source). 
  23. Sort searches by relevance. For instance, a keyword located in a book's title is more relevant than one in its description. Searched fields should include title, description, categories and authors. It should also handle multi-word queries. This article explains a relatively simple approach to relevance-base search. Here is a bookstore sample that searches by relevance, assigning 40 points for a match in author, 30 points for title, 20 points for category, 10 points for description within first 100 characters and 5 points for description past 100 characters. It uses preg_split to parse the search phrase into an array of individual words and a foreach loop to dynamically build the query. The "relevance" score is adjusted so that the first item has a relevance of 100.
  24. Validate city-state-zip code combinations by looking them up in a zip code database (source). You may access a mySQL zipcode database containing 43,070 city/state/zipcodes on Yorktown as follows:
    • database: Sandvigzipcodes;
    • tablename: zipcodes;
    • username: zipreader, password: zipcodesMis314;
    • field names: zip, latitude, longitude, city, state, zip, county. 
    • Test SQL: SELECT zip , latitude , longitude , city , state , county FROM zipcodes LIMIT 0 , 30.
       
    • Samples: CityZipValidate.php (source), XML Music
  25. Determine item availability by checking the inventory level in the database. Write an appropriate availability message on the product_page, depending upon inventory levels. Reduce inventory levels each time a item is ordered.
  26. Create administration pages that allow store employees to add/delete products in the database and/or update customer information. Here is a handy snippet of code for uploading and resizing images with PHP . This code requires that the NETWORK user has write permissions on the folder. Ask Dr. Sandvig to modify your folder permissions on Yorktown.
  27. For other ideas look at Amazon, Barnes and Noble and other sophisticated shopping sites.

Include a list of your enhancements in your "About this store" section so that I don't miss any when grading your assignment.

2. Instructions for turning in Project

The project is due at the date and time shown on the course schedule.  Late projects will be subject to a penalty of 20 points per 24 hours (so don't be late!). 

Submit the URL to your bookstore's home page (index.php) via the Canvas course management system.

3. Project Grading

The project grade is based upon the basic store created in assignments 7, 8 and 9, plus any enhancements that you have added. The basic store that you have completed by the end of assignment 9 will earn a grade of approximately a B-. Enhancements are allow you to improve your grade.

The grading of the final project is very detailed and includes looking at your source code to make sure that you have coded efficiently and neatly. Specifically I will be checking to make sure that you have used server side includes for all code that is reused, that your browse menu is dynamically generated, and that you code is original (your own work).

Project grades will be posted on Canvas.

 

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes
Top