Create a new POST route called /new-post in your Flask server.

1. It should render the make-post.html page when you click on the "Create New Post" button.

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://pythonhosted.org/Flask-Bootstrap/forms.html

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

e.g.

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


SOLUTION

Note: If you want the Submit Post button to be blue instead of white, simply add a button_map parameter to the wtf quickform and make the submit field a Bootstrap "primary" button.

Docs: https://pythonhosted.org/Flask-Bootstrap/forms.html#form-macro-reference

Bootstrap Primary Button: https://getbootstrap.com/docs/4.0/components/buttons/

CODE


2. 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


NOTE: 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, you need to add 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, you need the pipe symbol "|" and this goes between the Jinja expression and Jinja filter.

e.g. {‌{ Jinja expression | Jinja filter }}

CODE