Djangoのユーザ管理アプリ作成の目次ページはこちらです。
Djangoの独学を2020年の12月末からしています。
DBからデータを抽出して表示させるところはDjangoでWEBページにDBのユーザ情報データを表示させるで行っています。
次は、リンクを表示させてみたいと思います。
因みに、私はUdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。
ブログで備忘録を兼ねて発信しています。
Djangoで実装する内容
DjangoでWEBページにDBのユーザ情報データを表示させるで作った名前を表示させるところから、修正をしていきます。
ユーザ名をリンクにさせます。
そして、リンクをクリックするとユーザ情報の詳細を表示させます。
キー情報はユーザIDで、URLは「…/users/IDの番号」になります。
[…/users/IDの番号]へアクセス時に、詳細情報を表示させる
まずは、idのURLへアクセスしたときに、ユーザの詳細情報を表示させるところを作ります。
流れとしては、以下です。
①…/users/1にアクセス
②ユーザIDが1のデータを抽出
③ページに詳細情報を表示させる
アプリのurls.pyにユーザの詳細情報を表示させる処理を追加
まずはアプリのurls.pyにユーザの詳細情報を表示する処理を呼び出すよう記述します。
|
1 2 3 4 5 6 |
urlpatterns = [ path('', views.showUsers, name='showUsers'), #ユーザの詳細情報を表示する処理を呼び出す path('<int:id>', views.showDetail, name='showDetail'), ] |
※showDetailの処理はこの次に作成します。
これで、アプリのURL(…/user/)の後ろが数字だった場合、
views.pyのshowDetailを呼び出すよう記述できました。
views.pyにshowDetailを作成し、ページにユーザ情報を渡す
次に、ユーザ情報取得して、htmlページにユーザ情報を渡す処理を作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
from django.shortcuts import render from django.http import HttpResponse #ユーザの詳細情報取得用に追加 from django.shortcuts import get_object_or_404 from .models import UserInfo # ユーザ情報を辞書に格納して、users.htmlに返す def showUsers(request): userinfo = UserInfo.objects.all() context = { 'msg': '現在の利用状況', 'userinfo': userinfo, 'count':userinfo.count, } return render(request, 'myapp/users.html',context) # URLから受取ったidをもとにユーザの詳細情報を取得して、detail.htmlへ返す def showDetail(request,id): #URLのidをもとに、ユーザ情報を抽出 userinfoDetail = get_object_or_404(UserInfo,pk=id) context = { 'userinfoDetail':userinfoDetail, } #detail.htmlへデータを渡す return render(request, 'myapp/detail.html',context) |
※detail.htmlはこの次に作成します。
追加箇所は、5行目と20~30行目です。
5行目のクラスimportについて
「from django.shortcuts import get_object_or_404」では、
ページが存在すれば表示、しなければ404エラーを出すクラスをimportしています。
20~30行目のshowDetailメソッドについて
idに一致するデータを抽出しています。
抽出したデータを辞書型のcontext変数へ格納して、detail.htmlへ渡しています。
ページ側でユーザの詳細情報を表示
detail.htmlは未作成のため、まず以下のようなHTMLを作成します。
配置場所：C:\django\myproject\myapp\templates\myapp\detail.html
htmlとPythonは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ユーザの詳細情報</title> </head> <body> <h1>ユーザの詳細情報です。</h1> <!-- テーブル --> <table> <tbody> <tr> <!-- 5列分ユーザ情報を出力 --> <td>ID：{{userinfoDetail.id}} <br> 名前：{{userinfoDetail.userName}} <br> 出身国：{{userinfoDetail.country}} <br> 住所：{{userinfoDetail.address}} <br> 性別：{{userinfoDetail.sex}} </td> </tr> </tbody> </table> <a href="{% url 'showUsers' %}">ユーザ一覧へ</a> </body> |
テーブルの1セルにすべての情報を出力しています。
15行目～20行目について
渡した変数の「userinfoDetail.列名」で中身を取得できます。
また、25行目ではユーザ一覧に戻るようリンクを埋めています。
<a href=”{% url ‘showUsers’ %}”>ユーザ一覧へ</a>の書き方について。
urls.pyのurlpatternsで設定した名称を使って、遷移先を内部のリンクの場合指定できます。
内部リンクの名称について
名称はurls.pyのurlpatternsで設定した、name=の名称です。
今回のアプリで言うと、黄色で囲んでいるところが名称です。
以下になぜそんな書き方をするのかが載っていました。
例えば、ユーザIDの1をURLに指定して、http://127.0.0.1:8000/users/1を表示すると…
表示できました！
データベースと同じ情報を表示できていますね。
ユーザ一覧のユーザ名から詳細ページのリンクにする
ここからはユーザ一覧(…/users/)のページから詳細ページへ移動するリンクを作成します。
users.htmlで各ユーザの詳細情報のリンクを設定する
リンクする先のURLは…/users/idになればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>ようこそ！</h1> <!-- テーブル --> <table border="1" style="border-collapse: collapse"> <thead> <tr> <!-- <th colspan="2">{{msg}}:{{count}}名</th> --> <th>{{msg}}:{{count}}名</th> </tr> </thead> <tbody> <!-- count件(行)数分をループ --> {% for user in userinfo %} <tr> <!-- 4列分ユーザ情報を出力 --> <td><a href="{% url 'showDetail' user.id %}">{{user.userName}}</a></td> </tr> {% endfor %} </tbody> </table> </body> |
23行目を修正して、ユーザ名を出力するループ内でリンクを設定しています。
ページを表示するとこんな感じでうまくリンクになりました！
<a href=“{% url ‘showDetail’ user.id %}”>{{user.userName}}</a>
引数を渡してURLのリンクを作る方法
リンク先は先ほどユーザ一覧のリンクと同じように、名称を使って設定しています。
ただ、showDetailだけだと、idをURLにセットできません。
そこで、urlタグに引数を付けて渡すことができます。
Djangoは反復していけば理解も追いつく
ここまで2週間ほどDjangoの勉強をしてきました。
冬休みにテレビも見ず、1日9時間くらいやっています。
DjangoでWEBページにDBのユーザ情報データを表示させるの動画だけでは分からないことは、さらにググっています。
そうして、ようやくDjangoの考え方や動きに慣れてきました。
また、HTMLのこともちょっとは分かっていないとできないところもあると思うので、
良かったらHTMLやCSSのUdemyの動画も使って勉強してみて下さい。
