Djangoで入力フォームを作ってユーザーの入力を受け付ける方法

Let’s understand what the above code means:

1. Action: This tells HTML where to send the submitted form data. It usually contains the URL we want to send the data to
2. Method=”POST” This is a particular Method that we use while sending information to the server. There is a GET method as well, which we will need in this article.
3. label for: This label gives a name to identify that particular label. For eg: First Name: Here we are giving a short name fname to identify the label “First Name.”
4. : This input attribute is the most important in the HTML form, Input specifies the form field that we will take from the client—for example, the type, name, pre-set value assigned to it, etc.
5. <input attribute to create form fields, we can use Django forms, which is a much efficient way. But before that, we need to learn more about GET and POST methods.

GETを使うときとPOSTを使うとき

デフォルトでは、ブラウザはサーバーからリソースを要求するためにGETメソッドを使用します。

例えば、booksモデルの例から続けると、booksのデータを取得するためにバックエンドで自動的にGETリクエストを使用します。

フロントエンドでリストを変更することはないので、この方法は全く問題なく動作します。

しかし、もし私たちがモデルDBに本を追加したいとしましょう。

その場合、基本的にDBの要素を変更することになるので、POSTメソッドが必要になります。

したがって、POSTメソッドはサーバーに何らかの情報を送信します。

Django の管理サイトで Book に関する情報を変更したり、Book を追加したりするときには、POST メソッドを使用しました。

また、管理サイトで BookModel の下にある Book のリストを見るだけなら、 GET メソッドを使いました。

これ以外の HTTP メソッドもありますが、それは REST API フレームワークの記事で学びます。

Django Forms を活用する

The working of Django forms is similar to that of Django Models. We create a form class and save them in a separate forms.py file.

The only difference between models and forms is that in models, we map model fields to the database fields while in forms, we map the form fields to the HTML form elements.

Another interesting fact about forms is that we display blank forms on the website and take information from the client to store it, while with models, we show the stored data from the database to the client.

Django アプリの内部で forms.py python ファイルを作成します。

Django アプリの内部で、新しい python ファイルを作成し、forms.py と名付けます。

Creating SearchForm to search for Book from Book_website

本の名前を入力として受け取り、その本のウェブサイトにリダイレクトするシンプルなフォームをこれから作成します。

それでは始めましょう。

1. forms.py で SearchForm を作成する

forms.py の内部では、まず forms ライブラリをインポートする必要があります。

その後、book_titleフィールドを持つSearchFormを作成するために、以下のコードをインクルードします。

構文は、max_intex_lengthを含むモデルのものと似ています。

ラベルは、HTMLフォームで学習したラベルと同じ機能です。

2. views.pyでSearchBookViewを作成する

views.pyで、SearchBookViewという名前でView関数を作成します。

ここで、2つの方法が考えられます。

1. 1. クライアントがGETメソッドでウェブページにアクセスします。
2. これは、クライアントが初めてウェブページを開いたときや、別の本を検索したいときに起こります。
3. 1. POSTメソッドでアクセスした場合。
4. クライアントが本の名前を入力し、送信/検索ボタンを押したときに起こります。

したがって、Viewはこれらの両方の状況に対処する必要があります。

1. 1.GETメソッドのコード

クライアントがGETメソッドを使用する場合、本の名前を入力するための空白のフォームを取得する必要があります。

したがって、この場合、私たちのコードは、単にコードを持つことになります。

モデルと同じように、新しいフォームオブジェクトを作成し、それをHTMLファイルに渡すことになります。

1. POSTメソッドに対応するコード

POSTメソッドを使用すると、クライアントは以前の記事で作成したBookのWebページ(books/)にリダイレクトされることになります。

したがって、このタスクを実行するコードは次のようになります。

ここで

• form = SearchForm(request.POST) クライアントが入力した情報を、作成したフォームオブジェクト “form” に保存します。
• form.isanthus_valid() は、フィールドに入力された情報が有効かどうかをチェックします。
• form.cleaned_data[‘book_title’]: フォームライブラリのこの属性は、クライアントによって入力された情報を自動的に正しいpythonが受け入れる形式に変換するので、cleaned_dataという名前になります。
• try と except ブロック。これは Python の例外処理と呼ばれ、Python の例外処理で学んだことがあるかもしれません。
• クライアントが入力した本のタイトルがDBに存在する場合、その本に関する情報を

• そうでない場合、もしその本が存在しなければ、 Django.shortcuts ライブラリに存在する Http404 エラーを発生させます。
• そして、DB から本の情報を保存したら

この属性は、コンテキスト辞書とともに、クライアントを指定された URL にリダイレクトします。

