মডিউল ৫-৩ঃ বিল্ট-ইন জ্যাংগো ফর্ম

মডিউলে ৫.১ এবং ৫.২ -এ আমরা দেখেছি জ্যাংগো টেমপ্লেট ফাইলে কিভাবে HTML ফর্ম ব্যবহার করা যায়।এই মডিউলে আমরা খুবই ইন্টারেস্টিং একটা ব্যাপার দেখতে যাচ্ছি - কিভাবে পাইথনের ক্লাস লিখে সেটাকে ফর্ম হিসেবে ব্যবহার করা যায় !!

তাহলে দেরি না করে ঝটপট একটা পাইথন ফাইল তৈরি করে ফেলি first_app এর মধ্যে , নাম দেই forms.py, ফাইলটিতে contactForm নামে একটা পাইথন ক্লাস লিখে ফেলি

Code:: 5.3.1 first_app/forms.py

from django import forms

class contactForm(forms.Form):
    name = forms.CharField(label="Enter your Name:")
    email = forms.EmailField(label = "User Email")
    

এখানে পাইথন ক্লাস contactForm কে আমরা ফর্ম হিসেবে ব্যবহার করতে চাচ্ছি, কিন্ত সব পাইথন ক্লাস মানেই তো আর ফর্ম না ! তাহলে জ্যাংগো-কে আমরা কিভাবে বুঝাতে সক্ষম হলাম যে contactForm - কে আমরা ফর্ম হিসেবে ব্যবহার করতে চাচ্ছি ? এই প্রশ্নের উত্তর হলো - ৩ নাম্বার লাইনে আমরা contactForm ক্লাস থেকে forms.Form ক্লাস কে ইনহেরিট করেছি, প্যারেন্ট ক্লাস forms.Form এর সাহায্যে চাইল্ড ক্লাস contactForm একটি ফর্মে পরিণত হতে পেরেছে । অবশ্য জ্যাঙ্গগো এর বিল্ট-ইন forms থেকে Form কে ব্যবহার করার জন্য ১ নম্বর লাইনে forms ইমপোর্ট করে নিতে হয়েছে।

• ৪ এবং ৫ নম্বর লাইনে ফর্মের জন্য ২ টা ফিল্ড ডিক্লেয়ার করা হয়েছে, ফিল্ড ডিক্লেয়ার করার সময় প্যারামিটার হিসেবে 'label' পাঠানো হয়েছে, ফর্মে লেবেল কি কাজ করে তা ইতোমধ্যে আমাদের জানার কথা ।

এখন contactForm এর জন্য views.py ফাইলে একটি ফাংশন লিখে ফেলি

Code:: 5.3.2 first_app/views.py

from django.shortcuts import render
from . forms import contactForm
# Create your views here.
def home(request):
    return render(request, './first_app/home.html')
    
def about(request):
    if request.method == 'POST':
        print(request.POST)
        name = request.POST.get('username')
        email = request.POST.get('email')
        select = request.POST.get('select')
        return render(request, './first_app/about.html', {'name' : name, 'email': email, 'select' : select})
    else:
        return render(request, './first_app/about.html')
        

def submit_form(request):
    return render(request, './first_app/form.html')

#View Function for contactForm Form-Class
def DjangoForm(request):
    form = contactForm(request.POST)
    if form.is_valid():
        print(form.cleaned_data)
    return render(request, './first_app/django_form.html', {'form':form})

DjangoForm ফাংশনটিতে , ২৩ নাম্বার লাইনে, contactForm ক্লাসটিকে কল করা হয়েছে এবং প্যরামিটার হিসেবে request.POST পাঠানো হয়েছে, প্যারামিটার request.POST পাঠানোর উদ্যেশ্য হলো - form নামক ভ্যরিয়েবলে যেন আমরা ব্রাউজার থেকে ফর্মে ইনপুট দেয়া ডেটাসমুহ পাই।

• বলুন তো দেখি ? contactForm ক্লাসটিকে কল করার সময় প্যরামিটার হিসেবে request.POST না পাঠিয়ে form ভ্যারিয়েবল টার্মিনালে প্রিন্ট করলে কি প্রিন্ট হতো ? উত্তরটী বেশ মজার যা জানতে কাজটি করে দেখতে পারেন

এরপর ফর্মটির ভ্যালিডিটি চেক করে form নামক ভ্যারিয়েবলে পাওয়া ডেটা টার্মিনালে প্রিন্ট করা হয়েছে।সবশেষ লাইনে first_app মধ্যে থাকা django_form.html ফাইলে ফর্মটী রেন্ডার করা হয়েছে, সাথে কন্টেক্সট হিসেবে form নামক ভ্যরিয়েবল কে পাঠানো হয়েছে 'form' - Key এর মাধ্যমে। কিন্ত আমাদের তো first_app মধ্যে django_form.html ফাইলই নাই ! তার মানে তো সেটা তৈরি করতে হবে -

Code:: 5.3.3 first_app\templates\first_app\django_form.html

{% extends 'base.html '%}
{% block content %}
<form method="post" style="width: 50%; height: 500px; margin:auto;" class="pt-4">
    {% csrf_token %}
    {{form.as_p}}
    <button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
{%endblock%}

এই ফাইলে আমাদের আলোচ্য লাইন হলো ৫ নং লাইন, view ফাইল থেকে form নামে যে ফর্মটী পাঠানো হয়েছিল তা আমরা এখানে {{ }} এর মধ্যে form নামে এক্সেস করতে পেরেছি । form.as_p লেখায় ফর্মটির ইলিমেন্টসমুহ প্যারাগ্রাফ আকারে সাজানো পেয়েছি ।

এখন আমরা ফর্মটী ব্রাউজারে দেখার জন্য ফর্মটি যে view ফাংশন থেকে রেন্ডার করা হয়েছে , তার জন্য URL-প্যাটার্ন সেট করে ফেলি

first_app/urls.py

এই URL-প্যাটার্ন-টি base.htm ফাইলের Navbar এ এ্যাড করে ফেলি

এখন প্রজেক্টটি রান করলে ব্রাউজার থেকে Django Form ট্যাবে আমাদের ফর্মটি দেখতে পাব

উপরোক্ত ইনপুট দিয়ে ফর্মটী সাবমিট করলে টার্মিনালে নিম্নোক্ত ফলাফল দেখতে পাব, যার কারন কোড সেকশন Code:: 5.3.2 ২৫ নং লাইন

ব্রাউজারে View Page Source অপশন থেকে দেখতে পাব পেজটির <form> ট্যাগের ইলেমেন্টগুলো আসলেই <p> </p> আকারে আসছে, যা আমরা কোড সেকশন Code:: 5.3.3 ট্যাগের এর ৫ নং লাইনে সেট করে দিয়েছিলাম।