CP3101B

Assignment 2 - HTML5, JSON, JQuery, php, postgresql, AJAX

Due:	Friday March 28, 2013, 11:50 PM
Late penalty:	20% penalty for 48 hours late, not excepted after that.
Hand in:	Please do the following for your submission: Include a MEMBERS.txt file with the matriculation numbers of both members of your team. MEMBERS.txt should look like so the following will get your matriculation numbers Include a README.txt which describes how we install your application. and any special considerations/instructions. Include a schema.sql file which we can use to initialize our database with your schema and any sample data. Include a config.inc which should centralize any configuration, so for example, variables for the database user name, database password, etc. With luck, after modifying this file, and loading your schema, we can play with your application. Other than MEMBERS.txt, there should be no identifying information, and no passwords in your submission. We may share your application with the class during a code review. Make sure that file permissions permit the minimum necessary access. See chmod. It should not be possible to browse your sessions directory from the web, nor see your config files etc. Zip your submission so that, when we unzip, we have a single directory with your complete application, MEMBERS.txt, README.txt, ... in it. Do this by executing, on cp3101b-1 Leaving a sharedThings.zip for submission. You can test this on cp3101b-1 via and verifying the contents as well as file permissions. In the above, I am assuming that your application is in ~/public_html/sharedThings and you have no ~/tmp directory. Alter these instructions as appropriate. Please submit here. and compare the output on the screen with only one submission/group.
Marking:
Groups:	Work in teams of size 2
Environment:	We will run your code under Firefox, in the lab and on the VM.

For the following use JQuery, php, HTML, CSS and postgresql. Work in teams of at most size 2. Use only the libraries in sharedThings.html for this assignment. This is an AJAX application. You can start with sharedThings and can find most of what you need in the lectures and tutorials. Exercises 1-5 will not be marked, but are there to help you develop Exercises 6,7 and 8. See the marking scheme at the top of the page. Exercise 1: modify logDrag in sharedThings.html so that it console.logs the position of all images in the world Hint: create a single world object and put the state into it. An example of a world state is ... { "x1":{"x":8,"y":8}, "x2":{"x":8,"y":8}, "x3":{"x":8,"y":8}, "x4":{"x":8,"y":8}, "x5":{"x":8,"y":8}, "o1":{"x":8,"y":8}, "o2":{"x":8,"y":8}, "o3":{"x":8,"y":8}, "o4":{"x":8,"y":8}, "o5":{"x":246,"y":32},"tttboard":{"x":8,"y":8} } Exercise 2: When a user drags an image, use Ajax to send the whole world state to e2.php. See the JQuery ajax examples. e2.php simply reflects the state of the world back. e2.html simply console.logs the reflected world state. For good measure, e2.php might want to json_decode and json_encode the world you get from the client. Exercise 3: Create e3.html (almost identical to e2.html) and e3.php (almost identical to e2.php). e3.php additionally saves the state of the world to a postgresql database. Exercise 4: create e4.html which continually requests the current state of the world from e4.php and console.logs it. Each request happens as a result of a new Ajax request. Use a javascript interval. Try 1 second or .5 seconds. e4.php reads the current state of the world from the database and simply returns it. Exercise 5: create e5.html which continually requests the current state of the world from e4.php and updates the positions of the items in the world. Each instance of e5.html shows the manipulations taking place in e3.html. Exercise 6: create e6.html which combines both e5.html and e3.html. A collection of browsers running e6.html should be able to play tic-tac-toe together. e6.html calls e3.php and e4.php. It may be a bit glitchy. Write down the glitches you identified in this version in e6.txt. Exercise 7: Create a usable, polished version of the system. Create e7.html, e7set.php, e7get.php used to set and get the state of the world respectively. This version should address the issues with e6.html and fix them if possible. There are many issues. Your goal should be to fix them in as simple a way as possible to make the system more usable, and minimize the load on both the client and the server. Include e7.txt with a description of the problems you addressed and a description of your solutions. Exercise 8: Create e8.html, e8set.php and e8get.php and any other php scripts you need. This version improves on Exercise 7 and allows the participants to choose the world they want to share. So for example, if three individuals want to share world_id='world57', they can. This world is different from world_id='jupiter'. Your user interface should display all world choices, allow individuals to choose the one they want, or create a new one. Add one or two additional interesting features, we will rank your submission against your fellow classmates, so a better, simpler, more usable solution gets higher marks than others. Example: Some way to convey the position of each participants mouse in the shared world. A better solution to all of this would be to use Web Sockets and let Java manage the shared world states and concurrency. You can investigate a Java websockets server on your own at http://jwebsocket.org/. Web Sockets are not part of this assignment.

References

Questions and Answers

Question:

I would just like some clarification about what exercise 2 of assignment 2 is asking us to do. I am assuming we use getJSON to send the world state to e2.php but I'm not quite sure what "e2.php simply reflects the state of the world back" is supposed to mean. Also, is e2.php supposed to send this world state to e2.html in order to console.log it?

Answer:

e2.html sends world state to e2.php
e2.php receives the world state,
e2.php sends the world state back to e2.html
e2.html receives the world state and then console.logs it

Question:

Are we supposed to use JQuery?

Answer:

Yes, as much as is possible, to simplify your code.

Question:

Storing world state in a relational database seems odd and probably slow.

Answer:

The main issue is that postgresql will introduce disk and all that entails. Disk is much slower than RAM. Of course, SSDs are much better than spinning platters. For our purposes, postgresql should not be that slow, but yes, there are some options to improve performance:

See the UNLOGGED option for postgresql create table. You should consider this in your implementation if you understand it.
Just store and retrieve from a file. If the file is small, the OS will cache the file in memory, so disk is for the most part taken out of the picture. You have to deal with concurrency issues (ie. lock files).
You could use mongoDB. We will cover this for the third assignment. This would compare well with a de-normalized postgresql schema.
You could use memcached. Hopefully we will cover a bit of this. This would significantly improve performance, but this is basically throwing out persistence and replacing it with ram. You need to deal with concurrency issues.