Ajax এবং PHP ব্যবহার করে ডাটাবেস থেকে ডেটা ফেচ করে HTML টেবিলে প্রদর্শন করা একটি কার্যকরী পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং রেসপন্সিভ করে তোলে। এই প্রক্রিয়ায়, Ajax এর মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করা হয় এবং সেই ডেটা HTML টেবিলে ডায়নামিকভাবে রেন্ডার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Data and Display in Table</title>
</head>
<body>
<h1>Employee List</h1>
<button onclick="fetchEmployeeData()">Fetch Employees</button>
<table id="employee-table" border="1" style="width: 100%; margin-top: 20px; display: none;">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function fetchEmployeeData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট ওপেন করা
xhr.open("GET", "fetch_employees.php", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হলে
if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
var table = document.getElementById("employee-table");
var tbody = table.querySelector("tbody");
tbody.innerHTML = ""; // পূর্বের ডেটা ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
table.style.display = "table"; // টেবিল দেখানো
} else {
document.getElementById("response-container").innerHTML = "Error fetching data.";
}
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<button>) রয়েছে যা "Fetch Employees" নামে। এই বোতামে ক্লিক করলে fetchEmployeeData() ফাংশন কল হবে।<table> এলিমেন্ট তৈরি করা হয়েছে যাতে ডাটাবেস থেকে প্রাপ্ত ডেটা HTML টেবিলে দেখানো যায়।XMLHttpRequest অবজেক্ট ব্যবহার করা হয়েছে। রেসপন্স সফল হলে, JSON ডেটা প্রসেস করে HTML টেবিলে যোগ করা হয়।<?php
// ডাটাবেস কানেকশন সেটআপ
$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 json_encode(["error" => "Database connection failed."]);
exit();
}
// SQL কুয়েরি
$sql = "SELECT name, email, department FROM employees";
$result = $conn->query($sql);
// ডেটা রেসপন্স তৈরি করা
$employees = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
}
// JSON ফরম্যাটে হেডার সেট করা
header('Content-Type: application/json');
// JSON ফরম্যাটে ডেটা রিটার্ন করা
echo json_encode($employees);
// ডাটাবেস কানেকশন বন্ধ করা
$conn->close();
?>
বিস্তারিত ব্যাখ্যা:
SELECT কুয়েরি ব্যবহার করে employees টেবিল থেকে name, email, এবং department কলামগুলো ফেচ করা হয়েছে।json_encode() ফাংশন ব্যবহার করে JSON ফরম্যাটে রেসপন্স রিটার্ন করা হয়েছে।header('Content-Type: application/json'); দিয়ে JSON হেডার সেট করা হয়েছে, যাতে ব্রাউজার এবং ক্লায়েন্ট জানে যে এটি একটি JSON রেসপন্স।ডাটাবেসের নাম 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
);
fetchEmployeeData() ফাংশন কল হয়।fetch_employees.php এ।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
