|
|
| (56 intermediate revisions by 8 users not shown) |
| Line 1: |
Line 1: |
| − | __NOTOC__ | + | __NOTOC__ |
| − | 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.
| + | Module 6 builds upon the JavaScript skills you learned in Module 5. |
| − | | |
| − | This article contains your assignments for Module 6.
| |
| | | | |
| | == Reading == | | == Reading == |
| Line 8: |
Line 6: |
| | 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]] | + | * [[Node.JS]] |
| − | * [[AJAX and JSON]]
| + | * [[Socket.IO]] |
| − | * [[Ext JS]]
| + | * [[FAQ - Mod 6]] |
| − | * [[Extensible Calendar]] | |
| − | * [[Web Application Security, Part 3]] | |
| | | | |
| | == Individual Assignments == | | == Individual Assignments == |
| | | | |
| − | '''''IMPORTANT:'' Both of the individual assignments must be completed ''without'' using a JavaScript library like Ext JS or jQuery.''' However, you may (and should) use Ext JS or jQuery for the group portion.
| + | === Install Node.JS === |
| − | | |
| − | === 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 [[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.
| |
| − | | |
| − | '''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-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 <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>.
| |
| − | | |
| − | === Weather Widget ===
| |
| − | | |
| − | In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server.
| |
| | | | |
| − | # Make an empty HTML document; name it '''weather.html'''
| + | Install Node.JS from Apt or Yum according to the instructions in the [[Node.JS]] guide. |
| − | #: 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://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 <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.
| |
| − | # 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 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:
| + | === Static File Server in Node.JS === |
| | | | |
| − | <source lang="html4strict">
| + | The individual portion of Module 6 is short in order to give you enough time to complete the group portion. |
| − | <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
| + | # 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… |
| − | When everything is working, the weather widget should look something like this:
| + | # 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. |
| − | [[File:WeatherWidget.png]]
| + | # Save the following files in your ''static'' directory: |
| − | | + | #* ''hello.txt'', a text file containing "Hello World" |
| − | '''Important:''' The widget in this section needs to work in only Firefox and Chrome. It does '''''not''''' need to work Internet Explorer.
| + | #* ''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'' |
| − | ==== Tips ====
| + | #* ''phpinfo.php'', a PHP file containing the phpinfo command that generates a diagnostic page of the server: |
| − | | + | #: <source lang="php"><?php phpinfo(); ?></source> |
| − | ===== JSON Structure =====
| + | # 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? |
| − | 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 == |
| | | | |
| − | I forgot if I already mentioned this, but '''start early on this project!''' It will take longer than you think, I promise!
| + | 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. |
| | | | |
| − | You are encouraged to use the advanced version control practices you learned in Module 5 when completing this assignment.
| + | 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. |
| | | | |
| − | === Calendar ===
| + | The single room chat server and client are provided here: [[Socket.IO]] |
| | | | |
| − | Build a simple calendar that allows users to add and remove events dynamically.
| + | == Grading == |
| | | | |
| − | 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.
| + | We will be grading the following aspects of your work. There are 75 points total. |
| | | | |
| − | Your application should utilize AJAX to run server-side scripts that query your database to save and retrieve information, including user accounts and events.
| + | '''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. ''' |
| | | | |
| − | ==== Examples ====
| + | '''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''' |
| | | | |
| − | * https://calendar.google.com/
| + | _________ |
| − | * http://www.zoho.com/calendar/
| |
| | | | |
| − | ==== JavaScript Calendar APIs ====
| + | # '''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) |
| | | | |
| − | 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.
| + | # '''Multi-room Chat Server (50 Points):''' |
| − | | + | #* '''''Administration of user created chat rooms (25 Points):''''' |
| − | '''In this group project, you may use the [[Extensible Calendar]].''' 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.
| + | #** Users can create chat rooms with an arbitrary room name(5 points) |
| − | | + | #** Users can join an arbitrary chat room (5 points) |
| − | Of course, you may choose to build your own calendar from scratch. If you do, you will earn an automatic 5 points in the creative portion. We have also written some functions to help you get started: [[JavaScript Calendar Library]]
| + | #** The chat room displays all users currently in the room (5 points) |
| − | | + | #** A private room can be created that is password protected (5 points) |
| − | ==== Server Side Language ====
| + | #** 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) |
| − | You now know two different server side languages/frameworks: [[PHP]] and [[Web Frameworks|Django]]. You and your partner may choose to use either one for this assignment.
| + | #* '''''Messaging (5 Points):''''' |
| − | | + | #** A user's message shows their username and is sent to everyone in the room (1 point) |
| − | Here are some things to keep in mind:
| + | #** Users can send private messages to another user in the same room (4 points) |
| − | | + | #* '''''Best Practices (5 Points):''''' |
| − | * With Django, user management is almost as easy as a "pip install"
| + | #** Code is well formatted and easy to read, with proper commenting (2 points) |
| − | * With Django, you can set up your server to serve JSON data from the database automatically; see the [[Extensible Calendar]] guide for an example
| + | #** Code passes HTML validation (2 points) |
| − | * You have spent more time with PHP than with Django, so PHP might be more familiar as you write it
| + | #** node_modules folder is ignored by version control (1 points) |
| − | * There is an example in the Extensible Calendar download that uses PHP as a back end*
| |
| − | | |
| − | 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 ===
| |
| − | | |
| − | 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 [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 (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 ==
| |
| − | | |
| − | We will be grading the following aspects of your work. There are 100 points total.
| |
| − | | |
| − | # '''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.'' | |
| − | # '''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)*
| |
| − | # '''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):''''' | | #* '''''Usability (5 Points):''''' |
| − | #** Site is intuitive to use and navigate (4 points) | + | #** Communicating with others and joining rooms is easy and intuitive (4 points) |
| | #** Site is visually appealing (1 point) | | #** Site is visually appealing (1 point) |
| − | # '''Creative Portion (15 Points)''' | + | #* '''Creative Portion (10 Points)''' |
| − | #* '''"Calendars" in Extensible (worth 5 points):''' Extensible comes built-in with functionality that enables users to categorize their events into multiple calendars. You may gain 5 points of creative portion if you do the following.
| + | <!-- #** Make sure to create a README.md file pointing to your server --> |
| − | #** Make a one-to-many relationship between users and calendars. | |
| − | #** Display a list of calendars to the user on the front end (e.g., using an Ext.List component).
| |
| − | #* '''Editable "Calendars" in Extensible (worth 5 points):''' You may earn an additional 5 points if you do the following.
| |
| − | #** Enable users to add and remove calendars.
| |
| − | #* '''Custom Front End (worth 5 points):''' If you write your own calendar without Extensible, you automatically earn 5 points of creative portion.
| |
| − | #* '''Calendars in Custom Front End (worth 10 points):''' If you implement "calendars" like Extensible's with your custom front end, you may earn 10 points of creative portion. It is up to you whether you want a one-to-many or a many-to-many relationship between events and calendars.
| |
| − | #** Users can create and delete calendars that categorize their events.
| |
| − | #** The calendars are each associated with a different color.
| |
| − | | |
| − | | |
| − | ''* 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."''
| |
| | | | |
| | [[Category:Module 6]] | | [[Category:Module 6]] |
| | [[Category:Modules]] | | [[Category:Modules]] |
