यह एक प्रायोजित लेख है और इसे Wix द्वारा संभव बनाया गया है। वास्तविक सामग्री और राय लेखक के एकमात्र विचार हैं जो एक पोस्ट प्रायोजित होने पर भी संपादकीय स्वतंत्रता बनाए रखते हैं।
जब वेबसाइट बनाने की बात आती है, यदि आप एक डेवलपर हैं, तो आप DIY दृष्टिकोण और कोड का उपयोग कर सकते हैं और सब कुछ स्वयं होस्ट कर सकते हैं। यदि आप हम में से अधिकांश लोगों की तरह एक अंतिम-उपयोगकर्ता/उपभोक्ता हैं, तो आप केवल क्लिक के साथ सुंदर वेबसाइट बनाने के लिए वेब बिल्डर सॉफ़्टवेयर का उपयोग कर सकते हैं।
Wix बाद वाले से संबंधित है, क्योंकि यह एक वेब बिल्डर है जो आपको कुछ ही माउस क्लिक के साथ मुफ्त सुंदर वेबसाइट बनाने की अनुमति देता है। लेकिन Wix कोड की शुरुआत के साथ, इसने इसे स्वयं करने और वेब बिल्डर का उपयोग करने के बीच की रेखाओं को धुंधला कर दिया है। अब आप दोनों कर सकते हैं।
यदि आप एक वेब ऐप या डायनेमिक वेबसाइट बना रहे हैं, तो आपको एक इंटरैक्टिव वेबसाइट बनाने के लिए जटिल तकनीकी शब्दजाल जैसे डेटाबेस, फॉर्म और जावास्क्रिप्ट का उपयोग करना होगा। अधिकांश वेब निर्माता ऐसे उपकरण प्रदान नहीं करते हैं, क्योंकि यह उनके ऐप में बहुत सारी जटिलताएँ जोड़ता है।
Wix Code ऐसी चीजों को अपने मौजूदा वेब-बिल्डिंग टूल में बिना किसी जटिलता के जोड़ता है। यह आपको अपने डेटाबेस, फॉर्म बनाने और प्रबंधित करने के लिए कई टेम्पलेट प्रदान करता है और आपको अपनी साइट पर जावास्क्रिप्ट कोड जोड़ने की भी अनुमति देता है। सबसे अच्छी बात यह है कि आप डेटाबेस से सामग्री को जल्दी से भरने के लिए डायनामिक पेज फीचर का उपयोग कर सकते हैं, जिससे यह वेबसाइट बिल्डर के बजाय कंटेंट मैनेजमेंट सिस्टम की तरह बन जाता है।
नीचे दिए गए उदाहरण में हम एक सरल मेक टेक ईज़ीयर ब्लॉग बनाएंगे और इसमें Wix कोड से गतिशील सुविधाएँ जोड़ेंगे।
Wix के साथ एक नई साइट की स्थापना
यह मानते हुए कि आप Wix में नए हैं, आप Wix के साथ एक खाते के लिए साइन अप करके शुरुआत कर सकते हैं। एक बार जब आप एक खाता बना लेते हैं, तो आपको अपनी वेबसाइट बनाने के लिए प्रेरित किया जाएगा।
इसके बाद यह आपसे उस प्रकार की वेबसाइट चुनने के लिए कहेगा जिसे आप बनाना चाहते हैं। चूंकि मैं मेक टेक ईज़ीयर ब्लॉग की नकल कर रहा हूं, इसलिए मैंने "ब्लॉग" विकल्प चुना है।
अगली स्क्रीन पूछेगी कि आप अपनी वेबसाइट कैसे बनाना चाहते हैं।
Wix ADI आपके लिए स्वचालित रूप से साइट बनाने के लिए कृत्रिम बुद्धिमत्ता का उपयोग करता है। यदि आप मैनुअल जाना पसंद करते हैं, तो Wix संपादक विधि चुनें। (Wix कोड का उपयोग करने के लिए आपको बाद वाले का उपयोग करना होगा। यदि आपने Wix ADI को चुना है, तो आप बाद में भी संपादक मोड पर स्विच कर सकते हैं।)
इस उदाहरण के लिए मैंने Wix संपादक का उपयोग किया क्योंकि मैं साइट के रंगरूप पर पूर्ण नियंत्रण रखना चाहता था। वहां से आप एक टेम्प्लेट के साथ शुरुआत कर सकते हैं। (उनमें से हजारों हैं।)
इसे सरल रखने के लिए, मैंने क्लासिक लेआउट के साथ एक खाली टेम्पलेट के साथ शुरुआत की। नीचे दी गई छवि वैसी है जैसी दिखती है।
Wix कोड एक्सेस करना
Wix कोड एक्सेस करने के लिए "टूल्स" पर जाएं और "डेवलपर टूल्स" विकल्प को चेक करें।
अब आपको एक नया “साइट संरचना” कॉलम दिखाई देगा। यह वह जगह है जहां आप सभी Wix कोड सुविधाओं तक पहुंच सकते हैं।
पोस्ट स्टोर करने के लिए डेटाबेस बनाना
Wix कोड की महान विशेषताओं में से एक डेटाबेस फ़ंक्शन है जो आपको डेटाबेस (उर्फ संग्रह) बनाने और उसमें डेटा संग्रहीत करने की अनुमति देता है। एक ब्लॉग के लिए हमें अपने सभी पोस्ट को स्टोर करने के लिए एक डेटाबेस बनाना होगा। डेटाबेस अनुभाग में "नया संग्रह जोड़ें" पर क्लिक करें। अपने संग्रह को एक नाम दें और उसका उद्देश्य निर्दिष्ट करें। ऐसे कई डेटाबेस प्रकार हैं जिनमें से आप चुन सकते हैं, उपयोगकर्ता द्वारा तैयार की गई सामग्री, सदस्य सबमिशन, निजी डेटा, आदि से लेकर।
एक बार संग्रह बन जाने के बाद, आप इसमें फ़ील्ड और डेटा जोड़ना शुरू कर सकते हैं।
हमने जो बनाया है वह एक पोस्ट डेटाबेस है जिसमें शीर्षक, सामग्री, प्रकाशित तिथि और ब्लॉग पोस्ट के विभिन्न पहलू शामिल हैं। इसके बाद, हमें डेटाबेस सामग्री को मुख्य साइट पर पॉप्युलेट करने की आवश्यकता है।
डायनामिक पेज
डायनेमिक पेज एक टेम्प्लेट पेज की तरह होते हैं जहां आप एक डिज़ाइन बना सकते हैं और इसे डेटाबेस से जोड़ सकते हैं, और यह आपके डेटाबेस में सभी आइटम्स को अपने यूआरएल के तहत फ्रंट पेज पर ऑटो-पॉप्युलेट करेगा। उदाहरण के लिए, हमारे पास डेटाबेस में छह पोस्ट हैं। एक एकल गतिशील पृष्ठ के साथ, हम इसे मुख्य साइट में सभी पोस्ट प्रदर्शित करने के लिए प्राप्त कर सकते हैं। यह आपको प्रत्येक पोस्ट के लिए मैन्युअल रूप से एक पेज बनाने के प्रयास को बचाता है। Wix कोड में दो मुख्य प्रकार के गतिशील पृष्ठ हैं - एक एकल आइटम प्रदर्शित करने के लिए है, जबकि दूसरा श्रेणी (एक सूची में समान आइटम का संग्रह) के लिए है।
निम्नलिखित दिखाता है कि डायनामिक पेज कैसे बनाएं और उन्हें साइट से कैसे लिंक करें।
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();
});
}); यह ईमेल पते को मान्य करेगा और ईमेल अमान्य होने पर त्रुटि संदेश दिखाएगा।
जावास्क्रिप्ट के साथ आप बहुत कुछ कर सकते हैं। अधिक जानकारी के लिए यहां उदाहरण देखें।
बाहरी API
यह एकमात्र कदम है जहां यह और अधिक जटिल हो सकता है। Wix कोड अब बाहरी API के साथ एकीकृत हो गया है, जिससे आप Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier, आदि जैसी तृतीय-पक्ष सेवाओं से आसानी से जुड़ सकते हैं। मैं यहां विवरण में नहीं जाऊंगा, लेकिन यदि आप रुचि रखते हैं, तो आप उनके API दस्तावेज़ देख सकते हैं।
निष्कर्ष
यदि आप तकनीकी रूप से जानकार या डेवलपर नहीं हैं, तो अपनी खुद की वेबसाइट बनाना एक कठिन काम हो सकता है। वेबसाइट निर्माण को आसान बनाने के लिए Wix ने अच्छा काम किया है। Wix कोड के साथ यह एक पायदान और आगे जाता है और आपको अपनी साइट पर काफी नियंत्रण देता है। अब आपके पास जटिल वेब डेवलपर टूल तक पहुंच है और आपकी साइट को कैसे काम करना चाहिए, इसका पूरा नियंत्रण, बिना किसी कोडिंग अनुभव के एक साधारण क्लिक, ड्रैग एंड ड्रॉप के साथ किया जाता है।
उपयोग में आसान टूल बनाने के लिए Wix की सराहना करें जो कई समस्याओं का समाधान करेगा।
Wix कोड आज़माएं और हमें बताएं कि आप इसके बारे में क्या सोचते हैं।
Wix कोड