pip install Flask
pip install Flask-SQLAlchemy
todo/app.py
//todo/app.py
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Todo(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100))
complete = db.Column(db.Boolean)
db.create_all()
@app.route('/')
def home():
todo_list = db.session.query(Todo).all()
# return "Hello, World!"
return render_template("index.html", todo_list=todo_list)
@app.route("/add", methods=["POST"])
def add():
title = request.form.get("title")
new_todo = Todo(title=title, complete=False)
db.session.add(new_todo)
db.session.commit()
return redirect(url_for("home"))
@app.route("/update/<int:todo_id>")
def update(todo_id):
todo = db.session.query(Todo).filter(Todo.id == todo_id).first()
todo.complete = not todo.complete
db.session.commit()
return redirect(url_for("home"))
@app.route("/delete/<int:todo_id>")
def delete(todo_id):
todo = db.session.query(Todo).filter(Todo.id == todo_id).first()
db.session.delete(todo)
db.session.commit()
return redirect(url_for("home"))
if __name__ == '__main__':
app.run(debug=True)
Bootstrap 5 https://getbootstrap.com/docs/5.0/getting-started/introduction/
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Flask Simple To Do - SQLAlchemy</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-9 col-xl-7">
<div class="card rounded-3">
<div class="card-body p-4">
<h4 class="text-center my-3 pb-3">Python Flask Simple To Do - SQLAlchemy</h4>
<form class="row" action="/add" method="post">
<div class="col-4">
<div class="form-outline">
<input type="text" id="title" name="title" class="form-control" placeholder="Enter a task here"/>
</div>
</div>
<div class="col-6">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
<table class="table mb-4">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Todo item</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for todo in todo_list %}
<tr>
<th scope="row">{{todo.id }}</th>
<td>{{ todo.title }}</td>
<td>
{% if todo.complete == False %}
<div class="alert alert-secondary" role="alert">In progress</div>
{% else %}
<div class="alert alert-success" role="alert">Completed</div>
{% endif %}
</td>
<td>
<a class="btn btn-success" href="/update/{{ todo.id }}">Update</a>
<a class="btn btn-danger ms-1" href="/delete/{{ todo.id }}">Delete</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
run (venv) C:\flask_dev\todo>flask run 
