Gears

Our next lecture is on gears: a plugin that, once installed, lets your JavaScript do things in the browser that it could before like saving data on the user's harddrive and running multiple threads. You will need to have watched the lecture below by Wednesday, April 1.

You will need to install the gears plugin on your firefox browswers. Since our labs use iceweasel, you will need to make a few changes before you can install gears, namely, change the icewasel to user-agent to firefox. Just follow these steps (which I got from here):

1. Point your iceweasel to “about:config”.
2. Find a key called “general.useragent.extra.firefox” and edit to “Firefox/3.0.5”
3. Then, visit http://gears.google.com again and install.

Gears from Jose Vidal on Vimeo.

You will also want to read the gears API and my gears lecture slides.

Finally, I also highly recommend that you listen to the guys who built gears talking about why they did it. They are in the following video:

GradeBook Web Application

For your next homework you will develop a grading sheet application. It will be an application that lets the user (which is the teacher of a class) enter the names and contact information for the students in the class and then assign grades for them to each of several tests. The application will calculate averages and plot grade distribution. You application will use jquery, the google visualization api and gears. This homework is due on Monday, April 13 at 10am. The specific requirements are as follows:

1. The whole application is to reside on one HTML page. All updates are to be done by JavaScript (we will not be using Ajax to back up to the server).
2. The user should be able to enter any number of students. For each student you will store:
   
   
   1. Name
   2. email
   3. An arbitrary set of other URLs (facebook page, twitter page, blog, etc.). This could be empty.
   4. The grade for each test (the class only has tests).
3. The user should be able to add any number of tests. The user will give each test a name.
4. After a test is added the user will be able to add the grade that each student received on that test.
5. Your JavaScript code will calculate and display the average grade for each test, as well as the average for each student. Assume all tests are equally weighted.
6. For each test you will also show a grade distribution graph. This is a bar chart. The x-axis is the numbers 0,5,10,..95. The y-axis are the number of students that received a grade in the range 0-5,5-10,...,95-100 for each point in the x-axis. These graphs are updated automatically as the user enters new grades.
7. You will use the gears database to store all this data locally, so when the user quits and re-starts the browser the grades that he entered before will appear again.

The interface for this application should be an editable table, like a spreadsheet, where the user can click on a cell and directly edit that cell. The photo in this post should give you an idea of how the user interface should look. The blue text describes the functionality of some of the elements in the page

You can either implement this using an HTML table, or using the google visualization Table element. I think using the google Table will be easier.

Functional Calculator

For today's exercise you will use the Google visualization API to draw a line chart that plots the line y= x*x for -10 < x < 10 . The final result should look a lot like the figure at the right. Email me your code by the end of class.

If you do finish early, change the event handler function so the popup that appears when the user clicks on one of the dots (data points) in the graph now shows both the x and the y values, as such: f(x) = x*x, 49 = 7 * 7.

SVG Exercise

For today's exercise you will re-do the clock from the canvas exercise but this time using the jQuery SVG plugin, as I demonstrate here. Note that you will need to use both jQuery and the jQuery SVG plugin. Also notice that the plugin has an animate function which might be useful to you. Check it out under the "Animations" tab.

This exercise is due at the end of class.

JavaScript on Speed

Check out Chrome Experiments to see some of the magic you can achieve with JavaScript. Hmmm, some of these look like they could be good homework assignments. My favorite is the Tetris game.

Google Ajax APIs

This week you will be learning to use the google Ajax APIs. These are a bunch of services provided by google which you can access by writing JavaScript code. First, you will visit the Google Ajax APIs homepage which links to their seven APIS. Start by looking at the visualization API which is the one we will be working with first. Click thru to their "documentation" tab and read all the documentation there.

Rather than listening to me talk about their product, I thought you might prefer to get the full story from the googlers themselves. So, for Wednesday, 25 March you should have watched the following video:

I also recommend the Google Ajax APIs playground as an excellent tool for learning how to use these APIs. Notice that it lets you change the code right there on the browser and immediately see the result of your code changes.

Canvas Exercise

For today's exercise you will write a simple canvas application: an analog timer. You will email me what you have done by the end of class. What you need to do is:

1. Draw a circle.
2. Draw a line from the center of that circle to the 12'clock position.
3. Implement a simple animation which erases the whole thing then re-draws it every second, but with the line moving to the next position. That is, make the line move like the second-hand in a clock.

The third point might require some basic geometry. Remember that if t is the angle (in radians) then the point (x,y) in the unit circle (centered at 0,0) that is an angle t from (1,0) is given by: x = cos(t) and y = sin(t), as illustrated by the diagram you see here.

SVG and Canvas

In our next lecture we are going to learn how to draw graphics on the browser. The lecture below gives you a quick introduction to the basics of Scalable Vector Graphics and the Canvas HTML element. You must have watched this lecture by Wednesday, 18 March before class. Also, make sure you visit the slides for this lecture and try out the examples (note that they only work on firefox).

SVG and Canvas from Jose Vidal on Vimeo.

JQuery Mastery Check

You will answer the following questions and email me your answer by 10:30am today. Implement all these in one html page. You will be using the jQuery and the jQuery-ui libraries, so make sure you load both. You will want to consult the jQuery documentation.

