Create ToDo List [Python Django]

[Editing postscript] 2019/11/24 Some settings in settings.py have been changed. It was said that an error would occur if you added'todo.apps.TodoConfig'to settings.py before creating the todo app, so I added them in the order after creating the app.

Purpose

[Reference] ToDo list created with Django When I thought about making a simple one with python, I thought that the ToDo application would be good and tried it.

--Function --List display

• Detail View --Create & edit list
• Delete

We will create a ToDo application with these four functions.

environment

The versions of python and Django are: Django will be installed in a virtual environment in a later step.

$ python -V
Python 3.7.3

$ pip list
Package    Version
---------- -------
Django     2.1.8  

Creation procedure

Roughly divided

1. Prepare the development environment
2. ToDo application creation (python edition)
3. ToDo application creation (html edition)
4. Migration
5. Operation check 5 steps

1. Prepare the development environment

Building a virtual environment

There are more than 150 python libraries, and it's hard to check which library is needed for which project. Also, if the libraries interfere with each other and do not work well ... To prevent this, build a virtual environment with the following command.

$ virtualenv ~/eb-virt
$ source ~/eb-virt/bin/activate

Django installation

Now that you have a virtual environment, install Django there.

(eb-virt)~$ pip3 install django==2.1.8
(eb-virt)~$ pip3 freeze

Creating a project template

Create a directory for your project and create a template for your project in that directory.

(eb-virt)~$ mkdir django-todo
(eb-virt)~$ cd django-todo
(eb-virt)~$ python3 -m django startproject mysite .

The contents of mysite are like this.

Structure of mysite

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        wsgi.py

settings.py settings

Set settings.py in the created project. The ALLOWED_HOSTS field seems to have been introduced since Django == 1.5, so don't forget to set it if you use a later version.

mysite/settings.py

# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['*']#The domain name of the site to be published is also acceptable

# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'ja'#Japanese

# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo'#In Japan time

Creating and configuring ToDo applications

In order to create the ToDo application that is the main subject, create an application template. Note that the application todo is created in the same hierarchy as the project mysite created earlier.

$ python3 manage.py startapp todo

Set settings.py for todo app.

mysite/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig', #embedding todo application
]

2. ToDo app

Modeling

Since "ToDo", "creation date and time", and "update date and time" are displayed, the date and time etc. are acquired. This content is reflected in the database.

todo/models.py

from django.db import models 


class Todo(models.Model): 
    todo = models.CharField('ToDo', max_length=100, blank=False)
    created_at = models.DateTimeField('Creation date and time', auto_now_add=True)
    updated_at = models.DateTimeField('Update date and time',auto_now=True)

    def __str__(self):
        return self.todo

Form class creation

Forms.py is not included in the template, so create it under the todo hierarchy. Since the input item is only ToDo, the creation date and time and update date and time are excluded.

todo/forms.py

from django import forms
from .models import Todo

class TodoForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('created_at','updated_at',)  #Exclude creation date and time and update date and time from input items

View creation

Create a view of the todo application to correspond to each function of the todo.

todo/views.py

from django.views import generic
from django.urls import reverse_lazy
from .models import Todo
from .forms import TodoForm

#ToDo list display function
class TodoListView(generic.ListView):
    model = Todo
    paginate_by = 5

#Detailed display function of ToDo
class TodoDetailView(generic.DetailView):
    model = Todo

