プログラミング独学・スクール・就職(目次)
プログラミング独学・スクール・就職(目次)
おすすめのプログラミングスクール めざせ就職・年収アップ!
おすすめのプログラミングスクール めざせ就職・年収アップ!
SEの転職活動で使うべきサイト・エージェント 目指せ年収アップ
SEの転職活動で使うべきサイト・エージェント 目指せ年収アップ
メンズクリア2年通い放題入会! その後のヒゲ状況(不定期更新)
メンズクリア2年通い放題入会! その後のヒゲ状況(不定期更新)
ブログ開始3年が経った月収が1万超えてた!
ブログ開始3年が経った月収が1万超えてた!
7年目で初の転職活動 2カ月で内定獲得した記録
7年目で初の転職活動 2カ月で内定獲得した記録
面接で評価されたプログラミング未経験者の学習方法
面接で評価されたプログラミング未経験者の学習方法
previous arrowprevious arrow
next arrownext arrow
 
Shadow
Django

Django独学 WEBページをリンクでページ遷移させる

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にユーザの詳細情報を表示する処理を呼び出すよう記述します。

※showDetailの処理はこの次に作成します。

これで、アプリのURL(…/user/)の後ろが数字だった場合、

views.pyのshowDetailを呼び出すよう記述できました。

views.pyにshowDetailを作成し、ページにユーザ情報を渡す

次に、ユーザ情報取得して、htmlページにユーザ情報を渡す処理を作ります。

※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セルにすべての情報を出力しています。

15行目~20行目について

渡した変数の「userinfoDetail.列名」で中身を取得できます。

 

また、25行目ではユーザ一覧に戻るようリンクを埋めています。

<a href=”{% url ‘showUsers’ %}”>ユーザ一覧へ</a>の書き方について。

urls.pyのurlpatternsで設定した名称を使って、遷移先を内部のリンクの場合指定できます。

内部リンクの名称について

名称はurls.pyのurlpatternsで設定した、name=の名称です。

今回のアプリで言うと、黄色で囲んでいるところが名称です。

以下になぜそんな書き方をするのかが載っていました。

DjangoアプリのURLリンクの貼り方とメリット

 

例えば、ユーザIDの1をURLに指定して、http://127.0.0.1:8000/users/1を表示すると…

表示できました!

データベースと同じ情報を表示できていますね。

ユーザ一覧のユーザ名から詳細ページのリンクにする

ここからはユーザ一覧(…/users/)のページから詳細ページへ移動するリンクを作成します。

users.htmlで各ユーザの詳細情報のリンクを設定する

リンクする先のURLは…/users/idになればOKです。

23行目を修正して、ユーザ名を出力するループ内でリンクを設定しています。

ページを表示するとこんな感じでうまくリンクになりました!

<a href=“{% url ‘showDetail’ user.id %}”>{{user.userName}}</a>

引数を渡してURLのリンクを作る方法

リンク先は先ほどユーザ一覧のリンクと同じように、名称を使って設定しています。

ただ、showDetailだけだと、idをURLにセットできません。

そこで、urlタグに引数を付けて渡すことができます。

Djangoのテンプレートのurlタグにパラメータをつける方法

Djangoは反復していけば理解も追いつく

ここまで2週間ほどDjangoの勉強をしてきました。

冬休みにテレビも見ず、1日9時間くらいやっています。

DjangoでWEBページにDBのユーザ情報データを表示させるの動画だけでは分からないことは、さらにググっています。

そうして、ようやくDjangoの考え方や動きに慣れてきました。

また、HTMLのこともちょっとは分かっていないとできないところもあると思うので、

良かったらHTMLやCSSのUdemyの動画も使って勉強してみて下さい。

プログラミングは「向き・不向き」を気にしなくてもいい 「プログラミングは論理的思考が必要だ」などと時々見ますが、あまり関係ないと私は感じています。 基本的には誰にでも仕事のレベ...
ABOUT ME
LooseCarrot
LooseCarrot
ブログ運営をしているLooseCarrotです。 興味のあることにトライして発信していきます! プロフィール
関連している記事