🌐 টিউটোরিয়াল ২: HTTP Methods API সহ বাস্তব উদাহরণ

📚 এই টিউটোরিয়ালে যা শিখবেন:

✅ প্রতিটি HTTP Method এর বাস্তব API উদাহরণ
✅ Request Data এবং Response Data কিভাবে কাজ করে
✅ HTMX এ API Integration এর সম্পূর্ণ প্রক্রিয়া
✅ Real-world scenarios এবং practical examples
✅ Error handling এবং success responses

🔧 API Base URL:

https://api.example.com/v1

নোট: এই tutorial এ আমরা mock API responses ব্যবহার করব যা real API এর মতো কাজ করবে।

⏱️ সময়: ৬০-৯০ মিনিট | 📋 প্রয়োজন: টিউটোরিয়াল ১ সম্পন্ন

📥 GET Method – ডেটা আনার জন্য

🎯 GET Method কি এবং কেন ব্যবহার করবেন?

GET Method হল HTTP এর সবচেয়ে common এবং নিরাপদ method। এটি server থেকে data retrieve করার জন্য ব্যবহার হয়।

📖 GET Method এর বৈশিষ্ট্য:

✅ Safe: Server এর data পরিবর্তন করে না
✅ Idempotent: একাধিকবার চালালেও same result
✅ Cacheable: Browser cache করতে পারে
✅ URL Parameters: Data URL এ query string হিসেবে পাঠায়

🔧 কখন GET ব্যবহার করবেন:

📄 Page content load করার জন্য
🔍 Search results দেখানোর জন্য
👤 User profile information আনার জন্য
📦 Product details load করার জন্য
📊 Dashboard data load করার জন্য

🌐 API Example 1: User List

📡 API Endpoint:

GET /api/users

📤 Request Information:

Method	GET
URL	https://api.example.com/v1/users
Headers	Accept: application/json
Body	কোন body data নেই (GET method এ body থাকে না)

📥 API Response Example:


{
  "status": "success",
  "message": "ব্যবহারকারীদের তালিকা সফলভাবে পাওয়া গেছে",
  "data": [
    {
      "id": 1,
      "name": "মোহাম্মদ রহিম",
      "email": "rahim@example.com",
      "phone": "+8801712345678",
      "status": "active",
      "created_at": "2024-01-10T08:30:00Z"
    },
    {
      "id": 2,
      "name": "ফাতিমা খাতুন",
      "email": "fatima@example.com",
      "phone": "+8801987654321", 
      "status": "active",
      "created_at": "2024-01-12T10:15:00Z"
    }
  ],
  "pagination": {
    "total": 2,
    "page": 1,
    "per_page": 10,
    "total_pages": 1
  }
}

💻 HTMX Implementation:


<!-- HTML Button -->
<button hx-get="/api/users" 
        hx-target="#users-result"
        hx-indicator="#users-loading"
        class="btn btn-success">
    📥 ব্যবহারকারীদের তালিকা দেখুন
</button>

<!-- Loading Indicator -->
<div id="users-loading" style="display: none;">
    🔄 ব্যবহারকারীদের তথ্য লোড হচ্ছে...
</div>

<!-- Result Container -->
<div id="users-result">
    এখানে ব্যবহারকারীদের তালিকা দেখাবে...
</div>

🎯 HTMX Attributes ব্যাখ্যা:

hx-get=”/api/users”: GET request পাঠাবে /api/users endpoint এ
hx-target=”#users-result”: Response টি #users-result element এ দেখাবে
hx-indicator=”#users-loading”: Request চলাকালীন loading indicator দেখাবে

🔍 API Example 2: Search Functionality

📡 API Endpoint:

GET /api/search?q=query&limit=10

📤 Request with Query Parameters:

Method	GET
URL	https://api.example.com/v1/search?q=রহিম&limit=10
Query Params	q=রহিম, limit=10

📥 Search API Response:


{
  "status": "success",
  "message": "সার্চ সফল",
  "query": "রহিম",
  "results": [
    {
      "id": 1,
      "name": "মোহাম্মদ রহিম",
      "email": "rahim@example.com",
      "match_score": 0.95,
      "highlight": "<mark>রহিম</mark>"
    }
  ],
  "search_info": {
    "total_found": 1,
    "search_time": "0.05s",
    "page": 1,
    "limit": 10
  }
}

💻 HTMX Search Implementation:


<!-- Search Input -->
<input type="text" 
       name="search" 
       placeholder="নাম দিয়ে খুঁজুন..."
       hx-get="/api/search"
       hx-target="#search-results"
       hx-trigger="keyup changed delay:500ms"
       hx-indicator="#search-loading"
       class="form-control">

