Difference between revisions of "Module 6"

From CSE330 Wiki
Jump to navigationJump to search
m
 
(134 intermediate revisions by 9 users not shown)
Line 1: Line 1:
In Module 4, you will learn about JavaScript, the prevailing client-side language, and AJAX, a method for performing asynchronous updates to a web page (without refreshing the page).
+
__NOTOC__
 +
Module 6 builds upon the JavaScript skills you learned in Module 5.
  
This article contains your assignments for Module 4.
+
== Reading ==
  
== Individual Assignments ==
+
The following articles on the online class wiki textbook contain information that will help you complete the assignments.
  
=== JavaScript Calculator ===
+
* [[Node.JS]]
 +
* [[Socket.IO]]
 +
* [[FAQ - Mod 6]]
  
In Module 2, you made a calculator using PHP.  Now you will be making one using JavaScript.
+
== Individual Assignments ==
 
 
Read the JavaScript guide first: [[Javascript and AJAX]]
 
 
 
* 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).
 
* The javascript should monitor all three fields and display the current result whenever the user changes any value in any field, without refreshing the page.
 
* 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:
 
 
 
<source lang="html4strict">
 
<script type="text/javascript">
 
// your code here
 
</script>
 
</source>
 
 
 
'''Tip:''' If your code isn't working the way you expect, use a JavaScript error console.  In Chrome, for example, press Ctrl-Alt-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.  You should complete this section ''without'' using JavaScript libraries like jQuery.
 
 
 
# Make an empty HTML document; name it '''weather.html'''
 
#: Refer to the [[HTML and CSS]] guide for the skeleton of an HTML document
 
# Define a function in JavaScript; call it '''fetchWeather()'''.  You may write your JavaScript in an embedded script in your head tag.
 
# 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://cloud.sffc1.com/wustl/weather_json.php
 
#: We kindly thank Yahoo Weather for providing us with up-to-date weather information.
 
#* '''Note:''' You normally cannot perform AJAX requests cross-domain.  We have set the <code>Access-Control-Allow-Origin</code> header on our server to allow requests from your EC2 instances.
 
# 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 <nowiki><strong></nowiki> 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
 
# Finally, bind '''fetchWeather()''' to the DOMContentReady event so that your weather widget is automatically initialized when the page is loaded:
 
#: <source lang="javascript">document.addEventListener("DOMContentReady", fetchWeather, false);</source>
 
 
 
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://cloud.sffc1.com/wustl/yahoo-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:
+
=== Install Node.JS ===
  
