প্র্যাকটিস প্রোজেক্টস

HTMX ব্যবহার করে প্র্যাকটিস প্রোজেক্টস

HTMX এর মাধ্যমে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন। এখানে কিছু প্র্যাকটিস প্রোজেক্ট আইডিয়া দেওয়া হলো, যা HTMX এর সুবিধা এবং কার্যকারিতা বুঝতে সাহায্য করবে।

১. To-Do List অ্যাপ

বর্ণনা:

একটি সরল To-Do List অ্যাপ তৈরি করুন যেখানে ব্যবহারকারীরা নতুন টাস্ক যোগ করতে পারেন, টাস্কগুলি সম্পন্ন করতে পারেন এবং মুছে ফেলতে পারেন। HTMX ব্যবহার করে AJAX কলের মাধ্যমে টাস্কগুলি ডাইনামিকভাবে আপডেট করুন।

ফিচারসমূহ:

• নতুন টাস্ক যোগ করার জন্য একটি ফর্ম।
• টাস্ক সম্পন্ন করার জন্য চেকবক্স।
• টাস্ক মুছে ফেলার জন্য বোতাম।
• AJAX কলের মাধ্যমে টাস্ক তালিকা আপডেট করা।

২. রিয়েল-টাইম অনুসন্ধান

বর্ণনা:

একটি রিয়েল-টাইম অনুসন্ধান অ্যাপ তৈরি করুন যেখানে ব্যবহারকারীরা ইনপুট ফিল্ডে কিছু টাইপ করলে সার্ভার থেকে অনুসন্ধানের ফলাফল পাবে। HTMX ব্যবহার করে AJAX রিকোয়েস্টের মাধ্যমে ফলাফলগুলি ডাইনামিকভাবে আপডেট করুন।

ফিচারসমূহ:

• অনুসন্ধান ইনপুট ফিল্ড।
• সার্ভার থেকে অনুসন্ধান ফলাফলগুলি লোড করার জন্য HTMX।
• ফলাফলগুলি একটি তালিকা আকারে প্রদর্শন।

৩. সংবাদ ফিড

বর্ণনা:

একটি সংবাদ ফিড তৈরি করুন যেখানে সার্ভার থেকে সর্বশেষ সংবাদগুলি লোড হয়। HTMX ব্যবহার করে ব্যবহারকারীরা বোতামে ক্লিক করে আরো সংবাদ লোড করতে পারেন।

ফিচারসমূহ:

• সংবাদ শিরোনাম এবং বিবরণ।
• "আরও লোড করুন" বোতাম।
• AJAX কলের মাধ্যমে নতুন সংবাদ লোড করা।

৪. লাইভ কমেন্ট সেকশন

বর্ণনা:

একটি লাইভ কমেন্ট সেকশন তৈরি করুন যেখানে ব্যবহারকারীরা একটি পোস্টে মন্তব্য করতে পারেন এবং অন্য ব্যবহারকারীদের মন্তব্যগুলি দেখতে পারেন। HTMX ব্যবহার করে মন্তব্যগুলি রিয়েল-টাইমে আপডেট করুন।

ফিচারসমূহ:

• মন্তব্য ফর্ম।
• মন্তব্যের তালিকা।
• নতুন মন্তব্যের জন্য AJAX কল।

৫. ইমেজ গ্যালারি

বর্ণনা:

একটি ইমেজ গ্যালারি তৈরি করুন যেখানে ব্যবহারকারীরা একটি বোতামে ক্লিক করে আরো ছবি লোড করতে পারেন। HTMX ব্যবহার করে গ্যালারিতে নতুন ছবি ডাইনামিকভাবে যোগ করুন।

ফিচারসমূহ:

• "আরও ছবি লোড করুন" বোতাম।
• AJAX কলের মাধ্যমে নতুন ছবি লোড করা।
• ইমেজ প্রদর্শনের জন্য গ্রিড লেআউট।

৬. ফর্মের ডায়নামিক ক্ষেত্র

বর্ণনা:

একটি ফর্ম তৈরি করুন যেখানে ব্যবহারকারীরা নির্দিষ্ট ইনপুটের উপর ভিত্তি করে নতুন ক্ষেত্র যুক্ত করতে পারেন। HTMX ব্যবহার করে ব্যবহারকারীর ইনপুটের ভিত্তিতে ফর্মের ক্ষেত্রগুলি আপডেট করুন।

ফিচারসমূহ:

• ফর্ম ইনপুট।
• নতুন ক্ষেত্র যোগ করার জন্য বোতাম।
• AJAX কলের মাধ্যমে নতুন ক্ষেত্র লোড করা।

৭. লাইভ ক্যালেন্ডার

বর্ণনা:

