Setting your Django App
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 :
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
I hope you found this article to be useful.
Top comments (0)