PHP & AJAX & MySQL 即時搜尋系統、邊打字邊搜尋資料庫

2019/06/18 10,625 2 網站技術 , 資訊安全 , 伺服器 , 資料庫 , PHP , JavaScript , jQuery , SQL

一般來說如果一個網站有站內搜尋,可以更方便使用者找到想要的資訊,但如果要增進使用者體驗,有什麼方法可以讓簡單的搜尋變得更加美好?沒錯!那就是運用前端技術 AJAX 來達到邊打字邊搜尋資料庫的效果!後端程式 PHP 則負責將獲得的搜尋文字做資安處理,也就是將特殊符號轉譯,最後與 SQL 查詢語法一起送給 MySQL 資料庫,資料庫就會即時回傳資料,就能即時在同個網頁獲得搜尋結果而不需要換頁,這樣的效果早就在很多網站使用了!不過如果像我這樣的小型網站也能採用,這一定會非常的酷炫!

AJAX 可以透過 jQuery 載入,只要透過 jQuery 就能使用這項技術,我們整個即時搜尋系統只要兩個檔案:一個 .html 靜態網頁與另一個 .php 的動態網頁,前者是搜尋框與 AJAX 發揮實力的地方,後者是利用 PHP 幫助我們去資料庫中撈我們要的資訊,所以當然 MySQL 資料庫也是要有相對應的資料才完整囉!

學習這篇文章的技術,需要對 HTML、PHP、jQuery(JavaScript 函式庫,內含 AJAX)、MySQL(資料庫管理系統)與 SQL(資料庫查詢語法)有一定的了解,所以基礎真的很重要,這樣學習才能暢行無阻!一起加油吧!


▲「PHP & AJAX & MySQL 即時搜尋系統」實際運作截圖。

⌨ 完整原始碼提供與備註:

這邊提供完整原始碼與備註,提供給您參考!

📄 資料庫建立:php.sql

請在 MySQL 資料庫中建立名為 php 的資料庫,並新增名為 search 的資料表。

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE DATABASE IF NOT EXISTS `php` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE `php`;

DROP TABLE IF EXISTS `search`;
CREATE TABLE `search` (
  `post_id` bigint(20) NOT NULL,
  `post_title` text COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_context` longtext COLLATE utf8mb4_unicode_ci NOT NULL,
  `post_date` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `search` (`post_id`, `post_title`, `post_context`, `post_date`) VALUES
(1, '萌芽網頁是誰創立的?', '萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!萌芽站長唷!', '2019-06-18 16:03:15'),
(2, '萌芽系列網站何時誕生的?', '2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!2011年的9月由萌芽站長創立唷!', '2019-06-18 16:04:15'),
(3, '萌芽網頁的網址是?', 'https://mnya.tw/\r\n,不然呢?', '2019-06-18 16:05:00');


ALTER TABLE `search`
  ADD PRIMARY KEY (`post_id`);


ALTER TABLE `search`
  MODIFY `post_id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

📄 搜尋結果:search.html

這個頁面就是搜尋框與搜尋結果的顯示網頁,運用 AJAX 技術即時跟 search.php 要資料。

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP & AJAX & MySQL 即時搜尋系統</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    搜尋:<input type="text" name="search_text" id="search_text" placeholder="請輸入搜尋文字" class="form-control" /> (標題、內文都可搜尋)
    <br><br>
    <div id="search_result"></div>

    <script>
        $(document).ready(function () {

            load_data();

            function load_data(query) {
                $.ajax({
                    url: "search.php",
                    method: "GET",
                    data: {
                        s: query
                    },
                    success: function (data) {
                        $('#search_result').html(data);
                    }
                });
            }
            $('#search_text').keyup(function () {
                var search = $(this).val();
                if (search != '') {
                    load_data(search);
                } else {
                    load_data();
                }
            });
        });
    </script>

</body>

</html>

📄 抓資料庫的資料:search.php

將 search.html 的資料送入後做處理,跟 MySQL 要資料並顯示搜尋結果或整個資料表的資料,這邊通常會放入一些資訊安全機制。

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>

<body>

<?php

// 定義資料庫資訊
$DB_NAME = "php";
$DB_USER = "root";
$DB_PASS = "mysql";
$DB_HOST = "localhost";

// 連接 MySQL 資料庫伺服器
$con = mysqli_connect($DB_HOST, $DB_USER, $DB_PASS);
if (empty($con)) {
    print mysqli_error($con);
    die("資料庫連接失敗!");
    exit;
}

// 選取資料庫
if (!mysqli_select_db($con, $DB_NAME)) {
    die("選取資料庫失敗!");
}

// 設定連線編碼
mysqli_query($con, "SET NAMES 'UTF-8'");

// 顯示表頭
echo "<table>
<tr>
<th>文章編號</th>
<th>文章標題</th>
<th>文章內文</th>
<th>發表時間</th>
</tr>";

if (isset($_GET['s'])) { // 如果有搜尋文字顯示搜尋結果

    $s = mysqli_real_escape_string($con, $_GET['s']);
    $sql = "SELECT * FROM search WHERE post_title LIKE '%" . $s . "%' OR post_context LIKE '%" . $s . "%'";
    $result = mysqli_query($con, $sql);

    // SQL 搜尋錯誤訊息
    if (!$result) {
        echo ("錯誤:" . mysqli_error($con));
        exit();
    }

    // 搜尋無資料時顯示「查無資料」
    if (mysqli_num_rows($result) <= 0) {
        echo "<tr><td colspan='4'>查無資料</td></tr>";
    }

    // 搜尋有資料時顯示搜尋結果
    while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['post_id'] . "</td>";
        echo "<td>" . $row['post_title'] . "</td>";
        echo "<td>" . $row['post_context'] . "</td>";
        echo "<td>" . $row['post_date'] . "</td>";
        echo "</tr>";
    }

} else { // 如果沒有搜尋文字顯示所有資料

    $sql = "SELECT * FROM search";
    $result = mysqli_query($con, $sql);

    if (!$result) {
        echo ("錯誤:" . mysqli_error($con));
        exit();
    }

    while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['post_id'] . "</td>";
        echo "<td>" . $row['post_title'] . "</td>";
        echo "<td>" . $row['post_context'] . "</td>";
        echo "<td>" . $row['post_date'] . "</td>";
        echo "</tr>";
    }

}

echo "</table>";

mysqli_close($con); // 連線結束

?>

</body>

</html>

💬 備註:

mysqli_real_escape_string(connection,escapestring);

▲ 這個函數可以幫助我們將特殊字元做轉換,以免造成駭客的攻擊,前者填入 MySQL 連接資訊,後者放入要處理的字串。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