Module 6

From CSE330 Wiki
Jump to navigationJump to search

In Module 6, you will learn JavaScript, the dominant client-side web language. JavaScript is the third and final programming language you will learn in CSE 330.

This article contains your assignments for Module 6.

Reading

The following articles on the online class wiki textbook contain information that will help you complete the assignments.

Individual Assignments

IMPORTANT: Both of the individual assignments must be completed without using a JavaScript library like Ext JS. However, you may (and should) use Ext JS for the group portion.

JavaScript Calculator

In Module 2, you made a calculator using PHP. Now you will be making one using JavaScript.

  • The web page should have two input fields and a radio button group for the operation, with the 4 basic math operations represented (add, subtract, multiply, divide).
  • JavaScript should monitor all three fields and display the current result whenever the user changes any value in any field, without refreshing the page.
    Tip 1: Consider using either the change or the keyup event on the text fields, and either the change or the click event on the radio buttons.
    Tip 2: Re-read the JavaScript guide if you need help figuring our how to bind callback functions to events, or how to determine which radio button is currently selected. (There are examples for both of these!)
  • The calculator should be completely self-contained; i.e., you should not be making any requests to any other server-side or client-side scripts or web pages after the initial page load.

Tip: You can embed JavaScript code into an HTML document like this: 

<script type="text/javascript">
// your code here
</script>

Tip: If your code isn't working the way you expect, use a JavaScript error console. In Chrome, for example, press Ctrl-Shift-I (or Cmd-Option-I) to open the WebKit inspector.

Weather Widget

In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server.

  1. Make an empty HTML document; name it weather.html
    Refer to the HTML and CSS guide for the skeleton of an HTML document
  2. Define a function in JavaScript; call it fetchWeather(). You may write your JavaScript in an embedded script in your head tag.
  3. Inside your fetchWeather() function, make an AJAX request to the weather server.
    We have a server that outputs the current weather in JSON format. The format is documented in the #JSON Structure section below.
    URL: http://classes.engineering.wustl.edu/cse330/content/weather_json.php
    We kindly thank Yahoo Weather for providing us with up-to-date weather information.
    • IMPORTANT: Under normal circumstances, AJAX requests cannot be performed cross-domain for security reasons. We have set the Access-Control-Allow-Origin header on our server to allow requests from your EC2 instances, or from localhost. You will therefore need to upload your code to your EC2, or access it via localhost, in order for the AJAX requests to work. This means that you cannot, for example, complete this part of the individual portion in JSFiddle.
  4. In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:
    • Location
      • City, in a <strong> tag
      • State, not in any tag
    • Humidity
    • Current Temperature
    • Image for Tomorrow's Forecast (see #Weather Condition Images below for more information)
    • Image for the Day After Tomorrow's Forecast
  5. Finally, bind fetchWeather() to the DOMContentLoaded event so that your weather widget is automatically initialized when the page is loaded: 
    document.addEventListener("DOMContentLoaded", fetchWeather, false);

Use the following HTML: 

<div class="weather" id="weatherWidget">
	<div class="weather-loc"></div>
	<div class="weather-humidity"></div>
	<div class="weather-temp"></div>
	<img class="weather-tomorrow" />
	<img class="weather-dayaftertomorrow" />
</div>

Include the CSS file from here: http://classes.engineering.wustl.edu/cse330/content/weather.css

When everything is working, the weather widget should look something like this:

WeatherWidget.png

Important: The widget in this section needs to work in only Firefox and Chrome. It does not need to work Internet Explorer.

Tips

JSON Structure

The JSON from our server looks like this: 

{
   "updated": "Thu, 11 Oct 2012 5:54 pm CDT",
   "location": {
      "city": "St. Louis",
      "state": "MO"
   },
   "wind": {
      "chill": "62",
      "direction": "150",
      "speed": "3 mph"
   },
   "atmosphere": {
      "humidity": "50",
      "visibility": "10",
      "pressure": "30.12 in"
   },
   "current": {
      "code": "28",
      "text": "Mostly Cloudy",
      "temp": "62°F",
      "date": "Thu, 11 Oct 2012 5:54 pm CDT"
   },
   "tomorrow": {
      "code": "29",
      "text": "Clouds Early/Clearing Late",
      "low": "45°F",
      "high": "61°F"
   },
   "dayafter": {
      "code": "30",
      "text": "Partly Cloudy",
      "low": "53°F",
      "high": "65°F"
   },
   "credit": "http://us.rd.yahoo.com/dailynews/rss/weather/St._Louis__MO/*http://weather.yahoo.com/forecast/USMO0170_f.html"
}
Weather Condition Images

Each day's forecast has a code. There are images associated with these codes.

One place to get the images is from here: http://us.yimg.com/i/us/nws/weather/gr/##ds.png

