A simple tutorial on flask

By Spandan Madan

Code for this tutorial is here on github

Simple example that shows how to do 3 basic but very important things:-

Accepting input from user
Do something with the user input (for ex, call a python function on this input)
Pass the output of the python function to another HTML as a variable and present the user back with this new HTML.

How to install dependencies needed for this to run:

Install flask. Open terminal and run:

pip install flask

Make sure flask is running. Open Terminal and enter command:

flask

If you get a response saying something like "Usage: flask [OPTIONS] COMMAND [ARGS]...", you are good to go. If not, re-install flask by consulting http://flask.pocoo.org/

How to run the basic example

clone repo using command:

git clone https://github.com/Spandan-Madan/flask_example.git
enter into cloned directory:

cd flask_example
Open terminal and run the python script app.py (assuming you have the required dependencies. If you don't read above section):

python app.py
Open the browser and go to the url localhost:5000

Making use of this for your own purposes:

Q. When do I even use flask?

Ans. Flask is great when you have an HTML page on which the content is changing, i.e. is not static. This could be things like :- getting input from the user and using this for something. For example, if you want to make a simple app where you ask user for a number and then you run a calculation on it. Or, ask user to fill a form and then use the information in a form in a python function and then display the output of the function back to the user.

In a nutshell, flask helps you interact with the user through the browser: both getting info and outputting results.

Caveats:-

The relaying of information is not straightforward. If you're new to web dev or flask as I was, some things that seem very obvious may turn out to be very hard in this framework.

For ex:- Flask app can ONLY access files inside the folder of the app (in this case the flask_example directory). So if the user passes information like the path of an image to be displayed and the path is on the disk outside this folder, flask cannot access it (to the best of my knowledge). The reason for this (apparently) is security of files, browser scripts should not have access to your disk or else they can do all sorts of things.

Workflow of this example repo:-

The 2 HTML files in templates/ directory:

There are 2 HTML files in the templates/ directory. These define the structure of what is to be displayed to the user, one is for before and the second is for after the user interacts with the app.

Open Student.html and see, it simply has a html form which has one input of the type text. This asks user for the path of an image. Note that paths given here by user need to be relative to the directory of the project, for ex: static/img/test2.png. The name given to this HTML element is "impath". This is important as it will be used in the flask app script app.py.

The second thing this form has is a submit button. When this is clicked, the captured information is sent to app.py.

Let's talk a bit about what app.py is doing:

Initially we are only importing things we need from the flask module. Then we are initializing a flask app called app.

The @app.route() sytnax may be new to some people. To dive deeper into it read more about Decorators in Python. One good source is this: https://medium.com/@nguyenkims/python-decorator-and-flask-3954dd186cda.

The short version for those in a hurry- think of it as just another function. Important difference is that they take other functions as input.

@app.route('/') is called when the page is first loaded. The @app.route('/result') is called when The thing inside the bracket of the app.route defines when it is called. rendertemplate() basically renders the HTML file called. The most important thing to note here is that along with the name of the HTML we can also pass variables into the HTML file here using the rendertemplate function in the flask python script.

That is exactly what's happening here. When we submit the HTML form, that is sent following the POST method, which can then triggers the @app.route in line 8 of app.py. This allows us to capture the information entered by the user in line 11 of app.py. Then, this can be used in the app. We use it to pass the captured value into the second HTML file using the render_template function in line 12.

Subsequently, the passed variable is captured in the second html file result.htmk which is rendered with this value. Variables to be passed to HTML are represented in double curly brackets {{}}. As is visible in result.html, the passed variable is captured as {{ result }}, and used to display the image using the tag.

The flow of passing information remains the same. Easy extensions of this example include:-

Capturing different kinds of information. Like number, password, more text etc.
Doing more complicated things to the captured values in the python script. We can add a helper function which processes the values. For ex, squaring the number, checking the password, etc. Based on this computation, we can choose to pass different values from the app.py to the second HTML file.
We can do more complicated things in the second HTML file with the information coming through. For ex: Display images, text, change attributes of the HTML tags like font, color or practically anything.

I chose this as an example precisely for this reason. It is extremely simple, but has all the necessary flexibility to handle relatively complicated flask apps.

Some basic and useful things to help you out if you're new to these things (like I am):

Flask expects a certain directory structure. Usually images,css and js scripts are kept inside static/ directory.
templates contains the HTML files. If you try to open these without running the flask app on localhost, they will look like there's an error. Don't double click and open. Follow the steps above.
Anything to be displayed in the browser has to be in the HTML. To see how to pass value collected from user to your own use, see workflow of this very simple example above.