Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

CSE383 HW Final Project

Make a new document using the naming convention HWFinal-MUid.docx (example: HWFinal-johnsok9.docx). Objective: The objective of this exercise is to: Use all of the skills learned in the entire course. Submit: screenshots, your word document, html files and links to your web page(s) You may discuss the concepts with your fellow students You may not show or share code with your fellow students You may not show or share code with internet sources You may discuss this with your instructor or TA.

NOTE: This assignment includes a mandatory presentation by you to the Professor, along with submission to canvas. Any assignments which are not presented will receive Zero for the entire assignment. This must be presented working on your openstack instance.

The programming part of the final project is a four-page website. An introduction (landing) page, an ecommerce page, a “My Orders” page, and a printable shopping cart page. These pages are described below.  Any details which are left out (such as the actual layout of the page) are up to your discretion.

Part #1: Create GitLab project

Estimated time: 10 minutes

Exercise: 

· Gitlab

o Create your final project in gitlab

o Clone it into your cse383_projects directory in /var/www/html (will need to use sudo)

Part #2: Client Front End

Estimated time: 2-3 hours

Exercise: 

The first part will be a multi-page/multi-tab web client using html, JavaScript, jQuery, bootstrap, and CSS.  You must make a good looking, pretty, responsive, web site using bootstrap for formatting and your own CSS to make it look great.  The pages must degrade nicely which I will verify by shrinking them from a large desktop so that they fit down to phone size. Degrading means it must change, for example from 3 columns down to 1. Just getting smaller is not degrading.  Ask if you are not sure.

Note: Everything you write must use the following (from the exam)

· Concepts

o Html

o CSS

o JavaScript

o Bootstrap (must be responsive)

o jQuery

o Ajax

· Style

o Good looking using CSS

o All CSS, ajax, JavaScript must be external files

o Every page (including the menu) must include pictures that integrate well into the web page

· Location

o All code MUST be working on your openstack instance http server

o All code must be in git

· Ajax

o You are to write all code using the jQuery Ajax routines as done in the lecture, labs, and homework. Some examples you see will use other methods, notably the fetch command.  You may use those as an example to review, but you MUST use the $.ajax with done and fail calls for credit.

The menu must provide the following items.

· Menu of pages you are providing (with a mechanism to switch pages) You are to research and decide on your own mechanism to provide the front-end menu of pages.

o This was not covered in class.  However, you have already seen web sites for research which included them.

o Do NOT just add buttons or links to the top of a page (hint: nav), you must use a navigation element (navbar)

· 3 Pages

o Front Page

o Ecommerce web page

o My Orders Page

§ Order Print (popup or modal)

Part #3: Ecommerce App (using external api and your OpenStack rest server using SqlLite)

Estimated time: 7-12 hours

This should work like any ecommerce site you use. As you select items to add, the cart icon is updated with information (#items and $ total).

Exercise: 

· Front Page

o Welcome page

o About you

o Introduce the project

o Picture

o Show the class and assignment

· Ecommerce web page

o List all items for sale

§ Get product list from api call (from next week)

o filter by

§ category

§ price range

o Sort by

§ Low Price

§ High Price

§ Category

o Select Item to buy – add to cart

o Press Cart icon to

§ View Cart

§ Edit Cart

· Remove item from cart

§ Make Sale

· Amount tendered

· Payment method (cash/charge)

· Change

· Order Print

o Should be able to prepare the order in a printable window

o Should look good

o New tab with just order information

API Function Calls (will be created over the next 2 weeks in homework/labs)

· Find all categories for sale

· Find all products for sale

o Could be filtered/sorted

· Create a shopping cart

o Returns cartID

· Add an item to a shopping cart

o ID

o Qty

o Unit Price

o Total Price

· Get shopping cart

o Includes list of all items

· Delete Item from Shopping Cart

· Close Cart (make sale)

o Amount tendered

o Payment method (cash/charge)

o Change

Part #4: My Orders

Estimated time: 2-6 hours

Exercise: 

Provide a page where the user can enter a date range and max number of lines and then receive a list of all closed shopping carts for that range.

The user should be able to select a cart and have it show all of the details in the printable cart page (#4)

· My Orders Page

o Show all orders by descending date (latest orders first)

§ Add filter by date range

§ Show date, time, #items, total price

o Selecting an order should show all of the details

o Provide a print button which pops up the order in the separate page ready to print

Part #5: Write a new Word Document

Estimated time: 45 minutes

Exercise: 

· Make sure it includes your name, class, assignment etc…

· Explain (relating to this assignment and the entire course) in full paragraphs with full sentences for full credit.

o what worked

o what didn’t

o how long it took

o What you liked

o What you didn’t

SUBMIT:

· Word Document

· Mandatory Presentation of working system in zoom session

· Upload all code

· Git all code

· Paste the URL of your menu page into the submission as a comment