PHP, MySQL ve AJAX ile dinamik arama nasıl yapılır

PHP Ajax ve Mysql ile dinamik arama işlemi nasıl yapılır.
PHP Ajax ve Mysql ile dinamik arama işlemi nasıl yapılır.

Web sitesinde pratiklik her şeydir. Bu konuda PHP tek başına yetersiz kalıyor, bizde AJAX kullanarak bu zafiyeti gidereceğiz. Bu yazımızda PHP, MySQL ve AJAX kullanarak dinamik bir şekilde arama nasıl yapılır onu göstereceğiz.

Bu yazımızda ülke adı veya ülke koduna göre dinamik bir şekilde ülkeler tablosunda arama yapacağız.

PHP, MySQL ve AJAX ile canlı arama kutusu nasıl yapılır?

Bu yazımızda arama giriş kutusuna bir karakter yazmaya başladığınızda, arama sonuçlarının görüntüleneceği Ajax ve PHP’yi kullanarak basit bir canlı veritabanı arama kutusu yapmayı planlıyoruz.

Öncelikle elimizde arama yapabileceğimiz bir veritabanı olmak zorunda. Ben ülkeler veri tabanına göre arama yapmak istediğim için GitHub üzerinden hazır bir veritabanı indiriyorum.

Adım 1: Veritabanı tablosunu oluşturalım

Öncelikle bir veritabanı oluşturun daha sonra size vereceğim .sql uzantılı dosyayı phpmyadmin yazılımıyla içeri aktarın.

Bu linkten .sql dosyasını indirebilir veya makalemizin sonundaki demo linkinden tüm projeyi indirebilirsiniz.

Adım 2: Arama kutusunu oluşturalım ve şekillendirelim

