Route Parameters এবং Query Strings হ্যান্ডলিং

Aurelia ফ্রেমওয়ার্কে রাউটিং একটি গুরুত্বপূর্ণ বিষয়, যা অ্যাপ্লিকেশনের বিভিন্ন ভিউ এবং কম্পোনেন্টের মধ্যে নেভিগেশন পরিচালনা করে। Route Parameters এবং Query Strings হল রাউটিং এর দুটি গুরুত্বপূর্ণ অংশ যা URL এর মাধ্যমে ডেটা পাস করতে সাহায্য করে। এই ফিচারগুলোর মাধ্যমে আপনি একটি অ্যাপ্লিকেশন ভিউয়ের মধ্যে ডেটা পাস করতে পারবেন এবং ব্যবহারকারীর নির্দিষ্ট পছন্দ বা অনুসন্ধান অনুযায়ী ভিউ রেন্ডার করতে পারবেন।

১. Route Parameters

Route Parameters হল URL এর অংশ যা একটি নির্দিষ্ট কম্পোনেন্ট বা ভিউকে ডাইনামিকভাবে রেন্ডার করার জন্য ব্যবহৃত হয়। আপনি Route Parameters এর মাধ্যমে একটি URL এর মধ্যে ডেটা পাস করতে পারেন, এবং সেই ডেটাকে ভিউমডেলে এক্সেস করতে পারেন।

Route Parameters ব্যবহার করা

ধরা যাক, আপনার অ্যাপ্লিকেশনে একটি বইয়ের বিস্তারিত তথ্য দেখানোর কম্পোনেন্ট আছে এবং আপনি URL এর মাধ্যমে বইয়ের আইডি পাস করতে চান।

app.js (রুট কনফিগারেশন):

import {Router, RouterConfiguration} from 'aurelia-router';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'], moduleId: './home', nav: true, title: 'Home' },
      { route: 'book/:id', moduleId: './book', nav: true, title: 'Book Details' }
    ]);
    this.router = router;
  }
}

এখানে, book/:id রাউটটি Route Parameter হিসাবে id ব্যবহার করেছে। এই id প্যারামিটারটি আমরা URL থেকে পেতে পারব।

Route Parameters এক্সেস করা

এখন, যখন ব্যবহারকারী /book/123 URL এ যান, তখন 123 হবে book/:id রাউটের প্যারামিটার। এই প্যারামিটারটি কম্পোনেন্টের ভিউমডেল থেকে এক্সেস করা যাবে।

book.js (কম্পোনেন্ট ভিউমডেল):

export class Book {
  static inject = [Router];
  
  constructor(router) {
    this.router = router;
  }

  activate(params) {
    this.bookId = params.id;  // Route parameter 'id' থেকে বইয়ের আইডি পান
  }
}

এখানে, params.id ব্যবহার করে আমরা /book/:id রাউটের প্যারামিটার id এক্সেস করছি। এই প্যারামিটারটি আপনি বইয়ের বিস্তারিত তথ্য দেখানোর জন্য ব্যবহার করতে পারেন।

২. Query Strings

Query Strings হল URL এর অংশ যা সাধারণত ? দিয়ে শুরু হয় এবং এর মাধ্যমে একাধিক কিপ-value পেয়ার পাস করা যায়। এটি সাধারণত ফিল্টার, অনুসন্ধান বা পেজিনেশন ডেটা পাস করতে ব্যবহৃত হয়।

Query Strings ব্যবহার করা

ধরা যাক, আপনি একটি পেজে বইয়ের নাম অনুসারে অনুসন্ধান করতে চান এবং সেই অনুসন্ধান তথ্য query string এর মাধ্যমে পাস করবেন।

এখানে, আপনি search নামক একটি কুয়েরি স্ট্রিং তৈরি করতে পারেন।

app.js (রাউট কনফিগারেশন):

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: 'search', moduleId: './search', nav: true, title: 'Search' }
    ]);
    this.router = router;
  }
}

এখন, আপনি URL এর মাধ্যমে search পৃষ্ঠায় একটি কুয়েরি স্ট্রিং পাঠাতে পারবেন, যেমন: /search?query=bookname।

Query String এক্সেস করা

এখন, search.js ফাইলের মাধ্যমে আপনি এই query কুয়েরি স্ট্রিংটি এক্সেস করতে পারেন।

search.js (কম্পোনেন্ট ভিউমডেল):

import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Router)
export class Search {
  constructor(router) {
    this.router = router;
  }

  activate(params, queryString) {
    this.searchQuery = queryString.query;  // Query string 'query' থেকে মান পান
  }
}

এখানে, queryString.query ব্যবহার করে আমরা /search?query=bookname URL থেকে কুয়েরি স্ট্রিং query এক্সেস করছি।

৩. Route Parameters এবং Query Strings একসাথে ব্যবহার করা

Aurelia-তে আপনি একই রাউটে Route Parameters এবং Query Strings একসাথে ব্যবহার করতে পারেন। এটি খুবই শক্তিশালী, কারণ আপনি URL এর মাধ্যমে ডেটা পাস করতে পারেন এবং সেই ডেটা একটি কম্পোনেন্টে প্রসেস করতে পারেন।

ধরা যাক, আপনি /book/:id?genre=fiction URL ব্যবহার করছেন, যেখানে id হল রাউট প্যারামিটার এবং genre হল কুয়েরি স্ট্রিং।

Route Parameters এবং Query Strings একসাথে ব্যবহার করা

app.js (রাউট কনফিগারেশন):

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: 'book/:id', moduleId: './book', nav: true, title: 'Book Details' }
    ]);
    this.router = router;
  }
}

book.js (কম্পোনেন্ট ভিউমডেল):

export class Book {
  static inject = [Router];
  
  constructor(router) {
    this.router = router;
  }

  activate(params, queryString) {
    this.bookId = params.id;  // Route parameter 'id'
    this.genre = queryString.genre;  // Query string 'genre'
  }
}

এখানে, params.id এর মাধ্যমে Route Parameter এক্সেস করা হচ্ছে এবং queryString.genre এর মাধ্যমে Query String এক্সেস করা হচ্ছে।

উপসংহার

Aurelia-তে Route Parameters এবং Query Strings হ্যান্ডলিং আপনাকে ডাইনামিক এবং ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। Route Parameters ব্যবহার করে আপনি URL এর মাধ্যমে ডেটা পাস করতে পারেন, এবং Query Strings এর মাধ্যমে আরও ডেটা যেমন ফিল্টার বা অনুসন্ধান কন্ডিশন পাস করতে পারেন। এই দুটি ফিচার একসাথে ব্যবহার করে আপনি ইউজার ইন্টারফেসে ডেটা সংগ্রহ এবং প্রক্রিয়া করতে পারেন।