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
Language Learning App using Django
In this article, we will guide you through creating a language-learning application using Django in Python. Language Learning App Using DjangoBelow, is the step-by-step Implementation of a language learning app using Django in Python: Starting the Project FolderTo start the project use this command
15 min read
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
Weather app using Django | Python
Our task is to create a Weather app using Django that lets users enter a city name and view current weather details like temperature, humidity, and pressure. We will build this by setting up a Django project, creating a view to fetch data from the OpenWeatherMap API, and designing a simple template
2 min read
Job Board using Django
In this article, we will guide you through creating a Job Board using Django in Python. Job Board Using DjangoBelow, is the step-by-step Implementation of a language learning app using Django in Python: Starting the Project FolderTo start the project use this command django-admin startproject Job_Bo
3 min read
Python | Django News App
Django is a high-level framework which is written in Python which allows us to create server-side web applications. In this article, we will see how to create a News application using Django. We will be using News Api and fetch all the headline news from the api. Read more about the api here news ap
2 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
Task Pomodoro Timer using Django
This article explores the development of a Task Pomodoro Timer using Django. Users can set, stop, pause, and delete time intervals for tasks. To engage these features, signing up and logging in are mandatory. The timer offers customization options, allowing users to set seconds, hours, minutes, and
12 min read
Tip Calculator Project Using Django
In this article, we will guide you through the process of creating a Tip Calculator Project using Django. This interactive project requires users to input the bill amount, the desired percentage for the tip, and the number of people splitting the bill. The application will then compute and display t
6 min read
Blog Post Recommendation using Django
In this article, we will guide you through the creation of a blog post recommendation system using Django. Our article covers the integration of a user-friendly login system with a registration form, ensuring a seamless experience for your website visitors. Additionally, we have implemented a sophis
10 min read