🧱 Build a Blog and To-Do List App in Django – Step-by-Step (With Code)
Here's a step-by-step Django tutorial to help you:
✅ Build a Blog App
✅ Build a To-Do List App
✅ Combine both into a single Django project with two separate apps
🧰 Prerequisites
-
Python installed
-
Django installed:
pip install django -
Basic knowledge of Python and HTML
1️⃣ Create the Django Project
django-admin startproject mysite
cd mysite
2️⃣ Create the Blog App
python manage.py startapp blog
➕ Register Blog App in mysite/settings.py
INSTALLED_APPS = [
...
'blog',
]
🧾 blog/models.py
from django.db import models
class Post(models.Model):
title = models.CharField(max_length=200)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.title
🔁 Run Migrations
python manage.py makemigrations
python manage.py migrate
🧾 blog/views.py
from django.shortcuts import render
from .models import Post
def post_list(request):
posts = Post.objects.all().order_by('-created_at')
return render(request, 'blog/post_list.html', {'posts': posts})
🧾 blog/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.post_list, name='post_list'),
]
🧾 mysite/urls.py (Edit)
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include('blog.urls')),
]
🖼️ blog/templates/blog/post_list.html
<!DOCTYPE html>
<html>
<head><title>My Blog</title></head>
<body>
<h1>Blog Posts</h1>
{% for post in posts %}
<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>
<small>{{ post.created_at }}</small><hr>
{% empty %}
<p>No posts yet.</p>
{% endfor %}
</body>
</html>
✅ Test it:
python manage.py runserver
Visit: http://127.0.0.1:8000/blog/
3️⃣ Create the To-Do App
python manage.py startapp todo
➕ Add 'todo' to INSTALLED_APPS
🧾 todo/models.py
from django.db import models
class Task(models.Model):
title = models.CharField(max_length=100)
completed = models.BooleanField(default=False)
def __str__(self):
return self.title
python manage.py makemigrations
python manage.py migrate
🧾 todo/views.py
from django.shortcuts import render, redirect
from .models import Task
def task_list(request):
tasks = Task.objects.all()
return render(request, 'todo/task_list.html', {'tasks': tasks})
def add_task(request):
if request.method == 'POST':
title = request.POST['title']
Task.objects.create(title=title)
return redirect('task_list')
def toggle_task(request, task_id):
task = Task.objects.get(id=task_id)
task.completed = not task.completed
task.save()
return redirect('task_list')
🧾 todo/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.task_list, name='task_list'),
path('add/', views.add_task, name='add_task'),
path('toggle/<int:task_id>/', views.toggle_task, name='toggle_task'),
]
🧾 mysite/urls.py (Add to existing)
path('todo/', include('todo.urls')),
🖼️ todo/templates/todo/task_list.html
<!DOCTYPE html>
<html>
<head><title>To-Do List</title></head>
<body>
<h1>My To-Do List</h1>
<form method="post" action="{% url 'add_task' %}">
{% csrf_token %}
<input type="text" name="title" placeholder="New task">
<button type="submit">Add</button>
</form>
<ul>
{% for task in tasks %}
<li>
<a href="{% url 'toggle_task' task.id %}">
{% if task.completed %}
<s>{{ task.title }}</s>
{% else %}
{{ task.title }}
{% endif %}
</a>
</li>
{% empty %}
<li>No tasks yet!</li>
{% endfor %}
</ul>
</body>
</html>
✅ Test:
Visit http://127.0.0.1:8000/todo/
🧩 4️⃣ Combine Both Apps in One Project
You already did it — both blog and todo are separate apps inside one project, accessible via:
-
http://127.0.0.1:8000/blog/ -
http://127.0.0.1:8000/todo/
Each app:
-
Has its own models, views, templates, and URL routes
-
Can be developed independently
-
Shares the same database and project settings
🎁 Bonus: Add Navigation Links
Add this nav to both templates:
<a href="/blog/">Blog</a> | <a href="/todo/">To-Do</a>
🏁 Conclusion
You’ve built:
-
✅ A full-featured Blog app
-
✅ A functional To-Do List app
-
✅ A combined Django project that includes both
This modular approach mirrors how real-world Django sites are structured — scalable and organized.
No comments:
Post a Comment