তথ্য সংগ্রহ এবং ফিল্টারিং

Aurelia ফ্রেমওয়ার্কে তথ্য সংগ্রহ (Data Collection) এবং ফিল্টারিং (Filtering) হল একটি সাধারণ প্রক্রিয়া, যেখানে আপনি একটি ডেটা তালিকা সংগ্রহ করেন এবং পরে সেই ডেটা ফিল্টার বা সাজিয়ে উপস্থাপন করেন। এই ফিচারটি সাধারণত টেবিল বা লিস্টে ব্যবহৃত হয়, যেখানে ব্যবহারকারীরা ডেটা অনুযায়ী অনুসন্ধান বা ফিল্টার করতে পারে।

এই টিউটোরিয়ালে, আমরা দেখবো কিভাবে Aurelia ব্যবহার করে তথ্য সংগ্রহ এবং ফিল্টারিং করা যায়।

১. তথ্য সংগ্রহ (Data Collection)

Aurelia তে তথ্য সংগ্রহ সাধারণত একটি অ্যারে বা অবজেক্টের মাধ্যমে করা হয়। যখন আপনি একটি ডেটা সংগ্রহ করবেন, তখন সেটি UI তে বাইন্ডিং করা যাবে এবং বিভিন্ন ফিচার যেমন ফিল্টারিং, সাজানো, বা তথ্য আপডেট করা যাবে।

উদাহরণ: তথ্য সংগ্রহ করা

// app.js (ভিউমডেল)
export class App {
  constructor() {
    this.products = [
      { id: 1, name: 'Apple', category: 'Fruit', price: 1.2 },
      { id: 2, name: 'Carrot', category: 'Vegetable', price: 0.8 },
      { id: 3, name: 'Banana', category: 'Fruit', price: 1.1 },
      { id: 4, name: 'Lettuce', category: 'Vegetable', price: 1.3 }
    ];
  }
}

<!-- app.html (ভিউ টেমপ্লেট) -->
<template>
  <h1>Product List</h1>
  <ul>
    <li repeat.for="product of products">
      ${product.name} - ${product.category} - $${product.price}
    
  

এই উদাহরণে, products অ্যারে একটি পণ্য তালিকা ধারণ করে, এবং এটি HTML টেমপ্লেটে repeat.for ডিরেকটিভ ব্যবহার করে উপস্থাপন করা হয়।
২. তথ্য ফিল্টারিং (Data Filtering)
তথ্য ফিল্টারিং হল এমন একটি প্রক্রিয়া যা দিয়ে আপনি নির্দিষ্ট মানের ভিত্তিতে একটি তালিকা থেকে ডেটা বেছে নিতে পারেন। Aurelia তে আপনি Array.prototype.filter() ব্যবহার করতে পারেন অথবা ডেটা ফিল্টার করতে getter/setter ব্যবহার করতে পারেন।
উদাহরণ: তথ্য ফিল্টার করা
এখন, আমরা পণ্যের তালিকা ফিল্টার করার জন্য একটি ইনপুট ফিল্ড ব্যবহার করবো, যাতে ব্যবহারকারীরা পণ্যের নাম অনুসারে অনুসন্ধান করতে পারে।
// app.js (ভিউমডেল)
export class App {
  constructor() {
    this.products = [
      { id: 1, name: 'Apple', category: 'Fruit', price: 1.2 },
      { id: 2, name: 'Carrot', category: 'Vegetable', price: 0.8 },
      { id: 3, name: 'Banana', category: 'Fruit', price: 1.1 },
      { id: 4, name: 'Lettuce', category: 'Vegetable', price: 1.3 }
    ];

    this.searchTerm = ''; // ফিল্টার করার জন্য ইনপুট
  }

  get filteredProducts() {
    return this.products.filter(product => 
      product.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    );
  }
}

{product.price}
    </li>
  </ul>
</template>

কিভাবে এটি কাজ করে:

1. searchTerm প্রপার্টি একটি ইনপুট ফিল্ডের সাথে বাইন্ড করা হয়েছে।
2. filteredProducts নামক একটি getter তৈরি করা হয়েছে, যা products অ্যারের উপর filter() ফাংশন প্রয়োগ করে, এবং searchTerm এর ভিত্তিতে পণ্যগুলিকে ফিল্টার করে।
3. যখন ব্যবহারকারী ইনপুটে কিছু টাইপ করবে, searchTerm আপডেট হবে এবং filteredProducts হালনাগাদ হবে, যা UI তে <ul> লিস্টে পণ্যগুলো দেখাবে।

৩. কাস্টম ফিল্টার (Custom Filter)

আপনি যদি আরও জটিল ফিল্টার তৈরি করতে চান, যেমন একাধিক শর্তের ভিত্তিতে ফিল্টারিং, তাহলে আপনি একটি কাস্টম মেথড ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আমরা পণ্যের ক্যাটাগরি এবং দাম এর উপর ভিত্তি করে একটি ফিল্টার তৈরি করতে পারি।