<!-- Search Loading -->
<div id="search-loading" style="display: none;">
    🔍 খোঁজা হচ্ছে...
</div>

<!-- Search Results -->
<div id="search-results">
    টাইপ করুন খোঁজার জন্য...
</div>

🎯 Advanced HTMX Features:

hx-trigger=”keyup changed delay:500ms”: ৫০০ms delay এর পর search করবে
changed: শুধুমাত্র value change হলে trigger হবে
delay: Debouncing এর জন্য ব্যবহার

📤 POST Method – নতুন ডেটা তৈরির জন্য

🎯 POST Method কি এবং কেন ব্যবহার করবেন?

POST Method server এ নতুন data পাঠানোর জন্য ব্যবহার হয়। এটি resource তৈরি করার primary method।

📖 POST Method এর বৈশিষ্ট্য:

❌ Not Safe: Server এর data পরিবর্তন করে
❌ Not Idempotent: প্রতিবার নতুন result
❌ Not Cacheable: Browser cache করে না
✅ Request Body: Data body তে পাঠায়, URL এ নয়

🔧 কখন POST ব্যবহার করবেন:

👤 নতুন user registration
📝 Form submission
💬 Comment/review submit
📁 File upload
🔐 Login/authentication

👤 API Example: User Registration

📡 API Endpoint:

POST /api/users

📤 Request Information:

Method	POST
URL	https://api.example.com/v1/users
Content-Type	application/json
Body Data	JSON format এ user information

📦 Request Body Example:


{
  "name": "নতুন ব্যবহারকারী",
  "email": "newuser@example.com",
  "phone": "+8801712345678",
  "address": "ঢাকা, বাংলাদেশ",
  "password": "securePassword123"
}

📥 Success Response:


