সিম্পল ফর্ম দিয়ে রুবি অন রেলসে ফর্ম তৈরিতে দক্ষতা অর্জন

রুবি অন রেলস نے ওয়েব অ্যাপ্লিকেশন তৈরির পদ্ধতিকে সম্পূর্ণরূপে পরিবর্তন করে দিয়েছে। শুরুতে ফ্রেমওয়ার্কটি কিছু চমৎকার ফিচার দিয়ে আসে যা আপনাকে দ্রুত শুরু করতে এবং শক্তিশালী অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

তবে, ফর্ম তৈরি ও হ্যান্ডলিং এখনও জটিল কাজ হতে পারে। সিম্পল ফর্ম (Simple Form) একটি চমৎকার বিকল্প। আসুন জানি সিম্পল ফর্ম কী, কেন এটি প্রয়োজন হতে পারে এবং কিছু বাস্তব ব্যবহার উদাহরণ।

ফর্ম এবং রুবি অন রেলস

রুবি অন রেলস অ্যাপ্লিকেশন তৈরি করতে সহজ করে দেয়। একই সাথে, এটি আপনার কোডবেইসকে স্ট্রিমলাইন এবং কোহেরেন্ট রাখতে নিরব্ধrainte দায়িত্বও রাখে। একটি কৌশল হলো অ্যাবস্ট্রাকশন ব্যবহার করে কোড লিখতে না করা। যেমন— আপনার আসল অ্যাপ্লিকেশনে যে কোড নেই, সেটা আপনাকে ম্যানেজ করতে হয় না। তাই আমরা অ্যাবস্ট্রাকশনকে এতটাই পছন্দ করি, ঠিক না? সিম্পল ফর্ম ঠিক এমন একটি অ্যাবস্ট্রাকশন যা ওয়েব পেজের জন্য ফর্ম তৈরি করাকে সহজ করে তোলে।

রুবি অন রেলস ব্যবহার করলেও ফর্ম তৈরি সাধারণত জটিল। প্রতিটি ফিল্ডের জন্য সঠিক টাইপ নির্ধারণ করা এবং সেটাকে সঠিক অ্যাট্রিবিউটের সাথে जोড়া দিতে হয়। সিম্পল ফর্ম সেটা সহজ করে দেয়, কারণ প্রতিটি ফিল্ডের জন্য সঠিক টাইপ খুঁজে বের করতে হয় না।

চলুন একটি ফর্ম বিবেচনা করি যা ইউজারের বিবরণ নেয়, যেখানে name, username, এবং email ফিল্ড আছে। ধরে নেই আমাদের কাছে একই সংশ্লিষ্ট অ্যাট্রিবিউটসহ User মডেল আছে। সিম্পল ফর্মে সেই অ্যাট্রিবিউটগুলো পূরণের ফর্ম নিচের মতো দেখাবে:

লক্ষ্য করুন, আমরা প্রতিটি ফিল্ডের টাইপ নির্দিষ্ট করছি না। সিম্পল ফর্ম কলামের টাইপের ভিত্তিতে প্রতিটি ফিল্ডের জন্য সঠিক ইনপুট টাইপ স্বয়ংক্রিয়ভাবে বেছে নেবে।

এটি আমাদের সময় বাঁচায় এবং কোডকে পঠনীয় ও রক্ষণাবেক্ষণের দৃষ্টিকোণ থেকে সহজ করে তোলে।

সিম্পল ফর্ম ইনস্টল করা

আপনার প্রজেক্টে সিম্পল ফর্ম ইনস্টল করতে, Gemfile-এ simple_form জেম যোগ করুন। bundle install রান করার পর, সেটআপের জন্য অন্তর্ভুক্ত জেনারেটর ব্যবহার করুন।