// app.js (ভিউমডেল)
export class App {
  constructor() {
    this.products = [
      { id: 1, name: 'Apple', category: 'Fruit', price: 1.2 },
      { id: 2, name: 'Carrot', category: 'Vegetable', price: 0.8 },
      { id: 3, name: 'Banana', category: 'Fruit', price: 1.1 },
      { id: 4, name: 'Lettuce', category: 'Vegetable', price: 1.3 }
    ];

    this.searchTerm = '';
    this.selectedCategory = 'All';
    this.maxPrice = 2;
  }

  get filteredProducts() {
    return this.products.filter(product => {
      const matchesCategory = this.selectedCategory === 'All' || product.category === this.selectedCategory;
      const matchesPrice = product.price <= this.maxPrice;
      const matchesName = product.name.toLowerCase().includes(this.searchTerm.toLowerCase());

      return matchesCategory && matchesPrice && matchesName;
    });
  }
}

<!-- app.html (ভিউ টেমপ্লেট) -->
<template>
  <h1>Product List</h1>

  <input type="text" value.bind="searchTerm" placeholder="Search by name" />
  
  <select value.bind="selectedCategory">
    <option value="All">All</option>
    <option value="Fruit">Fruit</option>
    <option value="Vegetable">Vegetable</option>
  </select>

  <input type="number" value.bind="maxPrice" placeholder="Max Price" />

  <ul>
    <li repeat.for="product of filteredProducts">
      ${product.name} - ${product.category} - $${product.price}
    </li>
  </ul>
</template>

কিভাবে এটি কাজ করে:

1. selectedCategory এবং maxPrice প্রপার্টি দুটি ইনপুট ফিল্ডের সাথে বাইন্ড করা হয়েছে।
2. filteredProducts getter এখন category, price, এবং name এর উপর ভিত্তি করে ডেটা ফিল্টার করবে।
3. ব্যবহারকারী ক্যাটাগরি, দাম, এবং নামের ভিত্তিতে পণ্য তালিকা ফিল্টার করতে পারবে।

৪. তথ্য সংগ্রহ এবং ফিল্টারিংয়ের অন্যান্য কৌশল

• ডেটাবেস থেকে ফিল্টারিং: বড় ডেটা সেটের জন্য, ক্লায়েন্ট সাইডে ফিল্টারিং না করে সার্ভার সাইডে ফিল্টারিং করা সাধারণত কার্যকরী। আপনি Web API এর মাধ্যমে ফিল্টার করা ডেটা সার্ভার থেকে অ্যাক্সেস করতে পারেন।
• লজিকাল কন্ডিশন ব্যবহার: ফিল্টারিংয়ের জন্য জটিল শর্ত ব্যবহার করতে, যেমন মাল্টি-কন্ডিশনাল ফিল্টার, এবং আপনি ডেটার প্রাসঙ্গিকতা অনুযায়ী ডেটা পরিবর্তন করতে পারেন।

উপসংহার

Aurelia তে তথ্য সংগ্রহ এবং ফিল্টারিং করা খুবই সহজ। getter/setter, filter() ফাংশন এবং UI ডেটা বাইন্ডিং ব্যবহার করে আপনি দ্রুত এবং কার্যকরভাবে ডেটা ফিল্টার করতে পারেন। এতে ডাইনামিক ডেটা উপস্থাপন এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করা সম্ভব হয়।

Aurelia একটি মডার্ন, ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ডেটা বাইন্ডিং এবং ডেটা সংগ্রহের ক্ষেত্রে শক্তিশালী ফিচার সরবরাহ করে। ডেটা সংগ্রহ বলতে মূলত আপনার অ্যাপ্লিকেশনে থেকে তথ্য বা ডেটা একটি নির্দিষ্ট উৎস থেকে সংগ্রহ করে সেই ডেটা UI তে প্রদর্শন করা বোঝায়। Aurelia এই ডেটা সংগ্রহ প্রক্রিয়াটি সহজ এবং কার্যকরী করতে বিভিন্ন কৌশল প্রদান করে, যেমন API কল (RESTful API বা GraphQL), WebSocket এবং Local Storage ইত্যাদি।

এখানে আমরা Aurelia ফ্রেমওয়ার্কের সাথে ডেটা সংগ্রহের কিছু পদ্ধতি আলোচনা করব।

১. API কল (RESTful API বা GraphQL)

Aurelia-তে ডেটা সংগ্রহের অন্যতম জনপ্রিয় পদ্ধতি হলো API কল করা। সাধারণত RESTful API ব্যবহার করে আপনি ডেটা সংগ্রহ করতে পারেন এবং তারপর সেটি আপনার UI তে রেন্ডার করতে পারেন।