{
  "status": "success",
  "message": "ব্যবহারকারী সফলভাবে তৈরি হয়েছে",
  "data": {
    "id": 3,
    "name": "নতুন ব্যবহারকারী",
    "email": "newuser@example.com",
    "phone": "+8801712345678",
    "address": "ঢাকা, বাংলাদেশ",
    "status": "active",
    "created_at": "2024-01-15T10:30:00Z",
    "updated_at": "2024-01-15T10:30:00Z"
  },
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

💻 HTMX Form Implementation:


<form hx-post="/api/users" 
      hx-target="#create-result"
      hx-indicator="#create-loading"
      class="user-form">

    <div class="form-group">
        <label>নাম:</label>
        <input type="text" name="name" 
               placeholder="আপনার নাম লিখুন" 
               required class="form-control">
    </div>

    <div class="form-group">
        <label>ইমেইল:</label>
        <input type="email" name="email" 
               placeholder="আপনার ইমেইল লিখুন" 
               required class="form-control">
    </div>

    <div class="form-group">
        <label>ফোন:</label>
        <input type="tel" name="phone" 
               placeholder="+8801712345678" 
               class="form-control">
    </div>

    <div class="form-group">
        <label>ঠিকানা:</label>
        <textarea name="address" 
                  placeholder="আপনার ঠিকানা লিখুন"
                  class="form-control"></textarea>
    </div>

    <div class="form-group">
        <label>পাসওয়ার্ড:</label>
        <input type="password" name="password" 
               placeholder="নিরাপদ পাসওয়ার্ড দিন" 
               required class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">
        👤 নতুন ব্যবহারকারী তৈরি করুন
    </button>
</form>

<!-- Loading Indicator -->
<div id="create-loading" style="display: none;">
    👤 ব্যবহারকারী তৈরি হচ্ছে...
</div>

<!-- Result Container -->
<div id="create-result">
    ফর্ম পূরণ করে submit করুন...
</div>

🎯 POST Method এর গুরুত্বপূর্ণ বিষয়:

Form Validation: Client-side এবং server-side validation প্রয়োজন
Security: CSRF protection এবং input sanitization
Error Handling: Validation errors এবং server errors handle করা
Success Feedback: User কে success message দেখানো

🔄 PUT Method – সম্পূর্ণ ডেটা আপডেটের জন্য

🎯 PUT Method কি এবং কেন ব্যবহার করবেন?

PUT Method existing resource সম্পূর্ণভাবে replace করার জন্য ব্যবহার হয়।

📖 PUT Method এর বৈশিষ্ট্য:

❌ Not Safe: Server এর data পরিবর্তন করে
✅ Idempotent: একাধিকবার চালালেও same result
❌ Not Cacheable: Browser cache করে না
🔄 Complete Replace: পুরো resource replace করে

⚖️ PUT vs POST এর পার্থক্য:

বিষয়	PUT	POST
উদ্দেশ্য	Existing resource update	নতুন resource তৈরি
Idempotent	✅ হ্যাঁ	❌ না
Data	Complete object	New object data

✏️ API Example: Profile Update

📡 API Endpoint:

PUT /api/users/123

📤 Request Information:

Method	PUT
URL	https://api.example.com/v1/users/123
Content-Type	application/json
Body Data	সম্পূর্ণ user object (সব fields)

📦 Request Body (Complete User Object):


{
  "name": "আপডেটেড নাম",
  "email": "updated@example.com",
  "phone": "+8801987654321",
  "address": "চট্টগ্রাম, বাংলাদেশ",
  "status": "active",
  "bio": "আমি একজন সফটওয়্যার ডেভেলপার",
  "avatar": "https://example.com/avatar.jpg"
}

📥 Success Response:


{
  "status": "success",
  "message": "ব্যবহারকারীর তথ্য সফলভাবে আপডেট হয়েছে",
  "data": {
    "id": 123,
    "name": "আপডেটেড নাম",
    "email": "updated@example.com",
    "phone": "+8801987654321",
    "address": "চট্টগ্রাম, বাংলাদেশ",
    "status": "active",
    "bio": "আমি একজন সফটওয়্যার ডেভেলপার",
    "avatar": "https://example.com/avatar.jpg",
    "created_at": "2024-01-10T08:30:00Z",
    "updated_at": "2024-01-15T11:45:00Z"
  }
}

💻 HTMX Update Form:


<form hx-put="/api/users/123" 
      hx-target="#update-result"
      hx-indicator="#update-loading"
      class="update-form">

    <input type="hidden" name="user_id" value="123">

    <div class="form-group">
        <label>নাম:</label>
        <input type="text" name="name" 
               value="মোহাম্মদ রহিম" 
               required class="form-control">
    </div>

    <div class="form-group">
        <label>ইমেইল:</label>
        <input type="email" name="email" 
               value="rahim@example.com" 
               required class="form-control">
    </div>

    <div class="form-group">
        <label>ফোন:</label>
        <input type="tel" name="phone" 
               value="+8801712345678" 
               class="form-control">
    </div>

    <div class="form-group">
        <label>ঠিকানা:</label>
        <textarea name="address" class="form-control">ঢাকা, বাংলাদেশ</textarea>
    </div>

    <div class="form-group">
        <label>স্ট্যাটাস:</label>
        <select name="status" class="form-control">
            <option value="active" selected>সক্রিয়</option>
            <option value="inactive">নিষ্ক্রিয়</option>
            <option value="suspended">স্থগিত</option>
        </select>
    </div>

    <div class="form-group">
        <label>বায়ো:</label>
        <textarea name="bio" class="form-control" 
                  placeholder="নিজের সম্পর্কে লিখুন"></textarea>
    </div>

    <button type="submit" class="btn btn-warning">
        🔄 সম্পূর্ণ প্রোফাইল আপডেট করুন
    </button>
</form>

<div id="update-loading" style="display: none;">
    🔄 প্রোফাইল আপডেট হচ্ছে...
</div>

<div id="update-result">
    ফর্ম পরিবর্তন করে আপডেট করুন...
</div>

💡 PUT Method এর গুরুত্বপূর্ণ বিষয়:

Complete Data: সব fields পাঠাতে হয় (missing fields null হয়ে যেতে পারে)
Idempotent: একই request একাধিকবার পাঠালেও same result
Resource Identification: URL এ resource ID specify করতে হয়
Authorization: User এর permission check করতে হয়

🗑️ DELETE Method – ডেটা মুছে ফেলার জন্য

🎯 DELETE Method কি এবং কেন ব্যবহার করবেন?

DELETE Method server থেকে resource স্থায়ীভাবে মুছে ফেলার জন্য ব্যবহার হয়।

📖 DELETE Method এর বৈশিষ্ট্য:

❌ Not Safe: Server এর data permanently delete করে
✅ Idempotent: একাধিকবার চালালেও same result
❌ Not Cacheable: Browser cache করে না
⚠️ Irreversible: সাধারণত undo করা যায় না

⚠️ নিরাপত্তা বিবেচনা:

🔐 Authorization: User এর delete permission check করুন
✅ Confirmation: সবসময় user confirmation নিন
💾 Backup: Important data এর backup রাখুন
🔄 Soft Delete: Permanent delete এর পরিবর্তে soft delete consider করুন

❌ API Example: User Deletion

📡 API Endpoint:

DELETE /api/users/123

📤 Request Information:

Method	DELETE
URL	https://api.example.com/v1/users/123
Headers	Authorization: Bearer token
Body	সাধারণত empty (কিছু ক্ষেত্রে reason পাঠানো হয়)

📥 Success Response:


{
  "status": "success",
  "message": "ব্যবহারকারী সফলভাবে মুছে ফেলা হয়েছে",
  "deleted_user": {
    "id": 123,
    "name": "মোহাম্মদ রহিম",
    "email": "rahim@example.com",
    "deleted_at": "2024-01-15T12:00:00Z"
  },
  "related_data": {
    "posts_deleted": 5,
    "comments_deleted": 12,
    "files_deleted": 3
  }
}

💻 HTMX Delete Implementation:


<!-- User Card -->
<div class="user-card" style="background: #fff5f5; border: 1px solid #fed7d7; padding: 20px; border-radius: 8px;">
    <h4>👤 ব্যবহারকারী: মোহাম্মদ রহিম</h4>
    <p>📧 ইমেইল: rahim@example.com</p>
    <p>📞 ফোন: +8801712345678</p>
    <p>🏠 ঠিকানা: ঢাকা, বাংলাদেশ</p>
    <p>📅 যোগদান: ১০ জানুয়ারি, ২০২৪</p>

    <div style="margin-top: 15px;">
        <button hx-delete="/api/users/123" 
                hx-target="#delete-result"
                hx-confirm="আপনি কি নিশ্চিত যে এই ব্যবহারকারীকে মুছে ফেলতে চান? 

⚠️ এই কাজটি স্থায়ী এবং undo করা যাবে না।

মুছে যাবে:
* ব্যবহারকারীর সব তথ্য
* তার সব পোস্ট এবং মন্তব্য  
* আপলোড করা ফাইলসমূহ

এগিয়ে যেতে চা���?"
                hx-indicator="#delete-loading"
                class="btn btn-danger">
            🗑️ ব্যবহারকারী মুছে ফেলুন
        </button>

        <button class="btn btn-secondary" style="margin-left: 10px;">
            ✏️ সম্পাদনা করুন
        </button>
    </div>

    <div id="delete-loading" style="display: none; margin-top: 10px; color: #dc3545;">
        🗑️ ব্যবহারকারী মুছে ফেলা হচ্ছে...
    </div>

    <div id="delete-result"></div>
</div>

🛡️ Advanced Delete with Reason:


<!-- Delete with Reason Form -->
<form hx-delete="/api/users/123" 
      hx-target="#delete-result"
      hx-indicator="#delete-loading"
      class="delete-form">

    <div class="form-group">
        <label>মুছে ফেলার কারণ:</label>
        <select name="reason" required class="form-control">
            <option value="">কারণ নির্বাচন করুন</option>
            <option value="spam">স্প্যাম অ্যাকাউন্ট</option>
            <option value="violation">নীতিমালা লঙ্ঘন</option>
            <option value="inactive">দীর্ঘদিন নিষ্ক্রিয়</option>
            <option value="request">ব্যবহারকারীর অনুরোধ</option>
            <option value="duplicate">ডুপ্লিকেট অ্যাকাউন্ট</option>
        </select>
    </div>

    <div class="form-group">
        <label>অতিরিক্ত মন্তব্য:</label>
        <textarea name="comment" 
                  placeholder="প্রয়োজনে অতিরিক্ত বিবরণ লিখুন"
                  class="form-control"></textarea>
    </div>

    <div class="form-check">
        <input type="checkbox" name="confirm_delete" 
               value="1" required class="form-check-input">
        <label class="form-check-label">
            আমি নিশ্চিত যে এই ব্যবহারকারীকে স্থায়ীভাবে মুছে ফেলতে চাই
        </label>
    </div>

    <button type="submit" class="btn btn-danger">
        🗑️ নিশ্চিত করুন এবং মুছে ফেলুন
    </button>
</form>

🔄 Soft Delete Alternative:


<!-- Soft Delete (Deactivate) -->
<button hx-patch="/api/users/123/deactivate" 
        hx-target="#user-status"
        hx-confirm="ব্যবহারকারীকে নিষ্ক্রিয় করবেন? (পরে আবার সক্রিয় করা যাবে)"
        class="btn btn-warning">
    ⏸️ নিষ্ক্রিয় করুন
</button>

<!-- Hard Delete -->
<button hx-delete="/api/users/123" 
        hx-target="#delete-result"
        hx-confirm="স্থায়ীভাবে মুছে ফেলবেন? এটি undo করা যাবে না!"
        class="btn btn-danger">
    🗑️ স্থায়ীভাবে মুছুন
</button>

🔧 PATCH Method – আংশিক আপডেটের জন্য

🎯 PATCH Method কি এবং কেন ব্যবহার করবেন?

PATCH Method resource এর শুধুমাত্র নির্দিষ্ট অংশ update করার জন্য ব্যবহার হয়।

📖 PATCH Method এর বৈশিষ্ট্য:

❌ Not Safe: Server এর data পরিবর্তন করে
❓ Not Always Idempotent: Implementation এর উপর নির্ভর করে
❌ Not Cacheable: Browser cache করে না
⚡ Efficient: শুধু changed fields পাঠায়

⚖️ PATCH vs PUT এর পার্থক্য:

বিষয়	PATCH	PUT
Data Amount	শুধু changed fields	Complete object
Bandwidth	কম (efficient)	বেশি
Use Case	Single field updates	Complete replacement

⚡ API Example 1: Status Toggle

📡 API Endpoint:

PATCH /api/users/123

📦 Request Body (Only Changed Field):


{
  "status": "inactive"
}

📥 Success Response:


{
  "status": "success",
  "message": "ব্যবহারকারীর স্ট্যাটাস আপডেট হয়েছে",
  "updated_fields": ["status"],
  "data": {
    "id": 123,
    "name": "মোহাম্মদ রহিম",
    "email": "rahim@example.com",
    "status": "inactive",
    "updated_at": "2024-01-15T13:15:00Z"
  }
}

💻 HTMX Status Toggle:


<div class="user-status-card">
    <h4>👤 ব্যবহারকারী: মোহাম্মদ রহিম</h4>
    <p>📧 ইমেইল: rahim@example.com</p>

    <p>স্ট্যাটাস: 
        <span id="user-status" class="status-badge status-success">
            ✅ সক্রিয়
        </span>
    </p>

    <button hx-patch="/api/users/123/toggle-status" 
            hx-target="#user-status"
            hx-indicator="#status-loading"
            class="btn btn-secondary">
        🔄 স্ট্যাটাস পরিবর্তন করুন
    </button>

    <div id="status-loading" style="display: none;">
        🔄 স্ট্যাটাস পরিবর্তন হচ্ছে...
    </div>
</div>

👍 API Example 2: Like/Unlike System

📡 API Endpoint:

PATCH /api/posts/456/like

📦 Request Body:


{
  "action": "like",
  "user_id": 123
}

📥 Success Response:


{
  "status": "success",
  "message": "পোস্ট লাইক করা হয়েছে",
  "data": {
    "post_id": 456,
    "likes_count": 26,
    "user_liked": true,
    "updated_at": "2024-01-15T13:20:00Z"
  }
}

💻 HTMX Like System:


<div class="post-card">
    <h4>📝 HTMX Tutorial Post</h4>
    <p>HTMX দিয়ে কিভাবে modern web application তৈরি করবেন তার সম্পূর্ণ গাইড।</p>

    <div class="post-actions">
        <button hx-patch="/api/posts/456/like" 
                hx-target="#like-section"
                hx-indicator="#like-loading"
                class="btn btn-outline-primary">
            👍 পছন্দ করুন
        </button>

        <div id="like-section" style="display: inline-block; margin-left: 15px;">
            <span>২৫ জন পছন্দ করেছেন</span>
        </div>

        <div id="like-loading" style="display: none; margin-left: 10px;">
            👍 আপডেট হচ্ছে...
        </div>
    </div>
</div>

🎯 API Example 3: Priority Update

📡 API Endpoint:

PATCH /api/tasks/789

📦 Request Body:


{
  "priority": "high"
}

💻 HTMX Priority System:


<div class="task-card">
    <h4>📋 Task: HTMX Documentation লেখা</h4>
    <p>সম্পূর্ণ HTMX tutorial series তৈরি করা</p>

    <div>
        <span>অগ্রাধিকার: </span>
        <div id="priority-section" style="display: inline-block;">
            <span class="priority-badge priority-medium">
                ⚠️ মধ্যম
            </span>
        </div>
    </div>

    <div style="margin-top: 10px;">
        <button hx-patch="/api/tasks/789" 
                hx-vals='{"priority": "high"}'
                hx-target="#priority-section"
                hx-indicator="#priority-loading"
                class="btn btn-sm btn-danger">
            🔴 উচ্চ
        </button>

        <button hx-patch="/api/tasks/789" 
                hx-vals='{"priority": "medium"}'
                hx-target="#priority-section"
                hx-indicator="#priority-loading"
                class="btn btn-sm btn-warning">
            🟡 মধ্যম
        </button>

        <button hx-patch="/api/tasks/789" 
                hx-vals='{"priority": "low"}'
                hx-target="#priority-section"
                hx-indicator="#priority-loading"
                class="btn btn-sm btn-success">
            🟢 নিম্ন
        </button>
    </div>

    <div id="priority-loading" style="display: none; margin-top: 5px;">
        🔄 অগ্রাধিকার আপডেট হচ্ছে...
    </div>
</div>

🎯 Advanced HTMX Features:

hx-vals: Static JSON data পাঠানোর জন্য
Multiple buttons: Same endpoint, different data
Shared indicator: একই loading indicator multiple buttons এর জন্য

🚨 Error Handling – ত্রুটি পরিচালনা

⚠️ API Error Handling কেন গুরুত্বপূর্ণ?

Real-world applications এ API errors অবশ্যম্ভাবী। Proper error handling user experience এবং application stability এর জন্য অত্যন্ত গুরুত্বপূর্ণ।

🔍 Common HTTP Error Codes:

Status Code	অর্থ	কখন হয়
400	Bad Request	Invalid data বা validation error
401	Unauthorized	Authentication required
403	Forbidden	Permission denied
404	Not Found	Resource পাওয়া যায়নি
500	Server Error	Server এ সমস্যা

❌ Error Response Examples

🔸 400 – Validation Error:


{
  "status": "error",
  "message": "অবৈধ ডেটা প্রদান করা হয়েছে",
  "error_code": "VALIDATION_ERROR",
  "errors": {
    "email": [
      "ইমেইল ঠিকানা সঠিক ফরম্যাটে নয়",
      "এই ইমেইল ইতিমধ্যে ব্যবহৃত হয়েছে"
    ],
    "phone": [
      "ফোন নম্বর অবশ্যই ১১ ডিজিটের হতে হবে"
    ],
    "name": [
      "নাম অবশ্যই ২ অক্ষরের বেশি হতে হবে"
    ]
  },
  "timestamp": "2024-01-15T12:30:00Z"
}

🔸 404 – Not Found:


{
  "status": "error",
  "message": "ব্যবহারকারী খুঁজে পাওয়া যায়নি",
  "error_code": "USER_NOT_FOUND",
  "details": {
    "requested_id": 999,
    "suggestion": "সঠিক ব্যবহারকারী ID দিন"
  }
}

🔸 500 – Server Error:


{
  "status": "error",
  "message": "সার্ভারে সমস্যা হয়েছে। পরে আবার চেষ্টা করুন।",
  "error_code": "INTERNAL_SERVER_ERROR",
  "request_id": "req_123456789",
  "support_contact": "support@example.com"
}

💻 HTMX Error Handling Implementation

🔧 Basic Error Handling:


<form hx-post="/api/users" 
      hx-target="#form-result"
      hx-target-error="#error-message"
      class="user-form">

    <div class="form-group">
        <label>ইমেইল:</label>
        <input type="text" name="email" 
               placeholder="invalid-email" 
               class="form-control">
    </div>

    <div class="form-group">
        <label>নাম:</label>
        <input type="text" name="name" 
               placeholder="X" 
               class="form-control">
    </div>

    <button type="submit" class="btn btn-primary">
        ❌ Error Test করুন
    </button>
</form>

<!-- Success Response -->
<div id="form-result" class="alert alert-success" style="display: none;"></div>

<!-- Error Response -->
<div id="error-message" class="alert alert-danger" style="display: none;"></div>

🎯 HTMX Error Attributes:

hx-target-error: Error response কোথায় দেখাবে
hx-target: Success response কোথায় দেখাবে
HTTP Status Codes: HTMX automatically detect করে

🔧 Advanced Error Handling with JavaScript:


<script>
// HTMX Error Event Listeners
document.body.addEventListener('htmx:responseError', function(evt) {
    console.log('Response Error:', evt.detail);

    // Custom error handling
    if (evt.detail.xhr.status === 401) {
        // Redirect to login
        window.location.href = '/login';
    } else if (evt.detail.xhr.status === 403) {
        // Show permission denied message
        showNotification('আপনার এই কাজের অনুমতি নেই', 'error');
    }
});

document.body.addEventListener('htmx:sendError', function(evt) {
    console.log('Network Error:', evt.detail);
    showNotification('ইন্টারনেট সংযোগ চেক করুন', 'error');
});

function showNotification(message, type) {
    // Custom notification system
    const notification = document.createElement('div');
    notification.className = `alert alert-${type}`;
    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
        notification.remove();
    }, 5000);
}
</script>

