Python Django フレームワークと Htmx を使用して単一製品ショップを構築する-Python チュートリアル-php.cn

これは、Django、htmx、および Stripe を使用して 1 つの製品の電子商取引 Web サイトを作成する 2 部構成のシリーズの最初の部分です。このパートでは、Django プロジェクトを開始し、htmx と統合します。

後半では、Stripe で注文を処理します。

さあ、いきましょう!

なぜ Django、htmx、Stripe なのか?

次の理由から、Django、htmx、および Stripe を使用して Web サイトを作成します。

Django は、優れた ORM、テンプレート、ルーティングシステムを備えた Python Web フレームワークです。すぐに使えるいくつかの機能 (認証など) と、オンラインで入手できる複数のオープンソースパッケージが備わっています。 Django を使用して Web サイトを構築します。
htmx は、HTML 属性を使用するだけで Web サイトにモダンな雰囲気を与える JavaScript ライブラリです。実際に JavaScript を記述する必要はありません (もちろん、記述することもできます)。 htmx を使用して、ページに対話性を与えます。
Stripe は、優れた API を備えた支払いプラットフォームであり、支払いとクレジットカード情報を処理します。 Google や Apple Pay ともうまく統合されています。商品の支払いを容易にするために Stripe を使用します。

最終製品がどのように機能するかは次のとおりです:

ユーザーは当社の Web サイトにアクセスし、価格や説明など、当社の製品に関する情報を確認できます。
ユーザーが「購入」ボタンをクリックすると、Stripe のチェックアウトセッションにリダイレクトされます。
支払いが成功すると、再び当社の Web サイトにリダイレクトされます。当社はお客様の注文情報を保存し、お客様とすべてのスタッフユーザーに最近の購入を通知する確認メールを送信します。

次に、Django プロジェクトを構成し、初期ビューを作成し、htmx を使用して購入フォームを構築しましょう。

Django Python プロジェクトを構成する

プロジェクトを設定するには、仮想環境を作成し、アクティブ化し、必要なパッケージをインストールする必要があります。その後、Django プロジェクトと Django アプリを作成できます。

仮想環境を作成する

依存関係を分離できるように、仮想環境を作成することから始めましょう:

python -m venv .venv

ログイン後にコピー

Linux/Mac でアクティブ化する方法は次のとおりです:

source .venv/bin/activate

ログイン後にコピー

Windows の場合:

.venv\Scripts\activate

ログイン後にコピー

必要なパッケージをインストールする

アクティブ化された仮想環境内で、これを機能させるにはいくつかのパッケージが必要です。

pip install django stripe django-htmx python-dotenv

ログイン後にコピー

ここでは以下をインストールしました:

ジャンゴ
Stripe はストライプ API と連携します。
django-htmx。htmx を操作するためのヘルパー機能を提供します。
.env ファイルから環境変数をロードする python-dotenv。

Django プロジェクトを作成する

仮想環境と同じディレクトリに、ecommerce_site という Django プロジェクトを作成しましょう:

django-admin startproject ecommerce_site .

ログイン後にコピー

Django では、コードを 1 つ以上の「アプリ」ごとに編成することをお勧めします。各アプリは、特定のことを行うパッケージです。プロジェクトには複数のアプリを含めることができますが、この単純なショップの場合は、ほとんどのコード (電子商取引プラットフォームのビュー、フォーム、モデル) を含むアプリを 1 つだけ含めることができます。それを作成して、ecommerce と名付けましょう:

python manage.py startapp ecommerce

ログイン後にコピー

そして、このアプリを ecommerce_site/settings.py の INSTALLED_APPS に追加します:

# ecommerce_site/settings.py

INSTALLED_APPS = [
    # ... the default django apps
    "ecommerce", # ⬅️ new
]

ログイン後にコピー

このセットアップで問題が発生した場合は、最終製品を確認してください。この段階で、ファイル構造は次のようになります:

ecommerce_site/
├── .venv/  # ⬅️ the virtual environment
├── ecommerce_site/ # ⬅️ the django project configuration
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── ecommerce/ # ⬅️ our app setup
│     ├── templates/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py

ログイン後にコピー

テンプレートを作成する