একটি লাইভ ক্যালেন্ডার তৈরি করুন যেখানে ব্যবহারকারীরা ক্যালেন্ডারের তারিখ নির্বাচন করতে পারেন এবং তারিখের উপর ভিত্তি করে ডেটা দেখাতে পারেন। HTMX ব্যবহার করে ডেটা লোড করুন।

ফিচারসমূহ:

• ক্যালেন্ডার।
• তারিখ নির্বাচন।
• AJAX কলের মাধ্যমে নির্বাচিত তারিখের ডেটা দেখানো।

৮. শপিং কার্ট

বর্ণনা:

একটি শপিং কার্ট অ্যাপ তৈরি করুন যেখানে ব্যবহারকারীরা পণ্য নির্বাচন করতে পারেন এবং তাদের কার্টে যুক্ত করতে পারেন। HTMX ব্যবহার করে শপিং কার্টের সামগ্রী আপডেট করুন।

ফিচারসমূহ:

• পণ্যের তালিকা।
• "কার্টে যোগ করুন" বোতাম।
• AJAX কলের মাধ্যমে কার্ট আপডেট করা।

সারসংক্ষেপ

এই প্র্যাকটিস প্রোজেক্টগুলি HTMX এর ফিচার এবং কার্যকারিতা বুঝতে সহায়তা করবে। HTMX ব্যবহার করে AJAX কল, DOM আপডেট, এবং ডাইনামিক ইন্টারঅ্যাকশন তৈরি করার সময় আপনার দক্ষতা বৃদ্ধি পাবে। এই প্রকল্পগুলি আপনার জন্য বাস্তবায়ন এবং উন্নয়ন করার সুযোগ সরবরাহ করবে।

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 অ্যাপ্লিকেশন তৈরি করার একটি বাস্তব উদাহরণ। আপনি এই ভিত্তিতে আপনার প্রকল্পগুলি আরও বাড়িয়ে তুলতে পারেন।

AJAX রিকোয়েস্ট এবং পার্সিয়াল পেজ আপডেট ব্যবহার করে ফর্মকে ডাইনামিক করা একটি কার্যকরী উপায়। HTMX ব্যবহার করে, আপনি পেজ রিফ্রেশ না করে ইনপুট ফিল্ড এবং অন্যান্য অংশগুলি ডাইনামিকভাবে আপডেট করতে পারেন। নিচে HTMX এর সাহায্যে AJAX রিকোয়েস্ট এবং পার্সিয়াল পেজ আপডেটের মাধ্যমে একটি ডাইনামিক ফর্ম তৈরি করার উদাহরণ দেওয়া হলো।

উদাহরণ: HTMX দিয়ে একটি ডাইনামিক ফর্ম তৈরি করা

1. প্রোজেক্ট সেটআপ

ধরি, আমরা একটি ফর্ম তৈরি করব যেখানে ব্যবহারকারী একটি শহরের নাম প্রদান করবে এবং এটি একটি AJAX রিকোয়েস্টের মাধ্যমে শহরের আবহাওয়া ডেটা নিয়ে আসবে।

Flask এর মাধ্যমে উদাহরণ

Flask ইনস্টল করুন:

pip install flask

Flask অ্যাপ্লিকেশন তৈরি করুন:

app.py:

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/get-weather', methods=['GET'])
def get_weather():
    city = request.args.get('city')
    # For simplicity, returning dummy data. In a real app, you could fetch data from a weather API.
    weather_data = {
        'New York': 'Sunny, 25°C',
        'London': 'Rainy, 15°C',
        'Tokyo': 'Cloudy, 20°C'
    }
    return jsonify({'weather': weather_data.get(city, 'City not found')})

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

2. HTMX ব্যবহার করে HTML ফাইল তৈরি করুন

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form Example</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>

    <h2>Check Weather</h2>
    <form onsubmit="return false;">
        <input type="text" id="city" placeholder="Enter city name" required>
        <button hx-get="/get-weather" hx-target="#weather-result" hx-params="city">Get Weather</button>
    </form>

    <div id="weather-result">Weather information will be displayed here...</div>

    <script>
        document.addEventListener('htmx:beforeRequest', function(event) {
            const city = document.getElementById('city').value;
            event.detail.parameters = { city: city };  // Pass city name to the server
        });
    </script>

</body>
</html>

3. HTMX ব্যবহার করে ডাইনামিক ফর্মের কাজের ব্যাখ্যা

• Form Handling: ফর্মে শহরের নাম প্রবেশ করার পরে "Get Weather" বাটনে ক্লিক করলে, HTMX একটি GET রিকোয়েস্ট পাঠায় /get-weather URL এ।
• Dynamic Parameter: HTMX hx-params ব্যবহার করে ইনপুট ফিল্ডের মান (শহরের নাম) সার্ভারে পাঠায়।
• AJAX Request: AJAX রিকোয়েস্টের মাধ্যমে সার্ভার থেকে আবহাওয়ার তথ্য পাওয়া যায়।
• Partial Update: সার্ভার থেকে প্রাপ্ত আবহাওয়ার তথ্য #weather-result ID যুক্ত ডিভে প্রদর্শিত হয়, যা পেজের অন্য অংশে প্রভাব ফেলে না।