🎯 কোন Method কখন ব্যবহার করবেন?

🤔 Decision Tree – সঠিক Method নির্বাচন

📋 আপনি কি করতে চান?

📥 শুধু ডেটা দেখতে চান?

→ ব্যবহার করুন: GET

✅ User list, product catalog
✅ Search results, dashboard data
✅ Profile information, settings
✅ Reports, analytics

উদাহরণ: GET /api/users, GET /api/products?category=electronics

📤 নতুন কিছু তৈরি করতে চান?

→ ব্যবহার করুন: POST

✅ নতুন user registration
✅ Order placement, payment
✅ Comment/review submission
✅ File upload, form submission

উদাহরণ: POST /api/users, POST /api/orders

🔄 সম্পূর্ণ তথ্য পরিবর্তন করতে চান?

→ ব্যবহার করুন: PUT

✅ Complete profile update
✅ Product information change
✅ Settings configuration
✅ Document replacement

উদাহরণ: PUT /api/users/123, PUT /api/products/456

🗑️ কিছু মুছে ফেলতে চান?

→ ব্যবহার করুন: DELETE

✅ Account deletion
✅ Post/comment removal
✅ File deletion
✅ Order cancellation

উদাহরণ: DELETE /api/users/123, DELETE /api/posts/789

🔧 শুধু কিছু field আপডেট করতে চান?

