Load a form the create a block post

Create a new POST route called /new-post in your Flask server. This route should render the make-post.html page when you click on the "Create New Post" button. The make_post.html needs to display a form with 5 fields:

You will need to figure out how to use the Flask CKEditor package to make the Blog Content (body) input in the WTForm into a full CKEditor.

Useful Docs:

https://flask-ckeditor.readthedocs.io/en/latest/basic.html

https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-form

https://flask-wtf.readthedocs.io/en/stable/

See if you can re-create the behaviour that you see in the gif below. Break down the task into smaller steps to make it easier.



Hint 1: Every time you make changes in the Jinja Templating of an HTML file, you will need to stop and re-run your server to see the changes.


Hint 2: If you got stuck, here's how you would link the "Create New Post" button to the make_post.html.


Hint 3: After creating the route, the next small step is making the form appear. Here's how you would create and render the WTF form. I've left out the form body for the blog content for now.

Hint 4: Here's how to add the CKEditor for the blog content body. You'll need to initialise it with your flask app and then load it on the make_post.html


Save the new post to the database

When the user is done typing out entries to all the fields, the data in the form should be saved as a BlogPost Object into the posts.db

Once the post is saved, the user should be redirected to the home page and the new post should show up if the saving process was successful.

Note: the date field is not in the WTForm, because the date should be automatically calculated using the datetime module in the server. The date needs to be formatted like this:

August 31, 2019

<full month name> <date number>, <full year>

Docs: https://www.w3schools.com/python/python_datetime.asp

e.g.


SOLUTION


For the more curious: the data from the CKEditorField is saved as HTML. It contains all the structure and styling of the blog post. In order for this structure to be reflected when you go to the post.html page for the blog post, we added a Jinja safe() filter. This makes sure that when Jinja renders the post.html template, it doesn't treat the HTML as text.  To apply a Jinja filter, we used the pipe symbol "|" and this goes between the Jinja expression and Jinja filter. e.g. {{ Jinja expression | Jinja filter }}. Note for simplicity we are not sanitising the HTML here and assuming that we can trust our blog authors to not post a malicious <script>.