CP3101B

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

You do not need the News, Contact, Social Media links, etc. pages for this application. We will just focus on a nice user interface and AJAX for the main Todo functionality. Of course, we will mark you for great, simple, clear, concise, easy to understand code.

References

Questions and Answers

Question:

How should I convert my A1 to A2.

Answer:

Your best bet would be to start with the guessGameAjax application and then to change this into A2. You should pull over to the new To Do only those pieces of A1 that you can use. It will not turn out well if you copy your A1 to A2 and then change it from there.

Question:

Do I have to use only a single .html for my application. Can I use multiple .html or .php to generate the user interface?

Answer:

Use a single .html and a collection of javascript libraries to get the job done. You will learn a lot about AJAX, JQuery, Javascript by doing it this way.

Question:

Can my PHP scripts send any HTML?

Answer:

No, the scripts receive and send JSON only. The PHP knows nothing about application state except whether you are logged in or not. This is stored in the users session.

Question:

Can I have a solution to guessGameAjax?

Answer:

Yes, here it is.

Question:

I thought we were supposed to communicate via JSON. Your guessGameAjax uses URL encoding to send parameters.

Answer:

You can package the request as a single JSON object in the URL, conceptually like ... login.php?request={ username : 'arnold', password : 'myPassword' } to do this, you might like to take a look at the JSON.parse and JSON.stringify javascript functions. This will paricularly make sense when you want to send complex objects that are best captured by JSON datastructures on the Javascript side.

Question:

How complex should each .php be?

Answer:

It should capture a single, simple purpose. Basically like a function call. This will actually simplify your application.

Question:

Can you post the todo login code shown in lecture this week?

Answer:

Yes, here it is.

Question:

My Javascript is complex, any hints?

Answer:

• Make good use of JQuery
• Make use of the html5 data-* custom Data attributes. Remember how I was saying that it would be good if we could name elements according to a convention. This would be the way to do it. Also, take a look at the [attribute=value] and related selectors (for CSS and for JQuery).

Question:

Any pointers as a result of the lab?

Answer:

• The on load event handler $(function() {...})); does not need to hookup the events for the todo application. You should only do this if you need to, or if it makes the code clearer. In most cases, for the todo application. It does not make the code clearer. It would be simpler to just put the onclick event handlers in the html itself. These should be very simple. For example onclick="login();".
• To prevent a submit button from submitting a form, you can either
  • preventDefault
  • return false as from your event handler.
• If you want to debug the messages you are getting back from the server, you can ...getJSON(...., function(data){ console.log(JSON.stringify(data)); ... });
• To make your code more like MVC, you have php (the Model), index.html (the view), and controller.js (the controller). Now index.html simply includes controller.js in the hea of the document.
• If you don't like generating your GUI by writing HTML in Javascript, you can play with the node HTML5 interface. In some cases, this can simplify GUI creation. See the HTML5 Element and the HTML5 Document Object (createElement)

Question:

How do you prevent browser caching of a webpage?

Answer:

see this