Custom JavaScript Event হ্যান্ডলিং HTMX এর মাধ্যমে
HTMX একটি শক্তিশালী লাইব্রেরি যা HTML মার্কআপের মাধ্যমে AJAX কল এবং DOM আপডেট করার সুবিধা দেয়। এর সাথে, আপনি JavaScript ব্যবহার করে কাস্টম ইভেন্ট হ্যান্ডলিং করতে পারেন। এটি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করতে সহায়ক।
উদাহরণ
নিচে HTMX এর মাধ্যমে কাস্টম JavaScript ইভেন্ট হ্যান্ডলিং এর একটি উদাহরণ দেয়া হলো যেখানে আমরা একটি To-Do List অ্যাপ তৈরি করব। এখানে, ব্যবহারকারী একটি টাস্ক যোগ করার জন্য একটি ফর্ম ব্যবহার করবেন, এবং আমরা HTMX ইভেন্টগুলি পরিচালনা করার জন্য JavaScript ব্যবহার করব।
১. HTML ফাইল তৈরি করা
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Custom Event Handling</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
</head>
<body>
<h1>My To-Do List</h1>
<form id="task-form" hx-post="/add-task" hx-target="#task-list" hx-swap="beforeend">
<input type="text" name="task" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<h2>Tasks</h2>
<ul id="task-list">
<!-- New tasks will be added here -->
</ul>
<script>
// Custom event handler for form submission
document.getElementById('task-form').addEventListener('htmx:beforeRequest', function(event) {
console.log('Preparing to submit task:', event.target.task.value);
});
document.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'task-list') {
const newTaskItem = event.detail.elt.querySelector('li:last-child');
alert('New task added: ' + newTaskItem.innerText); // Alert the new task
}
});
</script>
</body>
</html>
২. সার্ভার সাইড কোড (Flask)
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form['task']
tasks.append(task)
return f'<li>{task}</li>' # Return new task as a list item
if __name__ == '__main__':
app.run(debug=True)
৩. সার্ভার চালানো
৩.১. টার্মিনালে সার্ভার চালান
python app.py
৪. ব্রাউজারে পরীক্ষা করা
- ব্রাউজারে
http://127.0.0.1:5000/URL এ যান। - একটি টাস্ক যোগ করতে ফর্মটি ব্যবহার করুন এবং "Add Task" বোতামে ক্লিক করুন।
- দেখুন কিভাবে নতুন টাস্কটি
#task-listএ যুক্ত হচ্ছে এবং কাস্টম ইভেন্টগুলি কিভাবে কাজ করছে।
সারসংক্ষেপ
- HTMX: AJAX কলের মাধ্যমে ডাইনামিক কন্টেন্ট লোড করে এবং ইন্টারঅ্যাকটিভিটি যোগ করে।
- JavaScript: HTMX ইভেন্টগুলি হ্যান্ডল করার জন্য ব্যবহার করা হয়, যা ডাইনামিক আচরণ তৈরি করতে সহায়ক।
- কাস্টম ইভেন্ট হ্যান্ডলিং: HTMX এর মাধ্যমে ইভেন্টগুলিকে JavaScript ব্যবহার করে কাস্টমাইজ এবং প্রসারিত করা যায়।
HTMX এবং JavaScript একসাথে ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করতে পারেন।
Read more
