HTMX ব্যবহার করে বিভিন্ন ব্যাকএন্ড ফ্রেমওয়ার্ক (যেমন Django, Flask, Express.js) এর মাধ্যমে ডেটা ফেচ করা এবং সাবমিট করা একটি সহজ এবং কার্যকর প্রক্রিয়া। HTMX HTML Attributes ব্যবহার করে AJAX রিকোয়েস্ট, ডাইনামিক কন্টেন্ট লোড এবং ফর্ম ডেটা সাবমিট করতে সক্ষম করে। নিচে HTMX এর মাধ্যমে ব্যাকএন্ড ফ্রেমওয়ার্কের সাথে ডেটা ফেচ এবং সাবমিট করার বিস্তারিত উদাহরণ দেওয়া হলো।
1. HTMX এবং Django ব্যবহার করে ডেটা ফেচ করা এবং সাবমিট করা
Django সেটআপ
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
pip install django
Django প্রোজেক্ট তৈরি করুন:
django-admin startproject myproject
cd myproject
django-admin startapp myapp
Django Views:
# myapp/views.py
from django.shortcuts import render
from django.http import JsonResponse
def index(request):
return render(request, 'index.html')
def fetch_data(request):
data = {"message": "Hello from Django!"}
return JsonResponse(data) # JSON response for fetching data
def submit_data(request):
if request.method == "POST":
username = request.POST.get('username')
return render(request, 'response.html', {'username': username}) # Render response with submitted data
Django URLs:
# myapp/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('fetch-data/', views.fetch_data, name='fetch_data'),
path('submit-data/', views.submit_data, name='submit_data'),
]
Main URLs:
# 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 Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch Data</h2>
<button hx-get="{% url 'fetch_data' %}" hx-target="#data-container">Fetch Data</button>
<div id="data-container">Data will be loaded here...</div>
<h2>Submit Data</h2>
<form hx-post="{% url 'submit_data' %}" hx-target="#response-container">
<input type="text" name="username" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<div id="response-container">Response will be shown here.</div>
</body>
</html>
Response Template (response.html):
<!-- templates/response.html -->
<p>Submitted username: {{ username }}</p>
2. HTMX এবং 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('/fetch-data')
def fetch_data():
data = {"message": "Hello from Flask!"}
return jsonify(data) # JSON response for fetching data
@app.route('/submit-data', methods=['POST'])
def submit_data():
username = request.form.get('username')
return render_template('response.html', username=username) # Render response with submitted data
if __name__ == '__main__':
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 Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch Data</h2>
<button hx-get="/fetch-data" hx-target="#data-container">Fetch Data</button>
<div id="data-container">Data will be loaded here...</div>
<h2>Submit Data</h2>
<form hx-post="/submit-data" hx-target="#response-container">
<input type="text" name="username" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<div id="response-container">Response will be shown here.</div>
</body>
</html>
Response Template (response.html):
<!-- templates/response.html -->
<p>Submitted username: {{ username }}</p>
3. HTMX এবং Express.js ব্যবহার করে ডেটা ফেচ করা এবং সাবমিট করা
Express.js সেটআপ
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
npm install express ejs body-parser
Express.js অ্যাপ্লিকেশন তৈরি করুন:
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.render('index');
});
app.get('/fetch-data', (req, res) => {
res.json({ message: "Hello from Express!" }); // JSON response for fetching data
});
app.post('/submit-data', (req, res) => {
const username = req.body.username;
res.render('response', { username }); // Render response with submitted data
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
HTMX ব্যবহার করে HTML ফাইল:
<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch Data</h2>
<button hx-get="/fetch-data" hx-target="#data-container">Fetch Data</button>
<div id="data-container">Data will be loaded here...</div>
<h2>Submit Data</h2>
<form hx-post="/submit-data" hx-target="#response-container">
<input type="text" name="username" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<div id="response-container">Response will be shown here.</div>
</body>
</html>
Response Template (response.ejs):
<!-- views/response.ejs -->
<p>Submitted username: <%= username %></p>
উপসংহার
HTMX ব্যবহার করে Django, Flask এবং Express.js এর সাথে ডেটা ফেচ করা এবং সাবমিট করা খুবই সহজ। HTMX এর মাধ্যমে AJAX রিকোয়েস্ট এবং ডাইনামিক কন্টেন্ট লোডের প্রক্রিয়া একটি স্বচ্ছন্দ এবং দ্রুত কার্যক্রম তৈরি করে, যা ব্যবহারকারীদের জন্য উন্নত ইউজার এক্সপেরিয়েন্স নিশ্চিত করে।
- Django: URL এবং ভিউ ফাংশনের মাধ্যমে HTMX সংযোগ।
- Flask: সহজ এবং দ্রুত ফ্লাস্ক অ্যাপ্লিকেশন সহ HTMX ইন্টিগ্রেশন।
- Express.js: Node.js পরিবেশে HTMX ব্যবহার করে ডাইনামিক কন্টেন্ট লোড করা।
এই উদাহরণগুলি অনুসরণ করে, আপনি আপনার প্রোজেক্টে HTMX অন্তর্ভুক্ত করতে পারেন এবং ডাইনামিক ও ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন।
Content added By
Read more