4. HTML Response Handling

JSON Response Example:

# Continue from the previous Flask app

@app.route('/get-weather', methods=['GET'])
def get_weather():
    city = request.args.get('city')
    weather_data = {
        'New York': 'Sunny, 25°C',
        'London': 'Rainy, 15°C',
        'Tokyo': 'Cloudy, 20°C'
    }
    return jsonify({'weather': weather_data.get(city, 'City not found')})

# Update the AJAX handling in the HTMX part if needed.

5. টেস্টিং এবং রান করা

Flask অ্যাপ্লিকেশন চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

bash

Copy code

python app.py

এখন আপনার ব্রাউজারে http://127.0.0.1:5000 এ যান। শহরের নাম লিখে "Get Weather" বাটনে ক্লিক করলে, সঠিক আবহাওয়ার তথ্য ডিসপ্লে হবে।

উপসংহার

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

HTMX এবং WebSocket ব্যবহার করে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন

HTMX এবং WebSocket এর সমন্বয়ে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করা সম্ভব। এই প্রকল্পে আমরা Flask ফ্রেমওয়ার্ক ব্যবহার করব এবং Flask-SocketIO লাইব্রেরি দিয়ে WebSocket বাস্তবায়ন করব। HTMX ব্যবহার করে আমরা সহজেই AJAX কল করতে পারব।

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

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

pip install Flask Flask-SocketIO

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

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

from flask import Flask, render_template_string
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
socketio = SocketIO(app)

