সিম্পল ফর্ম সহ রেল অন রুবিতে ফর্ম তৈরিতে মাস্টারিং

আমরা কিভাবে ওয়েব অ্যাপ্লিকেশান তৈরি করি সেইভাবে Ruby on Rails পরিবর্তন করেছে৷ প্রথম দিকে, ফ্রেমওয়ার্কটি আপনাকে শুরু করতে এবং শক্তিশালী অ্যাপ্লিকেশন তৈরি করতে সাহায্য করার জন্য কিছু দুর্দান্ত বৈশিষ্ট্য নিয়ে এসেছিল৷

যাইহোক, ফর্মগুলি তৈরি করা এবং পরিচালনা করা এখনও কঠিন হতে পারে। সহজ ফর্ম একটি মহান বিকল্প. আসুন সরল ফর্ম কী, কেন আমাদের এটির প্রয়োজন হতে পারে এবং কিছু বাস্তব ব্যবহারের ক্ষেত্রে পরীক্ষা করা যাক।

রেলের উপর ফর্ম এবং রুবি

রুবি অন রেল সত্যিই বিল্ডিং অ্যাপ্লিকেশন সহজ করে. তবুও, আপনার কোডবেসকে সুগঠিত এবং সুসঙ্গত রাখার জন্য আপনার ধ্রুবক মনোযোগ প্রয়োজন। একটি কৌশল হল বিমূর্ততা ব্যবহার করে কোড লেখা এড়ানো, উদাহরণস্বরূপ। যে কোডটি আপনার প্রকৃত অ্যাপ্লিকেশনে নেই সেই কোডটি আপনাকে পরিচালনা করতে হবে না। এই কারণেই আমরা বিমূর্ততা এত পছন্দ করি, তাই না? সরল ফর্ম এমন একটি বিমূর্ততা যা ওয়েব পৃষ্ঠাগুলির জন্য ফর্মগুলিকে সহজ করে তোলে৷

ফর্মগুলি সাধারণত তৈরি করা জটিল, এমনকি রেলে রুবি ব্যবহার করে। প্রতিটি ক্ষেত্রে সঠিক ধরন সংজ্ঞায়িত করতে এবং সঠিক বৈশিষ্ট্যের সাথে সংযুক্ত করার জন্য মনোযোগ প্রয়োজন। সিম্পল ফর্ম সেই ব্যথা কমিয়ে দেয়, কারণ প্রতিটি ক্ষেত্রের জন্য আপনাকে সঠিক ধরন খুঁজে বের করতে হবে না।

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

মনে রাখবেন যে আমরা প্রতিটি ক্ষেত্রের প্রকারগুলি নির্দিষ্ট করছি না। সাধারণ ফর্ম কলামের প্রকারের উপর ভিত্তি করে প্রতিটি ক্ষেত্রের জন্য সঠিক ইনপুট প্রকার বাছাই করবে।

এটি আমাদের সময় বাঁচায় এবং কোডটিকে পাঠযোগ্য এবং বজায় রাখা সহজ করে।

সরল ফর্ম ইনস্টল করা হচ্ছে

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

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

সাধারণ ফর্মের মৌলিক ব্যবহার

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

চলুন একটি নতুন রুবি অন Rails 7.x অ্যাপ্লিকেশন বিবেচনা করা যাক। আমরা একটি ব্যবহারকারী মডেল তৈরি করব এবং সাধারণ ফর্ম ব্যবহার করে এটির জন্য একটি ফর্ম তৈরি করব৷

এখন আমরা new দিয়ে একটি কন্ট্রোলার তৈরি করতে পারি , create , এবং index কর্ম উদ্দেশ্য হল এমন কিছু থাকা যা আমরা ফর্মে খেলতে পারি।

এই কর্ম প্রাসঙ্গিক মতামত প্রয়োজন. এখানে একটি ফর্ম রয়েছে যা একজন ব্যবহারকারীকে সাইন আপ করা বা যুক্ত করা পরিচালনা করে:

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

আমরা password-এর জন্য একটি কাস্টম ইঙ্গিত সেট করেছি ক্ষেত্র এবং একটি কাস্টম placeholder email-এর জন্য ক্ষেত্র লক্ষ্য করুন, এছাড়াও, ক্ষেত্রের উপরে অবস্থিত একটির পরিবর্তে একটি "ইনলাইন লেবেল" নির্দিষ্ট করার ক্ষমতা (ফর্মগুলিতে স্বাভাবিক ডিফল্ট)।

false পাস করে লেবেল, ইঙ্গিত এবং ত্রুটিগুলি অক্ষম করাও সম্ভব এই বৈশিষ্ট্যগুলির জন্য মান:<%= f.input :password_confirmation, label: false %> .