さて、SearchBookView の 2 つの部分について見てきましたが、最終的な SearchBookview を完成させるために、それらを組み合わせてみましょう。

したがって、もしリクエストがPOSTなら、ユーザーを /books/ URLにリダイレクトし、もしクライアントがGETを使用しているなら、単に空白のフォームを表示していることになります。

HttpResponseRedirect と Http404 を django.shortcuts から、 searchForm を forms.py からインポートするのを忘れないようにしましょう。

3. templates フォルダに SearchBook.html テンプレートファイルを作成します。

Django フォームを作成したので、book_title のための入力フィールドを改めて作成する必要はありません。

フォームに送信ボタンを追加するだけです。

では、HTML ファイルを作成しましょう。

{csrf_token %} これは Cross-Site Request Forgery トークンで、csrf 攻撃から保護するため、フォームのセキュリティ目的で使用されます。

4. urls.pyでSearchBookViewのURLエンドポイントを作成する

さて、作成した SearchBookView のために新しい URL パス (book/search) を作成します。

Django の URL マッピングで、View を URL にマッピングする方法を学びましたので、ここでもう一度それをやってみましょう。

それでは、サーバを動かしてみましょう。

Ghostbusterを検索し、Submitをクリックします。

さて、ほとんどのWebページでは、書籍のWebページ(books/)自体に検索ボタンが設置されていますね。

そのためには、SearchBookViewとBookViewを結合する必要があります。

そこで、SearchBookViewからコードを切り取って、BookViewに貼り付けます。

そうすると、BookViewは次のようになります。

上のコードを理解し、searchBookViewをどのように変更してここに入れたか見てみてください。

さて、ここでは、下のWebページに検索フォームがあるので、BookView.htmlの中にSearchBook.htmlを含めます。

SearchBook.htmlはBookView.htmlの一部なので、BookView.htmlのテンプレート自体をレンダリングして（一番下）、以下の行を削除すればよいでしょう。

これで、先ほど作成したエンドポイントも不要になりました。

だから、URLパス（book/search）を削除してください。

サーバを起動して、ブラウザを開く

投稿して確認

ModelForm を使ったフォームの作成

フォームのデータを DB テーブルに保存したい場合、そのための Django モデルを作成する必要があります。

Django は、フォームを通じてクライアントが入力した情報を、データを保存するために作成されたモデルにリンクする方法を提供します。

モデルフォームを使うことで、多くのコードを書かずに上記のタスクを効率的に実行することができます。

書評フォームの作成

書籍（books/）のウェブページに、閲覧者が書籍についてコメントできるように、書評フォームを作成することにします。

1. models.pyでBookReviewModelを作成する

models.pyで、新しいモデルBookReviewModelを作成し、以下のコードのように必要なモデルフィールドを記述します。

ここでは、レビューが長くなる可能性があるため、テキストフィールドを使用しています。

このモデルは Django Models の記事で学んだので、理解しやすいと思います。

2. forms.pyでモデルフォームを作成する

forms.pyに、以下のようなフォームを作成します。

ここで

• .models から BookReviewModel をインポートします。

• 次に Meta Class (Django Models で学んだ) を使って Django Model をインクルードし、フォームに必要なフィールドを指定します。

3. views.pyでBookReviewViewを作成する

Search Form を作成したときに書いたのと同じような関数ビューを作成します。

Views.py で、新しい関数ビュー BookReviewView を作成し、以下のコードを追加します。

ここで

• フォームが有効であれば、save属性を使ってクライアントから入力された情報をDBに保存しているだけです。

フォームで入力した内容をDBに保存するのがいかに簡単かをご覧ください。

次に、ReviewBook.htmlテンプレートファイルを作成します。

4. ReviewBook.html テンプレートファイルの作成。

templates/books_website に ReviewBook.html という名前のファイルを新規に作成します。

先ほどと同じように、form属性を作成します。

以上で、HTMLファイルの準備は完了です。

5. BookReviewViewへのURLパスの作成

あとはBookReviewViewへの新しいパスを作成するだけです。

urls.pyに以下を追加してください。

また、admins.pyでBookReviewモデルを登録するのを忘れないようにしましょう。

これで完了です。

サーバーを起動して、(本やレビューの)ウェブページにアクセスしてみましょう。

そして、送信ボタンを押すと、Thank you for your response webpageが表示されます。

ここで、管理サイトに移動し、BookReviewModelの中を確認すると、フォームの入力が保存されていることがわかります。

まとめ

Django フォームチュートリアルは以上です! Django フォームの基礎と、それが HTML フォームとどのように連携しているか、すべて理解していただけたでしょうか。

また、 Django のフォームについては、公式ドキュメントからさらに学ぶことができます。

Django のトピックに関するより高度なチュートリアルにご期待ください!