プロジェクトの構成が完了したので、いくつかの基本レイアウトを作成する必要があります。テンプレートディレクトリに、base.html ファイルを追加します。これは、他のすべてのテンプレートが継承するテンプレートです。ユーザー操作用の htmx、基本的なスタイル設定用の mvp.css、および Django で生成されたメッセージをテンプレートに追加します。

<!-- ecommerce/templates/base.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>One-Product E-commerce Site</title>

    <!-- include htmx ⬇️ -->
    <script
      src="https://unpkg.com/htmx.org@1.9.11"
      integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
      crossorigin="anonymous"
    ></script>

    <!-- include mvp.css ⬇️ -->
    <link rel="stylesheet" href="https://unpkg.com/mvp.css" />
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-boost="true">
    <header>
      <h1>One-Product E-commerce Site</h1>
    </header>
    <main>
      <section>
        {% if messages %} {% for message in messages %}
        <p><mark>{{ message }}</mark></p>
        {% endfor %} {% endif %}
      </section>
      {% block content %} {% endblock %}
    </main>
  </body>
</html>

ログイン後にコピー

ホームビュー用に、同じ templates ディレクトリに home.html テンプレートを作成します。これは、base.html を拡張し、そのコンテンツセクションを設定するだけです。

<!-- ecommerce/templates/home.html -->

{% extends "base.html" %} {% block content %}
<section>{% include "product.html" %}</section>
{% endblock %}

ログイン後にコピー

このテンプレートには、product.html テンプレートが含まれています。 product.html は、製品に関する詳細とプレースホルダー画像を表示します。同じ templates ディレクトリに作成しましょう:

<!-- ecommerce/templates/product.html -->
<form>
  <img src="https://picsum.photos/id/30/400/250" alt="mug" />
  <h3>mug<sup>on sale!</sup></h3>
  <p>mugs are great - you can drink coffee on them!</p>
  <p><strong>5€</strong></p>
  <button type="submit" id="submit-btn">Buy</button>
</form>

ログイン後にコピー

ホームビューの作成

ecommerce/views.py で、ホームテンプレートをレンダリングするビューを作成します。

# ecommerce/views.py

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

ログイン後にコピー

そして、それを ecommerce_site/urls.py の urlpatterns に追加します:

# ecommerce_site/urls.py

from django.contrib import admin
from django.urls import path
from ecommerce import views # ⬅️ new

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.home, name="home"), # ⬅️ new
]

ログイン後にコピー

これで、次のコマンドを使用してサーバーを実行できるようになります。

python manage.py runserver

ログイン後にコピー

ブラウザで http://127.0.0.1:8000 にジャンプすると、次のような内容が表示されるはずです。

Build a One-Product Shop With the Python Django Framework and Htmx

It might feel like overkill to add a dedicated product.html template instead of just the product details in the home.html template, but product.html will be useful for the htmx integration.

Add the Form and Use Htmx

Great! We now have a view that looks good. However, it doesn’t do much yet. We'll add a form and set up the logic to process our product purchase. Here’s what we want to do:

Allow the user to select how many products (mugs) they want to buy.
When the user clicks “Buy”, make a POST request to a different view called purchase in the backend using hx-post.
In that view, validate the form and wait for 2 seconds to simulate the Stripe integration (we'll cover this in the second part of this guide).
Replace the form content with the purchase view response.
While the order is processing, show a loading message and disable the “Buy” button, so that the user doesn’t accidentally make multiple orders.

Let's go step by step.

1: Add a Quantity Order Form

Let’s first create and add a simple order form to our view allowing a user to select the number of mugs they want. In ecommerce/forms.py, add the following code:

# ecommerce/forms.py

from django import forms

class OrderForm(forms.Form):
        quantity = forms.IntegerField(min_value=1, max_value=10, initial=1)

ログイン後にコピー

In ecommerce/views.py, we can initialize the form in the home view:

# ecommerce/views.py

from ecommerce.forms import OrderForm # ⬅️ new

def home(request):
    form = OrderForm() # ⬅️ new - initialize the form
    return render(request, "home.html", {"form": form}) # ⬅️ new - pass the form to the template

ログイン後にコピー

And render it in the template:

<!-- ecommerce/templates/product.html -->

<form method="post">
  <!-- Same product details as before, hidden for simplicity -->

  <!-- render the form fields ⬇️ -->
  {{ form }}

  <!-- the same submit button as before ⬇️ -->
  <button type="submit" id="submit-btn">Buy</button>
</form>

ログイン後にコピー

2: Make a POST Request To a Different View

When the user clicks "Buy", we want to process the corresponding POST request in a dedicated view to separate the different logic of our application. We will use htmx to make this request. In the same ecommerce/templates/product.html template, let's extend the form attributes:

<!-- ecommerce/templates/product.html -->

<!-- add the hx-post html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}">
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>
</form>

