roxxhub

Menu

Using flask to create a simple web application

by

Introduction

Flask is a python framework used for building web applications. It is a very lightweight and easy to use software. It is often termed as a ‘micro web framework’ as it combines most of the utility one would require while building a web application.

In this tutorial we will be looking at how you can create a very simple kind of web app / website using flask.

But before diving into it, make sure you know how websites actually work.

Advantages of Flask

Although there are many advantages I think only these 3 would matter for a beginner

  • It includes almost every utility you need for creating a website. It has a built – in server, secure cookies, debugger etc.
  • It is lightweight. – Doesn’t require much memory power
  • It has a very simple syntax.

Making our simple web app using flask

Installing

To use flask, we first need to install it in our environment. OF COURSE

pip install flask

Creating a webpage

from flask import Flask

app = Flask(__name__)
@app.route("/")
def hello_world():
    return 'hello'

@app.route("/articles")
def hello_peter():
    return 'articles are supposed to be here'

if __name__ == '__main__':
    app.run(debug=True)

print(app)

This will output:

 * Serving Flask app 'rough'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 102-496-081

Alright. Lets see what we did here.

First we imported Flask from flask. @app.route(“/”) helps us create a function which, when called would do some task. Which is here to return ‘hello’. This is shown in the ‘/’ webpage of our site. To visit our site, you can go to 127.0.0.1:5000 of your browser.

flask webpage python

You can create even more webpages like this. I created an ‘articles’ page. Lets see what we get there

flask webpage python

Now you can add even more.

By the way, if you made some changes in your site, you won’t have to rerun the code. Just make the changes and they will appear.

Static and template file

We have seen how you can create a simple webpage. Now its time to add some more features to it to look even better.

In order to do so, create two folders on the same project directory you are working on. Where probably you have your virtual environment file.

static and template folder. Flask

Lets see what they actually do.

Static

Flask detects this folder, and any resource (file, folder, video, text etc.) you keep here would be accessible from the website by going in 127.0.0.1/static/file.

Lets say I created a sec.txt file in the static folder. It has something written on it, lets say its says ‘its morbin time’

Now if I go to 127.0.0.1:5000/static/sec.txt, I get the same text I put on my file.

Template

This folder is where you put your front-end code. Front-end code is the code used to design the graphical user interface (GUI) of a site. Like CSS, HTML etc.

Now if you are familiar with HTML or something like that, you should go ahead and write the code. And if you don’t, don’t worry, you can use these template code provided by getbootstrap.com.

You need to create an ‘index.html’ file first in the template folder. Then copy the starter template there. You then need to do some minor changes in the code of the page where you want the template to appear.

@app.route("/")
def hello_world():
    return render_template('index.html')

Don’t forget to import render_template from flask first.

You will notice this will print ‘Hello world’ in bold and a bigger size.

You can add more types of templates from getbootstarp. Most of them are at the ‘Components’ section.