Flask Framework Basics (Python)

Building a simple web app using Flask Framework

Introduction

In each section, I will show pieces of code for you to follow along. All the code used in the tutorial is available in this GitHub Repository.

What is HTTP and What Does it Have to do with Flask?

HTTP is the protocol for websites. The internet uses it to interact and communicate with computers and servers. Let me give you an example of how you use it everyday.

When you type the name of a website in the address bar of your browser and you hit enter. What happens is that an HTTP request has been sent to a server.

For example, when I go to my address bar and type google.com, then hit enter, an HTTP request is sent to a Google Server. The Google Server receives the request and needs to figure how to interpret that request. The Google Server sends back an HTTP response that contains the information that my web browser receives. Then it displays what you asked for on a page in the browser.

How is Flask involved?

We will write code that will take care of the server side processing. Our code will receive requests. It will figure out what those requests are dealing with and what they are asking. It will also figure out what response to send to the user.

To do all this we will use Flask.

What is Flask?

It makes the process of designing a web application simpler. Flask lets us focus on what the users are requesting and what sort of response to give back.

Learn more about micro frameworks.

How Does a Flask App Work?

The code lets us run a basic web application that we can serve, as if it were a website.

basic flask app template

This piece of code is stored in our main.py.

Line 1: Here we are importing the Flask module and creating a Flask web server from the Flask module.

Line 3: __name__ means this current file. In this case, it will be main.py. This current file will represent my web application.

We are creating an instance of the Flask class and calling it app. Here we are creating a new web application.

Line 5: It represents the default page. For example, if I go to a website such as “google.com/” with nothing after the slash. Then this will be the default page of Google.

This is what the @app.route(“/”) will represent

Line 6–7: When the user goes to my website and they go to the default page (nothing after the slash), then the function below will get activated.

Line 9: When you run your Python script, Python assigns the name “__main__” to the script when executed.

If we import another script, the if statement will prevent other scripts from running. When we run main.py, it will change its name to __main__ and only then will that if statement activate.

Line 10: This will run the application. Having debug=True allows possible Python errors to appear on the web page. This will help us trace the errors.

Let’s Try Running main.py

In your Terminal or Command Prompt go to the folder that contains your main.py. Then do py main.py or python main.py. In your terminal or command prompt you should see this output.

The important part is where it says Running on http://127.0.0.1:5000/

127.0.0.1 means this local computer. If you do not know the meaning of this (like I didn’t when I started — this article is really helpful), the main idea is that 127.0.0.1 and localhost refer to this local computer.

Go to that address and you should see the following:

Congrats! You made a website with Flask!

More Fun with Flask

Earlier you saw what happened when we ran main.py with one route which was app.route(“/”).

Let’s add more routes so you can see the difference.

In lines 9–11. we added a new route, this time to /Karthik.

Now run the main.py again and go to http://localhost:5000/Karthik

So far we have been returning text. Let’s make our website look nicer by adding HTML and CSS.

HTML and CSS

HTML and Templates in Flask

First create a new HTML file. I called mine home.html.

Important Point To Remember

The Flask Framework looks for HTML files in a folder called templates. You need to create a templates folder and put all your HTML files in there.

Remember to always keep the main.py outside of your templates folder

Now we need to change our main.py so that we can view the HTML file we created.

We made two new changes

Line 1: We imported render_template() method from the flask framework. render_template() looks for a template (HTML file) in the templates folder. Then it will render the template for which you ask. Learn more about render_templates() function.

Line 7: We change the return so that now it returns render_template(“home.html”). This will let us view our HTML file.

Now visit your localhost and see the changes: http://localhost:5000/

Let’s add more pages

Let’s create an about.html inside the templates folder.

Let’s make a change similar to what we did before to our main.py.

We made three new changes:

Line 9: Change the route to"/about"

Line 10: Change the function so it is now def about():

Line 11: Change the return so that now it returns render_template("about.html")

Now see the changes: http://localhost:5000/about

Let’s Connect Both Pages with a Navigation

To connect both pages we can have a navigation menu on the top. We can use Flask to make the process of creating a navigation menu easier.

First, let’s create a template.html. This template.html will serve as a parent template. Our two child templates will inherit code from it.

Line 13–14: We use the function called url_for(). It accepts the name of the function as an argument. Right now we gave it the name of the function. More information on url_for() function.

The two lines with the curly brackets will be replaced by the content of home.html and about.html. This will depend on the URL in which the user is browsing.

These changes allow the child pages (home.html and about.html) to connect to the parent (template.html). This allows us to not have to copy the code for the navigation menu in the about.html and home.html.

Content of about.html:

Content of home.html:

Let’s try adding some CSS.

Adding CSS to Our Website

An important note to remember

In the same way as we created a folder called templates to store all our HTML templates, we need a folder called static.

In static, we will store our CSS, JavaScript, images, and other necessary files. That is why it is important that you should create a CSS folder to store your stylesheets. After you do this, your project folder should look like this:

Linking our CSS with our HTML file

Our template.html is the one that links all pages. We can insert the code here and it will be applicable to all child pages.

Line 7: Here we are giving the path to where the template.css is located.

Now see the changes: http://localhost:5000/about

Finally!! we created our first flask web app

Conclusion

From this tutorial, you all learned how to:

• Use the framework called Flask to use Python as a Server Side Language.
• Learned how to use HTML, CSS, and Flask to make a website.

What I learned

I learned three important things from this small project.

First, I learned about the difference between a static website and a web application

Static Websites:

• Means that the server is serving HTML, CSS, and JavaScript files to the client. The content of the site does not change when the user interacts with it.

Web Applications:

• A web application or dynamic website generates content based on retrieved data (most of the time is a database) that changes based on a user’s interaction with the site. In a web application, the server is responsible for querying, retrieving, and updating data. This causes web applications to be slower and more difficult to deploy than static websites for simple applications.

Server Side and Client Side:

• I learned that a web application has two sides. The client side and the server side. The client side is what the user interacts with and the server side is where the all the information that the user inputted is processed.

Second, I learned how to use Python as a Server Side Language

To create the server side of the web application we had to use a server side language. I learned that I could use the framework called Flask to use Python as the Server Side Language.

Next Steps:

You can build all sorts of things with Flask. I realized that Flask helps make the code behind the website easier to read.

If you have any suggestions or questions, feel free to leave a comment.

Thank you for reading this article ! More articles like this to be released soon..