মডিউল ৫.১ঃ জ্যাংগো-তে HTML ফর্মের ব্যবহার - ১

এই মডিউলে আমরা দেখব একটি HTML ফর্ম কিভাবে আমাদের জ্যাংগো প্রজেক্টে ব্যবহার করতে পারি ।

এর জন্য আমরা fifth_Project নামে একটি নতুন প্রজেক্ট তৈরি করেছি এবং প্রজেক্টটিতে first_app একটি অ্যাাপ ক্রিয়েট করেছি । এরপর fourth_project এর কনটেন্ট গুলো , যেমন templates\base.html , fifth_project\urls.py , first_app\urls.py , first_app\views.py , first_app\templates\first_app\home.html, about.html নতুন প্রজেক্ট fifth_Project এ কপি করেছি ।

এখন আমরা first_app\templates\first_app\ ডিরেক্টরিতে form.html নামে একটী HTML ফাইল ক্রিয়েট করে নিম্নরুপ কোড লিখবঃ

Code:: 5.1.1 first_app\templates\first_app\form.html

{% extends 'base.html '%} {% block content %}

<div style="width: 50%; height: 500px; margin: auto" class="pt-5">
  <h3>Movie Rating Form</h3>
  <form method="post">
    {% csrf_token %}
    <div class="mb-3">
      <label for="exampleInputName" class="form-label">Name</label>
      <input
        type="text"
        class="form-control"
        id="exampleInputName"
        aria-describedby="nameHelp"
        name="username"
      />
    </div>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email address</label>
      <input
        type="email"
        class="form-control"
        id="exampleInputEmail1"
        aria-describedby="emailHelp"
        name="email"
      />
    </div>
    <select class="form-select" aria-label="Default select example" name="select">
      <option selected>Ratings</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <button type="submit" class="btn btn-primary mt-5">Submit</button>
  </form>
</div>

{%endblock%}

• form.html ফাইলের শুরুতেই base.html কে এক্সটেন্ড করে নিয়েছি যেখানে Navbar ডিজাইন করেছিলাম।

• ৫ নং লাইনে form ট্যাগের Attribute, method="post" লিখে আমরা বোঝাতে চেয়েছি ইউজার যখন ফর্ম ফিল আপ করে সাবমিট বাটনে ক্লিক করবে তখন সেটি ব্রাউজার থেকে ডেটা ব্যাকেন্ড বা সার্ভারে পাঠানোর জন্য রিকুয়েস্ট হিসেবে গন্য হবে ।

• ৬ নং লাইনে {% csrf_token %} ব্যবহার করেছি যেন ইউজার কোনো ম্যালিসিয়াস ইনপুট না দিতে পারে । মজার ব্যাপার হলো ফর্মে যদি আমরা csrf_token ব্যবহার না করতাম তাহলে Forbidden(403) ইরোর মেসেজ পেতাম।

• ১৪ নাম্বার লাইনে input ট্যাগের অ্যাাট্রিবিউট name="username" লিখেছি যেন ব্যাকেন্ড থেকে ডেটা গ্রহন করার সময় উক্ত ইনপুট ফিল্ডের ডেটা username নামে পেতে পারি। অনুরুপ কাজ আমরা ২৪ ও ২৭ নাম্বার লাইনেও করেছি।

form.html ফাইলে যে ফর্মটি তৈরি করলাম সেটি নিয়ে কাজ করার জন্য first_app\views.py ফাইলে একটী নতুন ফাংশন submit_form লিখে ফেলিঃ

Code:: 5.1.2 first_app\viws.py

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

submit_form() ফাংশনের জন্য রিলেভেন্ট URL-Pattern অ্যাাড করে ফেলি first_app/urls.py ফাইলেঃ

first_app/urls.py

প্রজেক্টের ন্যাভবারে যেন Form নামে নতুন একটী ট্যাব দেখা যায় সেজন্য base.html ফাইলে নতুন একটি <li> ট্যাগ যুক্ত করে ফেলি

templates/base.html

এখন আমরা প্রজেক্টটি রান করার পর Form ট্যাবে ক্লিক করে http://127.0.0.1:8000/form/ URL-এ যাওয়ার পর আমাদের তৈরি করা ফর্মটী নিচের মত করে দেখতে পাব এবং ফর্মটি ফিল-আপ ও করতে পারব

কিন্ত ফর্মটি সাবমিট করার পর ইনপুট দেয়া ডেটাগুলো দেখার কোনো ব্যবস্থা আমরা এখনো পর্যন্ত করিনি। সেটি করতে চাইলে প্রথমে ফর্মে ইনপুট দেয়া ডেটা কোনো একটা ফাংশনে রিসিভ করতে হবে এবং রিসিভ করা ডেটা কোনো একটা টেমপ্লেট ফাইলে পাঠিয়ে সেই টেমপ্লেট ফাইলটি রেন্ডার করতে হবে ।