বুটস্ট্র্যাপ এবং জার্ব ফাউন্ডেশনের নোট: সিম্পল ফর্মে বুটস্ট্র্যাপ এবং জার্ব ফাউন্ডেশন ৫ উভয়ই সাপোর্টেড। তাই আপনি যদি তাদের মধ্যে যেকোনো একটি ব্যবহার করেন, তাহলে ইনস্টলেশনের সময় অতিরিক্ত কনফিগারেশন যোগ করতে জেনারেটরের সাথে --bootstrap বা --foundation প্যারামিটার ব্যবহার করতে পারেন। বুটস্ট্র্যাপের জন্য সেটা নিচের মতো দেখাবে:

সিম্পল ফর্মের বেসিক ব্যবহার

আমরা আগে বলেছি, সিম্পল ফর্ম मुख্যভাবে আপনার অবজেক্ট সংশ্লিষ্ট ডেটার ভিত্তিতে একটি সম্পূর্ণ ফর্ম জেনারেট করে। একই সাথে, এটি শুধু প্রতিটি অ্যাট্রিবিউটের জন্য উপযুক্ত ফিল্ড জেনারেট করে না, বরং লেবেল এবং এরর হিন্টও ইনপুট ফিল্ডের উপরে দেখায়!

একটি নতুন রুবি অন রেলস ৭.x অ্যাপ্লিকেশন বিবেচনা করি। আমরা একটি User মডেল জেনারেট করব এবং সিম্পল ফর্ম ব্যবহার করে এর জন্য একটি ফর্ম তৈরি করব।

এখন new, create, এবং index অ্যাকশনসহ একটি কন্ট্রোলার জেনারেট করি। লক্ষ্য হলো ফর্মে কাজ করার জন্য কিছু তৈরি করা।

এই অ্যাকশনগুলোর জন্য প্রাসঙ্গিক ভিউ দরকার। এখানে একটি ফর্ম যা ইউজার সাইন-আপ বা যোগ করা হ্যান্ডল করে:

এই কেসে, আমরা username ইনপুটের জন্য কাস্টম লেবেল এবং এরর নির্দিষ্ট করেছি। যদি এমন কাস্টমাইজেশন না দেওয়া হয়, তবে এটি অ্যাট্রিবিউটের নামের ভিত্তিতে লেবেল কী হওয়া উচিত সেটা অনুমান করবে।

আমরা password ফিল্ডের জন্য কাস্টম হিন্ট এবং email ফিল্ডের জন্য কাস্টম placeholder সেট করেছি। লক্ষ্য করুন, সাধারণ ফর্মের মত ফিল্ডের উপরে লেবেল না রেখে "ইনলাইন লেবেল" নির্দিষ্ট করার ক্ষমতাও আছে।

লেবেল, হিন্ট এবং এরর ডিজেবল করাও সম্ভব, সেসব অ্যাট্রিবিউটের জন্য false ভ্যালু পাস করলে: <%= f.input :password_confirmation, label: false %>।

এটাকে ব্যবহারযোগ্য बनाने এক আরো ভিউ দরকার।

তারপর rails s দিয়ে অ্যাপ্লিকেশন শুরু করুন। localhost:3000/users/new এ যেন ফর্ম দেখতে ও ব্যবহার করতে পারেন। ক্লাসিক রুবি অন রেলস ফর্মের সাথে কী পার্থক্য সেটা দেখি।

ভ্যালিডেশন সম্পর্কে নোট: সিম্পল ফর্ম বক্সের বাইরে ماندেটরি ফিল্ডের সাথে কাজ করতে পারে। উদাহরণস্বরূপ, যদি আমরা User মডেলে নিচের প্রেজেন্স ভ্যালিডেশন যোগ করি:

এটি সিম্পল ফর্ম ব্যবহার করে username ফিল্ডের পাশে একটি ছোট '*' যোগ করবে, যা নির্দেশ করবে যে এটি বাধ্যতামূলক। এটি এরর অটোমেটিক্যালি হ্যান্ডল করে না, তাই কন্ট্রোলার অ্যাকশনে আপনাকে এখনও সেটা হ্যান্ডল করতে হবে। এররવાળা উপযুক্ত ফিল্ডে ফিরে যান এবং সেটা সলভ করুন।

কলাম টাইপ এবং ফর্ম ফিল্ড সম্পর্কে

