Full Stack Python with a To-Do List Case Study
Full stack development is the ability to build applications from front-end to back-end. In this tutorial, we will build a To-Do List application using Python for the back-end, SQLite as the database, and HTML/CSS/JavaScript for the front-end.
Requirements
- Python 3.x
- Flask (framework for the back-end)
- SQLite (lightweight database bundled with Python)
- Bootstrap (for styling the front-end)
Step 1: Project Setup
Create the Project Folder
mkdir fullstack_todolist
cd fullstack_todolist
Create a Virtual Environment
python -m venv venv
source venv/bin/activate # (Use venv\Scripts\activate for Windows)
Install Flask
pip install flask
Project Folder Structure
fullstack_todolist/
|-- app/
|-- static/
|-- templates/
|-- __init__.py
|-- routes.py
|-- models.py
|-- main.py
|-- requirements.txt
Step 2: Building the Back-End with Flask
File: app/__init__.py
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todolist.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
from app import routes
File: app/models.py
from app import db
class Task(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
completed = db.Column(db.Boolean, default=False)
def init_db():
db.create_all()
File: app/routes.py
from flask import render_template, request, redirect, url_for
from app import app, db
from app.models import Task
@app.route('/')
def index():
tasks = Task.query.all()
return render_template('index.html', tasks=tasks)
@app.route('/add', methods=['POST'])
def add_task():
title = request.form['title']
new_task = Task(title=title)
db.session.add(new_task)
db.session.commit()
return redirect(url_for('index'))
@app.route('/delete/<int:task_id>')
def delete_task(task_id):
task = Task.query.get(task_id)
db.session.delete(task)
db.session.commit()
return redirect(url_for('index'))
@app.route('/complete/<int:task_id>')
def complete_task(task_id):
task = Task.query.get(task_id)
task.completed = not task.completed
db.session.commit()
return redirect(url_for('index'))
File: main.py
from app import app, db
from app.models import init_db
if __name__ == '__main__':
init_db()
app.run(debug=True)
Step 3: Building the Front-End
File: app/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>To-Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">To-Do List</h1>
<form action="/add" method="POST" class="d-flex my-3">
<input type="text" name="title" class="form-control" placeholder="Add a new task..." required>
<button type="submit" class="btn btn-primary ms-2">Add</button>
</form>
<ul class="list-group">
{% for task in tasks %}
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="{{ 'text-decoration-line-through' if task.completed else '' }}">{{ task.title }}</span>
<div>
<a href="/complete/{{ task.id }}" class="btn btn-success btn-sm">{{ 'Undo' if task.completed else 'Complete' }}</a>
<a href="/delete/{{ task.id }}" class="btn btn-danger btn-sm">Delete</a>
</div>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>
Step 4: Running the Application
Run the Flask server:
python main.py
Open your browser and navigate to http://127.0.0.1:5000.
Step 5: Enhancing the Project
Add Features
Filter tasks by completed/incomplete.
Validate form input.
Add notifications using JavaScript.
Deployment
Use platforms like Heroku or Render to deploy your application.
Hope this is helpful, and I apologize if there are any inaccuracies in the information provided.
Comments
Post a Comment