Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリの作ったので、ソースコードを公開します。

良ければ勉強の参考にしてみて下さい。

デモ動画です。

ユーザ管理アプリの機能

以下の3つです。

• ユーザを表示する
• ユーザを更新する
• ユーザを追加する

ソースコードの使い方

以下の手順でブラウザで使用可能です。

①ソースコード準備

BASE購入後にメールが送信されます。

メールに記載のURLからソースコードをダウンロードしておいてください。

その後、ZIPファイルを解凍した状態にしておいてください。

②「myproject」のプロジェクト作成

C:\直下に「django」フォルダを作成しておいてください。

その後、以下をコマンドから実行してください。

cd C:\django
python -m django startproject myproject

これで「C:\django\myproject」のフォルダができるはずです。

③ソースコードの入れ替え

①C:\django\myprojectの中身をすべて削除してください。

②その後、画像のようにダウンロードしたmyprojectの中身をコピペしてください。

bootstrap4のインストール

bootstrap4を使っています。

以下でインストール可能です。

pip install django-bootstrap4

サーバを起動

以下コマンドでサーバを起動します。

cd C:\django\myproject
python manage.py runserver

その後、以下にアクセスするとアプリのページが表示されます。

http://127.0.0.1:8000/users/

ソースコードをダウンロード

2021年2月14日のバレンタインデーのことです。

一人家でPCに向かい続けながら、

文系出身のSEですが、開発してみた (loosecarrot.online)というサイトを立ち上げました。

Djangoは2020年の年末に独学を初めて2か月たった状態でした。

意外とすぐにサイト立ち上げもできるのだなと感じました。

webアプリサイトを立ち上げた理由

単純に興味が湧いて面白いから

私は開発現場からは離れてしまっています。

でもプログラミングで何かを作ることはやっぱり楽しいです。

「サイトは自分で作ってことがないし、面白そうだからやってみよう」と思って作りました。

DjangoやPythonを2020年末の冬休みに習得しようと思えたのも、やっぱり面白いからです。

ちなみにUdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！をで勉強しました。

仕事を個人としても受けていく窓口にするため

理由の大部分はお金を稼ぎたいと夢を見ているからです。

クラウドワークスやランサーズなどのサイトで少しずつお仕事を受けています。

ですが、いまいち自分のできることが相手に伝えられないなと感じていました。

なので、自分はこんなものを作っているんですよと分かりやすいサイトを作ろうと思いました。

また、現状は仕事を受けるワーカーたちは安い単価でしか仕事を受けられません。

理由はおそらく、仕事に応募する側が何人もいて、1人だけが選ばれるという仕組みの中で仕事をしているからです。

であれば、自分が応募するのではなく、相手から依頼をしてもらえる形の方が良いかなと思ってサイトを作りました。

実際どうなるか分かりませんがね…

プログラミング独学のモチベーションのため

プログラミングの独学はとてもモチベーション維持が難しいです。

一つの手段として、サイト作成で独学のモチベーションを継続しようとしました。

プログラミングの独学が難しい理由 プログラミングの独学をしていても、難しくて行き詰ってしまうことってよくあると思います。 私も中小のIT関係会社に勤めていま...

サイトを通してお金を稼ぐということはモチベーションの一つでもあります。

なので、技術を身に着けたいという思いと、お金を稼ぎたいという思いのどちらが先かは分かりません。

でも、サイトを作ると問合せや相談が多少なりともあります。

それが、独学やサイトを継続していくためのモチベーションにはなっています。

サイトの内容

ネットショップ運営やせどりに役立つツール作成をしていこうと思っています。

最近はコロナや副業解禁の流れに乗ってネット通販需要が増えており、それに伴ってITがらみの仕事も増えつつあるためです。

簡易なツール作成を通して、技術の向上を目指していきます。

また、依頼があれば開発も個人で受けていこうとしています。

なかなか無茶を言うお客さんも多いので、うまくいかないことも多いと思いますが…

発注側・受注側両方ともプロであれ! 今後、個人スキル売買に必要なこと 某個人スキルの売り買いサイトで相談を受けました。 タイムチケットやココナラのようなサイトの話です。 3日ほどやり取り...

RPAの活用も考えており、技術的なことやサンプルで作ったものを発信していきます。

参考にですが、食いつきが良かったものはBASEの自動登録でした。

構築した環境

・サーバ：さくらのVPS

・OS:LinuxのCenOS7

・フレームワーク：Django 3.1

・言語：Python 3.9

HTMLテンプレート：テンプレートパーティのHTMLテンプレ

ちなみに私が使ったのはビジネスサイト向け無料ホームページテンプレートtp_biz44【2017/04/27公開】です。

構築のコスト

時間面

60時間くらいはかけたと思います。

日数にして10日くらいの間かかったはずです。

平日は20時～24時まで、休日は11時くらいから23時くらいまでほぼひたすらPCに向かっていました(笑)

1週間くらいで自分だけでは無理と判断しました。

LinuxやDjangoの知識がないためです…

金銭面

初期構築としては1万円です。

一人ではできなかったのでクラウドワークスでclspecialistさんという方にお手伝いいただきました。

