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

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

✅ hx-get – ডেটা আনার জন্য
✅ hx-post – ডেটা পাঠানোর জন্য
✅ hx-put – ডেটা আপডেট করার জন্য
✅ hx-delete – ডেটা মুছে ফেলার জন্য
✅ hx-patch – আংশিক আপডেটের জন্য
✅ কোন Method কখন ব্যবহার করবেন

🎯 মূল বিষয়:

HTTP Methods এর পার্থক্য
RESTful API concepts
Request/Response handling

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

⚠️ পূর্বশর্ত:

টিউটোরিয়াল ১ সম্পন্ন করতে হবে
Live Server setup করা থাকতে হবে
HTMX এর basic concepts জানতে হবে

📖 HTTP Methods কি এবং কেন গুরুত্বপূর্ণ?

🤔 HTTP Methods এর সংজ্ঞা:

HTTP Methods হল বিভিন্ন ধরনের requests যা আমরা server এ পাঠাই। প্রতিটি method এর আলাদা উদ্দেশ্য এবং কাজ রয়েছে। এগুলো web এর মূল ভিত্তি এবং RESTful API এর অংশ।

🎯 কেন বিভিন্ন Methods প্রয়োজন?

স্পষ্টতা: কোন ধরনের operation করা হচ্ছে তা বোঝা যায়
নিরাপত্তা: বিভিন্ন method এর আলাদা security implications
Caching: কিছু method cache হয়, কিছু হয় না
Idempotency: কিছু method একাধিকবার চালালেও same result

📊 HTTP Methods এর সংক্ষিপ্ত তুলনা:

Method	কাজ	নিরাপদ	Idempotent	Cache
GET	ডেটা আনা	✅ হ্যাঁ	✅ হ্যাঁ	✅ হ্যাঁ
POST	ডেটা তৈরি	❌ না	❌ না	❌ না
PUT	সম্পূর্ণ আপডেট	❌ না	✅ হ্যাঁ	❌ না
DELETE	ডেটা মুছে ফেলা	❌ না	✅ হ্যাঁ	❌ না
PATCH	আংশিক আপডেট	❌ না	❌ না	❌ না

📥 hx-get – ডেটা আনার জন্য

🎯 hx-get এর বিস্তারিত:

📖 কি করে:

Server থেকে data/content retrieve করে
Page reload ছাড়াই content load করে
সবচেয়ে common এবং নিরাপদ HTTP method
Browser cache করতে পারে

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

✅ Page content load করার জন্য
✅ Search results দেখানোর জন্য
✅ User profile information আনার জন্য
✅ Product details load করার জন্য
✅ Navigation menu items load করার জন্য

💻 Practical Examples:

🔹 Example 1: Simple Content Loading


<!-- Main HTML -->
<button hx-get="user-profile.html" 
        hx-target="#profile-section"
        hx-indicator="#loading">
    👤 প্রোফাইল দেখুন
</button>

<div id="loading" style="display: none;">⏳ লোড হচ্ছে...</div>
<div id="profile-section">এখানে প্রোফাইল দেখাবে</div>

📄 user-profile.html:


<div style="background: #e8f5e8; padding: 20px; border-radius: 8px;">
    <h3>👤 ব্যবহারকারীর প্রোফাইল</h3>
    <p><strong>নাম:</strong> মোহাম্মদ রহিম</p>
    <p><strong>ইমেইল:</strong> rahim@example.com</p>
    <p><strong>যোগদান:</strong> ১৫ জানুয়ারি, ২০২৪</p>
</div>

🔹 Example 2: Search Functionality


<input type="text" 
       name="search" 
       placeholder="পণ্য খুঁজুন..."
       hx-get="search-results.html"
       hx-target="#search-results"
       hx-trigger="keyup changed delay:500ms"
       hx-indicator="#search-loading">

<div id="search-loading" style="display: none;">🔍 খুঁজছি...</div>
<div id="search-results">এখানে সার্চ রেজাল্ট দেখাবে</div>

🔹 Example 3: Dynamic Navigation


<nav>
    <a href="#" hx-get="home-content.html" hx-target="#main-content">🏠 হোম</a>
    <a href="#" hx-get="about-content.html" hx-target="#main-content">ℹ️ আমাদের সম্পর্কে</a>
    <a href="#" hx-get="contact-content.html" hx-target="#main-content">📞 যোগাযোগ</a>