উদাহরণ: API থেকে ডেটা সংগ্রহ করা

ধরা যাক, আপনি একটি পাবলিক REST API থেকে ডেটা সংগ্রহ করতে চান এবং তা টেমপ্লেটে প্রদর্শন করতে চান।

Step 1: HTTP Client ইনস্টল করা

Aurelia তে HTTP API কল করতে Aurelia HttpClient ব্যবহার করা হয়। এটি aurelia-fetch-client প্যাকেজে অন্তর্ভুক্ত থাকে। প্রথমে আপনাকে এই প্যাকেজটি ইনস্টল করতে হবে:

npm install aurelia-fetch-client

Step 2: API কল করার কোড

এখন view-model-এ API কল করার জন্য HttpClient ব্যবহার করুন:

import {HttpClient} from 'aurelia-fetch-client';

export class App {
  users = [];

  constructor() {
    this.http = new HttpClient();
  }

  activate() {
    // API কল করা
    this.http.fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;  // API থেকে প্রাপ্ত ডেটা users অ্যারে তে সেভ করা
      })
      .catch(error => console.log('Error fetching data: ', error));
  }
}

Step 3: ডেটা টেমপ্লেটে প্রদর্শন

এখন users অ্যারের ডেটা HTML টেমপ্লেটে প্রদর্শন করুন:

<template>
  <h2>Users List</h2>
  <ul>
    <li repeat.for="user of users">${user.name}</li>
  </ul>
</template>

এখানে repeat.for ডিরেক্টিভ ব্যবহার করে আপনি API থেকে পাওয়া users অ্যারের প্রতিটি আইটেমের উপর লুপ করতে পারবেন এবং প্রতিটি user.name টেমপ্লেটে রেন্ডার হবে।

২. WebSocket (রিয়েল-টাইম ডেটা সংগ্রহ)

Aurelia-তে রিয়েল-টাইম ডেটা সংগ্রহ করতে আপনি WebSocket ব্যবহার করতে পারেন। WebSocket সরাসরি ব্রাউজার এবং সার্ভারের মধ্যে একটি দ্বিমুখী যোগাযোগ ব্যবস্থা প্রদান করে।

উদাহরণ: WebSocket ব্যবহার করে রিয়েল-টাইম ডেটা সংগ্রহ

ধরা যাক, আপনি WebSocket ব্যবহার করে রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করতে চান।

Step 1: WebSocket এর সাথে কানেক্ট হওয়া

view-model-এ WebSocket কানেকশন তৈরি করতে:

export class App {
  messages = [];
  socket;

  constructor() {
    this.socket = new WebSocket('ws://example.com/socket');
    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    };
  }

  sendMessage() {
    const message = { text: 'Hello World' };
    this.socket.send(JSON.stringify(message));
  }
}

Step 2: ডেটা UI তে প্রদর্শন করা

messages অ্যারের ডেটা UI তে প্রদর্শন করতে:

<template>
  <h2>Real-Time Chat</h2>
  <ul>
    <li repeat.for="message of messages">${message.text}</li>
  </ul>
  <button click.delegate="sendMessage()">Send Message</button>
</template>

এখানে messages অ্যারে তে আসা নতুন মেসেজগুলো UI তে রিয়েল-টাইমে প্রদর্শিত হবে।

৩. Local Storage ব্যবহার করে ডেটা সংগ্রহ

যদি আপনি ক্লায়েন্ট সাইডে ডেটা রাখতে চান এবং পরবর্তীতে সেই ডেটা ব্যবহার করতে চান, তাহলে Local Storage একটি ভালো পদ্ধতি। Aurelia আপনাকে Web API এর মাধ্যমে Local Storage ব্যবহার করার সুবিধা দেয়।

উদাহরণ: Local Storage থেকে ডেটা সংগ্রহ করা

Step 1: Local Storage থেকে ডেটা সংগ্রহ

export class App {
  storedData = null;

  activate() {
    this.storedData = JSON.parse(localStorage.getItem('myData'));
  }

  saveData() {
    const data = { name: 'John', age: 30 };
    localStorage.setItem('myData', JSON.stringify(data));
  }
}

Step 2: ডেটা UI তে প্রদর্শন

<template>
  <h2>Stored Data</h2>
  <div>${storedData ? storedData.name : 'No Data Found'}</div>
  <button click.delegate="saveData()">Save Data</button>
</template>

এখানে, LocalStorage থেকে myData নামের ডেটা সংগ্রহ করা হয়েছে এবং UI তে সেটি প্রদর্শন করা হয়েছে। আপনি Save Data বাটনে ক্লিক করে ডেটা সেভও করতে পারবেন।

৪. Form ডেটা সংগ্রহ

