পিএইচপি এবং AJAX এর মাধ্যমে সরাসরি অনুসন্ধান
AJAX ব্যবহার করে আপনি ইউজারদের জন্য অধিক বন্ধুসুলভ এবং ইন্টারেক্টিভ অনুসন্ধান ওয়েব এপ্লিকেশন তৈরি করতে পারেন।
AJAX ব্যবহার করে সরাসরি অনুসন্ধান
টিউটরিয়ালের এই পর্যায়ে আমরা আপনাকে দেখাবো কিভাবে আপনি আমাদের ওয়েব-সাইটের টিউটোরিয়ালসমূহ সরাসরি সার্চ করে খুঁজে পাবেন।
এক্ষেত্রেও আমরা পূর্বের ন্যায় কোডসমূহকে তিন ভাগে বিভক্ত করবোঃ এইচটিএমএল কোড, জাভাস্ক্রিপ্ট(AJAX) কোড এবং পিএইচপি কোড এবং তথ্য স্টোর বা বিনিময় এর জন্য একটি XML ফাইল ব্যবহার করবো। সুতরাং দেরি না করে চলুন কোডিং করা শুরু করি।
<!DOCTYPE html>
<html>
<head>
<title>পিএইচপি AJAX সরাসরি অনুসন্ধান</title>
</head>
<body>
<form>
<input type="text" size="50" onkeyup="showlink(this.value)">
</form>
<div id="searchResult"></div>
</body>
</html>
উপরের উদাহরণে ইউজার যখন ইনপুট বক্সে কোন অক্ষর টাইপ করবে, তখন showlink() ফাংশনটি সম্পাদিত হবে এবং ইনপুটকৃত অক্ষর দিয়ে শুরু সকল লিংক টাইটেল এর সাজেশন ড্রপ ডাউন আকারে দেখাবে। onkeyup ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।
<script>
// এই কোড সমূহের কমেন্ট দেখার জন্য পূর্ববর্তী অধ্যায় ভিজিট করুন।
function showlink(string){
if (string.length == 0) {
document.getElementById("searchResult").innerHTML = "";
document.getElementById("searchResult").style.border = "0px";
return;
}
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("searchResult").innerHTML = request.responseText;
document.getElementById("searchResult").style.border = "1px solid gray";
}
}
request.open("GET","searchResult.php?p = "+string, true);
request.send();
}
</script>কোডের ব্যাখ্যাঃ
প্রথমেই আমরা ইনপুট ফিল্ডটি ফাঁকা কিনা string.length == 0 এর মাধ্যমে চেক করে নিব। যদি এটি ফাঁকা হয় তাহলে টেক্সট প্লেসহোল্ডার এর কন্টেন্ট মুছে যায় এবং প্রোগ্রামের নিয়ন্ত্রণ showSuggestion() ফাংশন থেকে বের হয়ে যায়।
অপরদিকে ইনপুট ফিল্ডটি যদি ফাঁকা না হয় সেক্ষেত্রে নিম্নের ঘটনা গুলো ঘটবেঃ
- একটি XMLHttpRequest অবজেক্ট তৈরি করবে।
- কার্যসম্পাদনের জন্য সার্ভার প্রস্তুত হলে এটি একটি ফাংশন তৈরি করবে।
- সার্ভারে অবস্থিত "searchResult.php" ফাইলে তথ্যের জন্য একটি অনুরোধ পাঠাবে।
- লক্ষ্য করুন আমরা "searchResult.php" ফাইলের সাথে একটি প্যারামিটার p যুক্ত করেছি যা সার্ভারে একটি string ভ্যারিয়েবল পাঠায়।
- string ভ্যারিয়েবলটি ইনপুট বক্সের কন্টেন্ট ধারন করে।
পিএইচপি ফাইল
উপরের জাভাস্ক্রিপ্ট কোড এর মাধ্যমে এই পিএইচপি ফাইল(searchResult.php) এর সাথে যোগাযোগ সৃষ্টি করা হয়।
"searchResult.php" ফাইলের সোর্স কোড ইনপুট বক্সের স্ট্রিং এর সাপেক্ষে XML ফাইলে লিংক টাই্টেল এর জন্য একটি কুয়েরি পাঠায় এবং অনুসন্ধানকৃত স্ট্রিং এর সাথে মিল সম্পন্ন সকল টাইটেল ব্রাউজারে ফেরত পাঠায়ঃ
<?php
// AJAX কর্তৃক পাঠানো প্যারামিটার ধারন করবে
$p = $_GET["p"];
$xmlDocument = new DOMDocument();
$xmlDocument->load("search.xml");
$xmlTag = $xmlDocument->getElementsByTagName('search');
if (strlen($p)>0) {
$suggestion = "";
for($i = 0; $i<($xmlTag->length); $i++) {
$query = $xmlTag->item($i)->getElementsByTagName('query');
$link = $xmlTag->item($i)->getElementsByTagName('link');
if ($query->item(0)->nodeType == 1) {
//সার্চকৃত টেক্সটের সাথে মিল খুঁজে একটি লিংক রেব করে
if(stristr($query->item(0)->childNodes->item(0)->nodeValue,$p)) {
if ($suggestion == "") {
$suggestion = "<a href='" .
$link->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$query->item(0)->childNodes->item(0)->nodeValue . "</a>";
} else {
$suggestion = $suggestion . "<br /><a href='" .
$link->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$query->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// যদি কোনো আউটপুট না পাওয়া যায় সেক্ষেত্রে "দুঃখিত কোনো সাজেশন নেই!" দেখাবে
if ($suggestion == "") {
$result = "দুঃখিত কোনো সাজেশন নেই!";
} else {
$result = $suggestion;
}
// সার্চের ফলাফল ব্রাউজারে দেখাবে।
echo $result;
?>কোডের ব্যাখ্যা
জাভাস্ক্রিপ্ট(AJAX) থেকে কুয়েরিটি যখন পিএইচপি ফাইলে পাঠানো হয় তখন নিম্নের ঘটনাসমুহ ঘটেঃ- AJAX কর্তৃক পাঠানো প্যারামিটার গ্রহন করে।
- একটি XML ডোম(DOM) অবজেক্ট তৈরি করে
- সকল <title> এলিমেন্ট এর মধ্য থেকে AJAX কর্তৃক পাঠানো টেক্সট এর তথ্য খুজে বের করে।
- প্রাপ্ত ফলাফল ব্রাউজারে ফেরত পাঠায়।
- $suggestion ভ্যারিয়েবলে সঠিক " url" এবং "title" সেট করা হয়। যদি একের অধিক টাইটেল এর সাথে মিল খুঁজে পাওয়া যায় তাহলে সকল টাইটেলকেই(url সহ) ভ্যারিয়বলে যোগ করা হয়।
- যদি কোনো মিল না পাওয়া যায়, সে ক্ষেত্রে "দুঃখিত কোনো সাজেশন নেই!" ম্যাসেজটি দেখাবে।
উপরের কোড গুলোর সমন্বয়ে নিম্নে আমরা একটি সরাসরি অনুসন্ধান এপ্লিকেশন তৈরি করেছি যেখানে ব্যবহারকারী ইনপুট বক্সে টাইপ করা শুরু করলেই তাকে সম্ভাব্য সাজেশন দেখাবে।
সাধারন অনুসন্ধানের তুলনায় সরাসরি অনুসন্ধান অনেক সুবিধাজনক।
- আপনার টাইপ এর ভিত্তিতে আপনি ফলাফল দেখতে পাবেন।
- আপনি যত বেশী টাইপ করবেন ফলাফল এর পরিমানও তত সংকির্ণ হতে থাকবে।
- ফলাফল এর পরিমান যদি সংকীর্ণ হয়ে যায়, সেক্ষেত্রে অধিক ফলাফল এর জন্য কিছু ক্যারেক্টার মুছে ফেলুন।
নিম্নের ইনপুট বক্সে আমাদের যে কোনো টিউটোরিয়াল অনুসন্ধান করুনঃ
উপরের ইনপুট বক্সে প্রাপ্ত ফলাফল গুলো search.xml ফাইল থেকে প্রাপ্ত।
আমরা এই টিউটোরিয়ালটি সহজ করার জন্য সকল লিংক এর পরিবর্তে নমুনা ভিত্তিক টিউটোরিয়াল এর লিংক ব্যবহার করেছি।
