デジタル時代は、動的でインタラクティブな Web エクスペリエンスを必要とします。Web サーバーの構築は、このデジタル環境の要であり、静的 HTML ページを超えるアプリケーションの作成を可能にします。Python は、その洗練された構文と広範なライブラリにより、Web 開発の強力な基盤を提供します。軽量で多用途なマイクロフレームワークである Flask は、プロセスをさらに簡素化します。Python の柔軟性と Flask の合理化されたアプローチを組み合わせることで、開発者は堅牢な Web サーバーを迅速かつ効率的に構築できます。このジャーニーでは、HTTP 要求と応答の処理からルーティングとテンプレート化まで、Web 開発のコア概念を詳しく調べ、世界をつなぎ、情報を提供する魅力的で機能的な Web アプリケーションを構築できるようにします。  「ウェブは明日のグローバルビレッジの広場になりつつある。」 - ビル・ゲイツ 前提条件 Python 3.x フラスコ pip を使用して Flask をインストールします。   pip install flask コード 以下は、シンプルな の完全なコードです。 レストラン予約システム   from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/submit', methods=['POST']) def submit(): # Extract form data name = request.form['name'] phone = request.form['phone'] email = request.form['email'] date = request.form['date'] time = request.form['time'] # Create a message for the result page message = ( f"Hello, {name.split()[0]}! Your reservation has been booked for {date} at {time}. " f"A reminder has been sent to {phone} and {email}" ) return render_template('result.html', message=message) if __name__ == '__main__': app.run(debug=True)   : まず、Flask から必要なモジュールをインポートします。Flask はアプリケーションのメイン クラスであり、render_template は HTML テンプレートのレンダリングに使用され、request は受信したフォーム データを処理するために使用されます。 Flask モジュールのインポート   : WSGI (Web サーバー ゲートウェイ インターフェイス) アプリケーションとなる Flask クラスのインスタンスを作成します。 Flask アプリの作成 : ルートの定義  : このルートは、ユーザーが予約の詳細を入力するためのフォームを含む テンプレートをレンダリングします。 インデックス ルート ('/') index.html  : このルートはフォームの送信を処理します を使用してフォームからデータを抽出し、確認メッセージを作成します。その後、メッセージはレンダリングのために テンプレートに渡されます。 送信ルート ('/submit') request.form result.html アプリの実行:   python app.py :  に が含まれている場合、サーバーは開発に便利なデバッグ モードで起動します。詳細なエラー メッセージが提供され、コードに変更を加えるとサーバーが自動的にリロードされます。 デバッグ モード app.py app.run(debug=True) : デフォルトでは、Flask は で実行されます。ホストまたはポートを変更する必要がある場合は、  の 呼び出しを変更できます。 ポートとホスト http://127.0.0.1:5000/ app.py app.run()   if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True) インデックス.html   ファイルは予約システムのユーザー インターフェイスとして機能し、ユーザーがテーブルを予約するために名前、電話番号、電子メール、日付、時間などの詳細を入力できるフォームを備えています。視覚的に魅力的でユーザー フレンドリーなエクスペリエンスを提供するために、CSS でスタイル設定されています。フォームの送信時に、フォーム データが処理のためにサーバーに送信されます。 index.html     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restaurant Table Booking</title> <style> body { font-family: Arial, sans-serif; background-image: url('https://img.freepik.com/premium-vector/delicious-food-menu-landing-page-template-homepage-design_631465-116.jpg?w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); max-width: 300px; width: 100%; } h1 { text-align: center; color: #333; } label { display: block; margin-bottom: 8px; color: #555; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="form-container"> <h1>Book a Table</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="date">Date:</label> <input type="date" id="date" name="date" required> <label for="time">Time:</label> <input type="time" id="time" name="time" required> <input type="submit" value="Submit"> </form> </div> </body> </html> 結果.html   ファイルは、フォームが送信された後にユーザーに確認メッセージを表示します。予約の詳細を動的に表示し、予約を確認し、提供された連絡先情報にリマインダーが送信されたことを確認します。 result.html     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reservation Confirmation</title> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-image: url('https://img.freepik.com/free-vector/minimal-doodle-frame-background-social-story-highlight_53876-97970.jpg?t=st=1735447681~exp=1735451281~hmac=d8f33db86d2b336838279674afb91df8c2089c7e8be13d316dc26982e0b30ac2&w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; } .form-container { background-color: rgba(0, 0, 0, 0.7); padding: 40px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); max-width: 400px; width: 100%; text-align: center; } h1 { font-family: 'Lobster', cursive; font-size: 32px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body> <div class="form-container"> <h1>Reservation Confirmed!</h1> <p>{{ message }}</p> </div> </body> </html> 終わりに HTTP リクエストの処理から動的コンテンツのレンダリングまで、Web 開発のコア原則を詳しく調べ、将来の取り組みのための強固な基盤を築きました。Web は絶えず進化する環境であり、革新と創造性の機会に満ちています。この課題を受け入れ、Web 開発の広大な可能性を探求し続け、成長し続けるインターネットのタペストリーに貢献してください。

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

Python と Flask で Web サーバーを構築する

About Author

コメント

ラベル

この記事は

Related Stories

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps