এটি একটি স্পন্সরড আর্টিকেল এবং Wix দ্বারা সম্ভব হয়েছে। প্রকৃত বিষয়বস্তু এবং মতামত লেখকের একমাত্র দৃষ্টিভঙ্গি, যা সম্পাদকীয় স্বাধীনতা বজায় রাখেন, এমনকি যখন একটি পোস্ট স্পন্সরড।
ওয়েবসাইট তৈরি করার কথা হলে, আপনি যদি একজন ডেভেলপার হন, তবে আপনি DIY অ্যাপ্রোচ নিতে পারেন এবং সব কিছু নিজে কোড ও হোস্ট করতে পারেন। আপনি যদি একজন এন্ড-ইউজার/কনসিউমার হন অধিকাংশ মানুষের মতো, তবে আপনি একটি ওয়েব বিল্ডার সফ্টওয়্যার ব্যবহার করে মাত্র মাউস ক্লিক দিয়ে সুন্দর ওয়েবসাইট তৈরি করতে পারেন।
Wix দ্বিতীয় ক্যাটেগরিতে পড়ে, কারণ এটি একটি ওয়েব বিল্ডার যা আপনাকে মাত্র কয়েক মাউস ক্লিক দিয়ে ফ্রি সুন্দর ওয়েবসাইট তৈরি করতে দেয়। কিন্তু Wix Code-এর পরিচিতির সাথে, এটি DIY এবং ওয়েব বিল্ডার ব্যবহার করার মধ্যে পার্থক্য ম্লান করে দিয়েছে। এখন আপনি দুটোই করতে পারেন।
আপনি যদি একটি ওয়েব অ্যাপ বা ডাইনামিক ওয়েবসাইট বানান, তবে আপনাকে ডেটাবেস, ফর্ম, এবং জাভাস্ক্রিপ্টের মতো জটিল টেক জার্গন ব্যবহার করতে হবে একটি ইন্টারঅ্যাক্টিভ ওয়েবসাইট বানাতে। অধিকাংশ ওয়েব বিল্ডার takie টুলস প্রদান করে না, কারণ এটা তাদের অ্যাপে অনেক জটিলতা যোগ করে।
Wix Code তাদের বিদ্যমান ওয়েব-বিল্ডিং টুলসের সাথে এমন জিনিসগুলো যোগ করে জটিলতা ছাড়া। এটি ডেটাবেস, ফর্ম তৈরি ও ম্যানেজ করার জন্য বেশ কিছু টেমপ্লেট অফার করে এবং আপনার সাইটে জাভাস্ক্রিপ্ট কোড যোগ করার অনুমতি দেয়। সবচেয়ে ভালো কথা হলো, আপনি ডাইনামিক পেজ ফিচার ব্যবহার করে ডেটাবেস থেকে কন্টেন্ট দ্রুত পপুলেট করতে পারেন, যা এটিকে একটি ওয়েবসাইট বিল্ডারের চেয়ে বেশি একটি কন্টেন্ট ম্যানেজমেন্ট সিস্টেমের মতো করে তোলে।
নিচের উদাহরণে আমরা একটি সিম্পল Make Tech Easier ব্লগ তৈরি করব এবং Wix Code-র ডাইনামিক ফিচারগুলো যোগ করব।
Wix-এ নতুন সাইট সেটআপ করা
আপনি যদি Wix-এ নতুন হন, আপনি Wix-এ একাউন্ট সাইন আপ করে শুরু করতে পারেন। একবার একাউন্ট তৈরি হলে, আপনাকে আপনার ওয়েবসাইট তৈরি করার জন্য প্রম্পট করা হবে।
এরপর আপনাকে আপনি কী ধরনের ওয়েবসাইট তৈরি করতে চান সেটি সিলেক্ট করতে বলা হবে। যেহেতু আমি Make Tech Easier ব্লগ রিপ্লিকেট করছি, আমি "Blog" অপশন সিলেক্ট করেছিলাম।
পরবর্তী স্ক্রিনে আপনাকে জিজ্ঞাসা করা হবে আপনি কীভাবে আপনার ওয়েবসাইট তৈরি করতে চান।
Wix ADI আর্টিফিশিয়াল ইন্টেলিজেন্স ব্যবহার করে আপনার জন্য অটোমেটিক্যালি একটি সাইট তৈরি করে। আপনি যদি ম্যানুয়াল পছন্দ করেন, Wix Editor মেথড সিলেক্ট করুন। (Wix Code অ্যাক্সেস করতে আপনাকে দ্বিতীয়টিই ব্যবহার করতে হবে। আপনি যদি Wix ADI বেছে নিয়েছেন, তবে আপনি পরে এডিটর মোডে স্যুইচ করতে পারেন।)
এই উদাহরণের জন্য আমি Wix Editor ব্যবহার করেছি কারণ আমি সাইটের লুক অ্যান্ড ফীলের ওপর পূর্ণ নিয়ন্ত্রণ চেয়েছিলাম। সেখান থেকে আপনি একটি টেমপ্লেট দিয়ে শুরু করতে পারেন। (হাজার হাজার টেমপ্লেট রয়েছে।)
সহজ রাখতে, আমি একটি ব্ল্যাঙ্ক টেমপ্লেট ক্লাসিক লেআউটসহ শুরু করেছি। নিচের ছবিটি সেটি কেমন দেখাবে সেটি দেখাচ্ছে।
Wix Code অ্যাক্সেস করা
Wix Code অ্যাক্সেস করতে "Tools"-এ যান এবং "Developer Tools" অপশন চেক করুন।
আপনি এখন একটি নতুন "Site Structure" কলাম দেখবেন। এটিই সেখানে আপনি সকল Wix Code ফিচার অ্যাক্সেস করতে পারেন।
পোস্ট সংরক্ষণের জন্য ডেটাবেস তৈরি করা
Wix Code-র চমৎকার ফিচারগুলোর একটি হলো ডেটাবেস ফাংশন যা আপনাকে ডেটাবেস তৈরি করতে দেয় (একেও Collection বলা হয়) এবং সেখানে ডেটা সংরক্ষণ করতে দেয়। একটি ব্লগের জন্য আমাদের একটি ডেটাবেস তৈরি করতে হবে আমাদের সকল পোস্ট সংরক্ষণ করার জন্য। Database সেকশনে "Add new collection"-এ ক্লিক করুন। আপনার কলেকশনকে একটি নাম দিন এবং এর উদ্দেশ্য স্পেসিফাই করুন। আপনি যেসব ডেটাবেস টাইপ থেকে বেছে নিতে পারেন সেগুলো রেঞ্জ করে ইউজার জেনারেটেড কন্টেন্ট, মেম্বার সাবমিশন, প্রাইভেট ডেটা, ইত্যাদি।
কলেকশন তৈরি হলে, আপনি সেখানে ফিল্ড এবং ডেটা যোগ করা শুরু করতে পারেন।
আমরা যা তৈরি করেছি সেটি হলো একটি Posts ডেটাবেস যেটিতে টাইটেল, কন্টেন্ট, পাবলিশড ডেট এবং একটি ব্লগ পোস্টের বিভিন্ন দিক রয়েছে। এরপর, আমাদের ডেটাবেস কন্টেন্টকে মেইন সাইটে পপুলেট করতে হবে।
ডাইনামিক পেজ
ডাইনামিক পেজগুলো একরকম টেমপ্লেট পেজ যেখানে আপনি একটি ডিজাইন তৈরি করতে পারেন এবং সেটিকে ডেটাবেসের সাথে কানেক্ট করতে পারেন, এবং এটি আপনার ডেটাবেসের সকল আইটেমকে তাদের নিজস্ব URL-সহ ফ্রন্ট পেজে অটোমেটিক্যালি পপুলেট করবে। উদাহরণস্বরূপ, ডেটাবেসে আমাদের ছয়টি পোস্ট রয়েছে। একটি একক ডাইনামিক পেজ দিয়ে, আমরা সেটিকে মেইন সাইটে সকল পোস্ট ডিসপ্লে করতে পারি। এটি আপনাকে প্রতিটি পোস্টের জন্য আলাদা পেজ ম্যানুয়ালি তৈরি করার ঝামেলা থেকে বাঁচায়। Wix Code-এ ডাইনামিক পেজের দুটি প্রধান ধরন রয়েছে - একটি হলো সিঙ্গেল আইটেম ডিসপ্লে করার জন্য, আরেকটি হলো ক্যাটেগরি (একই টাইপের আইটেমের একটি লিস্ট) এর জন্য।
নিচে দেখানো হলো কীভাবে ডাইনামিক পেজ তৈরি করবেন এবং সাইটের সাথে লিংক করবেন।
১. ফ্লোটিং টুলবারে প্রথম আইকনে ক্লিক করুন এবং "Dynamic Pages" সিলেক্ট করুন। "Add to site" বাটনে ক্লিক করুন।
২. পপ-আপ থেকে "Item Page" সিলেক্ট করুন।
৩. URL-এ ডেটাবেসের যে ফিল্ডটি আপনি URL-এর জন্য ব্যবহার করতে চান সেটি সিলেক্ট করুন। এই কেসে আমি "title"-কে URL হিসেবে সেট করেছি।
৪. এরপর, পেজ ডিজাইন করুন এবং ডেটাবেস থেকে ফিল্ডগুলো যোগ করুন। আপনি পেজে যেসব এলিমেন্ট ড্র্যাগ করবেন, সেগুলোর সাথে "Connect to Data" বাটনে ক্লিক করুন ডেটাবেসের ফিল্ডের সাথে লিংক করার জন্য। উদাহরণস্বরূপ, আমি একটি "Header 1" এলিমেন্ট পেজে ড্র্যাগ করেছি এবং সেটিকে Posts ডেটাবেসের "Title" ফিল্ডের সাথে লিংক করেছি।
এবং আমি ফিচার্ড ইমেজ, পোস্ট কন্টেন্ট, ইত্যাদির জন্য একই কাজ করেছি।
৫. ডিজাইন সম্পূর্ণ হলে, আপনি প্রিভিউ করতে পারেন এবং দেখতে পারেন ফ্রন্ট এন্ডে কেমন দেখছে।
৬. পরবর্তী ধাপ হলো ডাইনামিক পেজকে হোম পেজ থেকে লিংক করা। হোম পেজ লোড করুন এবং "Lists and Grids" সেকশন থেকে একটি Repeater উইজেট যোগ করুন। উইজেটকে Posts ডেটাবেসের সাথে কানেক্ট করুন এবং উইজেটের প্রতিটি এলিমেন্টকে ডেটাবেসের ফিল্ডের সাথে লিংক করুন। "Link connects to" সেকশনের নিচে, স্ক্রোল ডাউন করুন এবং Dynamic Pages সেকশনে "Posts" সিলেক্ট করুন।
এটাই সব।
আপনি দেখছেন যে আমরা শুধু একটি ডাইনামিক পেজ তৈরি করেছি, এবং এটি অটোমেটিক্যালি ডেটাবেসের প্রতিটি আইটেমের জন্য সকল পেজ জেনারেট করবে। আপনি একই জিনিস ক্যাটেগরি ডাইনামিক পেজ যোগ করার জন্যও করতে পারেন।
পেজে জাভাস্ক্রিপ্ট যোগ করা
আপনি যদি একজন দক্ষ জাভাস্ক্রিপ্ট কোডার হন, তবে আপনি প্রতিটি পেজে প্রতিটি অতিরিক্ত ফিচারের সাথে জাভাস্ক্রিপ্ট যোগ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি আপনার পেজে একটি ইউজার ফর্ম যোগ করে থাকেন, তবে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে সাবমিশনের আগে ফর্ম ফিল্ড ভ্যালিডেট করতে পারেন।
নোট: একটি পেজে জাভাস্ক্রিপ্ট কোড যোগ করতে, যেকোনো পেজে যান (বা যে পেজে আপনি কোড চান সেটিতে), এবং কোডের নিচে "Page Code" বাটনে ক্লিক করুন। একটি উইন্ডো আসবে, এবং আপনি সেখানে আপনার কোড যোগ করতে পারেন।
১. আমরা একটি সিম্পল ফর্ম তৈরি করেছি যা ইউজার থেকে First Name, Last Name এবং Email অ্যাড্রেস কালেক্ট করবে। এই ফর্মের জন্য আমরা ইমেইল অ্যাড্রেস ভ্যালিডেট করতে চাই এবং নিশ্চিত করতে চাই "Confirm email" ফিল্ডটি "Email" ফিল্ডের সাথে একই।
২. নিচের কোডটি "Page Code" সেকশনে যোগ করুন:
$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 Code এখন এক্সটার্নাল API-এর সাথে ইন্টিগ্রেট করে, তাই আপনি সহজে থার্ড-পার্টি সার্ভিসের সাথে কানেক্ট করতে পারেন যেমন Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier, ইত্যাদি। আমি এখানে ডিটেইলসে যাবো না, কিন্তু আপনি যদি আগ্রহী হন, তবে তাদের API ডকুমেন্টেশন চেক আউট করতে পারেন।
উপসংহার
আপনি যদি টেকনিক্যালি স্যাভি বা ডেভেলপার নন হন, তবে নিজের ওয়েবসাইট বানানো একটি ক্লান্তিকর কাজ হতে পারে। Wix ওয়েবসাইট তৈরি করার কাজকে ব্রিজে রেখেছে ভালোভাবে। Wix Code-র সাথে এটি এক ধাপ آگে যাচ্ছে এবং আপনাকে আপনার সাইটের ওপর প্রচুর কন্ট্রোল দিচ্ছে। এখন আপনার কাছে জটিল ওয়েব ডেভেলপার টুলস এবং আপনার সাইট কীভাবে কাজ করব সেটির পূর্ণ নিয়ন্ত্রণ রয়েছে, সব কিছু সিম্পল ক্লিক, ড্র্যাগ অ্যান্ড ড্রপ দিয়ে কোনো কোডিং অভিজ্ঞতা ছাড়া।
Wix কে ধন্যবাদ এমন একটি সহজ-ব্যবহার টুল তৈরি করার জন্য যা অনেক সমস্যা সমাধান করবে।
Wix Code ট্রাই করুন এবং আপনার মতামত আমাদের জানান।
Wix Code
