In this tutorial, we are going to learn how to Python Flask tutorial Setting up a Flask and SQL Database Connection and how to use templates for HTML pages to show the fetch data in the SQL server database.
First of all, we need to install flask and it's too simple to install just "pip install flask" once on your terminal on pycharm or any code editor on your computer, and here am using pycharm.
Setting up a Flask
pip install flask
ok, once the flask is installed, let's check the flask is installed correctly. just type "flask --version" it shows the version on the terminal.
Let's make to create a file named main.py and call the flask application "from flask import Flask" and "app = Flask(__name__)" and test the flask with some example code like "hello world".
ok, Let's run the flask using terminals like "set FLASK_APP = file_name" and here, "set FLASK_APP = main.py". And "flask run".
so, if that worked and you don't have any errors the should see this message that the serving link of the flask app on http://127.0.0.1:5000/ on your local machine with the port number.
set FLASK_APP=main.py
set FLASK_DEBUG=1
flask run
Just copy the URL link and paste it into your browser to run the flask application.
ok, Now you will see the output of "hello world" on your browser and know we will be learning how to use templates to return more on HTML code with this sample script and function and route.
we need to create a templates directory within our project folder and right-click on my project and create a new folder and name templates in lowercase and create an HTML file template for the home page.
Here, I am taking the bootstrap framework for the template and copying, paste the actual use of the HTML codes.
Now, back to the main.py and add render_template top of the import flask like "from flask import Flask, render_template" and return render_template serving up on HTML file.
Python Flask - Use Templates for HTML pages
from flask import Flask
app = Flask(__name__)
@app.route("/")
@app.route("/home")
def home_page():
items= [{'id': 1, 'name' : 'priya' , 'class': 'six'}
,{'id': 2, 'name' : 'ramesh' , 'class': 'six'}]
return render_template('home.html', items=items)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Python Tutorials</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dailyaspirants</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">About us</a>
</li>
<li class="nav-item">
<button class="btn btn-primary" aria-current="page" href="#">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
{{items}}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
{% for i in items %}
<tr scopr="row">
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.class}}</td>
</tr>
{% endfor %}</p>
</tbody>
</table>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Python Tutorials</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dailyaspirants</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">About us</a>
</li>
<li class="nav-item">
<button class="btn btn-primary" aria-current="page" href="#">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
{% for i in items %}
<tr scopr="row">
<td>{{i.id}}</td>
<td>{{i.name}}</td>
<td>{{i.class}}</td>
</tr>
{% endfor %}</p>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Here, using of sql server database connection to fetch the data and display in the html template. and use the import pyodbc for connection string.
pip install pyodbc
from flask import Flask, render_template
import pyodbc
connection = pyodbc.connect("""DRIVER={SQL Server};
SERVER=.;DATABASE=school;Trusted_Connection=yes;""")
table = "select student_id, student_name, student_class from class"
cursor = connection.cursor()
app = Flask(__name__)
@app.route("/")
@app.route("/home")
def home_page():
cursor.execute(table)
result = cursor.fetchall()
return render_template('home.html', result=result)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Python Tutorials</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dailyaspirants</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">About us</a>
</li>
<li class="nav-item">
<button class="btn btn-primary" aria-current="page" href="#">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container py-5">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
{% for i in result %}
<tr scopr="row">
<td>{{i[0]}}</td>
<td>{{i[1]}}</td>
<td>{{i[2]}}</td>
</tr>
{% endfor %}</p>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>