Learn Flask With Me 2: Routes and Rendering HTML Files

Learn Flask With Me 2: Routes and Rendering HTML Files

·

3 min read

Hey, Dew plucky again! This is my second Flask tutorial. If you haven't read my first tutorial you can click this link to read it: dewplucky.hashnode.dev/learn-flask-with-me

In the first tutorial; we learned how to create a Flask application, and how to display a string on your web page. Now we're going to learn about routes and, displaying HTML tags and HTML files.

Routing

First, I will try to explain what is a route with some examples. Let's go to hashnode.com, and click on Explore to go to the explore page. As you can see, when you go to the explore page, the URL at the search bar of your browser changes to hashnode.com/explore. So the "/explore" here, is a route that executes the view function for the explore page.

Remember how we created a route and a view function in the previous article.

@app.route('/')
def index():
    return "Dew Plucky"

With @app.route("/") we identify a route that executes the view function index() which returns the string "Dew Plucky".

Now let's create a new route

@app.route("/hey!")
def hey():
    return "Hey, user!"

Run the code and open up the localhost on your browser, then go to the route /hey! you will see the string "Hey, user!"

127.0.0.1_5000_hey! - Google Chrome 5_5_2022 12_54_21 AM.png

HTML

Displaying HTML tags

It's very easy to display HTML tags in Flask. All we need to do is return the HTML tag we want to display, as a string.

@app.route("/hey!")
def hey():
     return "<h1>Hey, user!</h1>"

127.0.0.1_5000_hey! - Google Chrome 5_17_2022 11_53_46 AM.png We displayed <h1> tags in this example. We can display some other tags, for example, we can display the paragraph tags <p>

@app.route("/hey!")
def hey():
     return "<p>This is a paragraph</p>"

127.0.0.1_5000_hey! - Google Chrome 5_17_2022 11_53_16 AM.png

Rendering HTML Files

To store our HTML files we need to create a new folder called templates in the application folder, then we can create our HTML file in the templates folder.

C__Users_necat_Desktop_FlaskTutorial_templates_index.html (FlaskTutorial) - Sublime Text (UNREGISTERED) 5_17_2022 11_59_29 AM.png

I named my file index.html, and added some tags.

Now we can display our HTML files. Let's go back to the app.py file

First, we need to import the render_template method.

from flask import Flask, render_template

Next, we will return the index.html file with our view function by using the method render_template().

@app.route("/hey!")
def hey():
    return render_template("index.html")

Let's run the code and see how our page looks like

HEY! - Google Chrome 5_17_2022 12_20_52 PM.png

In the end my app.py file looks like this

from flask import Flask , render_template
app = Flask(__name__)

@app.route('/')
def index():
    return "Dew Plucky"


@app.route("/hey!")
def hey():
    return render_template("index.html")

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

This is the end of the second tutorial, hope to see you in the next one !!!