lets build a simple to do list web app using Django which every beginner must try….
To Do List is nothing but website which will allow user to add ,delete notes it may not be a practical project but as a beginner i thought it would be really beneficial for me or every beginner
Let’s start with creating project and app
django-admin startproject ToDoList
django-admin startapp ToDoListAppsettings.py
add app name ,static directory and base directory path
import os# Build paths inside the project like this: os.path.join(BASE_DIR, ...)BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))DIR = os.path.join(BASE_DIR,'template')STATICDIR = os.path.join(BASE_DIR,'static')#Application definitionINSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','ToDoListApp']#adding static url(e.g css,js,images)STATIC_URL = '/static/'STATICDIRS = [STATICDIR]
Now time to create database
models.py
from django.db import models# Create your models here.class NoteSave(models.Model): Note = models.CharField(max_length=200) time =models.DateTimeField(auto_now=True, auto_now_add=False) def __str__(self): return self.Note
urls.py
from django.contrib import adminfrom django.urls import pathfrom ToDoListApp import viewsurlpatterns = [path('admin/', admin.site.urls),path('', views.index,name='index'),path('submit', views.submit,name='submit'),path('delete/<n>', views.delete,name='delete'),]
forms.py
from .models import NoteSavefrom django import formsclass save(forms.ModelForm): class Meta: model = NoteSave fields = '__all__'
Registering models to Admin
from django.contrib import adminfrom ToDoListApp.models import NoteSave# Register your models here.admin.site.register(NoteSave)
views.py
from django.shortcuts import render,redirectfrom django.urls import reversefrom ToDoListApp.models import NoteSavefrom ToDoListApp.forms import save# Create your views here.def index(req): notes=NoteSave.objects.all().order_by('time').reverse() #print(notes)
return render(req,'index.html',{'note':notes})def submit(req): if req.method=='POST': form1 = save(req.POST) if form1.is_valid: form1.save(commit=True) else: #print('invalid data') return redirect(reverse('index'))def delete(req,n):
#print(n) note = NoteSave.objects.filter(Note=n) note.delete() return redirect(reverse('index'))
the index view will load all previously added notes with latest note first
When user clicks Add button submit view will get called this view checks all validation and saves to database only when form is valid
As mention user can delete notes delete view will delete particular note which is title equal to ’n’ which is actual note
index.html
{% load static %}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"><title>Document</title></head><body class="bg-dark" ><h1 class="text-white">This is ToDoList</h1><div class="contianer " ><div class="container justify-content-md-center col-sm-3 mt-md-5"><div class=alert-success>{{msg}}</div><form action="{% url 'submit' %}" method="POST">{% csrf_token %}<div class="form-group "><input type="text" class="form-control" id="exampleInputText" name="Note" placeholder=" Add Note here..."><input type="submit" class="btn btn-primary" value="Save" name="save" ></a></div></form>{% for i in note %}<div class="contianer "><div class="card " ><div class="card-item" style="height: 20%;"><center><p >{{i}}</p ></center><small>{{i.time}}</small><small><a href="{% url 'delete' n=i %}">delete</a></small></div></div>{% endfor %}</div></div></body></html>
