यह एक प्रायोजित लेख है और Wix द्वारा संभव बनाया गया है। वास्तविक सामग्री और राय पूरी तरह से लेखक के विचार हैं जो संपादकीय स्वतंत्रता बनाए रखते हैं, तब भी जब कोई पोस्ट प्रायोजित हो।
जब वेबसाइट बनाने की बात आती है, यदि आप एक डेवलपर हैं, तो आप DIY दृष्टिकोण का उपयोग कर सकते हैं और सब कुछ स्वयं कोड और होस्ट कर सकते हैं। यदि आप हम में से अधिकांश की तरह एक एंड-यूज़र/उपभोक्ता हैं, तो आप सुंदर वेबसाइटों को केवल माउस क्लिक के साथ बनाने के लिए वेब बिल्डर सॉफ्टवेयर का उपयोग कर सकते हैं।
Wix बाद की श्रेणी से संबंधित है, क्योंकि यह एक वेब बिल्डर है जो आपको केवल कुछ माउस क्लिक के साथ मुफ्त सुंदर वेबसाइटें बनाने की अनुमति देता है। लेकिन Wix Code की शुरूआत के साथ, इसने इसे स्वयं करने और वेब बिल्डर का उपयोग करने के बीच की रेखाओं को धुंधला कर दिया है। अब आप दोनों कर सकते हैं।
यदि आप एक वेब ऐप या डायनामिक वेबसाइट बना रहे हैं, तो आपको डेटाबेस, फॉर्म, और जावास्क्रिप्ट जैसे जटिल तकनीकी शब्दजाल का उपयोग करके एक इंटरैक्टिव वेबसाइट बनाना होगा। अधिकांश वेब बिल्डर ऐसे टूल प्रदान नहीं करते हैं, क्योंकि यह उनके ऐप में बहुत जटिलता जोड़ता है।
Wix Code जटिलता के बिना अपने मौजूदा वेब-बिल्डिंग टूल्स में ऐसी चीजें जोड़ता है। यह आपके डेटाबेस, फॉर्म बनाने और प्रबंधित करने के लिए कई टेम्पलेट प्रदान करता है और आपको अपनी साइट पर जावास्क्रिप्ट कोड जोड़ने की अनुमति भी देता है। सबसे अच्छी बात यह है कि आप डायनामिक पेज फीचर का उपयोग करके डेटाबेस से सामग्री को त्वरित रूप से पॉप्युलेट कर सकते हैं, जिससे यह वेबसाइट बिल्डर की तुलना में कंटेंट मैनेजमेंट सिस्टम की तरह अधिक लगता है।
नीचे दिए गए उदाहरण में हम एक साधारण मेक टेक ईज़ियर ब्लॉग बनाएंगे और Wix Code से डायनामिक फीचर जोड़ेंगे।
Wix के साथ एक नई साइट सेट अप करना
यह मानते हुए कि आप Wix में नए हैं, आप Wix के साथ एक खाते के लिए साइन अप करके शुरू कर सकते हैं। एक बार जब आप एक खाता बना लेते हैं, तो आपको अपनी वेबसाइट बनाने के लिए प्रेरित किया जाएगा।
अगला यह पूछेगा कि आप किस प्रकार की वेबसाइट बनाना चाहते हैं। चूंकि मैं मेक टेक ईज़ियर ब्लॉग को दोहरा रहा हूं, मैंने "ब्लॉग" विकल्प चुना।
अगली स्क्रीन पूछेगी कि आप अपनी वेबसाइट कैसे बनाना चाहते हैं।
Wix ADI आपके लिए स्वचालित रूप से एक साइट बनाने के लिए कृत्रिम बुद्धिमत्ता का उपयोग करता है। यदि आप मैन्युअल जाना पसंद करते हैं, तो Wix Editor विधि चुनें। (Wix Code तक पहुंचने के लिए आपको बाद वाले का उपयोग करना होगा। यदि आपने Wix ADI चुना है, तो आप बाद में एडिटर मोड पर स्विच कर सकते हैं।)
इस उदाहरण के लिए मैंने Wix Editor का उपयोग किया क्योंकि मैं साइट के रूप और अनुभव पर पूर्ण नियंत्रण चाहता था। वहां से आप एक टेम्पलेट के साथ शुरू कर सकते हैं। (उनमें से हजारों हैं।)
इसे सरल रखने के लिए, मैंने एक क्लासिक लेआउट के साथ एक खाली टेम्पलेट के साथ शुरू किया। निम्न छवि वही दिखाती है जो यह दिखता है।
Wix Code तक पहुंचना
Wix Code तक पहुंचने के लिए "टूल्स" पर जाएं और "डेवलपर टूल्स" विकल्प चेक करें।
अब आप एक नया "साइट स्ट्रक्चर" कॉलम देखेंगे। यह वह जगह है जहां आप सभी Wix Code सुविधाओं तक पहुंच सकते हैं।
पोस्ट स्टोर करने के लिए डेटाबेस बनाना
Wix Code की महान विशेषताओं में से एक डेटाबेस फ़ंक्शन है जो आपको डेटाबेस (उर्फ संग्रह) बनाने और उसमें डेटा स्टोर करने की अनुमति देता है। एक ब्लॉग के लिए हमें अपने सभी पोस्ट स्टोर करने के लिए एक डेटाबेस बनाने की आवश्यकता होगी। डेटाबेस सेक्शन में "नया संग्रह जोड़ें" पर क्लिक करें। अपने संग्रह को एक नाम दें और इसका उद्देश्य निर्दिष्ट करें। कई डेटाबेस प्रकार हैं जिन्हें आप चुन सकते हैं, जिनमें उपयोगकर्ता-जनित सामग्री, सदस्य प्रस्तुति, निजी डेटा, आदि शामिल हैं।
एक बार संग्रह बन जाने के बाद, आप इसमें फ़ील्ड और डेटा जोड़ना शुरू कर सकते हैं।
हमने जो बनाया है वह एक पोस्ट डेटाबेस है जिसमें शीर्षक, सामग्री, प्रकाशन तिथि और ब्लॉग पोस्ट के विभिन्न पहलू शामिल हैं। अगला, हमें डेटाबेस सामग्री को मुख्य साइट पर पॉप्युलेट करने की आवश्यकता है।
डायनामिक पेज
डायनामिक पेज एक टेम्पलेट पेज की तरह अधिक हैं जहां आप एक डिज़ाइन बना सकते हैं और इसे डेटाबेस से कनेक्ट कर सकते हैं, और यह आपके डेटाबेस में सभी आइटम को उनके अपने URL के तहत फ्रंट पेज पर स्वचालित रूप से पॉप्युलेट करेगा। उदाहरण के लिए, हमारे पास डेटाबेस में छह पोस्ट हैं। एक सिंगल डायनामिक पेज के साथ, हम इसे मुख्य साइट पर सभी पोस्ट प्रदर्शित करने के लिए प्राप्त कर सकते हैं। यह आपको प्रत्येक पोस्ट के लिए मैन्युअल रूप से एक सिंगल पेज बनाने के प्रयास से बचाता है। Wix Code में दो मुख्य प्रकार के डायनामिक पेज हैं - एक सिंगल आइटम प्रदर्शित करने के लिए, जबकि दूसरा श्रेणी (समान आइटम का संग्रह एक सूची में) के लिए है।
निम्नलिखित दिखाता है कि डायनामिक पेज कैसे बनाएं और उन्हें साइट से लिंक करें।
1. फ्लोटिंग टूलबार पर पहले आइकन पर क्लिक करें और "डायनामिक पेज" चुनें। "साइट में जोड़ें" बटन पर क्लिक करें।
2. पॉपअप से "आइटम पेज" चुनें।
3. URL में डेटाबेस में वह फ़ील्ड चुनें जिसे आप URL के लिए उपयोग करना चाहते हैं। इस मामले में मैंने URL के लिए "शीर्षक" सेट किया।
4. अगला, पेज डिज़ाइन करें और डेटाबेस से फ़ील्ड जोड़ें। आपके द्वारा पेज पर खींचे गए प्रत्येक एलिमेंट के साथ, आप इसे डेटाबेस से फ़ील्ड से लिंक करने के लिए "डेटा से कनेक्ट" बटन पर क्लिक कर सकते हैं। उदाहरण के लिए, मैंने पेज पर एक "हेडर 1" एलिमेंट खींचा और इसे पोस्ट डेटाबेस में "शीर्षक" फ़ील्ड से लिंक किया।
और मैंने फीचर्ड इमेज, पोस्ट सामग्री आदि के लिए भी ऐसा ही किया।
5. एक बार जब आप डिज़ाइन के साथ हो जाते हैं, तो आप इसका पूर्वावलोकन कर सकते हैं और देख सकते हैं कि यह फ्रंट एंड पर कैसा दिखता है।
6. अगला कदम डायनामिक पेज को होम पेज से लिंक करना है। होम पेज लोड करें और "सूची और ग्रिड" अनुभाग से एक रिपीटर विजेट जोड़ें। विजेट को पोस्ट डेटाबेस से कनेक्ट करें और विजेट में प्रत्येक एलिमेंट को डेटाबेस में फ़ील्ड से लिंक करें। "लिंक कनेक्ट्स टू" अनुभाग के तहत, नीचे स्क्रॉल करें और डायनामिक पेज अनुभाग में "पोस्ट" चुनें।
बस इतना ही।
आप देख सकते हैं कि हमने केवल एक डायनामिक पेज बनाया है, और यह डेटाबेस में प्रत्येक आइटम के लिए सभी पेज स्वचालित रूप से उत्पन्न करेगा। आप श्रेणी डायनामिक पेज जोड़ने के लिए भी वही काम कर सकते हैं।
पेज में जावास्क्रिप्ट जोड़ना
यदि आप एक समझदार जावास्क्रिप्ट कोडर हैं, तो आप प्रत्येक पेज पर प्रत्येक अतिरिक्त सुविधा में जावास्क्रिप्ट जोड़ सकते हैं। उदाहरण के लिए, यदि आपने अपने पेज पर एक उपयोगकर्ता फॉर्म जोड़ा है, तो आप सबमिशन से पहले फॉर्म फ़ील्ड को मान्य करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।
नोट: किसी पेज पर जावास्क्रिप्ट कोड जोड़ने के लिए, किसी भी पेज (या उस पेज पर जाएं जहां आप कोड दिखाना चाहते हैं), और कोड के नीचे "पेज कोड" बटन पर क्लिक करें। एक विंडो दिखाई देगी, और आप वहां अपना कोड जोड़ सकते हैं।
1. हमने एक साधारण फॉर्म बनाया है जो उपयोगकर्ता से पहला नाम, अंतिम नाम और ईमेल पता एकत्र करेगा। इस फॉर्म के लिए हम ईमेल पते को मान्य करना चाहते हैं और सुनिश्चित करना चाहते हैं कि "ईमेल पुष्टि करें" फ़ील्ड "ईमेल" फ़ील्ड के समान है।
2. "पेज कोड" अनुभाग में निम्नलिखित कोड जोड़ें:
$w.onReady(function () { const validateEmail = (otherEmailElementId) => (value, reject) => { let otherEmailElement = $w(otherEmailElementId); if (value === otherEmailElement.value) { otherEmailElement.validity.valid = true; otherEmailElement.resetValidityIndication(); return; } console.log("Email and Confirm Your Email fields do not match"); otherEmailElement.validity.valid = false; otherEmailElement.updateValidityIndication(); reject("Email and Confirm Email fields do not match"); }; $w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput")); $w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput")); $w('#dataset1').onBeforeSave(() => { let validationMessage = ''; if (!$w('#emailInput').valid) { if (!$w('#emailInput').value) validationMessage += 'Please enter an email address\n'; else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) { validationMessage += 'Email and Confirm Email fields do not match\n'; } $w('#validationMessages').text = validationMessage; $w('#validationMessages').expand(); } else $w('#validationMessages').collapse(); }); });
यह ईमेल पते को मान्य करेगा और यदि ईमेल अमान्य है तो त्रुटि संदेश दिखाएगा।
जावास्क्रिप्ट के साथ आप बहुत कुछ कर सकते हैं। अधिक जानकारी के लिए यहां उदाहरण देखें।
बाहरी APIs
यह एकमात्र कदम है जहां यह अधिक जटिल हो सकता है। Wix Code अब बाहरी API के साथ एकीकृत होता है, इसलिए आप अमेज़न, ड्रॉपबॉक्स, गूगल ड्राइव, ट्विटर, IFTTT, Zapier, आदि जैसी थर्ड-पार्टी सेवाओं से आसानी से कनेक्ट कर सकते हैं। मैं यहां विवरण में नहीं जाऊंगा, लेकिन यदि आप रुचि रखते हैं, तो आप उनके API दस्तावेज़ देख सकते हैं।
निष्कर्ष
यदि आप तकनीकी रूप से समझदार नहीं हैं या एक डेवलपर हैं, तो अपनी खुद की वेबसाइट बनाना एक थकाऊ काम हो सकता है। Wix ने वेबसाइट निर्माण को आसान बनाने का अच्छा काम किया है। Wix Code के साथ यह एक कदम आगे जाता है और आपको अपनी साइट पर बहुत नियंत्रण देता है। अब आपके पास जटिल वेब डेवलपर टूल्स तक पहुंच है और इस पर पूर्ण नियंत्रण है कि आपकी साइट कैसे काम करनी चाहिए, सभी सरल क्लिक, ड्रैग और ड्रॉप के साथ बिना किसी कोडिंग अनुभव की आवश्यकता के।
Wix को ऐसा उपयोग में आसान टूल बनाने के लिए बधाई जो कई समस्याओं का समाधान करेगा।
Wix Code को आज़माएं और हमें बताएं कि आप इसके बारे में क्या सोचते हैं।
Wix Code
