pip install Flask
pip install Flask-SQLAlchemy
todo/app.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | //todo/app.pyfrom flask import Flask, render_template, request, redirect, url_forfrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name__)app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = Falsedb = 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) |
https://getbootstrap.com/docs/5.0/getting-started/introduction/
templates/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | //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> |