<source lang="javascript">
+
Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide.
{
 
   "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 =====
+
=== Static File Server in Node.JS ===
  
Each day's forecast has a code.  There are images associated with these codes.
+
The individual portion of Module 6 is short in order to give you enough time to complete the group portion.
  
You can get images from here: <nowiki>http://us.i1.yimg.com/us.yimg.com/i/us/nws/weather/gr/</nowiki>'''##'''<nowiki>ds.png</nowiki>
+
# Copy the example code from the Node.JS guide into a file called ''static_server.js'' or something of that nature. Save it on your EC2 instance (but not in a place that Apache can serve!).
 
+
#: Ensure that you understand what the static file server script is doing…
Replace the '''##''' with the forecast code.  For example, for code 32, the URL would be: http://us.i1.yimg.com/us.yimg.com/i/us/nws/weather/gr/32ds.png
+
# Make a directory parallel to ''static_server.js'' named ''static''.
 
+
# Change "<STATIC DIRECTORY NAME>" on line 11 of the static fileserver example code to reflect the name of the directory you just made.
=== jQuery Dialogs ===
+
# Save the following files in your ''static'' directory:
 
+
#* ''hello.txt'', a text file containing "Hello World"
Helpful Resource: [http://docs.jquery.com/Main_Page jQuery Documentation]
+
#* ''brookings.jpg'', an image file you can download from here: http://classes.engineering.wustl.edu/cse330/content/brookings.jpg
 
+
#* ''college.html'', an HTML document based on the [[HTML and CSS#Quick and Easy Page Layout|Quick and Easy HTML Layout]] containing an image tag pointing to ''brookings.jpg''
Create a simple page using jQuery dialogs.
+
#* ''phpinfo.php'', a PHP file containing the phpinfo command that generates a diagnostic page of the server:
 
+
#: <source lang="php"><?php  phpinfo();  ?></source>
* Create a page that has the words "Google" and "Yahoo".
+
# Boot up your Node.JS static fileserver, and from your browser, load all four of the files you created in step 4.
* When the user clicks the "Google" text, open a jQuery dialog window with one jQuery dialog button.  If the button is pressed, display the Google logo image (the image can be stored on your web server) on the web page, and if the dialog is closed any other way, do nothing.
+
#: Which ones work and which ones don't? Why might this be the case?
* When the user clicks the "Yahoo" text, open a jQuery dialog window with one jQuery dialog button. If the button is pressed, display the Yahoo logo image (the image can be stored on your web server) on the web page, and if the dialog is closed any other way, do nothing.
 
* Initially there should be no image on the page (i.e., the img should be hidden with the CSS display attribute). After one of the two images is displayed, if the user clicks on the image, a jQuery dialog box should be opened with one dialog button, and if the button is pressed then the image should be hidden again.  Otherwise, do nothing.
 
  
 
== Group Project ==
 
== Group Project ==
  
You will work in pairs on this project.
+
In the group portion of Module 6 you will create a multi-room chat server using Node.JS and Socket.IO. This project must be completed using Node.JS.
  
'''Important Reminder:''' frequently commit your work to your subversion repository as a backup!
+
This chat service will contain a main lobby where users sign on with a nickname and can communicate with each other.  Users may also create chat rooms for other to join.  The entire app should be displayed on a single webpage, listing the room you are in, all available rooms, and the users in the current room.
  
I forgot if I already mentioned this, but '''start early on this project!''' It will take longer than you think, I promise!
+
The single room chat server and client are provided here: [[Socket.IO]]
  
=== Calendar ===
+
== Grading ==
 
 
'''Examples:'''
 
* https://calendar.google.com/
 
  
Build a simple calendar that allows users to add and remove events dynamically.
+
We will be grading the following aspects of your work.  There are 75 points total.
  
You will use javascript and jQuery to process user interactions at the web browser, without ever refreshing the browser after the initial web page load.
+
'''Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0. '''
  
You will leverage your existing PHP and MySQL knowledge for the server side of the calendar application to manage users and calendar events.
+
'''Additionally, for this module, the TA should be able to simply download your repo and start up your file server, without having to copy files or create additional subdirectories.  This applies to both the individual and the creative portion'''
  
==== 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 day and time.
 
*: All events should have a day and time.
 
*: You also 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.
 
* Registered users can delete events.
 
* All user and event data must be kept in a MySQL 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, jQuery dialogs, and asynchronous POST/GET requests to PHP scripts.
 
 
 
=== 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.'''  The easiest way to prevent this is to continue sanitizing ''all'' of your output using '''htmlentities()'''.
 
* '''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.
 
* '''Extra Credit:''' Validate your JavaScript code using [http://www.jslint.com/ JSLint]
 
 
 
You should continue the practices that you have learned in past weeks:
 
 
 
* '''Pass tokens in forms to prevent CSRF attacks'''
 
* '''Use prepared queries to prevent SQL Injection attacks'''
 
* '''If storing passwords in a database, always store them encrypted'''
 
* '''Your page should validate''' with no errors through the W3C validator.
 
 
 
== Grading ==
 
  
<span style="font-size:2em; line-height:2em;">'''Due Date: _____ (both individual and group)'''</span>
+
# '''Individual Portion (25 Points):'''
 +
#* Node.JS is installed on your EC2 instance (5 points)
 +
#*: ''Take a screenshot of your browser visiting your EC2 instance serving up the college.html web page on port 3456, make sure the URL is visible in the screenshot.''
 +
#* The ''hello.txt'', ''brookings.jpg'', and ''college.html'' files all load successfully (4 points each)
 +
#* Visiting a file that does not exist inside the ''static'' directory results in a 404 (4 points)
 +
#* Discuss in the README.md why ''phpinfo.php'' behaves the way it does when loaded through Node.JS (4 points)
 +
#* Make sure all of your individual portion files are pushed to Github (include your node.js files, hello.txt, brookings.jpg, college.html, and phpinfo.php)
  
{|
+
# '''Multi-room Chat Server (50 Points):'''
!Assignment
+
#* '''''Administration of user created chat rooms (25 Points):'''''
!Points
+
#** Users can create chat rooms with an arbitrary room name(5 points)
|-
+
#** Users can join an arbitrary chat room (5 points)
|Calculator
+
#** The chat room displays all users currently in the room (5 points)
|1
+
#** A private room can be created that is password protected (5 points)
|-
+
#** Creators of chat rooms can temporarily kick others out of the room (3 points)
|Weather Widget
+
#** Creators of chat rooms can permanently ban users from joining that particular room (2 points)
|2
+
#* '''''Messaging (5 Points):'''''
|-
+
#** A user's message shows their username and is sent to everyone in the room (1 point)
|jQuery Dialogs
+
#** Users can send private messages to another user in the same room (4 points)
|1
+
#* '''''Best Practices (5 Points):'''''
|-
+
#** Code is well formatted and easy to read, with proper commenting (2 points)
!colspan="2"|Group Portion:
+
#** Code passes HTML validation (2 points)
|-
+
#** node_modules folder is ignored by version control (1 points)
|Calendar month view correct
+
#* '''''Usability (5 Points):'''''
|1
+
#** Communicating with others and joining rooms is easy and intuitive (4 points)
|-
+
#** Site is visually appealing (1 point)
|Move between months (without page reload)
+
#* '''Creative Portion (10 Points)'''
|1
+
<!-- #** Make sure to create a README.md file pointing to your server -->
|-
 
|User authentication and registration (without page reload)
 
|2
 
|-
 
|Add events (new event shown in calendar without page reload)
 
|2
 
|-
 
|Delete events (event removed from calendar without page reload)
 
|2
 
|-
 
|User events are private
 
|1
 
|-
 
|Safe from XSS
 
|1
 
|-
 
|Safe from Session Hijacking
 
|1
 
|-
 
|Older Web Security Practices and Validation
 
|1
 
|-
 
|Creative Portion
 
|2
 
|-
 
|Extra Credit: JavaScript passes JSLint test
 
|1
 
|-
 
|}
 
  
[[Category:Module 4]]
+
[[Category:Module 6]]
 
[[Category:Modules]]
 
[[Category:Modules]]

Latest revision as of 15:41, 21 December 2020

Module 6 builds upon the JavaScript skills you learned in Module 5.

Reading

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

Individual Assignments

Install Node.JS

Install Node.JS from Apt or Yum according to the instructions in the Node.JS guide.

Static File Server in Node.JS

The individual portion of Module 6 is short in order to give you enough time to complete the group portion.

  1. Copy the example code from the Node.JS guide into a file called static_server.js or something of that nature. Save it on your EC2 instance (but not in a place that Apache can serve!).
    Ensure that you understand what the static file server script is doing…
  2. Make a directory parallel to static_server.js named static.
  3. Change "<STATIC DIRECTORY NAME>" on line 11 of the static fileserver example code to reflect the name of the directory you just made.
  4. Save the following files in your static directory:
    <?php   phpinfo();   ?>
    
  5. Boot up your Node.JS static fileserver, and from your browser, load all four of the files you created in step 4.
    Which ones work and which ones don't? Why might this be the case?

Group Project

In the group portion of Module 6 you will create a multi-room chat server using Node.JS and Socket.IO. This project must be completed using Node.JS.

This chat service will contain a main lobby where users sign on with a nickname and can communicate with each other. Users may also create chat rooms for other to join. The entire app should be displayed on a single webpage, listing the room you are in, all available rooms, and the users in the current room.

The single room chat server and client are provided here: Socket.IO

Grading

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

Assignments (including code) must be committed to Github by the end of class on the due date (commit early and often). Failing to commit by the end of class on the due date will result in a 0.

Additionally, for this module, the TA should be able to simply download your repo and start up your file server, without having to copy files or create additional subdirectories. This applies to both the individual and the creative portion

_________

  1. Individual Portion (25 Points):
    • Node.JS is installed on your EC2 instance (5 points)
      Take a screenshot of your browser visiting your EC2 instance serving up the college.html web page on port 3456, make sure the URL is visible in the screenshot.
    • The hello.txt, brookings.jpg, and college.html files all load successfully (4 points each)
    • Visiting a file that does not exist inside the static directory results in a 404 (4 points)
    • Discuss in the README.md why phpinfo.php behaves the way it does when loaded through Node.JS (4 points)
    • Make sure all of your individual portion files are pushed to Github (include your node.js files, hello.txt, brookings.jpg, college.html, and phpinfo.php)
  1. Multi-room Chat Server (50 Points):
    • Administration of user created chat rooms (25 Points):
      • Users can create chat rooms with an arbitrary room name(5 points)
      • Users can join an arbitrary chat room (5 points)
      • The chat room displays all users currently in the room (5 points)
      • A private room can be created that is password protected (5 points)
      • Creators of chat rooms can temporarily kick others out of the room (3 points)
      • Creators of chat rooms can permanently ban users from joining that particular room (2 points)
    • Messaging (5 Points):
      • A user's message shows their username and is sent to everyone in the room (1 point)
      • Users can send private messages to another user in the same room (4 points)
    • Best Practices (5 Points):
      • Code is well formatted and easy to read, with proper commenting (2 points)
      • Code passes HTML validation (2 points)
      • node_modules folder is ignored by version control (1 points)
    • Usability (5 Points):
      • Communicating with others and joining rooms is easy and intuitive (4 points)
      • Site is visually appealing (1 point)
    • Creative Portion (10 Points)