Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding
Code

अपने वर्क-फ्लो को सुधारना - अपने लॉजिक से अपने मार्क-अप को अलग करें!

by
Length:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

इस ट्यूटोरियल में मैं एक तकनीक की व्याख्या करने जा रहा हूं जो आपको अपनी सभी HTML आवश्यकताओं के लिए टेम्पलेट फ़ाइल का उपयोग करने की अनुमति देता है! अब आपको अपने फंक्शन्स के अंदर से स्ट्रिंग को 'echo' करने की आवश्यकता नहीं होगी, या कुछ मार्क-अप आउटपुट करने के लिए PHP में और बाहर जाने के बारे में चिंता करने की आवश्यकता नहीं होगी।

मैंने MVC फ्रेमवर्क (जैसे Zend और आजकल Laravel) का उपयोग करने में कई साल बिताए हैं, जहां यह आपके 'view' (परिणाम स्वरूप HTML मार्क-अप) से 'प्रोग्रामिंग लॉजिक' (फ़ंक्शंस या मेथड्स) को अलग करने का सबसे अच्छा अभ्यास है। यह हमेशा एक अधिक रखरखाव वाले कोड-आधार की ओर जाता है और यह वास्तव में लिखना बहुत आसान है। WordPress के लिए प्लगइन को डेवेलोप करते समय इस बैकग्राउंड को मुझे एक समान समाधान के साथ आने के लिए प्रेरित किया! यह बहुत ही फैंसी नहीं है - यह सिर्फ एक छोटा सा 'helper' है जो आपको सभी HTML स्निपेट को हटाने और अपने फंक्शन्स से अजीब 'escaping' की अनुमति देगा और उन्हें अपनी 'template' फ़ाइल में सुरक्षित रूप से दूर रखेगा।

तो, मुझे आशा है कि यह ट्यूटोरियल आपके लिए दिलचस्प होगा और आगे कुछ जोड़े बिना, चलो शुरू करें!


स्टेप 1 समझना कि हम क्या सुधार रहे हैं

चलो इस ट्यूटोरियल को ठीक से देखें कि हम क्या सुधारने जा रहे हैं।

प्लगइन के भीतर ऐसा कुछ देखना बहुत आम है: (यह स्निपेट वास्तव में इस साइट पर मेरे अपने ट्यूटोरियल में से एक में आता है :p)

इसके साथ गलत क्या है?

अच्छा कुछ नहीं, सच में। लेकिन यह क्लीनर, स्केल करने में आसान और अधिक रखरखाव योग्य हो सकता है!

ऊपर से नीचे तक चलते हुए, हम देख सकते हैं कि सभी एक ही फंक्शन में हैं:

  1. किसी निश्चित प्रकार की पोस्ट के लिए डेटाबेस क्वेरी करना
  2. एक वेरिएबल के लिए एक HTML स्ट्रिंग असाइन करना
  3. एक लूप को परफॉर्म करना और स्ट्रिंग के आगे मार्कअप को जोड़ना
  4. बिल्ट-अप स्ट्रिंग रीटर्न करना

अब आप इसे देखकर बहुत अच्छी तरह से सोच सकते हैं "बिग डील! यह HTML की केवल कुछ लाइन्स हैं, समस्या क्या है?" कुछ मामलों में आप इस तरह सोचने के अपने अधिकारों के भीतर अच्छी तरह से हैं। लेकिन याद रखें, इस समय कोड की केवल 17 लाइन्स हैं - जब आप प्लगइन को एक्सपैंड/इम्प्रूव करते हैं तो क्या होता है? क्या होता है जब आपकी प्लगइन कोड की 50/100/1000 लाइनों (या अधिक!) तक बढ़ जाती है। क्या आप अभी भी खुश होंगे कि विभिन्न स्थानों पर आपके फ़ंक्शन के आस-पास HTML स्ट्रिंग्स डॉट किए गए हैं? क्या होता है जब आप कुछ HTML को आउटपुट करना चाहते हैं जिसके लिए आपके PHP कोड में ठीक से काम करने के लिए कुछ अजीब 'escaping' की आवश्यकता होती है?

उम्मीद है कि आप देख सकते हैं कि HTML मार्कअप बनाने और आउटपुट करने के लिए यह दृष्टिकोण बहुत ही समस्याग्रस्त हो सकता है! उल्लेख करने की जरूरत नहीं है कि HTML को बनाए रखने और सुधारने में बहुत मुश्किल हो जाता है जब यह बस बिखरा हुआ हो।

