前へ

次へ

演習 - django-crispy-forms を実装する

完了

作成したフォームを表示すると、フォーマットがページの他の部分と同じではないことに気づく場合があります。 ブートストラップを使用していますが、フォームは現在使用されていません。 幸い、フォームでブートストラップを使用できるようにするライブラリが用意されています。

django-crispy-forms ライブラリ

django-crispy-forms ライブラリにより、Django によるフォームの生成方法をさらに強化します。 このライブラリを使用して、フォームでブートストラップを使用する方法について説明します。

ライブラリをインストールする

他の Python ライブラリと同様に、pip を使用して django-crispy-forms をインストールします。

1. Visual Studio Code で requirements.txt を開きます。

2. ファイルの末尾に、次のような改行を追加します。

   django-crispy-forms
   

3. [ターミナル]>[新しいターミナル]を選択して、新しい[ターミナル] ウィンドウを開きます。

4. 次のコマンドを実行して、すべてのパッケージをインストールします。

   pip install -r requirements.txt
   

Django にアプリを登録し、テンプレートを構成する

Django で使用されるものはすべて、アプリまたはミドルウェアとして登録されている必要があります。 Django はアプリであるため、INSTALLED_APPS リストにリストされます。

1. Visual Studio Code で、 project/settings.py を開きます。

2. # TODO: Register crispy_forms という行の下に、次のコードを追加して django-crispy-forms を登録します。

   # TODO: Register crispy_forms
   'crispy_forms',
   

3. # TODO: Set template_pack という行の下に、次のコードを追加して django-crispy-forms を構成してブートストラップ 4 を使用します。

   # TODO: Set template_pack
   CRISPY_TEMPLATE_PACK = 'bootstrap4'
   

django-crispy-forms を使用するようにテンプレートを更新する

django-crispy-forms で行われるすばらしい作業の大部分は、フィルターを使用することによって行われます。 フィルターを使用すると、テンプレート内の変数を取得し、別のハンドラーまたはプロセスに渡すことができます。 この例では、crispy フィルターによってフォームが、指定されたテンプレートであるブートストラップ 4 に変換されます。

1. Visual Studio Code で dog_shelters/templates/dog_form.html を開きます。

2. {# TODO: Load crispy_forms_tags #} という行の下に、次のコードを追加して、フィルターまたはタグを読み込みます。

   {# TODO: Load crispy_forms_tags #}
   {% load crispy_forms_tags %}
   

3. {{ form.as_p }} という行を次のコードに置き換えて、crispy フィルターを使用します。

   {{ form | crispy }}
   

サイトをテストする

すべてがインストールおよび更新されたので、サイトをテストしてみましょう。

1. [ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。

2. ブラウザーで http://localhost:8000/dog/register に移動します。

   このページでは、フォームにブートストラップが使用されていることがわかります。

   

これで、フォームにブートストラップを使用するようにアプリケーションが更新されました。

続行