そのうち構築手順も紹介していこうかと思います。

ちなみに運営費はサーバ台の月600円程度もあります。

これからサイトを成長させていく

今はサイトを立ち上げたばかりなので、サイト経由の収入も仕事依頼もありません。

まずはツールやコンテンツを増やそうと思います。

SEO対策なども行い自分のサイトを検索上位に乗せて、お仕事がもらえるような構想を練っていこうと考えています。

備忘録として残しておきます。

インポートするモジュールと作成するアプリ、プロジェクト名は一致させないように注意という話です。

起こったこと：モジュールはあるが、ModuleNotFoundErrorが出る

pipコマンドでamazon-paapi5をインストールしました。

モジュールを参照しようとすると以下でModuleNotFoundErrorが出る…

from amazon.paapi import AmazonAPI

from amazon.paapi import AmazonAPI

以下コマンドを使ってインストール先を確認してみても、ちゃんとインストールされている。

pip show amazon-paapi5

実行結果

Name: amazon-paapi5
Version: 1.1.2
Summary: Amazon Product Advertising API 5.0 wrapper for Python
Home-page: https://github.com/alefiori82/amazon-paapi5
Author: Alessandro Fiori
Author-email: alessandro.fiori@gmail.com
License: GPL-3.0
Location: c:\pg\python39\lib\site-packages
Requires: amightygirl.paapi5-python-sdk

フォルダもちゃんと存在していることを確認しました。

原因：アプリ名のフォルダ

結論、アプリ名が参照モジュールと同じamazonフォルダだったことでした。

from amazon.paapiの意味としては

amazonフォルダ内のpaapi.pyを参照するです。

恐らく、「プロジェクトのamazonフォルダを見に行ったけど、paapi.pyなんてありません」ということでエラーになっていたようです。

対応はプロジェクト名を変更して作り直し

対応としては、プロジェクト名をamazon→AmazonAppという別名にして作り直しました。

これでエラーが出なくなりました。

プロジェクト名やファイル名には気を付けましょう。

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

今回は、フォーム機能を使ってDBへ新規登録をさせます。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

また、フォームを扱っていくのでHTMLの基本的な知識がある方でないとも難しいかもしれません。

更新処理の流れ

登録の時と同じで、以下の流れです。

この順番で処理を作成していきます。

Django独学 フォームを使ってDBに新規登録をする Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

①入力フォームをリクエストから呼び出す(urls.py)

まず最初に「～users/edit/id」と言うURLをユーザー更新のURLにします。

そのために、URLへアクセスされたときの動作をアプリのurls.pyに記入します。

from django.urls import path
from . import views
#import views

urlpatterns = [
    path('', views.showUsers, name='showUsers'),

    #ユーザの詳細情報を表示する処理を呼び出す
    path('<int:id>', views.showDetail, name='showDetail'),
    #ユーザの登録フォームを呼び出す
    path('create', views.showCreateUserForm, name='showCreateUserForm'),
    #ユーザ登録する処理を呼び出す
    path('add', views.addUser, name='addUser'),
    #ユーザ編集するフォームを呼び出す
    path('<int:id>/edit', views.showEditUserForm, name='showEditUserForm'),
]

15行目に追記をしました。

※この次にviews.pyの説明を記載します。

一旦viewsのことは置いておいて、やっていることだけ理解してみて下さい。

path(‘<int:id>/edit’, views.showEditUserForm, name=’showEditUserForm’),の解説です。

‘<int:id>/edit’：URLがusers/id/edit/場合の指定した処理を呼ぶという意味

views.showEditUserForm：views.pyのshowEditUserFormの処理を呼ぶという意味です。

name=’showEditUserForm’：リンク先に指定するときの名前で後で使います。

②編集フォームをブラウザに表させる

新規登録フォームは入力欄は空白でしたが、

編集フォームではユーザの情報をフォームに表示させます。

そのため、

以下の流れになります。

ブラウザに編集フォームを表示させる(views.py)

①～③はすべてviews.pyで作ります。

以下を追記しています。

# 編集フォームをHTMLへ返す
def showEditUserForm(request,id):

    #idをもとにユーザ情報を取得
    userinfo = get_object_or_404(UserInfo,pk=id)
    #フォームをオブジェクトを作成
    userForm = UserForm(instance=userinfo)
    
    #ユーザ情報をフォームに格納
    context = {
        'userinfo':userinfo,
        'userForm':userForm,
    }

    #user.htmlへデータを渡す
    return render(request, 'myapp/edit.html',context)

5行目で更新対象のユーザ情報を取得しています。

7行目ではフォームをインスタンス化して、

16行目でHTML側に情報を渡しています。

ユーザ情報は更新した後に、対象のユーザページを表示するために渡しています。

フォームを表示するHTML作成(edit.html)

edit.htmlはまだ作っていないので、以下に作成します。

C:\django\myproject\myapp\templates\myapp

htmlの中身は以下です。

{% extends './base.html' %}
{% load bootstrap4 %}