→ ব্যবহার করুন: PATCH

✅ Status toggle (active/inactive)
✅ Like/unlike, follow/unfollow
✅ Priority change, rating update
✅ Single field modifications

উদাহরণ: PATCH /api/users/123, PATCH /api/posts/456/like

🏪 Real-world Use Cases

🛒 E-commerce Website:

Feature	Method	Endpoint
Product list দেখানো	`GET`	/api/products
নতুন order তৈরি	`POST`	/api/orders
Profile সম্পূর্ণ update	`PUT`	/api/users/123
Cart item remove	`DELETE`	/api/cart/items/456
Wishlist toggle	`PATCH`	/api/products/789/wishlist

📱 Social Media App:

Feature	Method	Endpoint
News feed load	`GET`	/api/posts/feed
নতুন post তৈরি	`POST`	/api/posts
Post সম্পূর্ণ edit	`PUT`	/api/posts/123
Post delete	`DELETE`	/api/posts/123
Like/unlike	`PATCH`	/api/posts/123/like

✅ টিউটোরিয়াল ২ সারসংক্ষেপ

🎉 অভিনন্দন! আপনি HTTP Methods এর সম্পূর্ণ বিষয় শিখেছেন!

📚 আজ যা শিখলেন:

✅ GET Method: ডেটা retrieve করা – নিরাপদ এবং cacheable
✅ POST Method: নতুন resource তৈরি – form submission এর জন্য ideal
✅ PUT Method: সম্পূর্ণ resource replace – complete updates
✅ DELETE Method: Resource মুছে ফেলা – সাবধানে ব্যবহার করুন
✅ PATCH Method: আংশিক আপডেট – efficient partial updates
✅ API Request/Response structure এবং real examples
✅ Error handling এবং proper user feedback
✅ HTMX integration এবং practical implementation