Aurelia-তে ফর্ম ডেটা সংগ্রহ এবং বাইন্ডিং করা খুবই সহজ। আপনি two-way binding ব্যবহার করে ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করতে পারেন।

উদাহরণ: ফর্ম ডেটা সংগ্রহ

<template>
  <form submit.delegate="submitForm()">
    <label>Name:</label>
    <input value.bind="name">
    <button type="submit">Submit</button>
  </form>
  <p>Your name is: ${name}</p>
</template>

export class App {
  name = '';

  submitForm() {
    alert(`Name Submitted: ${this.name}`);
  }
}

এখানে two-way binding ব্যবহার করা হয়েছে, যেখানে ইনপুট ফিল্ডের মান name প্রপার্টির সাথে বাইন্ড করা হয়েছে। ফর্ম সাবমিট হলে submitForm মেথড কল হবে এবং নাম প্রদর্শিত হবে।

উপসংহার

Aurelia-তে ডেটা সংগ্রহের জন্য আপনি বিভিন্ন পদ্ধতি ব্যবহার করতে পারেন যেমন API কল, WebSocket, LocalStorage এবং Form বাইন্ডিং। Aurelia-র শক্তিশালী data binding এবং HTTP client ব্যবহার করে আপনি সহজেই আপনার অ্যাপ্লিকেশনে ডেটা সংগ্রহ করতে পারেন এবং UI তে তা রেন্ডার করতে পারেন। এটি ডেভেলপারদের জন্য ওয়েব অ্যাপ্লিকেশন নির্মাণে দ্রুততা এবং সুবিধা প্রদান করে।

Aurelia তে ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করা খুবই সহজ এবং এটি two-way data binding এবং JavaScript এর বিভিন্ন পদ্ধতি ব্যবহার করে সম্পন্ন করা যায়। আপনি একটি অ্যারে বা লিস্টে থাকা ডেটা ফিল্টার এবং সার্ট করতে computed properties, custom binding behavior অথবা functions ব্যবহার করতে পারেন। এই টিউটোরিয়ালে আমরা দেখবো কিভাবে একটি ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করতে হয়।

১. ডাটা ফিল্টার ফাংশন তৈরি করা

ডাটা ফিল্টার ফাংশন একটি নির্দিষ্ট শর্তের ভিত্তিতে অ্যারে থেকে ডেটা ফিল্টার করতে সাহায্য করে। আপনি Array.prototype.filter() পদ্ধতি ব্যবহার করে ডেটা ফিল্টার করতে পারেন।

উদাহরণ:

ধরা যাক, আপনার একটি অ্যারে রয়েছে items নামক যেখানে কিছু প্রোডাক্টের নাম এবং প্রাইস রয়েছে, এবং আপনি প্রোডাক্টের নামের উপর ভিত্তি করে ফিল্টার করতে চান।

export class App {
  searchQuery = '';
  items = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 300 },
    { name: 'Monitor', price: 200 }
  ];

  get filteredItems() {
    return this.items.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
  }
}

<template>
  <input value.bind="searchQuery" placeholder="Search for a product">
  <ul>
    <li repeat.for="item of filteredItems">${item.name} - $${item.price}
  

এখানে:
filteredItems একটি computed property যা items অ্যারে থেকে name প্রপার্টি অনুযায়ী ডেটা ফিল্টার করে।
searchQuery ইনপুট ফিল্ডের সাথে বাইন্ড করা, যা ইউজারের ইনপুট অনুযায়ী ফিল্টারিং করতে সাহায্য করে।
২. ডাটা সার্ট ফাংশন তৈরি করা
ডাটা সার্ট ফাংশন দিয়ে আপনি অ্যারে বা লিস্টকে কোন বিশেষ প্রপার্টির ভিত্তিতে সাজাতে পারেন। এখানে Array.prototype.sort() পদ্ধতি ব্যবহার করা হয়। আপনি ascending (ASC) বা descending (DESC) অর্ডারে ডেটা সাজাতে পারেন।
উদাহরণ:
ধরা যাক, আপনার প্রোডাক্টের অ্যারে রয়েছে এবং আপনি প্রোডাক্টের প্রাইসের ভিত্তিতে ডেটা সাজাতে চান।
export class App {
  sortOrder = 'asc'; // default sort order
  items = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 300 },
    { name: 'Monitor', price: 200 }
  ];

  sortItems() {
    if (this.sortOrder === 'asc') {
      return this.items.sort((a, b) => a.price - b.price);
    } else {
      return this.items.sort((a, b) => b.price - a.price);
    }
  }

  toggleSortOrder() {
    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
  }
}
{item.price}</li>
  </ul>
</template>

এখানে:

• sortItems একটি method যা অ্যারে items কে price প্রপার্টির উপর ভিত্তি করে সাজায়।
• toggleSortOrder একটি ফাংশন যা সোর্ট অর্ডার (ASC বা DESC) পরিবর্তন করে।

