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

Creating a dynamic web page using HTML, CSS, Javascript, Ajax and PHP

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

proper HTML, CSS, Javascript, and Ajax. The use of CSS to style your websites in a

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

present)

- 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

table.

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

Pay attention:

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

Bonus Points:

● Get up to 5% bonus points using jQuery library and features such as animation, drag &

drop, fading, etc. in your project.