ToDo webapp using Django

Introduction to the ToDo WebApp Using Django

Building a ToDo webapp using Django is an excellent starter project that demonstrates how to manage data with models, render forms and templates, and handle basic CRUD operations. It provides a practical foundation for understanding the core components of a Django application.

Project Overview

This simple task manager allows users to add, view, update, and delete to-do items. Using Django models for data storage, views for handling requests, and templates for UI, you’ll get hands-on experience building a functional web application.

Step 1: Set Up Your Django Project

django-admin startproject todo_project
cd todo_project
python manage.py startapp todos
# Add 'todos' to INSTALLED_APPS in settings.py

Step 2: Define the Task Model

In todos/models.py, define a simple model to store tasks:

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=255)
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

Then run:

python manage.py makemigrations
python manage.py migrate

Step 3: Register the Model in Admin

Enable data management via the admin interface by updating todos/admin.py:

from django.contrib import admin
from .models import Todo

admin.site.register(Todo)

Step 4: Create Views for CRUD Operations

In todos/views.py, add views to list, add, update, and delete tasks:

from django.shortcuts import render, redirect, get_object_or_404
from .models import Todo

def todo_list(request):
    todos = Todo.objects.all()
    return render(request, 'todos/todo_list.html', {'todos': todos})

def add_todo(request):
    if request.method == 'POST':
        title = request.POST.get('title')
        Todo.objects.create(title=title)
    return redirect('todo_list')

def update_todo(request, todo_id):
    todo = get_object_or_404(Todo, id=todo_id)
    todo.completed = not todo.completed
    todo.save()
    return redirect('todo_list')

def delete_todo(request, todo_id):
    todo = get_object_or_404(Todo, id=todo_id)
    todo.delete()
    return redirect('todo_list')

Step 5: URL Configuration

Connect the views in todos/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.todo_list, name='todo_list'),
    path('add/', views.add_todo, name='add_todo'),
    path('update//', views.update_todo, name='update_todo'),
    path('delete//', views.delete_todo, name='delete_todo'),
]

Include these URLs in the project’s main urls.py.

Step 6: Create the Template

Add todos/templates/todos/todo_list.html:

<form method="post" action="{% url 'add_todo' %}">
  {% csrf_token %}
  <input type="text" name="title" placeholder="New task" required>
  <button type="submit">Add</button>
</form>

<ul>
  {% for todo in todos %}
    <li>
      <span>{{ todo.title }}{% if todo.completed %} (Done){% endif %}</span>
      <a href="{% url 'update_todo' todo.id %}">Toggle</a>
      <a href="{% url 'delete_todo' todo.id %}">Delete</a>
    </li>
  {% endfor %}
</ul>

Step 7: Run the Server and Test

python manage.py runserver

Navigate to http://127.0.0.1:8000/ to test adding, updating, and deleting tasks.

Optional Enhancements

• Add a form with validation using Django Forms.
• Enable user authentication and associate tasks with users.
• Enhance UI with CSS frameworks like Bootstrap.
• Implement AJAX for a smoother user experience.
• Store timestamps for task creation and completion.

Conclusion

The ToDo WebApp Using Django is a practical and straightforward project that helps you learn the essentials of Django: models, views, templates, forms, and URL routing. With this foundation, you can expand your app to include authentication, richer UI, and advanced features as you grow as a Django developer.