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

# Create your models here.class Todoclass(models.Model):    header = models.CharField(max_length=500)    main_text = models.TextField(blank=True)def __str__(self):     return f'{self.header}'

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

Code for forms.py

from .models import Todoclassclass TodoForm(forms.ModelForm):     class Meta:           model = Todoclass           fields=('header','main_text')

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

from .models import Todoclass# Register your models here.admin.site.register(Todoclass)

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

from django.urls import pathfrom Apptodo.views import todo,DeleteWorkurlpatterns = [path('admin/', admin.site.urls),path('',todo,name='todo'),path('delete/<pk>/',DeleteWork.as_view(),name='delete'),]

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.

import requestsfrom django.urls import reverse_lazyfrom .models import Todoclassfrom .forms import TodoFormfrom django.views.generic import DeleteView# Create your views here.def todo(request):   form = TodoForm(request.POST or None)   if(request.method=="POST"):   if(form.is_valid()):   form.save()   form =TodoForm()   objects = Todoclass.objects.all()   count=objects.count()   context={    'form':form,    'work':objects,  'count':count,  }  return render(request,'index.html',context)class DeleteWork(DeleteView):   model = Todoclass   template_name='confirm.html'   success_url=reverse_lazy('todo')

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

<html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"><title>ToDo</title></head><body><!-- Button trigger modal --><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">ADD</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><form method="POST" action="">{% csrf_token %}<form action="" method="POST">{{form}}<button type="submit">Save</button></form></form></div></div></div></div>{% for item in work %}<div class="container mt-3"><h1>{{item.main_text}}</h1><p>{{item.pk}}</p><a href="{% url 'delete' item.pk %}"><button type="submit" class="btn btn-danger">DELETE</button></a></div>{% endfor %}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script></body></html>

confirm.html

{% csrf_token %}<p>Are you sure you want to delete? "{{object.header}}"</p><button type="submit" class="btn btn-danger">YES</button></form>

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/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store