@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>Real-time Chat App</title>
        <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
        <script src="https://unpkg.com/htmx.org@1.8.4"></script>
        <style>
            body {
                font-family: Arial, sans-serif;
            }
            #messages {
                border: 1px solid #ccc;
                padding: 10px;
                height: 300px;
                overflow-y: scroll;
            }
            .message {
                margin: 5px 0;
            }
        </style>
    </head>
    <body>
        <h1>Real-time Chat App</h1>
        <div id="messages"></div>
        <form id="chat-form" onsubmit="sendMessage(event)">
            <input type="text" id="message" placeholder="Type a message..." required>
            <button type="submit">Send</button>
        </form>

        <script>
            const socket = io();

            socket.on('message', function(data) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'message';
                messageDiv.innerText = data;
                document.getElementById('messages').appendChild(messageDiv);
                // Scroll to the bottom of the messages
                const messagesDiv = document.getElementById('messages');
                messagesDiv.scrollTop = messagesDiv.scrollHeight;
            });

            function sendMessage(event) {
                event.preventDefault();
                const messageInput = document.getElementById('message');
                const message = messageInput.value;
                socket.emit('send_message', message);
                messageInput.value = '';
            }
        </script>
    </body>
    </html>
    ''')

@socketio.on('send_message')
def handle_message(msg):
    emit('message', msg, broadcast=True)  # Broadcast message to all clients

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

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

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

python app.py

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

একটি ট্যাব খুলুন এবং মেসেজ টাইপ করুন। নতুন ট্যাব খুলে মেসেজ পাঠান এবং দেখুন কিভাবে রিয়েল-টাইমে চ্যাট আপডেট হচ্ছে।

সারসংক্ষেপ

• HTMX এবং WebSocket: HTMX ব্যবহার করে AJAX কার্যকলাপ এবং WebSocket দিয়ে রিয়েল-টাইম ডেটা পাঠানোর ক্ষমতা।
• ইন্টারঅ্যাকটিভ UI: ব্যবহারকারীরা সহজেই মেসেজ পাঠাতে এবং অন্য ব্যবহারকারীদের মেসেজ দেখতে সক্ষম।
• Flask-SocketIO: WebSocket সংযোগের জন্য ব্যবহৃত হয়, যা ডেটা দ্রুত প্রেরণ করতে সক্ষম।

এই চ্যাট অ্যাপ্লিকেশনটি HTMX এবং WebSocket এর সমন্বয়ে রিয়েল-টাইম যোগাযোগের একটি বাস্তব উদাহরণ। আপনি এই ভিত্তিতে আপনার নিজস্ব ফিচার এবং কার্যকারিতা যুক্ত করতে পারেন।

HTMX এর সাথে Django এবং Flask ইন্টিগ্রেট করে ডাটাবেস CRUD (Create, Read, Update, Delete) অপারেশন বাস্তবায়ন করা সম্ভব। এই প্রক্রিয়া সাধারণত একটি ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে যা AJAX রিকোয়েস্টের মাধ্যমে দ্রুত কাজ করে। নিচে Django এবং Flask উভয়ের জন্য CRUD অপারেশন বাস্তবায়নের উদাহরণ দেওয়া হলো।

1. Django এর সাথে HTMX ব্যবহার করে CRUD অপারেশন

ধাপ ১: Django সেটআপ

প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:

pip install django

Django প্রোজেক্ট তৈরি করুন:

django-admin startproject myproject
cd myproject
django-admin startapp myapp

ধাপ ২: মডেল তৈরি করুন

myapp/models.py:

from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

ধাপ ৩: মাইগ্রেশন এবং ডাটাবেস তৈরি করুন

python manage.py makemigrations
python manage.py migrate

ধাপ ৪: Django Views তৈরি করুন

myapp/views.py:

from django.shortcuts import render, redirect
from django.http import JsonResponse
from .models import Item

def index(request):
    items = Item.objects.all()
    return render(request, 'index.html', {'items': items})

def add_item(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        Item.objects.create(name=name)
        return redirect('index')

def delete_item(request, item_id):
    item = Item.objects.get(id=item_id)
    item.delete()
    return redirect('index')

ধাপ ৫: Django URLs সেটআপ করুন

myapp/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('add-item/', views.add_item, name='add_item'),
    path('delete-item/<int:item_id>/', views.delete_item, name='delete_item'),
]

myproject/urls.py:

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

ধাপ ৬: HTMX ব্যবহার করে HTML ফাইল তৈরি করুন

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django HTMX CRUD Example</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>

    <h2>Items List</h2>
    <form hx-post="{% url 'add_item' %}" hx-target="#item-list" hx-swap="innerHTML">
        <input type="text" name="name" placeholder="Enter item name" required>
        <button type="submit">Add Item</button>
    </form>

    <div id="item-list">
        <ul>
            {% for item in items %}
                <li>
                    {{ item.name }} 
                    <button hx-get="{% url 'delete_item' item.id %}" hx-target="#item-list" hx-swap="innerHTML">Delete</button>
                </li>
            {% endfor %}
        </ul>
    </div>

</body>
</html>

2. Flask এর সাথে HTMX ব্যবহার করে CRUD অপারেশন

ধাপ ১: Flask সেটআপ

প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:

pip install flask flask-sqlalchemy

ধাপ ২: Flask অ্যাপ্লিকেশন তৈরি করুন

app.py:

from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///items.db'
db = SQLAlchemy(app)

class Item(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)

@app.route('/')
def index():
    items = Item.query.all()
    return render_template('index.html', items=items)

@app.route('/add-item', methods=['POST'])
def add_item():
    name = request.form.get('name')
    new_item = Item(name=name)
    db.session.add(new_item)
    db.session.commit()
    return redirect('/')

@app.route('/delete-item/<int:item_id>', methods=['GET'])
def delete_item(item_id):
    item = Item.query.get(item_id)
    db.session.delete(item)
    db.session.commit()
    return redirect('/')

if __name__ == '__main__':
    db.create_all()  # Create database and tables
    app.run(debug=True)

ধাপ ৩: HTMX ব্যবহার করে HTML ফাইল তৈরি করুন

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask HTMX CRUD Example</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>

    <h2>Items List</h2>
    <form hx-post="/add-item" hx-target="#item-list" hx-swap="innerHTML">
        <input type="text" name="name" placeholder="Enter item name" required>
        <button type="submit">Add Item</button>
    </form>

    <div id="item-list">
        <ul>
            {% for item in items %}
                <li>
                    {{ item.name }} 
                    <button hx-get="/delete-item/{{ item.id }}" hx-target="#item-list" hx-swap="innerHTML">Delete</button>
                </li>
            {% endfor %}
        </ul>
    </div>

</body>
</html>

3. CRUD অপারেশন টেস্ট করা

Django:

1. Django সার্ভার চালান:

python manage.py runserver

1. ব্রাউজারে যান: http://127.0.0.1:8000

Flask:

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

python app.py

1. ব্রাউজারে যান: http://127.0.0.1:5000

উপসংহার

HTMX এর সাথে Django এবং Flask ব্যবহার করে CRUD অপারেশন তৈরি করা খুবই সহজ। HTMX এর মাধ্যমে AJAX রিকোয়েস্টের মাধ্যমে ডাইনামিক কন্টেন্ট লোড এবং ফর্ম ডেটা সাবমিট করা যায়।

• Django: CRUD অপারেশন তৈরি করা।
• Flask: CRUD অপারেশন তৈরি করা।

এই উদাহরণগুলি অনুসরণ করে, আপনি আপনার প্রোজেক্টে HTMX অন্তর্ভুক্ত করতে পারেন এবং ইন্টারঅ্যাকটিভ CRUD ফিচার তৈরি করতে পারেন।