</nav>

<main id="main-content">
    মূল কন্টেন্ট এখানে লোড হবে
</main>

📤 hx-post – ডেটা পাঠানোর জন্য

🎯 hx-post এর বিস্তারিত:

📖 কি করে:

Server এ নতুন data পাঠায়
Form submission এর জন্য ব্যবহার হয়
Data body তে পাঠায়, URL এ নয়
Cache হয় না

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

✅ Form submit করার জন্য
✅ নতুন user registration
✅ Comment/review submit করার জন্য
✅ File upload করার জন্য
✅ Login/authentication এর জন্য

💻 Practical Examples:

🔹 Example 1: Contact Form


<form hx-post="submit-contact.html" 
      hx-target="#form-response"
      hx-indicator="#form-loading">

    <div style="margin: 10px 0;">
        <label>নাম:</label>
        <input type="text" name="name" required 
               style="width: 100%; padding: 8px; margin-top: 5px;">
    </div>

    <div style="margin: 10px 0;">
        <label>ইমেইল:</label>
        <input type="email" name="email" required 
               style="width: 100%; padding: 8px; margin-top: 5px;">
    </div>

    <div style="margin: 10px 0;">
        <label>বার্তা:</label>
        <textarea name="message" required 
                  style="width: 100%; padding: 8px; margin-top: 5px; height: 100px;"></textarea>
    </div>

    <button type="submit" 
            style="background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
        📧 বার্তা পাঠান
    </button>
</form>

<div id="form-loading" style="display: none;">📤 পাঠানো হচ্ছে...</div>
<div id="form-response"></div>

📄 submit-contact.html:


<div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745; margin-top: 15px;">
    <h3>✅ বার্তা সফলভাবে পাঠানো হয়েছ��!</h3>
    <p>ধন্যবাদ! আমরা শীঘ্রই আপনার সাথে যোগাযোগ করব।</p>
    <p><strong>পাঠানোর সময়:</strong> <span id="submit-time"></span></p>
    <script>
        document.getElementById('submit-time').textContent = new Date().toLocaleString('bn-BD');
    </script>
</div>

🔹 Example 2: User Registration


<form hx-post="register-user.html" 
      hx-target="#registration-result"
      hx-indicator="#reg-loading">

    <h3>👤 নতুন অ্যাকাউন্ট তৈরি করুন</h3>

    <input type="text" name="username" placeholder="ইউজারনেম" required
           style="width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">

    <input type="email" name="email" placeholder="ইমেইল" required
           style="width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">

    <input type="password" name="password" placeholder="পাসওয়ার্ড" required
           style="width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">

    <button type="submit"
            style="width: 100%; background: #007bff; color: white; padding: 12px; border: none; border-radius: 5px; margin-top: 10px;">
        🚀 অ্যাকাউন্ট তৈরি করুন
    </button>
</form>

<div id="reg-loading" style="display: none; text-align: center; margin: 10px 0;">
    ⏳ অ্যাকাউন্ট তৈরি হচ্ছে...
</div>
<div id="registration-result"></div>

🔹 Example 3: Quick Comment System


<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 10px 0;">
    <h4>💬 মন্তব্য করুন</h4>

    <form hx-post="add-comment.html" 
          hx-target="#comments-list" 
          hx-swap="beforeend"
          hx-indicator="#comment-loading">

        <textarea name="comment" placeholder="আপনার মন্তব্য লিখুন..." required
                  style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; height: 80px;"></textarea>

        <div style="margin-top: 10px;">
            <input type="text" name="author" placeholder="আপনার নাম" required
                   style="padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px;">

            <button type="submit"
                    style="background: #17a2b8; color: white; padding: 8px 16px; border: none; border-radius: 4px;">
                💬 মন্তব্য পোস্ট করুন
            </button>
        </div>
    </form>

    <div id="comment-loading" style="display: none; margin-top: 10px;">
        📝 মন্তব্য পোস্ট হচ্ছে...
    </div>
</div>

<div id="comments-list">
    <!-- Existing comments will be here -->
</div>

🔄 hx-put – ডেটা আপডেট করার জন্য

🎯 hx-put এর বিস্তারিত:

📖 কি করে:

