[DOCKER] Create a Todo app with Django ③ Create a task list page

In this chapter, we will create a task list page.

List of articles

Create a Todo app with Django ① Build an environment with Docker Create a Todo app with Django ② Create a folder list page Create a Todo app with Django ③ Create a task list page Create Todo app with Django ④ Implementation of folder and task creation function Create a Todo app with Django ⑤ Create a task editing function

Perform migration

First, create a task table. The definition of the task table is as follows.

Column logical name Column physical name
ID id
folderID folder_id
title title
Status status
Created date created_at

Based on this, we will edit models.py. Add the following Task model.

todo/models.py


class Task(models.Model):
    STATUS_CHOICES = [(1, 'Incomplete'),(2, 'Working'),(3, 'Done')]

    title = models.CharField(max_length=100)
    status = models.IntegerField(choices=STATUS_CHOICES, default=1)
    due_date =  models.DateField(default=timezone.now)
    created_at = models.DateTimeField(default=timezone.now)
    updated_at = models.DateTimeField(blank=True, null=True)
    folder_id = models.ForeignKey(Folder, on_delete = models.CASCADE)

    def publish(self):
        self.update_at = timezone.now()
        self.save()

    def __str__(self):
        return self.title

There are two points here.

The first is the status part.

todo/models.py


STATUS_CHOICES = [(1, 'Incomplete'),(2, 'Working'),(3, 'Done')]

status = models.IntegerField(choices=STATUS_CHOICES, default=1)

I set the status to IntergerField, but I set the default value to 1. The initial state when a task is created is always "incomplete", so if nothing is specified, "1" is entered. In addition, the choices option assigns incomplete, working, and completed to integers.

The second is the folder_id part.

todo/models.py


folder_id = models.ForeignKey(Folder, on_delete = models.CASCADE)

ForeignKey links the Folder model and the Task model. In the on_delete = ... part, you can delete all the objects associated with the object to be deleted by setting CASCADE. This article is easy to understand with concrete examples. (By the way, "cascade" means "small waterfalls with many steps", and if you remember this, it is easy to understand that objects are deleted in a row)

At this point, create a migration file with make migraions. Execute the following command.

$ docker-compose run web python3 manage.py makemigrations

When executed, it will be as follows, and a new migration file will be created in the todo / migrations directory.

$ docker-compose run web python3 manage.py makemigrations
Starting django_todo_db_1 ... done
Migrations for 'todo':
  todo/migrations/0002_task.py
    - Create model Task

Now that you have created the migration file, run the following command to migrate it.

$ docker-compose run web python3 manage.py migrate

When executed, it will be as follows.

docker-compose run web python3 manage.py migrate       
Starting django_todo_db_1 ... done
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, todo
Running migrations:
  Applying todo.0002_task... OK

View management site

