Part 1 of 2: Introduction to Python Flask
Creating a basic web application with Python Flask
For this walk through you should know a little bit about Python and also have Flask installed on your machine. If you don’t have it, click here to install Flask onto your machine.
So what is Flask?
To summarize it briefly, Flask is a web framework for the Python language. This means that you are provided tools, libraries and technologies that allow you to build a web application.
Before diving into Flask, it is recommend that you use the latest version of Python 3. Flask also supports Python 3.5 and newer, Python 2.7, and PyPy.
Creating a Basic Application (Walkthrough)
Step 1: Creating our file structure of the project
Note/Explanation:
Every Python Flask project should have the root directory folders “static” and “templates.” This is due to the way Flask is set up to look for these folders and assist in creating our web applications.
The templates folder will contain our views/html files and the static folder will contain any files needed by the web application.
(e.g. images, css, javascript)
How:
To do this Go to your terminal and create the folder “hello_flask”, with parent folders “templates” and “static”. (One liner below)
This will create the following tree
HELLO_FLASK
|- -static(folder)
|- -templates (folder)
Step 2: Create the Templates, CSS and App files.
Now let’s cd into the directory we just made |$ cd hello_flask|
Create our application file in root directory |$ touch hello_flask.py|
Insert the following code into your hello_flask.py file:
After you insert the code:
Create two html files “index.html” and “other_page.html” inside your templates folder.
Create a css file “hello.css” and put it inside the static folder.
Note/Explanation:
Let’s break down what exactly is happening in this python code.
In line 2, we are importing “Flask” and “render_template” from the flask module. These two methods are essential for a basic functionality of our web app.
In line 7, we are creating an instance of the Flask class called “Flask_App.”
In line 10 and 18, we add routes to our Flask instance, that we can visit.
In line 11 and 19, after declaring a route you must create a method which will be responsible for rendering route. The methods with routes should return an html file that can be found inside your templates folder.
In lines 25–27, The conditional statement is boilerplate essentially. The debug allows you to see errors if your application fails to run. The run() method runs the application.
Step 3: HTML code and CSS code.
We are almost done with the basics!
Now let’s input our html code and css code:
The yellow and light-blue highlights, are the only additions I made to the basic html boilerplate.
If you look carefully you might have noticed a strange syntax consisting of
{{ variable_name }}.
The curly braces denote a variable in which we can use to dynamically references files or parameters passed into a template no matter where the user is located on the website.
For instance, in order for the template files to get access to a desired css file, we can use the “url_for” function and pass in two parameters:
url_for( ‘location_directory’, filename= ‘file_in_directory’ )
url_for( ‘static’, filename= ‘hello.css’ )
To visit other views in our application we can use <a> tags and assign href values to be name of the method that is responsible for rendering a template. In this case we have two methods “index” and “other” which are responsible for rendering a page on the routes (“ / “) and (“ /other “) respectively.
Step 4: Run it.
Sweet we got the fundamentals of a flask application set up, lets run it.
After going to the default link (which is your index.html) page, you should be able to:
See an anchor tag/link on both pages leading to the other page/template.
See the following css effects.
And that’s it! Your Flask application is now set up!
Now this is just the basics to what Python flask is capable of. On the next blog post, I will go into how we pass additional arguments into our flask templates and utilize Python code to assist us in dynamically rendering pages!
Til Then,
Banks out.
