Web-Based Order Processing Application Assignment

Web-Based Order Processing Application Assignment

Instructions/Descriptions

Web-Based Order Processing Application Assignment

WD 211 – Project: Final submission 1 Project: Final submission the goal of this project is to design and implement the user-facing aspects of a Web-based order processing application. In this final project submission, your objectives are as follows: • Implement the required functionality using JavaScript, form validation, and AJAX with Web APIs.

• Present your work to your peers, receive feedback, and provide your own review of the work of your peers. Application requirement specification the application has one user group: employees who review and process incoming orders submitted by online shoppers: Required functionality: • Employees must login to the application with their personal PIN code. • Employees must be able to see a list of submitted orders.
• Employees must be able to view the details of an order on the same page as the list of orders (e.g., in a pop-up dialog or dynamically update area on the page). • Employees must be able to change the status of an order (waiting for products – in preparation – ready for shipping). • Employees must be able to archive orders that has been shipped. Final submission requirements JavaScript functionality Write JavaScript functions to dynamically update the web pages following these user interactions:
• When an employee logs into the website with their PIN and is presented with a list of submitted orders. • When an employee changes the status of an order. • When an employee archives an order that has been completed. The state of the list of orders should be updated to reflect the removal of the item.
• All JavaScript functionality that is related to AJAX calls to Web APIs must be processed in such a way that success, error, and failure conditions are handled. o for example, if the employee provides an incorrect PIN code, an error message to this effect should be shown to the user. Form validation Implement form validation for the employee login form to handle input errors from users: • At a minimum, you must implement form validation using standard HTML5 input types (e.g., type=”password”) and validation attributes (e.g., mi length/daylength). o Employee PIN must be exactly 5 characters, all digits’ 211 – Project: Final submission 2 • To receive full points for this portion of the project, you must use the JavaScript Constraint Validation API1 or jQuery Validation plugin2 to implement custom form validation.

[Order Now]

The custom validation includes the following: o Customized error messages to indicate input fields that are missing required values. o Customized error message to indicate the input fields that do not pass validation. The error message should provide feedback to the user on the correct format/values. • Form submission must be prevented if any validation errors exist.

AJAX calls to Web APIs Implement functionality to communicate website state to the server using AJAX calls to relevant Web APIs: • When an employee submits the login form, the default form submission should be prevented. Instead, send an asynchronous request to the relevant Web API using AJAX. The request must provide the required content and react to the return values provided from the server.

If the request is successful, redirect the user to the employee-facing page that lists customer orders. If the request fails, show the user an error message on the login page. • When an employee views the page that lists customer orders, the order data should be retrieved from the relevant Web API using AJAX. If the request is successful, dynamically add the orders on the page using appropriate HTML elements. If the request fails, show an appropriate error message.

• When an employee changes the status of an order or archives an order from the list of orders, a request should be sent to the relevant Web API using AJAX. The request must provide the required content and react to the return values provided from the server. If the request is successful, update the element appropriately. If the request fails, show the user an error message on page. Documentation for the Web APIs will be provided online at http://www.tomiheimonen.info/wd211/apis/docs/ Documentation All JavaScript code that you write for the project must be documented:
• At a minimum, describe the purpose of each function, its parameters, and the return value (if any) using JavaScript comments. • Additionally, describe the functioning of any non-trivial JavaScript code blocks (e.g., for loops, adding/removing elements from the page, etc.) 1 https://developer.mozilla.org/en-

US/docs/Web/Guide/HTML/HTML5/Constraint validation 2 https://jqueryvalidation.org/WD 211 – Project: Final submission 3 Best practices Use the lecture materials and the following resources to ensure that you are following best practices in setting up your project folders, files and CSS and JavaScript content: • https://www.w3schools.com/js/js_best_practices.asp

• https://www.w3schools.com/js/js_conventions.asp Retrospective Include a brief retrospective (approximately 200-300 words) that discusses the following questions: • What you think went well with the project? What did you learn? • What didn’t go so well – did you struggle with some aspects of the project? • What would you differently when completing a similar project in the future? Submit the retrospective in the project drop box in Microsoft Word or PDF format. The retrospective will not be graded but it is required.

Failure to include a retrospective will result in a 5% reduction in points. Due date and submission the project is due by 11:59 PM on Wednesday, May 12. Grading The final course project submission awards a total of 15 points according to the following breakdown: JavaScript functionality (10 points)

• Successfully implementing each of the required user interactions (login, list customer orders, change order status/archive order) awards 3 points totals. o You will receive 1 point for successfully implementing each of the AJAX calls to Web APIs that are required to be made to retrieve or send data to the server. o You will receive 2 points for using the data sent in the response to update the page.
• Up to 1 point is awarded based on the overall quality of your solution. For example: o Are you using the appropriate HTML DOM API or jQuery methods to add or remove elements form the page? o Are event listeners used appropriately to capture user’s interactions with the page? o Is the code making reasonable use of the various browser APIs to not reinvent the wheel (e.g., working with strings, dates, numbers, arrays, control structures, etc.)? Form validation (3 points)
• Successfully implementing the standard HTML5 input types and validation constraints on the long form will award at most 1 point. • To receive the remaining 2 points, you must successfully use the JavaScript Constraints Validation API or jQuery Validation plugin 211 – Project: Final submission 4 Documentation (1 point)
• When assessing the documentation, I will mainly look at your ability to clearly communicate the purpose and functionality of the code you have written. • Vague, incorrect, or missing documentation will reduce points awarded proportional to the degree of missing content. Best practices (1 point) • You will receive up to 1 point for proper application of the best practices discussed in class and in the reference materials.
• During grading I will pay specific attention to file and folder names, folder structures, and variable and function definitions. • I will not penalize minor issues, but major violations such as lack of proper folder structure or inconsistent variable declarations will result in point reduction. • Make sure that your HTML, CSS, and JavaScript is properly formatted. If in doubt, you can run your content through a “beautifier” program to clean up the formatting (e.g., https://beautifier.io/

Web-Based Order Processing Application Assignment

PLACE THE ORDER WITH US TODAY AND GET A PERFECT SCORE!!!