Now it's time to write some code. Look at the list of requirements below for this project. Just like a real client project, the front-end has already been built for you (If you have more time/want more practice with HTML/Bootstrap you can build the entire project from scratch, just create a new empty PyCharm project). But the main goal of today is to ensure that you are fully comfortable with Flask-WTF, Bootstrap-Flask, Bootstrap classes and do a bit of revision on csv manipulation.
The home page should use the css/styles.css file to look like this:
HINT: Think about adding the bootstrap blocks to the base.html and linking to the stylesheet.
The /cafes route should render the cafes.html file. This file should contain a Bootstrap table which displays all the data from the cafe-data.csv
HINT: A object called cafes is passed to cafes.html from the /cafes route. try putting it in a <p> to see what the data in cafes look like.
The location URL should be rendered as an anchor tag <a> in the table instead of the full link. It should have the link text "Maps Link" and the href should be the actual link.
HINT: All location links have the first 4 characters as "http".
Clicking on the "Show Me!" button on the home page should take you to the cafes.html page.
There should be a secret route "/add" which doesn't have a button, but those in the know should be able to access it and it should take you to the add.html file.
Use what you have learnt about WTForms and Bootstrap-Flask to use render_form in the add.html page that contains all the fields you can see in the demo below:
HINT: https://flask-wtf.readthedocs.io/en/1.0.x/quickstart/
https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-form
Make sure that the location URL field has validation that checks the data entered is a valid URL:
HINT: https://wtforms.readthedocs.io/en/2.3.x/validators/
How to switch off client-side (browser) validation with quick_forms: https://stackoverflow.com/a/61166621/10557313
When the user successfully submits the form on add.html, make sure the data gets added to the cafe-data.csv. It needs to be appended to the end of the csv file. The data from each field need to be comma-separated like all the other lines of data in cafe-data.csv
HINT: https://www.w3schools.com/python/python_file_write.asp
Make sure all the navigation links in the website work.
As always remember that the learning happens when you're stuck and solve your problems. The learning doesn't happen in tutorials, it happens when you struggle and overcome your struggles. When you show your struggles who's boss!
So I recommend at least spending 1 hour on this project to write the code and debug. I know it can be frustrating when you feel like you've been stuck on step 1 for half an hour. You feel super unproductive and start questioning your abilities. Don't worry. This happens to the best of us. Just take a break, go for a walk, eat something and come back to the code. You'll be surprised how many breakthroughs you'll make this way.
Only check the solution when you've given the project enough time or if you want to check your solution against mine. (Remember there are multiple ways of doing the same thing, so the sample solution is not the only way to complete this project).
You can download the complete SOLUTION code in this lesson's resources.