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

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

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

 

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

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

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

フォームとは

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

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

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

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

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

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

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

①入力フォームをリクエストから呼び出す

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

③フォームに入力したデータをサーバに渡して登録

④登録した結果をブラウザに表示

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

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

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

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

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

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

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

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

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

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

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

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

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

①htmlへフォームを渡す

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

ただし、フォームを定義していないので、先に作成するします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

内容は以下です。

UserFormをimportしています。

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

10行目でcontext辞書に格納

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

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

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

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

htmlの中身は以下です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

①フォームデータをDBに登録

②ユーザ一覧画面を表示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回はこれで完了です。

ABOUT ME
LooseCarrot
LooseCarrot
ブログ運営をしているLooseCarrotです。 興味のあることにトライして発信していきます! プロフィール
関連している記事