Tasks App - Flask SQLAlchemy sqlite3
A simple tasks app using Flask sqlalchemy and sqlite3 and also sqlite studio
from flask import Flask, render_template, url_for, request, redirect from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///task.sqlite3' db = SQLAlchemy(app) class Task(db.Model): id = db.Column(db.Integer, primary_key=True) content = db.Column(db.String(200)) done = db.Column(db.Boolean) @app.route('/') def home(): tasks = Task.query.all() return render_template('index.html', tasks = tasks) @app.route('/create-task', methods=['POST']) def create(): new_task = Task(content=request.form['content'], done= False) db.session.add(new_task) db.session.commit() return redirect(url_for('home')) @app.route('/done/') def done(id): task = Task.query.filter_by(id=int(id)).first() task.done = not(task.done) db.session.commit() return redirect(url_for('home')) @app.route('/delete/ ') def delete(id): Task.query.filter_by(id=int(id)).delete() db.session.commit() return redirect(url_for('home')) if __name__ == '__main__': app.run(debug=True)
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tasks App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <!-- FONTS --> <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> <!-- MAIN CSS --> <link rel="stylesheet" href="{{url_for('static', filename='main.css')}}"> </head> <body> <main class="container p-4"> <h1 class="display-4 text-center title mt-4">Tasks App - Flask SQLAlchemy</h1> <div class="row"> <div class="col-md-4 offset-md-4 my-auto"> <div class="card"> <div class="card-header"> <form action="/create-task" method="POST"> <div class="form-group"> <input type="text" name="content" placeholder="Task" class="form-control" autofocus> </div> <button type="submit" class="btn btn-primary btn-block">Save</button> </form> </div> <div class="card-body"> <ul class="list-group"> {% for task in tasks %} <li class="list-group-item"> <span class="{% if task.done %} done {% endif %}">{{task.content}}</span> <a href="/done/{{task.id}}" class="btn btn-success btn-sm">Done</a> <a href="{{url_for('delete', id=task.id)}}" class="btn btn-danger btn-sm">Delete</a> </li> {% endfor %} </ul> </div> </div> </div> </div> </main> </body> </html>
//main.css body { background: #C9D6FF; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #E2E2E2, #C9D6FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color: #000; } .title { font-family: 'Open+Sans', cursive;text-transform:normal; } .done { text-decoration: line-through; color: #cfcfcf; }