रूबी ऑन रेल्स ने वेब एप्लिकेशन बनाने के तरीके को बदल दिया है। शुरुआत में, फ्रेमवर्क कुछ बेहतरीन फीचर्स के साथ आया जो आपको शुरू करने और मजबूत एप्लिकेशन बनाने में मदद करते हैं।
फिर भी, फॉर्म बनाना और संभालना अभी भी मुश्किल हो सकता है। Simple Form एक बढ़िया विकल्प है। आइए देखें कि Simple Form क्या है, हमें इसकी आवश्यकता क्यों हो सकती है, और कुछ वास्तविक उपयोग के मामले।
फॉर्म और Ruby on Rails
रूबी ऑन रेल्स वास्तव में एप्लिकेशन बनाने को सरल बनाता है। फिर भी, यह आपके कोडबेस को सुव्यवस्थित और सुसंगत रखने के लिए आपका निरंतर ध्यान आकर्षित करता है। एक रणनीति अमूर्तता का उपयोग करके कोड लिखने से बचना है, उदाहरण के लिए। कोड जो आपके वास्तविक एप्लिकेशन में नहीं है, वह कोड है जिसे आपको प्रबंधित नहीं करना पड़ता। इसीलिए हमें अमूर्तताएं इतनी पसंद हैं, है ना? Simple Form एक ऐसी ही अमूर्तता है जो वेब पेजों के लिए फॉर्म बनाने को सरल बनाती है।
फॉर्म आम तौर पर रूबी ऑन रेल्स का उपयोग करके भी बनाने में जटिल होते हैं। प्रत्येक फ़ील्ड को सही प्रकार परिभाषित करने और इसे सही विशेषता से जोड़ने के लिए ध्यान देने की आवश्यकता होती है। Simple Form उस दर्द को कम करता है, क्योंकि आपको प्रत्येक फ़ील्ड के लिए आवश्यक सटीक प्रकार खोजने की आवश्यकता नहीं होती है।
आइए एक ऐसा फॉर्म लें जो उपयोगकर्ता का विवरण प्राप्त करता है, जिसमें name, username, और email फ़ील्ड हों। मान लें कि हमारे पास समान संबंधित विशेषताओं वाला User मॉडल है। Simple Form के साथ, विशेषताओं को भरने वाला फॉर्म निम्नलिखित जैसा दिखता है:
ध्यान दें कि हम प्रत्येक फ़ील्ड के प्रकार निर्दिष्ट नहीं कर रहे हैं। Simple Form कॉलम के प्रकार के आधार पर प्रत्येक फ़ील्ड के लिए सही इनपुट प्रकार चुनेगा।
यह हमारा समय बचाता है और कोड को पठनीय और रखरखाव में आसान रखता है।
Simple Form इंस्टॉल करना
अपने प्रोजेक्ट में Simple Form इंस्टॉल करने के लिए, simple_form जेम को Gemfile में जोड़ें। एक बार जब आप bundle install चला लेते हैं, तो आप इसे अपने एप्लिकेशन के लिए सही ढंग से सेट अप करने के लिए शामिल जेनरेटर का उपयोग कर सकते हैं।
Bootstrap और Zurb Foundation पर एक नोट: Simple Form के भीतर Bootstrap और Zurb Foundation 5 दोनों समर्थित हैं। इसलिए, यदि आप उनमें से किसी एक का उपयोग कर रहे हैं, तो आप इंस्टॉलेशन के दौरान अतिरिक्त कॉन्फ़िगरेशन शामिल करने के लिए जेनरेटर के साथ --bootstrap या --foundation पैरामीटर का उपयोग कर सकते हैं। Bootstrap के मामले में, यह निम्नलिखित जैसा दिखेगा:
Simple Form का बुनियादी उपयोग
जैसा कि हमने पहले बताया, Simple Form मुख्य रूप से आपके ऑब्जेक्ट से संबंधित डेटा के आधार पर एक पूरा फॉर्म जेनरेट करेगा। फिर भी, यह समझना भी महत्वपूर्ण है कि Simple Form न केवल प्रत्येक विशेषता के लिए उपयुक्त फ़ील्ड जेनरेट करेगा बल्कि लेबल भी प्रदान करेगा और इनपुट फ़ील्ड के ऊपर त्रुटि संकेत प्रदर्शित करेगा!
आइए एक नए रूबी ऑन रेल्स 7.x एप्लिकेशन पर विचार करें। हम एक User मॉडल जेनरेट करेंगे और Simple Form का उपयोग करके इसके लिए एक फॉर्म बनाएंगे।
अब हम new, create, और index एक्शन के साथ एक कंट्रोलर जेनरेट कर सकते हैं। उद्देश्य कुछ ऐसा होना है जिसके साथ हम फॉर्म में खेल सकें।
इन एक्शन के लिए प्रासंगिक व्यू की आवश्यकता होती है। यहां एक फॉर्म है जो उपयोगकर्ता के साइन अप या जोड़े जाने को संभालता है:
इस मामले में, हम username इनपुट के लिए एक कस्टम लेबल और त्रुटि निर्दिष्ट करते हैं। यदि ऐसा कोई अनुकूलन नहीं दिया जाता है, तो यह विशेषता के नाम के आधार पर अनुमान लगाने की पूरी कोशिश करेगा कि लेबल क्या होना चाहिए।
हमने password फ़ील्ड के लिए एक कस्टम संकेत और email फ़ील्ड के लिए एक कस्टम placeholder सेट किया है। साथ ही, फ़ील्ड के ऊपर स्थित सामान्य लेबल के बजाय "इनलाइन लेबल" निर्दिष्ट करने की क्षमता पर ध्यान दें।
उन विशेषताओं के लिए false मान पास करके लेबल, संकेत और त्रुटियों को अक्षम करना भी संभव है: <%= f.input :password_confirmation, label: false %>।
इसे उपयोग योग्य बनाने के लिए हमें एक और व्यू के साथ पूरक करने की आवश्यकता है।
फिर आप rails s का उपयोग करके एप्लिकेशन शुरू कर सकते हैं। फॉर्म देखने और उपयोग करने के लिए localhost:3000/users/new पर जाएं। आइए इस बात पर ध्यान केंद्रित करें कि फॉर्म क्लासिक रूबी ऑन रेल्स फॉर्म से कैसे भिन्न होता है।
मान्यताओं पर एक नोट: Simple Form बॉक्स से बाहर अनिवार्य फ़ील्ड के साथ काम कर सकता है। उदाहरण के लिए, यदि हम अपने User मॉडल में निम्नलिखित उपस्थिति मान्यता जोड़ते:
इसका उपयोग Simple Form द्वारा username फ़ील्ड के आगे एक छोटा '*' जोड़ने के लिए किया जाएगा, यह निर्दिष्ट करते हुए कि यह अनिवार्य है। यह त्रुटियों को स्वचालित रूप से प्रबंधित नहीं करता है, इसलिए आपको अभी भी कंट्रोलर एक्शन में इसे संभालना होगा। त्रुटि वाले उपयुक्त फ़ील्ड पर वापस जाएं और उन पर कार्रवाई करें।
कॉलम प्रकार और फॉर्म फ़ील्ड के बारे में
जैसा कि पहले उल्लेख किया गया है, हमने प्रत्येक फ़ील्ड के लिए प्रकार निर्दिष्ट नहीं किया है। Simple Form README में सभी उपलब्ध इनपुट प्रकारों और प्रत्येक कॉलम प्रकार के लिए डिफ़ॉल्ट की पूरी सूची है। यहां सबसे अधिक उपयोग किए जाने वाले हैं:
बूलियन
जैसा कि हम उपरोक्त तालिका में देख सकते हैं, बूलियन विशेषताओं को डिफ़ॉल्ट रूप से चेकबॉक्स के रूप में दर्शाया जाएगा। कई मामलों में, यही हम चाहेंगे। लेकिन यदि नहीं, तो Simple Form में as विशेषता का उपयोग करके इसे अनुकूलित करने का एक तरीका है, जो आपको यह निर्दिष्ट करने की अनुमति देता है कि आप रेडियो बटन या ड्रॉपडाउन दिखाएंगे।
रेडियो बटन निर्दिष्ट करने का तरीका यहां दिया गया है:
यह निम्नलिखित HTML जेनरेट करेगा:
यह प्रभावशाली है कि रूबी कोड का इतना छोटा टुकड़ा आपको HTML का इतना पूरा टुकड़ा देता है!
HTML
पिछले उदाहरण से, हम देख सकते हैं कि Simple Form प्रत्येक फ़ील्ड के लिए बहुत सारा HTML जेनरेट करता है। इसमें इनपुट फ़ील्ड के लिए HTML और लेबल और इनपुट फ़ील्ड के चारों ओर एक रैपर div शामिल है। हम input_html और wrapper_html विशेषताओं का उपयोग करके एक कस्टम क्लास और आईडी निर्दिष्ट करके इन्हें अनुकूलित कर सकते हैं। यहां एक उदाहरण है।
यह संबंधित HTML के लिए विशेषताएँ सेट करने का एक तरीका भी है, जैसे maxlength या value। आइए हमारे उपयोगकर्ता फॉर्म से पासवर्ड फ़ील्ड लें। हम maxlength विशेषता के साथ फ़ील्ड के आकार और लंबाई को सीमित कर सकते हैं।
कस्टम इनपुट और अतिरिक्त विकल्प
Simple Form एक रूबी लाइब्रेरी है जो आपके लिए HTML नोड्स तैयार करती है। यह फ़ील्ड का एक पूरा सेट लेकर आता है, लेकिन आप अपने खुद के भी जोड़ सकते हैं। ऐसा करने के लिए, आप Simple Form के वर्गों से विरासत में मिले वर्ग बना सकते हैं। आइए वास्तविक फ़ील्ड के सामने थोड़े '@' उपसर्ग के साथ एक कस्टम सोशल नेटवर्क इनपुट फ़ील्ड को परिभाषित करने पर विचार करें।
अब हम इसका उपयोग निम्न तरीके से कर सकते हैं:
ध्यान दें कि, यदि आपके User मॉडल में network_handle विशेषता नहीं है, तो आपको इसे माइग्रेशन के माध्यम से जोड़ना होगा या मॉडल में attr_accessor के साथ धोखा देना होगा।
i18n समर्थन
जैसा कि हमने उल्लेख किया है, फॉर्म बनाना अक्सर एक दर्द बिंदु होता है। लेकिन जब कई भाषाओं का समर्थन करने वाली वेबसाइटों और एप्लिकेशन की बात आती है तो चीजें और भी दर्दनाक हो जाती हैं। Simple Form, शुक्र है, रूबी ऑन रेल्स मानकों का पालन करता है। आप सभी लेबल, संकेत, प्लेसहोल्डर, संकेत आदि के लिए अनुवाद को परिभाषित करने के लिए स्थानीय फ़ाइलों में simple_form कुंजी का उपयोग कर सकते हैं।
यहां एक छोटा उदाहरण है:
वैल्यू ऑब्जेक्ट्स
कभी-कभी, हम उस मुख्य ऑब्जेक्ट को इंस्टेंटिएट करने के लिए कस्टम, गैर-ActiveRecord कक्षाओं का उपयोग कर सकते हैं जिस पर एक फॉर्म निर्भर करता है। यह व्यावसायिक तर्क कारणों से या कई विशेषताओं को एक ऑब्जेक्ट में इकट्ठा करने के लिए कई मॉडलों से डेटा लिखने के लिए किया जा सकता है।
कारण जो भी हो, आप अभी भी Simple Form पर भरोसा कर सकते हैं ताकि उस तरह के ऑब्जेक्ट के लिए फॉर्म बनाए जा सकें। ऐसा करने के लिए, ऑब्जेक्ट क्लास को सर्वोत्तम स्थिति में तीन तरीकों को लागू करने की आवश्यकता होती है: to_model, to_key, और persisted?।
to_model विधि ऑब्जेक्ट की ओर इशारा करेगी:
to_key हमें ऑब्जेक्ट के लिए पहचानकर्ता विशेषता की ओर इशारा करने की अनुमति देता है — आमतौर पर, इसका मतलब id विशेषता होता है:
अंत में, persisted? विधि यह बताने के लिए है कि ऑब्जेक्ट सीधे स्थायी है या नहीं।
यदि वह विधि मौजूद नहीं है, तो f.submit हेल्पर उपयोग योग्य नहीं है।
हालांकि, एक तेज़ तरीका है — क्लास में ActiveModel::Model मॉड्यूल को शामिल करना:
और आइए इसे User मॉडल के माध्यम से उपयोग करें।
हम तब उपयोगकर्ता फॉर्म के भीतर कंपनी नाम के लिए एक फ़ील्ड जोड़ सकते हैं:
बेशक, यह विशेषता किसी टेबल में सहेजी नहीं जाएगी। हालांकि, उसी अवधारणा को कई मॉडलों से खींची गई विशेषताओं के साथ एक वैल्यू ऑब्जेक्ट बनाने के लिए लागू किया जा सकता है।
समापन
इस पोस्ट में, हमने देखा कि Simple Form को स्थापित करना और अपने रूबी ऑन रेल्स एप्लिकेशन में एकीकृत करना आसान है। Simple Form न केवल आपके फॉर्म में प्रत्येक फ़ील्ड के विवरण का ख्याल रखता है, बल्कि जटिल और पूर्ण HTML भी जेनरेट करता है ताकि आपके फॉर्म को आसानी से स्टाइल और आकार दिया जा सके।
मैं आपको Simple Form के दस्तावेज़ीकरण में गोता लगाने के लिए प्रोत्साहित करता हूं ताकि आप देख सकें कि यह कितना शक्तिशाली हो सकता है।
हैप्पी कोडिंग!
P.S. यदि आप Ruby Magic पोस्ट को प्रेस से निकलते ही पढ़ना चाहते हैं, तो हमारे Ruby Magic न्यूज़लेटर की सदस्यता लें और कभी भी एक भी पोस्ट न चूकें!
Thomas Riboulet
हमारे अतिथि लेखक Thomas फ्रांस में स्थित एक सलाहकार बैकएंड और क्लाउड इन्फ्रास्ट्रक्चर इंजीनियर हैं। 13 से अधिक वर्षों से, उन्होंने स्टार्टअप और कंपनियों के साथ उनकी टीमों, उत्पादों और इन्फ्रास्ट्रक्चर को स्केल करने के लिए काम किया है। उन्हें फ्रांस की GNU/Linux पत्रिका और उनके ब्लॉग पर कई बार प्रकाशित किया गया है।
Thomas Riboulet के सभी लेख