এটি ইউজারকে সার্ট অর্ডার পরিবর্তন করার সুযোগ দেয়। ক্লিক করলে সার্ট অর্ডার পাল্টে যাবে এবং প্রোডাক্টগুলো সেই অনুযায়ী সাজানো হবে।

৩. একসাথে ফিল্টার এবং সার্ট ফাংশন ব্যবহার করা

আপনি ফিল্টার এবং সার্ট ফাংশন একসাথে ব্যবহার করতে পারেন যাতে ইউজার একযোগে ডেটা ফিল্টার এবং সার্ট করতে পারেন।

উদাহরণ:

এখানে আমরা একটি ফিল্টার এবং সার্ট ফাংশন একসাথে ব্যবহার করবো। ইউজার সার্চ কিউরি ও সার্ট অর্ডার অনুযায়ী প্রোডাক্ট লিস্ট ফিল্টার এবং সার্ট করতে পারবেন।

export class App {
  searchQuery = '';
  sortOrder = 'asc';
  items = [
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 500 },
    { name: 'Tablet', price: 300 },
    { name: 'Monitor', price: 200 }
  ];

  get filteredAndSortedItems() {
    let filtered = this.items.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));

    if (this.sortOrder === 'asc') {
      return filtered.sort((a, b) => a.price - b.price);
    } else {
      return filtered.sort((a, b) => b.price - a.price);
    }
  }

  toggleSortOrder() {
    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
  }
}

<template>
  <input value.bind="searchQuery" placeholder="Search for a product">
  <button click.delegate="toggleSortOrder()">Toggle Sort Order</button>
  <ul>
    <li repeat.for="item of filteredAndSortedItems">${item.name} - $${item.price}</li>
  </ul>
</template>

এখানে:

• filteredAndSortedItems একটি computed property যা প্রথমে ফিল্টারিং করে এবং তারপর প্রাইস অনুযায়ী ডেটা সাজায়।
• ইউজার searchQuery ইনপুটের মাধ্যমে প্রোডাক্ট ফিল্টার এবং toggleSortOrder বাটন ক্লিক করে সার্ট অর্ডার পরিবর্তন করতে পারেন।

উপসংহার

Aurelia তে ডাটা ফিল্টার এবং সার্ট ফাংশন তৈরি করা খুবই সহজ। আপনি computed properties এবং methods ব্যবহার করে ডেটাকে ফিল্টার এবং সার্ট করতে পারেন। এতে আপনি ডেটাকে ব্যবহারকারীর চাহিদা অনুযায়ী সরলভাবে নিয়ন্ত্রণ করতে পারবেন। এছাড়া, two-way data binding এর মাধ্যমে ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হবে, যা উন্নত ইউজার ইন্টারঅ্যাকশন এবং কার্যকারিতা নিশ্চিত করে।

Aurelia ফ্রেমওয়ার্কের মাধ্যমে আপনি সহজেই একটি ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করতে পারেন। এতে ইউজাররা তাদের প্রয়োজনীয় ডেটা সহজেই খুঁজে বের করতে পারে এবং ফিল্টার করতে পারে। এটি সাধারণত একটি ইনপুট ফিল্ড বা চেকবক্সের মাধ্যমে হয়, যেখানে ইউজার যেকোনো নির্দিষ্ট মান অনুসারে ডেটা ফিল্টার করতে পারে।

এখানে আমরা একটি ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করার প্রক্রিয়া দেখবো, যেখানে ডেটা একটি তালিকা বা অ্যারে হিসেবে থাকবে এবং ইউজার তার ইনপুটের মাধ্যমে ডেটা সার্চ এবং ফিল্টার করতে পারবে।

১. ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করা

আমরা একটি তালিকাভুক্ত পণ্যের ডেটা ব্যবহার করবো এবং ইউজারদের একটি সার্চ ফিল্ডের মাধ্যমে তা ফিল্টার করার সুযোগ দেবো।

Step 1: ডেটা তৈরি করা

প্রথমে, আমরা একটি পণ্যের তালিকা তৈরি করবো যা ইউজার সার্চ বা ফিল্টার করতে পারবে।

export class App {
  constructor() {
    this.products = [
      { name: 'Laptop', category: 'Electronics', price: 1000 },
      { name: 'Smartphone', category: 'Electronics', price: 500 },
      { name: 'Shirt', category: 'Clothing', price: 30 },
      { name: 'Washing Machine', category: 'Home Appliances', price: 250 },
      { name: 'Jacket', category: 'Clothing', price: 60 },
      { name: 'Microwave', category: 'Home Appliances', price: 120 }
    ];
    
    this.searchText = ''; // সার্চ টেক্সট
    this.filteredProducts = this.products; // ফিল্টার করা পণ্য
  }