বিদ্যমান resource সম্পূর্ণভাবে replace করে
Idempotent – একাধিকবার চালালেও same result
পুরো object/record update করে
RESTful API এর অংশ

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

✅ User profile সম্পূর্ণ update করার জন্য
✅ Product information পরিবর্তন করার জন্য
✅ Settings/Configuration update করার জন্য
✅ Complete record replacement এর জন্য

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

PUT: Existing resource update করে
POST: নতুন resource তৈরি করে
PUT: Idempotent (একাধিকবার চালালেও same result)
POST: Non-idempotent (প্রতিবার নতুন result)

💻 Practical Examples:

🔹 Example 1: Profile Update


<div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
    <h3>👤 প্রোফাইল আপডেট করুন</h3>

    <form hx-put="update-profile.html" 
          hx-target="#profile-status"
          hx-indicator="#update-loading">

        <div style="margin: 10px 0;">
            <label>পূর্ণ নাম:</label>
            <input type="text" name="fullname" value="মোহাম্মদ রহিম" required
                   style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px;">
        </div>

        <div style="margin: 10px 0;">
            <label>ইমেইল:</label>
            <input type="email" name="email" value="rahim@example.com" required
                   style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px;">
        </div>

        <div style="margin: 10px 0;">
            <label>ফোন:</label>
            <input type="tel" name="phone" value="+৮৮০১৭১২৩৪৫৬৭৮"
                   style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px;">
        </div>

        <div style="margin: 10px 0;">
            <label>ঠিকানা:</label>
            <textarea name="address" 
                      style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px; height: 60px;">ঢাকা, বাংলাদেশ</textarea>
        </div>

        <button type="submit"
                style="background: #ffc107; color: #212529; padding: 10px 20px; border: none; border-radius: 5px; font-weight: bold;">
            🔄 প্রোফাইল আপডেট করুন
        </button>
    </form>

    <div id="update-loading" style="display: none; margin-top: 10px;">
        🔄 আপডেট হচ্ছে...
    </div>
    <div id="profile-status"></div>
</div>

📄 update-profile.html:


<div style="background: #fff3cd; padding: 15px; border-radius: 8px; border-left: 4px solid #ffc107; margin-top: 15px;">
    <h4>✅ প্রোফাইল সফলভাবে আপডেট হয়েছে!</h4>
    <p>আপনার সমস্ত তথ্য সংরক্ষিত হয়েছে।</p>
    <ul>
        <li>✓ ব্যক্তিগত তথ্য আপডেট হয়েছে</li>
        <li>✓ যোগাযোগের তথ্য সংরক্ষিত হয়েছে</li>
        <li>✓ ঠিকানা আপডেট হয়েছে</li>
    </ul>
    <p><strong>আপডেটের সময়:</strong> <span id="update-time"></span></p>
    <script>
        document.getElementById('update-time').textContent = new Date().toLocaleString('bn-BD');
    </script>
</div>

🔹 Example 2: Product Information Update


<div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
    <h3>📦 পণ্যের তথ্য আপডেট করুন</h3>

    <form hx-put="update-product.html" 
          hx-target="#product-status"
          hx-indicator="#product-loading">

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

        <div style="margin: 10px 0;">
            <label>পণ্যের নাম:</label>
            <input type="text" name="product_name" value="স্মার্ট ফোন" required
                   style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px;">
        </div>

        <div style="margin: 10px 0;">
            <label>দাম (টাকা):</label>
            <input type="number" name="price" value="25000" required
                   style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px;">
        </div>

        <div style="margin: 10px 0;">
            <label>বিবরণ:</label>
            <textarea name="description" required
                      style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px; height: 80px;">উচ্চ মানের স্মার্ট ফোন, দুর্দান্ত ক্যামেরা এবং দীর্ঘস্থায়ী ব্যাটারি সহ।</textarea>
        </div>

        <button type="submit"
                style="background: #17a2b8; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
            📦 পণ্যের তথ্য আপডেট করুন
        </button>
    </form>

    <div id="product-loading" style="display: none; margin-top: 10px;">
        📦 পণ্যের তথ্য আপডেট হচ্ছে...
    </div>
    <div id="product-status"></div>
</div>

🗑️ hx-delete – ডেটা মুছে ফেলার জন্য

🎯 hx-delete এর বিস্তারিত:

📖 কি করে:

