Make a simple Todo List App using Django

Lets try to build a simple todo list app using Django.

pip install django
django-admin startproejct <ProjectName>
  • Lets start running the server.
python manage.py runserver
  • Now start creating a App.
python manage.py startapp <App_Name>
  • Now open a VsCode or any editor and open your project folder, here you will see two directories are created one is your Project dirand other is your App dir . You can create as much apps you can but under only one project directory.
  • Lets go to MainProject dir and search for settings.py and scroll down to INSTALLED_APPS and add your App name there.
INSTALLED_APPS = [
'TodoList', # this should be your app name
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
from django.http import HttpResponsedef index(request):
return HttpResponse("Hello World!")
from django.urls import path
from . import views
app_name = "TodoList" # keep any name or app name
urlpatterns=[
path("",views.index,name="index")
]
from django.contrib import admin
from django.urls import include,path
urlpatterns = [
path('admin/', admin.site.urls), # this is default route path
path('Todolist/', include("TodoList.urls")) # this is routing to your app
]
  • Now again start your server. python manage.py runserver
  • Now you will see a text that says Hello World!, which is return from index function using HttpResponse.
  • Lets Start creating a Html file. There is structure to follow for creating the html, css, js files.
  • Html Structure:
  • Css and Js file Structure:
  • After creating a Html file and some default html template code with some title and h1 tag with Todo List text.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
</body>
</html>
def index(request):
return render(request,"Todolist/index.html")
  • Lets render some default list details to Web Browser. Now go to views.py in your app dir, create a global variable for list with random data in it.
task = ["foo","bar","baz"]
return render(request,"Todolist/index.html",{
"tasks":task # your List name
})
<ul>
<li> task1 </li>
<li> task2 </li>
<li> task3 </li>
<li> task4 </li>
</ul>
<body>
<h1>Hello {{Name}}</h1> # here Name is variable
</body>
<ul>
{% for task in tasks %}
<li>{{task}}</li>
{% endfor %}
</ul>
  • Now Lets add form to the page, where we can new data to the list.
  • Under the views.py in your App dir, add the import statements.
from django.http import HttpResponseRedirect
from django import forms
from django.urls import reverse
class NewTextForm(forms.Form):
tasks = forms.CharField(label="New Task:") # forms.CharField will create you a new text input
return render(request,"Todolist/index.html",{
"tasks":task,
"form":NewTextForm(),
})
<form method="POST">
{{form}}
<button type="submit" name="button">Submit</button>
</form>
<form method="POST">
{% csrf_token %}
{{form}}
<button type="submit" name="button">Submit</button>
</form>
  • When it submitted it should be added to the task list, to added follow the process.
  • In views.py under index function
def index(request):
if request.method == "POST":
form = NewTextForm(request.POST)
if form.is_valid():
tasks = form.cleaned_data["tasks"]
task.append(tasks)
return HttpResponseRedirect(reverse("todolist:index"))
return render(request,"Todolist/index.html",{
"tasks":task,
"form":NewTextForm(),
})
  • For each form there should be a action prop this will tell after submit where to redirect.
<form action="{% url 'todolist:index' %}" method="POST">
{% csrf_token %}
{{form}}
<button type="submit" name="button">Submit</button>
</form>
  • Now Lets empty the List in views.py called tasks = [].
  • Now run the server and you will get like.

Full Stack Developer [Web | Mobile]