  // সার্চ ফিল্টারিং ফাংশন
  filterProducts() {
    this.filteredProducts = this.products.filter(product => 
      product.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
      product.category.toLowerCase().includes(this.searchText.toLowerCase())
    );
  }
}

এখানে:

• products অ্যারে আমাদের পণ্যের তালিকা ধারণ করে।
• searchText হল ইউজারের ইনপুট যা দ্বারা পণ্যগুলি সার্চ করা হবে।
• filterProducts ফাংশনটি পণ্যগুলিকে সার্চ টেক্সট অনুযায়ী ফিল্টার করে।

Step 2: HTML টেমপ্লেট তৈরি করা

এখন, আমাদের HTML টেমপ্লেটে একটি ইনপুট ফিল্ড এবং একটি তালিকা তৈরি করতে হবে যেখানে ফিল্টার করা পণ্যগুলি প্রদর্শিত হবে।

<template>
  <h2>Product Search</h2>
  
  <!-- সার্চ ইনপুট -->
  <input type="text" value.bind="searchText" input.trigger="filterProducts()" placeholder="Search products..." />

  <ul>
    <li repeat.for="product of filteredProducts">
      ${product.name} - ${product.category} - $${product.price}
    
  

এখানে:
input.trigger="filterProducts()": ইনপুট ফিল্ডে ইউজার যখন কিছু টাইপ করবে, তখন filterProducts() ফাংশনটি কল হবে এবং পণ্যগুলি ফিল্টার হবে।
repeat.for="product of filteredProducts": এখানে পণ্যগুলিকে ফিল্টার করা তালিকা (filteredProducts) থেকে পুনরাবৃত্তি (loop) করা হবে।
২. ফিল্টারিং এবং সার্চ কার্যকারিতা
উপরে আমরা যা তৈরি করেছি, তা হল একটি সাধারণ ডাইনামিক সার্চ UI, যেখানে ইউজার ইনপুট দেয় এবং সেটি পণ্যগুলিকে ফিল্টার করে। যখন ইউজার ইনপুট ফিল্ডে কিছু টাইপ করবে, তখন পণ্য তালিকা ফিল্টার হয়ে যাবে এবং ইউজার সহজেই তার প্রয়োজনীয় পণ্যটি খুঁজে পাবে।
এগিয়ে যাওয়া - ক্যাটাগরি ফিল্টারিং
আমরা আরও একটি ফিল্টার যোগ করতে পারি, যেমন ক্যাটাগরি ফিল্টার, যা ইউজারকে নির্দিষ্ট একটি ক্যাটাগরি অনুযায়ী পণ্য ফিল্টার করতে সাহায্য করবে। এটি একটি চেকবক্স বা ড্রপডাউন সিলেক্টর দিয়ে করা যেতে পারে।
Step 3: ক্যাটাগরি ফিল্টার যুক্ত করা
export class App {
  constructor() {
    this.products = [
      { name: 'Laptop', category: 'Electronics', price: 1000 },
      { name: 'Smartphone', category: 'Electronics', price: 500 },
      { name: 'Shirt', category: 'Clothing', price: 30 },
      { name: 'Washing Machine', category: 'Home Appliances', price: 250 },
      { name: 'Jacket', category: 'Clothing', price: 60 },
      { name: 'Microwave', category: 'Home Appliances', price: 120 }
    ];
    
    this.searchText = '';
    this.selectedCategory = '';  // ক্যাটাগরি ফিল্টার
    this.filteredProducts = this.products;
  }

  filterProducts() {
    this.filteredProducts = this.products.filter(product => 
      (product.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
      product.category.toLowerCase().includes(this.searchText.toLowerCase())) &&
      (!this.selectedCategory || product.category === this.selectedCategory)
    );
  }
}
HTML (ক্যাটাগরি ফিল্টার সহ):
{product.price}
    </li>
  </ul>
</template>

এখানে:

• selectedCategory ইউজারের সিলেক্ট করা ক্যাটাগরি ধারণ করে।
• change.trigger="filterProducts()": যখন ক্যাটাগরি পরিবর্তন হবে, তখন filterProducts() কল হবে।

এভাবে, ইউজাররা সার্চ টেক্সট এবং ক্যাটাগরি ফিল্টার দিয়ে পণ্যগুলিকে সহজে ফিল্টার করতে পারবে।

৩. ফিল্টারিং এবং সার্চের উন্নত কার্যকারিতা

আপনি আরও উন্নত ফিল্টারিং ব্যবস্থা তৈরি করতে পারেন, যেমন দাম ফিল্টার, রেটিং ফিল্টার বা অন্যান্য প্যারামিটার ফিল্টার। সমস্ত ফিল্টার একসঙ্গে ব্যবহার করে আপনি একটি শক্তিশালী এবং ডাইনামিক সার্চ সিস্টেম তৈরি করতে পারেন।