Server থেকে resource স্থায়ীভাবে মুছে ফেলে
Idempotent – একাধিকবার চালালেও same result
সাবধানে ব্যবহার করতে হয় কারণ data permanently delete হয়
সাধারণত confirmation প্রয়োজন

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

✅ User account delete করার জন্য
✅ Post/Comment remove করার জন্য
✅ File delete করার জন্য
✅ Shopping cart item remove করার জন্য

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

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

💻 Practical Examples:

🔹 Example 1: Delete with Confirmation


<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6;">
    <h4>📄 আমার পোস্ট</h4>
    <p>HTMX দিয়ে Modern Web Development</p>
    <p><small>প্রকাশিত: ১৫ জানুয়ারি, ২০২৪</small></p>

    <div style="margin-top: 15px;">
        <button hx-delete="delete-post.html" 
                hx-target="#post-container"
                hx-confirm="আপনি কি নিশ্চিত যে এই পোস্টটি মুছে ফেলতে চান? এটি স্থায়ীভাবে মুছে যাবে।"
                hx-indicator="#delete-loading"
                style="background: #dc3545; color: white; padding: 8px 16px; border: none; border-radius: 4px;">
            🗑️ পোস্ট মুছে ফেলুন
        </button>

        <button style="background: #6c757d; color: white; padding: 8px 16px; border: none; border-radius: 4px; margin-left: 10px;">
            ✏️ সম্পাদনা করুন
        </button>
    </div>

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

📄 delete-post.html:


<div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; text-align: center;">
    <h4 style="color: #721c24;">✅ পোস্ট সফলভাবে মুছে ফেলা হয়েছে</h4>
    <p style="color: #721c24;">আপনার পোস্টটি স্থায়ীভাবে মুছে ফেলা হয়েছে।</p>
    <p style="color: #721c24;"><small>মুছে ফেলার সময়: <span id="delete-time"></span></small></p>
    <script>
        document.getElementById('delete-time').textContent = new Date().toLocaleString('bn-BD');
    </script>
</div>

🔹 Example 2: Shopping Cart Item Removal


<div id="cart-items">
    <div class="cart-item" style="background: #f8f9fa; padding: 15px; margin: 10px 0; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h5>📱 স্মার্ট ফোন</h5>
            <p>দাম: ২৫,০০০ টাকা | পরিমাণ: ১টি</p>
        </div>
        <button hx-delete="remove-cart-item.html" 
                hx-target="closest .cart-item"
                hx-swap="outerHTML"
                hx-confirm="এই পণ্যটি কার্ট থেকে সরিয়ে ফেলবেন?"
                style="background: #dc3545; color: white; padding: 5px 10px; border: none; border-radius: 4px;">
            ❌ সরান
        </button>
    </div>

    <div class="cart-item" style="background: #f8f9fa; padding: 15px; margin: 10px 0; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h5>💻 ল্যাপটপ</h5>
            <p>দাম: ৫৫,০০০ টাকা | পরিমাণ: ১টি</p>
        </div>
        <button hx-delete="remove-cart-item.html" 
                hx-target="closest .cart-item"
                hx-swap="outerHTML"
                hx-confirm="এই পণ্যটি কার্ট থেকে সরিয়ে ফেলবেন?"
                style="background: #dc3545; color: white; padding: 5px 10px; border: none; border-radius: 4px;">
            ❌ সরান
        </button>
    </div>
</div>

📄 remove-cart-item.html:


<!-- Empty response - item will be removed from DOM -->

💡 টিপ: এই ক্ষেত্রে empty response পাঠানো হয় কারণ hx-swap="outerHTML" দিয়ে পুরো element replace হয়ে যায়।

🔧 hx-patch – আংশিক আপডেটের জন্য

🎯 hx-patch এর বিস্তারিত:

📖 কি করে:

Resource এর শুধুমাত্র নির্দিষ্ট অংশ update করে
PUT এর চেয়ে efficient কারণ শুধু changed data পাঠায়
Partial updates এর জন্য ideal
Network bandwidth save করে

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

✅ Status change করার জন্য (Active/Inactive)
✅ Like/Unlike button এর জন্য
✅ Priority/Rating change করার জন্য
✅ Single field update করার জন্য

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

PATCH: শুধু changed fields পাঠায়
PUT: সম্পূর্ণ resource পাঠায়
PATCH: Bandwidth efficient
PUT: Complete replacement

