36歳がDjangoを勉強してみた(ユーザ管理機能_番外編)
以前作成したランチマップアプリのコードを変更していきたいと思います。
【やったこと】
●ランチマップアプリの各リンクをBootstrapのボタンにしてみた
今回は、ランチマップアプリのリンクになっている部分をBootstrapを使ってボタンにしてみます。
この記事の通り行うと以下のようなアウトプットになります。
●一覧画面(設定前)
●一覧画面(設定後)
それではどのように作成するかコードを書いていきます。
今までの差分で設定するため、過去の設定内容は以下のマガジンを参照ください。
●今回の作業内容
・新規作成リンクをボタンに変更するため、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&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にブラウザでアクセスします。
まずは、一覧画面の新規リンクを確認します。
●一覧画面
ちゃんとリンクからボタンに代わっています。
続いて、詳細画面も確認してみます。
まずは編集前の画面です。
●詳細画面(設定前)
設定後です。
●詳細画面(設定後)
こちらもボタンで表示されています。また、編集削除は色が変わっていることが確認できました。
以上で今回の目的である、リンクをボタンに変更することができました。
本日はここまでです。
ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?