{% block app %}
    <h1>ユーザ編集</h1>

    <form action='{% url "showUsers" %}' method='post' class='form'>
        <!-- ユーザー編集フォームを表示 -->
        {% csrf_token %}
        {% bootstrap_form userForm %}
        <button type='submit' class='btn btn-outline-primary'>更新</button>
        <a href='{% url "showUsers" %}' class='btn btn-outline-secondary'>戻る</a>
    </form>
{% endblock %}

ほとんどcreate.htmlのコピペです。

ボタンクリック時のactionで呼び出す関数を変えるだけです。

※ユーザを更新する処理はこの次に書きます。

今はエラー回避のためにユーザ一覧へ遷移するようにしています。

表示させてみるとこんな形で、idをもとにユーザ情報を表示できています。

③フォームに入力したデータを登録後、結果表示

現状は更新ボタンクリック時にユーザ一覧を表示していますが、ユーザ一情報を更新する処理を呼ぶようにします。

まずは更新ボタンをクリックした後、DBに登録する処理を作っていきます。

更新処理を呼び出す(urls.py)

まずはurls.pyにユーザを更新する処理を呼ぶように記載します。

#ユーザ更新する処理を呼び出す
path('<int:id>/update', views.updateUser, name='updateUser'),

この処理をアプリのurls.pyに追記します。

編集フォームの時と同じで、

<int:id>/updateのURLであれば、viewsのupdateUserを呼び出すという意味です。

updateUserの処理は次で作成します。

ユーザ情報DBに更新する処理を作成(views.py)

処理の流れとしては、以下になります。

以下の処理を追加して①②両方ともviews.pyに記載しています。

#～～～～～～～～～～～～～～～～～
# フォームから受取ったデータをDBに更新する
def updateUser(request,id):
    #リクエストがPOSTの場合
    if request.method == 'POST':
        #idからユーザデータを取得
        userInfo = get_object_or_404(UserInfo,pk=id)
        #ユーザ情報と、リクエストをもとにフォームをインスタンス化
        userForm = UserForm(request.POST,instance=userInfo)
        if userForm.is_valid():
            userForm.save()

    #更新後、対象ユーザの情報を表示
    userInfo = get_object_or_404(UserInfo,pk=id)
    context = {
        'userinfoDetail': userInfo,
    }

    #detail.htmlへデータを渡す
    return render(request, 'myapp/detail.html',context)

9行目について

userFormに変数にPOSTで受取った情報と、対象ユーザーの情報を入れています。

11行目のuserForm.save()

登録の時と同じsave()を使っています。

なぜ全く同じメソッドを呼んで、登録と更新が勝手に分かれるのか調べてみたところ、djangoの仕様で以下になっているそうです。

既にプライマリキーがあるデータの条件を指定した場合は、INSERTでなく
UPDATE SQL 文が実行されます。

Django SQL データベース INSERT UPDATE 追加更新方法 save() create() add() update()

userFormの引数になっているuserInfoはPKが入っているので、自動的に更新になります。

デバッグ実行で止めて、userForm → instanceとたどっていくと、確かにプライマリキー(pk)がありました。

14行目～20行目で、更新した後のユーザ情報を取得して、詳細ページに表示させています。

更新ボタンクリック後にupdateUserを呼ぶ(edit.html)

これでユーザ更新する処理が作成できました。

最後に、edit.htmlの更新ボタンクリックした後の処理を書き換えます。

{% extends './base.html' %}
{% load bootstrap4 %}

{% block app %}
    <h1>ユーザ編集</h1>

    <form action='{% url "updateUser" userinfo.id %}' method='post' class='form'>
        <!-- ユーザー編集フォームを表示 -->
        {% csrf_token %}
        {% bootstrap_form userForm %}
        <button type='submit' class='btn btn-outline-primary'>更新</button>
        <a href='{% url "showUsers" %}' class='btn btn-outline-secondary'>戻る</a>
    </form>
{% endblock %}

7行目の{% url “showUsers” %}を

{% url “updateUser” userinfo.id %}に書き換えました。

これで、ユーザー詳細ページに遷移できます。

編集フォームを呼び出すshowEditUserFormで、userinfoをHTMLへ渡していたのは、

ユーザ情報のidを遷移先のURLにするためです。

localhost:8000/users/1/editにアクセスして、

事項紹介のサッカーを野球にして更新ボタンを押してみると。

更新されて、「サッカー」が「野球」に変わりました！

ユーザ編集ボタンをユーザ一覧に作成(users.html)

最後に、このままだとユーザ編集画面に行くことができません。

なのでユーザ一覧画面に、編集ボタンを作っておきます。

{% extends './base.html' %}
{% block app %}

    <h1>ようこそ！</h1>
    <!-- テーブル -->
    <table class="table table-striped table table-bordered ">
        <thead>
            <tr>
                <th colspan="3">{{msg}}:{{count}}名</th>
            </tr>
        </thead>
        <tbody align="center">
            <!-- count件(行)数分をループ -->
            {% for user in userinfo %}
            <tr>
                <!-- 4列分ユーザ情報を出力 -->
                <td>{{user.userName}}</td>
                <td><a href="{% url 'showDetail' user.id %}" class="btn btn-outline-primary">詳細</a> </td>
                <!-- 編集ボタン -->
                <td><a href="{% url 'showEditUserForm' user.id %}" class="btn btn-outline-primary">編集</a> </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <a href="{% url 'showCreateUserForm' %}" class='btn btn-outline-primary'>ユーザ追加</a>
    
