Note-taking App using Django
Last Updated :
30 Apr, 2025
In this article, we will explore a note-making app. In this article, we will create a note-making app using Django. We will also use the Django authentication system. Users need to create an account on the web to access the note-making app. After that, users will have access to the note-making app. This means users can create notes, update them with a simple click of a button, and also delete notes with a single click. Additionally, users have the option to log out by clicking on a button.
Note-taking App using Django
Users can create notes, update them with a simple click of a button, and also delete notes with a single click. Additionally, users have the option to log out by clicking on a button.
To install Django follow these steps.
Starting the Project Folder
To start the project use this command
django-admin startproject notes
cd notes
To start the app use this command
python manage.py startapp document
Now add this app to the 'settings.py'
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'document'
]
File Structure
File StructureBuilding a note-taking app is a great way to apply your Django skills. For those looking to gain a comprehensive understanding of Django, the Django Web Development Course offers in-depth knowledge.
Setting up Necessary Files
models.py: This code defines a Django model for a document with fields for title, content, creation date, and modification date. The documents are ordered by their titles.
Python
from django.db import models
class Note(models.Model):
title = models.CharField(max_length=255)
content = models.TextField(blank=True, null=True)
created_at = models.DateTimeField(auto_now_add=True)
modified_at = models.DateTimeField(auto_now=True)
class Meta:
ordering = ('title',)
views.py: Below are the explaiantion of the each function:
- editor Function: Allows authenticated users to create, edit, and save notes. It also displays existing notes. Users must be logged in to access this page.
- delete_document Function: Handles note deletion by taking the docid as a parameter.
- login_page Function: Manages user login and provides error messages for incorrect credentials
- register_page Function: Manages user registration and provides success/error messages.
- custom_logout Function: Handles user logout.
In summary, it's a note-making app with user authentication and registration
Python
from django.shortcuts import render, redirect
from .models import Note
from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
from django.contrib import messages
from django.contrib.auth import login, authenticate
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.contrib.auth import logout
# create editor page
@login_required(login_url='/login/')
def editor(request):
docid = int(request.GET.get('docid', 0))
notes = Note.objects.all()
if request.method == 'POST':
docid = int(request.POST.get('docid', 0))
title = request.POST.get('title')
content = request.POST.get('content', '')
if docid > 0:
note = Note.objects.get(pk=docid)
note.title = title
note.content = content
note.save()
return redirect('/?docid=%i' % docid)
else:
note = Note.objects.create(title=title, content=content)
return redirect('/?docid=%i' % note.id)
if docid > 0:
note = Note.objects.get(pk=docid)
else:
note = ''
context = {
'docid': docid,
'notes': notes,
'note': note
}
return render(request, 'editor.html', context)
# create delete notes page
@login_required(login_url='/login/')
def delete_note(request, docid):
note = Note.objects.get(pk=docid)
note.delete()
return redirect('/?docid=0')
# login page for user
def login_page(request):
if request.method == "POST":
try:
username = request.POST.get('username')
password = request.POST.get('password')
user_obj = User.objects.filter(username=username)
if not user_obj.exists():
messages.error(request, "Username not found")
return redirect('/login/')
user_obj = authenticate(username=username, password=password)
if user_obj:
login(request, user_obj)
return redirect('editor')
messages.error(request, "Wrong Password")
return redirect('/login/')
except Exception as e:
messages.error(request, "Something went wrong")
return redirect('/register/')
return render(request, "login.html")
# register page for user
def register_page(request):
if request.method == "POST":
try:
username = request.POST.get('username')
password = request.POST.get('password')
user_obj = User.objects.filter(username=username)
if user_obj.exists():
messages.error(request, "Username is taken")
return redirect('/register/')
user_obj = User.objects.create(username=username)
user_obj.set_password(password)
user_obj.save()
messages.success(request, "Account created")
return redirect('/login')
except Exception as e:
messages.error(request, "Something went wrong")
return redirect('/register')
return render(request, "register.html")
# logout function
def custom_logout(request):
logout(request)
return redirect('login')
Creating GUI
login.html: This is an HTML template for a login page with a minimalistic design. It includes a form for users to enter their username and password, along with a "Login" button. If the login is successful, a success message is displayed. Users can also navigate to a registration page using a provided link. The styling is done using Bootstrap and Font Awesome.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>Job Portal</title>
</head>
<style>
.text{
color: green;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
</style>
<body><br><br><br><br>
<br><br>
<div class="container mt-4 bg-white col-md-3 card shadow p-3 " id="log">
<div class="login-form">
{% if messages %}
{% for message in messages %}
<div class="alert alert-success {{ message.tags }} mt-4" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
<form action="" method="post">
{% csrf_token %}
<h3 class="text text-center"> GeeksforGeeks </h3>
<h4 class="text-center" style="font-family: 'Times New Roman', Times, serif;"> Login </h4>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required
style="background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 10px;">
</div>
<div class="form-group mt-2">
<input type="password" class="form-control" name="password" placeholder="Password" required
style="background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 10px;">
</div>
<div class="form-group mt-2">
<button class="btn btn-success btn-block" style="margin-left: 138px;">Login ????</button>
</div>
<br>
</form>
<p class="text-center" style="color: #555;"><a href="{% url 'register' %}" style="color: #007bff;">Create an
Account.➡️</a></p>
</div>
</div>
</body>
</html>
register.html: This HTML template is designed for a registration page with a clean and simple layout. Users can input their username and password, and upon successful registration, a success message is shown. The page features styling using Bootstrap and Font Awesome icons, providing a visually appealing user experience.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<title>Job Portal</title>
</head>
<body>
<style>
.text{
color: green;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
}
</style>
<body>
<br> <br><br><br><br><br>
<div class="container mt-4 bg-white mx-auto col-md-3 card shadow p-3">
<div class="login-form">
{% if messages %}
{% for message in messages %}
<div class="alert alert-success {{ message.tags }}" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
<form action="" method="post">
{% csrf_token %}
<h3 class="text text-center"> GeeksforGeeks </h3>
<h4 class="text-center" style="font-family: 'Times New Roman', Times, serif;"> Register </h4>
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required>
</div>
<div class="form-group mt-2">
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="form-group mt-2">
<button class="btn btn-success btn-block" style="margin-left: 117px;">Register ????</button>
</div>
<br>
</form>
<p class="text-center"><a href="{% url 'login' %}">Log In ➡️</a></p>
</div>
</div>
</body>
</html>
editor.html: This HTML template is for a web page with a header for creating and managing notes. It uses the Bulma CSS framework for styling and features a navigation bar with options to create a new document and log out. The main content area allows users to enter a title and content for their notes and provides options to save and delete them. The page uses a custom font style for a unique look and feel.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notes</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<style>
.text{
color: green;
font-weight: bold;
margin-top: -10%;
margin-left: 200px;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
}
</style>
<body>
<nav class="navbar is-white" > <!-- Changed header color to primary -->
<div class="navbar-brand">
<a href="{% url 'editor' %}" class="navbar-item has-text-black ok" style="font-size: 25px; font-weight:bold; font-family:'Times New Roman', Times, serif; ">Notes</a>
<a href="{% url 'editor' %}?docid=0" class="button is-primary" style=" font-weight:bold; font-family:'Times New Roman', Times, serif; margin-top:5%; margin-right:10px">New Note</a>
<a href="{% url 'logout' %}" class="button is-danger" style=" font-weight:bold; font-family:'Times New Roman', Times, serif; margin-top:5%">Logout</a>
</div>
<div class="navbar-menu">
</div>
</nav>
<hr>
<section class="section">
<div class="columns">
<div class="column is-2">
<aside class="menu">
<p class="menu-label" style="font-size: 20px; font-weight:bold; font-family:'Times New Roman', Times, serif">Notes</p>
<ul class="menu-list">
{% for doc in notes %}
<li>
<a href="{% url 'editor' %}?docid={{ doc.id }}">{{ doc.title }}</a>
</li>
{% endfor %}
</ul>
</aside>
</div>
<div class="column is-5 mt-3 pt-4" >
<h3 class="text text-center"> GeeksforGeeks </h3>
<br>
<div class="box" >
<form method="post" action="{% url 'editor' %}">
{% csrf_token %}
<input type="hidden" name="docid" value="{{ docid }}">
<div class="field">
<label class="label" style="font-size: 22px; font-family:'Times New Roman', Times, serif">Title</label>
<div class="control">
<input type="text" class="input" name="title" placeholder="Title" {% if note %} value="{{ note.title }}"{% endif %}>
</div>
</div>
<div class="field">
<label class="label" style="font-size: 20px; font-family:'Times New Roman', Times, serif">Content</label>
<div class="control">
<textarea class="textarea" name="content" placeholder="Content">{% if note %}{{ note.content }}{% endif %}</textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Save</button>
</div>
{% if note %}
<div class="control">
<a href="{% url 'delete_note' note.id %}" class="button is-danger">Delete</a>
</div>
{% endif %}
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
admin.py :Here we are registering the models in the admin file.
Python
from django.contrib import admin
from .models import Note
admin.site.register(Note)
urls.py: This Django code configures URL patterns, linking specific URLs to corresponding views or functions. It handles user authentication, custom logout, an editor page, and document deletion. The "admin/" URL is reserved for Django's admin site. Each pattern has a symbolic name for easy reference and URL generation.
Python
from django.contrib import admin
from django.urls import path
from home.views import *
urlpatterns = [
path('login/' , login_page, name='login'),
path('register/', register_page, name='register'),
path('custom_logout/' ,custom_logout, name='logout'),
path('', editor, name='editor'),
path('delete_note/<int:docid>/', delete_note, name='delete_note'),
path('admin/', admin.site.urls),
]
Deployement of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output
Similar Reads
Realtime chat app using Django Chat Room has been the most basic step toward creating real-time and live projects. The chat page that we will create will be a simple HTML boilerplate with a simple h1 text with the name of the current user and a link to log out to the user who is just logged in. You may need to comment on the line
11 min read
Quiz Application using Django In this article, we will create the Django Quiz Application generally the Django Quiz App is a versatile and interactive web application designed to revolutionize learning and assessment. Created to address the need for engaging and adaptable online quizzes, it offers educators, businesses, and indi
6 min read
Create Task Management System using Django Task management systems are essential tools for individuals and organizations to organize, track, and prioritize tasks efficiently. In this article, we'll explore how to build a task management system using django in Python.Task Management System using DjangoBelow, are the implementations of the Tas
15+ min read
Python Compiler Using Django In this article, we will explore the creation of a Python compiler using Django. Users can input their Python code into the designated code area, and upon clicking the "Run" button, the compiler will generate the corresponding output. What is Python Compiler?A Python compiler is a program or tool th
4 min read
Create Social Media Feed App using Django In this tutorial, we'll build a basic social media feed using Django, the Python web framework. A social media feed is a core component of platforms like Facebook, Instagram, and Twitter, allowing users to view and interact with posts, comments, and likes in real-time. By the end of this tutorial, y
13 min read
Online Survey Tool using Django In this article, we'll help you make an Online Survey Tool using Django. In our tool, only admin users can create forms to keep things in control and ensure quality. But, we've also made it so that authenticated users can fill out surveys. If you're not logged in, you can't submit a survey anonymous
6 min read
Navigation in Django Navigation refers to how users move through different sections of a web application. In Django, navigation is handled by combining URLs, views, and templates. By defining URL patterns, associating them with views, and linking them in templates, we can create a seamless experience for users as they m
4 min read
Portfolio Showcase using Django In this article, we will create a Portfolio Showcase using Django. For creating the portfolio showcase, we will use HTML and CSS for the frontend. Additionally, in this article, we will demonstrate how to create a form in which you need to submit some details. When you fill out the form and submit i
8 min read
Building APIs using FastAPI with Django Combining FastAPI and Django can leverage the strengths of both frameworks: FastAPI's high performance for building APIs and Django's powerful ORM and admin interface. In this guide, we'll outline how to integrate FastAPI into a Django project to build high-performance APIs.In this article, we will
2 min read
Setting Up a Virtual Environment in Django Setting up a virtual environment in Django is essential for isolating your project's dependencies and ensuring consistent behavior across different environments. A virtual environment allows you to install packages locally without affecting the global Python installation. Here's how to set up a virt
2 min read