1. Implement a paragraph of text that when you click on its color changes from black to red: first click red, second click black, third click red, and so on.
2. Implement photo (am img) that the user can drag around the screen.
3. Implement a table (say, 2x10) and then color the background of every other row as light green.
4. A square box that you can drag around with a number in it. The number counts the number of times the user has clicked on the box.
5. A progress bar that counts 60 seconds.

Spring Break Homework: Ajaxify This

Your next homework is a bit more involved than usual. You will be building an Ajax front-end to a php+mysql backend that I have provided for you. There are two steps to this process. First you must download and install the php code and the initial database. We will do this step in class, together. The second step is the homework part where you use your new-found jQuery skills to Ajaxify the web 1.0 setup I provide. This homework is due Monday, 16 March at 9am.

Install PHP and Mysql database

The first step is to install the php code and the database. To do this you must follow these steps.

1. Check to make sure there is a new web directory under your home directory. If there isn't, talk to me.
2. On Friday I sent you an email with a list of usernames and urls. The urls look like http://web2.cse.sc.edu where instead of 2 you will have another number. In all the following instructions replace the 2 in web2 with your own website number. Find your username in the email and load that url in your browser (this will only work from within USC). The page you see should look like:
   
   • cgi example
   • php example
   • jsp example
   Click on php example and you should see a "Hello World"
3. Download php.tar.gz and place it on your web directory.
4. On the comand line do:

   cd ~/web
   tar xfz php.tar.gz
   

   This will place all the files in your php directory. You can now

   cd web
   ls
   

   to see the new files.
5. We will now install the data into your mysql database. To do this you will first need to go to https://www.cse.sc.edu, login with your Unix username and password, then click on Personal Homepage then click on CGI/PHP/JSP/MYSQL? then click on the link to change your Mysql password. Change your password from the default to something else, but remember the new password!
6. Back on the command line type (but replace web2 with your own web server and the word 'yourusername' with your username):

   mysql -h web2.cse.sc.edu yourusername -u yourusername -p

   It will ask you for the password you just set. Enter it. You should now be logged in to your mysql server. Hit control-D to log out and go back to the command line.
7. I have provided you with a simple database of books in the file table.sql. To load this data onto your mysql server type:

   mysql -h web2.cse.sc.edu yourusername -u yourusername -p < table.sql

   You will need to enter your password again. To make sure it works type

   mysql> show tables;

   at the mysql prompt. It should show you that there is now one table called 'books'. To view the contents of this table type:

   mysql> select * from books;

   If you see a lot of book titles and other stuff scrolling by then you now have the book data in the database.
8. Open the file config.php in a text editor and change your website, username and password. The file should look like

   <?
   $link = mysql_connect('web2.cse.sc.edu', 'yourusername', 'yourmysqlpassword');
   if (!$link) {
       die('Not connected : ' . mysql_error());
   }
   
   if (! mysql_select_db('yourusername') ) {
       die ('Can\'t use yourusername : ' . mysql_error());
   }
   ?>
   

   Again, change web2.cse.sc.edu to your own website.
9. You should now be able to visit the url http://web2.cse.sc.edu/php/list.php and get an html table containing all the books in the database. Notice that there is also an edit and a delete button. Feel free to use these to edit the books (the exact books in the database won't matter for this homework). Also notice that there is a new.php which you can use to add new books to the database. What you have now is a basic CRUD interface to the books table in the mysql database. Basically, you can now Create, Read, Update (edit) and Delete books from the database using a web interface. Neat! Make sure you play with this website a bit before moving on: try to figure out how it works.

Ajaxifying the Book Application

For your homework you will turn the crude web 1.0 website I have given you into a shiny new web 2.0 website. Specifically, your new website will consist of only one page of html and all the CRUD functions will be implemented using Ajax (use the jQuery library for this).

Notice first that there is get.php file also included. This script takes as input any one of the arguments title, author, year, isbn, publisher, and rating, with a string value. It then returns a JSON object with the books that match that query. For example, try loading the url http://web2.cse.sc.edu/php/get.php?author=bi. You will get back a JSON object with all the books whose author contains the substring 'bi'. This is the function that you will use to retrieve data back from the server. You will alse need to use the other php scripts (edit.php, delete.php, new.php) to change data on the database.

Your one webpage will look like this (but much prettier, of course):

Id

Title	Author	Year	Isbn	Publisher	Rating

The boxes contain the search critera for the user: the keywords the user wants to search. If he types 'bi' in the author field then, when he clicks away from the box or hits the enter key, a table will popup up below this table containing all the books that match the author=bi search. If the user fills in more than one box simply ignore all but one of the boxes (that is, assume he won't do that).

I also want the list of books you show the user to be editable in place. That is, the information for each book should be displayed as regular text to the user (not in a text box), but if the user clicks on one, say the title of one of the books, then text gets replaced by a text box that contains the title and the user can edit the title. When the user clicks away or hits return you will commit these changes to your database.

Finally, you will implement a little notification area that tells the user when each of the XHR requests has completed. Or, if a request is taking too long then you will display an error message, cancel that request, and launch another identical request.

To turn it in just

cd ~/web
tar cfz php.tar.gz php

then email me the resulting php.tar.gz. Also, email me the URL to your working website.