{% endblock %}

20行目でユーザ編集ボタンを追加しました。

引数にはユーザ情報のidをセットしています。

これで編集ボタンが追加できました。

(おまけ)ModelFormに複数行入力のテキストエリアを表示(forms.py)

よく見てみると、自己紹介は500文字まで入力可能なのに、改行をすることができませんでした…

テキストボックスではなく、テキストエリアに変えてあげればOKです。

forms.pyを以下のように修正しました。

from django import forms
from . models import UserInfo

class UserForm(forms.ModelForm):
    class Meta:
        model = UserInfo
        fields = ('userName', 'country','sex','address','selfIntroduction')
        labels={
           'userName':'名前',
           'country':'出身国',
           'address':'住所',
           'sex':'性別',
           'selfIntroduction':'自己紹介',
           }
	    
        #自己紹介をテキストエリアにする
        widgets = {
            'selfIntroduction': forms.Textarea(attrs={'rows':4, 'cols':30}),
        }

17行目の記述方法でテキストエリアに変えることができます。

今回はここまでです！

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

今回は、フォーム機能を使ってDBへ新規登録をさせます。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

また、フォームを扱っていくのでHTMLの基本的な知識がある方でないとも難しいかもしれません。

フォームとは

Djangoにはフォームクラスが存在します。

フォームクラスを定義して、入力フォームをHTMLのテンプレートへ渡すことができます。

そうすることで、入力フォームがHTML上で表示できます。

また、フォームで入力された内容を元にDBへ登録させることもできます。

フォームを使った処理の流れ

まず、フォームを使った表示、データ更新の流れを整理しておきます。

これから作っていく内容を流れとして理解しておきましょう。

この順番で処理を作成していきます。

①入力フォームをリクエストから呼び出す(urls.py)

まず最初に「～users/create」と言うURLを新規ユーザー登録のURLにします。

そのために、URLへアクセスされたときの動作をアプリのurls.pyに記入します。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.showUsers, name='showUsers'),

    #ユーザの詳細情報を表示する処理を呼び出す
    path('<int:id>', views.showDetail, name='showDetail'),

    #ユーザの登録フォームを呼び出す
    path('create', views.showCreateUserForm, name='showCreateUserForm'),
]

11行目に追記をしました。

※この次にviews.pyの説明を記載します。

一旦viewsのことは置いておいて、やっていることだけ理解してみて下さい。

path(‘create’, views.showCreateUserForm, name=’showCreateUserForm’),の解説です。

‘create’：URLがusers/create場合の指定した処理を呼ぶという意味

views.showCreateUserForm：指定した処理が何かというと、views.pyのcreateUserです。

name=’showCreateUserForm’：リンク先に指定するときの名前で後で使います。

②入力フォームをブラウザに表させる

ここをもう少しかみ砕くと、以下の流れになります。

modelからフォーム作成(forms.py)

「C:\django\myproject\myapp」の下にforms.pyを作成します。

そして、以下のように記載します。

from django import forms
from . models import UserInfo

class UserForm(forms.ModelForm):
    class Meta:
        model = UserInfo
        fields = ('userName', 'country','sex','address','selfIntroduction')
        labels={
           'userName':'名前',
           'country':'出身国',
           'address':'住所',
           'sex':'性別',
           'selfIntroduction':'自己紹介',
           }

やっていることは、model(DBの定義情報)を使って、フォームを定義しています。

ModelFormを継承したクラスの場合、データベースアクセスに関連する情報を入れることができます。

こういう書き方ができるのねと理解しておいてください。

5行目：class Meta:以降にフォームの情報を定義する

6行目：modelはUserInfoクラスを使うようにしています

7行目：フォームで使う列は5つということです。

8行目：ラベル属性を各列に対して指定しています。

ラベルを指定しないと、HTMLに表示したときに、英語の列名がそのまま表示されます。

こうすることで、入力欄のラベルが日本語になります。

ブラウザにフォームを表示させる(views.py)

views.py側で呼び出されるcreateUserメソッドを作成していきます。

内容は以下です。

from .forms import UserForm


#～～～～～～～～～～～～～～～～～
# 新規登録フォームHTMLへ返す
def showCreateUserForm(request):
    #フォームを変数にセット
    form = UserForm()

    context = {
        'userForm':form,
    }

    #detail.htmlへデータを渡す
    return render(request, 'myapp/create.html',context)

UserFormをimportしています。

8行目でform変数にUserFormのインスタンスを格納しています。

10行目でcontext辞書に格納

15行目でcreate.htmlへcontextを渡しています。

フォームを表示するHTML作成(create.html)

create.htmlはまだ作っていないので、以下に作成します。

C:\django\myproject\myapp\templates\myapp

htmlの中身は以下です。

{% extends './base.html' %}

