HTMX ব্যবহার করে উদাহরণসহ ডাইনামিক কন্টেন্ট লোড করা এবং ডাটা সাবমিট করা
এই উদাহরণে আমরা HTMX ব্যবহার করে একটি সাধারণ ওয়েব পৃষ্ঠায় ডাইনামিক কন্টেন্ট লোড এবং ডাটা সাবমিট করার প্রক্রিয়া দেখাব। আমরা একটি To-Do List অ্যাপ তৈরি করব যেখানে ব্যবহারকারীরা টাস্ক যুক্ত করতে এবং লোড করা টাস্কগুলি দেখতে পারবেন।
১. পরিবেশ সেটআপ
১.১. 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>To-Do List Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
</head>
<body>
<h1>My To-Do List</h1>
<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">
<!-- Dynamic content will be loaded here -->
</ul>
<script>
// This part can be integrated with a backend to load existing tasks
</script>
</body>
</html>
২. সার্ভার সাইড সেটআপ
২.১. Python Flask ব্যবহার করে সার্ভার তৈরি করুন
আপনার প্রজেক্টের জন্য app.py নামে একটি ফাইল তৈরি করুন এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
return render_template_string('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h1>My To-Do List</h1>
<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">
{% for task in tasks %}
<li>{{ task }}</li>
{% endfor %}
</ul>
</body>
</html>
''')
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form['task']
tasks.append(task)
return f'<li>{task}</li>'
if __name__ == '__main__':
app.run(debug=True)
৩. সার্ভার চালানো
৩.১. সার্ভার চালানোর জন্য টার্মিনালে যান
python app.py
- সার্ভার চালানোর পর, এটি
http://127.0.0.1:5000/ঠিকানায় উপলব্ধ হবে।
৪. ব্রাউজারে পরীক্ষা করা
- ব্রাউজারে
http://127.0.0.1:5000/URL এ যান। - "Add Task" ফর্মে একটি টাস্ক লিখুন এবং বোতামে ক্লিক করুন।
- দেখুন কিভাবে নতুন টাস্কটি তালিকায় যুক্ত হচ্ছে।
সারসংক্ষেপ
- ডাইনামিক কন্টেন্ট লোডিং: HTMX ব্যবহার করে আপনি AJAX কলের মাধ্যমে সার্ভার থেকে নতুন কন্টেন্ট লোড করতে পারেন।
- ডাটা সাবমিট: ফর্ম সাবমিশনের মাধ্যমে ব্যবহারকারীরা ডেটা পাঠাতে পারেন এবং এটি পেজ রিফ্রেশ ছাড়াই তালিকায় যুক্ত হয়।
- Flask সার্ভার: Flask ব্যবহার করে সার্ভার সাইডে টাস্ক পরিচালনার সহজ প্রক্রিয়া তৈরি করা হয়েছে।
HTMX এর সাহায্যে এটি একটি কার্যকরী এবং ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করার একটি সহজ উদাহরণ। আপনি এই কনসেপ্টগুলিকে আপনার নিজস্ব প্রকল্পে প্রয়োগ করতে পারেন।
Content added By
Read more
