Learn how to create a Notes App using Django with this easy-to-follow guide. Perfect for beginners, including full code, file structure, and Bootstrap styling.
Building a Notes App with Django is a great way to enhance your web development skills. Whether you're a beginner looking to learn or someone who wants to create a simple, functional application, this guide will walk you through every step. You'll start by setting up your Django environment, and then move on to creating models, views, and templates. By the end, you'll have a fully working Notes App, complete with a user-friendly interface styled with Bootstrap.
Prerequisites
Before we dive in, make sure you have a basic understanding of Django and web development. You'll need the following tools and libraries installed on your machine:
- Python (version 3.6 or higher)
- Django (version 3.0 or higher)
- A text editor or IDE (such as VS Code or PyCharm)
- Basic knowledge of HTML and CSS
Setting Up the Development Environment
Installing Django
Before starting, ensure you have Python installed. You can install Django using pip:
pip install django
Creating a new Django project
Create a new Django project using the following command:
django-admin startproject notes_project
Setting up the project structure
Navigate into your project directory:
cd notes_project
Create a Django App
Create a new app within your project:
python manage.py startapp notes
Adding the app to the project
In notes_project/settings.py
, add notes
to the INSTALLED_APPS
list:
INSTALLED_APPS = [ 'notes', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ]
Creating the Notes App
Set Up the Models
In notes/models.py
, define a simple model for your notes:
from django.db import models from django.utils import timezone class Note(models.Model): title = models.CharField(max_length=100) content = models.TextField() created_at = models.DateTimeField(default=timezone.now) def __str__(self): return self.title
Apply Migrations:
After defining the model, apply migrations to create the corresponding database tables:
python manage.py makemigrations python manage.py migrate
Create Forms
In notes, create a new file named forms.py for the notes model and add the following function:
from django import forms from .models import Note class NoteForm(forms.ModelForm): class Meta: model = Note fields = ['title', 'content']
Create Views
In notes/views.py
, create views for listing, creating, updating, and deleting notes:
from django.shortcuts import render, get_object_or_404, redirect from .models import Note from .forms import NoteForm def note_list(request): notes = Note.objects.all() return render(request, 'note_list.html', {'notes': notes}) def note_detail(request, pk): note = get_object_or_404(Note, pk=pk) return render(request, 'note_detail.html', {'note': note}) def note_create(request): if request.method == 'POST': form = NoteForm(request.POST) if form.is_valid(): form.save() return redirect('note_list') else: form = NoteForm() return render(request, 'note_form.html', {'form': form}) def note_update(request, pk): note = get_object_or_404(Note, pk=pk) if request.method == 'POST': form = NoteForm(request.POST, instance=note) if form.is_valid(): form.save() return redirect('note_list') else: form = NoteForm(instance=note) return render(request, 'note_form.html', {'form': form}) def note_delete(request, pk): note = get_object_or_404(Note, pk=pk) if request.method == 'POST': note.delete() return redirect('note_list') return render(request, 'note_confirm_delete.html', {'note': note})
Set Up URL Routing
Add a URL pattern for your view. In notes/urls.py (create this file if it doesn't exist), add:
from django.urls import path from . import views urlpatterns = [ path('', views.note_list, name='note_list'), path('note/<int:pk>/', views.note_detail, name='note_detail'), path('note/new/', views.note_create, name='note_create'), path('note/<int:pk>/edit/', views.note_update, name='note_update'), path('note/<int:pk>/delete/', views.note_delete, name='note_delete'), ]
Also, include these URLs in the main urls.py of your project (notes_project/urls.py
):
from django.contrib import admin from django.urls import include, path urlpatterns = [ path('admin/', admin.site.urls), path('', include('notes.urls')), ]
Create Templates
Create a templates directory within the notes app and then create base.html
, note_list.html
, note_detail.html
, note_confirm_delete.html
and todo_form.html
inside this directory.
Base Template (base.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Notes App</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="{% url 'note_list' %}">Notes App</a> </div> </nav> <div class="container"> {% block content %} {% endblock %} </div> </body> </html>
Note List Template (note_list.html):
{% extends 'base.html' %} {% block content %} <div class="container mt-5"> <h1 class="mb-4">Notes</h1> <a href="{% url 'note_create' %}" class="btn btn-primary mb-3">Create New Note</a> <ul class="list-group"> {% for note in notes %} <li class="list-group-item"> <a href="{% url 'note_detail' note.pk %}" class="text-decoration-none">{{ note.title }}</a> </li> {% endfor %} </ul> </div> {% endblock %}
Customize Your Forms
To easily apply Bootstrap classes to Django forms, you can use a custom template filter to add classes to form fields.
Create a Template Filter:
In your app directory, create a templatetags folder if it doesn't exist, and inside it, create a file called form_tags.py.
notes/templatetags/form_tags.py
:
from django import template register = template.Library() @register.filter(name='add_class') def add_class(field, css_class): return field.as_widget(attrs={"class": css_class})
Load and Use the Filter in Templates:
In your note_form.html
, load the filter at the top of the file:
{% load form_tags %}
Then use it like this:
{{ form.title|add_class:"form-control" }}
Note Form Template (note_form.html):
{% extends 'base.html' %} {% load form_tags %} {% block content %} <div class="container mt-5"> <h1>{% if form.instance.pk %}Update Note{% else %}Create Note{% endif %}</h1> <form method="post" class="mt-4"> {% csrf_token %} <div class="mb-3"> {{ form.title.label_tag }}<br> {{ form.title|add_class:"form-control" }} </div> <div class="mb-3"> {{ form.content.label_tag }}<br> {{ form.content|add_class:"form-control" }} </div> <button type="submit" class="btn btn-success">Save</button> <a href="{% url 'note_list' %}" class="btn btn-secondary">Cancel</a> </form> </div> {% endblock %}
Note Detail Template (note_detail.html):
{% extends 'base.html' %} {% block content %} <div class="container mt-5"> <h1>{{ note.title }}</h1> <pre class="mt-4">{{ note.content }}</pre> <div class="mt-3"> <a href="{% url 'note_update' note.pk %}" class="btn btn-warning">Edit</a> <a href="{% url 'note_delete' note.pk %}" class="btn btn-danger">Delete</a> </div> </div> {% endblock %}
Note Delete Confirmation Template (note_confirm_delete.html):
{% extends 'base.html' %} {% block content %} <div class="container mt-5"> <h1>Delete Note</h1> <p class="mt-4">Are you sure you want to delete "{{ note.title }}"?</p> <form method="post"> {% csrf_token %} <button type="submit" class="btn btn-danger">Confirm</button> <a href="{% url 'note_list' %}" class="btn btn-secondary">Cancel</a> </form> </div> {% endblock %}
Run Your App
Start the Django Development Server:
python manage.py runserver
Access Your App:
Visit http://127.0.0.1:8000/ in your web browser to see your Notes app in action.
Full Notes App Project Structure
notes_project/ │ ├── notes_project/ │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ ├── wsgi.py │ ├── asgi.py │ ├── notes/ │ ├── migrations/ │ │ ├── __init__.py │ │ ├── 0001_initial.py │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── forms.py │ ├── models.py │ ├── tests.py │ ├── urls.py │ ├── views.py │ ├── templatetags/ │ │ ├── __init__.py │ │ ├── form_tags.py │ ├── templates/ │ ├── base.html │ ├── note_list.html │ ├── note_detail.html │ ├── note_form.html │ ├── note_confirm_delete.html │ ├── db.sqlite3 ├── manage.py
Conclusion
You've successfully created a Notes App using Django. This project not only helps you understand the core concepts of Django but also gives you hands-on experience in building a practical application. From setting up models to adding Bootstrap for styling, you've covered all the essential steps. You can now expand this app further, add new features, or even deploy it online for others to use.
That’s a wrap!
I hope you enjoyed this article
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