तो, यह सब ध्यान में रखते हुए, मैंने WordPress में HTML आउटपुट के बारे में सोचने के तरीके को बदलने के लिए इसे अपने आप पर ले लिया है। सदैव।


स्टेप 2 View Renderer प्लगइन का निर्माण

ठीक है, चलिए इसके साथ क्रैकिंग करते हैं।

फ़ाइलें और फ़ोल्डर्स बनाएं

  1. View नामक एक नया प्लगइन फ़ोल्डर बनाएं
  2. उस फ़ोल्डर के अंदर, प्लगइन फ़ाइल view_renderer.php बनाएं
  3. अब View.php नामक एक फ़ाइल बनाएं - यह हमारी क्लास होगी

क्लास को शामिल करें

हमारा प्लगइन सरल है, इसमें केवल View क्लास शामिल है ताकि हम इसे किसी भी अन्य प्लगइन में उपयोग कर सकें।

ठीक है, अब हमने View क्लास को शामिल किया है, अब वास्तव में इसे बनाने का समय है।

View क्लास

यहां हमारे पास render नामक सिंगल static फ़ंक्शन के साथ View नामक एक क्लास है (यह हमें हमारे प्लगइन के भीतर कहीं से सिंटैक्स View::render( $template ) का उपयोग करने की अनुमति देगा) और इसमें दो पैरामीटर लगते हैं:

  1. $filePath - टेम्पलेट फ़ाइल का पाथ। यह न भूलें कि हम अपने टेम्पलेट्स को उस View फ़ोल्डर में रखने जा रहे हैं जिसे हमने पहले बनाया था
  2. $viewData - कोई भी वेरिएबल जो हम टेम्पलेट के भीतर पहुंच प्राप्त करना चाहते हैं (बाद में इस पर और अधिक जानेंगे)

नीचे दिए गए कोड को View.php में कॉपी करें:

तो यहाँ पर क्या चल रहा है?

  1. सबसे पहले हम जांच कर रहे हैं कि क्या $viewData वेरिएबल की वैल्यू है (यानी क्या हमने टेम्पलेट में उपयोग करने के लिए कुछ भी भेजा है?)। यदि ऐसा होता है, तो हम कंटेंट एक्सट्रेक्ट करते हैं (बाद में इस पर अधिक)

  2. फिर हम PHP के आउटपुट बफर का उपयोग कर रहे हैं। यह हमें एक PHP फ़ाइल को पार्स करने और कंटेंट को एक वेरिएबल में सेव करने की अनुमति देता है

  3. अंत में हम स्ट्रिंग रीटर्न कर देते हैं

नोट: अब एडमिन पैनल के भीतर से प्लगइन को एक्टिवेट करना न भूलें

बहुत सरल लगता है हुह? बिलकुल! लेकिन जब यह एक बहुत ही सरल काम होता है, तो यह वास्तव में हमें एक सुपर-संगठित, स्केलेबल, रखरखाव फैशन में हमारे प्लगइन लिखने में सक्षम होने की लक्ज़री प्रदान करता है। कृपया मुझे डेमोंस्ट्रेट करने की अनुमति दें...


स्टेप 3 एक असली दुनिया का उदाहरण

आइए Slider नामक एक साधारण प्लगइन बनाएं

** नोट: यह केवल प्रदर्शन के उद्देश्यों के लिए है। यहां अपनी खुद की प्लगइन का उपयोग करने के लिए स्वतंत्र महसूस करें।

  1. Slider नामक फ़ोल्डर बनाएं
  2. उस फ़ोल्डर में, Slider.php नामक एक फ़ाइल बनाएं
  3. नीचे कोड को Slider.php में कॉपी करें

एक शॉर्टकोड जोड़ें

ठीक है, अब हम एक शॉर्टकोड जोड़ने जा रहे हैं जो लेटेस्ट 5 पोस्ट लाएगा और उन्हें टाइटल और कंटेंट के साथ एक लिस्ट में प्रदर्शित करेगा। (ब्रेविटी के लिए, हम एक ही प्लगइन फ़ाइल में हमारी प्लगइन क्लास और हमारे एक्शन हुक को जोड़ देंगे, लेकिन कृपया इसे 'वास्तविक जीवन' में न करें :p )

इससे हमें किसी भी पोस्ट/पेज में [slider] का उपयोग करने की अनुमति मिल जाएगी और यह Slider::display() के परिणाम को आउटपुट करेगा

