AJAX এবং MySQL
ডেটাবেজ এর সাথে ইন্টারেক্টিভ(interactive) এবং ডাইনামিক যোগাযোগ তৈরির জন্য আমরা AJAX ব্যবহার করি। আপনি AJAX ব্যবহার করে ডেটাবেজ টেবিল থেকে সম্পূর্ণ তথ্য কুয়েরি না করে, বরং আপনি ক্ষুদ্র ক্ষুদ্র তথ্য কুয়েরি করতে পারেন।
AJAX এবং MySQL এর উদাহরণ
আমাদের এই উদাহরণে দেখবো, AJAX ব্যবহার করে আমরা কিভাবে আমরা ডেটাবেজ থেকে সম্পূর্ণ তথ্য অ্যাক্সেস না করে ক্ষুদ্র ক্ষুদ্র তথ্য অ্যাক্সেস করতে পারি। উদাহরণের ব্যাখ্যার জন্য আমরা সম্পূর্ণ কোড তিনভাগে ভাগ করেছিঃ এইচটিএমএল কোড, AJAX কোড এবং পিএইচপি কোড।
<!DOCTYPE html>
<html>
<head>
<title>পিএইচপি AJAX এবং MySQL এর ব্যবহার</title>
</head>
<body>
<form>
<select name="books" onchange="showBookDetails(this.value)">
<option value="">একটি বই সিলেক্ট করুনঃ</option>
<option value="1">উজান</option>
<option value="2">মেঘ বৃষ্টি আলো</option>
<option value="3">ভালোবেসে তোমাকে</option>
<option value="4">আনন্দ সহচরী</option>
<option value="5">বিষাদ সিন্ধু</option>
<option value="6">ইতি...</option>
</select>
</form>
<br>
<div id="bookDetails"><b>বইয়ের তথ্য সমুহ এখানে দেখাবে...</b></div>
</body>
</html>
উপরের উদাহরণে ইউজার যখন ড্রপডাইন তালিকা থেকে একটি বইয়ের নাম সিলেক্ট করবে, তখন showBookDetails() ফাংশনটি সম্পাদিত হবে এবং উক্ত বইয়ের বিস্তারিত তথ্য প্রদর্শিত হবে। onchange ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।
<script>
//এই ফাংশনের মধ্য দিয়ে ড্রপ-ডাউন লিস্ট থেকে স্ট্রিং/বইয়ের নাম অতিক্রম করানো হয়।
function showBookDetails(string) {
//কোন বইয়ের নাম অতিক্রম করানো না হলে প্রোগ্রামের কন্ট্রোল ফাংশন থেকে বের হয়ে যায়।
if (string == "") {
document.getElementById("bookDetails").innerHTML = "";
return;
}
//বইয়ের নাম অতিক্রম করানো হলে request নামে একটি অবজেক্ট তৈরি হয়।
else {
var request = new XMLHttpRequest();
//সার্ভার কার্য সম্পাদনের জন্য প্রস্তুত হলে এই অবজেক্টটি একটি এনোনিমাস ফাংশন তৈরি করে।
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
// উপরের শর্ত true হলে নির্বাচিত বইয়ের তথ্য দিয়ে bookDetails আইডি বিশিষ্ট div এলিমেন্টটি পূরন হয়।
document.getElementById("bookDetails").innerHTML = request.responseText;
}
};
// সার্ভারে অবস্থিত "bookdetails.php" ফাইলে i স্ট্রিং(বই) এর তথ্যের জন্য অনুরোধ পাঠায়।
request.open("GET","bookdetails.php?i="+string,true);
request.send();
}
}
</script>কোডের ব্যাখ্যাঃ
প্রথমেই আমরা চেক করে নিব ইউজার কোনো বইয়ের নাম সিলেক্ট করেছে কিনা। যদি না করে থাকে তাহলে ফাংশনটি সম্পাদিত হবে না।
অপরদিকে ইউজার যদি কোনো বইয়ের নাম সিলেক্ট করে থাকে তাহলে নিম্নের ঘটনা সমুহ ঘটবেঃ
- একটি XMLHttpRequest অবজেক্ট তৈরি হবে।
- কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
- সার্ভারে অবস্থিত "bookdetails.php" ফাইলে তথ্যের জন্য অনুরোধ পাঠায়।
- লক্ষ্য করুন আমরা "bookdetails.php" ফাইলের সাথে একটি প্যারামিটার i যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
- string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।
পিএইচপি ফাইল
উপরের জাভাস্ক্রিপ্ট কোড এর মাধ্যমে এই পিএইচপি ফাইল(bookdetails.php) এর সাথে যোগাযোগ সৃষ্টি করা হয় যা মাইএসকিউএল ডেটাবেজ সার্ভারে একটি কুয়েরি পাঠাবে এবং প্রাপ্ত ফলাফল সমুহ একটি এইচটিএমএল টেবিলের মাধ্যমে প্রদর্শন করানো হবেঃ
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<?php
// AJAX কর্তৃক পাঠানো বইয়ের নাম গ্রহন করবে।
$i = intval($_GET['i']);
// MySQL ডেটাবেজ এর সাথে সংযোগ তৈরি করবে।
$conn = mysqli_connect('localhost','username','password','ajax_DB');
if (!$conn) {
die('সংযোগ সম্পন্ন হয়নিঃ ' . mysqli_error($conn));
}
// তথ্যের জন্য পাঠানো বইকে খুঁজে বের করে।
$sql="SELECT * FROM user WHERE id = '".$i."'";
// খুঁজে পাওয়া বই এর তথ্য $result array ভ্যারিয়েবলে জমা হবে।
$result = mysqli_query($conn,$sql);
// খুঁজে পাওয়া বইয়ের তথ্য এই টেবিলের মাধ্যমে ব্রাউজারে উপস্থাপন করা হবে।
echo "<table>
<tr>
<th>বইয়ের নাম</th>
<th>লেখকের নাম</th>
<th>দাম</th>
<th>সারাংশ</th>
</tr>";
// $result array এ্রর শর্ত True থাকা পর্যন্ত লুপ হবে।
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['book_name'] . "</td>";
echo "<td>" . $row['writer_name'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "<td>" . $row['summary'] . "</td>";
echo "</tr>";
}
echo "</table>";
//কুয়েরি শেষে MySQL ডেটাবেজ থেকে সংযোগ বিচ্ছিন হবে।
mysqli_close($conn);
?>
</body>
</html>
কোডের ব্যাখ্যা
জাভাস্ক্রিপ্ট থেকে কুয়েরিটি যখন পিএইচপি ফাইলে পাঠানো হয় তখন নিন্মের ঘটনা সমুহ ঘটেঃ
- AJAX কর্তৃক পাঠানো বইয়ের নাম গ্রহন করবে।
- MySQL সার্ভারের সাথে একটি সংযোগ তৈরি করে।
- AJAX কর্তৃক পাঠানো বইয়ের তথ্য খুজে বের করে।
- একটি এইচটিএমএল টেবিল তৈরি হয় এবং খুঁজে পাওয়া বইয়ের তথ্যসহ ব্রাউজারে প্রদর্শিত হয়।
আমাদের উদাহরণে আমরা নিম্নের এই ডেটাবেজটি ব্যবহার করেছিঃ
| আইডি | বইয়ের নাম | লেখক | দাম | সারাংশ |
|---|---|---|---|---|
| ১ | উজান | শীর্ষেন্দু মুখোপাধ্যায় | ৫০.০০৳ | দুই বাংলার জনপ্রিয় ঔপন্যাসিক শীর্ষেন্দু মুখোপাধ্যায়ের উপন্যাস "উজান"। দারিদ্র্যক্লিষ্ট একটি পরিবারের সচ্ছলতার জন্য প্রাণান্তকর লড়াইয়ের বর্ণনা দিয়েছে লেখক গ্রন্থটিতে। |
| ২ | মেঘ বৃষ্টি আলো | সুনীল গঙ্গোপাধ্যায় | ৬০.০০৳ | তার পোশাকে এমন কিছু লোলুপা করার ব্যবস্থা নেই যে রাস্তার সব লোক তার দিকে হাঁ করে তাকিয়ে থাকবে। সে এমনিই মোটামুটি সুশ্রী তরুণী। কিন্তু পুরুষ প্রধান শহরে লোভী দৃষ্টি টানবার পক্ষে যথেষ্ট। সমাজে মেয়েদের বেড়ে উঠতে হয় নানা প্রতিবন্ধকতা মোকাবিলা করে। লেখক উপন্যাসটিতে অনুরাধা নামের একটি মেয়ের ঘটনা তুলে ধরেছেন সাবলীলভাবে। |
| ৩ | ভালোবেসে তোমাকে | সেলিনা ইসলাম | ৫০.০০৳ | ভালোবাসা অর্জন করতে গেলেও ভালবাসা দরকার। জলের স্রোতে ভেসে যাওয়া কোনো মানুষ যদি একটি কচুরিপানাও পায় বেঁচে থাকার শেষ চেষ্টায় সেই কচুরিপানা ধরেই কূলের সন্ধান করে। লেখক এই উপন্যাসটিতে এক অসহায় নারীজীবনের সার্থকতার কথা উপস্থাপন করেছেন। |
| ৪ | আনন্দ সহচরী | অরুণ চৌধুরী | ৪৫.০০৳ | ভালোবাসা পাওয়া- অথচ ভালোবাসাহীন জীবন কাটনো অসহায় নারীদের নিয়ে লেখা এই বই। লেখক এই বইতে এফডিসি কেন্দ্রিক নারী সহশিল্পীদের সংগ্রামী জীবনকে তুলে ধরেছেন। |
| ৫ | বিষাদ সিন্ধু | মীর মশাররফ হোসেন | ৮৫.০০৳ | দামেস্ক'র রাজা মাবিয়ার ছেলে এজিদের কামনা-বাসনা, ব্যর্থতা প্রতিহিংসা আর হাসান হোসেনের করুণ কাহিনী নিয়ে রচিত এই উপন্যাস বিষাদ সিন্ধু। |
| ৬ | ইতি... | ফারজানা রুম্পা | ২০.০০৳ | ছেলেটি ভালো আছে তার লালচুলো প্রেমিক নিয়ে। আর মেয়েটি ভালো থাকার চেষ্টা করে যাচ্ছে। মেয়েটি এখন বুঝেছে যে প্রতারনা করে তার জন্য ভালো থাকা সহজ, আর যে প্রতারিত হয় তার জন্য কঠিন। ছেলেটির প্রতি ঘৃনায় মেয়েটি একটি চিঠি লিখেছিল যার শেষ হয়েছিল বিদায় লিখে ইতি নয়। এই নিয়ে ফারজানা রুম্পার উপন্যাস ইতি... |
ডেটাবেজটি ডাউনলোড করুন।
আপনি উপরের উদাহরণের এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোড গুলোর সমন্বয়ে একটি ফাইল এবং পিএইচপি কোডগুলোর জন্য একটি ফাইল তৈর করে Ajax সম্বলিত এইচটিএমএল ফাইলটি রান করালে বাউজারে নিম্নের ন্যায় ফলাফল দেখবেন।
AJAX এর প্রয়োগ দেখার জন্য ড্রপ ডাউন লিস্ট থেকে যেকোনো একটি বই এর নাম সিলেক্ট করুনঃ
