見出し画像

Django4の説明8：投稿ページの作成

green_blue_sky

0．前提

今回は会員が写真などを投稿する処理です。
投稿に関する画面回りなどを確認しましょう。

  1. 投稿ページのフォームの作成

  2. 投稿ページのビューの作成

  3. 投稿ページのルーティングの登録

  4. 投稿ページと投稿完了ページのテンプレートの作成

  5. 投稿完了ページのビューの作成

  6. 投稿完了ページのルーティングの登録

  7. ナビゲーションに投稿ページのリンクの追加

  8. 投稿の確認

1．投稿ページのフォームの作成

/code/photo/forms.py編集画面

以下が説明です。

まず、django.formsからModelFormをインポートしています。そして、.modelsからPhotoPostモデルをインポートしています。その後、PhotoPostFormという新しいフォームクラスを定義しています。

PhotoPostFormはModelFormクラスを継承しており、ModelFormはDjangoでモデルに基づいたフォームを作成するための便利なツールです。

PhotoPostFormの内部には、Metaという名前の内部クラスがあります。Metaクラスは、ModelFormの設定を定義するためのものです。

Metaクラス内で、model属性にPhotoPostモデルを指定しています。そして、fields属性には、フォームで使用する特定のモデルフィールドをリスト形式で指定しています。この場合、'category'、'title'、'comment'、'image1'、'image2' のフィールドが指定されています。

このPhotoPostFormクラスは、PhotoPostモデルの特定のフィールドを含むフォームを生成するために使用されます。これにより、ユーザーがこれらのフィールドを入力して新しい PhotoPost インスタンスを作成できるようになります。

2．投稿ページのビューの作成

これも書式通りに記載をすると、覚えられます。
djangoの命名規則通りに行います。

以下はそれぞれの要素について説明します。

  1. Django モジュールのインポート

    • django.shortcutsからrender関数をインポートしています。

    • django.views.genericからTemplateViewとCreateViewをインポートしています。

    • django.urlsからreverse_lazyをインポートしています。

    • .formsからPhotoPostFormをインポートしています。

    • django.utils.decoratorsからmethod_decoratorをインポートしています。

    • django.contrib.auth.decoratorsからlogin_requiredをインポートしています。

  2. ビューの作成

    • CreatePhotoView: CreateViewクラスを継承しており、写真投稿ページのビューを定義しています。

      • PhotoPostFormを使用して投稿データをデータベースに登録します。

      • form_classにはPhotoPostFormが指定されています。

      • template_nameにはpost_photo.htmlが指定されており、このテンプレートがレンダリングされます。

      • success_urlには'photo:post_done'という名前のURLにリダイレクトされます。

    • @method_decorator(login_required, name='dispatch')は、CreatePhotoViewへのアクセスがログインユーザーに制限されるようにデコレーションされています。ログインしていない場合は、設定されたログインページにリダイレクトされます。

  3. メソッドのオーバーライド

    • CreatePhotoViewクラス内のform_validメソッドは、親クラスのCreateViewのform_valid()をオーバーライドしています。

    • フォームのバリデーションを通過した際に呼び出され、投稿データをデータベースに保存します。

    • postdata = form.save(commit=False)はフォームのデータを取得し、commit=Falseで一時的に保存します。

    • postdata.user = self.request.userで投稿ユーザーの情報を設定し、postdata.save()でデータを保存します。

    • 最後にsuper().form_valid(form)を呼び出し、親クラスのform_valid()を実行し、success_urlで指定されたURLにリダイレクトさせます。

このコードは、ログインが必要な投稿ページと、その投稿を処理するビューを示しています。また、フォームのバリデーションやデータベースへの保存方法など、Djangoの基本的な機能を使用しています。

ログインが必要ということは、会員のみが利用でき、会員でないものは利用できません。

3．投稿ページのルーティングの登録

/code/photo/urls.py編集画面

4．投稿ページと投稿完了ページのテンプレートの作成

4.1．投稿ページのテンプレートの説明

以下は主な部分の説明です：

  1. {% extends 'base.html' %}: この行は、別のテンプレートファイルである 'base.html' を拡張（継承）しています。基本的なページ構造や共通の要素がこのテンプレートに含まれている可能性があります。

  2. {% block title %}Post{% endblock %}: 'title' ブロック内に 'Post' というテキストを配置しています。これは、拡張している 'base.html' 内の同じブロックに対応し、このページのタイトルを設定しています。

  3. {% block contents %} から {% endblock %}: 'contents' ブロック内にページのコンテンツを配置するためのセクションです。この部分には実際のページの内容が含まれます。

  4. フォームのセクション: Bootstrapのグリッドシステムを使用して、フォームをレイアウトしています。このフォームは、カテゴリ、タイトル、コメント、および最大2つの画像をアップロードするためのフィールドを含んでいます。enctype="multipart/form-data"は、画像などのバイナリデータを含むファイルを送信するためのフォームのエンコードタイプを指定しています。

  5. {% csrf_token %}: これは、CSRF（Cross-Site Request Forgery）攻撃から保護するためのトークンを提供します。これにより、フォーム送信時にセキュリティが強化されます。

  6. '投稿する' ボタン: フォームの送信を行うためのボタンです。

  7. タグの閉じ忘れ: コード内に </div> や </form> の閉じタグが適切に記述されていないようです。このため、正しいHTMLとしてレンダリングされるかどうかに影響を与える可能性があります。

