অ্যাজাক্স (Ajax)

Ajax এবং PHP এর মাধ্যমে Database Query

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং Database Interaction (Ajax এবং ডাটাবেস ইন্টিগ্রেশন) | NCTB BOOK

Ajax এবং PHP এর মাধ্যমে ডাটাবেসে কুয়েরি করা একটি শক্তিশালী এবং প্রয়োজনীয় পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনকে আরও ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে। এই পদ্ধতিতে, Ajax রিকোয়েস্টের মাধ্যমে ক্লায়েন্ট সাইড থেকে PHP স্ক্রিপ্টে ডেটা পাঠানো হয়, এবং PHP সেই ডেটার ভিত্তিতে ডাটাবেসে কুয়েরি চালায়। এরপর, কুয়েরির ফলাফল Ajax এর মাধ্যমে ক্লায়েন্ট সাইডে পাঠানো হয় এবং UI-তে প্রদর্শিত হয়।

উদাহরণ: Ajax এবং PHP এর মাধ্যমে Database Query

১. HTML এবং JavaScript (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Database Query with Ajax</title>
</head>
<body>
    <h1>Search Employee</h1>
    <form id="searchForm">
        <label for="name">Enter Employee Name:</label>
        <input type="text" id="name" name="name" required>
        <button type="button" onclick="searchEmployee()">Search</button>
    </form>

    <div id="result-container">
        <!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script>
        function searchEmployee() {
            var name = document.getElementById('name').value;

            // XMLHttpRequest অবজেক্ট তৈরি করা
            var xhr = new XMLHttpRequest();

            // POST রিকোয়েস্ট ওপেন করা
            xhr.open("POST", "search_employee.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // রেসপন্স হ্যান্ডলিং সেট করা
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("result-container").innerHTML = xhr.responseText;
                    } else {
                        document.getElementById("result-container").innerHTML = "Error fetching data.";
                    }
                }
            };

            // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
            xhr.onerror = function() {
                document.getElementById("result-container").innerHTML = "Network error occurred. Please try again.";
            };

            // রিকোয়েস্ট পাঠানো
            xhr.send("name=" + encodeURIComponent(name));
        }
    </script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি ফর্ম (<form>) তৈরি করা হয়েছে, যেখানে ইউজার একটি এমপ্লয়ির নাম প্রবেশ করতে পারে। "Search" বোতামে ক্লিক করলে searchEmployee() ফাংশন কল হবে, যা Ajax POST রিকোয়েস্টের মাধ্যমে PHP স্ক্রিপ্টে ডেটা পাঠাবে।
  • result-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে PHP স্ক্রিপ্ট থেকে প্রাপ্ত ডেটা বা ত্রুটি মেসেজ দেখানো হবে।

২. PHP স্ক্রিপ্ট (search_employee.php):

<?php
// ফর্ম থেকে ডেটা সংগ্রহ করা
$name = trim($_POST['name']);

// ভ্যালিডেশন চেক করা
if (empty($name)) {
    http_response_code(400); // Bad Request
    echo "Please enter a name.";
    exit();
}

// ডাটাবেস কানেকশন সেটআপ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500); // Internal Server Error
    echo "Database connection failed.";
    exit();
}

// SQL কুয়েরি
$sql = "SELECT name, email, department FROM employees WHERE name LIKE ?";
$stmt = $conn->prepare($sql);
$searchTerm = "%" . $name . "%";
$stmt->bind_param("s", $searchTerm);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা রেসপন্স তৈরি করা
if ($result->num_rows > 0) {
    echo "<h2>Search Results:</h2><ul>";
    while ($row = $result->fetch_assoc()) {
        echo "<li>Name: " . $row['name'] . ", Email: " . $row['email'] . ", Department: " . $row['department'] . "</li>";
    }
    echo "</ul>";
} else {
    echo "No employees found with the name: " . htmlspecialchars($name);
}

// কানেকশন বন্ধ করা
$stmt->close();
$conn->close();
?>

