การสร้างแอปนับเลขง่ายๆ ด้วย request.session ใน Django

บทความนี้สอนสร้างแอปนับเลขง่ายๆ กดปุ่มเพิ่มตัวเลข เก็บข้อมูลใน Session คงค่าไว้แม้ปิดแท็บ ทำความเข้าใจการใช้ Session สำหรับแอปง่ายๆ และการส่งข้อมูลผ่าน Session

ตัวอย่าง

ใน urls.py:

from django.urls import path
from .import views
urlpatterns = [
    path('', views.counterView, name='counter'),
]

ใน views.py:

from django.shortcuts import render

def counterView(request):
    if request.method == "POST" and 'count' in request.POST:
        try:
            request.session['count'] += 1
        except:
            request.session['count'] = 0
    elif request.method == 'POST' and 'reset' in request.POST:
        request.session['count'] = 0
    return render(request, 'counter.html')

POST handler รับค่าจาก frontend เก็บใน session['count'] reset ทำให้เป็น 0

สร้าง templates/counter.html พร้อม CSS Bootstrap:

<!DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Counter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <style>
        body { background-color: palevioletred; }
        .counter form .count { border: none; outline: none; background-color: black; color: white; }
        .counter form .reset { border: none; outline: none; background-color: rgb(50, 181, 204); }
    </style>
    <div class="container counter text-center" style="margin-top: 150px;">
        <h1 class="display-1 text-white">
            {% if request.session.count %}{{ request.session.count }}{% else %}0{% endif %}
        </h1><br><br>
        <form method="post">{% csrf_token %}
            <button name="count" class="count px-5 py-3 text-white shadow-lg">Count</button>
        </form><br><br>
        <form method="post">{% csrf_token %}
            <button name="reset" class="reset px-5 py-3 text-white shadow-lg">Reset</button>
        </form>
    </div>
</body> </html>

เอาต์พุต

กด Count เพิ่ม 1, กด Reset รีเซ็ตเป็น 0