Create Todo App using python Django framework from scratch | Beginners django project

Hello and welcome to an amazing tutorial where we will be creating a simple Todo application using the Python Django framework. The project will help you to learn, and explore more about Django and will provide you a hands-on experience on how to use Django for web development.

Table of Contents

1. Project Overview
2. Brief Introduction to Django
3. Setup Django on your system
4. Implement ToDo app using Django from scratch
5. Conclusion

ToDo Project Overview

Todo App is a simple application used to store all the tasks which you need to perform in a day and after completion of Task, you can simply remove them from a list. It is used by most great leaders, Hustlers to target and track the things which we need to accomplish in a day.

Most of them make the Todo list in Notebooks while some use Google or Microsoft-built tools. So In these tutorials, we will code a simple Todo application for us using the Python Django library.

What is Django?

Django is a Python web framework used for creating rapid Interactive web applications with a built-in authentication system. Django is based on MVT(model view template) design pattern. The tagline of Django is.

The web framework for perfectionists with deadlines.

It is designed in such a manner that most of the configurations required at the initial level for creating a new project are done automatically when we initialize a new Django project. So we can focus on main application development. And that is an advantage over other web frameworks. Let us see other than this advantage what Django serves the best.

Features of Django include

• Rapid Development
• Scalable
• Secure
• Fully Loaded - various helping modules and libraries
• Open-source

Setup Django on your system

Django Installation

The first thing we require is to install the library. So simply use the pip package to install Django. If you are working on Python version above 3.4 then also use upgraded Pip because Pip3 is used to manage all packages of Django. The directory where you want to create a project or install the Django in C-drive.

        pip install django 

If you want to verify the Installation then in your command prompt only open the Python terminal by just typing python and checking the version of Django while importing it. If it imports successfully it means you have installed the Django library

>> python
>>import django
>>print(django.__version__)

Create Django Project

We have installed Django successfully, To create a Django Project use the following syntax. Instead of the project name, type the name of the project as per your choice like Todo which we are going to implement.

django-admin startproject projectname 

Here, I have created a Project named ToDo. Now start the project so that Django will create project default files and database settings.

Locate Into Project

Now in command prompt itself move to the project directory using the cd command. instead of project name type your project name.

cd projectname

If you visit your directory, the Django App contains the following packages and files. The outer directory is just a container for application. we can rename it further. And under this directory only we will create a new folder for storing our project files. And Django has installed basic settings files in your project.

• manage.py - It is a command-line utility that allows us to interact with the project in various ways through the terminal.

• __init__.py -  It is a base empty file like a constructor that tells the directory should be considered a Python package.

• settings.py - This is the main project configuration file which tells about database connection, static, and templates folder.

• urls.py - The file contains listed URLs of an application under the path command. In this file, we mention all the URLs and the corresponding actions to take during the GET or the POST request.

• wsgi.py - It is an entry point for WSGI-compatible web servers to serve the Django project.

Running Django Project

Open a terminal and in the project, directory run the Django server using the following command

            python manage.py runserver 

You will get the default port as 8000 and open the corresponding URL in a browser and you will see the default webpage saying Django Installed successfully and a message of congratulations.

This is how Django works, and the complete process of setting a Django environment with only 2-3 steps from the terminal itself. Now we are all set to implement a Django project application. Before Implementing It is important to understand the framework well and now I hope you are all set to create a todo application using Django.

Create Simple ToDo APP with Django

Head over to code environment means python IDE to write the todo application.

Create Django App

The first step is to initialize your app in your current project working directory so that Django will create a folder of your project which will use the setting of the parent folder Django app. We have already initialized our Django app and default files have been created. Now first go to settings.py and search for Installed apps and add your app name in that directory.

This is what the settings.py file looks like and you can see the folder locations in the left side files section if it confuses you about the files and folder location.

Coding Part

The main file where complete routing of templates happens in views.py which gets the commands from urls.py file from parent folder, so we have to add URLs in URLs file and give the command to views file. open your views.py file and write the following code:

And then open your urls.py file in the parent folder and add its path.

Now when you run the server and visit the URL  http://127.0.0.1:8000//todo/ 
you can see the output returning your HTTP response.

