36歳がDjangoを勉強してみた（ユーザ管理機能_番外編）

以前作成したランチマップアプリのコードを変更していきたいと思います。

【やったこと】

●ランチマップアプリの各リンクをBootstrapのボタンにしてみた

今回は、ランチマップアプリのリンクになっている部分をBootstrapを使ってボタンにしてみます。

この記事の通り行うと以下のようなアウトプットになります。

●一覧画面（設定前）

●一覧画面（設定後）

それではどのように作成するかコードを書いていきます。

今までの差分で設定するため、過去の設定内容は以下のマガジンを参照ください。

【有料】36歳がDjangoで管理機能を作ってみた｜shin@習慣化&セルフコントロールアドバイザー｜note

●今回の作業内容

・新規作成リンクをボタンに変更するため、shop_list.htmlを編集する
・一覧/編集/削除リンクをボタンに変更するため、shop_detail.htmlを編集する

●作業開始

・新規作成リンクをボタンに変更するため、shop_list.htmlを編集する

Bootstrapを使ってリンクをボタンにするため、shop_list.htmlのコードを変更します。

ファイル：myapp>lunchmap>templates>lunchmap>shop_list.html

コード：

{% extends 'layout.html' %}
{% block content %}
   <h1>お店一覧</h1>
   <table class='table table-striped table-hover'>
       <tr>
           <th>カテゴリ</th><th>店名</th><th>住所</th>
       </tr>
       {% for shop in object_list%}
       <tr>
           <td>{{ shop.category.name }}</td>
           <td><a href='{% url "lunchmap:detail" shop.pk %}'>{{ shop.name }}</a></td>
           <td>{{ shop.address }}</td>
       </tr>
       {% endfor %}
   </table>

   {% if user.is_authenticated %}
       <div>
           <a href='{% url "lunchmap:create" %}' class="btn btn-primary"> 新規作成</a> #修正
       </div>
   {% endif %}

{% endblock %}

変更箇所は、新規作成リンクのところに、「class="btn btn-primary"」を追加するだけです。

続いて、詳細画面の一覧・編集・削除リンクも同様に変更してみます。

・一覧/編集/削除リンクをボタンに変更するため、shop_detail.htmlを編集する

ファイル：myapp>lunchmap>templates>lunchmap>shop_detail.html

コード：

{% extends 'layout.html' %}
{% block content %}
   <h1>{{ shop.name }}</h1>
   <div>
       <p>{{ shop.category.name }}</p>
       <p>{{ shop.address }}</p>
   </div>
   <iframe id = 'map'
           src='https://www.google.com/maps/embed/v1/place?key=AIzaSyDLRnEsQItb0bMky9LbAGZMmNCdAZpzJ2o&amp;q={{ shop.address }}'
           width='100%'
           height='320'
           frameborder=='0'>
   </iframe>
   <div>
       <a href='{% url "lunchmap:index" %}' class="btn btn-primary">一覧</a>　#修正
       {% if request.user.id == object.author_id %}
           <a href='{% url "lunchmap:update" shop.pk %}' class="btn btn-secondary">編集</a>　#修正
           <a href='{% url "lunchmap:delete" shop.pk %}' class="btn btn-secondary">削除</a>　#修正
       {% endif %}
   </div>

{% endblock %}

こちらも同様に修正します。

ただし、編集と削除は、「class="btn btn-secondary"」にして色を変えてみます。

以上で設定は完了なので動作確認をします。

サーバを起動して確認します。

cd myapp
python manage.py runserver

次のURLにブラウザでアクセスします。

http://localhost:8000/

まずは、一覧画面の新規リンクを確認します。

●一覧画面

ちゃんとリンクからボタンに代わっています。

続いて、詳細画面も確認してみます。

まずは編集前の画面です。

●詳細画面（設定前）

設定後です。

●詳細画面（設定後）

こちらもボタンで表示されています。また、編集削除は色が変わっていることが確認できました。

以上で今回の目的である、リンクをボタンに変更することができました。

本日はここまでです。

ありがとうございました。