উপসংহার

Aurelia দিয়ে ডাইনামিক সার্চ এবং ফিল্টারিং UI তৈরি করা একটি সহজ প্রক্রিয়া। আপনি data binding এবং event handling ব্যবহার করে ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করতে পারেন। উদাহরণ হিসেবে আমরা পণ্যের তালিকা ফিল্টার এবং সার্চ করার ব্যবস্থা দেখলাম, যেখানে ইউজার ইনপুটের মাধ্যমে পণ্যগুলি ফিল্টার করা হয়। আপনি এই কনসেপ্ট ব্যবহার করে আরও উন্নত এবং ইন্টারেক্টিভ সার্চ এবং ফিল্টারিং সিস্টেম তৈরি করতে পারবেন।

ডেটা প্যাগিনেশন (Data Pagination) এবং লিমিটেশন (Limitation) হল এমন দুটি গুরুত্বপূর্ণ কৌশল যা ওয়েব অ্যাপ্লিকেশনগুলোর পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়। এটি বিশাল ডেটাসেটকে ছোট ছোট অংশে ভাগ করে প্রদর্শন করে, যার ফলে ইউজার ইন্টারফেস আরও দ্রুত এবং ইন্টারেক্টিভ হয়ে ওঠে। Aurelia ফ্রেমওয়ার্কে এই দুটি কৌশল ব্যবহারের জন্য অনেক সহজ এবং কার্যকরী পদ্ধতি রয়েছে।

এই টিউটোরিয়ালে আমরা দেখবো কিভাবে Aurelia তে ডেটা প্যাগিনেশন এবং লিমিটেশন বাস্তবায়ন করা যায়।

১. ডেটা প্যাগিনেশন (Data Pagination)

ডেটা প্যাগিনেশন হল একধরনের কৌশল, যেখানে বড় ডেটাসেটকে ছোট ছোট পৃষ্ঠায় ভাগ করা হয়। এটি ইউজারের জন্য একটি পরিস্কার এবং সহজে নেভিগেটেবল ইন্টারফেস তৈরি করে।

১.১ Aurelia তে ডেটা প্যাগিনেশন

Aurelia তে ডেটা প্যাগিনেশন কার্যকরীভাবে ব্যবহার করতে আপনি সাধারণত একটি array বা collection ব্যবহার করেন এবং page size এবং current page এর ভিত্তিতে ডেটা ফিল্টার করেন।

উদাহরণ: ডেটা প্যাগিনেশন

ধরা যাক, আপনার কাছে একটি বড় ডেটাসেট রয়েছে এবং আপনি তা প্যাগিনেট করতে চান।

app.js (জাভাস্ক্রিপ্ট)

export class App {
  currentPage = 1;
  pageSize = 5;
  data = [];  // আপনার ডেটাসেট এখানে থাকবে
  paginatedData = [];

  constructor() {
    // উদাহরণস্বরূপ ডেটা তৈরি করা
    this.data = [
      { name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" },
      { name: "Item 4" }, { name: "Item 5" }, { name: "Item 6" },
      { name: "Item 7" }, { name: "Item 8" }, { name: "Item 9" }
    ];
    this.updatePagination();
  }

  updatePagination() {
    // প্যাগিনেটেড ডেটা আপডেট করা
    let start = (this.currentPage - 1) * this.pageSize;
    let end = this.currentPage * this.pageSize;
    this.paginatedData = this.data.slice(start, end);
  }

  nextPage() {
    if ((this.currentPage * this.pageSize) < this.data.length) {
      this.currentPage++;
      this.updatePagination();
    }
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.updatePagination();
    }
  }
}

app.html (HTML টেমপ্লেট)

<template>
  <ul>
    <li repeat.for="item of paginatedData">${item.name}</li>
  </ul>

  <button click.delegate="prevPage()">Previous</button>
  <button click.delegate="nextPage()">Next</button>

  <p>Page ${currentPage}</p>
</template>

এখানে, ডেটা data অ্যারে থেকে paginatedData তে প্যাগিনেট করা হচ্ছে। ইউজার যখন "Next" বা "Previous" বাটনে ক্লিক করবেন, তখন পেজ পরিবর্তন হবে এবং ডেটা আপডেট হবে।

২. ডেটা লিমিটেশন (Data Limitation)

ডেটা লিমিটেশন হল একটি কৌশল, যেখানে একটি নির্দিষ্ট সংখ্যা পর্যন্ত ডেটা সীমাবদ্ধ করা হয়। এটি সাধারণত সার্ভার-সাইড বা ক্লায়েন্ট-সাইডে ব্যবহার করা হয়, যাতে ইউজার শুধুমাত্র প্রয়োজনীয় ডেটা দেখতে পান।

