একটি Simple CRUD অ্যাপ্লিকেশন তৈরি করা HTMX ব্যবহার করে

HTMX ব্যবহার করে একটি Simple CRUD অ্যাপ্লিকেশন তৈরি করা

একটি Simple CRUD (Create, Read, Update, Delete) অ্যাপ্লিকেশন তৈরি করতে HTMX ব্যবহার করা খুবই সহজ। এখানে আমরা একটি To-Do List অ্যাপ তৈরি করব যা ব্যবহারকারীদের টাস্ক যোগ, দেখানো, সম্পাদনা এবং মুছতে দেবে। আমরা Flask ফ্রেমওয়ার্ক ব্যবহার করব সার্ভার সাইডের জন্য।

১. পরিবেশ সেটআপ

১.১. প্রয়োজনীয় লাইব্রেরি ইনস্টল করুন

pip install Flask

২. Flask অ্যাপ তৈরি করুন

একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:

from flask import Flask, render_template_string, request, jsonify

app = Flask(__name__)

# In-memory data storage for simplicity
tasks = []

@app.route('/')
def index():
    return render_template_string('''
    <h1>Simple CRUD App with HTMX</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">
        {% for task in tasks %}
            <li id="task-{{ loop.index }}" hx-swap-oob="true">
                {{ task }} <button hx-get="/edit-task/{{ loop.index }}" hx-target="#task-{{ loop.index }}" hx-swap="outerHTML">Edit</button>
                <button hx-delete="/delete-task/{{ loop.index }}" hx-target="#task-{{ loop.index }}" hx-swap="outerHTML">Delete</button>
            </li>
        {% endfor %}
    </ul>

    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
    ''')

@app.route('/add-task', methods=['POST'])
def add_task():
    task = request.form['task']
    tasks.append(task)
    return f'<li id="task-{len(tasks)}">{task} <button hx-get="/edit-task/{len(tasks)}" hx-target="#task-{len(tasks)}" hx-swap="outerHTML">Edit</button> <button hx-delete="/delete-task/{len(tasks)}" hx-target="#task-{len(tasks)}" hx-swap="outerHTML">Delete</button></li>'

@app.route('/edit-task/<int:index>', methods=['GET'])
def edit_task(index):
    task = tasks[index - 1]
    return f'<input type="text" value="{task}" name="task" hx-post="/update-task/{index}" hx-target="#task-{index}" hx-swap="outerHTML"><button type="submit">Update</button>'

@app.route('/update-task/<int:index>', methods=['POST'])
def update_task(index):
    task = request.form['task']
    tasks[index - 1] = task
    return f'<li id="task-{index}">{task} <button hx-get="/edit-task/{index}" hx-target="#task-{index}" hx-swap="outerHTML">Edit</button> <button hx-delete="/delete-task/{index}" hx-target="#task-{index}" hx-swap="outerHTML">Delete</button></li>'

@app.route('/delete-task/<int:index>', methods=['DELETE'])
def delete_task(index):
    tasks.pop(index - 1)
    return f'<li id="task-{index}" style="display:none;"></li>'  # Hide the element

if __name__ == '__main__':
    app.run(debug=True)

৩. ব্রাউজারে পরীক্ষা করা

Flask সার্ভার চালান:

python app.py

ব্রাউজারে http://127.0.0.1:5000/ URL এ যান।

নতুন টাস্ক যোগ করতে ফর্মটি ব্যবহার করুন।

টাস্ক সম্পাদনা এবং মুছে ফেলার জন্য বোতামগুলি ব্যবহার করুন।

সারসংক্ষেপ

• CRUD ফাংশনালিটি: HTMX ব্যবহার করে টাস্ক তৈরি, পড়া, সম্পাদনা এবং মুছে ফেলার কার্যক্রম।
• AJAX কল: HTMX AJAX কলের মাধ্যমে ডেটা লোড এবং আপডেট করে, যা পৃষ্ঠার সম্পূর্ণ রিফ্রেশ ছাড়াই কাজ করে।
• ইন্টারঅ্যাকটিভ ডিজাইন: HTMX এর মাধ্যমে একটি সহজ, ইন্টারঅ্যাকটিভ UI তৈরি করা হয়েছে যা ব্যবহারকারীদের জন্য একটি ভাল অভিজ্ঞতা প্রদান করে।

এই প্রজেক্টটি HTMX এর সাথে Flask ব্যবহার করে CRUD অ্যাপ্লিকেশন তৈরি করার একটি বাস্তব উদাহরণ। আপনি এই ভিত্তিতে আপনার প্রকল্পগুলি আরও বাড়িয়ে তুলতে পারেন।