Django-based Todo App
Tags: django, python
Published: 2022-04-12 05:34:50

### Setting your Django App

{% embed https://dev.to/ndrohith/setting-up-django-app-3cja %}

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
```js
simple_todo
|
|--simple_todo
|--simple-todo-app
|--manage.py 
```
Let’s add our app within installed apps in our `settings.py` .
```js
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`.
```js 
TEMPLATES = [   
 {       
...
'DIRS': [os.path.join(BASE_DIR,'templates')],      
....
 }
]
....
STATIC_URL = '/static/'
```
Now create a folder called `templates` inside your main project directory.

```js
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.

```html 
<!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.
```python
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.
```bash 
python manage.py makemigrations
python manage.py migrate
```
Let’s create views for rendering homepage , adding and deleting a task.
```python 
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.
```python 
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.

```html
<!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
```bash
python manage.py runserver
```
Then open http://127.0.0.1:8000/ to see your app.

**Courtesy :** Aravind Swaminathan
**Source Code :** 

{% embed https://github.com/Aravind2203/simple_todo_django %}

I hope you found this article to be useful.