🎯 মূল বিষয়গুলো:

🔹 প্রতিটি HTTP Method এর আলাদা উদ্দেশ্য এবং ব্যবহার
🔹 API Request/Response data structure এবং format
🔹 HTMX attributes এর সঠিক ব্যবহার এবং configuration
🔹 Error handling strategies এবং user experience
🔹 Real-world scenarios এবং practical applications
🔹 Security considerations এবং best practices

💡 গুরুত্বপূর্ণ টিপস:

🔸 GET: সবসময় safe operations এর জন্য ব্যবহার করুন
🔸 POST: নতুন resource তৈরির জন্য ideal
🔸 PUT vs PATCH: Complete vs Partial update এর পার্থক্য বুঝুন
🔸 DELETE: সবসময় confirmation নিন এবং backup রাখুন
🔸 Error Handling: User-friendly messages এবং proper feedback
🔸 Security: Authorization, validation এবং sanitization

🚀 পরবর্তী টিউটোরিয়ালে:

📖 টিউটোরিয়াল ৩: Advanced HTMX Features

🎯 hx-target এর advanced usage এবং CSS selectors
⚡ hx-trigger এর সব options এবং event handling
🔄 hx-swap এর বিভিন্ন modes এবং animations
📡 hx-headers এবং custom headers management
🔧 hx-vals এবং dynamic data passing
✅ hx-confirm এবং user confirmations
🎨 CSS transitions এবং smooth animations
📱 Real-time features এবং WebSocket integration

