Open In App

Note-taking App using Django

Last Updated : 18 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

File Structure

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.

Python3 
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

Python3 
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/bootstrap@5.0.2/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/bootstrap@5.0.2/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/bulma@0.9.0/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.

Python3 
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.

Python3 
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





Like Article
Suggest improvement
Next
Language Learning App using Django
Share your thoughts in the comments

Similar Reads

Build Calculator App Using Django
Create a Counter App Using React, Tailwind and Django Framework
Language Learning App using Django
Online Auction System Using Django
How to Add Cart in a Web Page using Django?
Blogging Platform using Django
E-commerce Product Catalog using Django
User Authentication System using Django
Image Gallery GUI using Django
Download button to download data stored in the database using Django
author
prathamsahani0368
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox