JSON Redo

The grades for HW8 where not up to par. I know you can do this, and since the next homework really depends on getting this one right, I'm changing the schedule.

For this Monday your homework will be HW8, again. This time, make sure to get a 100.

Note that your grade for HW8 "A New Beginning" will still remain, you will just get a second grade for HW8 "The Final Try". HW9 is now postponed 1 week. We will thus have 12 homeworks in in the class instead of the original 13.

Canvas

The canvas element is a simple 2D grid where you can draw things. It is the way your JavaScript code can draw arbitrary pixels on the page, and the way to make animations.

HW9: Canvas

In this homework you will convert your boards into something that behaves more like a real-world pinboard. You will do this by using the canvas element.

Specifically, the new url /canvas/123 will correspond to the same board as /board/123 but the board will be shown in a canvas object of 854x480 pixels. The images will all be scaled to 200x200 pixels (in the browser, and for now, we will fix this in upcoming homeworks). The owner of the board will be able to move the images around by just clicking on one and moving it around. When the user moves the mouseup, the image will stay, there.

That is, your board entity will now need to store the x,y coordinate of each pin. These values are to be dynamically sent, via XHR requests, back to the server as the owner of the board moves the images on the board, as I demonstrate in the video below:



Note that you cannot use any third-party libraries for this homework, except jQuery. I know there are libraries out there that do canvas drag-an-drop, but you will learn more by doing this yourself.

Also notice that one pin can be in multiple boards.

Required Reading

The new topic for this week is canvas, you will want to read the canvas tutorial and the Using images tutorial that explains how to use the drawImage primitive, which is what you will need to use to draw the photos.

As always, publish your final code to appspot, and push it to your private github repo by Monday, November 5 @9am.

JSON and jQuery XHR Requests

The following video shows how to get JSON replies from jQuery XHR requests.

HW8: JSON & Dynamic Board Editing

For this homework you will add a responsive user interface to your boards and you will provide both your pin and board data in json format.

Lets start with the server side. You will have the following methods (the json methods are new):

GET /	when logged-in, shows links to "My Pins" (/pin) and "My Boards" (/board)
GET /pin	lists all the users' pins and links us to each one, as before. Also, this page should let the user add a new pin.
GET /pin?fmt=json	returns a json representation of all the pins this user own.
POST /pin	creates a new pin, as before
GET /pin/123	shows pin 123, and a form for editing it, as before.
GET /pin/123.json GET /pin/123?fmt=json	returns pin 123 in json format.
POST /pin/123	updates pin 123 (caption or url), or deletes it, as before.
GET /board	lists all my boards. If not logged in re-direct to /, and do similarly for all the other URLs. Also, this page should let the user add a new board.
POST /board	Creates a new board and then redirects the user to it.
GET /board/123	If my board then list all the pins in the board and a form for editing it. If not mine but public then list the pins in the board. If not mine and private then re-direct to /
GET /board/123.json GET /board/123?fmt=json	If my board then return the board in json format
POST /board/123	Update board 123's information. The possible changes are: new title, add pin, delete pin, mark as private/public, delete board. Then redirect the user back to GET /board/123

On the client side you will implement a board editor that works as shown in the video below. Basically, each pin not in the board is shown with an 'add' button. When the user clicks on it the pin is added to the board. Note that the adding of the pin to the board has to happen in the client. That is, all the adding and removing must be done without reloading the page, ever. It is all done via XHR requests.

The way you will implement the board is by delivering to the client an empty board (no pins) with some javascript that immediately does a GET back to the board to get the board and its pins in json format, and another one to get all of the user's pins, in json format. Your javascript code then puts all these pins in the appropriate places in the page. After that it sets up the appropriate event handlers so that when the user clicks 'add' or 'remove' the pins are first moved in the page (javascript) and then an XHR request is sent to the server to tell it about the change.

Finally, you must handle server errors by undoing the last change. That is, if the user adds a pin, the pin immediately moves, but if the XHR requests fails (error:) then your code will move the pin back and display a message to the user about it. You can easily test this by changing your POSTs to return 500.

Required Reading

The main new thing is JSON, which is just the JavaScript object literal notation. But, since you will also be using it Python, you will want to use the Python json library.

Make sure you publish to appspot and push to github by the deadline of Monday, October 22 @9am

Webdev Jobs at the CDH

USC's Center for Digital Humanities needs a couple of students to do some web development, see their ad.

Mike Helms did a directed study with me,where he helped me migrate our department's website to Drupal 7, before going to work at the CDH.

Y U No stopPropagation()?

I figured out why my code in class was not working: My HTML was illegal. It turns out we cannot have a div inside a p element (one block element inside another one). Illegal HTML makes it impossible to setup event handlers properly. Lesson learned. Anyway, it is now fixed in the lecture repo.

Ajax

In the next homework you will redo some of your existing forms to use Ajax instead of the POST-reload loop. That is, you are going web 2.0. The video below explains how to make Ajax requests with jQuery.

HW7: Ajax

In this homework you will change the /pin edit form to use XHR requests to submit changes to the caption and the private back to the server. We are also eliminating the possibility of changing the URL (I figured, it makes more sense to the user to just delete the pin).

The video below show how this will look like in your app.


Also, when a non-owner of a public pin (say, 5) goest to /pin/5 he will be able to see the pin (as he can now) but will not get the editing javascript code. Also, he should not be able to edit the pin.

Required Reading

1. The jQuery ajax documentation is where you want to look for all things ajax.
2. You also want to read the jQuery events documentation. Specifically, make sure you read the jQuery on() documentation page, all of it.

JavaScript Closures and Private Properties

Closures are lots of fun and often very useful. The video below explains why and shows how we can use them to simulate Java's private properties.

JavaScript Events and EventHandlers

In the video below I describe how to build and use JavaScript event handlers, using jQuery.