📅 প্রস্তুতি: এই টিউটোরিয়ালের সব examples practice করুন এবং নিজের API endpoints তৈরি করে test করুন!

🏃‍♂️ Practice Exercises:

User Management System: Complete CRUD operations implement করুন
Blog System: Post create, read, update, delete functionality
E-commerce Cart: Add to cart, update quantity, remove items
Social Features: Like/unlike, follow/unfollow system
Task Manager: Task creation, status update, priority change
Search System: Real-time search with debouncing
File Upload: Image upload with progress indicator
Error Handling: Comprehensive error handling system

📚 Additional Resources:

🌐 HTMX Official Documentation: https://htmx.org/docs/
📖 HTTP Methods Specification: RFC 7231
🔧 REST API Design: Best practices এবং conventions
🛡️ API Security: Authentication, authorization, validation
⚡ Performance: Caching, optimization, monitoring

🎉 টিউটোরিয়াল ২ সম্পন্ন!

আপনি এখন HTMX এর সব HTTP Methods এবং API Integration এর expert! 🚀

পরবর্তী টিউটোরিয়ালে দেখা হবে! 👋

Happy Coding with HTMX! 💻✨

Htmx

🌐 টিউটোরিয়াল ২: HTTP Methods API সহ বাস্তব উদাহরণ

