How to build a TODO App in Django

Django is a popular web framework written in python , suitable for rapid development.

Now let’s start.

First thing first you should have Python and Django installed in your system.

Now create a folder and give it a name.

Open cmd and navigate to the folder and run “django-admin startproject (projectname)”.

I have named my project as myToDoListApp.

Now run “cd (projectname)” to go inside the project.

There is a folder with same name as the project and that contains “settings.py”

Now we will create a django app in the project by “django-admin startapp (app name)”.

The main project
The file structure will look something like this.

In my project the project name is “myToDoListApp” and app name is “Apptodo”.

Now go inside the app and find “models.py”.

Create a new model . We will use this model to interact with the database.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Code for models.py

Now we will create a model form from this model. Inside the app create a file “forms.py”

Code for forms.py

Now go to “admin.py” and register the model to admin.

Now go to “urls.py” of the main project and add ..

After this go to “settings.py” and in the installed app list add your app name.

Inside the DIRS=[] list add ‘templates’ and create a template folder in the root folder. Make sure the file structure is like the picture given below.

Now this is the time to connect database and create an admin.

So run

“python manage.py makemigrations”

“python manage.py migrate”

python manage.py createsuperuser

Now go to views.py and add the following code.

Note: Please take care of the identation.

Now we have to build our frontend.

You may ask me hayy how can you user variable in html? This is not possible!

But yes we will do it now using DTL(Django Template Language).

Inside the templates folder create two html files.

index.html

confirm.html

Now here comes the moment of truth.

https://youtu.be/BONtxpfsQmw

Now definitely this is by far not the most beautiful site but hey you have a powerful backend and i am sure you can insert some css or bootstrap to make it look good.

Code available here. Make sure to share the changes with me as well.

Make sure to follow me on social media .

https://www.linkedin.com/in/nilay-paul-062521186/