AJAX (Asynchronous JavaScript and XML) একটি প্রযুক্তি যা পেজ রিফ্রেশ না করেই ওয়েব পেজের কন্টেন্ট আপডেট করতে সাহায্য করে। MySQLi এর সাথে AJAX ব্যবহার করে আপনি ডাইনামিকভাবে ডাটাবেসের সাথে CRUD (Create, Read, Update, Delete) অপারেশন করতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো স্মুথ এবং ইন্টারঅ্যাকটিভ করে তোলে।
এখানে, MySQLi দিয়ে AJAX-বেসড CRUD অপারেশন কিভাবে করতে হয়, তা বিস্তারিতভাবে দেখানো হচ্ছে।
MySQLi এবং AJAX-এর মাধ্যমে CRUD অপারেশন
১. Create (ডাটা তৈরি করা)
AJAX এবং MySQLi ব্যবহার করে নতুন ডাটা ইনসার্ট করা হয়। সাধারণত, ব্যবহারকারী ফর্মে ডাটা ইনপুট করে এবং AJAX কল ব্যবহার করে ডাটা পাঠানো হয় সার্ভারে। তারপর, MySQLi এর মাধ্যমে সেই ডাটা ডাটাবেসে সেভ করা হয়।
HTML ফর্ম:
<form id="addUserForm">
<input type="text" id="name" placeholder="Name" required>
<input type="email" id="email" placeholder="Email" required>
<button type="submit">Add User</button>
</form>
<div id="result"></div>
AJAX কল:
$(document).ready(function() {
$("#addUserForm").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.ajax({
url: "add_user.php",
method: "POST",
data: { name: name, email: email },
success: function(response) {
$("#result").html(response);
}
});
});
});
add_user.php (MySQLi দিয়ে ডাটা ইনসার্ট করা):
<?php
$mysqli = new mysqli("localhost", "username", "password", "database");
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$name = $_POST['name'];
$email = $_POST['email'];
$stmt = $mysqli->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
$stmt->execute();
echo "User added successfully!";
?>
২. Read (ডাটা পড়া)
AJAX ব্যবহার করে ডাটাবেস থেকে ডাটা রিট্রিভ করা হয় এবং এটি ওয়েব পেজে অ্যাসিনক্রোনাসলি প্রদর্শিত হয়। সাধারণত, একটি GET রিকোয়েস্ট ব্যবহার করা হয়।
AJAX কল:
$(document).ready(function() {
$.ajax({
url: "fetch_users.php",
method: "GET",
success: function(response) {
$("#result").html(response);
}
});
});
fetch_users.php (MySQLi দিয়ে ডাটা রিট্রিভ করা):
<?php
$mysqli = new mysqli("localhost", "username", "password", "database");
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$query = "SELECT * FROM users";
$result = $mysqli->query($query);
while ($row = $result->fetch_assoc()) {
echo "Name: " . $row['name'] . " - Email: " . $row['email'] . "<br>";
}
?>
৩. Update (ডাটা আপডেট করা)
AJAX এবং MySQLi এর মাধ্যমে ডাটা আপডেট করার জন্য, একটি PUT বা POST রিকোয়েস্ট ব্যবহার করা হয়। ব্যবহারকারী একটি ডাটা পছন্দ করে এবং তারপর তাকে এডিট করতে সক্ষম হয়।
HTML ফর্ম:
<form id="updateUserForm">
<input type="hidden" id="userId">
<input type="text" id="newName" placeholder="New Name" required>
<input type="email" id="newEmail" placeholder="New Email" required>
<button type="submit">Update User</button>
</form>
<div id="updateResult"></div>
AJAX কল:
$(document).ready(function() {
$("#updateUserForm").submit(function(e) {
e.preventDefault();
var userId = $("#userId").val();
var newName = $("#newName").val();
var newEmail = $("#newEmail").val();
$.ajax({
url: "update_user.php",
method: "POST",
data: { id: userId, name: newName, email: newEmail },
success: function(response) {
$("#updateResult").html(response);
}
});
});
});
update_user.php (MySQLi দিয়ে ডাটা আপডেট করা):
<?php
$mysqli = new mysqli("localhost", "username", "password", "database");
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];
$stmt = $mysqli->prepare("UPDATE users SET name = ?, email = ? WHERE id = ?");
$stmt->bind_param("ssi", $name, $email, $id);
$stmt->execute();
echo "User updated successfully!";
?>
৪. Delete (ডাটা মুছে ফেলা)
ডাটা মুছে ফেলার জন্য AJAX কল ব্যবহার করা হয়, যাতে ব্যবহারকারী কোনো ডাটা মুছে ফেলার পর পেজ রিফ্রেশ না হয় এবং দ্রুত ফলাফল দেখানো যায়।
AJAX কল:
$(document).ready(function() {
$(".deleteBtn").click(function() {
var userId = $(this).data("id");
$.ajax({
url: "delete_user.php",
method: "POST",
data: { id: userId },
success: function(response) {
alert(response);
location.reload(); // Reload the page after deleting
}
});
});
});
delete_user.php (MySQLi দিয়ে ডাটা মুছে ফেলা):
<?php
$mysqli = new mysqli("localhost", "username", "password", "database");
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$id = $_POST['id'];
$stmt = $mysqli->prepare("DELETE FROM users WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
echo "User deleted successfully!";
?>
AJAX এবং MySQLi ব্যবহার করে CRUD অপারেশন বাস্তবায়ন করা অত্যন্ত সহজ এবং এটি ব্যবহারকারীদের জন্য একটি স্মুথ এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা নিশ্চিত করে। AJAX-এর মাধ্যমে পেজ রিফ্রেশ ছাড়াই ডাটাবেসের সাথে অপারেশনগুলো সম্পন্ন করা সম্ভব, যা ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।
Read more