📚 এই টিউটোরিয়ালে যা শিখবেন:

🔧 API Base URL:

📥 GET Method – ডেটা আনার জন্য

🎯 GET Method কি এবং কেন ব্যবহার করবেন?

📖 GET Method এর বৈশিষ্ট্য:

🔧 কখন GET ব্যবহার করবেন:

🌐 API Example 1: User List

📡 API Endpoint:

📤 Request Information:

📥 API Response Example:

💻 HTMX Implementation:

🎯 HTMX Attributes ব্যাখ্যা:

🔍 API Example 2: Search Functionality

📡 API Endpoint:

📤 Request with Query Parameters:

📥 Search API Response:

💻 HTMX Search Implementation:

🎯 Advanced HTMX Features:

📤 POST Method – নতুন ডেটা তৈরির জন্য

🎯 POST Method কি এবং কেন ব্যবহার করবেন?

📖 POST Method এর বৈশিষ্ট্য:

🔧 কখন POST ব্যবহার করবেন:

👤 API Example: User Registration

📡 API Endpoint:

📤 Request Information:

📦 Request Body Example:

📥 Success Response:

💻 HTMX Form Implementation:

🎯 POST Method এর গুরুত্বপূর্ণ বিষয়:

🔄 PUT Method – সম্পূর্ণ ডেটা আপডেটের জন্য

🎯 PUT Method কি এবং কেন ব্যবহার করবেন?

📖 PUT Method এর বৈশিষ্ট্য:

⚖️ PUT vs POST এর পার্থক্য:

✏️ API Example: Profile Update

📡 API Endpoint:

📤 Request Information:

📦 Request Body (Complete User Object):

📥 Success Response:

💻 HTMX Update Form:

💡 PUT Method এর গুরুত্বপূর্ণ বিষয়:

🗑️ DELETE Method – ডেটা মুছে ফেলার জন্য

🎯 DELETE Method কি এবং কেন ব্যবহার করবেন?

📖 DELETE Method এর বৈশিষ্ট্য:

⚠️ নিরাপত্তা বিবেচনা:

❌ API Example: User Deletion

📡 API Endpoint:

📤 Request Information:

📥 Success Response:

💻 HTMX Delete Implementation:

🛡️ Advanced Delete with Reason:

🔄 Soft Delete Alternative:

🔧 PATCH Method – আংশিক আপডেটের জন্য

🎯 PATCH Method কি এবং কেন ব্যবহার করবেন?

📖 PATCH Method এর বৈশিষ্ট্য:

⚖️ PATCH vs PUT এর পার্থক্য:

⚡ API Example 1: Status Toggle

📡 API Endpoint:

📦 Request Body (Only Changed Field):

📥 Success Response:

💻 HTMX Status Toggle:

👍 API Example 2: Like/Unlike System

📡 API Endpoint:

📦 Request Body:

📥 Success Response:

💻 HTMX Like System:

🎯 API Example 3: Priority Update

📡 API Endpoint:

📦 Request Body:

💻 HTMX Priority System:

🎯 Advanced HTMX Features:

🚨 Error Handling – ত্রুটি পরিচালনা

⚠️ API Error Handling কেন গুরুত্বপূর্ণ?

🔍 Common HTTP Error Codes:

❌ Error Response Examples

🔸 400 – Validation Error:

🔸 404 – Not Found:

🔸 500 – Server Error:

💻 HTMX Error Handling Implementation