Python Flask tutorial Setting up a Flask and SQL Database Connection

bychandrakumar —

 

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.

Python Flask tutorial

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


Python Flask tutorial


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>


Python Flask tutorial



<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>


Python Flask tutorial


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>


Python Flask tutorial

Tags:

chandrakumar

Hi, Am Chandra Kumar, I have completed my graduation in B.E computer science and Engineering. I am the founder of Dailyaspirants and I have been doing blogging and website design and development .since 2018 and 5+experience gained in this field.
Previous Post Next Post