HTMX ব্যবহার করে Server Response এবং Content Update পদ্ধতি খুবই সহজে কার্যকর করা যায়। HTMX সরাসরি AJAX রিকোয়েস্ট পাঠিয়ে সার্ভার থেকে প্রাপ্ত রেসপন্স HTML এর নির্দিষ্ট অংশে রেন্ডার করতে সাহায্য করে। HTMX এর hx-target এবং hx-swap Attributes এর মাধ্যমে HTML এ Content Update করা যায়।
HTMX এর মাধ্যমে Server Response এবং Content Update
নিচে HTMX ব্যবহার করে একটি উদাহরণ দেওয়া হলো যেখানে সার্ভার থেকে প্রাপ্ত রেসপন্স পেজের নির্দিষ্ট অংশে আপডেট করা হয়।
উদাহরণ: সার্ভার রেসপন্সের মাধ্যমে Content Update করা
ধরা যাক আমাদের একটি সার্ভার এন্ডপয়েন্ট /get-data আছে, যা কিছু JSON বা HTML ডেটা ফেরত পাঠায়। আমরা HTMX এর মাধ্যমে এই ডেটা পেজে লোড করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Server Response Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Load Server Data</h2>
<!-- GET রিকোয়েস্টের মাধ্যমে ডেটা ফেচ করা এবং Content Update করা -->
<button hx-get="/get-data" hx-target="#content" hx-swap="innerHTML">Load Data</button>
<div id="content">Data will be loaded here...</div>
</body>
</html>
বিঃদ্রঃ: এখানে /get-data একটি API বা সার্ভার রাউট যা HTMX এর GET রিকোয়েস্টের রেসপন্স প্রদান করবে।
hx-get, hx-target, এবং hx-swap এর ব্যবহার ব্যাখ্যা
hx-get="/get-data": এটি/get-dataURL এ GET রিকোয়েস্ট পাঠাবে।hx-target="#content": সার্ভার থেকে প্রাপ্ত রেসপন্সটি#contentdiv এ রেন্ডার করা হবে।hx-swap="innerHTML": সার্ভার রেসপন্সটি#contentdiv এর ভেতরেinnerHTMLহিসেবে যোগ করা হবে, অর্থাৎ div এর ভিতরের কন্টেন্ট প্রতিস্থাপিত হবে।
সার্ভার রেসপন্স এবং Content Update এর কিছু উদাহরণ
1. সার্ভার রেসপন্স JSON ডেটা হলে
যদি সার্ভার /get-data রাউট থেকে JSON ডেটা প্রদান করে, তবে HTMX এই JSON রেসপন্স সরাসরি HTML-এ রেন্ডার করতে পারে না। এমন ক্ষেত্রে, সার্ভারে JSON কে HTML ফরম্যাটে রূপান্তর করে পাঠাতে হবে।
উদাহরণ:
{
"name": "John Doe",
"email": "john@example.com"
}
সার্ভার সাইড: এই JSON ডেটাকে HTML হিসেবে রেন্ডার করে পাঠানো।
<!-- Server response -->
<div>
<p>Name: John Doe</p>
<p>Email: john@example.com</p>
</div>
2. HTML রেসপন্স হিসেবে সার্ভার ডেটা পাঠানো
এমন ক্ষেত্রে, HTMX সরাসরি HTML রেসপন্স পায় এবং hx-target ও hx-swap ব্যবহার করে নির্দিষ্ট এলিমেন্টে Content Update করে।
উদাহরণ:
<!-- Server response from /get-data -->
<div>
<h3>User Information</h3>
<p>Name: John Doe</p>
<p>Email: john@example.com</p>
</div>
Server-Sent Events (SSE) ব্যবহার করে রিয়েল-টাইম Content Update
HTMX এর hx-sse Attribute ব্যবহার করে সরাসরি সার্ভার-সেন্ট ইভেন্ট (SSE) এর মাধ্যমে রিয়েল-টাইম Content Update করা সম্ভব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX SSE Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Live Data Update</h2>
<!-- SSE এর মাধ্যমে রিয়েল-টাইম আপডেট -->
<div hx-sse="connect:/live-updates" hx-swap="innerHTML">Waiting for live updates...</div>
</body>
</html>
এখানে /live-updates রাউটটি একটি SSE এন্ডপয়েন্ট হিসাবে কাজ করবে, যা নতুন ডেটা এলেই রিয়েল-টাইমে HTML এ রেন্ডার করবে।
Content Update নিয়ন্ত্রণের জন্য hx-swap এর বিভিন্ন মান
hx-swap মান | ব্যাখ্যা |
|---|---|
innerHTML | টার্গেট এলিমেন্টের ভেতরের HTML প্রতিস্থাপিত হবে |
outerHTML | পুরো টার্গেট এলিমেন্ট প্রতিস্থাপিত হবে |
beforebegin | টার্গেট এলিমেন্টের আগে নতুন কন্টেন্ট যোগ হবে |
afterend | টার্গেট এলিমেন্টের পরে নতুন কন্টেন্ট যোগ হবে |
beforeend | টার্গেট এলিমেন্টের শেষে নতুন কন্টেন্ট যোগ হবে |
afterbegin | টার্গেট এলিমেন্টের শুরুতে নতুন কন্টেন্ট যোগ হবে |
উপসংহার
HTMX এর hx-get, hx-post, hx-target, এবং hx-swap Attribute ব্যবহার করে Server Response পেজের নির্দিষ্ট অংশে রেন্ডার করা খুবই সহজ। Server-Sent Events ব্যবহার করে HTMX রিয়েল-টাইম Content Update করার জন্যও ব্যবহার করা যায়। HTMX এর এই Attribute গুলো HTML Attribute-Based Approach ব্যবহার করে ওয়েব পেজের নির্দিষ্ট অংশে নতুন কন্টেন্ট যোগ করার প্রক্রিয়াকে সহজ এবং কার্যকর করে।
Read more
