Reuben's blog

Flask App

Flask App

Reuben D'souza's photo
Reuben D'souza
·

4 min read

Table of contents

Creating minimal Flask app.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

if __name__=="__main__":
    app.run(debug=True)

Routing

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

@app.route("/products")
def products():
    return "<p>Products Page</p>"

Static and template directories

index.html inside templates

(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My app</title>
</head>
<body>
  my app
</body>
</html>

render templates

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def hello_world():
    return render_template('index.html')

@app.route("/products")
def products():
    return "<p>Products Page</p>"


if __name__=="__main__":
    app.run(debug=True)

Adding HTML

Copy paste from bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My app</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
</head>
<body>

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ToDo App</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 me-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" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<div class="container">
    <h2>Add Your  Todo</h2>
    <form>
  <div class="mb-3">
    <label for="title" class="form-label">Todo Title</label>
    <input type="text" class="form-control" id="title" aria-describedby="emailHelp">

  </div>
  <div class="mb-3">
    <label for="desc" class="form-label">Todo Description</label>
    <input type="text" class="form-control" id="desc">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<div class="container my-5">
    <h2>Your Todos</h2>
    <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>

Creating database

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] ="sqlite:///todo.db"
db= SQLAlchemy(app)
app.app_context().push()

@app.route("/")
def hello_world():
    return render_template('index.html')

@app.route("/products")
def products():
    return "<p>Products Page</p>"


if __name__=="__main__":
    app.run(debug=True)

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] ="sqlite:///todo.db"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db= SQLAlchemy(app)
app.app_context().push()

class Todo(db.Model):
    sno = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(200), nullable=False)
    desc = db.Column(db.String(500), nullable=False)
    date_created = db.Column(db.DateTime, default=datetime.utcnow)

    def __repr__(self) -> str:
        return f"{self.sno} - {self.title}"


@app.route("/")
def hello_world():
    todo= Todo(title="First Todo", desc="Start investing")
    db.session.add(todo)
    db.session.commit()
    return render_template('index.html')

@app.route("/products")
def products():
    return "<p>Products Page</p>"


if __name__=="__main__":
    app.run(debug=True)

create db file

Query Records


@app.route("/")
def hello_world():
    todo= Todo(title="First Todo", desc="Start investing")
    db.session.add(todo)
    db.session.commit()
    return render_template('index.html')

@app.route("/show")
def products():
    allTodo=Todo.query.all()
    print(allTodo)
    return "<p>Products Page</p>"

Adding the todos to index.html


<div class="container my-5">
    <h2>Your Todos</h2>
    <table class="table">
  <thead>
    <tr>
      <th scope="col">Sno.</th>
      <th scope="col">Title</th>
      <th scope="col">Description</th>
      <th scope="col">Time</th>
    </tr>
  </thead>
  <tbody>
//JINJA 2
  {% for todo in allTodo %}
      <tr>
      <th scope="row">{{loop.index}}</th>
      <td>{{todo.title}}</td>
      <td>{{todo.desc}}</td>
      <td>{{todo.date_created}}</td>
    </tr>

  {% endfor %}

  </tbody>
</table>
</div>

@app.route("/")
def hello_world():
    todo= Todo(title="First Todo", desc="Start investing")
    db.session.add(todo)
    db.session.commit()
    allTodo=Todo.query.all()
    print(allTodo)
    return render_template('index.html',allTodo=allTodo)

Getting Form To Work

(index.html)
<div class="container">
    <h2>Add Your  Todo</h2>
    <form action="/" method="POST">
  <div class="mb-3">
    <label for="title" class="form-label">Todo Title</label>
    <input type="text" class="form-control" name="title" id="title" aria-describedby="emailHelp">

  </div>
  <div class="mb-3">
    <label for="desc" class="form-label">Todo Description</label>
    <input type="text" class="form-control" name="desc" id="desc">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

@app.route("/",methods=['GET','POST'])
def hello_world():
    if request.method=='POST':
        title=request.form['title']
        desc=request.form['desc']
        todo= Todo(title=title, desc=desc)
        db.session.add(todo)
        db.session.commit()
    allTodo=Todo.query.all()

    return render_template('index.html',allTodo=allTodo)

Adding delete functionalities:

  {% for todo in allTodo %}
      <tr>
      <th scope="row">{{loop.index}}</th>
      <td>{{todo.title}}</td>
      <td>{{todo.desc}}</td>
      <td>{{todo.date_created}}</td>
        <td>
          <a href="/delete/{{todo.sno}}" type="button" class="btn btn-success btn-sm mx-1">Update</a>
           <a href="/delete/{{todo.sno}}" type="button" class="btn btn-danger btn-sm mx-1">Delete</a>
        </td>
    </tr>
  {% endfor %}

@app.route("/delete/<int:sno>")
def delete(sno):
    todo= Todo.query.filter_by(sno=sno).first()
    db.session.delete(todo)
    db.session.commit()
    return redirect('/')

Template Inheritance

create base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My app</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
</head>
<body>

{% block body%}

{% endblock body%}

</body>
</html>

(index.html)

{% extends 'base.html' %}
{% block body%}
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">ToDo App</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 me-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" href="#">Link</a>
        </li>


      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav><div class="container">
    <h2>Add Your  Todo</h2>
    <form action="/" method="POST">
  <div class="mb-3">
    <label for="title" class="form-label">Todo Title</label>
    <input type="text" class="form-control" name="title" id="title" aria-describedby="emailHelp">

  </div>
  <div class="mb-3">
    <label for="desc" class="form-label">Todo Description</label>
    <input type="text" class="form-control" name="desc" id="desc">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>



<div class="container my-5">
    <h2>Your Todos</h2>
    <table class="table">
  <thead>
    <tr>
      <th scope="col">Sno.</th>
      <th scope="col">Title</th>
      <th scope="col">Description</th>
      <th scope="col">Time</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
  {% for todo in allTodo %}
      <tr>
      <th scope="row">{{loop.index}}</th>
      <td>{{todo.title}}</td>
      <td>{{todo.desc}}</td>
      <td>{{todo.date_created}}</td>
        <td>
          <a href="/delete/{{todo.sno}}" type="button" class="btn btn-success btn-sm mx-1">Update</a>
           <a href="/delete/{{todo.sno}}" type="button" class="btn btn-danger btn-sm mx-1">Delete</a>
        </td>
    </tr>
  {% endfor %}

  </tbody>
</table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
{% endblock body%}

Completing Update Operation

@app.route("/update/<int:sno>",methods=['GET','POST'])
def update(sno):
    if request.method=='POST':
        title=request.form['title']
        desc=request.form['desc']
        todo = Todo.query.filter_by(sno=sno).first()
        todo.title=title
        todo.desc=desc
        db.session.add(todo)
        db.session.commit()
        return redirect('/')

    todo = Todo.query.filter_by(sno=sno).first()
    return render_template('update.html', todo=todo)

Did you find this article valuable?

Support Reuben D'souza by becoming a sponsor. Any amount is appreciated!