article

Thursday, April 30, 2020

Django Simple Todo List


Django Simple Todo List



 
#views.py
from django.shortcuts import render
from django.http import HttpResponse,HttpResponseRedirect
from myapp.models import TodoItem

# Create your views here.
def todoView(request):
    all_todo_items = TodoItem.objects.all()
    return render(request,'todolist.html', {'all_items':all_todo_items})
 
# Save
def addTodo(request):
    new_item = TodoItem(content = request.POST['content'])
    new_item.save()
    return HttpResponseRedirect('/')
 
def deleteTodo(request,todo_id):
    item_to_delete = TodoItem.objects.get(id=todo_id)
    item_to_delete.delete()
    return HttpResponseRedirect('/')
 
#models.py
from django.db import models

# Create your models here.
class TodoItem(models.Model):
    content = models.TextField()
 
    class Meta:  
        db_table = "todoitem"
 
#urls.py
from django.contrib import admin  
from django.urls import path  
from myapp import views  

urlpatterns = [  
    path('admin/', admin.site.urls),  
    path('',views.todoView),
    path('addTodo/',views.addTodo),
    path('deleteTodo//',views.deleteTodo),
]  
//templates/todolist.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>This is My Todolist</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  </head>
  <body>
<div class="container-fluid text-center">    
   <div class="row content"><h1 align="center">Django Simple Todo List</h1>
      <div class="col-sm-2"></div>
      <div class="col-sm-8 text-left">
       <br />
     <div class="panel panel-default">
      <div class="panel-heading">
       <div class="row">
        <div class="col-md-9">
         <h3 class="panel-title">My To-Do List</h3>
        </div>
        <div class="col-md-3">
         <h3 class="panel-title" align="right"><a href="#">Logout</a></h3>
        </div>
       </div>
      </div>
      <div class="panel-body">
       <form method="post" id="to_do_form" action="/addTodo/" method="post">{% csrf_token %}
        <div class="input-group">
         <input type="text" name="content" id="content" class="form-control input-lg" autocomplete="off" placeholder="Title..." />
         <div class="input-group-btn">
          <button type="submit" name="submit" id="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-plus"></span></button>
         </div>
        </div>
       </form>
       <br />
       <div class="list-group">
        <ul class="list-wrapper">
          {% for todo_item in all_items %}
          <li class="list-group-item">{{ todo_item.content}}
         <form class="" action="/deleteTodo/{{ todo_item.id}}/" style ="display: inline;" method="post">{% csrf_token %}
           <input type="submit" name="" value="Delete" style="float:right;">
         </form>
          </li>
          {% endfor %}
        </ul>
        <br />
       </div>
      </div>
      
      </div>
      <div class="col-sm-2"></div>
     </div>
</div>
</div>
<style>
.list-wrapper {
    padding: 0;
    text-align: left;
    list-style: none;
    margin-bottom: 0;
}
</style>
 </body>
</html>

Related Post