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