# Making Websites with Flask/Printable version

The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/Making_Websites_with_Flask

# Introduction
## What is Flask?

Flask is a microframework for making websites with Python. It's super easy to get started. However, Flask does not have features like authentication or database connecting built-in, unlike other web frameworks. However, it is designed to make programming these easy.
Flask is a backend web framework which means that it handles everything behind the scenes. This means that Flask handles the user requests in the server.
Flask is used by LinkedIn and Pinterest.

## History

Flask was created by Austrian programmer Armin Ronacher in 2010.

## Prequesites

* Experience with Python 3
* Experience with HTML

# Getting Started
## Installation

Flask is a Python library, so you first of course need Python installed. Then, you can use the pip package manager to install Flask:
To make sure you installed Flask correctly, run the following Python script:
If it runs without any errors, you have successfully installed Flask!

## Hello World!

In programming, it is a tradition to make a program that displays "Hello World!". So, we will make a website that returns "Hello World!" when we visit it.
In your code editor, write the following code:
Now, save the Python code and run it as you would any other Python program. Then, when you visit localhost:7070, you should "Hello World!".

### Code Breakdown

Now, let's break down the code that we just wrote line by line.
First of all, we need to import the things we need from the Flask module (line 1):
Then, we need to create an instance of the Flask object, which represents our web app (line 3):
Then, we create a decorator. Decorators are functions that modify the next function. In this case, the decorator shows the user whatever is returned by the next function when the user visits the root page (line 5):
Then, we actually create the function which will be modified by the decorator and make it return "Hello World!" (lines 5 and 6):
We could also make the function return some HTML:
Then, we run the Flask object at port 7070 (lines 9 and 10):

## Adding More Routes

Of course, there's nothing stopping us from having more routes. For example, let's add the following code:
For the sake of completeness, here's the entire code with the new code block:
Now, whenever we visit localhost:7070/about, we see "This is my first Flask website" in headings (notice that we added HTML tags to the output of the function).

# Routing
## What is Routing?

Routing basically means returning something to the user when they visit a specific URL on the site, which is called a route. In the Getting Started tutorial, we had two routes: the root route, /, and /hello.

## URL Building with Route Variables

URL building is the practice of having dynamically served URLs, that are not built in. An example of this would be if you had a /user route, but the URL was formatted like /user/randomUser. In a Flask app without route variables, you would manually need to add each user with @app.route many times, but with Route Variables you can just say @app.route('/user/<name>'), and you can show the account page.

# Templating
## What is templating?

When we are making Flask apps, we often want to return an HTML file, not just a string of HTML. Using templating, we can do this, along with many more advanced things like variables, loops, base templates, and more.

## Making a Template File

To make a template file, we make an HTML file in a folder called templates. For example, let's make called our HTML file index.html and put the following in it:

## Displaying Templates

To display a template, we use the render_template function. To use it, we first of all need to import it from the Flask module:
Then, we use the render_template function when we are returning our functions. We pass in the name of the template HTML file into the render_template function. So, something like the following:

## Inline Code Storing

Another way you can serve HTML code is by serving it inline. Here is a example:
In this example, instead of the HTML being loaded from an external file, it is being directly given to the user.

## Test it out

On your Python editor, run the program. Then open a browser. Navigate to http://127.0.0.1:5000/ and you should see a web page congratulating you. If you don't, check the console to debug.

# Creating a web app

Now that you have learned the basics of Flask website development, it is time for the final project. We will be making a web application in which someone can someone can upload their name, age and favourite food, and every other user can view this information.

## Creating the homepage

We will now create the homepage for the website so that when someone connects, they will know what this is.
Here is the code:
As you can see, it links to a sign up page, that does not exist yet. We will now address this issue.

## Making the sign up page

For someone to use your website, they must create an account. But first, we must create a list of all accounts. We will structure it like this: accounts = [{"name": "John Doe", "age": 20, "food": "pizza"}]. In the next chapter we will code this page, and more.