ND Rohith's Blog
Django-based Todo App

Django-based Todo App

Rohith ND's photo
Rohith ND
·

3 min read

Setting your Django App

https://ndrohith09.hashnode.dev/creating-a-django-application

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

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

INSTALLED_APPS = [ 
'django.contrib.admin',
...   
'simple_todo_app',
]

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/'

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

simple_todo
|
|--simple_todo
|--simple-todo-app
|--manage.py
|--templates

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>

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

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

python manage.py makemigrations
python manage.py migrate

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('/')

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')
]

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>

Start the server by typing following command in terminal

python manage.py runserver

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

Courtesy : Aravind Swaminathan Source Code :

https://github.com/Aravind2203/simple_todo_django

I hope you found this article to be useful.

DjangoPython 3Python