Homework 6

Due: Thursday May 21, 11pm

Submit to: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4645

The Assignment

Build a "Post-O-Matic" site. Here is a video illustrating how the site should work.

Starter Code

Use this starter code. You need to edit code in the controllers.py, index.html, and index.js files, and the places where you need to add code are indicated with TODO. You can change other places if you wish, but a working solution can be obtained by only changing the places denoted with a TODO.

Description of the Assignment

Please refer to the video for the details of the behavor. You have to implement a site where you can add posts, and you can add replies to posts; newer posts are at the top, and for each post, newer replies are at the top.

When you click on the "add post" button, a new post is added at the top, and you can proceed to edit it to fill in its content. Similarly, when you click on "reply", a new post is inserted as a reply, and you can fill it in and save it.

The video illustrates the behavior in detail; here, we comment on specific techniques used in the code.

Post List Format

The idea used in writing the app is to keep a single list containing all the posts, be they "main" posts or replies.

You can distinguish a main post from a reply because a main post has the is_reply field equal to None (in Pyton) or null (in Javascript); instead, if the post is a reply, is_reply contains the id of the post to which the current post is a reply. Using a single list of posts facilitates writing the UI. In this single list, the posts appear in the order in which they are displayed, and so:

• Main post 1
  • Latest reply to main post 1
  • Reply to main post 1
  • ...
  • Oldest reply to main post 1
• Main post 2
  • Latest reply to main post 2
  • ...
  • Oldest reply to main post 2
• ...

Inserting Posts

We are using the following nifty trick to insert new main posts, or new replies. We create a Javascript post, and we insert it in the appropriate place in the list of posts: at the top, if it is a main post, and just below the post to which it is a reply, for replies. The post has a database id equal to null, because we have not yet inserted the post in the db.

We then treat the post normally, except that:

• When we send the post to the server to save it, we send both content and id, so the server knows (via the id) whether to do an insertion or update.
• Upon insertion, the server replies to the client (the browser) with the id of the post, so the client can update the id to a non-null value once inserted.

Editing In Place

Most of the relevant code is there for you already, except that you have to create some of the buttons and method calls. Please refer to lecture_editing_in_place for example, and to Lecture 14.