Create A To-do List In Python Django

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.

Table of Contents

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'],

Todolist in Python Django — registering template in Django Todo list app

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

To do list app in Django Python — save data of the Todo list in the Django database

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.

Python Django To do list app — Delete function Python To-do list app

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

Python Django To do list application — To-do list tasks in the Django 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:

Bijay Kumar

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.

enjoysharepoint.com/