نحوه پیاده سازی پیشنهاددهنده خودکار با استفاده از php و جاوااسکریپت (تمرین شماره پنج)

برای اینکه بتوانیم به بخش جستجوی سایت خود حالت حرفه ای بدهیم و تجربه کاربری کاربران را بالا ببریم می توانیم از حالت پیشنهاد خودکار در هنگام جستجو در فیلد مربوط به جستجو استفاده نمائیم.

در این حالت با وارد کردن کاراکتر توسط کاربر اطلاعات به سمت پایگاه داده post شده و نتیجه آن در قالب یک لیست برگشت داده می شود.

این مقدار بازگشتی را بصورت آبشاری در بخش جستجو نمایش می دهیم.

شروع ساخت یک پیشنهاددهنده خودکار با استفاده از php و جاوااسکریپت

برای اینکار در داخل htdocs مربوط به xampp یک پوشه به نام suggest ایجاد می کنیم.این پوشه دارای دو فایل index.php و suggest.php است.

در داخل فایل index.php متن موردنظر را جستجو کرده و اطلاعات به فایل suggest.php ارسال می شود.فایل suggest.php وظیفه اتصال به پایگاه داده دارد و پس از اتصال داده را در صورت وجود داشتن برگشت می دهد.

این اطلاعات دوباره از طریق فایل suggest.php به فایل index.php جهت نمایش ارسال می شود.

برای اتصال بین فایل ها و دریافت داده ها از تکنولوژی ajax استفاده می کنیم.برای استفاده از این تکنولوژی هم می توانیم از جاوااسکریپت خام استفاده کرده هم از کتابخانه jquery بهره ببریم.

ایجاد فرم جستجو درون فایل index.php

برای شروع درون فایل index.php فرم مربوط به جستجو را با دستورات html ایجاد می کنیم.

مثال:

<!DOCTYPE html>
<html>
<head>
<title>search suggest dejavan.ir</title>
<meta charset="UTF-8"/>
</head>
<body>
<div class="search">
<label>search:</label>
<input type="text" name="keywords" id="keywords" placeholder="search text..."/>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>search suggest dejavan.ir</title>

</head>

<body>

<label>search:</label>

</div>

</body>

</html>

در زیر این فرم المنتی با id به نام result جهت نمایش اطلاعات دریافتی قرار می دهیم. وجود این id باعث استفاده از آنها در جاوااسکریپت می شود.

مثال:

<!DOCTYPE html>
<html>
<head>
<title>search suggest dejavan.ir</title>
<meta charset="UTF-8"/>
</head>
<body>
<div class="search">
<label>search:</label>
<input type="text" name="keywords" id="keywords" placeholder="search text..."/>
</div>
<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>search suggest dejavan.ir</title>

</head>

<body>

<label>search:</label>

</div>

</body>

</html>

مشاهده پروژه

برای مشاهده پروژه ساخته شده ابتدا ابزار مربوط به apache و mysql را فعال کرده، سپس مرورگر را باز کرده و آدرس زیر را وارد می کنیم.

localhost/suggest

1	localhost/suggest

پس از بازکردن این آدرس فرم مربوط به جستجو برای شما نمایش داده می شود.

قرار دادن فایل jquery در سند

برای استفاده از آخرین نسخه فایل jquery به سایت https://jquery.com/ رفته و بر روی لینک download در بالا سمت راست کلیک نمائید.

پس از کلیک لیستی از نسخه های مختلف jquery هم بصورت دانلود فایل و هم بصورت cdn به شما نمایش داده می شود که بنده ترجیح می دهم از فایل استفاده کنم.

لینک مربوط به jquery را برداشته و در بخش header مربوط به پروژه خود قرار می دهم.

مثال:

<!DOCTYPE html>
<html>
<head>
<title>search suggest dejavan.ir</title>
<meta charset="UTF-8"/>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="search">
<label>search:</label>
<input type="text" name="keywords" id="keywords" placeholder="search text..."/>
</div>
<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>search suggest dejavan.ir</title>

