Linking together the back-end with the front-end
The two bugs in the application highlight some commonly made mistakes:
1. Be careful not to name your Python file flask.py, or for future references, any name that's identical to the library you are going to import, as your copy of the code will hide the actual flask library you want to import!
2. The app.run(debug=True) line is wrongly indented: unlike other languages which mark a block of code with some form of brackets, Python relies on the indentations to do the same job, so pay attention to them in your code!
A framework containing code written by somebody else which deals with the complexity of handling requests & responses, so we can focus on writing the interesting part of our application.
Before returning the HTML, Flask runs it through a template engine which generates most of the HTML dynamically before returning it as a response to our browser.
Not explicitly mentioned in the last session, but the app.route(...) "magic function" binds the URL specified to the standard Python function which will then handle the requests from users.
Flask uses relative URLs - this is usually the string after the first single slash.
Relative URLs are used so that our application works in a consistent way, regardless of where we host it.
In our case where we have been developing locally, /hello is a relative URL with respect to the host localhost:5000, and so can be accessed by visiting localhost:5000/hello
To understand why we write HTML templates and use a template engine to process them, we need to take a quick look at how web pages were made before template engines existed.
Without templates, web pages have to be served as static HTML files when the user visits the page. These have to be written up in full before a user visit our site.
This is essentially what you did if you completed the Beginners course!
Revisiting a familiar diagram might make this clearer...
It gets tedious as we'd have to write the HTML for each page we intend our users to visit from scratch (or lots of copy and pasting of common parts), even though there are only small differences between pages.
Repetition of code is (generally) a bad idea.
Writing the HTML ahead of the user's visit for dynamic pages becomes tricky when we only know how to lay out & style the page, but we don't know what the content looks like until they visit the page.
Facebook and Twitter are great examples: the feed is different for everyone visiting, as it depends on many variable factors such as who they follow/are friends with.
When writing templates, we only need to write in the HTML parts that we know for definite.
For parts we don't know, the HTML is generated with some logics using Python-like code with data from a user's request when they visit our website.
Let's see how we can do this in Flask!
Hopefully by now, you'd have noticed that the word request has been mentioned repeatedly.
There's just one more little detail that we need to understand about requests before we can move forward... the request type!
Earlier, we said:
"Typing in the URL of the page sends a request to the server running the website."
In fact, to be more precise, we are actually sending a GET request to the server running the website.
If we want the user to send some extra data when they visit a page on our website, the data are visible at the end of the URL. This is all well and good if the data is not sensitive!
To solve this problem, browsers allows data to be sent using a different kind of request known as a POST request, which is only accessible on our server.