২.১ Aurelia তে ডেটা লিমিটেশন

Aurelia তে ডেটা লিমিটেশন প্রয়োগ করতে, আপনি সহজেই limit বা slice ফাংশন ব্যবহার করতে পারেন। এটি আপনাকে একটি নির্দিষ্ট সংখ্যক উপাদান দেখানোর সুযোগ দেয়।

উদাহরণ: ডেটা লিমিটেশন

app.js (জাভাস্ক্রিপ্ট)

export class App {
  data = [];
  limitedData = [];
  limit = 5;

  constructor() {
    // উদাহরণস্বরূপ ডেটা তৈরি করা
    this.data = [
      { name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" },
      { name: "Item 4" }, { name: "Item 5" }, { name: "Item 6" },
      { name: "Item 7" }, { name: "Item 8" }, { name: "Item 9" }
    ];
    this.updateLimit();
  }

  updateLimit() {
    // ডেটা লিমিটেশন
    this.limitedData = this.data.slice(0, this.limit);
  }

  increaseLimit() {
    this.limit += 5;
    this.updateLimit();
  }

  decreaseLimit() {
    if (this.limit > 5) {
      this.limit -= 5;
      this.updateLimit();
    }
  }
}

app.html (HTML টেমপ্লেট)

<template>
  <ul>
    <li repeat.for="item of limitedData">${item.name}</li>
  </ul>

  <button click.delegate="decreaseLimit()">Show less</button>
  <button click.delegate="increaseLimit()">Show more</button>

  <p>Showing ${limit} items</p>
</template>

এখানে, slice(0, this.limit) দ্বারা ডেটার একটি নির্দিষ্ট সংখ্যা পর্যন্ত উপাদান প্রদর্শিত হয়। ইউজার "Show more" বা "Show less" বাটনে ক্লিক করে ডেটার সীমা পরিবর্তন করতে পারে।

৩. প্যাগিনেশন এবং লিমিটেশন একসাথে ব্যবহার করা

Aurelia তে আপনি সহজেই প্যাগিনেশন এবং লিমিটেশন একসাথে ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে আপনি নির্দিষ্ট সংখ্যক পৃষ্ঠায় ডেটা লিমিট এবং প্যাগিনেট করতে পারবেন।

উদাহরণ: প্যাগিনেশন এবং লিমিটেশন একসাথে

app.js (জাভাস্ক্রিপ্ট)

export class App {
  currentPage = 1;
  pageSize = 5;
  data = [];
  paginatedData = [];
  limit = 5;

  constructor() {
    // উদাহরণস্বরূপ ডেটা তৈরি করা
    this.data = [
      { name: "Item 1" }, { name: "Item 2" }, { name: "Item 3" },
      { name: "Item 4" }, { name: "Item 5" }, { name: "Item 6" },
      { name: "Item 7" }, { name: "Item 8" }, { name: "Item 9" }
    ];
    this.updatePagination();
  }

  updatePagination() {
    let start = (this.currentPage - 1) * this.pageSize;
    let end = this.currentPage * this.pageSize;
    this.paginatedData = this.data.slice(start, end).slice(0, this.limit);
  }

  nextPage() {
    if ((this.currentPage * this.pageSize) < this.data.length) {
      this.currentPage++;
      this.updatePagination();
    }
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.updatePagination();
    }
  }

  increaseLimit() {
    this.limit += 5;
    this.updatePagination();
  }

  decreaseLimit() {
    if (this.limit > 5) {
      this.limit -= 5;
      this.updatePagination();
    }
  }
}

app.html (HTML টেমপ্লেট)

<template>
  <ul>
    <li repeat.for="item of paginatedData">${item.name}</li>
  </ul>

  <button click.delegate="prevPage()">Previous</button>
  <button click.delegate="nextPage()">Next</button>

  <button click.delegate="decreaseLimit()">Show less</button>
  <button click.delegate="increaseLimit()">Show more</button>

  <p>Showing ${limit} items per page, Page ${currentPage}</p>
</template>

এখানে, updatePagination() ফাংশনে প্যাগিনেশন এবং লিমিটেশন একসাথে ব্যবহৃত হচ্ছে। প্যাগিনেশন জন্য প্রথমে slice() ব্যবহার করা হচ্ছে এবং তারপর লিমিটেশন প্রয়োগ করা হচ্ছে।

উপসংহার

Aurelia তে ডেটা প্যাগিনেশন এবং লিমিটেশন খুব সহজে বাস্তবায়ন করা যায়। slice() এবং repeat.for ডিরেকটিভ ব্যবহার করে আপনি খুব সহজে ডেটা প্যাগিনেট করতে এবং

লিমিট করতে পারবেন। এটি আপনাকে বিশাল ডেটাসেটের সঙ্গে কাজ করার সময় দ্রুত এবং কার্যকরী ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।