</head>

<body>

<label>search:</label>

</div>

</body>

</html>

ارسال درخواست با ajax به صفحه suggest.php

حال باید دستور مربوط به ارسال درخواست مقدار جستجو شده را به فایل suggest.php را درون فایل index.php بنویسیم.

برای اینکار در انتهای سند تگ مربوط به script را ایجاد می کنم.

مثال:

<!DOCTYPE html>
<html>
<head>
<title>search suggest dejavan.ir</title>
<meta charset="UTF-8"/>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="search">
<label>search:</label>
<input type="text" name="keywords" id="keywords" placeholder="search text..."/>
</div>
<div id="result"></div>

<script>

</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>search suggest dejavan.ir</title>

</head>

<body>

<label>search:</label>

</div>

</script>

</body>

</html>

نحوه عملکرد و روش کد نویسی در بخش script پروژه

قصد داریم زمانی که کاربر در بخش فیلد جستجو واژه ای را جستجو کرد یعنی دکمه کیبورد را فشار داد مقدار مربوط به فیلد جستجو گرفته شود.در این دستور شرطی نیز برای خالی نبودن مقدار قرار داده ایم.

همچنین برای حذف مقادیر اضافی اطراف رشته از trim استفاده کرده ایم.

مثال:

<!DOCTYPE html>
<html>
<head>
<title>search suggest dejavan.ir</title>
<meta charset="UTF-8"/>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="search">
<label>search:</label>
<input type="text" name="keywords" id="keywords" placeholder="search text..."/>
</div>
<div id="result"></div>

<script>
$(".search input").keyup(function(event){
let val = event.target.value.trim();
if(val){
console.log(val)
}
})
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>search suggest dejavan.ir</title>

</head>

<body>

<label>search:</label>

</div>

$(".search input").keyup(function(event){

let val = event.target.value.trim();

if(val){

console.log(val)

}

})

</script>

</body>

</html>

در صورتی که شروع به جستجو کنید در بخش console مربوط به مرورگر مقادیر جستجو شده برای شما نمایش داده می شود.برای مشاهده console از کلید میانبر F12 استفاده نمائید.

روش اتصال به صفحه suggest.php

برای ارسال درخواست به صفحه suggest.php باید دستور مربوط به ajax را در داخل script خود بنویسیم.

نوع ارسال درخواست به صفحه به شکل get است و در هنگام ارسال نیز کلید و مقدار را ارسال می کنیم.

دستور get.$ si تعداد ۴ پارامتر دریافت می کند:

مقدار نخست: آدرس url
مقدار دوم: مقدار داده ارسالی
مقدار سوم: تابع بی نام برای دریافت پاسخ
مقدار چهارم: نوع داده ارسالی

مقدار نخست را برابر با آدرس فایل suggest.php قرار می دهیم.

مقدار دوم را برابر با داده ارسالی در قالب یک دستور json یا آبجکت بصورت {keyword : val} قرار می دهیم.

مقدار سوم را نیز یک تابع درنظر می گیریم که دارای دو پارامتر response و status است.مقدار response مقدار بازگشتی و مقدار status وضعیت پاسخ دریافتی است.

مثال:

<!DOCTYPE html>
<html>
<head>
<title>search suggest dejavan.ir</title>
<meta charset="UTF-8"/>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="search">
<label>search:</label>
<input type="text" name="keywords" id="keywords" placeholder="search text..." />
</div>
<div id="result"></div>

<script>
$(".search input").keyup(function(event){
let val = event.target.value.trim();
if(val){
$.get("suggest.php",{keyword : val},function(response, status){
if(status == 'success'){
$("#result").html(response);
}
})
}
})
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>search suggest dejavan.ir</title>

</head>

<body>

<label>search:</label>

</div>

$(".search input").keyup(function(event){

let val = event.target.value.trim();

if(val){

$.get("suggest.php",{keyword : val},function(response, status){

if(status == 'success'){

$("#result").html(response);

}

})

}

})

