পিএইচপি এবং এজ্যাক্স
অধিক ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে AJAX ব্যবহৃত হয়।
পিএইচপি এবং AJAX এর উদাহরণ
এখন আমরা একটি উদাহরণের সাহায্যে এজ্যাক্স এবং পিএইচপির ব্যবহার দেখবো। এক্ষেত্রে ইনপুট ফিল্ডে অক্ষর টাইপ করার সঙ্গে সঙ্গে AJAX পিএইচপি ফাইল থেকে একগুচ্ছ সাজেশন দেখাবে।
<!DOCTYPE html>
<html>
<head>
<title>পিএইচপি এবং এজ্যাক্সের একত্রে ব্যবহার</title>
</head>
<body>
<p>নিম্নের ইনপুট ফিল্ডে যে কোনো নাম টাইপ করুনঃ</p>
<form>
আপনার নামঃ <input type="text" onkeyup="showSuggestion(this.value)">
</form>
<p>সাজেশনঃ <span id="getSuggestion"></span></p>
</body>
</html>
উপরের উদাহরনে ইউজার যখন ইনপুট ফিল্ডে কোনো অক্ষর টাইপ করে তখন showSuggestion() ফাংশনটি সম্পাদিত হয়। এই ফাংশনটি onkeyup ইভেন্টের মাধ্যমে সম্পাদিত হয়।
<script>
function showSuggestion(string) {
if (string.length == 0) {
document.getElementById("getSuggestion").innerHTML = "";
return;
} else {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("getSuggestion").innerHTML = request.responseText;
}
};
request.open("GET", "suggestion.php?i=" + string, true);
request.send();
}
}
</script>কোডের ব্যাখ্যাঃ
প্রথমেই আমরা ইনপুট ফিল্ডটি ফাঁকা কিনা string.length == 0 এর মাধ্যমে চেক করে নিব। যদি এটি ফাঁকা হয় তাহলে টেক্সট প্লেসহোল্ডার এর কন্টেন্ট মুছে যায় এবং প্রোগ্রামের নিয়ন্ত্রণ showSuggestion() ফাংশন থেকে বের হয়ে যায়।
অপরদিকে ইনপুট ফিল্ডটি যদি ফাঁকা না হয় সেক্ষেত্রে নিম্নের ঘটনা গুলো ঘটবেঃ
- একটি XMLHttpRequest অবজেক্ট তৈরি করবে।
- কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
- সার্ভারে অবস্থিত "suggestion.php" ফাইলে তথ্যের জন্য একটি অনুরোধ পাঠাবে।
- লক্ষ্য করুন আমরা "suggestion.php" ফাইলের সাথে একটি প্যারামিটার i যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
- string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।
পিএইচপি ফাইল
আমরা এই ফাইলটি "suggestion.php" নামে সংরক্ষন করবো।
পিএইচপি ফাইলটি অ্যারের মধ্যে ইনপুট ফিল্ডের নাম/নামসমূহ আছে কিনা চেক করে। মিল খুঁজে পেলে অনুরূপ নামগুলো ব্রাউজারে ফেরত পাঠায়ঃ
<?php
//সুপারিশকৃত নামসমূহের Array
$names = ["Aziz", "Aysha", "Asma", "Badol", "Cinderella",
"Devid", "Eva", "Faruk", "Faysal", "Hafiz", "Imran",
"Jahangir", "Jannat", "Joy", "Konika", "Minhazur",
"Motiur", "Monir", "Orin", "Raju", "Ria", "Ratul",
"Saleh", "Shahid", "Shahparan", "Shaikatul", "Shamima",
"Shilpi", "Shapla", "Shovon", "Tamim", "Tahmid",
"Tamjid", "Taslima", "Upoma", "Yeasin", "Zehadul"];
// লিংক থেকে i প্যারামিটার ধরবে
$input = $_REQUEST["i"];
//suggestion এর প্রাথমিক মান ফাঁকা
$suggestion = "";
/* যদি $input ফিল্ড ফাঁকা না হয় সেক্ষেত্রে $names অ্যারের সকল নাম
এর সাথে চেক করে দেখে কোন মিল আছে কিনা */
if ($input !== "") {
$input = strtolower($input);
$len=strlen($input);
foreach($names as $name) {
if (stristr($input, substr($name, 0, $len))) {
if ($suggestion === "") {
$suggestion = $name;
} else {
$suggestion .= ", $name";
}
}
}
}
// যদি কোনো মিল না পাওয়া যায় সেক্ষেত্রে "দুঃখিত কোনো সাজেশন নেই!" দেখাবে
if($suggestion === "") {
echo "দুঃখিত কোনো সাজেশন নেই!";
} else{
echo $suggestion;
}
?>উপরের কোডগুলোর সমন্বয়ে নিচের এপ্লিকেশনটি তৈরি করা হয়েছে। প্রয়োগ দেখার জন্য নিচের ইনপুট ফিল্ডে অক্ষর টাইপ করুন।
নিম্নের ইনপুট বক্সে টাইপ করা শুরু করেনঃ
পরামর্শঃ