এটিকে ব্যবহারযোগ্য করার জন্য আমাদের এটিকে আরও একটি দৃশ্যের সাথে পরিপূরক করতে হবে৷

তারপর আপনি rails s ব্যবহার করে অ্যাপ্লিকেশনটি শুরু করতে পারেন . localhost:3000/users/new-এ যান ফর্মটি দেখতে এবং ব্যবহার করতে৷ আসুন আমরা ফোকাস করি কীভাবে ফর্মটি একটি ক্লাসিক রুবি অন রেল ফর্ম থেকে আলাদা৷

বৈধকরণের উপর একটি নোট :সাধারণ ফর্ম বাক্সের বাইরে বাধ্যতামূলক ক্ষেত্রগুলির সাথে কাজ করতে পারে৷ উদাহরণস্বরূপ, যদি আমরা আমাদের ব্যবহারকারী মডেলে নিম্নলিখিত উপস্থিতি যাচাইকরণ যোগ করতে চাই:

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

কলামের ধরন এবং ফর্ম ক্ষেত্র সম্পর্কে

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

বুলিয়ানস

আমরা উপরের টেবিলে দেখতে পাচ্ছি, বুলিয়ান অ্যাট্রিবিউটগুলি ডিফল্টরূপে চেকবক্স হিসাবে উপস্থাপন করা হবে। অনেক ক্ষেত্রে, আমরা কি চাইব। কিন্তু যদি তা না হয়, তাহলে as দিয়ে সহজ ফর্মে এটি কাস্টমাইজ করার একটি উপায় আছে বৈশিষ্ট্য, যা আপনাকে রেডিও বোতাম বা ড্রপডাউন দেখাবে কিনা তা নির্দিষ্ট করতে দেয়।

এর পরিবর্তে রেডিও বোতামগুলি কীভাবে নির্দিষ্ট করবেন তা এখানে রয়েছে:

এটি নিম্নলিখিত HTML তৈরি করবে:

এটা চিত্তাকর্ষক যে রুবি কোডের এত ছোট টুকরো আপনাকে HTML এর সম্পূর্ণ অংশ পায়!

HTML

আগের উদাহরণ থেকে, আমরা দেখতে পাচ্ছি কিভাবে Simple Form প্রতিটি ক্ষেত্রের জন্য প্রচুর HTML তৈরি করে। এতে ইনপুট ক্ষেত্রের জন্য এইচটিএমএল এবং লেবেল এবং ইনপুট ক্ষেত্রের চারপাশে একটি র্যাপার ডিভ অন্তর্ভুক্ত রয়েছে। আমরা input_html ব্যবহার করে একটি কাস্টম ক্লাস এবং আইডি নির্দিষ্ট করে সেগুলি কাস্টমাইজ করতে পারি এবং wrapper_html গুণাবলী এখানে একটি উদাহরণ।

এটি সম্পর্কিত HTML এর জন্য বৈশিষ্ট্য সেট করার একটি উপায়, যেমন maxlength অথবা value . আসুন আমাদের ব্যবহারকারী ফর্ম থেকে পাসওয়ার্ড ক্ষেত্রটি নেওয়া যাক। আমরা maxlength দিয়ে ক্ষেত্রের আকার এবং দৈর্ঘ্য সীমাবদ্ধ করতে পারি বৈশিষ্ট্য।

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

সিম্পল ফর্ম হল একটি রুবি লাইব্রেরি যা আপনার জন্য HTML নোড প্রস্তুত করে। এটি ক্ষেত্রগুলির একটি সম্পূর্ণ সেটের সাথে আসে তবে আপনি নিজেরও যোগ করতে পারেন। এটি করার জন্য, আপনি সাধারণ ফর্মের ক্লাসগুলি থেকে উত্তরাধিকারসূত্রে ক্লাস তৈরি করতে পারেন। আসল ক্ষেত্রের সামনে একটু '@' উপসর্গ সহ একটি কাস্টম সোশ্যাল নেটওয়ার্ক ইনপুট ক্ষেত্র সংজ্ঞায়িত করা যাক৷

এখন আমরা এটি নিম্নলিখিত উপায়ে ব্যবহার করতে পারি:

মনে রাখবেন, যদি আপনার ব্যবহারকারী মডেলের network_handle না থাকে বৈশিষ্ট্য, আপনাকে অবশ্যই এটি একটি মাইগ্রেশনের মাধ্যমে যোগ করতে হবে বা একটি attr_accessor দিয়ে প্রতারণা করতে হবে মডেলে।

i18n সমর্থন

