ওয়েব-অ্যাপ্লিকেশানগুলিতে প্যারামিটার সহ নেভিগেশন কীভাবে সম্পাদন করবেন

কোনো ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরি করা নেভিগেশন ছাড়া প্রায় অসম্ভব। ব্যবহারকারীদের অবশ্যই পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে হবে, বিভিন্ন সাইটের বিভাগ খুলতে হবে এবং বিভিন্ন তথ্য গ্রহণ করতে হবে।

পৃষ্ঠা ডেটা

কিন্তু নেভিগেশন নিজেই দেখার আগে, সাধারণভাবে একটি পৃষ্ঠা সম্পর্কে আপনি কী তথ্য পেতে পারেন এবং একটি URL-এ কী থাকতে পারে তা বোঝার মূল্য রয়েছে৷ এটি করার জন্য, আপনি Get Current Page ব্লক ব্যবহার করতে পারেন এবং এটি কী ডেটা তৈরি করে তা দেখতে পারেন।

• URL - তার স্বাভাবিক আকারে পৃষ্ঠার ঠিকানা। যেমন- https://vdjyien-app.apms.io/admin/someurl/
• Page - পৃষ্ঠার অভ্যন্তরীণ শনাক্তকারী, যা AppMaster ব্যবসায়িক প্রক্রিয়াগুলিতে ব্যবহৃত হয়। এটি 22টি অক্ষর, অক্ষরের একটি এলোমেলো সেট এবং সংখ্যা নিয়ে গঠিত।
• Title - পৃষ্ঠার শিরোনাম। মানুষের পাঠযোগ্য আকারে এর নাম।
• URL Params । একটি পৃষ্ঠা তৈরি করা যেতে পারে যাতে এর ঠিকানা কঠোরভাবে স্থির করা হয় না তবে পরিবর্তনশীল মানও অন্তর্ভুক্ত থাকে। উদাহরণস্বরূপ, একটি পৃষ্ঠা একটি নির্দিষ্ট বিভাগে নিবন্ধগুলির একটি তালিকা প্রদর্শন করতে পারে এবং এই বিভাগের শনাক্তকারীকে শুধুমাত্র একটি প্যারামিটার হিসাবে URL-এ নির্দেশিত করা হয়।
• Query Params . অতিরিক্ত ক্যোয়ারী প্যারামিটার URL-এর শেষে “?” এর পরে লেখা হয় চিহ্ন. উদাহরণস্বরূপ, নিবন্ধগুলির একটি তালিকা সহ একটি পৃষ্ঠার জন্য, প্যারামিটার "?_limit=12&lang=en" নির্দেশ করতে পারে যে ইংরেজিতে শুধুমাত্র 12টি নিবন্ধ প্রয়োজন৷

উদাহরণস্বরূপ, একটি পৃষ্ঠা কল্পনা করুন যা ব্লগ নিবন্ধগুলির একটি তালিকা প্রদর্শন করে৷ এর URL "/blog/:theme/:author" হিসেবে দেওয়া হয়েছে। প্রতীক ":" নির্দেশ করে যে মানটি একটি পরামিতির পরে নির্দিষ্ট করা হয়েছে৷ পরামিতি হিসাবে, এটি নিবন্ধের বিষয় (থিম) এবং এর লেখক (লেখক) সনাক্তকারী লাগে।

এই পৃষ্ঠায় নেভিগেট করতে, আপনাকে ব্যবসায়িক প্রক্রিয়ায় Navigate ব্লক ব্যবহার করতে হবে।

প্যারামিটারগুলি সেইগুলির সাথে মিলে যায় যেগুলি আগে Get Current Page ব্লকে পার্স করা হয়েছিল৷ এই ক্ষেত্রে, পৃষ্ঠাটির প্রকৃত শিরোনাম নেভিগেশনের জন্য কোন ব্যাপার নয় যেহেতু পৃষ্ঠাটি নিজেই একটি অভ্যন্তরীণ শনাক্তকারী হিসাবে নির্দিষ্ট করা হয়েছে (আপনি পৃষ্ঠাগুলির তালিকা থেকে এটি নির্বাচন করতে পারেন)৷

যদি পৃষ্ঠার কোনো পরামিতি না থাকে, তাহলে নেভিগেশন অত্যন্ত সহজ হতে পারে; শুধুমাত্র প্রদত্ত তালিকা থেকে পছন্দসই পৃষ্ঠা নির্বাচন করুন. কিন্তু এই উদাহরণে, এমন কিছু পরামিতি রয়েছে যা অবশ্যই Navigate ব্লকে পাস করতে হবে।

নেভিগেশন জন্য একটি উৎস পৃষ্ঠা তৈরি করা

একটি নির্দিষ্ট উদাহরণে পরামিতি ব্যবহার বিবেচনা করুন। এটি করার জন্য, আমরা একটি পৃথক পৃষ্ঠা তৈরি করব যেখান থেকে ভবিষ্যতে আমাদের লক্ষ্য পৃষ্ঠায় যেতে হবে। আসুন এই পৃষ্ঠায় দুটি Select উপাদান যুক্ত করি (একটি বিষয়ের তালিকা থেকে নির্বাচন করার জন্য, দ্বিতীয়টি লেখকদের তালিকার জন্য) এবং সেগুলিকে পরীক্ষামূলক মান দিয়ে পূরণ করুন।

এর পরে, ল্যান্ডিং পৃষ্ঠায় কোন নেভিগেশন কাজ করবে সেটিতে ক্লিক করে আপনাকে Navigate বোতামের জন্য একটি ওয়ার্কফ্লো সেট আপ করতে হবে। এই প্রক্রিয়াটি Select ব্লকগুলি থেকে নির্বাচিত মানগুলি পাওয়ার মাধ্যমে শুরু হয়।

পরবর্তী ধাপ হল Key-Value ভার্চুয়াল মডেলগুলি পূরণ করা। তাদের অ্যারে Navigate ব্লকে প্রয়োজনীয় প্যারামিটার পাস করতে ব্যবহৃত হয়। মডেলটি নিজেই একটি কী ( Key ) নিয়ে গঠিত, যা প্যারামিটারের নাম (এই উদাহরণে, থিম এবং লেখক), পাশাপাশি এর মান ( Value , নির্বাচিত বিষয়ের সরাসরি নাম, বা লেখক).

দয়া করে মনে রাখবেন যে স্পেস অক্ষর সহ অনেকগুলি অক্ষর URL-এ ব্যবহার করা যাবে না৷ অতএব, URL-এ “ Frank Paulsen ” লেখা একটি নাম স্বয়ংক্রিয়ভাবে “ Frank%20Paulsen ”-এ রূপান্তরিত হবে। URL Encode এবং URL Decode ব্লক ইউআরএল স্ট্যান্ডার্ডে এনকোড এবং ডিকোড করতে ব্যবহার করা যেতে পারে। এই উদাহরণে, ইউআরএলের আরও স্পষ্টতা এবং সৌন্দর্যের জন্য, আমরা Replace string ব্লক ব্যবহার করি এবং স্বাধীনভাবে স্পেসটিকে "-" চিহ্ন দিয়ে প্রতিস্থাপন করি, নামটিকে " Frank-Paulsen " হিসাবে উপস্থাপন করি।

চূড়ান্ত ধাপ হল Navigate ব্লকে প্যারামিটার হিসাবে পাস করার জন্য জেনারেট করা কী-মানের জোড়াগুলিকে একটি একক অ্যারেতে মার্জ করা।

এখন, যখন আপনি বোতামে ক্লিক করবেন, আপনি https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/ পৃষ্ঠায় যাবেন

