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)”.
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
from django.db import models# 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 django import formsfrom .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 django.contrib import adminfrom .models import Todoclass# Register your models here.admin.site.register(Todoclass)
Now go to “urls.py” of the main project and add ..
from django.contrib import adminfrom 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.
from django.shortcuts import renderimport 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
<!doctype 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
<form method="POST" action="">{% 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.
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 .
