In this Python Django tutorial, we will learn, How to create a Notes Taking Application in Django.
It is a CRUD (Create, Read, Update, Delete) application. We will make a list of documents to edit, delete, and add Notes. These notes will be stored in the default database dbsqlite3 where we can view our list of Notes.
First, understand what are CRUD operations in Django.
CRUD can be best explained as an approach to building a Django web application which we are going to build today. CRUD means performing Create, Retrieve, Update, and Delete operations on a table in a database. Let’s discuss what CRUD means.
- Create – We create new data or entries in tables in the database.
- Read – Read, view, or retrieve the data of the existing entries of the table.
- Update – Edit or update the existing data in the tables.
- Delete – To delete and remove data and entries from the table.
Create a Notes taking app in Django
Here we will create a Note-taking app using Python Django.
- First, we will set up a basic Django project and configure it.
- Creating templates, Models, and Forms.
- View our created Notes in the Database
- Create, Edit, and Delete Notes in our application.
We will follow the below steps to create this application.
Step 1: Create a Django Project
To build this Django project, firstly, we will set up a virtual environment and later activate it in our project directory.
To create a virtual environment, create a folder(if not created). Then open the terminal or command prompt(as administrator) and run the below command which will create a virtual environment name venv.
python -m venv venvOnce the virtual environment is created, run the below command to activate the virtual environment.
venv\Scripts\activateNow, we will install Django in our virtual environment using pip command.
pip install djangoSetup a Django Project in Python
After creating the virtual environment we will set up our Django project and an app within the project.
Creating a Project
To create a Django Project in Python, run the following command.
> django-admin startproject notetakerUsing this command, we have created a Django project named notetaker. This will create default files and a directory in the project files.
Moving to the project directory
Now we will create an app in our project directory. So, to move inside the project directory we will run the following command in the terminal.
cd notetakerCreating an App
We will create a Django app named HtmlEditor within our project directory using the below command.
python manage.py startapp noteappNow, we have set up our project notetaker and application note app as well. You will the default files and directories in the app and project.
Open the Django Project in the VS Code
Start Visual Studio Code > Under Get Started, click on the Open Folder option > Select the notetaker directory.
Register the app in the settings.py file
To register the app in the settings of our project go to the settings.py file and under the INSTALLED APPS section register the app noteapp.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'noteapp',
]Creating models in the app
In this step, we will create models in our app note app models.py file. Follow the below code to create models.
from django.db import models
class Document(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',)
Make migrations
Every time we create models or make any changes in models we need to run migrations. To make migrations run the below commands.
python manage.py makemigrationsNow the migrations are in the staging area to migrate them run the below command.
python manage.py migrateCreate Superuser
To access our database through the admin panel we will create the super user. To create a superuser run the following commands in the terminal.
python manage.py createsuperuserTo use the database we have just created in the admin panel we will import those models into the admin.py file
from django.contrib import admin
from .models import Document
admin.site.register(Document)Creating views
To create views go to the views.py file and follow the below code.
from django.shortcuts import render, redirect
from .models import Document
def editor(request):
docid = int(request.GET.get('docid',0))
documents = Document.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:
document = Document.objects.get(pk=docid)
document.title = title
document.content = content
document.save()
return redirect('/?docid=%i' % docid)
else:
document = Document.objects.create(title=title, content=content)
return redirect('/?docid=%i' % document.id)
if docid >0:
document = Document.objects.get(pk=docid)
else:
document = ''
context = {
'docid': docid,
'documents': documents,
'document' : document
}
return render(request, 'editor.html', context)
def delete_document(request, docid):
document = Document.objects.get(pk=docid)
document.delete()
return redirect('/?docid=0')Create URL path
from django.contrib import admin
from django.urls import path
from noteapp.views import editor, delete_document
urlpatterns = [
path('', editor, name= 'editor'),
path('admin/', admin.site.urls),
path('delete_document/<int:docid>/', delete_document, name='delete_document'),
]Step 3: Creating templates
We will create a new folder named templates in note app and another file in templates named editor.html
Follow the below code for the editor.html file
<!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.4/css/bulma.min.css">
</head>
<body>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a href="{% url 'editor' %}" class="navbar-item">Notes</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a href="{% url 'editor' %}?docid=0" class="navbar-item">New document</a>
</div>
</div>
</nav>
<section class="section">
<div class="columns">
<div class="column is-2">
<aside class="menu">
<p class="menu-label">Documents</p>
<ul class="menu-list">
{% for doc in documents %}
<li>
<a href="{% url 'editor' %}?docid={{ doc.id }}">{{ doc.title }}</a>
</li>
{% endfor %}
</ul>
</aside>
</div>
<div class="column is-10">
<form method="post" action="{% url 'editor' %}">
{% csrf_token %}
<input type="hidden" name="docid" value="{{ docid }}">
<div class="field">
<label class="label">
Title
{% if document %}
<span class="has-text-grey-light">
Created at: {{ document.created_at|date:"m/d Y" }} /
Modified at: {{ document.modified_at|date:"m/d Y" }}
</span>
{% endif %}
</label>
<div class="control">
<input type="text" class="input" name="title" placeholder="Title"{% if document %} value="{{ document.title }}"{% endif %}>
</div>
</div>
<div class="field">
<label class="label">Content</label>
<div class="control">
<textarea class="textarea" name="content" placeholder="Content">{% if document %}{{ document.content }}{% endif %}</textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Save</button>
</div>
# To delete a document
{% if document %}
<div class="control">
<a href="{% url 'delete_document' document.id %}" class="button is-danger">Delete</a>
</div>
{% endif %}
</div>
</form>
</div>
</div>
</section>
</body>
</html>Step 4: Run the server to view our application
We are done with all the necessary configurations of our application and now we are ready to run our app on the server where we can view the app. To run the development server we will use the runserver command.
> python manage.py runserverNow the URL link http://127.0.0.1:8000/ page will redirect you to the server where we will see our application.
View our Notes in the database
To view our Notes in the database run the management server with the URL link http://127.0.0.1:8000/ admin it will redirect you to the admin panel.
After entering the login credentials of the superuser which we entered earlier, it will redirect you to the admin panel where you can see our Notes are saved in the database.
Conclusion
In this Python Django tutorial, we have learned how to build a notes-making application in Django through models and forms.
In this project, we got a good understanding of CRUD operations and stored our data in the default database, and got access to that database through the admin panel.
You may read:
- Create Interactive HTML Forms with CSS and JavaScript
- Create a Registration Form with HTML, CSS, and JavaScript
- Expandable Table with Collapsible Rows Using HTML, CSS, and JavaScript
- Check if a Checkbox is Checked Using jQuery
- Handle Dropdown Change Event in jQuery
- Execute Functions After Page Load Using jQuery
- Check Which Radio Button is Selected Using jQuery
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