Replace the ## with the forecast code. For example, for code 32, the URL would be: http://us.yimg.com/i/us/nws/weather/gr/32ds.png

Group Project

I forgot if I already mentioned this, but start early on this project! It will take longer than you think, I promise!

You are encouraged to use the advanced version control practices you learned in Module 5 when completing this assignment.

Calendar

Build a simple calendar that allows users to add and remove events dynamically.

You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load. You may use a JavaScript library of your choice, including Ext JS.

Your application should utilize AJAX to run server-side scripts that query your database to save and retrieve information, including user accounts and events.

Note: You may use PHP for the server-side part of the project. However, it is also possible to set up a Django application for the server. Since for a simple application like this Django requires more work than PHP, you will earn at most 3 points of extra credit for implementing a Django back-end. If you do a Django back-end, you should continue to conform to the MVC architecture.

Examples

JavaScript Calendar APIs

One nice thing about web development is that if there is something you want to write, the chances are that someone else thought of it first and released an API. As it turns out, there are a dozen or so APIs for calendars, two of which run on top of Ext JS.

In this group project, you may use the Extensible Calendar Pro API. There are examples and documentation on their web site. You may not use any other calendar API for Module 6; doing so will result in a zero for the client-side portion of the group project.

Of course, you may choose to build your own calendar from scratch. If you do, you may earn at most 5 points of extra credit. We have also written some functions to help you get started: JavaScript Calendar Library

Requirements

  • Support a month-by-month view of the calendar.
    Show one month at a time, with buttons to move forward or backward.
    There should be no limit to how far forward or backward the user can go.
  • Users can register and log in to the website.
    You may leverage your MySQL project code and database from last week to get started.
    You may alternatively use OpenID for user authentication. Note that you will still need a Users table in order associate calendar events with a certain OpenID.
  • Unregistered users should see no events on the calendar.
  • Registered users can add events.
    All events should have a date and time, but do not need to have a duration.
    You do not need to support recurring events (where you add an event that repeats, for example, every monday).
  • Registered users see only events that they have added.
    Your AJAX should not ask the server for events from a certain username. Instead, your AJAX should ask the server for events, and the server should respond with the events for only the currently-logged-in user (from the session). Can you think of why?
  • Registered users can delete their events, but not the events of others.
    Again, the server should delete events based on the username present in the session. (If it deletes only based on an Event ID, an attacker could feed any arbitrary Event ID to your server, even if he/she didn't own that event.)
  • All user and event data should be kept in a database.
  • At no time should the main page need to be reloaded.
    User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.
  • Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.

Tip: Run your database schema by a TA before implementing it.

Web Security and Validation

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: Web Application Security, Part 3

In particular:

  • Your application needs to prevent XSS attacks. Be careful when transmitting data over JSON that will be reflected in an event title! (Note: JSON data should be sanitized on the client side, not the server side.)
  • Perform precautionary measures to prevent session hijacking attacks.
    You should specify your session cookie to be HTTP-Only. However, for the means of this module, you need not test for user agent consistency.
  • Optional: Validate your JavaScript code using JSHint or JSLint for up to 3 points of extra credit.

You should continue the practices that you have learned in past weeks:

  • Pass tokens in forms to prevent CSRF attacks.
    Hint: You will need to send your CSRF tokens in your AJAX requests. Remember that AJAX still submits forms and runs server-side scripts, just like the vanilla forms you've been using in Modules 2 and 3.
  • Use prepared queries (or object-relational mapping in Django) to prevent SQL Injection attacks.
  • If storing passwords in a database, always store them salted and encrypted.
  • Your page should validate with no errors through the W3C validator.

Grading

Due Date: Monday, October 29th by 1pm (both individual and group)

Please see the notes at the bottom:

Assignment Points
Calculator 0.5
Weather Widget 1
jQuery Dialogs 0.5
Group Portion:
Calendar month view correct and Move between months (without page reload) 1
User authentication and registration (without page reload) 1
Add events (new event shown in calendar without page reload) 1
Events added are private and other users cannot see them 0.5
Delete events (event removed from calendar without page reload) 0.5
Safe from XSS and Session Hijacking 1
Validation, CSRF, Salted Passwords, Safe SQL Queries 1
Creative Portion 2


Total: 10 Points


  • You must get your creative portion part approved from any TA at least one day before the due date. The creative portion is worth 20% of the module grade, and your effort should reflect this. You may receive a deduction if your creative portion idea is not approved.
  • You will still lose one point per day late. As the module is only worth 10 points, that results in a 10% penalty. (Note that all modules are weighted similarly, 10 points for this module does not mean it is only worth half of the previous module).
  • Late Penalty: Monday by Midnight (-1), Tuesday by Midnight (-2), Wednesday by Midnight (-3), Thursday by Midnight (-4), Friday by Midnight (-5). After that, please talk to the instructor.
Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=Module_6&oldid=1343"