Difference between revisions of "Module 6"
|Line 22:||Line 22:|
=== Weather Widget ===
=== Weather Widget ===
Revision as of 17:29, 9 October 2012
This article contains your assignments for Module 4.
- 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 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.
- Make an empty HTML document; name it weather.html
- Refer to the HTML and CSS guide for the skeleton of an HTML document
- Inside your fetchWeather() function, make an AJAX request to the weather server.
- We will be using the Yahoo Weather API, which returns the current weather in XML format. Here is the XML file we will be loading:
- Because of the cross-origin request policy, you cannot perform AJAX requests directly to Yahoo, so we have set up a proxy that you can use instead:
- In your callback, process the XML from Yahoo Weather to display the following information on your page:
- City, in a <strong> tag
- Region, not in any tag
- Current Temperature (including Units)
- Image for Tomorrow's Forecast
- 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:
document.addEventListener("DOMContentReady", 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://c.sffc1.com/yahoo-weather.css
- Yahoo uses XML Namespaces for their tag names.
- When you would normally want to do something like:
var atmosphereElement = xmlDocument.getElementsByTagName("yweather:atmosphere");
- You instead need to do:
var atmosphereElement = xmlDocument.getElementsByTagNameNS("http://xml.weather.yahoo.com/ns/rss/1.0", "atmosphere");
- Each day's forecast has a code. There are images associated with these codes.
- You can get images from here: http://us.i1.yimg.com/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.i1.yimg.com/us.yimg.com/i/us/nws/weather/gr/32ds.png
When everything is working, the weather widget should look something like this:
Important: The widget in this section needs to work in only Firefox and Chrome. It does not need to work Internet Explorer.
Helpful Resource: jQuery Documentation
Create a simple page using jQuery dialogs.
- Create a page that has the words "Google" and "Yahoo".
- 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.
- 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.
You will work in pairs on this project.
Important Reminder: frequently commit your work to your subversion repository as a backup!
I forgot if I already mentioned this, but start early on this project! It will take longer than you think, I promise!
Build a simple calendar that allows users to add and remove events dynamically.
You will leverage your existing PHP and MySQL knowledge for the server side of the calendar application to manage users and calendar events.
- 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.
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
- 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.
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.
Due Date: _____ (both individual and group)
|Calendar month view correct||1|
|Move between months (without page reload)||1|
|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|