آموزش ساخت جستجو پیشرفته PHP و Ajax
ساخت جستجو پیشرفته PHP و Ajax – در این آموزش فرم جستجویی را خواهیم ساخت که از فناوری ایجکس استفاده می کند و مطالب پیدا شده را به همراه ( عنوان ، لینک ، تصویر شاخص ) نمایش می دهد .
این آموزش دارای 3 فایل می باشد »
1- index.php که مطالب منتشر شده را نمایش می دهد و به همراه فرم جستجو می باشد
2- search.php که با توجه به query داده شده در دیتابیس جستجو می کند و نتیجه را به صورت خروجی json برمی گرداند .
3- app.js درخواست ajax را به سمت search.php ارسال می کند .
1- فایل index.php که دارای فرم جستجو می باشد
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RapidCode.IR - ساخت جستجوی پیشرفته AJAX با PHP و Javascript</title>
<style>
body {
text-align: center;
overflow-x: hidden;
}
#introduce {
color: white;
text-decoration: none;
font-weight: bold;
display: block;
width: 100%;
padding: 5px 10px;
background-color: #4CAF50;
text-align: center;
font-size: 25px;
margin-bottom: 45px;
}
.container{
width: 70%;
margin: 15px auto;
direction: rtl;
}
article {
width: 25%;
border: 2px solid skyblue;
padding: 10px;
float: right;
margin-left: 15px;
}
article img {
width: 200px;
}
article h2{
height: 82px;
}
article p{
height: 56px;
overflow: hidden;
}
article a {
text-decoration: none;
font-weight: bold;
background-color: #FF9800;
color: white;
width: 100%;
padding: 10px 0;
display: block;
}
#search-ajax-result{
display: block;
width: 50%;
margin-right: 25%;
padding-right: 15%;
padding-top: 30px;
}
#search-ajax-result td img{
width: 90px;
}
#search-ajax-result td a{
text-decoration: none;
font-weight: bold;
color: black;
font-size: medium;
}
</style>
</head>
<body>
<a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>
<div class="container">
<div class="search-wrapper">
<input type="text" id="search" name="search" value="">
<input type="button" id="submit" value="جستجو">
<table id="search-ajax-result">
<tbody>
</tbody>
</table>
</div>
<?php
require_once "search.php";
search();
?>
<h1><?php echo $GLOBALS['title'] ?></h1>
<?php
foreach ($GLOBALS['rows'] as $row):
?>
<article>
<img src="<?php echo $row['thumbnail'] ?>" alt="<?php echo $row['title'] ?>">
<h2><?php echo $row['title'] ?></h2>
<p><?php echo $row['content'] ?></p>
<a href="<?php echo $row['link'] ?>" target="_blank">ادامه مطلب</a>
</article>
<?php endforeach;?>
</div>
<script src="app.js"></script>
</body>
</html>
2- فایل search.php که مطالب را مطابق با query پیدا می کند
function search(){
$mysqli = new mysqli("localhost", "root", "", "ajax_search");
$mysqli->set_charset("utf8");
$stmt = $mysqli->stmt_init();
if (!empty($_GET['search'])) {
$GLOBALS['title'] = "جستجو : {$_GET['search']}";
$search_query = "title LIKE ? OR content LIKE ?";
$_GET['search'] = "%{$_GET['search']}%";
} else {
$GLOBALS['title'] = "لیست مطالب";
$search_query = "true";
}
$query = "SELECT * FROM `posts` WHERE {$search_query}";
$stmt->prepare($query);
if (!empty($_GET['search'])) {
$stmt->bind_param('ss', $_GET['search'], $_GET['search']);
}
$GLOBALS['rows'] = [];
if ($stmt->execute() && $res = $stmt->get_result()) {
if ($stmt->affected_rows || $res->num_rows) {
while ($row_loop = $res->fetch_assoc()) {
$GLOBALS['rows'][] = $row_loop;
}
}
}
$stmt->close();
$mysqli->close();
}
if(!empty($_GET['search']) && @$_GET['ext'] == "js"){
header("Content-Type: application/json");
search();
echo json_encode($GLOBALS['rows']);
}
3- فایل app.js که درخواست های ajax را ارسال می کند
const searchQuery = document.getElementById("search");
const searchBtn = document.getElementById("submit");
searchBtn.onclick = function() {
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
let queryString = new URLSearchParams;
queryString.append("search", searchQuery.value);
queryString.append("ext", "js");
queryString = "?" + queryString.toString();
xhr.open("GET", location.origin + "/search.php" + queryString);
xhr.onload = function() {
const posts = this.response;
const tableResult = document.querySelector("#search-ajax-result tbody");
tableResult.innerHTML = "";
if (0 < posts.length) {
for (const post of posts) {
const htmlTemplate = ajaxHtmlResult(post);
tableResult.innerHTML += htmlTemplate;
}
} else {
tableResult.innerHTML += "موردی یافت نشد";
}
}
xhr.onerror = function() {
console.warn("[XHR Error]");
}
xhr.send();
}
function ajaxHtmlResult(data) {
const templateHtml = `${data.title} 
دموی پروژه جستجو پیشرفته PHP و Ajax
قبل از اجرای برنامه وارد پوشه post DATABASE to import شده دیتابیس را import کنید
لیست نظرات
سلام خسته نباشید . ممنون از آموزشتون من تازه کار هستم و کد شمارو یه مقدار ویرایش کردم و تو پروژه خودم گذاشتم ولی جواب نداد . پروژه ای که برا دانلود گذاشتید رو دانلود کردم و رو لوکال بالا اوردم . دیتابیس رو درست کردم و نام دیتابیس رو تو فایل سرچ عوض کردم . فایل sql هم ایمپورت کردم . اما بعد از کلیک روی جستوجو هیچ اتفاقی نمی افته . بنظر شما مشکل از کجای کار هست؟
درود سورس پروژه + دیتابیس استفاده شده در قالب zip بفرستید تا بررسی بشه .
مشکل برطرف شد. تشکر از آموزش خوبتون