Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Django】Todoアプリを開発 #4 ~DetailView, Bootstrap~

Django

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20210924094721p:plain

おはようございます。Shotaです。

今回も前回と同様に、DjangoでTodoアプリを開発する方法を詳細に解説していきます。今回の記事で取り上げる内容は以下の通りです。

  • DetailView

  • BootStrapで見た目を整える



DetailView


URL設定

まずは、todo/urls.pyに移動して以下のようにコードを書きましょう。

todo/urls.py

from django.urls import path, include
from .views import TodoList, TodoDetail

urlpatterns = [
    path('', TodoList.as_view()),
    path('detail/<int:pk>', TodoDetail.as_view())
]

本記事では、Todoリストの詳細を表示するDetailViewとして、TodoDetailを作成しました。タスクの詳細ページを開く上では、「どのタスクを開くのか」ということをDjangoに命令しないと、Django側はどこを表示すればいいのかわからないので詳細に番号を命令する必要があります。そこで、primary_keyを使って設定します。これを指定することで個々のデータを取り出せます。

それでは、このviewを実際に書いていきます。


Viewの作成

todo/views.py

from django.shortcuts import render
from django.views.generic import ListView
from django.views.generic.detail import DetailView
from .models import TodoModel

class TodoList(ListView):
    template_name = 'list.html'
    model = TodoModel

class TodoDetail(DetailView):
    template_name = 'detail.html'
    model = TodoModel

タスクの中身を詳細に表示するだけなので、基本的な構造はTodoListと全く同じです。


HTMLファイルの作成

それでは、templatesフォルダの中にファイルdetail.htmlを作成していきましょう。

{{ object.title }}

これを書き終えたら、以上のファイルを試しに実行してみましょう。localhost:8000/detail/1(あるいは2)にアクセスしてデータが表示されたら成功です。

f:id:ShotaNukumizu_1000:20211029104110p:plain


Bootstrapで見た目を整える

次は、CSSフレームワーク「BootStrap」で見た目を整えていきます。まずは以下のサイトにアクセスしてください。

getbootstrap.jp

まずはスターターテンプレートをtemplates/detail.htmlに導入してください。(画像ファイル)

f:id:ShotaNukumizu_1000:20211029104503p:plain

templates/detail.html

<!doctype html>
<html lang="ja">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Sample Page</title>
</head>

<body>
    {{ object.title }}
    {{ object.memo }}
</body>

</html>

あと、body属性が十分に整っていないのでコードを探して貼り付けていきます。今回は試しに以下のコードを適用していきましょう。

f:id:ShotaNukumizu_1000:20211029105132p:plain

templates/detail.html

<!doctype html>
<html lang="ja">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Sample Page</title>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                {{ object.title }}
            </div>
            <div class="card-body">
                <p class="card-text">{{ object.memo }}</p>
            </div>
        </div>
    </div>
</body>

</html>

再度ブラウザをリロードして確認すると、以下のように表示されていると思います。見た目が整っていきました。

f:id:ShotaNukumizu_1000:20211029105721p:plain


まとめ

今回の記事では、Todoアプリを開発する方法を紹介しました。今回の記事では、DetailViewとBootStrapの説明、適用方法について詳細に書きました。

今回の記事はこれで終了です。