ফর্ম তৈরী -১ম পর্ব

বাংলায় জ্যাঙ্গো টিউটোরিয়াল সিরিজের মধ্যম ধাপে আপনাদর স্বাগতম। আমরা পূর্বের ধাপে একটি ব্লগ, ও একটি ব্যাক্তিগত হিসাব রাখার এপ তৈরী করেছিলাম। এই ধাপে আমরা ব্যাক্তিগত হিসাব রাখার এপ কে আরো সামনের দিকে এগিয়ে নেব। আমাদের প্রতিদিনের হিসাব রাখার জন্য আমাদেরকে এখন জ্যাঙ্গো এডমিন পাতায় যেতে হচ্ছে, যা ইউজারের জন্য বিরক্তিকর। home পেজ থেকেই কিভাবে নতুন হিসাব যোগ করা যায় তা আমরা এখন দেখব ।

পরিকল্পনা:

http://127.0.0.1:8000/cost/list/ পাতায় একটি বোতাম (Button) য়ুক্ত করব। যেটি চাপলে একটি ফর্ম আসবে। ফর্মটি পূরন করে নতুন হিসাব যুক্ত করব।

ফর্ম তৈরী:

আমরা হিসাব রাখার জন্য Expense মডেল তেরী করেছিলাম। এই মডেলের জন্যই একটি ফর্ম তৈরী করব। cost_management অ্যাপ এর মধ্যে forms.py তৈরী করি। নিচের কোড লিখে ফেলি

প্রথমে আমাদেরকে জ্যাঙ্গো form (from django import forms)এবং Expense মডেল (from .models import Expense) import করি। ExpenseForm ই আমাদের ফর্ম ক্লাস। আমাদের বলে দিতে হবে যে আমাদের ক্লাসটি একটি মডেল ক্লাস। forms.ModelForm এই কাজটি করবে। ModelForm আমাদের কিছু জাদুকরি কাজ করে দেবে। মেটা ক্লাসের মধ্যে বলে দিতে হবে কোন মডেলের জন্য ফর্ম তেরী করবে। এবং ফর্মের ফিল্ড গুলো কি। ‘__all__’ অর্থ Expense মডেলে যত ফিল্ড আছে সব ফিল্ডের জন্য ফর্ম তৈরী করবে। fields = (‘amount’, ‘purpose’,’date’) এভাবেও লেখা যায়।

View তেরী

cost_management/views.py এর মধ্যে আমাদের তৈরী করা form ইমপোর্ট করি।

অত:পর আমাদের ভিউ তেরী করি

 

Expense ফর্ম তেরী করতে হলে ExpenseForm() কল করতে হবে এবং টেমপ্লেট এ পাঠাতে হবে। {‘form’: form} দ্বারা এই কাজ করা হয়েছে। template থেকে key ভ্যালু ‘form’ কে কল করলে আমাদের প্রত্যাশিত ফর্ম পেয়ে যাব। templates এর cost Directory এর মধ্যে add_expense.html টেমপ্লেট তরী করি।

Template তৈরী:

templates/cost/add_expense.html ফাইলে যোগ করি

{{ form }}

উল্লেখ্য, {{ form }} হচ্ছে render(request, ‘cost/add_expense.html’, {‘form’: form}) থেকে আসা form Key যা ExpenseForm ক্লাস থেকে এসেছে। এখন এই ভিউ কে প্রদর্শন করার জন্য একটি url তৈরী করি।

cost_management/urls এ একটি নতুন url যুক্ত করি

আমাদের urls.py এর চেহারা হবে

(_ ও – ব্যাবহারে সতর্ক থাকুন)

ব্রাউজারে http://localhost:8000/cost/add/ প্রবেশ করান, নিচের মত চেহারা দেখতে পাবেন

amount purpose নামে দুটি ফিল্ড দেখতে পাচ্ছেন, যা আমাদের ExpenseForm ক্লাস এ ছিল। কিন্তু আমরা জানি html form তৈরী করতে হলে <form><input/></form> ইত্যাদি অনেক কিছু লিখতে হয়। আমরা তো শুধু {{ form }} লিখলাম। তাহলে এই ফর্ম আসল কিভাবে ? জ্যাঙ্গো form ModelForm সয়ংক্রিয়ভাবে আমাদেরকে এসব ট্যাগ তৈরী করে দিয়েছে। প্রমান চান? মাউসের ডান পাশে চেপে Inspect Elementকরুন, প্রমান পেয়ে যাবেন।

{{ form }} কে {{ form.as_p }} অথবা {{ form.as_table }} অথবা {{ form.as_ul }}এ পরিবর্তন করে টেমপ্লেট এর পরিবর্তন লক্ষ করুন। প্রতিবার Inspect Element করে html এর পরিবর্তন দেখুন।

base.html এর সাথে extend করে চেহারাকে আরো সুন্দর করে তুলি।

 

base.html এর content ব্লক এর মধ্যে ফর্ম এর কোড প্রবেশ করিয়েছি

এখন আমাদের খরচ তালিকার পেজে একটি বোতাম যুক্ত করি , যেখানে চাপলে এই ফর্ম পেজ আসবে।

এখানে add-expense হচ্ছে urls.py এর name= ‘add-expense’

উল্লেখ্যঃ মেনুতে খরচ তালিকা পেজের লিঙ্ক যোগ করতে base.html এর <ul></ul> এর মধ্যে যোগ করি

লক্ষ করুন, আমাদের ফর্ম পেজে save করার জন্য কোন বোতাম নেই। আগামি পর্বে আমরা দেখব কিভাবে এই ফর্ম কে save করা যায় এবং নতুন খরচ যোগ করা যায়।

আগের পোষ্ট   পরের পোষ্ট