The term project is to add enhancements to your on-line store. This is your opportunity
to be creative!
Instructions for turning in
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:
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. Amazon.com).
Add category item counts to the browse menu.
(i.e. REI (2)
Truncate product descriptions on whole words rather than on a fixed number of characters
(i.e. MVC Music).
Send an HTML email confirmation rather than a plain text confirmation (i.e. MVC 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 multiple images (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.
Add a shopping cart status box that tells the user how many items are in the shopping
cart (i.e. MVC Music, Amazon.com).
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, MVC Music).
Add a list of best selling items (see Amazon.com, MVC Music)
Add recommendations to the product page: "Customers who bought this item also bought..."
(see Amazon.com, MVC 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.
Google's Address Autocomplete in the checkout (still need server side validation). (example) (5-6)
Add lazy loading to the order history page.
Photo Gallery utilizes lazy loading.
Add "Customer Reviews" to the product page. (see Amazon.com, MVC 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
Add a database driven "Wish List" (see Amazon.com)
Optimize the site for mobile. (4-5)
Three major approaches:
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."
- 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.
- 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.).
- 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.
- Google's developer site has a good overview of responsive design.
- 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.
- Chrome's Mobile Emulator is handy for testing your site.
- 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.
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 42,740 city/state/zipcodes on
Yorktown. Login to phpMyAdmin using username: zipreader, password: zipcodesMis314.
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.
For other ideas look at Amazon, Barnes and Noble and other sophisticated shopping
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
Submit the URL to your bookstore's home page (index.php) via the
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.