{% block app %}
    <h1>ユーザ登録</h1>

    <form action='{% url "showUsers" %}' method='post' class='form'>
        <!-- ユーザー登録フォームを表示 -->
        {% csrf_token %}
        {{ userForm }}
        <button type='submit' class='btn btn-outline-primary'>登録</button>
        <a href='{% url "showUsers" %}' class='btn btn-outline-secondary'>戻る</a>
    </form>
{% endblock %}

9行目でフォームの中に格納したform情報を表示させています。

8行目の{% csrf_token %}はリクエストが正常なものかをチェックしてくれるもので、今のところはおまじない的な理解で良いと思います。

6行目で登録ボタンクリックを受取るとshowUsers呼び出して、ユーザ一覧へ遷移する

※ユーザを登録する処理はこの次に書きます。

今はエラー回避のためにユーザ一覧へ遷移するようにしています。

表示させてみると、なんかレイアウトがぐちゃぐちゃ…

DjangoでフォームにBootstrapを適用するには、普通のHTMLのようにはできません。

なので、端末にダウンロードしたBootstrapを適用させます。

何やら頑張れば適用もできるようですが、私はこちらの方法は使いませんでした。

ダウンロードしたBootstrapをformに適用

まずはコマンドプロンプトでBootstrapを端末にインストールします。

pip install django-bootstrap4

次に、settings.pyからBootstrap4を認識させます。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    #追記
    'myapp.apps.MyappConfig',
    # django-bootstrap4
    'bootstrap4',
]

12行目で追加をしています。

これで準備ができたので、先ほどのcreate.html上でBootstrapを適用させます。

{% extends './base.html' %}
{% load bootstrap4 %}

{% block app %}
    <h1>ユーザ登録</h1>

    <form action='{% url "showUsers" %}' method='post' class='form'>
        <!-- ユーザー登録フォームを表示 -->
        {% csrf_token %}
        {% bootstrap_form userForm %}
        <button type='submit' class='btn btn-outline-primary'>登録</button>
        <a href='{% url "showCreateUserForm" %}' class='btn btn-outline-secondary'>戻る</a>
    </form>
{% endblock %}

2行目でBootstrapを読み込んでいます。

10行目でフォームに対してBootstrapを適用させています。

表示結果はこうんな感じになりました。

③フォームに入力したデータをサーバに渡して登録、その後表示

現状は登録ボタンクリック時にユーザ一覧を表示していますが、ユーザ一を登録する処理を呼ぶようにします。

まずは登録ボタンをクリックした後、DBに登録する処理を作っていきます。

登録処理を呼び出す(urls.py)

まずはurls.pyにユーザ追加の処理を呼ぶように記載します。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.showUsers, name='showUsers'),

    #ユーザの詳細情報を表示する処理を呼び出す
    path('<int:id>', views.showDetail, name='showDetail'),
    #ユーザの登録フォームを呼び出す
    path('create', views.showCreateUserForm, name='showCreateUserForm'),
    #ユーザ登録する処理を呼び出す
    path('add', views.addUser, name='addUser'),
]

12行目でviewsのaddUserを呼ぶように記載しています。

addUserの処理は次で作成します。

ユーザをDBに追加する処理を作成(views.py)

処理の流れとしては、以下になります。

以下の処理を追加して①②両方ともviews.pyに記載しています。