また、{{ form.category }}、{{ form.title }}、{{ form.comment }}、{{ form.image1 }}、{{ form.image2 }} などの {{...}} 形式のフィールドは、おそらくフレームワークやテンプレートエンジンによって提供される変数やフォームフィールドを表示するためのものです。これらは特定のデータを表示するためのプレースホルダとして機能します。

最終的に、このテンプレートは基本テンプレートを拡張し、フォームを含む特定のページを作成しています。

4.2．投稿完了ページのテンプレートの説明

以下はコードの概要です：

  1. {% extends 'base.html' %}: この行は、'base.html'という別のテンプレートファイルをこのテンプレートに拡張することを示しています。つまり、'base.html'に定義された共通のレイアウトや構造をこのテンプレートでも使用します。

  2. {% block title %}Post Success{% endblock %}: この部分は、'base.html'内の同じ名前のブロック（title）を上書きしています。ページのタイトルを"Post Success"と設定しています。{% block %}と{% endblock %}の間に挟まれた部分は、'base.html'内の同じブロックが置き換えられる箇所です。

  3. {% block contents %}と{% endblock %}: 同様に、'base.html'内のcontentsブロックを上書きしています。この部分には投稿が完了したことを示すメッセージが含まれています。

  4. Bootstrapのクラスを使用してレイアウトを構築しています。<div class="container">はBootstrapのコンテナクラスであり、<div class="row">は行を表します。<div class="col offset-2">は、列を表し、オフセットクラスoffset-2を使用して左右に余白を設定しています。

  5. <h4>投稿が完了しました!</h4>: これは投稿が成功したことを伝えるための見出しです。ただし、HTMLに誤りがあり、</dv>のタグを閉じるために使用されている</dv>が実際には</div>であるべきです。

このテンプレートは、投稿成功メッセージを表示するために使用されるものであり、ベーステンプレートから継承された共通のレイアウトや構造を利用しています。

5．投稿完了ページのビューの作成

以下は、コード内の主な要素とその機能の説明です：

  1. django.shortcutsからrenderをインポート:

    • Djangoビューでテンプレートをレンダリングするための関数です。

  2. django.views.genericからTemplateViewとCreateViewをインポート:

    • Djangoの汎用ビューを利用するためのクラスです。TemplateViewは単純なテンプレートを表示し、CreateViewはモデルに基づいてデータを作成するためのビューです。

  3. django.urlsからreverse_lazyをインポート:

    • URLの逆引き機能を提供し、URLパターン名を使ってURLを取得するための関数です。

  4. formsモジュールからPhotoPostFormをインポート:

    • フォームの定義を含むファイルからPhotoPostFormをインポートします。

  5. method_decoratorをインポート:

    • Djangoのビューメソッドにデコレータを適用するための関数です。

  6. django.contrib.auth.decoratorsからlogin_requiredをインポート:

    • ログインが必要なビューにデコレータを適用するための関数です。

  7. IndexViewクラス:

    • トップページを表示するためのビュークラスです。指定されたテンプレート（index.html）をレンダリングします。

  8. CreatePhotoViewクラス:

    • 写真投稿ページを管理するビュークラスです。CreateViewを拡張しており、PhotoPostFormというフォームを使ってユーザーが写真を投稿できるようにします。form_validメソッドはフォームのバリデーションを処理し、データベースに投稿を保存します。また、@login_requiredデコレータにより、このビューはログインしているユーザーのみアクセス可能です。

  9. PostSuccessViewクラス:

    • 投稿が成功したことをユーザーに通知するためのビュークラスです。post_success.htmlというテンプレートをレンダリングします。

このコードは、ユーザーが写真を投稿できるWebアプリケーションの一部を構築するためのビュークラスを定義しています。ログインが必要な機能や投稿成功後のページ表示など、基本的な機能が実装されています。

6．投稿完了ページのルーティングの登録

/code/photo/urls.py編集画面

7．ナビゲーションに投稿ページのリンクの追加

/code/photo/templates/photos_title.html編集画面

8．投稿の確認

投稿テスト

次回は、投稿画面を表示できるようにします。

この記事が気に入ったらサポートをしてみませんか？