In this tutorial, we will be talking about templates and HTML files in Flask. Templates are used in Flask to render dynamic HTML content and can make your web application more user-friendly and aesthetically appealing. HTML files are used to define the structure of your web pages and are the foundation of your web application.
Before we get started with templates and HTML files, make sure you have Flask installed on your machine. If you don’t have Flask installed, you can do so by running the following command in your terminal:
pip install FlaskOnce you have Flask installed, let’s create a new Flask app. Create a new directory for your Flask app and navigate into the directory. Once you are in the directory, create a new Python file called app.py. In app.py, we will define our Flask app and set up our routes.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()In the code above, we imported Flask and render_template from the flask module. We then created a new instance of the Flask class and defined a route for the root URL /. When a user visits the root URL, the index function is called, which renders the index.html template using the render_template function.
Next, let’s create a new directory called templates in the same directory as app.py. Inside the templates directory, create a new HTML file called index.html. In index.html, add some basic HTML content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Tutorial</title>
</head>
<body>
<h1>Welcome to our Flask tutorial!</h1>
</body>
</html>Now, if you run your Flask app by executing python app.py in your terminal and visit http://127.0.0.1:5000/ in your browser, you should see the content from your index.html template displayed on the page.
Templates in Flask allow you to create dynamic content by passing variables to your templates. Let’s update our index function to pass a variable to our index.html template:
@app.route('/')
def index():
name = 'John'
return render_template('index.html', name=name)In index.html, we can now access the name variable that we passed from our Flask app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Tutorial</title>
</head>
<body>
<h1>Welcome, {{ name }}!</h1>
</body>
</html>Now, when you visit http://127.0.0.1:5000/, you should see a personalized greeting with the name "John" displayed on the page.
Templates in Flask also support control structures and template inheritance, allowing you to create complex layouts and reuse code across multiple templates. You can learn more about Flask templates and HTML files in the Flask documentation: https://flask.palletsprojects.com/en/2.1.x/patterns/templates/
In this tutorial, we covered the basics of templates and HTML files in Flask. By using templates, you can create dynamic and responsive web pages for your Flask app. Experiment with different HTML templates and Flask routes to create a personalized web application.
wait a minute , hold on. "say my name"
…….
@NeuralNine
"you got damn right"
Actually if we don't write anything inside the render_filter (inside the ( )) then also it works.
I like ur Tee
Something that has not been mentioned here is that Pycharm community edition does not support Jinja2 template language, it is only available on the professional version.
Please provide Github repo link, it will be helpful. Thanks
hi
I started watching a different flask tutorial and it kinda sucked. Then I started watching these and so far they very much do not suck. Bless your soul.
still going awesome…. thx ….
I'm learning Python and I really like Pycharm but for Flask or Jango projects looks like I have to do it in VScode, because its really poor experience working with frameworks in Pycharm community edition, though I have no complaints to Pycharm, it's really good IDE but for now I'm just studying and can't afford paid one version
Definitely need more flask content!
I can't think of a worse language than Python for server-side rendering of HTML.. Just so many DoS opportunities. Just let one bit of user-defined data flow through to a loop in your HTML generation, and boom, that process is locked up and dead to the world.
Very useful information in this series. Could you maybe include adding a Dash application to your Flask website in a future video? And adding a login wall for certain features and pages?
Great vid, keep going!
hey neural i would really appreciate if you make a Ai roadmap for those who are going to start learning it
❤ really great 👏
Bro can you pls tell me how you actually prepare yourself for any new python topic, like how you grab the concept.
❤wow, viral serie
Can you do a side by side with quart and flask?
I want asyncio like fastapi but i want to keep using flask!