💻 Practical Examples:

🔹 Example 1: Status Toggle


<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6;">
    <h4>👤 ব্যবহারকারী: মোহাম্মদ রহিম</h4>
    <p>ইমেইল: rahim@example.com</p>
    <p>যোগদান: ১৫ জানুয়ারি, ২০২৪</p>

    <div style="margin-top: 15px;">
        <span>স্ট্যাটাস: </span>
        <span id="user-status" style="background: #28a745; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
            ✅ সক্রিয়
        </span>

        <button hx-patch="toggle-status.html" 
                hx-target="#user-status"
                hx-indicator="#status-loading"
                style="background: #ffc107; color: #212529; padding: 6px 12px; border: none; border-radius: 4px; margin-left: 10px;">
            🔄 স্ট্যাটাস পরিবর্তন করুন
        </button>

        <div id="status-loading" style="display: none; margin-top: 5px; font-size: 12px; color: #6c757d;">
            🔄 স্ট্যাটাস পরিবর্তন হচ্ছে...
        </div>
    </div>
</div>

📄 toggle-status.html:


<span style="background: #dc3545; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
    ❌ নিষ্ক্রিয়
</span>

🔹 Example 2: Like/Unlike System


<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6;">
    <h4>📝 HTMX Tutorial Post</h4>
    <p>HTMX দিয়ে কিভাবে modern web application তৈরি করবেন তার সম্পূর্ণ গাইড।</p>

    <div style="margin-top: 15px; display: flex; align-items: center; gap: 15px;">
        <button hx-patch="toggle-like.html" 
                hx-target="#like-section"
                hx-indicator="#like-loading"
                style="background: #e3f2fd; color: #1976d2; padding: 8px 16px; border: 1px solid #1976d2; border-radius: 20px;">
            👍 পছন্দ করুন
        </button>

        <div id="like-section">
            <span style="color: #6c757d;">২৫ জন পছন্দ করেছেন</span>
        </div>

        <div id="like-loading" style="display: none; font-size: 12px; color: #6c757d;">
            👍 আপডেট হচ্ছে...
        </div>
    </div>
</div>

📄 toggle-like.html:


<span style="color: #1976d2; font-weight: bold;">
    👍 আপনি এবং আরও ২৫ জন পছন্দ করেছেন
</span>

🔹 Example 3: Priority Update


<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #dee2e6;">
    <h4>📋 Task: HTMX Documentation লেখা</h4>
    <p>সম্পূর্ণ HTMX tutorial series তৈরি করা</p>

    <div style="margin-top: 15px;">
        <span>অগ্রাধিকার: </span>
        <div id="priority-section" style="display: inline-block;">
            <span style="background: #ffc107; color: #212529; padding: 4px 8px; border-radius: 4px; font-size: 12px;">
                ⚠️ মধ্যম
            </span>
        </div>

        <div style="margin-top: 10px;">
            <button hx-patch="set-priority-high.html" 
                    hx-target="#priority-section"
                    hx-indicator="#priority-loading"
                    style="background: #dc3545; color: white; padding: 4px 8px; border: none; border-radius: 4px; font-size: 12px; margin-right: 5px;">
                🔴 উচ্চ
            </button>

            <button hx-patch="set-priority-medium.html" 
                    hx-target="#priority-section"
                    hx-indicator="#priority-loading"
                    style="background: #ffc107; color: #212529; padding: 4px 8px; border: none; border-radius: 4px; font-size: 12px; margin-right: 5px;">
                🟡 মধ্যম
            </button>

            <button hx-patch="set-priority-low.html" 
                    hx-target="#priority-section"
                    hx-indicator="#priority-loading"
                    style="background: #28a745; color: white; padding: 4px 8px; border: none; border-radius: 4px; font-size: 12px;">
                🟢 নিম্ন
            </button>
        </div>

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

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

📋 Decision Tree – কোন Method বেছে নেবেন:

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

📥 ডেটা আনতে চান?

→ ব্যবহার করুন: hx-get

Page content load করা
Search results দেখানো
User profile information
Product details

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

→ ব্যবহার করুন: hx-post

নতুন user registration
Comment/review submit
Form submission
File upload

🔄 সম্পূর্ণ ডেটা replace করতে চান?

→ ব্যবহার করুন: hx-put

Complete profile update
Product information change
Settings configuration
Full record replacement

