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
: Opensettings.py
and add'todo'
toINSTALLED_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!