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 make a backup copy of the file. For instance, SearchBrowse.php could be copied to SearchBrowse02.php.

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

  • Upgrade the graphical appearance of your store.

  • 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).

  • Add category item counts to the browse menu.

  • Truncate product descriptions on whole words rather than on a fixed number of characters (i.e. XML Music).

  • 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.

  • 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.
     
  • 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")
     
  • 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)

  • Add a shopping cart status box that tells the user how many items are in the shopping cart (i.e. XML Music).

  • 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.

  • Add a listing of "visited pages" so the user can easily get back to previously viewed items (i.e. Amazon.com, XML Music).

  • Add a list of best selling items (see Amazon.com, XML Music)

  • Add recommendations to the product page: "Customers who bought this item also bought..." (see Amazon.com, XML Music)

  • 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.

  • Add lazy loading to the order history page. FreeNatureDesktop.com utilizes lazy loading.

  • Add "Customer Reviews" to the product page. (see Amazon.com, XML Music)

  • 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)

  • Add a database driven "Wish List" (see Amazon.com)

  • Use server-side caching to improve performance: PHP caching example (source).

  • 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.

  • 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: spinach;
    • 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
  • 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.

  • 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.

  • Optimize the site for mobile. Three major approaches:

    1. Responsive - utilizes CSS media queries to modify the layout to fit the display.  Developers typically utilize grad based response frameworks such as Twitter Bootstrap, Foundation, or Skeleton. The MIS 314 site uses Bootstrap.
    2. RESS (responsive web design with server-side components) - 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. 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 which is described below. A few tips for creating a mobile optimized site:

    1. Media queries allows the use of different styles for different size displays.
    2. RESS sites typically examine the User_Agent attribute in the HTTP request to determine if a request was sent from a mobile device. MobileEXP describes this approach and provides php code.
    3. Once you know that the device is mobile you can use server-side code to insert a second style sheet into your page. Insert it after the primary style sheet and use it to modify styles as needed.
    4. While you are inserting the mobile style sheet you should also insert the "viewport" meta tag. It tells the mobile device that the site is optimized for mobile. Good article on viewport meta tag.
    5. 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.
    6. Opera Mobile Emulator is handy for testing your site.
    7. 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.
  • Recommend items to customers based upon their previous purchases.

  • 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 a way for your to further 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 the class web site.

 

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