Slider क्लास और display() मेथड जोड़ें

लेटेस्ट 5 पोस्ट्स प्राप्त करें।

अब हमारे पास post ऑब्जेक्ट्स की एक श्रृंखला है और हम उनके माध्यम से लूप करके हमारे HTML का निर्माण करने के लिए तैयार हैं। लेकिन हम यहां हमारे फ़ंक्शन में HTML स्ट्रिंग्स डालना शुरू नहीं कर रहे हैं! इसके बजाए हम ऑब्जेक्ट्स के array को टेम्पलेट फ़ाइल में पास करने जा रहे हैं और सभी HTML को हानि वाले रास्ते से उत्पन्न किया गया है।

टेम्पलेट बनाएं

  1. template नामक फ़ोल्डर बनाएं
  2. उस फ़ोल्डर के अंदर, 01.template.php नामक एक फ़ाइल बनाएं

यह टेम्पलेट हमारे सभी मार्कअप को होल्ड करेगा और हमें उस डेटा तक पहुंचने की अनुमति देगा जिसे हम बाद में भेजते हैं।

टेम्पलेट में डेटा भेजना

हर बार जब हम अपने टेम्पलेट्स के भीतर किसी भी वेरिएबल का उपयोग करना चाहते हैं, तो हम उन्हें केवल $viewData array में वैल्यू सेट करके भेज सकते हैं। MVC फ्रेमवर्क का उपयोग करने के जानकार कोई भी इस दृष्टिकोण के साथ घर जैसा महसूस करेगा।

यहां array key (' posts ') महत्वपूर्ण है क्योंकि इस प्रकार हम टेम्पलेट के भीतर से डेटा का रिफरेन्स देंगे। (आप इसे जो कुछ भी पसंद करते हैं कॉल कर सकते हैं, लेकिन उसके साथ बने रहे जिसका कोई अर्थ हो।)

टेम्पलेट का निर्माण करना

ठीक है, तो हमने देखा है कि लेटेस्ट 5 पोस्ट कैसे प्राप्त करें और टेम्पलेट में ऑब्जेक्ट्स के उस array को कैसे भेजना है, अब यह टेम्पलेट फ़ाइल को निकालने का समय है।

आह! यह हमारे डेटा रिट्रीवल और प्रोग्रामिंग लॉजिक से दूर, अपनी अलग फ़ाइल में वह मार्कअप कितना अच्छा लगता है? बढ़िया, मुझे पता है! इस दृष्टिकोण का सबसे महत्वपूर्ण हिस्सा यह है कि हम टेम्पलेट के भीतर वेरिएबल से केवल 'accessing' डेटा हैं। टेम्पलेट को कॉल करने वाले मेथड के भीतर सभी 'logic' किया जाना चाहिए। यह एक बहुत अच्छा वर्कफ़्लो की ओर जाता है क्योंकि आपके पास seperation of concerns है।

बस कल्पना करें कि जब आप इस प्लगइन पर निर्माण करने के लिए तैयार हों तो यह कितना आसान होगा। फंक्शन्स के भीतर करैक्टर से बचने और भागने के लिए कोई और अधिक कॉन्कटेनटिंग (concatenating) नहीं है।

रेंडर टेम्पलेट रीटर्न करना

ठीक है, हमने सभी कॉम्पोनेन्ट पार्ट्स को देखा है, देखते हैं कि यह सब एक साथ कैसे फिट बैठता है ताकि हम टेम्पलेट प्रस्तुत कर सकें और स्ट्रिंग वापस प्राप्त कर सकें (ताकि हम अपने शॉर्टकोड पर वापस आ सकें):

  1. सबसे पहले हमें एक स्टेटिक प्रॉपर्टी में हमारे टेम्पलेट के रिफरेन्स को स्टोर करने की आवश्यकता है
  2. फिर हमें यह देखने की ज़रूरत है कि View क्लास मौजूद है
  3. फिर हम वर्तमान प्लगइन डायरेक्टरी के रिफरेन्स को पकड़कर और हमारी स्टेटिक प्रॉपर्टी $template को जोड़कर हमारी टेम्पलेट फ़ाइल का पूरा पाथ उत्पन्न करते हैं
  4. अंत में, हम अपनी View::render() मेथड को कॉल करते हैं और इसमें आवश्यक दो पैरामीटर पास करते हैं

