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 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.
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
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
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),
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:
- 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.
- 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.).
- 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:
- Media queries allows the use of different styles for different size displays.
- RESS sites typically examine the User_Agent attribute in the
HTTP request to determine if a request was sent from a mobile device.
describes this approach and provides php code.
- 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.
- 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.
- 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.
- Opera 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.
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 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.