আমরা যেমন উল্লেখ করেছি, বিল্ডিং ফর্মগুলি প্রায়শই একটি ব্যথা বিন্দু। কিন্তু বিষয়গুলি আরও বেদনাদায়ক হয় যখন এটি একাধিক ভাষা সমর্থন করে এমন ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলির ক্ষেত্রে আসে৷ সহজ ফর্ম, সৌভাগ্যক্রমে, রুবি অন রেলের মান অনুসরণ করে। আপনি একটি simple_form ব্যবহার করতে পারেন সমস্ত লেবেল, ইঙ্গিত, স্থানধারক, প্রম্পট ইত্যাদির জন্য অনুবাদ সংজ্ঞায়িত করতে স্থানীয় ফাইলগুলিতে কী।

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

মূল্য বস্তু

কখনও কখনও, আমরা কাস্টম, নন-অ্যাক্টিভরেকর্ড ক্লাসগুলি ব্যবহার করতে পারি একটি ফর্মের উপর নির্ভর করে এমন প্রধান বস্তুকে ইনস্ট্যান্ট করতে। এটি ব্যবসায়িক যুক্তির কারণে একাধিক মডেল থেকে সিন্থেটিক একটিতে ডেটা রচনা করতে বা একটি একক বস্তুতে একাধিক বৈশিষ্ট্য সংগ্রহ করতে করা যেতে পারে।

কারণ যাই হোক না কেন, আপনি এখনও সেই ধরণের বস্তুর জন্য ফর্ম তৈরি করতে সরল ফর্মের উপর নির্ভর করতে পারেন। এটি করার জন্য, অবজেক্ট ক্লাসটিকে সর্বোত্তম ক্ষেত্রে তিনটি পদ্ধতি প্রয়োগ করতে হবে:to_model , to_key , এবং persisted? .

to_model পদ্ধতি নিজেই বস্তুর দিকে নির্দেশ করবে:

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

অবশেষে, persisted? যদি বস্তুটি সরাসরি স্থির থাকে বা না থাকে তবে সরল ফর্মটি বলার পদ্ধতি রয়েছে৷

যদি সেই পদ্ধতিটি উপস্থিত না থাকে, তাহলে f.submit সাহায্যকারী ব্যবহারযোগ্য নয়।

যদিও ActiveModel::Model সহ একটি দ্রুততর উপায় আছে ক্লাসের মডিউল:

এবং ইউজার মডেলের মাধ্যমে এটি ব্যবহার করা যাক।

তারপরে আমরা ব্যবহারকারী ফর্মের মধ্যে কোম্পানির নামের জন্য একটি ক্ষেত্র যোগ করতে পারি:

অবশ্যই, এই বৈশিষ্ট্যটি একটি টেবিলে সংরক্ষিত হবে না। যাইহোক, একই ধারণাটি বেশ কয়েকটি মডেল থেকে টানা বৈশিষ্ট্য সহ একটি মান বস্তু রচনা করতে প্রয়োগ করা যেতে পারে।

র্যাপিং আপ

এই পোস্টে, আমরা দেখেছি যে সহজ ফর্মটি আপনার রুবি অন রেল অ্যাপ্লিকেশনে ইনস্টল করা এবং একীভূত করা সহজ। সহজ ফর্ম শুধুমাত্র আপনার ফর্মের প্রতিটি ক্ষেত্রের বিবরণের যত্ন নেয় না, বরং জটিল এবং সম্পূর্ণ এইচটিএমএলও তৈরি করে যাতে আপনার ফর্মটি সহজে স্টাইল এবং আকার দেওয়া যায়৷

এটি কতটা শক্তিশালী হতে পারে তা দেখতে আমি আপনাকে সরল ফর্মের ডকুমেন্টেশনে ডুব দিতে উত্সাহিত করি৷

শুভ কোডিং!

পি.এস. আপনি যদি রুবি ম্যাজিক পোস্টগুলি প্রেস থেকে বের হওয়ার সাথে সাথে পড়তে চান তবে আমাদের রুবি ম্যাজিক নিউজলেটারে সাবস্ক্রাইব করুন এবং একটি পোস্ট মিস করবেন না!

থমাস রিবোলেট

আমাদের অতিথি লেখক টমাস ফ্রান্সে অবস্থিত একজন পরামর্শক ব্যাকএন্ড এবং ক্লাউড অবকাঠামো প্রকৌশলী। 13 বছরেরও বেশি সময় ধরে, তিনি স্টার্টআপ এবং কোম্পানিগুলির সাথে তাদের দল, পণ্য এবং অবকাঠামো স্কেল করার জন্য কাজ করেছেন। এছাড়াও তিনি ফ্রান্সের GNU/Linux ম্যাগাজিনে এবং তার ব্লগে বেশ কয়েকবার প্রকাশিত হয়েছেন।

টমাস রিবোলেটের সমস্ত নিবন্ধ