इस मामले में, हम रेंडर टेम्पलेट का परिणाम रीटर्न कर देते हैं क्योंकि इस तरह शॉर्टकोड काम करते हैं। लेकिन यदि आपको इसके बजाय परिणाम echo करने की आवश्यकता थी (उदाहरण के लिए, जब आप कोई एडमिन पेज बनाते हैं, तो कॉलबैक आपके आउटपुट को सीधे प्रिंट करने की अपेक्षा करता है), फिर बस echo के साथ return को रिप्लेस करें।

पूरा display() मेथड

मुझे आशा है कि आप इस दृष्टिकोण के आर्गेनाइजेशन के स्तर की सराहना कर सकते हैं! अब आपका display फ़ंक्शन केवल उस डेटा को एकत्रित करने के लिए ज़िम्मेदार है जिसकी आवश्यकता है और प्रस्तुत टेम्पलेट के परिणाम को रीटर्न कर रहा है।


इसे आगे ले जाना

ऊपर हमारा उदाहरण उतना ही बेसिक है जितना यह प्राप्त होता है। फिर भी, यह अभी भी एक बेहद बेहतर वर्क फ्लो है। अब चलिए एक और उदाहरण देखें जो दिखाता है कि यह वास्तव में कितना उपयोगी हो सकता है।

कहें, उदाहरण के लिए, आपकी प्लगइन कस्टम मेटा बॉक्स का उपयोग करता है। ऐसा करने के लिए हमें यह करना होगा:

  1. Slider क्लास में एक कन्स्ट्रक्टर फ़ंक्शन जोड़ें
  2. प्रत्येक पोस्ट में मेटाबोक्स जोड़ने के लिए एक मेथड जोड़ें
  3. मेटा बॉक्स के लिए HTML रेंडर करने के लिए कॉलबैक मेथड जोड़ें
  4. पोस्ट्स को ऐड/एडिट करते समय केवल क्लास को तुरंत चालू करने के लिए प्लगइन फ़ाइल में उचित हुक जोड़ें
  5. अंत में, हम एक टेम्पलेट फ़ाइल जोड़ देंगे जैसा हमने पहले किया था, और इसे क्लास की शुरुआत में एक प्रॉपर्टी के रूप में जोड़ना है

वहाँ render_meta_box_content मेथड पर एक नज़र डालें। View रेंडरर का उपयोग करने का यह सही मौका है! इस तरह एक और रीयलिस्टिक उदाहरण की कल्पना करो:

ओ! निश्चित रूप से, यह काम पूरा कर देता है, लेकिन यह इस तरह से करना मुश्किल है! इसके बजाय क्यों न हम अपने View रेंडरर का उपयोग करें।

और टेम्पलेट फ़ाइल में:

यह केवल इस उदाहरण में बहुत ही कम फायदेमंद दिख सकता है। लेकिन मेरा विश्वास करो, अगर आप अपनी कंसर्नस को इस तरह अलग रखते हैं, तो आप बहुत बेहतर WordPress डेवलपर बन जाएंगे।


निष्कर्ष

मुझे लगता है कि अब तक आप शायद यह समझने की कोशिश कर रहे हैं कि हम यहां क्या हासिल करने की कोशिश कर रहे हैं और मैं आपको भविष्य में प्लगइन बनाने के दौरान इस तकनीक का उपयोग करने का प्रयास करने का आग्रह करता हूं। उम्मीद है कि लाभ प्राप्त करने के लिए 'separation of concerns' मिलेगा।

ट्यूटोरियल के नोट्स:

  • यद्यपि हमने View रेंडरर को स्वयं प्लगइन में बनाया है, लेकिन आप इसे आसानी से मौजूदा प्लगइन में जोड़ सकते हैं। प्लगइन एक्टिवेट होने से पहले इसे कहीं भी इस्तेमाल करने के लिए यह सुनिश्चित करने के अतिरिक्त स्टेप को हटा दिया जाएगा।
  • आप इस ट्यूटोरियल में बताए गए यूज़-केस तक सीमित नहीं हैं, जहां भी आप सामान्य रूप से HTML आउटपुट करेंगे (कैसा रहे अगर हम कुछ 'इनलाइन' जावास्क्रिप्ट को आउटपुट करने के लिए टेम्पलेट फ़ाइल का उपयोग करें या कुछ विशिष्ट CSS नियमों के आधार पर डेटाबेस से ऑप्शंस को रिट्रीव करें?)

मुझे यह जानने में दिलचस्पी होगी कि आपने इस तकनीक के लिए क्या उपयोग किया है, इसलिए कृपया कमैंट्स में साझा करें :)

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.