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

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

【Django】Todoアプリを開発 #5 ~テンプレート設定, タスク作成~

Django

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20210924094721p:plain

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

今回の記事では、DjangoでTodoアプリを開発するための手順として次のようなことをやっていきます。

  • テンプレート設定(base.html)
  • タスク編集(update.html)


それでは早速、本題に入りましょう。



テンプレート設定

最初に、テンプレートを設定します。Djangoでは同じ形のテンプレートを使い回すためには基盤となるhtmlファイルを用意してそれを使いまわしていきます。

まずは、templates/base.htmlファイルを作成し、以下のように書きましょう。

templates/base.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>
    {% block header %}
    {% endblock header %}

    
    {% block content %}
    {% endblock content %}
</body>

</html>

あと、templatesフォルダの中に入っているhtmlファイルの先頭に{% extends 'base.html' %}を書けばテンプレートを使い回す基本的な設定は完了です。

templates/list.html(せっかくなのでBootstrapを入れておく)

{% extends 'base.html' %}

{% block header %}
<h1>タスク一覧</h1>
{% endblock header %}

{% block content %}
{% for item in object_list %}
<div class="container">
    <h4>{{ item.title }}<a href="{% url 'detail' item.pk %}" class="btn btn-secondary">詳細</a></h4>
    <hr>
</div>
{% endfor %}
{% endblock content %}

templates/detail.html

{% extends 'base.html' %}


{% block header %}
<h1>詳細ページ</h1>
{% endblock header %}

{% block content %}
<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>
　<a href="{% url 'list' %}" class="btn btn-outline-primary">戻る</a>
</div>
{% endblock content %}

あとはtodo/urls.pyで以下のようにコードを書いてください。

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

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

変数urlpatternsの中にある関数pathの引数にnameがありますね。これは、htmlファイルに組み込んで使う時にnameの文字列でhtmlファイルを呼び出すときによく利用されます。

完成してサーバを立ち上げると、以下のようになります。

(画像)


タスク作成

今度は、新しいタスクを作成するためのコードを書いていきます。

まずはtodo/views.pyにアクセスして以下のコードを書いてください。

from django.views.generic import ListView
from django.views.generic.detail import DetailView
from .models import TodoModel
from django.views.generic.edit import CreateView
from django.urls import reverse_lazy

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

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

class TodoCreate(CreateView):
    template_name = 'create.html'
    model = TodoModel
    fields = ('title', 'memo', )
    success_url = reverse_lazy('list')

付け加えたコードは以下の通りです。

from django.views.generic.edit import CreateView
from django.urls import reverse_lazy

class TodoCreate(CreateView):
    template_name = 'create.html'
    model = TodoModel
    fields = ('title', 'memo', )
    success_url = reverse_lazy('list')

変数fieldsはフォームを作成する時に必要なものです。そして、success_urlにはデータの入力が正常に終了した時に遷移するURL先を設定します。

次に、todo/urls.pyに以下のような編集を加えていきます。

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

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

これでタスクを新しく作成するためのURLの遷移先を明確にできました。

あとはtemplates/create.htmlを作成して以下のように書くだけです。

{% extends 'create.html' %}

{% block header %}
<h1>タスク作成</h1>
{% endblock header %}

{% block content %}
<div class="container">
    <form method="POST">{% csrf_token %}
        <input class="form-control" type="text" placeholder="タイトル(全角50文字以内)" aria-label="default input example" name="title">
        <div class="form-floating">
            <textarea class="form-control" placeholder="タスク詳細" id="floatingTextarea2" name="memo"
                style="height: 150px"></textarea>
            <label for="floatingTextarea2">Comments</label>
        </div>
        <a href="{% url 'list' %}" class="btn btn-outline-success">戻る</a>
        <button type="submit" class="btn btn-success">投稿する</button>
    </form>
</div>
{% endblock content %}

実際にサーバを立ち上げて確認してみましょう。

画像

タスクを適当に入力して投稿してみましょう。

画像

これで無事に実装でき、簡単なTODOアプリを完成できましたね。


まとめ

今回の記事では、テンプレート設定やタスク作成を中心にDjango製のTodoアプリを開発する方法を詳細に書きました。

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