ta: jiang, changkun [email protected] nov. …ierg4080/tutorials...let's make it look better...
TRANSCRIPT
Flask is a small and powerful web framework for Python. It's easy to learn and simple to use,
enabling you to build your web app in a short amount of time.
Project_name\ |-flask\ |-<virtual environment files> |-app\ | |-static\ ├── css ├── img └── js | |-templates\ | |-routes.py | |-README.md
A user issues a request for a domain's root URL / to go to its home page
routes.py maps the URL / to a Python function The Python function finds a web template living in
the templates/ folder. A web template will look in the static/ folder for
any images, CSS, or JavaScript files it needs as it renders to HTML
The Rendered HTML is sent back to routes.py routes.py sends the HTML back to the browser
Write a web app with a couple of pages, to write the same HTML boilerplate over and over again for each page.
If add a new element to app, e.g., a new CSS file? go into every single page and add it in.
If define your page layout just once, and then use that layout to make new pages with their own content?
Exactly what web templates do!
Web templates are simply text files that contain variables and control flow statements (if..else,
for, etc), and end with an .html or .xml extension.
The variables are replaced with your content, when the web template is evaluated.
Web templates remove repetition, separate content from design, and make your application easier to maintain.
Web templates are awesome and you should use them!
Flask uses the Jinja2 template engine
Flask comes packaged with the powerful Jinja templating language.
Let’s see how to use it!
First, define page layout in a skeleton HTML layout.html and put it inside templates/ folder:
To answer this, let's create another file home.html:
The file layout.html defines an empty block, named content, that a child template can fill in.
home.html is a child template that inherits the markup from layout.html and fills in the "content" block.
layout.html defines all common elements of the site, which each child template customizes it with its own content.
But how do we actually see this page? How can we type a URL in the browser and
"visit" home.html?
We just created the template home.html and placed it in the templates/ folder.
Now, we need to map a URL to it so we can view it in the browser.
Let's open up routes.py and do this:
Imported Flask class and a function render_template. Created a new instance of the Flask class. Mapped the URL / to the function home(). When one
visits this URL, the function home() will execute. home() uses the Flask function render_template()
to render the home.html template we just created from the templates/ folder to the browser.
Finally, we use run() to run our app on a local server. “debug= True”, so we can view any applicable error messages if something goes wrong, and so that the local server automatically reloads after we've made changes to the code.
We're finally ready to see the fruits of our labor. Return to the command line, and type:
$ python routes.py Visit http://localhost:5000/ in your web
browser. Visit http://localhost:5000/, routes.py had
code in it, which mapped the URL / to the Python function home(). home() found the web template home.html in the templates/ folder, rendered it to HTML, and sent it back to the browser, giving us the screen above.
But this home page is a bit boring.
Let's make it look better by adding some CSS. Create a file, main.css, within static/css/, and
add these rules:
Add the stylesheet to skeleton file layout.html so
that the styling applies to all of its child templates by adding this line to its <head> element:
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">; We're using the Flask function, url_for, to
generate a URL path for main.css from the static folder. After adding this line in, layout.html should now look like:
Let's switch back to the browser and refresh the page to view the result of the CSS.
Visit http://localhost:5000/, routes.py still maps the URL / to the Python function home(), and home() still finds the web template home.html in the templates/ folder.
But, since we added the CSS file main.css, the web template home.html looks in static/ to find this asset, before rendering to HTML and being sent back to the browser.
We have created a web template home.html by extending the skeleton file layout.html. We then mapped the URL / to home.html in routes.py.
Next, we add some styling to make it look pretty. Let's repeat that process again to create an about
page for our web app.
Creating a web template, about.html, and putting it inside the templates/ folder.
Just like before with home.html, we extend from layout.html, and then fill the content block with our custom content.
To visit this page, we need to map a URL to it. Open routes.py and add another mapping:
Map /about to about(). Check our newly
created page http://localhost:5000/about
Control statements in templates (if, else)
An online example from “The Flask Mega-Tutorial, Part II: Templates “
Loops in templates (e.g., for)
An online example from “The Flask Mega-Tutorial, Part II: Templates “
You may need to use them in your project!
Primer on Jinja Templating https://realpython.com/blog/python/primer-on-jinja-templating/
The Templates in Flask Tutorial http://flask.pocoo.org/docs/0.10/tutorial/templates/
The Flask Mega-Tutorial, Part II: Templates http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates
We built a simple web app with two, mostly static, pages.
We learned a workflow that can be used to create more complex websites with dynamic content.
Flask is a simple, but powerful framework that enables you to efficiently build web apps.
