The Complete Python Pro Bootcamp 2023: Day 60/100

1. ブログウェブサイトの連絡先フォームを機能させるために、PythonのウェブフレームワークFlaskを使用してHTMLフォームの扱い方を学ぶ。

2. HTMLフォームを作成し、POSTリクエストを使ってデータを送信する方法を実装し、Flaskサーバーでこのデータをキャプチャする。

3. Flaskのルーティングの柔軟性を示し、Jinjaテンプレートを使用して動的なコンテンツをウェブページに追加する。

100 Days of Code ： 2023年完全版 Python Pro Bootcamp の60日目です！今日は、私たちが構築しているブログサイトでコンタクトフォームを動作させることに飛び込みます。このステップでは、Pythonで人気のWebフレームワークであるFlaskを使ってHTMLフォームを処理する方法を学ぶので非常に重要です。

昨日の続き

Bootstrap を使ってスタイリングされた私たちのブログウェブサイトには、1つだけ残っている課題があります。HTMLフォームの送信とFlaskサーバーへのデータ取り込みに対処していないため、まだ機能していません。それが今日から変わります！

Flask で HTML フォームを理解する

今日の主な目的は、HTML フォームがどのように送信されるのか、そしてフォームから送信されたデータをどのように利用し、ユーザーから送信された情報を自分自身にメールで送るのかを理解することです。

HTML フォームのリビジョン - ゼロから

テンプレートフォルダに `main.py` と `index.html` を含む新しい PyCharm プロジェクト `html-forms` を作成することから始めました。目的は `index.html` ページを提供する Flask アプリケーションを作成することです。

フォームの作成

私たちの課題は `index.html` にシンプルな HTML フォームを作成することでした。このフォームはウェブページとしてレンダリングされたときに、ユーザが自分の名前とパスワードを入力し、この情報を送信できるようにする必要があります。

解決策

試行錯誤の結果、基本的なHTMLフォームを作成することに成功しました。このフォームには、名前とパスワードのフィールドと送信ボタンがあります。

Flask サーバーによる POST リクエストの処理

次のステップでは、POST リクエストを使ってデータを送信できるようにすることで、フォームを機能的にしました。そのためには、HTML フォームにアクションとメソッドを持たせる必要がありました。action 属性はフォームデータの送信先を指定し、method 属性はこのデータの送信方法を決定します。

課題

HTML フォームが "/login" というパスに "POST" リクエストを送信する方法を見つけるためにドキュメントを調べました。これには、HTML と Flask サーバの両方を慎重に設定する必要がありました。

解決策

変更を実装した後、フォームの準備ができました。`main.py`に、POSTリクエストを受け取った時にメソッドを起動するデコレータを追加しました。このメソッドはフォームからデータを取得し、受信を確認する文字列を返します。

Flask の Request メソッド

このプロセスの重要な部分は、Flask のリクエストメソッドを使うことでした。フォームに入力された名前とパスワードを取得し、クライアントに送り返すという難しい課題に直面しました。

結果

フォームのデータを取得し、ユーザーに返すことに成功しました。Flaskのmethodsパラメータは、1つのルートで複数のメソッドを対象とすることができ、HTTPリクエストの多様な処理を可能にします。

知識の応用

これらのスキルを手に入れた私たちは、新たに得た知識をブログサイトに適用しました。ユーザーのデータを取得し、確認メッセージを表示することで、問い合わせフォームを機能的にしました。このプロセスでは `contact.html` と `main.py` の両方を更新しました。

高度なルーティング

さらに一歩進んで、`/contact` と `/form-entry` のルートを "/contact" の下にまとめました。ルートをトリガーするメソッド(GET/POST)に応じて適切に処理し、Flaskのルーティングの柔軟性を示しました。

Jinja による動的コンテンツの追加

最後の課題は、Jinjaテンプレートを使って成功メッセージを動的に表示するために `contact.html` を更新することでした。これは、if 制御構造を使って、ユーザーのアクションに基づいて条件付きでコンテンツをレンダリングするものでした。

まとめ

本日のセッションは、FlaskでHTMLフォームを扱うためのディープダイブでした。フォームからユーザーデータを取得する方法、POSTリクエストを処理する方法、ユーザー入力に基づいてWebページを動的に更新する方法を学びました。これらのスキルはウェブ開発には欠かせないもので、ブログサイトの完成に一歩近づきました。

これからも100 Days of Codeの旅は続きます： The Complete Python Pro Bootcamp for 2023！

「超勇敢なウサギ」へ