After migrating, check the admin site (http: // localhost: 8000 / admin /). Then, although I should have migrated the Task model, the item related to Task does not appear.

Screenshot from 2020-04-17 10-48-48.png

To view the Task model, you need to import the Task model in admin.py. Add it to admin.py as follows.

todo/aadmin.py


from django.contrib import admin
from .models import Folder, Task#add to

admin.site.register(Folder)
admin.site.register(Task)#add to

If you visit the admin site again, you will see that the Tasks item has been added under Folders as shown in the image below.

Screenshot from 2020-04-17 10-51-55.png

Again, let's add some tasks on the admin site.

Write View

Edit views.py as follows.

todo/views.py


from django.shortcuts import render, get_object_or_404#add to
from django.utils import timezone
from .models import Folder, Task#add to

def index(request, id):
    #Get all folders
    folders = Folder.objects.filter(created_at__lte=timezone.now()).order_by('created_at')
    #Get the selected folder
    current_folder = get_object_or_404(Folder, id=id)
    #Get tasks for the selected folder
    tasks = Task.objects.filter(folder_id = current_folder.id)

    return render(request, 'index.html', {
        'folders':folders,
        'tasks':tasks,
        'current_folder_id': current_folder.id,
    })![Screenshot from 2020-04-17 11-03-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370196/2effc6d9-ccd6-3485-3eaa-4dceb2ae76da.png)

[Get_object_or_404 function] on the first line Import (https://docs.djangoproject.com/ja/3.0/topics/http/shortcuts/#get-object-or-404). The third line imports the Task model defined in models.py.

In the get_object_or_404 function, if thepk (primary key)in the Folder model, that is, the ʻid that matches the ʻid is received, the object corresponding to the ʻid is assigned to the current_folder. If you receive a ʻid that does not exist in the Folder model's ʻid`, you will get a 404 error. For example, if only 3 Folders are inserted, accessing http: // localhost: 8000 / folders / 5 / tasks will result in a 404 error as shown below. Screenshot from 2020-04-17 11-03-21.png

Next, about this part.

tasks = Task.objects.filter(folder_id = current_folder.id)

Here, the filter function is used to get all the tasks whose folder_id of the task is equal to ʻid of the selected folder and assign it to tasks`.

Edit template

To see the list of tasks, insert the following code in templates / index.html where the comment<!-Tasks are displayed here->.

templates/index.html


<div class="panel panel-default">
  <div class="panel-heading">task</div>
  <table class="table">
    <thead>
    <tr>
      <th>title</th>
      <th>Status</th>
      <th>Deadline</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
      {% for task in tasks %}
        <tr>
          <td>{{ task.title }}</td>
          <td>
            <span 
            class="label {% if task.status == 1 %}label-danger{% endif %}{% if task.status == 2 %}label-info{% endif %}"
            >
            {{ task.get_status_display }}
            </span>
          </td>
          <td>{{ task.due_date }}</td>
          <td><a href="#">Edit</a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="panel-body">
    <div class="text-right">
      <a href="#" class="btn btn-default btn-block">
Add a task
      </a>
    </div>
  </div>
</div>

I think the following parts should be noted.

<span 
class="label {% if task.status == 1 %}label-danger{% endif %}{% if task.status == 2 %}label-info{% endif %}"
>
{{ task.get_status_display }}
</span>

To get the "name" of the field whose value is limited by the choice attribute, you need to use the get_status_display method. (The get_status_display method is defined arbitrarily. For more information, see How to get the "name" of a field whose value is limited by the choice attribute in Django's model / 37bf4f5f6b60ccccebe2))

Also, using an if statement, when task.status is 1, that is, when it is incomplete, label-danger is used, and when task.status is 2, that is, when it is working, label-info is used. Allocation and css are applied for each task state.

When you get here, go to http: // localhost: 8000 / folders / 1 / tasks to check it out! It's OK if it looks like the following!

Screenshot from 2020-04-17 11-11-36.png

in conclusion

You have now listed the tasks! The code so far can be found in the repository chapter3 branch. Next, we will implement the folder creation function!

List of articles

Create a Todo app with Django ① Build an environment with Docker Create a Todo app with Django ② Create a folder list page Create a Todo app with Django ③ Create a task list page Create Todo app with Django ④ Implementation of folder and task creation function Create a Todo app with Django ⑤ Create a task editing function

Recommended Posts

Create a Todo app with Django ③ Create a task list page
Create a Todo app with Django ⑤ Create a task editing function
Create a Todo app with Django REST Framework + Angular
Create a Todo app with Django ④ Implement folder and task creation functions
Create a Todo app with Django ① Build an environment with Docker
Create Django Todo list
Web App Development Practice: Create a Shift Creation Page with Django! (Shift creation page)
A simple to-do list created with Python + Django
Create ToDo List [Python Django]
Web App Development Practice: Create a Shift Creation Page with Django! (Introduction)
Create a homepage with django
Create a file uploader with Django
Web App Development Practice: Create a Shift Creation Page with Django! (Write a base template)
Web App Development Practice: Create a Shift Creation Page with Django! (Authentication system processing)
Web App Development Practice: Create a Shift Creation Page with Django! (Experiment on admin page)
Create a GUI app with Python's Tkinter
Web App Development Practice: Create a Shift Creation Page with Django! (Design of database model)
Create a simple web app with flask
Create your first app with Django startproject
Create Page / Todo Block with Notion API
Create a PDF file with a random page size
Create a page that loads infinitely with python
Create a dashboard for Network devices with Django!
Create a new page in confluence with Python
How to create a multi-platform app with kivy
Create a one-file hello world application with django
Until you create a new app in Django
Create a Django schedule
Try to create a Todo management site using WebSocket with Django (Swamp Dragon)
I tried to create a table only with Django
Create a native GUI app with Py2app and Tkinter
Deploy a Django app made with PTVS on Azure
To myself as a Django beginner (1) --Create a project app--
To myself as a Django beginner (4) --Create a memo app--
Create a django environment with docker-compose (MariaDB + Nginx + uWSGI)
[Go language] Create a TUI app with Elm Architecture Create a slightly rich ToDo app with bubble tea
Todo app with django-bootstrap-modal-forms plugin
Create an API with Django
Create a Django login screen
Create a heatmap with pyqtgraph
Create and list Django models
Create a directory with python
Create a shogi game record management app using Django 4 ~ Create View ~
Create a list in Python with all followers on twitter
Create a machine learning app with ABEJA Platform + LINE Bot
Build a bulletin board app from scratch with Django. (Part 2)
Build a bulletin board app from scratch with Django. (Part 3)
Create a web API that can deliver images with Django
Flask-Create a Todo list with CSRF measures in Flask with WTF
Create a social integration API for smartphone apps with Django
[Python] Create a screen for HTTP status code 403/404/500 with Django
Steps to create a Django project
Create a shogi game record management app using Django 2-Database settings-
Create a temporary file with django as a zip file and return it
Create a shogi game record management app using Django 6 ~ Template division ~
Create a virtual environment with Python!
Rails users try to create a simple blog engine with Django
I tried to create a list of prime numbers with python
Create and deploy a Django (PTVS) app using Azure Table storage
Django Tips-Create a ranking site with Django-
Implement a Django app on Hy