Day 42: Project — Building a Simple To-Do List Application with Django

Creating a Django-Based To-Do List App — A Step-by-Step Guide for Beginners

Author: Harshil Chovatiya

Day 42: Project — Building a Simple To-Do List Application with Django | Harshil Chovatiya

Introduction

Welcome to Day 42 of our Python and Django learning journey!

Today, we’re diving into a practical project where we’ll build a simple To-Do List application using Django. This project will consolidate your knowledge from previous days and provide hands-on experience in creating a functional web application.

In this blog, we’ll cover:

Project Overview

• Defining the Project
• Setting Up the Environment

Building the To-Do List Application

• Designing the Application
• Implementing Models
• Creating Views
• Setting Up URLs
• Building Templates

Testing and Debugging

• Running the Development Server
• Testing the Application
• Debugging Common Issues

Building a Simple To-Do List Application with Django | Harshil Chovatiya

Part 1: Project Overview

Defining the Project

For this project, we’ll build a simple To-Do List application. This application will allow users to create, view, and manage their tasks. The features will include:

• Viewing a list of tasks
• Adding new tasks
• Marking tasks as complete
• Deleting tasks

This project will help you understand how to integrate models, views, and templates into a cohesive Django application.

Setting Up the Environment

1. Install Django:

If you haven’t already installed Django, you can do so using pip:

pip install django

2. Create a Django Project:

Start by creating a new Django project using the following command:

django-admin startproject todolist

Navigate into your project directory:

cd todolist

3. Create a Django App:

Inside your project, create a new app called tasks:

python manage.py startapp tasks

4. Add the App to Settings:

Open todolist/settings.py and add 'tasks' to the INSTALLED_APPS list.

INSTALLED_APPS = [     # other apps     'tasks', ]

Part 2: Building the To-Do List Application

Designing the Application

Before diving into coding, it’s important to design your application. For our To-Do List application, we’ll need the following components:

• Model: Represents tasks.
• Views: Handles the logic for displaying and processing data.
• Templates: Defines the HTML structure and presentation of our tasks.

Implementing Models

Models define the structure of our data and interact with the database. For our To-Do List application, we’ll create a Task model to represent tasks.

Create the Task Model:

Open tasks/models.py and define the Task model:

# tasks/models.py
from django.db import models
class Task(models.Model):
    title = models.CharField(max_length=200)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    def __str__(self):
        return self.title

Explanation:

• title: A CharField for the task title.
• completed: A BooleanField to indicate whether the task is completed.
• created_at: A DateTimeField that automatically sets the creation timestamp.

After defining the model, create and apply migrations:

python manage.py makemigrations
python manage.py migrate

Creating Views

Views handle the business logic and interaction between the user and the data. We’ll create views for listing tasks, adding new tasks, marking tasks as complete, and deleting tasks.

Create Views for Task Operations:

Open tasks/views.py and add the following views:

# tasks/views.py
from django.shortcuts import render, get_object_or_404, redirect
from .models import Task
def task_list(request):
    tasks = Task.objects.all()
    return render(request, 'tasks/task_list.html', {'tasks': tasks})
def task_create(request):
    if request.method == 'POST':
        title = request.POST.get('title')
        if title:
            Task.objects.create(title=title)
        return redirect('task_list')
    return render(request, 'tasks/task_form.html')
def task_complete(request, pk):
    task = get_object_or_404(Task, pk=pk)
    task.completed = True
    task.save()
    return redirect('task_list')
def task_delete(request, pk):
    task = get_object_or_404(Task, pk=pk)
    if request.method == 'POST':
        task.delete()
        return redirect('task_list')
    return render(request, 'tasks/task_confirm_delete.html', {'task': task})

Explanation:

• task_list: Displays a list of all tasks.
• task_create: Provides a form to create a new task.
• task_complete: Marks a task as completed.
• task_delete: Deletes a task after confirmation.

Setting Up URLs

URLs route user requests to the appropriate views. Define URL patterns for the tasks application.

Configure URLs:

Create a urls.py file in the tasks directory and add the following code:

# tasks/urls.py
from django.urls import path
from . import views
urlpatterns = [
    path('', views.task_list, name='task_list'),
    path('new/', views.task_create, name='task_create'),
    path('complete/<int:pk>/', views.task_complete, name='task_complete'),
    path('delete/<int:pk>/', views.task_delete, name='task_delete'),
]

Include these URLs in the project’s urls.py file:

# todolist/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls')),
]

Building Templates

Templates define how your data is presented to users. Create templates for each view.

Create Templates:

1. Task List Template:

Create task_list.html in the tasks/templates/tasks directory:

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'tasks/styles.css' %}">
</head>
<body>
    <h1>To-Do List</h1>
    <a href="{% url 'task_create' %}">Add New Task</a>
    <ul>
        {% for task in tasks %}
            <li>
                {% if task.completed %}
                    <strike>{{ task.title }}</strike>
                {% else %}
                    {{ task.title }}
                    <a href="{% url 'task_complete' pk=task.pk %}">Mark as Complete</a>
                {% endif %}
                <a href="{% url 'task_delete' pk=task.pk %}">Delete</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

2.Task Form Template:

Create task_form.html:

<!DOCTYPE html>
<html>
<head>
    <title>Add New Task</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'tasks/styles.css' %}">
</head>
<body>
    <h1>Add New Task</h1>
    <form method="post">
        {% csrf_token %}
        <input type="text" name="title" placeholder="Task Title">
        <button type="submit">Add Task</button>
    </form>
    <a href="{% url 'task_list' %}">Back to List</a>
</body>
</html>

3. Task Confirm Delete Template:

Create task_confirm_delete.html:

<!-- tasks/templates/tasks/task_confirm_delete.html --> 
<!DOCTYPE html>
<html>
<head>
    <title>Confirm Delete</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'tasks/styles.css' %}">
</head>
<body>
    <h1>Are you sure you want to delete "{{ task.title }}"?</h1>
    <form method="post">
        {% csrf_token %}
        <button type="submit">Confirm Delete</button>
    </form>
    <a href="{% url 'task_list' %}">Cancel</a>
</body>
</html>

Part 3: Testing and Debugging

Running the Development Server

To see your application in action, run the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/ in your web browser to interact with your To-Do List application.

Testing the Application

Test all functionalities of your To-Do List application:

• Viewing Tasks: Ensure you can see the list of tasks.
• Adding Tasks: Verify that you can add a new task and see it listed.
• Marking Tasks as Complete: Check that you can mark tasks as complete.
• Deleting Tasks: Confirm that tasks can be deleted and that the list updates accordingly.

Debugging Common Issues

1. Template Not Found: Ensure your templates are placed in the correct directory structure, i.e., tasks/templates/tasks/.
2. URL Routing Issues: Double-check your urls.py files to make sure paths are correctly defined and that they match the view functions.
3. Form Not Submitting: If your form is not submitting, ensure you have the csrf_token included in your form templates and that your views.py handles POST requests properly.
4. Database Errors: If you encounter issues with the database, ensure that migrations have been applied correctly and that your models are properly defined.
5. Page Not Loading: If a page is not loading, check the console for any error messages, and verify that your development server is running.

Conclusion

In this project, you built a simple but functional To-Do List application using Django. This project helped you practice working with models, views, templates, and URLs, as well as handling common operations like creating, updating, and deleting data.

Building projects like this is a great way to solidify your understanding of Django and web development concepts. As you continue learning, consider adding more features to this project, such as user authentication, filtering tasks, or deploying the application to a web server.

Stay tuned!

by Harshil Chovatiya