0:Simple tutorial - পাইথন বাংলা টিউটোরিয়াল

আমি আপনার জন্য একটি সম্পূর্ণ HTMX টিউটোরিয়াল তৈরি করছি যা দিয়ে আপনি একটি সিম্পল SPA ওয়েবসাইট বানাতে পারবেন। এটি সম্পূর্ণ HTML ভিত্তিক এবং কোন React/JSX ব্যবহার করা হয়নি।

ধাপ ১: মূল HTML ফাইল তৈরি করুন

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX সিম্পল SPA টিউটোরিয়াল</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        .nav {
            background: #34495e;
            padding: 0.5rem;
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
        .nav button {
            background: #3498db;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .nav button:hover {
            background: #2980b9;
        }
        .content {
            padding: 2rem;
            min-height: 400px;
        }
        .loading {
            text-align: center;
            color: #7f8c8d;
            font-style: italic;
        }
        .page-content {
            background: #ecf0f1;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 1rem 0;
            border-left: 4px solid #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- হেডার সেকশন -->
        <div class="header">
            <h1>🚀 HTMX দিয়ে SPA ওয়েবসাইট</h1>
            <p>সিম্পল এবং শক্তিশালী ওয়েব অ্যাপ্লিকেশন</p>
        </div>

        <!-- নেভিগেশন মেনু -->
        <div class="nav">
            <button hx-get="home.html" 
                    hx-target="#content" 
                    hx-indicator="#loading">
                🏠 হোম
            </button>
            <button hx-get="about.html" 
                    hx-target="#content" 
                    hx-indicator="#loading">
                ℹ️ আমাদের সম্পর্কে
            </button>
            <button hx-get="services.html" 
                    hx-target="#content" 
                    hx-indicator="#loading">
                🛠️ সেবাসমূহ
            </button>
            <button hx-get="contact.html" 
                    hx-target="#content" 
                    hx-indicator="#loading">
                📞 যোগাযোগ
            </button>
        </div>

        <!-- লোডিং ইন্ডিকেটর -->
        <div id="loading" class="loading" style="display: none;">
            ⏳ লোড হচ্ছে...
        </div>

        <!-- মূল কন্টেন্ট এরিয়া -->
        <div id="content" class="content">
            <div class="page-content">
                <h2>🎉 HTMX SPA ওয়েবসাইটে স্বাগতম!</h2>
                <p>এটি একটি সিম্পল Single Page Application যা HTMX দিয়ে তৈরি। উপরের বাটনগুলোতে ক্লিক করে বিভিন্ন পেজ দেখুন।</p>
            </div>
        </div>
    </div>

    <script>
        // HTMX ইভেন্ট লিসেনার
        document.body.addEventListener('htmx:beforeRequest', function() {
            console.log('📡 রিকুয়েস্ট পাঠানো হচ্ছে...');
        });

        document.body.addEventListener('htmx:afterRequest', function() {
            console.log('✅ রিকুয়েস্ট সম্পন্ন হয়েছে!');
        });
    </script>
</body>
</html>

## ধাপ ২: হোম পেজ তৈরি করুন

<div class="page-content">
    <h2>🏠 হোম পেজ</h2>
    <p>এটি আমাদের ওয়েবসাইটের মূল পেজ যেখানে সব তথ্য পাবেন।</p>
</div>

## ধাপ ৩: আমাদের সম্পর্কে পেজ

<div class="page-content">
    <h2>ℹ️ আমাদের সম্পর্কে</h2>
    <p>আমরা একটি আধুনিক প্রযুক্তি কোম্পানি যা HTMX দিয়ে দুর্দান্ত ওয়েব অ্যাপ্লিকেশন তৈরি করি।</p>
</div>

## ধাপ ৪: সেবাসমূহ পেজ

<div class="page-content">
    <h2>🛠️ আমাদের সেবাসমূহ</h2>
    <p>আমরা ওয়েব ডেভেলপমেন্ট, HTMX ইন্টিগ্রেশন এবং আধুনিক SPA সলিউশন প্রদান করি।</p>
</div>

## ধাপ ৫: যোগাযোগ পেজ

<div class="page-content">
    <h2>📞 যোগাযোগ করুন</h2>
    <p>আমাদের সাথে যোগাযোগ করতে ইমেইল করুন: info@htmxspa.com অথবা ফোন করুন: ০১৭১২৩৪৫৬৭৮</p>
</div>

HTMX এর মূল বৈশিষ্ট্যসমূহ:

১. hx-get:

GET রিকুয়েস্ট পাঠানোর জন্য ব্যবহার হয়
উদাহরণ: hx-get="about.html"

২. hx-target:

কোন এলিমেন্টে রেসপন্স দেখাবে তা নির্ধারণ করে
উদাহরণ: hx-target="#content"

৩. hx-indicator:

লোডিং ইন্ডিকেটর দেখানোর জন্য
উদাহরণ: hx-indicator="#loading"

কিভাবে চালাবেন:

সব ফাইল একই ফোল্ডারে রাখুন
index.html ফাইলটি ব্রাউজারে খুলুন
নেভিগেশন বাটনগুলোতে ক্লিক করুন

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

✅ HTMX দিয়ে SPA তৈরি করা
✅ Dynamic content loading
✅ Navigation without page refresh
✅ Loading indicators
✅ Event handling

এই সিম্পল টেমপ্লেট দিয়ে আপনি আরও জটিল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন!

Htmx