Todo List Web App using Django

Author - Neelima Mohanty

9/02/2022 | 10:30 PM

Hello everyone ! Everyday , both at home and workplace , we accomplish a lot of tasks but often forget which tasks we have completed and which are yet to be completed.Inorder to solve this problem we make Todo lists.But if you are a python lover and application developer just like me , this tutorial here helps you out to make a wonderful Todo-List app by using Django framework as its backend.

Prerequisites

• Knowledge about basic web framework(HTML,CSS,Javascript).
• Familiarity with Python programming language.
• Django framework setup.

Tutorial Begins

Follow the steps written below:

Step 1 : Django Project Creation

Open VSCode editor and type the following in the terminal and type the following coomands :

django-admin startproject <Projectname>

python manage.py startapp home

Step 2 : Linking Templates

Create static and template folders(HTML,CSS and Javascript ....frontend files will be stored inside the templates).
Reffer the files present in the github repo (link provided at enk of this tutorial).

In setting.py under TEMPLATES (fill the following directory)

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

Also add this

STATICFILES_DIR = [os.path.join9BASE_DIR,'static')]

Move to urls.py and add the following code:

from django.urls import path,include

Add a URL to urlpatterns:

path('blog/', include('blog.urls'))

Step 3 : Setting up admin

Copy all code from urls.py and paste in home/url.py.
Add a URL to urlpatterns:

path('', views.home,name='home'),

Delete admin path and also add this

from home import views

Step 4 : Home

Add HttpResponse to import and insert the following lines of code inside views.py url :

def home(request):
return render(request,'index.html')

Step 5 : Tasks

Create index.html and tasks.html file inside templates directory.
Add a URL to urlpatterns for tasks:

path('tasks', views.tasks,name='tasks

Step 6 : Continue with Tasks

In views.py add this

def tasks(request):
return render(request,'tasks.html')

Step 7 : Models

Create models.py file and add the code below into it.

class Task(models.Model):
time=models.DateTimeField(auto_now_add=True)

In settings.py add 'home' to Installed apps.
In admin.py add the following:

from home.models import Task
admin.site.register(Task)

Step 8 : Create Superuser

In another terminal,type the command

python manage.py create superuser

Then fill everything asked.

Step 9 : Linking Models and Tasks

Go to models.py and under class Task create a funtion

def __str__(self):
return.self.taskTitle

In index.html make a form tag and after that tag type {%csrf_token%}

Step 9 : Tasks addition and success message display

In views.py add

def home(request):
    context='{success':False}
    if request.method =="POST":
        title = request.POST['title']
        desc= request.POST['desc']
        print(title,desc)
        ins = Task(taskTitle = title,taskDescription=desc)
        ins.save()
        context = 'success':True
    return reder(request,'index.html',context)

Step 10 : Finishing the project

In index.html under /nav tag add {% if success %} Alert Message {% endif %}
In views.py file add :

def task(request): allTasks = Task.objects.all() context = {'tasks'.allTasks} return reder(request,'task.html',context)

In tasks.html after tbody tag add {% for tasks in tasks%}

Congratulations

Aww yeah, you successfully completed reading this tutorial and I hope you have not missed out any step.

In order to get the whole code of the project made by me click here : Github repo

People who read this also read

Application of smtplib module

Author: Neelima Mohanty

20/01/2022 | 10:30 PM