Create Notes App Using Django: Simple Step-by-Step Guide

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.

Read AlsoCrafting a Responsive Product Showcase with HTML, CSS, and Open Props

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 😊