এই আর্টিকেলে, আমরা দেখব কিভাবে একটি সুপার সিম্পল কাউন্টার অ্যাপ তৈরি করতে হয়, যেখানে একটি বাটনে ক্লিক করলে একটি সংখ্যা যোগ হবে এবং ট্যাব বন্ধ করলেও সেশনে ডেটা থাকবে। আমরা সিম্পল অ্যাপ बनाने এবং সেশন ব্যবহার করে ডেটা ট্রান্সফার করার ধারণা পাব।
উদাহরণ
urls.py-তে নিচের লাইনগুলো যোগ করুন:
from django.urls import path
from django.urls.resolvers import URLPattern
from . import views
urlpatterns = [
path('', views.counterView, name='counter'),
]
এখানে আমরা হোম url-এ ভিউস সেট আপ করেছি।
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 রিকোয়েস্ট হ্যান্ডলার তৈরি করেছি, আমরা ফ্রন্টএন্ড থেকে একটি নম্বর পাঠাব এবং সেশন-এর count ভেরিয়েবলে সেভ করব। যখন ফ্রন্টএন্ড থেকে reset পাঠানো হবে, তখন সেশন count ০ হয়ে যাবে।
এখন অ্যাপ ডিরেক্টরিতে একটি templates ফোল্ডার তৈরি করুন এবং সেখানে একটি counter.html তৈরি করুন এবং এটি লিখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</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>
এটি ফ্রন্টএন্ড যা আমরা হোম url-এ রেন্ডার করছি।
আউটপুট

Count বাটনে ক্লিক করলে সংখ্যাতে ১ যোগ হবে এবং Reset বাটনে ক্লিক করলে কাউন্টার reset होकर ০ হবে।