article

Monday, February 3, 2020

Tasks App - Flask SQLAlchemy sqlite3


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

Related Post