Aadarsh Nagrath

Posted on Oct 27

Building a Django CRUD Todo App from Scratch

#python #django #webdev #tutorial

I believe the best way to learn full-stack dev is to create a CRUD app in that language with simple front-back/end and a db connection.
So this guide will walk you through creating a simple CRUD (Create, Read, Update, Delete) Todo application using Django. We’ll set up the project, create an app, and organize everything in Django’s recommended directory structure.

MY Github, Twitter

Prerequisites

Before we start, ensure you have:

Python installed (preferably version 3.6+)
Django installed (install using pip install django if you haven't yet)

Steps Overview

Setting up the Django Project and App
Defining the Model for Todo
Creating Views for CRUD Operations
Adding URLs for each View
Creating HTML Templates for the App
Running the Server

Step 1: Set Up the Django Project and App

Create a Django project named todo_project:

   django-admin startproject todo_project
   cd todo_project

Create an app named todo:

   python manage.py startapp todo

Directory Structure at This Point:

Your folder should look like this:

   todo_project/
   ├── manage.py
   ├── todo/                  # App directory created
   │   ├── migrations/
   │   ├── __init__.py
   │   ├── admin.py
   │   ├── apps.py
   │   ├── models.py
   │   ├── tests.py
   │   ├── views.py
   └── todo_project/
       ├── __init__.py
       ├── asgi.py
       ├── settings.py
       ├── urls.py
       ├── wsgi.py

Register the App in todo_project/settings.py: Open settings.py and add 'todo' to INSTALLED_APPS:

   INSTALLED_APPS = [
       # Other installed apps
       'todo',
   ]

Step 2: Define the Todo Model

Define the Todo Model in todo/models.py:

Add the following code to create a model with fields for task (description) and completed (status).

   from django.db import models

   class Todo(models.Model):
       task = models.CharField(max_length=200)
       completed = models.BooleanField(default=False)

       def __str__(self):
           return self.task

Apply Migrations:

After defining the model, run these commands to create the database tables for this model:

   python manage.py makemigrations
   python manage.py migrate

Step 3: Create Views for CRUD Operations

Define views for creating, listing, updating, and deleting todos in todo/views.py:

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

# Create a new Todo
def create_todo(request):
    if request.method == 'POST':
        task = request.POST['task']
        Todo.objects.create(task=task)
        return redirect('list_todos')
    return render(request, 'todo/create_todo.html')

# List all Todos
def list_todos(request):
    todos = Todo.objects.all()
    return render(request, 'todo/list_todos.html', {'todos': todos})

# Update a Todo
def update_todo(request, todo_id):
    todo = Todo.objects.get(id=todo_id)
    if request.method == 'POST':
        todo.task = request.POST['task']
        todo.completed = 'completed' in request.POST
        todo.save()
        return redirect('list_todos')
    return render(request, 'todo/update_todo.html', {'todo': todo})

# Delete a Todo
def delete_todo(request, todo_id):
    todo = Todo.objects.get(id=todo_id)
    todo.delete()
    return redirect('list_todos')

Step 4: Add URL Patterns

Define the URLs for each view in todo/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.list_todos, name='list_todos'),
    path('create/', views.create_todo, name='create_todo'),
    path('update/<int:todo_id>/', views.update_todo, name='update_todo'),
    path('delete/<int:todo_id>/', views.delete_todo, name='delete_todo'),
]

In the main urls.py file, include the app’s URLs:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('todo.urls')),
]

Step 5: Create HTML Templates

Now, create HTML templates inside the templates directory within the todo app. Follow this structure:

todo/
├── migrations/
├── templates/
│   └── todo/
│       ├── list_todos.html
│       ├── create_todo.html
│       └── update_todo.html
├── models.py
├── views.py
└── ...

Create the Templates Folder Structure:

   mkdir -p todo/templates/todo

Create the Templates:

`list_todos.html`

Displays a list of tasks and provides links to add, edit, or delete tasks.

<h1>Todo List</h1>
<a href="{% url 'create_todo' %}">Add a new task</a>
<ul>
  {% for todo in todos %}
    <li>
      {{ todo.task }} - {% if todo.completed %}Completed{% else %}Not completed{% endif %}
      <a href="{% url 'update_todo' todo.id %}">Edit</a>
      <a href="{% url 'delete_todo' todo.id %}">Delete</a>
    </li>
  {% endfor %}
</ul>

`create_todo.html`

A form for adding a new task.

<h1>Add Todo</h1>
<form method="POST">
    {% csrf_token %}
    <input type="text" name="task" placeholder="Enter your task">
    <button type="submit">Add Task</button>
</form>
<a href="{% url 'list_todos' %}">Back to list</a>

`update_todo.html`

A form for editing an existing task.

<h1>Update Todo</h1>
<form method="POST">
    {% csrf_token %}
    <input type="text" name="task" value="{{ todo.task }}">
    <label for="completed">Completed</label>
    <input type="checkbox" name="completed" {% if todo.completed %}checked{% endif %}>
    <button type="submit">Update</button>
</form>
<a href="{% url 'list_todos' %}">Back to list</a>

Step 6: Run the Server

Now that everything is set up, run the Django development server to test the app:

python manage.py runserver

Visit http://127.0.0.1:8000/ in your browser. You should see the Todo list and be able to create, update, and delete tasks.

Final Directory Structure

todo_project/
├── manage.py
├── todo/
│   ├── migrations/
│   ├── templates/
│   │   └── todo/
│   │       ├── list_todos.html
│   │       ├── create_todo.html
│   │       └── update_todo.html
│   ├── models.py
│   ├── views.py
│   └── urls.py
└── todo_project/
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

And that’s it! You’ve successfully created a Django Todo app with a CRUD interface. This structure is scalable, and you can now add additional features or style the app with CSS. Happy coding!

DEV Community