#～～～～～～～～～～～～～～～～～
# フォームから受取ったデータをDBに登録する
def addUser(request):
    #リクエストがPOSTの場合
    if request.method == 'POST':
        #リクエストをもとにフォームをインスタンス化
        userForm = UserForm(request.POST)
        if userForm.is_valid():
            userForm.save()

    #登録後、全件データを抽出
    userinfo = UserInfo.objects.all()
    context = {
        'msg': '現在の利用状況',
        'userinfo': userinfo,
        'count':userinfo.count,

    #user.htmlへデータを渡す
    return render(request, 'myapp/users.html',context)

4～9行目でPOSTのリクエストであれば、登録するという処理をしています。

11～19行目はユーザ一覧と同じ処理で、ユーザを全件取得して表示させています。

登録ボタンクリック後にaddUserを呼ぶ(create.html)

これでユーザ登録する処理が作成できました。

最後に、create.htmlの登録ボタンクリックした後の処理を書き換えます。

{% extends './base.html' %}
{% load bootstrap4 %}

{% block app %}
    <h1>ユーザ登録</h1>

    <form action='{% url "addUser" %}' method='post' class='form'>
        <!-- ユーザー登録フォームを表示 -->
        {% csrf_token %}
        {% bootstrap_form userForm %}
        <button type='submit' class='btn btn-outline-primary'>登録</button>
        <a href='{% url "showCreateUserForm" %}' class='btn btn-outline-secondary'>戻る</a>
    </form>
{% endblock %}

7行目をshowUsers→addUserに書き換えました。

http://localhost:8000/users/createにアクセスして、

ユーザ情報を入力して試しに登録をしてみると。

上手く登録されて、一番下に「たくや」が追加されました！

一応詳細ページも見てみましたが、問題なしでした！

ユーザ追加ボタンをユーザ一覧に作成(users.html)

これで完了！かと思いました。

ただ、このままだとユーザ登録画面に行くことができません。

なのでユーザ一覧画面に、追加ボタンを作っておきます。

{% extends './base.html' %}
{% block app %}

    <h1>ようこそ！</h1>
    <!-- テーブル -->
    <table class="table table-striped table table-bordered ">
        <thead>
            <tr>
                <th colspan="2">{{msg}}:{{count}}名</th>
            </tr>
        </thead>
        <tbody align="center">
            <!-- count件(行)数分をループ -->
            {% for user in userinfo %}
            <tr>
                <!-- 4列分ユーザ情報を出力 -->
                <td>{{user.userName}}</td>
                <td><a href="{% url 'showDetail' user.id %}" class="btn btn-outline-primary">詳細</a> </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <a href="{% url 'showCreateUserForm' %}" class='btn btn-outline-primary'>ユーザ追加</a>
    
{% endblock %}

23行目にユーザ登録フォームをへ遷移するボタンを追加しました。

これでテーブル下にボタンが追加されました。

今回はこれで完了です。

ユーザ一情報を管理アプリ作成の目次ページです。

2020年の12月末から勉強を始めたDjango初心者です。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

勉強で得た知識を使って、ユーザ情報を管理するアプリを作成しながら理解を深めています。

少しずつアプリに機能追加を加えて、内容をどんどん更新していきます。

Udemyの動画は開発環境作成の仕方から説明されているので、おススメです。

私の開発環境

以下の通りです。

Windows10

Python3.9

Visual Studio Code

開発したアプリのデモと機能紹介

作成したアプリのデモを行っています。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

WEBページにDBのユーザ情報データを表示させる

Djangoフレームワークの考え方から、最初のアプリ作成までを行っています。

Djangoの全体像が分からなかったので、整理して紹介しています。

Django独学 WEBページにDBのユーザ情報データを表示させる Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

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

ユーザ情報を表示させた後、詳細情報を表示する機能を追加しています。

Django独学 WEBページをリンクでページ遷移させる Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

DBに列を追加してWEBアプリに表示

列を追加して、ページに表示するまでの流れを解説しています。

Django独学 DBに列を追加してWEBアプリに表示 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

共通化したhtmlテンプレートを反映させる

HTMLのテンプレートを共通化させて、各アプリに反映をさせています。

Django独学 共通化したhtmlテンプレートを反映させる Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

Bootstrapでボタンやページを良い感じに表示

ある程度形にはなるところまで作りました。

ただ、見た目がダサかったBootstrapを適用して見栄えを整えています。

Django独学 Bootstrapでボタンやページを良い感じに表示 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

フォームを使ってDBに新規登録をする

フォーム呼出して、入力した内容をDBに登録する処理を作りました。

Django独学 フォームを使ってDBに新規登録をする Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

フォームを使ってDBを更新する

フォーム呼出して、入力した内容をDBに更新する処理を作りました。

Django独学 フォームを使ってDBを更新する Djangoのユーザ管理アプリ作成の目次ページはこちらです。 https://loosecarrot.com/2023/0...

Django独学でwebアプリのサイトを立ち上げてみた!

Django独学から2か月半ほど経ちました。

いろいろできないことは多いですが、WEBサイトを立ち上げました。

Django独学でwebアプリのサイトを立ち上げてみた! 2021年2月14日のバレンタインデーのことです。 一人家でPCに向かい続けながら、 文系出身のSEですが、開発して...

laravel開発

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

今回は、Bootstrapを使って見栄えをええ感じに表示させたいと思います。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

※bootstrapを使うため、HTMLの基礎知識が必要です。

Bootstrapを使えばデザインを楽にかっこよくできる

本来だと、自分でCSSファイルを作って各ボタンやテーブルに当て込む必要があります。

でもBootstrapはすでにきれいな表示ができるCSSが用意されています。

それをそのまま読み込んで使うことで、楽にコーディングができます。

また、Bootstrapはダウンロードして、自分用にカスタマイズすることも可能です。

今回は特にカスタマイズしません。

users.htmlのテーブルにbootstrapを適用

ユーザ一覧のテーブルは特に装飾をしていません。

なので、シンプル過ぎて見栄えが良くないです。

現在の表示がこちらです。

ここで、テーブルにBootstrapのCSSを適用します。

ついでに、「名前」と「詳細」ボタンを付けます。

{% extends './base.html' %}
{% block app %}

    <h1>ようこそ！</h1>
    <!-- テーブル -->
    <table class="table table-striped table table-bordered ">
        <thead>
            <tr>
                <th colspan="2">{{msg}}:{{count}}名</th>
            </tr>
        </thead>
        <tbody align="center">
            <!-- count件(行)数分をループ -->
            {% for user in userinfo %}
            <tr>
                <!-- 4列分ユーザ情報を出力 -->
                <td>{{user.userName}}</td>
                <td><a href="{% url 'showDetail' user.id %}" class="btn btn-outline-primary">詳細</a> </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
{% endblock %}

6行目でテーブルに2つのスタイルを適用しています。

table table-stripedは奇数行が灰色に変わります。

table table-borderedは枠線が付きます。

17、18行目で名前と詳細のリンクを1つのセルに入れるようにしています。

また、18行目でclass=”btn btn-outline-primary”を使って

リンクをボタンのように表示しています。

表示結果はこんな感じです。

detail.htmlのテーブルにbootstrapを適用

ユーザ詳細ページも特にCSSは適用していないので、とてもシンプルです。

テーブルと「ユーザ一覧へ」のリンクのスタイルを変更してみます。

テーブルは1列の中で「：」で区切られているのはダサいので、ついでに2列にします。

{% extends './base.html' %}
{% block app %}

    <h1>ユーザの詳細情報です。</h1>
    
    <!-- テーブル -->
    <table class="table table-striped table table-bordered">
        <!-- 5行分ユーザ情報を出力 -->
        <tbody align="center">
            <tr>
                <td>ID</td>
                <td>{{userinfoDetail.id}}</td>
            </tr>
            <tr>
                <td>名前</td>
                <td>{{userinfoDetail.userName}}</td>
            </tr>
            <tr>
                <td>出身国</td>
                <td>{{userinfoDetail.country}}</td>
            </tr>
            <tr>
                <td>住所</td>
                <td>{{userinfoDetail.address}}</td>
            </tr>
            <tr>
                <td>性別</td>
                <td>{{userinfoDetail.sex}}</td>
            </tr>                
            <tr>
                <td>自己紹介</td>
                <td>{{userinfoDetail.selfIntroduction|linebreaksbr}}</td>                
            </tr>
        </tbody>
    </table>

    <a href="{% url 'showUsers' %}" class="btn btn-outline-info">ユーザ一覧へ</a>

{% endblock %}

7行目のテーブルタグに対しては、先ほどと同じスタイルを適用しています。

10行目～33行目で2列にそれぞれの情報をセットさせるように変更しています。

37行目で「ユーザ一覧へ」のリンクに対して、ボタン表示になるよう設定をしています。

表示してみると、こちらもええ感じに表示されていました。

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

少し見栄えもかっこよくしたいので、今回は共通テンプレートを作成して、各テンプレートに反映させます。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

※bootstrapを使うため、HTMLの基礎知識が必要です。

テンプレート共通化のメリット

テンプレートを共通化しておくと、コーディング数を減らすことができます。

例えば、htmlのテンプレートが5つあり、共通の箇所があったとします。

共通テンプレートがない場合、5つすべてを修正する必要があります。

共通テンプレートのbase.htmlを作れば、baseを修正すれば、5つに反映させることができます。

共通テンプレートのbase.htmlを作成する

作っていく共通テンプレートは上記のようなものです。

ヘッダーとフッターは共通です。

真ん中には作ったアプリが入ります。

以下に、base.htmlというファイルを作成します。

C:\django\myproject\myapp\templates\myapp

base.html中身は以下のように作っています。

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap読込み -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <!-- Bootstrap読込み -->
        
        <!-- 表示全体を中央に揃える -->
        <style>body {padding-top: 50px;}</style>

        <!-- ナビゲーションバー -->
        <nav class="navbar navbar-light bg-light fixed-top">
            <a class='navbar-brand' href='{% url "showUsers" %}'>Djangoでユーザ情報管理アプリ</a>
        </nav>
    </head>

    <!-- ボディー -->
    <body>
        <div class='container'>
            {% block app %}
            {% endblock %}
        </div>
    </body>

    <!-- フッター -->
    <footer>
        <div class="p-3 mb-2 bg-light text-dark">
            <p>&copy; 文系出身のSEですが、何か</p>
        </div>
    </footer>

</html>

ヘッダーとフッターを作っています。

因みに、4～9行目でBootstrapを読み込んでいます。

特に何かをインストールする必要はなく、サイトに公開されているCSSを読み込んでいます。

12行目でbodyの表示を少し真ん中よりにしています。

23、24行目はボディの記載をしています。

{% block app %}～{% endblock %}の中に各アプリを読み込む場所です。

users.htmlとdetail.htmlに共通部分を継承させる

それぞれ2ファイルにbase.htmlを継承させて、共通部分を反映させます。

共通化したのはbodyタグ以外の部分です。

なので、bodyタグの中身以外を残して以下のように書き換えます。

users.html

{% extends './base.html' %}
{% block app %}

    <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>
    
{% endblock %}

detail.html

{% extends './base.html' %}
{% block app %}

    <h1>ユーザの詳細情報です。</h1>
    <!-- テーブル -->
    <table>
        <tbody>
            <tr>
                <!-- 5列分ユーザ情報を出力 -->
                <td>ID：{{userinfoDetail.id}}           <br>
                    名前：{{userinfoDetail.userName}}   <br>
                    出身国：{{userinfoDetail.country}}  <br>
                    住所：{{userinfoDetail.address}}    <br>
                    性別：{{userinfoDetail.sex}}        <br>
                    <!-- 自己紹介列を追加 -->
                    自己紹介：{{userinfoDetail.selfIntroduction|linebreaksbr}}
                </td>
            </tr>
        </tbody>
    </table>

    <a href="{% url 'showUsers' %}">ユーザ一覧へ</a>

{% endblock %}

bodyタグ以降の中身を{% block app %}と{% endblock %}で囲むだけでOKです。

ユーザ一覧画面を表示させてみると以下の通り上手くできました！

ここから、英二をクリックして詳細ページを見てみると…

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

今回はDBに列を追加して、追加した列を表示させます。

UdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

Djangoで追加する機能の概要

ユーザの詳細ページに自己紹介を表示させます。

データベースに自己紹介の列がないので、列追加から行います。

Models.pyから列を追加

データベースの定義を決めて作成したのは、models.pyのファイルでした。

なので、今回もModels.pyに追記をします。

内容は以下の通りです。

from django.db import models

# Create your models here.
#ユーザ情報のDB情報
class UserInfo(models.Model):
    userName = models.CharField(max_length=200)
    country = models.CharField(max_length=50, null=True)
    sex = models.CharField(max_length=200, null=True)
    address = models.CharField(max_length=200, null=True)
     
    #自己紹介列を追加
    selfIntroduction = models.CharField(max_length=500, null=True)

自己紹介の列を追加します。

その後、マイグレーションファイルを作成し、DBへ反映します。

マイグレーションファイルを作成
cd C:\django\myproject
python manage.py makemigrations myapp

マイグレーションファイルからDBへ反映
python manage.py migrate

これでDBに自己紹介の列が追加されました。

今回はDBに自己紹介を直接登録します。

今はユーザ情報をメンテナンスる機能はないためです。

detail.htmlを修正して、自己紹介列を表示させる

detail.htmlを修正して、自己紹介列を表示できるように修正していきます。

<!-- テーブル -->
    <table>
        <tbody>
            <tr>
                <!-- 5列分ユーザ情報を出力 -->
                <td>ID：{{userinfoDetail.id}}           <br>
                    名前：{{userinfoDetail.userName}}   <br>
                    出身国：{{userinfoDetail.country}}  <br>
                    住所：{{userinfoDetail.address}}    <br>
                    性別：{{userinfoDetail.sex}}        <br>
                    <!-- 自己紹介列を追加 -->
                    自己紹介：{{userinfoDetail.selfIntroduction}}
                </td>
            </tr>
        </tbody>
    </table>

12行目で追加した自己紹介列を表示させています。

結果はこんな感じです。

少し発展編：DB登録した改行をHTML側でも反映させる

先ほどの表示結果、実はDBに登録した改行が反映されていません。

本当は以下のように登録されています。

DBに登録されている改行コードはHTMLの<br>ではないためです。

対応方法としては、{{変数|linebreaksbr}}とするだけです。

<!-- 自己紹介列を追加 -->
自己紹介：{{userinfoDetail.selfIntroduction|linebreaksbr}}

表示結果を見てみると上手く改行されました。

改行が含まれるデータを扱うことがある場合は、覚えておいてください。

独学にはないプログラミングスクールの価値を実体験から解説 「お金がかかるプログラミングスクールではなく独学ではダメかな？」 「プログラミングスクールのどういう所がいいのかなぁ？」 ...

Djangoのユーザ管理アプリ作成の目次ページはこちらです。

Djangoでユーザ管理アプリ デモ動画とソースコード公開 Djangoのユーザ管理アプリ作成の目次ページはこちらです。 Djangoでユーザ管理アプリの作ったので、ソースコ...

Djangoの独学を2020年の12月末からしています。

DBからデータを抽出して表示させるところはDjangoでWEBページにDBのユーザ情報データを表示させるで行っています。

次は、リンクを表示させてみたいと思います。

因みに、私はUdemyのDjangoの基礎をマスターして、3つのアプリを作ろう！を参考に勉強していています。

ブログで備忘録を兼ねて発信しています。

Djangoで実装する内容

DjangoでWEBページにDBのユーザ情報データを表示させるで作った名前を表示させるところから、修正をしていきます。

ユーザ名をリンクにさせます。

そして、リンクをクリックするとユーザ情報の詳細を表示させます。

キー情報はユーザIDで、URLは「…/users/IDの番号」になります。

[…/users/IDの番号]へアクセス時に、詳細情報を表示させる

まずは、idのURLへアクセスしたときに、ユーザの詳細情報を表示させるところを作ります。

流れとしては、以下です。

アプリのurls.pyにユーザの詳細情報を表示させる処理を追加

まずはアプリのurls.pyにユーザの詳細情報を表示する処理を呼び出すよう記述します。

urlpatterns = [
    path('', views.showUsers, name='showUsers'),

    #ユーザの詳細情報を表示する処理を呼び出す
    path('<int:id>', views.showDetail, name='showDetail'),
]

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

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

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

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

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

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は以下のように記述します。

<!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=の名称です。

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

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

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

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

表示できました！

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

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

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

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

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

<!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>

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

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

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

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

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

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

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

プログラミングに無理はない「向き・不向き」でなく「慣れ」 「プログラミングは論理的思考が必要だ」などと時々見ますが、あまり関係ないと私は感じています。 基本的には誰にでも仕事のレベ...