ログイン後にコピー

With this attribute, htmx will make a POST request to the purchase endpoint and stop the page from reloading completely. Now we just need to add the endpoint.

3: Create the Purchase View

The purchase view can be relatively simple for now:

# ecommerce/views.py
import time # ⬅️ new

# new purchase POST request view ⬇️
@require_POST
def purchase(request):
    form = OrderForm(request.POST)
    if form.is_valid():
        quantity = form.cleaned_data["quantity"]
        # TODO - add stripe integration to process the order
        # for now, just wait for 2 seconds to simulate the processing
        time.sleep(2)
    return render(request, "product.html", {"form": form})

ログイン後にコピー

In this view, we validate the form, extract the quantity from the cleaned data, and simulate Stripe order processing. In the end, we return the same template (product.html). We also need to add the view to the urlpatterns:

# ecommerce_site/urls.py

# ... same imports as before

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.home, name="home"),
    path("purchase", views.purchase, name="purchase"),  # ⬅️ new
]

ログイン後にコピー

We now need to tell htmx what to do with this response.

4: Replace the Form Content With the Purchase View Response

Htmx has a hx-swap attribute which replaces targeted content on the current page with a request's response.
In our case, since the purchase view returns the same template, we want to swap its main element — the

<!-- ecommerce/templates/product.html -->

<!-- add the hx-swap html attribute ⬇️ -->
<form method="post" hx-post="{% url 'purchase' %}" hx-swap="outerHTML">
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>
</form>

ログイン後にコピー

The value outerHTML will replace the entire target element with the response from the purchase view. By default, the htmx target is the same element making the call — in our case, the element.

5: Tell Htmx What to Do When the Request Is Triggered

htmx provides some helper utilities for when a request is processing. In our case, we want to:

Disable the "Buy" button (to avoid a form re-submission) by using the hx-disabled-elt attribute.
Show a loading message on the screen by using the htmx-indicator class. This class changes its element's opacity when the request is triggered.

<!-- ecommerce/templates/product.html -->

<!-- add the hx-disabled-elt html attribute ⬇️ -->
<form
  method="post"
  hx-post="{% url 'purchase' %}"
  hx-swap="outerHTML"
  hx-disabled-elt="#submit-btn"
>
  <!-- Same product details as before, hidden for simplicity -->

  {{ form }}
  <button type="submit" id="submit-btn">Buy</button>

  <!-- add a loading message with the htmx-indicator class ⬇️ -->
  <p class="htmx-indicator"><small>Getting your mug ready...</small></p>
</form>

ログイン後にコピー

Once the customer clicks the "Buy" button, htmx will disable that same button (identifiable by its submit-btn id), and show a loading message by changing the opacity of the p.htmx-indicator element.

The Result

Jump over to the browser.

You can see the final result in this GitHub repository.

It doesn’t do much else yet. But, if form validation fails, errors will display directly on the form, without the need to refresh the entire page. If the form succeeds, we will process the Stripe order accordingly. We'll see how to do this in the second part of this guide.

Wrapping Up

We've now set up the basics for our one-product ecommerce site. We've configured our Django project, integrated it with htmx to give our site some interactivity, and set up a basic order form for our product.

In the second part of this guide, we'll handle orders with Stripe, save the results in our database, and notify users after a successful purchase.

Until then, happy coding!

P.S. If you'd like to read Python posts as soon as they get off the press, subscribe to our Python Wizardry newsletter and never miss a single post!

以上がPython Django フレームワークと Htmx を使用して単一製品ショップを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。