বিস্তারিত ব্যাখ্যা:

  1. ডেটা সংগ্রহ এবং ভ্যালিডেশন:
    • PHP স্ক্রিপ্টে $_POST দিয়ে ডেটা সংগ্রহ করা হয়েছে এবং trim() ফাংশন দিয়ে ইনপুট পরিষ্কার করা হয়েছে।
    • যদি ইনপুট ফাঁকা থাকে, তাহলে একটি ত্রুটি মেসেজ এবং HTTP স্ট্যাটাস কোড 400 (Bad Request) রিটার্ন করা হয়েছে।
  2. ডাটাবেস কানেকশন:
    • ডাটাবেস কানেকশন সেটআপ করা হয়েছে এবং MySQL সার্ভারের সাথে কানেক্ট করা হয়েছে।
  3. SQL কুয়েরি:
    • LIKE অপারেটর ব্যবহার করে SQL কুয়েরি তৈরি করা হয়েছে, যা ইউজারের ইনপুট অনুযায়ী নাম মিলিয়ে ডেটা ফেচ করে।
    • prepare() মেথড ব্যবহার করে কুয়েরি প্রিপেয়ার করা হয়েছে এবং bind_param() দিয়ে প্যারামিটার বাউন্ড করা হয়েছে।
  4. রেসপন্স তৈরি করা:
    • যদি ডেটা পাওয়া যায়, তাহলে HTML তালিকা তৈরি করে রেসপন্স দেখানো হয়েছে।
    • যদি কোনো ডেটা না পাওয়া যায়, তাহলে একটি মেসেজ দেখানো হয়েছে।

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

  1. JavaScript এবং HTML:
    • ব্যবহারকারী যখন ফর্মে নাম প্রবেশ করে এবং "Search" বোতামে ক্লিক করে, তখন searchEmployee() ফাংশন কল হয়।
    • ফাংশনটি একটি Ajax POST রিকোয়েস্ট পাঠায় search_employee.php এ, যেখানে ব্যবহারকারীর ইনপুট পাঠানো হয়।
  2. PHP স্ক্রিপ্ট:
    • PHP স্ক্রিপ্ট ডাটাবেস থেকে ইনপুট অনুযায়ী ডেটা ফেচ করে এবং HTML ফরম্যাটে আউটপুট রিটার্ন করে।
  3. JavaScript Response Handling:
    • Ajax রিকোয়েস্ট সফল হলে, PHP স্ক্রিপ্ট থেকে প্রাপ্ত HTML ডেটা result-container ডিভে ইনজেক্ট করা হয়।

Ajax এবং Database Query এর সুবিধা:

  • পেজ রিফ্রেশ ছাড়াই ডেটা আপডেট: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডাটাবেসে কুয়েরি করা যায় এবং ডেটা আপডেট করা যায়।
  • JSON বা HTML ফরম্যাটে রেসপন্স: PHP স্ক্রিপ্ট JSON বা HTML ফরম্যাটে রেসপন্স দিতে পারে, যা JavaScript এর মাধ্যমে প্রসেস এবং ডিসপ্লে করা যায়।
  • Dynamic এবং Responsive User Interface: Ajax এবং PHP এর মাধ্যমে ডাটাবেস থেকে রিয়েল-টাইমে ডেটা ফেচ এবং প্রদর্শন করে ওয়েব পেজকে আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি করা যায়।

সারসংক্ষেপ:

  • Ajax এবং PHP: Ajax এবং PHP এর মাধ্যমে ডাটাবেস কুয়েরি করা হয়েছে এবং ফলাফল ডায়নামিকভাবে প্রদর্শন করা হয়েছে।
  • JavaScript এবং PHP Integration: JavaScript এর মাধ্যমে Ajax POST রিকোয়েস্ট পাঠানো হয়েছে এবং PHP স্ক্রিপ্ট সার্ভারে এক্সিকিউট করে ডেটা প্রদান করেছে।
  • Dynamic Data Display: ব্যবহারকারী পেজ রিলোড ছাড়াই ডেটা দেখতে এবং ইন্টারঅ্যাক্ট করতে পারে, যা ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ করে তোলে।
Promotion