আগে বলা মতে, আমরা প্রতিটি ফিল্ডের জন্য টাইপ নির্দিষ্ট করিনি। সিম্পল ফর্মের README-তে সব উপলব্ধ ইনপুট টাইপ এবং প্রতিটি কলাম টাইপের ডিফল্টের সম্পূর্ণ তালিকা আছে। সবচেয়ে বেশি ব্যবহৃতগুলো নিচে দেওয়া হলো:

বুলিয়ান (Booleans)

উপরোক্ত টেবিলে দেখতে পাবেন, বুলিয়ান অ্যাট্রিবিউट ডিফল্টভাবে চেকবক্স হিসেবে দেখানো হয়। অনেক কেসেই এটাই আমরা চাই। কিন্তু যদি না চান, তবে সিম্পল ফর্মে as অ্যাট্রিবিউট দিয়ে কাস্টোমাইজ করা যায়, যাতে রেডিও বাটন বা ড্রপডাউন দেখানো যায়।

রেডিও বাটন নির্দিষ্ট করার পদ্ধতি:

এটি নিচের HTML জেনারেট করবে:

অত্যন্ত ছোট একটি রুবি কোড টুকরো থেকে এত পুরো HTML পাওয়া চমৎকার!

HTML

পূর্বের উদাহরণ থেকে দেখা যায়, সিম্পল ফর্ম প্রতিটি ফিল্ডের জন্য প্রচুর HTML জেনারেট করে। এতে ইনপুট ফিল্ডের HTML এবং লেবেল ও ইনপুট ফিল্ডকে ঘেরে একটি wrapper div থাকে। input_html এবং wrapper_html অ্যাট্রিবিউট দিয়ে কাস্টম ক্লাস এবং আইডি নির্দিষ্ট করে সেগুলো কাস্টোমাইজ করা যায়। উদাহরণ:

এটাও সংশ্লিষ্ট HTML-এ অ্যাট্রিবিউট সেট করার একটি পথ, যেমন maxlength বা value। আমাদের ইউজার ফর্মের password ফিল্ড নিই। maxlength অ্যাট্রিবিউট দিয়ে ফিল্ডের সাইজ এবং দৈর্ঘ্য লিমিট করা যায়।

কাস্টম ইনপুট এবং অতিরিক্ত অপশন

সিম্পল ফর্ম একটি রুবি লাইব্রেরি যা আপনার জন্য HTML নোড তৈরি করে। এর সাথে পুরো সেট ফিল্ড আসে, কিন্তু আপনি নিজেরও যোগ করতে পারেন। এর জন্য সিম্পল ফর্মের ক্লাস থেকে ইনহেরিট করে ক্লাস তৈরি করতে হবে। চলো একটি কাস্টম সোশ্যাল নেটওয়ার্ক ইনপুট ফিল্ড ডিফাইন করি যেখানে আসল ফিল্ডের সামনে '@' প্রিফিক্স থাকবে।

এখন আমরা এটাকে নিচেরভাবে ব্যবহার করতে পারি:

লক্ষ্য করুন, আপনার User মডেলে network_handle অ্যাট্রিবিউট না থাকলে, মাইগ্রেশন বা মডেলে attr_accessor দিয়ে সেটা যোগ করতে হবে।

i18n সাপোর্ট

আমরা বলেছি, ফর্ম তৈরি করা প্রায়শই পেনফুল। কিন্তু একাধিক ভাষা সাপোর্ট করার 웹সাইট বা অ্যাপ্লিকেশনের কথা হলে বিষয়টা আরও কষ্টকর হয়। সিম্পল ফর্ম কৃতজ্ঞতার সাথে রুবি অন রেলস স্ট্যান্ডার্ড ফলো করে। লোকাল ফাইলে simple_form কী ব্যবহার করে সকল লেবেল, হিন্ট, প্লেসহোল্ডার, প্রম্প্ট ইত্যাদির অনুবাদ ডিফাইন করা যায়।

একটি ছোট উদাহরণ:

ভ্যালু অবজেক্টস (Value Objects)