</script>

</body>

</html>

تا اینجا توانستیم درخواست خود را در قالب get به آدرس suggest.php ارسال کرده، نتیجه و وضعیت را دریافت کرده و در صورت success بودن مقدار نهایی دریافتی درون تگ div با آی دی response قرار می گیرد.

حال باید فایل suggest.php را کد نویسی کنیم.از طریق این فایل مقدار ارسالی در قالب get را دریافت کرده و آن را در پایگاه داده خود جستجو می کنیم و نتیجه آن را به صفحه suggest.php برگشت می دهیم.

فایل suggest.php

در ابتدا مقدار تنظیم شده پارامتر keyword که از صفحه index.php درخواست شده را با استفاده از متغیر فوق عمومی GET_$ دریافت می کنیم.بنابراین شرطی را برای بررسی اینکه این مقدار ارسال شده است در ابتدا قرار می دهیم.

مثال:

<?php
if(isset($_GET['keyword'])){

}
?>

<?php

if(isset($_GET['keyword'])){

}

در صورتی که مقدار وجود داشته باشد آن را به یک متغیر به نام keyword تخصیص می دهیم.همچنین جهت بالا بردن امنیت آن از دو تابع addslashes و htmlentities استفاده می کنیم.

مثال:

<?php
if(isset($_GET['keyword'])){
$keyword = addslashes(htmlentities($_GET['keyword']));
}
?>

<?php

if(isset($_GET['keyword'])){

$keyword = addslashes(htmlentities($_GET['keyword']));

}

حال باید به پایگاه داده با استفاده از دستور PDO متصل شویم.

در این جا به پایگاه داده مربوط به phpmyadmin به نام dbname متصل می شویم.این پایگاه داده دارای جدولی برای کاربران به نام dbname است که اطلاعات کاربران درون آن ثبت شده است.قصد داریم اطلاعات این جدول را به خروجی ارسال کنیم.

مثال:

<?php
if(isset($_GET['keyword'])){
$keyword = addslashes(htmlentities($_GET['keyword']));
$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");
}
?>

<?php

if(isset($_GET['keyword'])){

$keyword = addslashes(htmlentities($_GET['keyword']));

$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");

}

دستور اتصال خود به پایگاه داده را درون دستور try…catch قرار می دهیم.تا در صورتی که خطایی بوجود آمد آن را در خروجی نمایش دهیم.

مثال:

<?php
if(isset($_GET['keyword'])){
$keyword = addslashes(htmlentities($_GET['keyword']));
try{
$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");
if(!$connect){
throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');
}
}catch(Exception $e) {
echo 'Message: ' .$e->getMessage();
}
}
?>

<?php