🗑️ ডেটা মুছে ফেলতে চান?

→ ব্যবহার করুন: hx-delete

Account deletion
Post/Comment removal
File deletion
Cart item removal

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

→ ব্যবহার করুন: hx-patch

Status toggle
Like/Unlike
Priority change
Single field update

📊 Real-world Use Cases:

🏪 E-commerce Website:

GET: Product list, product details, user profile দেখানো
POST: নতুন order create, user registration, review submit
PUT: Complete profile update, product information change
DELETE: Cart item remove, account delete, review delete
PATCH: Wishlist toggle, quantity update, status change

📱 Social Media App:

GET: News feed, user posts, notifications load
POST: নতুন post create, comment submit, message send
PUT: Complete profile update, post edit
DELETE: Post delete, comment remove, friend remove
PATCH: Like/unlike, follow/unfollow, status update

📋 Task Management:

GET: Task list, project details, team members
POST: নতুন task create, project create, team invite
PUT: Complete task update, project settings
DELETE: Task delete, project remove, member remove
PATCH: Task status change, priority update, progress update

🏗️ RESTful API Concepts

🤔 REST কি?

REST (Representational State Transfer) হল web services design করার একটি architectural style। এটি HTTP methods ব্যবহার করে resources এর সাথে interact করার standard way প্রদান করে।

🎯 RESTful API এর মূল নীতিমালা:

Stateless: প্রতিটি request independent
Resource-based: সবকিছু resource হিসেবে treat করা
HTTP Methods: Standard HTTP verbs ব্যবহার
Uniform Interface: Consistent API design

📋 RESTful URL Structure Examples:

HTTP Method	URL	কাজ	HTMX Example
GET	/users	সব users এর list	`hx-get="/users"`
GET	/users/123	Specific user details	`hx-get="/users/123"`
POST	/users	নতুন user তৈরি	`hx-post="/users"`
PUT	/users/123	User 123 সম্পূর্ণ update	`hx-put="/users/123"`
PATCH	/users/123	User 123 আংশিক update	`hx-patch="/users/123"`
DELETE	/users/123	User 123 delete	`hx-delete="/users/123"`

🔄 Request/Response Handling

📡 HTMX Request/Response Cycle:

1️⃣ Request Phase:

User interaction (click, submit, keyup etc.)
HTMX triggers HTTP request
Request headers এবং data পাঠানো
Loading indicator দেখানো (যদি থাকে)

2️⃣ Server Processing:

Server request receive করে
Business logic execute করে
Database operations (যদি প্রয়োজন)
HTML response তৈরি করে

3️⃣ Response Phase:

Server HTML response পাঠায়
HTMX response receive করে
Target element এ content update করে
Loading indicator hide করে

🔧 Advanced Request Handling:

📤 Request Headers:


<!-- Custom headers পাঠানো -->
<button hx-post="/api/users" 
        hx-headers='{"X-API-Key": "your-api-key", "Content-Type": "application/json"}'
        hx-target="#result">
    Submit with Headers
</button>

📥 Response Handling:


<!-- Different response status handling -->
<form hx-post="/submit-form" 
      hx-target="#form-result"
      hx-target-error="#error-message">
    <!-- Form fields -->
</form>

<div id="form-result"></div>
<div id="error-message" style="color: red; display: none;"></div>

🔄 Request Validation:


<!-- Form validation with HTMX -->
<input type="email" 
       name="email" 
       hx-post="/validate-email"
       hx-target="#email-validation"
       hx-trigger="blur"
       placeholder="ইমেইল ঠিকানা">

<div id="email-validation"></div>

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

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

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

✅ hx-get: ডেটা আনার জন্য – নিরাপদ এবং cacheable
✅ hx-post: নতুন ডেটা তৈরির জন্য – form submission এর জন্য ideal
✅ hx-put: সম্পূর্ণ ডেটা replace করার জন্য – complete updates
✅ hx-delete: ডেটা মুছে ফেলার জন্য – সাবধানে ব্যবহার করুন
✅ hx-patch: আংশিক আপডেটের জন্য – efficient partial updates
✅ RESTful API concepts এবং best practices
✅ Request/Response handling এর বিস্তারিত

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

