DEV Community

Cover image for Django-based Todo App
Rohith ND
Rohith ND

Posted on

Django-based Todo App

#django #python

Setting your Django App

ndrohith

Setting up Django app

Rohith ND ・ Apr 12 ・ 1 min read

#django #python

Here in this blog , I have created a django project called simple_todo and a django app called simple_todo_app .
The structure of your django project looks as below

simple_todo | |--simple_todo |--simple-todo-app |--manage.py
Enter fullscreen mode Exit fullscreen mode

Let’s add our app within installed apps in our settings.py .

INSTALLED_APPS = [ 'django.contrib.admin', ... 'simple_todo_app', ]
Enter fullscreen mode Exit fullscreen mode

We will be creating a templates for holding our html webpages. Let’s add the templates directory and static path in settings.py.

TEMPLATES = [ { ... 'DIRS': [os.path.join(BASE_DIR,'templates')], .... } ] .... STATIC_URL = '/static/'
Enter fullscreen mode Exit fullscreen mode

Now create a folder called templates inside your main project directory.

simple_todo | |--simple_todo |--simple-todo-app |--manage.py |--templates
Enter fullscreen mode Exit fullscreen mode

Now inside our templates folder let’s create a home.html file for our webpage.

<!DOCTYPE html> <html> <title></title> <!-- from rohith --> <body> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <nav class="nav"> <a class="nav-link disabled" href="#">To-Do List</a> </nav> <div class="container"> <div class="jumbotron"> <form method="POST" action="/"> <h1 class="container"><b>Add Task</b></h1> <p> <input type="text" name="content" placeholder="Enter your task here..."> <input type="submit" value="submit" name="submit" class="btn btn-success"></p> </div></div> <form > <div class="container" > <p><b>list</b> <a href="" class="btn btn-danger float-right">DELETE</a> </p><br> </div> </form> <style> .nav{ background-color: black; height: 110px; font-size: 60px; padding-right: 110px; } body{ background-color: cadetblue; } </style> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

We will be creating our necessary models inside models.py which is present in simple_todo_app folder.

from django.db import models # Create your models here. class Todolist(models.Model): task=models.CharField(max_length=9999) def __str__(self): return self.task
Enter fullscreen mode Exit fullscreen mode

We will make migrations first. After migrations let’s migrate it.

python manage.py makemigrations python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Let’s create views for rendering homepage , adding and deleting a task.

from django.shortcuts import render,redirect from django.http import HttpResponse,HttpResponseRedirect from .models import Todolist # Create your views here. def home(request): tasks=Todolist.objects.all() return render(request,'home.html',context={"tasks":tasks}) def add_task(request): task_to_be_done=request.POST['content'] t=Todolist(task=task_to_be_done) t.save() return redirect('/') def delete_task(request,id): task_object=Todolist.objects.get(id=id).delete() return redirect('/')
Enter fullscreen mode Exit fullscreen mode

Now, in urls.py, within simple_todo, let’s sync our views to a specific url.

from django.contrib import admin from django.urls import path from simple_todo_app import views urlpatterns = [ path('admin/', admin.site.urls), path('',views.home,name='home'), path('delete/<int:id>/',views.delete_task,name='delete'), path('addtask/',views.add_task,name='add') ]
Enter fullscreen mode Exit fullscreen mode

Let’s modify home.html using template tags.

<!DOCTYPE html> <html> <title></title> <!-- from rohith --> <body> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <nav class="nav"> <a class="nav-link disabled" href="#">To-Do List</a> </nav> <div class="container"> <div class="jumbotron"> <form method="POST" action="addtask/"> {% csrf_token %} <h1 class="container"><b>Add Task</b></h1> <p> <input type="text" name="content" placeholder="Enter your task here..."> <input type="submit" value="submit" name="submit" class="btn btn-success"></p> </div></div> {% for i in tasks %} <form > {% csrf_token %} <div class="container" > <p><b>{{i}}</b> <a href="{% url 'delete' i.id %}" class="btn btn-danger float-right">DELETE</a> </p><br> </div> </form> {% endfor %} <style> .nav{ background-color: black; height: 110px; font-size: 60px; padding-right: 110px; } body{ background-color: cadetblue; } </style> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Start the server by typing following command in terminal

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Then open http://127.0.0.1:8000/ to see your app.

Courtesy : Aravind Swaminathan
Source Code :

GitHub logo Aravind2203 / simple_todo_django

This is a simple todo list in django web framework.

simple_todo_django

This is a simple todo list in django web framework.

This is completely made with django framework in python. I have used bootstrap and css for styling.

sample image

localhost_8000 - Google Chrome 27-10-2020 09_42_31

View on GitHub

I hope you found this article to be useful.

Top comments (0)