Ülkeler tablosunda bulunan ülkelerin adlarında canlı arama yapmasını sağlayan basit bir web arayüzü oluşturalım. Tasarım olarak basit, sade bir arayüz olacak siz bunu entegre edeceğiniz sisteme göre düzenlersiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>PHP ile Dinamik Arama Yapımı</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
.search-box {
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"] {
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result {
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"] {
width: 100%;
box-sizing: border-box;
}
.result p {
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover {
background: #f2f2f2;
}
.result {
margin-top: 8px;
min-width: 285px;
position: absolute;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.result .list-group-item {
position: relative;
display: block;
padding: 20px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
height: auto;
cursor: pointer;
padding: 20px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.result>li>a {
font-size: 14px;
font-weight: 600;
display: block;
color: #000;
text-decoration: none;
}
.result>li:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Ülke veya Ülke kodu giriniz..." />
<div class="result"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// sayfamızdaki form elemanına bir yazı girilirse çalış
$('.search-box input[type="text"]').on("keyup input", function() { 
var inputVal = $(this).val(); // form elemanının değerini al inputVal değişkenine aktar.
var resultDropdown = $(this).siblings(".result"); // search-box divi içerisinde result classına sahip olan divi resultDropdown isimli değişkene aktarıyoruz.
if (inputVal.length) { // eğer form elemanı içine bir şey yazılmışsa çalış...
$.get("search.php", { 
kelime: inputVal
}).done(function(data) {
// search.php 'den dönen değeri .result divinde göster.
resultDropdown.html(data);
});
} else { // form elemanı içine bir şey yazılmamışsa
resultDropdown.empty(); // .result divinin içini boşalt
}
});
/* Dinamik aramadan dönen değerlerin üstüne basınca bir şey olmasını istiyoruz bu kısımda yapabilirsiniz. */
$(document).on("click", ".result li", function() {
$(this).parents(".search-box").find('input[type="text"]').val($(this).text()); // tıkladığımız list elemanı içindeki değeri form elemanının içine yazar.
$(this).parent(".result").empty(); // .result divinin içini boşaltır.
});
});
</script>
</body>
</html>

Arama girişinin içeriği her değiştiğinde, ilgili ülkeler tablosundan kayıtları alan “search.php” dosyasına bir Ajax isteği gönderiyor. “search.php” dosyasında girilen kelimeye göre bir sorgu yapılıyor ve geriye değerler gönderiliyor. Geriye gönderilen değerleri alıp tarayıcıda bir div etiketi içerisinde gösteriyoruz. Böylece dinamik bir şekilde arama yapma işlemi başarıyla gerçekleşiyor.

Adım 3: Veriyi alıp dinamik bir şekilde PHP’de işlemek

Ama öncelikle sorgunun çalışacağı ve bize geri gönderilecek değerleri almak için “search.php” adında bir dosyamız olmalı. Hemen search.php dosyamızı oluşturuyoruz.

<?php
/* VERİTABANI İLE BAĞLANTI KURMA */
$config['database']['type'] = "mysql";
$config['database']['hostname'] = "localhost";
$config['database']['username'] = "root";
$config['database']['password'] = "";
$config['database']['database'] = "countries";
$config['database']['encoding'] = "utf8";
try {
$dbConnectionQuery = $config['database']['type'].":host=".$config['database']['hostname'].";dbname=".$config['database']['database'].";charset=".$config['database']['encoding'];
$db = new PDO($dbConnectionQuery, $config['database']['username'], $config['database']['password']);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->exec("SET NAMES ".$config['database']['encoding']);
}catch(PDOException $e){
echo $e->getMessage();
}
/* VERİTABANI İLE BAĞLANTI KURMA */
// Javascript'ten gelen kelime değeri var mı yok mu kontrol etme
if(isset($_REQUEST["kelime"])){
$kelime = strip_tags(trim($_REQUEST["kelime"])); // kelime değerini kötü amaçlı kodlardan arındırarak kelime değişkenine atama
$Sorgu = "nicename LIKE '%$kelime%' || iso LIKE '%$kelime%'"; // Veritabanı sorgumuzu değişkene aktarıyoruz.
$sql = $db->prepare("SELECT * FROM country WHERE $Sorgu ORDER BY nicename ASC"); // Veritabanı sorgumuzu çalıştırıyoruz. İsterseniz LIMIT 0,20 ile dilediğiniz kadar limit koyabilirsiniz. 
$sql->execute(); // Sorgumuzu çalıştırıyoruz
if($sql->rowCount() > 0){ // Çalıştırılan sorgudan dönen bir değer varsa...
foreach($sql->fetchAll(PDO::FETCH_ASSOC) as $row){ // Dönen değer bize bir array olarak dönüyor ve dönen değeri almak için foreach kullanıyoruz. 
echo '<li class="list-group-item"><a href="country.php?countryID='.$row["id"].'">'.$row["name"].'</a></li>'; // Dönen değeri anasayfamızda gösterebilmek için geriye döndürüyoruz.
}
}
else{ // Çalışıtırlan sorgudan dönen bir değer yoksa
echo '<li class="list-group-item">Sonuç bulunamadı</li>'; // Sonuç bulunamadı yazısını sayfamıza gösteriyoruz.
}
}
?>

Öncelikle veritabanı bağlantımızı gerçekleştiriyoruz. Daha sonra AJAX ile bize gönderilen değeri alıp bir SQL sorgusu oluşturuyoruz. Bu SQL sorgusundan dönen değer varsa tarayıcıya o değerleri gönderiyoruz. Eğer yoksa “Sonuç bulunamadı” yazısını ekranda gösteriyoruz.

Tabii ki siz sorguları ve diğer şeyleri projenize uygun bir şekilde düzenleyebilirsiniz.

PHP’de Hataları Göstermek

PHP tarafında yaptığınız işlemlerde hata olup olmadığını görmek isterseniz bu yazımızı inceleyebilirsiniz:
PHP’de hataları göstermek veya gizlemek

İndir: Projeyi İndir