#ToDo creation function
class TodoCreateView(generic.CreateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

#ToDo editing function
class TodoUpdateView(generic.UpdateView):
    model = Todo
    form_class = TodoForm
    success_url = reverse_lazy('todo:list')

#ToDo deletion function
class TodoDeleteView(generic.DeleteView):
    model = Todo
    success_url = reverse_lazy('todo:list')

URL creation

First, when connecting from the browser with todo /, change to refer to the URL setting of the todo application instead of the URL setting of mysite. Therefore, you need to play with mysite / urls.py and todo / urls.py. Let's distinguish and change.

mysite/urls.py

from django.contrib import admin
from django.urls import include, path   #import include

urlpatterns = [
    path('todo/', include('todo.urls')),    # todo/Refer to the todo url setting when accessing with
    path('admin/', admin.site.urls),
]

todo/urls.py

from django.urls import path
from . import views 

app_name = 'todo' 

urlpatterns = [
    path('list/', views.TodoListView.as_view(), name='list'), 
    path('detail/<int:pk>/', views.TodoDetailView.as_view(), name='detail'), 
    path('create/', views.TodoCreateView.as_view(), name='create'), 
    path('update/<int:pk>/', views.TodoUpdateView.as_view(), name='update'), 
    path('delete/<int:pk>/', views.TodoDeleteView.as_view(), name='delete'), 
]

3. Create template with html

From here on, the UI story. First, create a working directory.

(eb-virt) $mkdir -p todo/templates/todo

base

Create the base of the html to be created. Let the four htmls created below inherit the common part.

todo/templates/base.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

List display function

UI of ToDo list display function.

todo/templates/todo/todo_list.html

{% extends 'base.html' %}

{% block content %}
<h1>List of tasks</h1>
<a href="{% url 'todo:create' %}">add to</a>
<table>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">ToDo</th>
      <th scope="col">Creation date and time</th>
      <th scope="col">Update date and time</th>
      <th scope="col">operation</th>
    </tr>
  </thead>
  <tbody>
    {% for item in object_list %}
    <tr>
      <td scope="row"><a href="{% url 'todo:detail' pk=item.id %}">{{ item.id }}</a></td>
      <td>{{ item.todo }}</td>
      <td>{{ item.created_at }}</td>
      <td>{{ item.updated_at }}</td>
      <td>
        <a href="{% url 'todo:update' pk=item.id %}">Fix</a>
        <a href="{% url 'todo:delete' pk=item.id %}">Delete</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{%endblock%}

Detailed display function

UI of ToDo detailed display function.

todo/templates/todo/todo_detail.html

{% extends 'base.html' %}

{% block content %}
<h1>ToDo details</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>Creation date and time</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>Update date and time</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<a href="{% url 'todo:list' %}">Return</a>
{%endblock%}

Create and edit functions

UI for creating and editing tasks.

todo/templates/todo/todo_form.html

{% extends 'base.html' %}

{% block content %}

{% if object %}
<h1>Editing ToDo</h1>
{% else %}
<h1>Creating a task</h1>
{% endif %}

<form method="post">
    {% csrf_token %}
    {{ form }} 
    <button type="submit">Send</button>
</form>
<a href="{% url 'todo:list' %}">Return</a>
{%endblock%}

Delete function

UI of ToDo delete function.

todo/templates/todo/todo_confirm_delete.html

{% extends 'base.html' %}

{% block content %}
<h1>Delete ToDo</h1>
<table>
    <tr>
        <th>ID</th>
        <td>{{ object.id }}</td>
    </tr>
    <tr>
        <th>ToDo</th>
        <td>{{ object.todo }}</td>
    </tr>
    <tr>
        <th>Creation date and time</th>
        <td>{{ object.created_at }}</td>
    </tr>
    <tr>
        <th>Update date and time</th>
        <td>{{ object.updated_at }}</td>
    </tr>
</table>
<form action="" method="post">
    {% csrf_token %}
    <input type="submit"value="Delete" />
</form>
<a href="{% url 'todo:list' %}">Return</a>
{%endblock%}

4. Database migration

Database migration is a function that automatically creates and manages database definitions used in applications. The purpose of database migration is to create a projection of model.py that was set first in the database.

Create a migration file with the first command and apply (execute) the migration file to the database with the second command.

(eb-virt) $ python3 manage.py makemigrations
(eb-virt) $ python3 manage.py migrate

5. Operation check

This completes all the preparations. Let's see if it works. First, start the Django server with the following command.

(eb-virt) $ python3 manage.py runserver 8080

Next, start the browser and access the following URL. http://127.0.0.1:8080/todo/list/

If successful, it should look like this.

Although I made a general mistake such as making a mistake in the location of the source code on the way, it was relatively easy to create. I want to improve it if possible (mainly UI side)