🔹 প্রতিটি HTTP Method এর আলাদা উদ্দেশ্য এবং ব্যবহার
🔹 কোন Method কখন ব্যবহার করবেন তার decision tree
🔹 Real-world examples এবং practical implementations
🔹 Security considerations এবং best practices
🔹 RESTful API design principles

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

🔸 GET: সবসময় safe operations এর জন্য ব্যবহার করুন
🔸 POST: নতুন resource তৈরির জন্য ideal
🔸 PUT vs PATCH: Complete vs Partial update এর পার্থক্য বুঝুন
🔸 DELETE: সবসময় confirmation নিন
🔸 RESTful URLs: Consistent naming convention follow করুন

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

📖 টিউটোরিয়াল ৩: HTMX Attributes বিস্তারিত

🎯 hx-target এর advanced usage
⚡ hx-trigger এর সব options
🔄 hx-swap এর বিভিন্ন modes
📡 hx-indicator এবং loading states
🔧 hx-headers এবং custom headers
✅ hx-confirm এবং user confirmations

📅 প্রস্তুতি: এই টিউটোরিয়ালের সব examples practice করুন এবং নিজের মতো করে modify করে দেখুন!

🏃‍♂️ Practice Exercises:

Contact Form: একটি complete contact form তৈরি করুন সব HTTP methods ব্যবহার করে
User Management: User list, create, update, delete functionality implement করুন
Shopping Cart: Add to cart, update quantity, remove items functionality তৈরি করুন
Like System: Post like/unlike functionality implement করুন
Status Toggle: User active/inactive status toggle করার system তৈরি করুন

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

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

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

Articles

practical

Htmx

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

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

🎯 মূল বিষয়:

⚠️ পূর্বশর্ত:

📖 HTTP Methods কি এবং কেন গুরুত্বপূর্ণ?

🤔 HTTP Methods এর সংজ্ঞা:

🎯 কেন বিভিন্ন Methods প্রয়োজন?

📊 HTTP Methods এর সংক্ষিপ্ত তুলনা:

📥 hx-get – ডেটা আনার জন্য

🎯 hx-get এর বিস্তারিত:

📖 কি করে:

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

💻 Practical Examples:

🔹 Example 1: Simple Content Loading

📄 user-profile.html:

🔹 Example 2: Search Functionality

🔹 Example 3: Dynamic Navigation

📤 hx-post – ডেটা পাঠানোর জন্য

🎯 hx-post এর বিস্তারিত:

📖 কি করে:

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

💻 Practical Examples:

🔹 Example 1: Contact Form

📄 submit-contact.html:

🔹 Example 2: User Registration

🔹 Example 3: Quick Comment System

🔄 hx-put – ডেটা আপডেট করার জন্য

🎯 hx-put এর বিস্তারিত:

📖 কি করে:

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

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

💻 Practical Examples:

🔹 Example 1: Profile Update

📄 update-profile.html:

🔹 Example 2: Product Information Update

🗑️ hx-delete – ডেটা মুছে ফেলার জন্য

🎯 hx-delete এর বিস্তারিত:

📖 কি করে:

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

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

💻 Practical Examples:

🔹 Example 1: Delete with Confirmation

📄 delete-post.html:

🔹 Example 2: Shopping Cart Item Removal

📄 remove-cart-item.html:

🔧 hx-patch – আংশিক আপডেটের জন্য

🎯 hx-patch এর বিস্তারিত:

📖 কি করে:

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

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

💻 Practical Examples:

🔹 Example 1: Status Toggle

📄 toggle-status.html:

🔹 Example 2: Like/Unlike System

📄 toggle-like.html:

🔹 Example 3: Priority Update

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

📋 Decision Tree – কোন Method বেছে নেবেন:

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

📥 ডেটা আনতে চান?

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

🔄 সম্পূর্ণ ডেটা replace করতে চান?

🗑️ ডেটা মুছে ফেলতে চান?

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

📊 Real-world Use Cases:

🏪 E-commerce Website:

📱 Social Media App:

📋 Task Management:

🏗️ RESTful API Concepts

🤔 REST কি?

🎯 RESTful API এর মূল নীতিমালা:

📋 RESTful URL Structure Examples:

🔄 Request/Response Handling

📡 HTMX Request/Response Cycle:

1️⃣ Request Phase:

2️⃣ Server Processing:

3️⃣ Response Phase:

🔧 Advanced Request Handling:

📤 Request Headers: