Framework7 এ রাউটিং সিস্টেম ব্যবহার করে পৃষ্ঠাগুলোর মধ্যে সহজে নেভিগেশন তৈরি করা যায়। Routes (পথ) ব্যবহারকারীর নির্দিষ্ট পৃষ্ঠায় যাওয়ার নির্দেশনা দেয় এবং অ্যাপ্লিকেশন ব্যবস্থাপনা সহজ করে। Framework7 এ রাউটিং সিস্টেম খুবই সহজ এবং শক্তিশালী।
Framework7 Routes কনফিগারেশন
Routes কনফিগারেশন কোথায় থাকবে?
Framework7 রাউটিং কনফিগারেশন সাধারণত app.js ফাইলে থাকে। এখানে routes নামে একটি অ্যারের মধ্যে সব রাউট কনফিগার করা হয়।
উদাহরণ:
var app = new Framework7({
root: '#app', // অ্যাপের মূল রুট
routes: [
{
path: '/about/',
url: './pages/about.html',
},
{
path: '/contact/',
url: './pages/contact.html',
},
],
});
উপরের কোডে, /about/ এবং /contact/ রাউটগুলো কনফিগার করা হয়েছে এবং প্রতিটি রাউট নির্দিষ্ট HTML ফাইলে নেভিগেট করে।
Routes তৈরি করা: ধাপসমূহ
১. HTML ফাইল তৈরি
প্রথমে প্রতিটি পৃষ্ঠার জন্য আলাদা HTML ফাইল তৈরি করতে হবে এবং /pages ডিরেক্টরিতে রাখতে হবে।
উদাহরণ (about.html):
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner">
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<p>This is the About Page.</p>
</div>
</div>
উদাহরণ (contact.html):
<div class="page" data-name="contact">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Contact</div>
</div>
</div>
<div class="page-content">
<p>This is the Contact Page.</p>
</div>
</div>
২. Routes কনফিগার করা
প্রতিটি HTML ফাইলের জন্য একটি রাউট কনফিগার করতে হবে। এটি app.js বা Framework7 কনফিগারেশন ফাইলে করতে হবে।
উদাহরণ:
var app = new Framework7({
root: '#app',
routes: [
{
path: '/about/',
url: './pages/about.html',
},
{
path: '/contact/',
url: './pages/contact.html',
},
],
});
Routes ব্যবহার করা
Framework7 এর link ব্যবহার করে নির্দিষ্ট রাউটে নেভিগেট করা যায়।
উদাহরণ:
<div class="list">
<ul>
<li>
<a href="/about/" class="item-link">About</a>
</li>
<li>
<a href="/contact/" class="item-link">Contact</a>
</li>
</ul>
</div>
উপরের কোডে, /about/ এবং /contact/ পৃষ্ঠাগুলোর জন্য লিঙ্ক তৈরি করা হয়েছে। Framework7 এই লিঙ্কগুলো ধরে পৃষ্ঠাগুলো লোড করবে।
Dynamic Routes
Dynamic Routes ব্যবহার করে URL থেকে ডাটা পাস করা যায় এবং ডাইনামিক পৃষ্ঠা তৈরি করা যায়।
উদাহরণ:
var app = new Framework7({
root: '#app',
routes: [
{
path: '/user/:userId/',
url: './pages/user.html',
},
],
});
এখানে /user/:userId/ একটি ডাইনামিক রাউট।
ডাইনামিক পৃষ্ঠা তৈরি (user.html):
<div class="page" data-name="user">
<div class="navbar">
<div class="navbar-inner">
<div class="title">User Page</div>
</div>
</div>
<div class="page-content">
<p>User ID: {{userId}}</p>
</div>
</div>
JavaScript কোডে ডাটা পাস করা:
app.views.main.router.navigate('/user/123/');
এতে /user/123/ রাউটটি লোড হবে এবং userId এর মান 123 হবে।
Routes এর সম্পূর্ণ কনফিগারেশন উদাহরণ
var app = new Framework7({
root: '#app',
routes: [
{
path: '/',
url: './index.html',
},
{
path: '/about/',
url: './pages/about.html',
},
{
path: '/contact/',
url: './pages/contact.html',
},
{
path: '/user/:userId/',
url: './pages/user.html',
},
],
});
Framework7 Routes এর সুবিধা
- সহজ পৃষ্ঠা নেভিগেশন: Routes ব্যবহার করে পৃষ্ঠাগুলোর মধ্যে দ্রুত এবং সঠিকভাবে নেভিগেট করা যায়।
- ডাইনামিক ডাটা হ্যান্ডলিং: ডাইনামিক রাউট ব্যবহার করে URL এর মাধ্যমে ডাটা পাঠানো এবং গ্রহন করা যায়।
- উন্নত অ্যাপ ব্যবস্থাপনা: Routes অ্যাপ্লিকেশন গঠনকে সুসংহত করে এবং কোডকে সহজবোধ্য রাখে।
Framework7 Routes একটি অ্যাপ্লিকেশনের জন্য গাইডলাইন হিসেবে কাজ করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
Read more