এর জন্য ফর্মটি সাবমিট করার পর কি ঘটবে তা আমরা ফর্ম ট্যাগের মধ্যেই বলে দিতে পারি , যদি সাবমিট করা ডেটা first_app/views.py এর about() ফাংশনে রিসিভ করতে চাই তাহলে Code:5.1.1 (first_app\templates\first_app\form.html) এর ৫ নং লাইনে form tag এর জন্য নতুন একটি অ্যাাট্রিবিট অ্যাাড করতে পারি ,

<form method="post" action="/about/">

এখানে action="/about/" তে বলা হয়েছে ফর্মটি সাবমিট করার পর "/about/" URL-প্যাটার্নে যেতে, উক্ত প্যাটার্নের সাথে ম্যাচ করবে first_app/urls.py ফাইলের নিম্নোক্ত URL-প্যাটার্নটি

ম্যাচ করা প্যাটার্নটি first_app/views.py ফাইলের about() ফাংশনটি কল করবে । এরপর বাকি কাজ তথা , ডেটা রিসিভ করা এবং রিসিভ করা ডেটা একটী টেমপ্লেট ফাইলে পাঠিয়ে ফাইলটী রেন্ডার করার কাজ about() ফাংশনটিতে করে ফেলি

Code:: 5.1.3 first_app\views.py

from django.shortcuts import render
from . forms import contactForm, StudentData, PasswordValidationProject
# 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')

• about( ) ফাংশনটিতে request নামে একটি প্যারামিটার নেয়া হয়েছে । যখন ব্রাউজারে একটি পেজের জন্য রিকুয়েস্ট আসে তখন জ্যাংগো একটি HttpRequest object তৈরি করে যার মধ্যে রিকুয়েস্ট সম্পর্কিত তথ্য (Metadata) থাকে। তারপর জ্যাংগো রিকুয়েস্ট করা পেজের ( যে URL-প্যাটার্নের সাথে ম্যাচ করে ) জন্য রিলেভেন্ট view ফাংশন লোড করে এবং ফাংশনটির প্রথম প্যারামিটার হিসেবে HttpRequest object টি পাস করে যা আমরা এখানে request নামে রিসিভ করেছি।

বলুন তো দেখি ? about( ) ফাংশনটিতে request নামে যে প্যারামিটার নেয়া হয়েছে সেটি অন্য কোনো নামে, যেমন, myRequest নামে নিলে কোনো সমস্যা হতো কি না?

• ফাংশনের শুরুতেই্‌১০ নাম্বার লাইনে, চেক করেছি প্যারামিটারে পাস করা HTTP-রিকুয়েস্টটির মেথড POST কি না, ফর্মটি যদি সঠিক উপায়ে পূরন করে সাবমিট করা হয় তবে রিকুয়েস্টটির মেথড পোস্ট হবে , কারন এটী আমরা <form> ট্যাগে বলে রেখেছি।

• এরপর রিকুয়েস্ট থেকে প্রাপ্ত ডেটা থেকে get( ) ফাংশন ব্যবহার করে ফর্ম এর name='username' ফিল্ড এর ডেটা নিয়ে নিয়েছি এবং তা name নামের ভ্যারিয়েবলে সেট করেছি। অনুরুপ কাজ পরের ২ টি লাইনেও করেছি।

• এরপর ১৫ নং লাইনে render( ) ফাংশন ব্যবহার করে './first_app/about.html' ফাইলটি রেন্ডার করেছি যেন ফর্মে ফিল আপ করা ডেটা (এখন name,email,select নামক ভ্যরিয়েবলে আছে) দেখানোর জন্য about.html টেমপ্লেট ফাইলটি ব্যবহার করতে পারি । সেই সাথে কন্টেক্সট আকারে name,email,select ভ্যরিএবলের ডেটাগুলো পাস করেছি।

এখন শুধু বাকি রইল View ফাংশন থেকে রেন্ডার করা ফাইল about.html - এ HTML ট্যাগ ব্যবহার করে ডেটা দেখানো

Code:: 5.1.4 first_app\templates\first_app\about.html

{% extends 'base.html' %}
{% block title %} About Page {% endblock%}
{% block content %}
<h3>Name {{name}}</h3>
<h3>Email {{email}}</h3>
<h3>Rating {{select}}</h3>

{% endblock%}

• ৪,৫,৬ নাম্বার লাইনে {{ }} ব্যবহার করা হয়েছে Django Template File - এ ভ্যারিয়েবলের ভ্যালু লেখার জন্য।

এখন যদি প্রজেক্টটি রান করে সঠিকভাবে ফর্মে ইনপুট দিয়ে সাবমিট বাটনে ক্লিক করি তাহলে http://127.0.0.1:8000/about/ URL-এ নিম্নরুপে ফর্মে সাবমিট করা ডেটা দেখতে পাব