Difference between revisions of "Module 5"

From CSE330 Wiki
Jump to: navigation, search
m (Grading)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
In Module 5, you will learn about Git, a version control system, and Django, a web framework.
+
In Module 5, 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 5.
 
This article contains your assignments for Module 5.
Line 8: Line 8:
 
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
 
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
  
 +
* [[JavaScript]]
 +
* [[AJAX and JSON]]
 +
* [[jQuery]]
 +
* [[Web Application Security, Part 3]]
 
* [[Git]]
 
* [[Git]]
* [[Web Frameworks]]
 
  
 
== Individual Assignments ==
 
== Individual Assignments ==
  
<!-- === Learn about Version Control Systems ===
+
'''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like jQuery.'''  However, you may (and should) use jQuery for the group portion.
  
On your own time, '''watch the 40-minute screencast that has been posted to Blackboard'''.  This gives an insightful understanding of how VCSs work under-the-hood. -->
+
=== JavaScript Calculator ===
  
=== Django Tutorial ===
+
In Module 2, you made a calculator using PHP.  Now you will be making one using JavaScript.
  
The web framework we will be using in Module 5 is called '''Django'''. Django is the dominant Python-based web framework and is useful for large web sites.
+
* 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 [[JavaScript|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.
  
Before you may begin, you need to install Django.  You may do this using [[Python#Pip|pip]], which you installed in Module 4.  Django's package name in pip is '''Django'''.
+
'''Tip:''' You can embed JavaScript code into an HTML document like this:
  
Once you have Django installed, complete [https://docs.djangoproject.com/en/1.5/intro/tutorial01/ the official Django tutorial].  You will be creating a simple poll app.  '''Complete the first ''four'' parts of the tutorial for the individual portion.'''  You may complete steps 5 and 6 during the group portion.
+
<source lang="html4strict">
 +
<script type="text/javascript">
 +
// your code here
 +
</script>
 +
</source>
  
'''Tip:''' It is recommended that you install a copy of Python and Django on your local computerThis way, you will not need to upload the files to your server every time you make a change, because your server will be running locally.
+
'''Tip:''' If your code isn't working the way you expect, use a JavaScript error consoleIn Chrome, for example, press Ctrl-Shift-I (or Cmd-Option-I) to open the WebKit inspector.
  
'''Tip:''' When testing Django on your EC2 instance, make sure to open port 8000 for your instance on AWS (and to click "apply rule changes").
+
'''Important:''' It is best practice to fully separate the content, appearance, and behavior.  In previous modules, you may have lost points for using HTML tags that change the appearance of things <nowiki>(like <center> and <font>).</nowiki>  In this module, make sure that you define your event listeners in JavaScript as in <code>document.getElementById("xyz").addEventListener(...)</code> and '''''not''''' in the HTML like <code><button onclick="badExample();">Bad Example</button></code>.
  
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial01/ Part 1]'''
+
=== Weather Widget ===
#* Create a project
+
 
#* Start the development server
+
In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server.
#* Setup an SQLite database
+
 
#* Create the Polls app and define the models
+
# Make an empty HTML document; name it '''weather.html'''
#* Interact with the database using the interactive python shell
+
#: Refer to the [[HTML and CSS]] guide for the skeleton of an HTML document
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial02/ Part 2]'''
+
# Define a function in JavaScript; call it '''fetchWeather()'''.  You may write your JavaScript in an embedded script in your head tag.
#* Activate the admin site
+
# Inside your '''fetchWeather()''' function, make an AJAX request to the weather server.
#* Add the poll app to the admin site
+
#: We have a server that outputs the current weather in JSON format.  The format is documented in the [[#JSON Structure]] section below.
#* Modify the database using the admin site
+
#: '''URL:''' http://classes.engineering.wustl.edu/cse330/content/weather_json.php
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial03/ Part 3]'''
+
#: We kindly thank Yahoo Weather for providing us with up-to-date weather information.
#* Configure URL handling
+
#* '''IMPORTANT:''' Under normal circumstances, AJAX requests ''cannot'' be performed cross-domain for security reasons. We have set the <code>Access-Control-Allow-Origin</code> 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.
#* Create some views
+
# In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:
# '''[https://docs.djangoproject.com/en/1.5/intro/tutorial04/ Part 4]'''
+
#* Location
#* Write a form that modifies the database
+
#** City, in a <nowiki><strong></nowiki> tag
#* Refactor to use generic views
+
#** 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
 +
# Finally, bind '''fetchWeather()''' to the DOMContentLoaded event so that your weather widget is automatically initialized when the page is loaded:
 +
#: <source lang="javascript">document.addEventListener("DOMContentLoaded", fetchWeather, false);</source>
 +
# In addition, add a button that runs your ''fetchWeather'' function when clicked.  This should update your widget with the current weather conditions.
 +
 
 +
Use the following HTML:
 +
 
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 
 +
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:
 +
 
 +
[[File: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:
 +
 
 +
<source lang="javascript">
 +
{
 +
  "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"
 +
}
 +
</source>
 +
 
 +
===== 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: <nowiki>http://us.yimg.com/i/us/nws/weather/gr/</nowiki>'''##'''<nowiki>ds.png</nowiki>
 +
 
 +
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 ==
 
== Group Project ==
  
=== Extending the Polls App using Version Control ===
+
I forgot if I already mentioned this, but '''start early on this project!''' It will take longer than you think, I promise!
  
As your group project, you and your partner will each independently add an additional feature to the polls app you made in the individual portion. You will each be working in your own branch in your group Git repository.  When the features are complete, you will merge them back into the master branch.
+
You are encouraged to use the advanced version control practices you learned in Module 5 when completing this assignment.
  
# Someone in your group needs to copy their tutorial code from the individual portion into the master branch of the group repository.
+
=== Calendar ===
# After pushing and pulling, everyone should have the up-to-date master branch on their machine.
 
# Each person in the group should then make a new branch named with their first name.
 
# Each person can then individually work on their new feature.  Here are some ideas for new features that will all earn full credit.
 
#: If there is a feature not on this list that you would like to add, save it for the Creative Portion.
 
#: '''Important: Refer to the grading section for more details on our expectations for the features.'''
 
#* Enable users to create and edit their own polls
 
#* Add user accounts.  Polls voted on would be associated with the account.  Note that Django comes built-in with user accounts; you just need to wire a few things up.  Refer to [https://docs.djangoproject.com/en/dev/topics/auth/default/ the Django documentation] for details.
 
#* Check for double votes using an IP address ''or'' a cookie
 
#*: ''Food for Thought: What are the pros and cons of using IP addresses to block double votes compared to cookies?''
 
#* Set a timeout for polls (e.g., ensure that the poll is active for only 7 days)
 
#* Complete the last two steps of the Django tutorial (unit testing and appearance).
 
# When someone completes their feature, they should merge their branch into the master branch, and everyone else in the group should merge the master branch (which now has the new feature) into their personal working branch.
 
  
<!--Not doing in summer, lab machines are still missing software.... On Demo Day, you will need to show the branching structure of your repository in SourceTree to the TA. -->
+
Build a simple calendar that allows users to add and remove events dynamically.
  
=== Creative Portion ===
+
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.
  
As your creative portion, you may either add your own feature, or you may add another of the suggested features aboveSee the grading section for details.
+
Your application should utilize AJAX to run server-side scripts that query your database to save and retrieve information, including user accounts and events.
 +
 
 +
We have also written some functions to help you get started: [[JavaScript Calendar Library]]
 +
 
 +
==== Examples ====
 +
 
 +
* https://calendar.google.com/
 +
* http://www.zoho.com/calendar/
 +
 
 +
==== Server Side Language ====
 +
 
 +
 
 +
Additionally, you may use a database of your choice.  MySQL is probably the logical choice since you have been using it since Module 2, but if you're up for a challenge we encourage you to look at other database options like [[wikipedia:MongoDB|MongoDB]].
 +
 
 +
''* While it is fine to use the provided example for reference, copying it in its entirety is a violation of Academic Integrity and will result in a 0 for the group portion of this module.  Don't plagiarize.''
 +
 
 +
==== 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 module 3 to get started.
 +
*: You may alternatively use [[Web Application Security, Part 2#OpenID|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 ===
 
=== Web Security and Validation ===
  
Web frameworks take care of a lot of the security practices you learned in modules 2 and 3.  For more information on Django security, refer to the Django documentation: https://docs.djangoproject.com/en/dev/topics/security/
+
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:
  
You still need to ensure that all pages on your site pass the W3C validation.
+
* '''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 [http://www.jshint.com/ JSHint] '''''or''''' [http://jslint.com/ 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 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 ==
 
== Grading ==
  
We will be grading the following aspects of your work.  There are 75 points total.
+
We will be grading the following aspects of your work.  There are 100 points total.
  
# '''Django Tutorial Steps 1-4 (20 points):'''
+
# '''JavaScript Calculator (10 Points):'''
#* Database schema and models set up (5 points)
+
#* Calculator successfully adds, subtracts, multiplies, and divides numbers (3 points)
#* Admin page working (5 points)
+
#* The result is automatically computed when a value in either field is changed (3 points)
#* URL routing is correct (5 points)
+
#* Calculator is written entirely in pure, conventional JavaScript with no external libraries (4 points)*
#* Correct implementation of MVC (or, shall we say, MTV) architecture (5 points)
+
#*: ''Note: be sure to fully separate content, appearance, and behavior.  This means that you should '''not''' use the event attributes on the HTML elements like onclick, onchange, and onkeyup.''
# '''Extend Polls Application (45 Points):'''
+
# '''Weather Widget (15 Points):'''
#* '''''Version Control (15 Points):'''''
+
#* Widget performs an AJAX request to fetch the current weather (4 points)
#** Each team member has their own branch in Git (5 points)
+
#* The HTML template is filled with the correct information, including an image (4 points)
#** The branching view in SourceTree indicates that features were merged into master as they were completed and from there merged into each member's working branch (10 points)
+
#* Button to reload the weather widget (2 points)
#* '''''Features (20 Points):'''''
+
#* Widget is written entirely in pure, conventional JavaScript with no external libraries (5 points)*
#*: ''The rubric for five features are shown below; each one is worth 10 points.  You need only two of the five to satisfy this requirement. Implementation of a third additional feature will count for the Creative Portion; see below for details.''
+
# '''AJAX Calendar (60 Points):'''
#** '''Unit Testing and Appearance'''
+
#* '''''Calendar View (10 Points):'''''
#*** These are the last two steps of the Django 1.5 tutorial.
+
#** The calendar is displayed as a table grid with days as the columns and weeks as the rows, one month at a time (5 points)
#** '''Poll Creation and Editing'''
+
#** The user can view different months as far in the past or future as desired (5 points)
#*** Users can specify any number of choices for the poll
+
#* '''''User and Event Management (25 Points):'''''
#*** If the "Timeout" feature is implemented, a timeout can be specified for the poll
+
#** Events can be added, modified, and deleted (5 points)
#**: ''Note:'' When a poll is edited, you can choose whether to always reset all votes, or whether to keep old votes between edits of the poll.
+
#** Events have a title, date, and time (2 points)
#** '''User Accounts'''
+
#** Users can log into the site, and they cannot view or manipulate events associated with other users (8 points)
#*** Users can log in and log out
+
#**: ''Don't fall into the Abuse of Functionality trap!  Check user credentials on the server side as well as on the client side.''
#*** Votes on polls are associated with a user
+
#** All actions are performed over AJAX, without ever needing to reload the page (10 points)
#** '''Preventing Double Votes'''
+
#* '''''Best Practices (20 Points):'''''
#*** If using the IP-based approach, you store the IP address ''using the correct SQL data type'' (i.e., not a string)
+
#** Code is well formatted and easy to read (2 points)
#*** If using the cookie-based approach, your cookie format is not something that the end user can easily figure out and manipulate
+
#** If storing passwords, they are stored salted and encrypted; if using OpenID, you are storing the user's OpenID identifier in the database (2 points)
#**: ''Note:'' You will not earn credit for implementing both an IP-based and a Cookie-based approach.
+
#** All AJAX requests that either contain sensitive information or modify something on the server are performed via POST, not GET (3 points)
#** '''Poll Timeout'''
+
#** Safe from XSS attacks; that is, all content is escaped on output (3 points)
#*** Polls can have specified start times and end times
+
#** Safe from SQL Injection attacks (2 points)
#*** The poll entirely shuts down when it is "off" (i.e., the template should not load and the view should not allow more votes to be cast)
+
#** CSRF tokens are passed when editing or removing events (3 points)
#* '''''Best Practices (5 Points):'''''
+
#** Session cookie is HTTP-Only (3 points)
#** Code is well organized and conforms to Django conventions (3 points)
+
#** Page passes the W3C validator (2 points)
#** All pages pass the W3C validator (2 points)
+
#** ''Extra Credit:'' Your code passes ''JSHint'' or ''JSLint'' (+3 bonus points)
 
#* '''''Usability (5 Points):'''''
 
#* '''''Usability (5 Points):'''''
 
#** Site is intuitive to use and navigate (4 points)
 
#** Site is intuitive to use and navigate (4 points)
 
#** Site is visually appealing (1 point)
 
#** Site is visually appealing (1 point)
# '''Creative Portion (10 Points):'''
+
# '''Creative Portion (15 Points)'''
#* Each one of the five features listed in the "Features" section is worth 10 points.
+
#* '''Additional Calendars Features (worth 15 points):''' Develop some additional features for the calendar, a few examples are provided below.
#* A novel feature not listed in the "Features" section may be worth a full 10 points.
+
#**  Users can tag an event with a particular category and enable/disable those tags in the calendar view. (5 points)
 
+
#** Users can share their calendar with additional users. (5 points)
 
+
#** Users can create group events that display on multiple users calendars (5 points)
'''For Clarification Only:'''
+
''* These points can be earned only if at least 3 other points have been earned in that category.  This is to prevent these points from being "free."''
* Zero Suggested Features = 20 Points Lost in Group Portion
 
* One Suggested Feature = 10 Points Lost in Group Portion
 
* Two Suggested Features = No Points Lost in Group Portion
 
* Three Suggested Features = No Points Lost in Group Portion '''''and''''' 10 Points in Creative Portion
 
* Two Suggested Features + a TA-Approved Novel Feature = No Points Lost in Group Portion '''''and''''' 10 Points in Creative Portion
 
*: ''Note:'' No extra credit will be granted for completion of additional suggested features if your creative portion is already satisfied.
 
  
 
[[Category:Module 5]]
 
[[Category:Module 5]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Revision as of 08:14, 22 August 2014

In Module 5, 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 5.

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 jQuery. However, you may (and should) use jQuery 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.

Important: It is best practice to fully separate the content, appearance, and behavior. In previous modules, you may have lost points for using HTML tags that change the appearance of things (like <center> and <font>). In this module, make sure that you define your event listeners in JavaScript as in document.getElementById("xyz").addEventListener(...) and not in the HTML like <button onclick="badExample();">Bad Example</button>.

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);
    
  6. In addition, add a button that runs your fetchWeather function when clicked. This should update your widget with the current weather conditions.

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.

We have also written some functions to help you get started: JavaScript Calendar Library

Examples

Server Side Language

Additionally, you may use a database of your choice. MySQL is probably the logical choice since you have been using it since Module 2, but if you're up for a challenge we encourage you to look at other database options like MongoDB.

* While it is fine to use the provided example for reference, copying it in its entirety is a violation of Academic Integrity and will result in a 0 for the group portion of this module. Don't plagiarize.

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 module 3 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 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

We will be grading the following aspects of your work. There are 100 points total.

  1. JavaScript Calculator (10 Points):
    • Calculator successfully adds, subtracts, multiplies, and divides numbers (3 points)
    • The result is automatically computed when a value in either field is changed (3 points)
    • Calculator is written entirely in pure, conventional JavaScript with no external libraries (4 points)*
      Note: be sure to fully separate content, appearance, and behavior. This means that you should not use the event attributes on the HTML elements like onclick, onchange, and onkeyup.
  2. Weather Widget (15 Points):
    • Widget performs an AJAX request to fetch the current weather (4 points)
    • The HTML template is filled with the correct information, including an image (4 points)
    • Button to reload the weather widget (2 points)
    • Widget is written entirely in pure, conventional JavaScript with no external libraries (5 points)*
  3. AJAX Calendar (60 Points):
    • Calendar View (10 Points):
      • The calendar is displayed as a table grid with days as the columns and weeks as the rows, one month at a time (5 points)
      • The user can view different months as far in the past or future as desired (5 points)
    • User and Event Management (25 Points):
      • Events can be added, modified, and deleted (5 points)
      • Events have a title, date, and time (2 points)
      • Users can log into the site, and they cannot view or manipulate events associated with other users (8 points)
        Don't fall into the Abuse of Functionality trap! Check user credentials on the server side as well as on the client side.
      • All actions are performed over AJAX, without ever needing to reload the page (10 points)
    • Best Practices (20 Points):
      • Code is well formatted and easy to read (2 points)
      • If storing passwords, they are stored salted and encrypted; if using OpenID, you are storing the user's OpenID identifier in the database (2 points)
      • All AJAX requests that either contain sensitive information or modify something on the server are performed via POST, not GET (3 points)
      • Safe from XSS attacks; that is, all content is escaped on output (3 points)
      • Safe from SQL Injection attacks (2 points)
      • CSRF tokens are passed when editing or removing events (3 points)
      • Session cookie is HTTP-Only (3 points)
      • Page passes the W3C validator (2 points)
      • Extra Credit: Your code passes JSHint or JSLint (+3 bonus points)
    • Usability (5 Points):
      • Site is intuitive to use and navigate (4 points)
      • Site is visually appealing (1 point)
  4. Creative Portion (15 Points)
    • Additional Calendars Features (worth 15 points): Develop some additional features for the calendar, a few examples are provided below.
      • Users can tag an event with a particular category and enable/disable those tags in the calendar view. (5 points)
      • Users can share their calendar with additional users. (5 points)
      • Users can create group events that display on multiple users calendars (5 points)

* These points can be earned only if at least 3 other points have been earned in that category. This is to prevent these points from being "free."