কখনও কখনও আমরা কাস্টম, নন-অ্যাক্টিভরেকর্ড ক্লাস ব্যবহার করে ফর্মের মূল অবজেক্ট ইনস্ট্যানশিয়েট করি। এটা একাধিক মডেল থেকে ডেটা কম্পোজ করে একটি সিনথেটিক অবজেক্ট বানাতে হয়—বিজনেস লজিকের জন্য বা nhiều অ্যাট্রিবিউট একসাথে রাখতে।

কারণ যেকোনো হোক, সিম্পল ফর্মে আপনি এধরনের অবজেক্টের জন্যও ফর্ম তৈরি করতে পারেন। এর জন্য অবজেক্ট ক্লাসে সর্বোত্তম কেসে তিনটি মেথড ইমপ্লিমেন্ট করতে হবে: to_model, to_key, এবং persisted?।

to_model মেথড অবজেক্টটিকে পয়েন্ট করবে:

to_key আমাদের অবজেক্টের আইডেন্টিফায়ার অ্যাট্রিবিউটকে পয়েন্ট করতে দেয়—সাধারণত id অ্যাট্রিবিউট:

শেষে, persisted? মেথড সিম্পল ফর্মকে বলে দেয় অবজেক্টটি ডায়রেক্টলি পাৰসিস্টেড কিনা।

যদি এই মেথড না থাকে, তবে f.submit হেল্পার ইউজেবল নয়।

তবে দ্রুত পদ্ধতিও আছে—ক্লাসে ActiveModel::Model মডিউল ইনক্লুড করলেই হয়:

এখন User মডেলের মাধ্যমে ব্যবহার করি।

তাহলে ইউজার ফর্মের ভিতরে কোম্পানির নামের জন্য একটি ফিল্ড যোগ করতে পারি:

শালো, এই অ্যাট্রিবিউট টেবিলে সেভ হবে না। কিন্তু একই কনসেপ্ট ব্যবহার করে কয়েকটি মডেল থেকে অ্যাট্রিবিউট টেনে একটি ভ্যালু অবজেক্ট কম্পোজ করা যায়।

শেষ কথা

এই পোস্টে আমরা দেখেছি যে সিম্পল ফর্ম আপনার রুবি অন রেলস অ্যাপ্লিকেশনে ইনস্টল ও ইন্টিগ্রেট করা সহজ। সিম্পল ফর্ম শুধু আপনার ফর্মের প্রতিটি ফিল্ডের ডিটেইলস কয়েকniu দেয় না, বরং জটিল এবং সম্পূর্ণ HTML ও জেনারেট করে যাতে আপনার ফর্ম সহজে স্টাইল ও শেপ করা যায়।

আপনাকে সিম্পল ফর্মের ডকুমেন্টেশন ঘুরে আসার অনুশীলন করছি, যেন দেখতে পান কতটুকু পাওয়ারফুল এটি হতে পারে।

হ্যাপি কোডিং!

P.S. রুবি ম্যাজিক পোস্টগুলো প্রেস থেকে বের होते সাথে পেতে চাইলে আমাদের রুবি ম্যাজিক নিউজলেটার সাবস্ক্রাইব করুন এবং একটিও পোস্ট মিস করবেন না!

থোমাস রিবুলেট

আমাদের অতিথি লেখক থোমাস ফ্রান্স 거주 করার একজন কনসাল্ট্যান্ট ব্যাকএন্ড এবং ক্লাউড ইনফ্রাস্ট্রাকচার ইঞ্জিনিয়ার। ১৩ বছরের বেশি সময় ধরে স্টার্টআপ এবং কোম্পানিগুলোর সাথে কাজ করেছেন তাদের টিম, প্রোডাক্ট এবং ইনফ্রাস্ট্রাকচার স্কেল করার জন্য। তিনি ফ্রান্সের GNU/লিনাক্স ম্যাগাজিনে এবং নিজের ব্লগে একাধিকবার প্রকাশিত হয়েছেন।

থোমাস রিবুলেটের সকল আর্টিকেল