Creating a Django Todo app involves several steps, including setting up the Django project, creating models for the tasks, setting up views and templates, and configuring the database. Here's a step-by-step guide to help you create a simple Todo app using Django:
Step 1: Install Django
Make sure you have Python installed on your system. You can then install Django using pip:
pip install django
Step 2: Create a Django Project and Todo App
Create a new Django project and a Todo app within that project:
django-admin startproject todo_project
cd todo_project
python manage.py startapp todo_app
Step 3: Define the Model
In the models.py file inside the todo_app folder, define the Todo model:
from django.db import models
class Todo(models.Model):
title = models.CharField(max_length=200)
description = models.TextField()
completed = models.BooleanField(default=False)
def __str__(self):
return self.title
Step 4: Configure the Database
In the settings.py file of the todo_project, configure the database settings. By default, Django uses SQLite, which is perfect for development:
# settings.py
INSTALLED_APPS = [
# ...
'todo_app',
# ...
]
# ...
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
Step 5: Create the Database Tables
Run the following commands to create the necessary database tables:
python manage.py makemigrations
python manage.py migrate
Step 6: Create Views and Templates
In the views.py file inside the todo_app folder, define views for listing, adding, and completing tasks:
from django.shortcuts import render, redirect
from .models import Todo
def todo_list(request):
todos = Todo.objects.all()
return render(request, 'todo_list.html', {'todos': todos})
def add_todo(request):
if request.method == 'POST':
title = request.POST['title']
description = request.POST['description']
Todo.objects.create(title=title, description=description)
return redirect('todo_list')
return render(request, 'add_todo.html')
def complete_todo(request, todo_id):
todo = Todo.objects.get(id=todo_id)
todo.completed = True
todo.save()
return redirect('todo_list')
Step 7: Create Templates
Create two HTML templates inside the templates folder:
1. todo_list.html:
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<ul>
{% for todo in todos %}
<li>
{{ todo.title }} - {{ todo.description }}
{% if not todo.completed %}
<a href="{% url 'complete_todo' todo.id %}">Complete</a>
{% else %}
<span>Completed</span>
{% endif %}
</li>
{% endfor %}
</ul>
<a href="{% url 'add_todo' %}">Add Todo</a>
</body>
</html>
2. add_todo.html:
<!DOCTYPE html>
<html>
<head>
<title>Add Todo</title>
</head>
<body>
<h1>Add Todo</h1>
<form method="post">
{% csrf_token %}
<label for="title">Title:</label>
<input type="text" name="title" required>
<br>
<label for="description">Description:</label>
<textarea name="description" required></textarea>
<br>
<button type="submit">Add</button>
</form>
<a href="{% url 'todo_list' %}">Back to Todo List</a>
</body>
</html>
Step 8: Configure URLs
In the urls.py file of the todo_app folder, define the URLs for the views:
from django.urls import path
from . import views
urlpatterns = [
path('', views.todo_list, name='todo_list'),
path('add/', views.add_todo, name='add_todo'),
path('complete/<int:todo_id>/', views.complete_todo, name='complete_todo'),
]
Step 9: Run the Development Server
Start the Django development server:
python manage.py runserver
Now you can access your Todo app by visiting http://127.0.0.1:8000/ in your web browser. You should see the Todo list with the option to add new tasks and mark them as completed.
Comments