In this Python Django tutorial, we will discuss how to build a To-do list in Python Django. We will create this application with the help of templates, forms, and models. We will also create a database in which we will store the data of our application.
With the help of this Python Django To-do list, we can maintain our daily tasks and keep them in check and we can create multiple tasks in this to-do list app also these tasks can be edited and deleted.
How to create a To-do list in Python Django.
To create a To-do list in Python Django we need the basic configurations and some prerequisites which are required to create a Python Django application. Below are the steps we will follow to create a To-do list application. We are going to cover the below points in this Python Django tutorial.
- Set up a Python Django Project with basic configurations.
- Creating and registering HTML templates.
- Create and delete tasks in our To-do list Python Django application.
- The logic of code to create and delete task
- View our task in the Database through the admin panel.
Step 1: Setup a Python Django Project
Firstly, to set up our Python Django project we will create a virtual environment, and after creating we will activate the virtual environment in our project directory.
Follow the below command to create a virtual environment.
python -m venv venv
Now the virtual environment is being created in our Python Django project, to activate it follow the below command.
venv\Scripts\activate
Create Django Project and application
To create a project run the below command in the terminal. It will create some default Python directories for the project.
django-admin startproject todolist
Now we have created a project so, we need to move inside the Python Django project directory to work on our project. We will use the below line of command for that.
cd todolist
After this, we will create an app using the below command.
python manage.py startapp todoapp
Register app
To register the todoapp go to the settings.py section and under the INSTALLED APP section register the app using the below code.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'todoapp',
]
Step 2: Creating and registering templates
First, create a folder named templates and in the templates folder create an HTML file index.html in the base directory and add the below code.
<!DOCTYPE html>
<html>
<head>
<title>Django To Do List App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
.header {
background-color: #329ba8;
padding: 30px 40px;
color: white;
text-align: center;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Django To Do List App</h2>
<form action="" method="POST">
{% csrf_token %}
<input type="text" name="title" id="myInput" placeholder="Title...">
<button type="submit" class="addBtn">Add</button>
</form>
</div>
<ul id="myUL">
{% for todo in todos reversed %}
<li>{{todo.title | title}} <span class="close"><a style="text-decoration: none; color: black;" href="delete/{{todo.id}}">Delete</a></span>
</li>
{% endfor %}
</ul>
</body>
</html>
To register the templates go to the TEMPLATES section in the settings.py file and follow the below code.
'DIRS': [BASE_DIR/'templates'],
Create models in todoapp
from django.db import models
# Create your models here.
class Todo(models.Model):
title = models.CharField(max_length=1000)
def __str__(self):
return self.title
Make Migrations
After creating or editing a model it is important for us to run migrations to make the changes and apply those changes in our database. To run migrations follow the below commands.
#To create migrations for the changes we have made
> python manage.py makemigrations
#To apply the changes
> python manage.py migrate
Step 3: Register tasks in the database
To view our tasks in the database we will first create a superuser and import our task to the admin.py page from where we will register the tasks in the database. To create a superuser run the command python manage.py createsuperuser in the terminal and enter the credentials
Follow the below code in admin.py
from django.contrib import admin
from .models import Todo
# Register your models here.
admin.site.register(Todo)
Step 4: Create views in the app
from django.shortcuts import render, redirect
from .models import Todo
# Create your views here.
def index(request):
todo = Todo.objects.all()
if request.method == 'POST':
new_todo = Todo(
title = request.POST['title']
)
new_todo.save()
return redirect('/')
return render(request, 'index.html', {'todos': todo})
def delete(request, pk):
todo = Todo.objects.get(id=pk)
todo.delete()
return redirect('/')
Step 5: Save a task
In the views, we have defined two functions index and delete. In the index function, we have used the if statement to get the Todo task saved if the method is “Post”.
Step 6: Delete a task
When we create an object in the model in Python Django, automatically each object gets an id. So, the first created object gets an id of zero and this goes run as an id of ‘1’.
A unique id is assigned to them so when we click to delete that assigned id is used to see which to-do task we are going to delete. It redirects to the URL and goes to save in ‘pk’ which is its variable. Hence this delete function works.
Creating URLs of app
Make a new file in todoapp named urls.py and follow the below code.
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('delete/<str:pk>', views.delete,name='delete')
]
Creating URL in the project directory
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('todoapp.urls'))
]
Step 7: 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 runserver
Now the URL link http://127.0.0.1:8000/ page will redirect you to the server where we will see our application.
View our To-do list data in the database
To view our Notes in the database run the management server with the Python 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 tasks are saved in the database
Conclusion
In this Python Django tutorial, we have learned how to build a To-do list app in Python Django using templates and models.
In this tutorial, we learned how to add and delete an object in models through an id that is auto-generated, and we also learned how to view our database through the admin panel.
You may like the following Python Django tutorials:
- How to Get HTML Code from Rich Text in Python Django
- How to create Email sender app in Django?
- Django CRUD with Bootstrap Template
- How to use Summernote editor in Django?
- How to use Quill Editor in Django?
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.