Welcome to part 2 of our Python Flask tutorial series! In this tutorial, we will continue building our full-featured web app using Flask. In this part, we will focus on using templates in Flask to create dynamic and interactive web pages.
Templates in Flask allow us to separate the design and layout of our web pages from the business logic of our application. This makes it easier to create and maintain our web app by keeping the code organized and manageable. Templates in Flask are usually written using Jinja2, which is a powerful and easy-to-use template engine.
Let’s get started by creating a new template for our web app. In your Flask project directory, create a new folder called templates. Inside this folder, create a new HTML file called index.html. In this file, we will create the layout for our home page.
<!DOCTYPE html>
<html>
<head>
<title>My Flask Web App</title>
</head>
<body>
<h1>Welcome to My Flask Web App!</h1>
<p>This is a full-featured web app built with Flask.</p>
</body>
</html>Now that we have created our template, we need to modify our Flask app to render this template when the user visits the home page. Open up your app.py file and add the following code:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)In this code, we have added a new route called / that renders the index.html template using the render_template() function. When the user visits the home page of our web app, Flask will render the template and display it in the browser.
To run your Flask app and see the changes, open up your terminal, navigate to your project directory, and run the following command:
$ python app.pyNow open your web browser and visit http://localhost:5000/ to see the home page of your web app. You should see the content of the index.html template displayed in the browser.
Congratulations! You have successfully created and rendered a template in your Flask web app. Templates allow us to create dynamic and interactive web pages by injecting data into the HTML using Jinja2 syntax. In the next part of this tutorial series, we will learn how to pass data to templates and create more complex web pages with Flask.
I hope you found this tutorial helpful and informative. Stay tuned for more tutorials on building full-featured web apps with Python and Flask!
i don't know whether i get my problem sloved or not i am commeting that i don't know why but in my home site while i am using {%%} for and conditional statements it is directly printing what i am writing in my body tag like
{% for post in posts %}
{{ post.title }}
By {{ post.author }} on {{ post.date_posted }}
{{ post.content }}
{% endfor %}
i don't know what to do and who to ask nothing is helping me
Oh no, the bootstrap has updated, but the code snippets didn't. The "getting started" page is all different now…
Is there a way to add image to each blog post. I tried but could not achieve it. I really need your answer. I love your tutorials and want more…
For those wondering how rendering_template () function gets the home.html file directly without specifying path, this is because the function by default searches the template in "templates" folder.
How to use html while using pycharm for flask
23:48
I tried using 'from itsdangerous' on the model section but it gave errors like: 'TypeError: unsupported operand type(s) for +: 'int' and 'bytes''. Seems the new version of itsdangerous does not accept 'int' values. And I've been using flask 3.0.3 for other projects tutorials. If I were to downgrade the flask version, it will lead to dependencies errors from confliction between the packages dependencies versions. Anyone with a solution that can help while still trying to achieve the same objective of resetting password by email?
How come the home.html is rendering from a separate directory?
Can anyone help me, I’m using VS Code and trying to create a templates directory, whenever I open the command palette in VS Code, I cant find the command to “Create Project from Template”
Thanks!
good sir. do you have any experience with pelican? i had to ditch jekyll cus ruby is starting to get weird on my mac + and i wanna be in python land, obviously.
would or do u suggest another static site generator alltogether?
much love from of your biggest fans <3
jinja2.exceptions.TemplateNotFound:
If you ever face this error
1.Make sure all the files are in the same directory/file
2.If step 1 doesn't work try updating 2nd line to this "app = Flask(__name__,template_folder='templates')" with your file structure as follows:
myproject/
app.py
templates/
home.html
3.If this doesn't solve your problem check in the html file for syntax error there is a possibility that loop/control loops are not properly closed
Step 2 solved my problem 😅.
Have a great day😄!
Great tutorials. I recommend them for anyone interested in Flask
Absolutely brilliant video. Thank you Corey 😊😊😊
I'm currently working on my flask App, and was looking for a clear tutorial on how this is properly done, so not to start doing it butchering key concepts and having to re-do many things. So far this has been the best flask tutorial I could find. You really dig deep into the bone of it.
Thank you so much from Colombia!
Can you please do a react tutorial like this, this is just too good!
so good
Instead of apologizing that the text is small, why not use ⌘ and + to zoom in? Or you could have a hidden css file to make things bigger.
Mannn you are really the Python GOD !!! Like Whenever I want help with anything related to python your tutorials always helps 🙇🙇
you're the best!