In our previous Flask application, we displayed a simple "Hello World" message directly from the Python code.
In this tutorial, we will take the next step. We will pass a value from our Flask Python application to an HTML page and display that value dynamically in the web browser.
For this example, we will pass a person's name from the Flask application to an HTML template.
1. Create the Project Structure
Create a new folder for the Flask application with the following structure:
MyFlaskApp/
│
├── app.py
│
├── templates/
│ └── index.html
│
└── static/templates Folder
The templates folder is used to store HTML templates that Flask will render using the render_template() function.
static Folder
The static folder is used for files that do not change dynamically, such as:
- CSS files
- JavaScript files
- Images
- Fonts
We will create the static folder in this application, although we will not use it in this particular example.
2. Create the HTML File
Inside the templates folder, create a file named index.html.
Add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Title of My Page</title>
</head>
<body>
<h1>Hello {{ Name }}</h1>
<p>{{ Name }}</p>
<p>Devansh Tiwari is studying in Standard X at Kendriya Vidyalaya Golconda No. 1.</p>
<p>Langer Houz 500008</p>
<p>I like it.</p>
</body>
</html>
Notice the following line:
<h1>Hello {{ Name }}</h1>
{{ Name }} is a Jinja2 template variable.
Flask uses the Jinja2 template engine to dynamically insert values into an HTML page
3. Create the Flask Application
Now create app.py in the main project folder.
Add the following code:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/getInfo')
def dispTemp():
emp = "Devansh Tiwari"
return render_template('index.html', Name=emp)
if __name__ == '__main__':
app.run(debug=True)
Let's understand the code step by step.
Import Flask and render_template
from flask import Flask, render_template
Here we import:
Flask — used to create our Flask application.render_template — used to load and render an HTML template from the templates folder.
Create the Flask Application
app = Flask(__name__)
This creates our Flask application object.
Create a Route
@app.route('/getInfo')
This maps the /getInfo URL to our Python function.
When we open:
http://127.0.0.1:5000/getInfo
Flask executes the dispTemp() function.
Pass the Parameter to HTML
def dispTemp():
emp = "Devansh Tiwari"
return render_template('index.html', Name=emp)
Here we first create a Python variable:
emp = "Devansh Tiwari"
We then pass this value to the HTML template:
render_template('index.html', Name=emp)
Here:
index.html is the HTML template.Name is the variable name that will be available inside the HTML file.emp contains the actual value.
Therefore:
Name=emp
passes the value of emp to the Jinja2 variable Name.
Display the Parameter in HTML
In index.html, we have:
<h1>Hello {{ Name }}</h1>
Flask/Jinja2 replaces:
{{ Name }}
with:
we can add multiple bootstraps html to call different layouts
from flask import Flask ,render_template
app = Flask(__name__)
@app.route('/getInfo')def dispTemp(): emp="Devansh Tiwari" return render_template('index.html',Name=emp)@app.route('/bootstrap')def dispBootStrap(): return render_template('bootstrap.html')@app.route('/bootstrap2')def dispBootStrap2(): return render_template('bootstrap2.html')if __name__ == '__main__': app.run(debug=True)
0 Comments