আপনি যাচাই করতে পারেন যে এটির URL একটি ধ্রুবক অংশ (https://vdjyien-app.apms.io/admin/blog/) এবং একটি পরিবর্তনশীল (No-code/Frank-Paulsen/) উভয়ই নিয়ে গঠিত যা এই তারিখে নির্বাচিত মানগুলি থেকে গঠিত হয়েছিল আগের পৃষ্ঠা।

বিষয়বস্তু পরিচালনা করতে URL প্যারামিটার ব্যবহার করে

পরবর্তী কাজ হল পৃষ্ঠার বিষয়বস্তু পরিবর্তন করতে প্রাপ্ত URL প্যারামিটার ব্যবহার করা। এই পরামিতিগুলি ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, ডাটাবেসে একটি GET অনুরোধ তৈরি করতে, কিন্তু আমাদের উদাহরণে, আমরা কেবল পৃষ্ঠায় তাদের মান প্রদর্শন করব। এটি করার জন্য, আসুন সংশ্লিষ্ট Label সহ পৃষ্ঠায় দুটি পাত্র যোগ করি।

আসুন Label একটিতে onShow ট্রিগারের উপর ভিত্তি করে একটি ব্যবসায়িক প্রক্রিয়া সেট আপ করি। এর কাজ হবে ইউআরএল পার্স করা, এর প্যারামিটার পাওয়া এবং পৃষ্ঠায় প্রদর্শন করা। এটি করার জন্য, আমরা Get Current Page ব্লক ব্যবহার করি এবং একটি লুপে প্রতিটি প্যারামিটারের মান পাই।

এরপরে, Switch ব্লকের মাধ্যমে, আমরা প্যারামিটারের মান পাই এবং এটি সংশ্লিষ্ট Label প্রদর্শন করি। একই সময়ে, Author প্যারামিটারের জন্য, আমরা বিপরীতভাবে একটি স্থান দিয়ে “-” প্রতিস্থাপন করব।

এখন একটি প্রদত্ত পৃষ্ঠায় নেভিগেট করার সময়, শুধুমাত্র এটির স্ট্যাটিক ঠিকানাই ব্যবহার করা হবে না, তবে URL প্যারামিটারগুলিও পৃষ্ঠায় সামগ্রীর প্রকৃত প্রদর্শনকে প্রভাবিত করে৷

ক্যোয়ারী প্যারামিটার ব্যবহার করে

প্রায় একই ভাবে, আপনি ক্যোয়ারী প্যারামিটার যোগ করতে পারেন ( Query Params )। URL প্যারামিটার থেকে তাদের মূল পার্থক্য হল যে তারা ঐচ্ছিক। এই উদাহরণে, ইউআরএল অগত্যা পৃষ্ঠায় কোন তথ্য প্রদর্শন করা উচিত তার একটি ইঙ্গিত অন্তর্ভুক্ত করে (কোন বিষয়ভিত্তিক বিভাগ এবং কোন লেখক), এবং অতিরিক্ত পরামিতি প্রয়োজনীয় স্পষ্টীকরণ করে। উদাহরণস্বরূপ, আপনি পৃষ্ঠা সংখ্যা সংগঠিত করতে limit এবং offset প্যারামিটার ব্যবহার করতে পারেন এবং ডাটাবেস থেকে কয়টি রেকর্ড অনুসন্ধান করতে হবে এবং কোন রেকর্ড থেকে আউটপুট শুরু করতে হবে তা সেট করতে পারেন।

শুরু পৃষ্ঠায় দুটি নতুন ক্ষেত্র যোগ করা যাক - Input (Integer) । আমরা তাদের মধ্যে limit এবং offset প্যারামিটার লিখব।

আসুন নেভিগেশন বোতাম ব্যবসায়িক প্রক্রিয়াতে প্রয়োজনীয় সংযোজন করি। limit এবং offset মান সহ Query Params একটি অ্যারে তৈরি করা যাক।

শেষ ধাপ হল অনুরোধের প্যারামিটার থেকে তথ্য সহ উপাদান যোগ করা, সেইসাথে লক্ষ্য পৃষ্ঠার জন্য ব্যবসা প্রক্রিয়া সম্পূর্ণ করা।

ফলাফল এই মত একটি URL হতে হবে:

https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12

অ্যাপ্লিকেশনটি ইউআরএল প্যারামিটার এবং ক্যোয়ারী প্যারামিটার সহ নেভিগেশন প্রয়োগ করে এবং এই প্যারামিটারগুলির উপর নির্ভর করে গতিশীলভাবে লক্ষ্য পৃষ্ঠার বিষয়বস্তু নির্ধারণ করে।