পিএইচপি এসকিউএল ওয়ার্ডপ্রেস জাভাস্ক্রিপ্ট জেকুয়েরি এইচটিএমএল
ফোরাম
×

পিএইচপি টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction ইনস্টল-Install গঠনপ্রনালী-Syntax চলক-Variable পিএইচপি Echo / Print তথ্যের ধরণ-Data Types কনস্ট্যান্ট-Constant অপারেটর-Operator ফাংশন-Function সুপারগ্লোভাল-Superglobal

কন্ট্রোল স্টেটমেন্ট

if স্টেটমেন্ট if...Else স্টেটমেন্ট Switch স্টেটমেন্ট While লুপ DO...While লুপ For লুপ

পিএইচপি এ্যারে এবং স্ট্রিং

এ্যারে-Array এ্যারে সর্টিং -Array Sorting মাল্টি এ্যারে-Multi Array স্ট্রিং-String

পিএইচপি এডভান্স

তারিখ এবং সময় পিএইচপি include ফাইল হ্যান্ডলিং-File Handling ফাইল খোলা/পড়া ফাইল তৈরি/লিখা ফাইল আপলোড ফাইল ডাউনলোড কুকি-Cookie সেশন-Session ফিল্টার-Filter এডভান্স ফিল্টার-Advance Filter এঁরর হ্যান্ডলিং-Error Handling এক্সেপশন হ্যান্ডেলিং-Exception Handling

পিএইচপি ফরম

ফরম হ্যান্ডলিং ফরম ভ্যালিডেশন আবশ্যক ফরম ফিল্ড ফরম URL/E-mail সম্পূর্ণ ফরম

MySQL ডেটাবেজ

MySQL ডেটাবেজ MySQL ডেটাবেজ সংযোগ MySQL ডেটাবেজ তৈরী MySQL টেবিল তৈরী MySQL তথ্য ইনসার্ট MySQL শেষ আইডি পান MySQL একাধিক তথ্য ইনসার্ট MySQL প্রিপেয়ার্ড স্টেটমেন্ট MySQL তথ্য সিলেক্ট MySQL তথ্য ডিলিট MySQL তথ্য আপডেট MySQL সীমিত তথ্য সিলেক্ট

পিএইচপি- এক্সএমএল

PHP XML Parser PHP SimpleXML Parser PHP XML Parser PHP SimpleXML - Get PHP XML Expat PHP XML Dom

পিএইচপি - এজাক্স

পিএইচপি AJAX পরিচিতি AJAX পিএইচপি AJAX ডেটাবেজ AJAX এক্সএমএল AJAX সারাসরি সার্চ AJAX RSS রির্ডার AJAX Poll

পিএইচপি অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং(OOP)

OOP পরিচিতি OOP class তৈরী OOP objects তৈরী OOP $this কিওয়ার্ড OOP মেথড এবং প্রোপার্টি চেইনিং OOP অ্যাক্সেস মোডিফায়ার OOP ম্যাজিক মেথড এবং কন্সটেন্ট OOP ইনহেরিটেন্স OOP Abstract class এবং method OOP ইন্টারফেস OOP পলিমরফিজম OOP টাইপ হিন্টিং() OOP টাইপ হিন্টিনং ইন্টারফেস OOP স্ট্যাটিক মেথোড এবং প্রোপার্টি

 

পিএইচপি এবং 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 ইভেন্ট এর মাধ্যমে এই ফাংশনটি সম্পাদিত হয়।

উদাহরণঃ এইচটিএমএল এর সাথে ব্যবহৃত AJAX কোড
<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 ফাইলে লিংক টাই্টেল এর জন্য একটি কুয়েরি পাঠায় এবং অনুসন্ধানকৃত স্ট্রিং এর সাথে মিল সম্পন্ন সকল টাইটেল ব্রাউজারে ফেরত পাঠায়ঃ

উদাহরণঃ searchResult.php ফাইল
<?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 ফাইল থেকে প্রাপ্ত।

আমরা এই টিউটোরিয়ালটি সহজ করার জন্য সকল লিংক এর পরিবর্তে নমুনা ভিত্তিক টিউটোরিয়াল এর লিংক ব্যবহার করেছি।