● What you may not do: You may not consult with others or work in collaboration to create
your solution in any mode (talking, emailing, texting, etc.). You may not use templates or
outsource any part of your project. If you are discovered, your case and all
accompanying documentation will be submitted to the Dean's office via established
channels for cases of academic dishonesty.
This project is in continuation of the static webpage you designed in assignment one. In
this project, you are asked to create a dynamic product page in an online shop using
way it’s appealing to the user is very important.
The project includes two main pages, a login page, and a product page.
The login page must include:
- A field to ask for the username.
- A field to ask for the Password; Password should be a combination of digits and
characters and it should begin with an uppercase character.
- Login button checks if the username and password entered by the user are
among valid usernames and passwords stored in two arrays in a .php file.
- If the username and password are not valid, show a proper message that either
username or password is not valid.
- If the username and password are valid, meaning that they exist in the arrays on
the server-side, guide the user to the product page.
The product page should include:
- Logo and name of the online shop
- At least two pictures of the product (pictures should be stacked and when the
user clicks on one of them, the selected picture comes to the top)
- A list pointing out different characteristics of the product.
- At least two dropdown boxes to choose between different variations of the
product in terms of color, size, model, etc. (based on the product you choose to
- Dynamically fill one or more dropdown boxes based on a value chosen by one of
the dropdown boxes. For instance, if the user selects a specific product color,
then product size, and product model dropdown lists should only show the
various sizes or models which exist in stock for the chosen color. You need to
use Ajax to complete this task.
- A button to view the cart. The user should see all the added items to the cart in a
- A button to add the product to the cart. Dynamically add a row to the cart table
when the user clicks on the “add to cart” button.
- A search field for searching for new items. When the user is searching for an
item in the search box, based on the entered characters, he should see
autocompleted suggestions with the same starting letters. You need to use Ajax
to complete this task.
- A navigation bar to navigate to other pages
- A section promoting similar/suggested products
- The server response format can be plain text, XML, or JSON.
● Your page should be fully dynamic, meaning that the design should be complete
and all the buttons and links should properly work (except for pages to which the
navigation bar points).
● In creating your website, you might need to use your textbook, examples we saw
in class meetings, or w3schools to learn more.
● Proper implementation of the tags and contents is very important.
● Get up to 5% bonus points using jQuery library and features such as animation, drag &
drop, fading, etc. in your project.