if(isset($_GET['keyword'])){

$keyword = addslashes(htmlentities($_GET['keyword']));

try{

$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");

if(!$connect){

throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');

}

}catch(Exception $e) {

echo 'Message: ' .$e->getMessage();

}

پس از اتصال به پایگاه داده باید query خود را ارسال کنیم.نتیجه درخواست را به متغیر result تخصیص می دهیم.

مثال:

<?php
if(isset($_GET['keyword'])){
$keyword = addslashes(htmlentities($_GET['keyword']));
try{
$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");
if(!$connect){
throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');
}
$result = $connect->query("SELECT * FROM `tbl_users` WHERE `Fname` LIKE '%".$keyword."%'");
}catch(Exception $e) {
echo 'Message: ' .$e->getMessage();
}
}
?>

<?php

if(isset($_GET['keyword'])){

$keyword = addslashes(htmlentities($_GET['keyword']));

try{

$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");

if(!$connect){

throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');

}

$result = $connect->query("SELECT * FROM `tbl_users` WHERE `Fname` LIKE '%".$keyword."%'");

}catch(Exception $e) {

echo 'Message: ' .$e->getMessage();

}

حال که کوئری خود را ارسال کردیم نتیجه دریافتی را به شیوه fetchAll و حالت آرایه FETCH_ASSOC دریافت می کنیم.مقدار نتیجه را به یک حلقه while تخصیص می دهیم.

مثال:

<?php
if(isset($_GET['keyword'])){
$keyword = addslashes(htmlentities($_GET['keyword']));
try{
$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");
if(!$connect){
throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');
}
$result = $connect->query("SELECT * FROM `tbl_users` WHERE `Fname` LIKE '%".$keyword."%'");
while ($row = $result->fetch(PDO::FETCH_ASSOC)){
if (!empty($row)){

};
}

}catch(Exception $e) {
echo 'Message: ' .$e->getMessage();
}
}
?>

<?php

if(isset($_GET['keyword'])){

$keyword = addslashes(htmlentities($_GET['keyword']));

try{

$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");

if(!$connect){

throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');

}

$result = $connect->query("SELECT * FROM `tbl_users` WHERE `Fname` LIKE '%".$keyword."%'");

while ($row = $result->fetch(PDO::FETCH_ASSOC)){

if (!empty($row)){

};

}

}catch(Exception $e) {

echo 'Message: ' .$e->getMessage();

}

درون حلقه نام و نام خانوادگی را چاپ می کنیم.

مثال:

<?php
if(isset($_GET['keyword'])){
$keyword = addslashes(htmlentities($_GET['keyword']));
try{
$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");
if(!$connect){
throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');
}
$result = $connect->query("SELECT * FROM `tbl_users` WHERE `Fname` LIKE '%".$keyword."%'");
while ($row = $result->fetch(PDO::FETCH_ASSOC)){
echo "Name is:".$row["Fname"]." and last name is ".$row["Lname"]."<br>";
}

}catch(Exception $e) {
echo 'Message: ' .$e->getMessage();
}
}
?>

<?php

if(isset($_GET['keyword'])){

$keyword = addslashes(htmlentities($_GET['keyword']));

try{

$connect = new PDO("mysql:host=localhost;dbname=dejavan","root","");

if(!$connect){

throw new Exception('امکان اتصال به پایگاه داده وجود ندارد');

}

$result = $connect->query("SELECT * FROM `tbl_users` WHERE `Fname` LIKE '%".$keyword."%'");

while ($row = $result->fetch(PDO::FETCH_ASSOC)){

echo "Name is:".$row["Fname"]." and last name is ".$row["Lname"]."<br>";

}

}catch(Exception $e) {

echo 'Message: ' .$e->getMessage();

}

حال اگر در صفحه خود شروع به جستجو نماییم در صورت وجود رکورد آن را در زیر فرم در بخش result نمایش داده می شود.

کلمات کلیدی را وارد نمایید

نحوه پیاده سازی پیشنهاددهنده خودکار با استفاده از php و جاوااسکریپت (تمرین شماره پنج)

تمرین و مثال های PHP

شروع ساخت یک پیشنهاددهنده خودکار با استفاده از php و جاوااسکریپت

ایجاد فرم جستجو درون فایل index.php

مشاهده پروژه

قرار دادن فایل jquery در سند

ارسال درخواست با ajax به صفحه suggest.php

نحوه عملکرد و روش کد نویسی در بخش script پروژه

روش اتصال به صفحه suggest.php

فایل suggest.php

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش PHP و Mysql

تمرین و مثال های PHP

دسترسی سریع

کلمات کلیدی را وارد نمایید

نحوه پیاده سازی پیشنهاددهنده خودکار با استفاده از php و جاوااسکریپت (تمرین شماره پنج)

تمرین و مثال های PHP

شروع ساخت یک پیشنهاددهنده خودکار با استفاده از php و جاوااسکریپت

ایجاد فرم جستجو درون فایل index.php

مشاهده پروژه

قرار دادن فایل jquery در سند

ارسال درخواست با ajax به صفحه suggest.php

نحوه عملکرد و روش کد نویسی در بخش script پروژه

روش اتصال به صفحه suggest.php

فایل suggest.php

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش PHP و Mysql

تمرین و مثال های PHP

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب