Simple To-Do Application using FLASK and Deploy on Heroku
3 min readDec 20, 2020
this is a simple todo application created by using to create this you need Python3, Flask in your system. and im going to show to how to deploy it on Heroku
you can use Pycharm to create a Flask Project that would be easy and fast.
after installing python in your type these below pip commands in your terminal
pip install Flask
pip install Flask-SQLAlchemy
we are using Sqllite3 Database and SQLAlchemy package for Data in our Application
app.py
from flask import Flask,render_template,url_for,request,redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///main.db'
db = SQLAlchemy(app)
class Todo(db.Model):
id = db.Column(db.Integer,primary_key=True)
content = db.Column(db.String(200),nullable=False)
date_created = db.Column(db.DateTime,default=datetime.utcnow())
def __repr__(self):
return '<Task %r>'% self.id
@app.route('/',methods=['POST','GET'])
def index():
if request.method == 'POST':
task_content = request.form['content']
new_task = Todo(content=task_content)
try:
db.session.add(new_task)
db.session.commit()
return redirect('/')
except:
return "There is Problem in Adding Your Tasks"
else:
tasks = Todo.query.order_by(Todo.date_created).all()
return render_template('index.html',tasks=tasks)
@app.route('/delete/<int:id>')
def delete(id):
task_delete = Todo.query.get_or_404(id)
try:
db.session.delete(task_delete)
db.session.commit()
return redirect('/')
except:
return 'There was Error in Deleting your tasks'
@app.route('/update/<int:id>',methods=['POST','GET'])
def update(id):
task = Todo.query.get_or_404(id)
if request.method == 'POST':
task.content = request.form['content']
try:
db.session.commit()
return redirect('/')
except:
return "There was an error in updating your tasks"
else:
return render_template('update.html',task=task)
if __name__ == '__main__':
app.run(debug=True)our Sqllite3 database name is “main.db” to create db you need open python terminal in current project directory and type these below code.
from app import db
db.create_all()
when this done you can see “main.db” in your project directory
create a folder called “templates” and Paste Below .html codes
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
<title>My ToDo List</title>
</head>
<body>
<div class="content">
<h1>My TodoList</h1>
{% if tasks|length<1 %}
<h4 style="text-align: center">There are no Tasks Please create one below!</h4>
{% else %}
<table class="center">
<tr>
<th>Task</th>
<th>Date Added</th>
<th>Actions</th>
</tr>
{% for task in tasks %}
<tr>
<td>{{ task.content }}</td>
<td>{{ task.date_created.date() }}</td>
<td>
<a href="/delete/{{task.id}}" class="a a2">DELETE</a>
<br>
<a href="/update/{{ task.id }}" class="a a1">UPDATE</a>
</td>
</tr>
{% endfor %}
</table>
{% endif %}
<br>
<div style="text-align:center;">
<form action="/" method="POST">
<input type="text" id="content" name="content">
<input type="submit" class="button" value="Add Task">
</form>
</div>
</div>
</body>
</html>
<style>
.a {
background-color: #4CAF50; /* Green */
font-weight: bold;
border: none;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 8px;
text-decoration: none;
}
.a1 {
background-color: white;
color: black;
border: 2px solid #2fce15 ;
}
.a1:hover {
background-color: #2fce15 ;
color: white;
}
.a2 {
background-color: white;
color: black;
border: 2px solid #d54921;
}
.a2:hover {
background-color: #d54921 ;
color: white;
}
</style>update.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
<title>Update Task</title>
</head>
<body>
<div class="content">
<h1>Update Task</h1>
<br>
<div style="text-align:center;">
<form action="/update/{{ task.id }}" method="POST">
<input type="text" id="content" name="content" value="{{ task.content }}">
<input type="submit" class="button" value="Update">
</form>
</div>
</div>
</body>
</html>then create another folder called “static” under that create a sub-folder called “css” then paste main.css code from below:
body{
font-family:sans-serif;
}
table, th, td {
padding: 10px;
border: 2px solid #2f3a5f;
border-collapse: collapse;
alignment: center;
}
td{
text-align: center;
padding: 5px;
}
.form{
margin-top: 20px;
}
h1{
font-family: Calibri;
text-align: center;
}
table.center {
margin-left: auto;
margin-right: auto;
}
table{
font-family: Calibri;
font-size: 16px;
text-transform: capitalize;
font-weight: 400;
}
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
padding: 10px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
font-size: 16px;
border: 2px solid red;
padding: 12px 18px;
border-radius: 4px;
}To Run Our Code open Terminal and Navigate to this Project directory and type
python app.py
by default your flask application run on http://127.0.0.1:5000/
