PHP

Pencarian langsung di PHP dan MySQL dengan AJAX

Posted on by administrator
07
Jun
0
(0)

oleh Vincy. Terakhir diubah pada 31 Mei 2021.

Pencarian langsung adalah fitur praktis untuk memfilter data yang memperkaya pengalaman pengguna. Ini membantu untuk memilih hasil berdasarkan kriteria yang dipilih oleh pengguna akhir.

Upaya implementasi fitur pencarian didasarkan pada kompleksitas kebutuhan pencarian aplikasi. Juga, itu bervariasi tergantung pada kebutuhan dan struktur aplikasi.

Daftar item di bawah ini menunjukkan jenis mekanisme pencarian yang biasa digunakan oleh aplikasi.

  1. Filter umum tunggal untuk mencari beberapa kolom.
  2. Filter pencarian kolom-bijaksana khusus.
  3. Filter rentang dengan rentang tanggal, kinerja, perkiraan, dan lainnya.
  4. Filter pencarian lanjutan seperti Google.

Di era aplikasi web/seluler modern ini, antarmuka aplikasi yang diperkaya membuat pencarian menjadi mudah bagi pengguna akhir. Pengayaan desain meningkatkan kegunaan pencarian dengan fitur-fitur seperti pelengkapan otomatis, sorotan kata kunci, dan lainnya.

Pencarian Langsung di PHP dan MySQLl

Apa yang ada di dalam?

  1. Plugin dan perpustakaan pencarian langsung yang populer
  2. Tentang contoh ini
  3. Skrip basis data
  4. Konfigurasi aplikasi
  5. Rendering daftar data dari database menggunakan MySQL
  6. skrip jQuery AJAX untuk meminta pencarian langsung
  7. Mekanisme kode untuk pencarian langsung di PHP
  8. Output: Pencarian langsung di PHP

Ada plugin populer yang tersedia untuk mengintegrasikan fitur pencarian untuk suatu aplikasi.

DataTables – Pustaka Javascript jQuery memiliki fitur pencarian yang mulus. Hanya saja plugin ini tidak hanya menyediakan pencarian tetapi juga banyak seperti sort, pagination, inline-editing.

Pada artikel sebelumnya, saya telah membuat kode untuk mengaktifkan pencarian kolom Datatables dengan pemrosesan sisi server.

Solusi alternatif lain untuk mengaktifkan pencarian adalah perpustakaan pencarian langsung yang diaktifkan AJAX.

Memiliki lebih banyak pilihan online, preferensi saya adalah menggunakan kode khusus untuk sebagian besar fungsi aplikasi. Karena perpustakaan dapat berubah menjadi kelebihan beban, minimalisme akan menghemat tenaga selama pemeliharaan.

Tentang contoh ini

Ini untuk membuat pencarian langsung di PHP untuk menyaring hasil database. Ini memungkinkan pengguna memasukkan kata kunci, berdasarkan pencarian yang akan terjadi.

Contoh ini akan menampilkan satu kolom input di atas daftar data dari database. Pencarian kata kunci diterapkan ke semua kolom database untuk menemukan kecocokan.

Saya pikir akan lebih baik untuk menyorot kata kunci pencarian bersama dengan hasil yang difilter. Tapi, itu hanya fitur yang dapat dikonfigurasi.

Contoh pencarian langsung ini juga menampilkan hasil yang diberi halaman. Kriteria pencarian akan tetap hidup selama pagination. Hitungan hasil per halaman berasal dari konfigurasi aplikasi.

Ini menggunakan PDO untuk menghubungkan database MySQL untuk mengambil hasil selama pencarian dan pagination.

Tangkapan layar berikut menunjukkan struktur file dari contoh ini.

File Pencarian Langsung

Skrip basis data

Skrip database ini menyertakan pernyataan CREATE, PRIMARY KEY, spesifikasi AUTO-INCREMENT dengan dump data.

Impor skrip ini sebelum menjalankan contoh ini. Ini membantu untuk mencoba pencarian langsung pada data dinamis.

CREATE TABLE IF NOT EXISTS `posts` (
`id` int(8) NOT NULL,
  `post_title` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `post_at` date DEFAULT NULL
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `posts`
--

INSERT INTO `posts` (`id`, `post_title`, `description`, `post_at`) VALUES
(1, 'Plugin integration', 'Documentation to help to integrate plugins.', '2021-03-02'),
(2, 'Learning languages', 'Guide to get started learning new languages.', '2021-03-25'),
(3, 'Editor tools', 'Number of tools and utilities available in the editor.', '2021-03-25');

--
-- Indexes for dumped tables

ALTER TABLE `posts`
 ADD PRIMARY KEY (`id`);

ALTER TABLE `posts`
MODIFY `id` int(8) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=18;

Konfigurasi aplikasi

Ini adalah konfigurasi dasar yang dibuat untuk kode ini. Ini memiliki konstanta untuk menentukan unit per halaman dan arahan untuk mengaktifkan atau menonaktifkan fitur opsional dari fungsi pencarian langsung.

Kode ini menetapkan AKTIFKAN_HIGHLIGHT nilai ke boolean benar. Jadi, ini menyoroti kata kunci di antara hasil yang difilter.

lib/Config.php

<?php
namespace Phppot;

class Config
{

    const ENABLE_HIGHLIGHT = true;

    const LIMIT_PER_PAGE = 2;
}

Rendering daftar data dari database menggunakan MySQL

Ini adalah halaman arahan yang menampilkan data dinamis dengan opsi pencarian langsung.

Ini termasuk kode PHP untuk query database dan mengambil hasilnya untuk dicantumkan dalam format tabel.

Saat mengirimkan formulir pencarian, ia memanggil AJAX untuk mendapatkan hasil yang difilter dari server.

Ini juga mencakup opsi pagination untuk bergerak maju mundur. Permintaan pagination juga dikirim melalui panggilan AJAX untuk menampilkan tampilan data yang mulus.

index.php

<?php
namespace Phppot;

use PhppotSearchModel;
require_once __DIR__ . "/Model/SearchModel.php";
require_once __DIR__ . '/lib/Config.php';

/* Pagination Code starts */
$per_page_html="";
$page = 1;
$start = 0;
if (! empty($_POST["page"])) {
    $page = $_POST["page"];
    $start = ($page - 1) * Config::LIMIT_PER_PAGE;
}

$searchModel = new SearchModel();

$row_count = $searchModel->getCount();

$limit = " limit " . $start . "," . Config::LIMIT_PER_PAGE;

if (! empty($row_count)) {
    $per_page_html .= "<div style="text-align:center;margin:20px 0px;">";
    $page_count = ceil($row_count / Config::LIMIT_PER_PAGE);

    if ($page_count > 1) {
        for ($i = 1; $i <= $page_count; $i ++) {
            if ($i == $page) {
                $per_page_html .= '<input type="button"  name="page" onclick="getResult(' . $i . ')" value="' . $i . '" class="btn-page current" />';
            } else {
                $per_page_html .= '<input type="button"  name="page" onclick="getResult(' . $i . ')" value="' . $i . '" class="btn-page" />';
            }
        }
    }
    $per_page_html .= "</div>";
}

$result = $searchModel->getAllPosts($start, Config::LIMIT_PER_PAGE);
?>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://phppot.com/php/live-search-in-php-and-mysql-with-ajax/./assets/css/phppot-style.css" type="text/css"
	rel="stylesheet" />
<script src="./vendor/jquery/jquery-3.2.1.min.js"></script>
</head>
<style>
.img-url {
	background: url("demo-search-icon.png") no-repeat center right 7px;
}
</style>
<body>
	<form name="frmSearch" action='' method='post'
		onSubmit="submitSearch(event)">
		<div class="serach">
			<label>Search:</label> <input type="text" name="search"
				class="img-url" id='keyword' maxlength="25">
		</div>
		<table class="tbl-qa" id="tutorial-body">
			<thead>
				<tr>
					<th class="table-header" width="20%">Title</th>
					<th class="table-header" width="40%">Description</th>
					<th class="table-header" width="20%">Date</th>
				</tr>
			</thead>
			<tbody id='table-body'>
	<?php
if (! empty($result)) {
    foreach ($result as $row) {
        ?>
	  <tr class="table-row">
					<td><?php echo $row['post_title']; ?></td>
					<td><?php echo $row['description']; ?></td>
					<td><?php echo $row['post_at'];?></td>
				</tr>
    <?php
    }
}
?>
  </tbody>
		</table>
<?php echo  $per_page_html;  ?>
<script src="./assets/js/search.js"></script>
	</form>
</body>
</html>

Bagian ini membuat permintaan AJAX untuk mendapatkan hasil pencarian dengan kata kunci yang dimasukkan.

Dengan panggilan AJAX ini, ia melewati nomor halaman saat ini dan kata kunci pencarian.

Di blok sukses, ia menerima respons keluaran dalam format HTML dan memperbarui UI.

Fungsi getResult() dipanggil pada event klik dari link pagination. Fungsi submitSearch() dipanggil saat submit setelah memasukkan kata kunci pencarian.

assets/js/search.js

function getResult(pageNumber) {
	var searchKey = $("#keyword").val();
	$.ajax({
		type : "POST",
		url : "ajax-endpoint/get-search-result.php",
		data : {
			page : pageNumber,
			search : searchKey
		},
		cache : false,
		success : function(response) {
			$("#table-body").html("");
			$("#table-body").html(response);
		}
	});
}

function submitSearch(event) {
	event.preventDefault();
	getResult(1);
}

Mekanisme kode untuk pencarian langsung di PHP

Cuplikan kode PHP ini akan menampilkan pencarian langsung titik akhir PHP AJAX, kelas model, dan DAO.

Itu dapatkan-hasil-pencarian.php adalah titik akhir PHP-AJAX yang menerima param permintaan pencarian langsung dan memprosesnya.

Itu memanggil metode kelas SearchModel dapatkanSemuaPos() untuk mendapatkan hasil pencarian. Ini mengirimkan kata kunci pencarian dan param pagination bersama dengan pemanggilan metode.

Ini termasuk fungsi yang disebut sorotKata kunci() untuk menyorot kata kunci yang dicari. Permintaan ini terjadi berdasarkan status konfigurasi untuk mengaktifkan atau menonaktifkan fitur ini.

ajax-endpoint/get-search-result.php

<?php
namespace Phppot;

use PhppotSearchModel;
require_once __DIR__ . "/../Model/SearchModel.php";
require_once __DIR__ . '/../lib/Config.php';

$search_keyword = '';

if (! empty($_POST['search'])) {
    $search_keyword = $_POST['search'];
}

/* Pagination Code starts */
$page = 1;
$start = 0;
if (! empty($_POST["page"])) {
    $page = $_POST["page"];
    $start = ($page - 1) * Config::LIMIT_PER_PAGE;
}

$searchModel = new SearchModel();

$result = $searchModel->getAllPosts($start, Config::LIMIT_PER_PAGE, $search_keyword);

function highlightKeywords($text, $keyword)
{
    $wordsAry = explode(" ", $keyword);
    $wordsCount = count($wordsAry);

    for ($i = 0; $i < $wordsCount; $i ++) {
        $highlighted_text = "<span style="font-weight:bold;">$wordsAry[$i]</span>";
        $text = str_ireplace($wordsAry[$i], $highlighted_text, $text);
    }

    return $text;
}
if (! empty($_POST["page"])) {
    if (! empty($result)) {
        foreach ($result as $row) {
            if (Config::ENABLE_HIGHLIGHT == true) {
                $post_title = highlightKeywords($row["post_title"], $_POST["search"]);
                $new_description = highlightKeywords($row["description"], $_POST["search"]);
                $post_at = highlightKeywords($row["post_at"], $_POST["search"]);
            } else {
                print $post_title = $row['post_title'];
                $new_description = $row['description'];
                $post_at = $row['post_at'];
            }
            ?>
<tr class="table-row">
	<td><?php echo $post_title ?></td>
	<td><?php echo $new_description ?></td>
	<td><?php echo $post_at ?></td>
</tr>
<?php
        }
    }
}

?>

Kelas PHP ini menyertakan DataSource untuk mendapatkan objek koneksi. Ini mempersiapkan param kueri untuk menambahkan kondisi untuk mendapatkan hasil pencarian.

Ini memiliki dua fungsi untuk mendapatkan hasil penghitungan dan data secara terpisah.

Itu getCount() fungsi mengembalikan jumlah total catatan dalam database tentang pencarian. Ini akan membantu untuk membuat tautan HTML pagination.

Itu dapatkanSemuaPos() fungsi menerima batas per halaman dan kata kunci pencarian langsung untuk menanyakan database.

Model/SearchModel.php

<?php
namespace Phppot;

class SearchModel
{

    private $ds;

    private $perPage;

    function __construct()
    {
        require_once __DIR__ . './../lib/DataSource.php';
        $con = new DataSource();
        $this->ds = $con->getConnection();
    }

    function getCount($search_keyword = "")
    {
        if(!empty($search_keyword)) {
            $sql="SELECT * FROM posts WHERE post_title LIKE :keyword OR description LIKE :keyword OR post_at LIKE :keyword";
        } else {
            $sql="SELECT * FROM posts";
        }
        $pdo_statement = $this->ds->prepare($sql);
        if(!empty($search_keyword)) {
        $pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
        }
        $pdo_statement->execute();
        $row_count = $pdo_statement->rowCount();
        return $row_count;
    }

    function getAllPosts($start, $perPage, $search_keyword = "")
    {
        if(!empty($search_keyword)) {
            $sql="SELECT * FROM posts WHERE post_title LIKE :keyword OR description LIKE :keyword OR post_at LIKE :keyword ORDER BY id ASC LIMIT " . $start . ',' . $perPage;
        } else {
            $sql="SELECT * FROM posts ORDER BY id ASC LIMIT " . $start . ',' . $perPage;
        }
        $pdo_statement = $this->ds->prepare($sql);
        if(!empty($search_keyword)) {
            $pdo_statement->bindValue(':keyword', '%' . $search_keyword . '%', PDO::PARAM_STR);
        }
        $pdo_statement->execute();
        $result = $pdo_statement->fetchAll();
        return $result;
    }
}

lib/DataSource.php

<?php
namespace Phppot;
class DataSource
{

    function getConnection()
    {
        $database_username="root";
        $database_password = 'test';

        $pdo_conn = new PDO('mysql:host=localhost;dbname=blog_example', $database_username, $database_password);
        return $pdo_conn;
    }
}
?>

Output: Pencarian langsung di PHP

Tangkapan layar keluaran menunjukkan hasil pencarian langsung dengan kata kunci yang disorot.

Ini mengisi kata kunci yang dicari di bidang input pencarian di atas tampilan tabel daftar.

Di bawah data tabular, ini menampilkan tautan pagination yang dapat diklik.

Pencarian Langsung berdasarkan Output Kata Kunci

Kesimpulan

Dengan kode PHP pencarian langsung, kita telah melihat cara membuat dan mengaktifkan fitur pencarian dalam suatu aplikasi. Ini memiliki bidang pencarian umum untuk mencari beberapa kolom untuk menemukan kecocokan.

Ini mengonfigurasi fitur penyorotan kata kunci untuk menampilkan kata kunci yang dicari dalam font tebal.

Kami telah melihat beberapa referensi kode untuk berbagai jenis implementasi pencarian dari artikel sebelumnya.

Saya harap Anda memiliki awal yang baik untuk membuat kode Anda sendiri untuk mengimplementasikan fitur pencarian langsung di PHP.

Unduh

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

administrator