Building a Django CRUD Todo App from Scratch

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

1. Setting up the Django Project and App
2. Defining the Model for Todo
3. Creating Views for CRUD Operations
4. Adding URLs for each View
5. Creating HTML Templates for the App
6. Running the Server

---

Step 1: Set Up the Django Project and App

1. Create a Django project named todo_project:

   django-admin startproject todo_project
   cd todo_project

1. Create an app named todo:

   python manage.py startapp todo

1. 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

1. 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

1. 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

1. 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/<todo_id>/', views.update_todo, name='update_todo'),
    path('delete/<todo_id>/', views.delete_todo, name='delete_todo'),
]
</todo_id></todo_id>

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
└── ...

1. Create the Templates Folder Structure:

   mkdir -p todo/templates/todo

1. Create the Templates:

list_todos.html

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

   django-admin startproject todo_project
   cd todo_project

create_todo.html

A form for adding a new task.

   python manage.py startapp todo

update_todo.html

A form for editing an existing task.

   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

---

Step 6: Run the Server

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

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

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

   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

---

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!

The above is the detailed content of Building a Django CRUD Todo App from Scratch. For more information, please follow other related articles on the PHP Chinese website!