That's How the Django app runs and Now you should get a basic idea of how Django works But here we are just returning a string But we want something else And here comes the concept of templating where we can return any user to an HTML template where we will design frontend which is a combination of HTML and Python code and pass the data and methods to show from views.py file.

Templating

Create a new folder in your project directory and name it as templates and create a new file with HTML extension. I have created my file and named it mytodo.html.

Just visit the Bootstrap website and copy the starter template from its documentation and paste it into your templates file.  You can edit the title and head of the template. Now add the template directory to settings.py using the following command. Visit the templates list and add the following code to it.

'DIRS':[os.path.join(BASE_DIR, "templates")],

If the os module is not imported then import the os module first. Now you can route to this HTML template from views using the following code.

We want the form which takes the user task as input and we have to save it into a database so let's use the Django database. Open the models.py file in the todo folder and create a form that takes the content that the user enters in the form.

You can have multiple entries in a form but for sake of simplicity let's keep it to only for a task.

Save Changes to Django Database

After editing the models file save the changes to know Django that we have added one Item to its database. so please run the following code in your terminal in the project directory.

        python manage.py makemigrations

This creates a migrations file that is used for changing the configurations of the database which tells the database that we have a new TodoItem. Now execute the changes made so see everything is ok.

        python manage.py migrate 

And you can see all the default migrations and at last the changes we made.

Python Shell

Now that we have created our model, let's work with its basic functionality from the Python shell. To start the Python shell in your project directory run the following code.

            python manage.py shell

Now you are capable to access the python shell and let's use or todo the Item which we have created. First Import it to use.

        from todo.models import TodoItem

when you print TodoItem, it gives you output as class todo. models.TodoItem. You can see the complete results in the figure given below.

Display Records

To display records what it contains run the following query.

        TodoItem.objects.all()

It will print an empty list because we have not added anything till. Let's dd one Item and check is everything running fine.

        a = TodoItem(content="Perform task A") 

        a.save()  

Now if you run the first query again then it will show you one record added.

Now to print content stored in the record so we can easily retrieve it back.

all_items = TodoItem.objects.all()
all_items[0].content

If you run the above 2 queries then you will get the content that you stored in a database. And to delete it you can simply use the delete function. We can also use an id attribute to identify any record because Django provides each record a unique id which is a primary key.

all_items[0].id
temp = TodoItem.objects.get(id = 1)
temp.content

Working with the Django database is just amazing and I hope you get the idea of how things actually work at the backend Now let's visit back to our project and add all these things to our project application.

Views.py Files

Open views file and access the data added to the template form and revert it back on a template. Now we will Redirect the data back to the template.

Templates File

Now open the template file and create a form to get the user data and write a python script to show the added task.

So, the above code basically says that when a user adds the task and submits it then it goes to the addTodo URL, and post request is created where our views.py file access the data and revert it back to the templates file, and the particular task is been added to your task list. 

👉 CSRF token is just for security purposes of forms provided by Django so better to use it. 

Now run the server and when you click on Add button you will get an error because the URL we are directing is not added to the URLs file and we have not added any action for it. so let's handle that Post request by creating a new function in the views file.

👉 Now add the URL we are accessing to the URLs file and command action. pen URL file and in URL patterns add the below code. And also import the add todo function from views.

from todo.views import addTodo
path("addTodo", addTodo)

Please add the above two lines of code in your URLs file to post a request successfully.

And Now If you run the server again and access it on the browser, It will work fine and new Items are added to a database and shown in your task list.

Adding Delete Button

Now the final step we are remaining with is to add a delete button and implement its functionality. Open templates file and add a form with each task to add a delete button. we will tell Django which Item to delete using the id attribute which we have seen above which is unique for each task added. Please add the below code to your existing unordered list tag.

Now add the path of delete button request to URLs file and also Import the function from views to delete the task.

Now open the views file and implement functionality to delete the task.

That's all And we are done with our project. I hope you enjoyed the tutorial. The final output screen looks like the below figure.

CONCLUSION

Django is an amazing web framework provided by python for the rapid development of web applications with an in-built authentication system. The main aim of the tutorial was to give you a brief overview of how Django performs and how to create an application using it. There are many more functionalities that it provides. I would encourage you to style this page more attractive way and add more functionality to it.

Thank You! 😊

keep learning, Happy Learning