CRUDを実装する(CRUDのR)

はじめに

前回の続き↓で本棚アプリケーションを作成していきます。
urhayataro.hatenablog.com

CRUDの実装を行い、webページのレイアウトを整えていきます。
今回メインで行うのは、CRUDのRであるwebサイトからの読み込みの実装です。

CRUDとは

CRUDとはwebサイトでユーザーが行う動作のことであり、以下の頭文字をとったものです。

  • C - Create
  • R - Read
  • U - Update
  • D - Delete

Cは作成する、投稿する、Rは読み込む、Uは更新する、Dは削除するという意味となっています。
Djangoではviews.pyでクラスの継承を用いてCRUDの実装をします。対応しているViewは、以下のようになります。

  • C - CreateView
  • R - ListView, DetailView
  • U - UpdateView
  • D - DeleteView

以上のviewを継承することでこれからCRUDを実装していきます。


本の一覧画面の作成

まず、本の一覧を表示するListViewという画面を作成していきます。
ListViewはCRUDでいうR(読み込み)の所です。
はじめにbook/urls.pyに以下の記述をします。

from django.urls import path
from . import views

urlpatterns = [
    path('book/', views.ListBookView.as_view()),
]

pathで書いてあるように、urlにbook/が含まれていると、views.pyでListBookViewと定義されたviewを呼び出すようにしています。
では次にviews.pyでListBookViewを定義しています。

from django.shortcuts import render
from django.views.generic import ListView
from .models import Book

class ListBookView(ListView):
    template_name = 'book/book_list.html'
    model = Book

それから、book/models.pyも書き込んでいきます。本棚アプリケーションで必要となる、本のタイトル、内容、カテゴリーといった情報を扱えるようにします。

from django.db import models

# Create your models here.
CATEGORY = (('business', 'ビジネス'), ('life', '生活'), ('other', 'その他'))

class Book(models.Model):
    title = models.CharField(max_length=100)
    text = models.TextField()
    category = models.CharField(
        max_length=100,
        choices = CATEGORY
    )

CATEGORYについては適当に何でも構いません。クラスBookはmodelsモジュールのModelクラスを継承するようにします。

そして、結果を管理画面で見ていくため、モデルを反映させます。book/admin.pyに以下の記述をしていきます。

from django.contrib import admin
from .models import Book
# Register your models here.

admin.site.register(Book)

ここまでできれば前回学んだ以下のコマンドを実行してみます。

python3 manage.py makemigrations
python3 manage.py migrate

できれば以下のような画面が表示されます。

それからサーバーを立てて、管理画面の表示をしていきます。

python3 manage.py runserver

立ち上げられたら127.0.0.1:8000/admin/にアクセスします。すると、管理画面にBooksが追加されています。

これで、Booksの横の＋Addを押して、適当な本のデータを追加してみます。すると管理画面は以下のようになります。

ただBook object(1)のようになっており、このままでは何の本かわかりません。
ここには本のタイトルを表示させたいので、book/models.pyに以下の記述を追加します。

from django.db import models

# Create your models here.
CATEGORY = (('business', 'ビジネス'), ('life', '生活'), ('other', 'その他'))

class Book(models.Model):
    title = models.CharField(max_length=100)
    text = models.TextField()
    category = models.CharField(
        max_length=100,
        choices = CATEGORY
    )

    def __str__(self): # 追加
        return self.title # 追加

__str__とすることで、オブジェクトの文字列を返すようにしています。また、selfを引数にとり、self.titleを返すことでオブジェクトのタイトルを返すようにしています。これでブラウザを再読み込みして、タイトルが書かれていれば成功です。


では今度はhtmlを使い、データの一覧（タイトル、内容、カテゴリー）を表示させます。
まず、templatesというディレクトリでhtmlファイルを作成していきます。このディレクトリはbookproject/book/に作成し、その中でbook_list.htmlファイルを作成します。

cd ~/bookproject/book
mkdir templates
cd templates
mkdir book
touch book_list.html

ファイルの作成ができれば、book/templates/book_list.htmに以下の記述をします。

{% for item in object_list %}
<ul>
    <li>{{ item.title }}</li>
    <li>{{ item.text }}</li>
    <li>{{ item.category }}</li>
</ul>
{% endfor %}

1行目と最終行目はfor文のようなもので、中にあるitemのタイトル、内容、カテゴリーを全て表示させるような記述となっています。
また、タグを用いて見た目を少し整えるようにしています。

これでサーバーを立ち上げ、今度は127.0.0.1:8000/book/にアクセスします。
先程適当に本棚アプリケーションに追加した、タイトル、内容、カテゴリーが一覧で表示されていれば成功です。


本の詳細ページの作成

次に、ListViewと同じくCRUDのR(読み込み)であるDetailViewを作成していきます。
はじめに、book/urls.pyに以下を追加します。

from django.urls import path
from . import views

urlpatterns = [
    path('book/', views.ListBookView.as_view()),
    path('book/<int:pk>/detail', views.ListBookView.as_view()), # 追加
]

ここで追加したところのについてはBookモデルのどのデータを取るのかというのを明確にするために記述しています。
これは、int primarykeyの略でデータベースがデータを特定するときに使うものです。空でも重複しているわけでもないデータを整理するためのキーであり、前回の記事のモデルの作成で説明した図のidの部分を指します。は、idの番号のデータを明示するために使用しています。


それからListViewと同じように、book/views.pyにも以下を追加します。

from django.shortcuts import render
from django.views.generic import ListView, DetailView # 追加
from .models import Book

# Create your views here.
class ListBookView(ListView):
    template_name = 'book/book_list.html'
    model = Book

class DetailBookView(DetailView): # 追加
    template_name = 'book/book_detail.html' # 追加
    model = Book # 追加


次にbook_list.htmlと同じ場所にbook_detail.htmlの作成をします。

touch book/templates/book/book_detail.html

作成したファイルにhtml記述をしていきますが、今回は本ごとの詳細を読み込みたいので、book_listとは違い、for文が不要です。
ではbook_detail.htmlに以下の記述をします。

{{ object.catefory }}
{{ object.title }}
{{ object.text }}

できれば、127.0.0.1:8000/adminにアクセスします。そして、適当な本を選択します。
本を選択してidを確認します。idの確認はurlを見ます。127.0.0.1:8000/admin/book/book/id/change/となっているところのidを見ます。具体的には1や2などの数字が入っているはずです。

このidを確認して127.0.0.1:8000/book/id/detailにアクセスします。するとそのidの本のカテゴリー、タイトル、内容が一行に表示されます。
これで本の詳細ページも読み込むことができました。


おわりに

今回は、CRUDとはなにかについて触れ、Rである、ListViewとDetailViewの記述をすることで本の一覧や詳細ページの作成をしました。
今回作成したのはシンプルすぎるので、次回はbootstrapを利用して見た目を整えたり、CRUDのR以外の部分の実装もしていきます。

続き
urhayataro.hatenablog.com