Sprint 4: Client-Side with JavaScript and AJAX

Due: April 21, 2025 at 11:59pm

Purpose: This sprint will help you practice the following skills, reinforce knowledge, and experience server-side web development.

  • Understand the structures of web application (browser objects and document objects) and be able to create dynamic behavior and manipulate DOM using JavaScript
  • Apply business logic and domain specific of the application to perform client-side input validation
  • Apply software usability concepts to improve the quality of web application
  • Work as a team, collaborate with your project partner(s) professionally and contribute fairly

Overview

In this sprint, you will work in your project groups to implement client-side web components written in PHP to perform some of the functionality of your project. Now we must connect the client- and server-side components seamlessly together, using JavaScript and client-side scripting to provide additional features and enhance usability. You will be incorporating dynamic page updates, client-side input validation, and asynchronous requests to the server.

You are encouraged to add enough service and behavior to your application to fulfill the vision that you set out in your project proposal. There is only one more sprint after this one: the project deliverable (with Angular).

You will also continue to ensure that your code is valid HTML5 (to ensure optimal compatibility) and that it meets Section 508 standards (to ensure accessibility of your site).

Sprint Requirements

Please consider the following as minimum requirements only. You are strongly encouraged to get creative and do more than this, but this is what will be required to receive full credit.

Minimum Requirements

These requirements must be implemented in JavaScript, relying on the HTML, CSS, and PHP from the prior sprints. If you need to add additional functionality to your HTML/CSS or PHP backend, you should do that while working towards these requirements.

  • Add at least five different dynamic behaviors using your own JavaScript to your project. That is, these should be JavaScript functions that you write that interact with the user through modifying the DOM or alerting the user. Additionally, each screen (or view) of your project should have at least one dynamic behavior. Those dynamic behaviors should include at least one of each of the following:
    • Perform client-side input validation
      • Validate form data
      • Provide user-appropriate error messages
        • If no error message is provided, other reasonable and appropriate handling (such as auto-complete or auto-correction with defaults) and/or some forms of user-appropriate feedback are acceptable.
    • Perform DOM manipulation
      • You may find this particularly useful for error handling and dynamically manipulating content / view (such as add, remove, or update HTML elements or contents)
    • Modify style and layout of your screens (or views) when a specific event occurs (hint: you may find event listener and DOM manipulation useful)
  • Use at least one event listener (hint: consider client-side input validation or DOM manipulation)
  • Implement and use at least one anonymous function
    • Your anonymous function may be self-invoked or invoked as part of an expression (“function expression”).
  • Implement and use at least one arrow function
  • Define, instantiate, and use at least one JavaScript object
    • For example, you may find this useful when storing data about the user client-side or reading the JSON query
  • Use jQuery in at least one (but not all) of your screens (or views) to provide dynamic behavior.
    • For example, you may wish to use jQuery to attach an event listener to a button and either make an AJAX query or modify the DOM.
  • Use at least one asynchronous AJAX query that consumes your JSON from Sprint 3 and modifies the DOM to include that data in the page
    • You may wish to modify your existing back-end PHP code to return additional JSON objects, depending on how interactive you want your page to be
      • For example, if you are building a shopping site, you may want your back-end to provide a JSON response to an AJAX query for more details on a product (for a modal or overlay) or for the current contents of the user’s shopping cart.
    • You may use either jQuery or XMLHttpRequest.
  • Use good coding style
    • Make identifier names understandable
    • Use proper and consistent indentation
    • Use comments
    • Use new lines in your output \n
  • Deploy your app (.html, .css, .php, and .js) to our cs4640 server. Instructions available online.
    • Include the URL for your app in a comment in the header of your index.html or index.php file. Only one partner needs to host the site on our server, but we encourage everyone to host.

Grading Rubric

Total: 160 points

  • 60 points: Five different dynamic behaviors, with at least one one each screen (or view)
    • 10 points: Client-side input validation
    • 10 points: DOM manipulation
    • 10 points: Modify style and layout of screens when a specific event occurs
    • 20 points: At least 2 more dynamic behaviors ( points each)
    • 10 points: Each screen (or view) has at least one dynamic behavior
  • 10 points: Use at least one event listener
  • 10 points: Functions
    • 5 points: Use at least one anonymous function
    • 5 points: Use at least one arrow function
  • 10 points: Objects - use at least one object
  • 15 points: jQuery - use jQuery to provide dynamic behavior (interacting with the user) in at least one screen
  • 25 points: Make one AJAX query that consumes your JSON back-end query and updates the DOM
  • 5 points: Adherence to all usability concepts as discussed in class
  • 10 points: Use good coding style: readability, style, and maintainability
    • Make identifier names understandable
    • Use proper and consistent indentation
    • Use comments
    • Use new lines
  • 15 points: User demonstration
    • 10 points: Program is demonstrated clearly
    • 5 points: Code segments clearly explained

Note: All partners must be present at the demo. Otherwise, 10 points will be deducted and you are required to reschedule the demo.

  • -5 points: More than 5 minutes late for demo
  • -10 points: Cancel or change the demo time less than 2 hours before the scheduled time
  • -50 points: No show for the signed-up demo time (you may be able to reschedule if there are available openings)
  • -160 points: No demo (no points will be awarded if you do not demo your work)
  • -10 points: Not submitting all files necessary for your project to be functioning to Gradescope
  • -10 points: Not all team member names included as authors of the programs/files (based on contribution, in the meta tag or in comments in CSS) or not all team members’ names are included in the group when submitting to Gradescope
  • Unless a demo arrangement has been made prior to the sprint due date, a demo must be completed within one week after the due date. Otherwise, a zero grade will be assigned.

Submission

Upload all of your .php, .html, .css, and any image files to the Sprint 3 assignment on Gradescope. Gradescope will accept a zip file, individual uploads, or a GitHub repository for your submission. You must include your partner in the group submission on Gradescope for both partners to get credit for the assignment.

  • The files submitted must be all the files necessary for your project to run on the cs4640 server or a similarly configured server.
  • Include all partners’ names as authors of the files (in a <meta> tag in HTML or a comment in CSS) based on their actual contributions (who wrote which content)
  • Include in a comment in the header of your index.html file the URL to your working version on the cs4640 server
  • NOTE: Do NOT upload jQuery’s JavaScript files, or any Composer-supplied php files to Gradescope. Only submit the code your team wrote.

Your program will be graded during an interactive session in which you demonstrate it to the course staff (instructor and/or TA). You will have to sign up for a demonstration slot in order to do this. A sign up page will be available for you to use as the deadline approaches. Sign up early so that you get a time slot you want.

If you do not do a demonstration, you will receive no credit for the sprint.

Part of your grade will be based on explaining code segments and/or design to the instructor or TA. Come to the demonstration prepared to talk about your code.

Even though you will be demonstrating the files after the deadline, all the code must EXACTLY match the code that was submitted, and cannot have been modified after submission deadline. Several randomly selected assignments will be tested by installing the submitted files back onto the server before running the program. If it is determined that your code was modified after submission deadline, you will not receive credit for it.

Note: Making your submission available to the course staff is your responsibility; if we cannot access your files and your site on the cs4640 server, then we have to assign a zero grade. Be sure to test access to your files before the due date.

Important Note: All code in this assignment must be your own! You are free to use the course handouts and examples, as well as Bootstrap examples, as a starting point. You may refer to online resources with proper citation but you CANNOT take full code from the web, chatGPT or other generative ai, or any other source. Assignments that are found to have done this will be given a zero and submitted to the Honors Committee. You may not use code you have submitted for another course.