Mini Project in Flask : ToDo App

June 22, 2022

Mini Project in Flask : ToDo App

MINI PROJECT: TODO APP

A to-do list app lets you write, organize and reprioritize your tasks more efficiently.They also let you attach notes, links and files to a task, and many let you see when someone else has completed a task.In many ways, a good to-do app is the ultimate productivity app.

In this article, we will learn how to make a todo list app using Flask framework.In this app, you can add your todo items and mark them as complete or incomplete or you can delete the todo list.

Installation:

pip install flask

To install Database:

pip install Flask-SQLAlchemy

Now, we must create the folder templates inside the application directory and save our html templates in that directory.

In this case, our file name is base.html

So, the path of our script file templates->base.html

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDo app</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<div style="margin-top: 50px;" class="ui container">
        <h1 class="ui center aligned header">ToDo App</h1>

        <form class="ui form" action="/add" method="post">
            <div class="field">
                <label>Todo Title</label>
                <input type="text" name="title" placeholder="Enter Todo..."><br>
            </div>
            <button class="ui blue button" type="submit">Add</button>
        </form>

        <hr>

        {% for todo in todo_list %}
        <div class="ui segment">
            <p class="ui big header">{{todo.id }} <br> {{ todo.title }}</p>

            {% if todo.complete == False %}
            <span class="ui gray label">Not Complete</span>
            {% else %}
            <span class="ui green label">Completed</span>
            {% endif %}

            <a class="ui blue button" href="/update/{{ todo.id }}">Update</a>
            <a class="ui red button" href="/delete/{{ todo.id }}">Delete</a>
        </div>
        {% endfor %}
    </div>
</body>
</html>

Next, we have to create the python file

In this case, our file name is app1.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)

@app.route("/")
def home():
    todo_list = Todo.query.all()
    return render_template("base.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 = Todo.query.filter_by(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 = Todo.query.filter_by(id=todo_id).first()
    db.session.delete(todo)
    db.session.commit()
    return redirect(url_for("home"))

if __name__ =='__main__':
    db.create_all()
    app.run(debug = True)

https://workstationit.blogspot.com/2022/06/deploy-flask-application-on-heroku.html

Search This Blog

TheHouseOfIT

Mini Project in Flask : ToDo App

Comments

Post a Comment

Popular Posts

Data Cleaning in Python with steps - Part 2

Activation Functions in Neural Networks