Building a Simple Python-Django CRUD Application from Scratch

Aadarsh Nagrath - Oct 27 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode
  1. Create an app named todo:
   python manage.py startapp todo
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode
  1. Register the App in todo_project/settings.py: Open settings.py and add 'todo' to INSTALLED_APPS:
   INSTALLED_APPS = [
       # Other installed apps
       'todo',
   ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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
Enter fullscreen mode Exit fullscreen mode

.


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')
Enter fullscreen mode Exit fullscreen mode

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'),
]
Enter fullscreen mode Exit fullscreen mode

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')),
]
Enter fullscreen mode Exit fullscreen mode

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
└── ...
Enter fullscreen mode Exit fullscreen mode
  1. Create the Templates Folder Structure:
   mkdir -p todo/templates/todo
Enter fullscreen mode Exit fullscreen mode
  1. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Step 6: Run the Server

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

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

.


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!

. . . . . . . . . . . . . .