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
Python Tutorial | Learn Python Programming Language
Python Tutorial – Python is one of the most popular programming languages. It’s simple to use, packed with features and supported by a wide range of libraries and frameworks. Its clean syntax makes it beginner-friendly. Python is: A high-level language, used in web development, data science, automat
10 min read
Python Interview Questions and Answers
Python is the most used language in top companies such as Intel, IBM, NASA, Pixar, Netflix, Facebook, JP Morgan Chase, Spotify and many more because of its simplicity and powerful libraries. To crack their Online Assessment and Interview Rounds as a Python developer, we need to master important Pyth
15+ min read
Non-linear Components
In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
Python OOPs Concepts
Object Oriented Programming is a fundamental concept in Python, empowering developers to build modular, maintainable, and scalable applications. By understanding the core OOP principles (classes, objects, inheritance, encapsulation, polymorphism, and abstraction), programmers can leverage the full p
11 min read
Python Projects - Beginner to Advanced
Python is one of the most popular programming languages due to its simplicity, versatility, and supportive community. Whether you’re a beginner eager to learn the basics or an experienced programmer looking to challenge your skills, there are countless Python projects to help you grow. Here’s a list
10 min read
Python Exercise with Practice Questions and Solutions
Python Exercise for Beginner: Practice makes perfect in everything, and this is especially true when learning Python. If you're a beginner, regularly practicing Python exercises will build your confidence and sharpen your skills. To help you improve, try these Python exercises with solutions to test
9 min read
Class Diagram | Unified Modeling Language (UML)
A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
Python Programs
Practice with Python program examples is always a good choice to scale up your logical understanding and programming skills and this article will provide you with the best sets of Python code examples. The below Python section contains a wide collection of Python programming examples. These Python c
11 min read
Python Data Types
Python Data types are the classification or categorization of data items. It represents the kind of value that tells what operations can be performed on a particular data. Since everything is an object in Python programming, Python data types are classes and variables are instances (objects) of thes
10 min read
Enumerate() in Python
enumerate() function adds a counter to each item in a list or other iterable. It turns the iterable into something we can loop through, where each item comes with its number (starting from 0 by default). We can also turn it into a list of (number, item) pairs using list(). Let's look at a simple exa
3 min read