Rehber PHP, SQL, Ajax, JavaScript, Bootstrap kullanarak gelişmiş arama motoru yapımı

Merhaba 😇

Bugün açtığım ankette 2. olarak PHP, SQL, Ajax ve JavaScript ile gelişmiş arama motoru yapımı istendi.


Bugün sizlere PHP, SQL, Ajax ve JavaScript ile gelişmiş arama motoru yapımını göstereceğim.

Makalemiz 5 ana maddeden oluşuyor;

  • Veri Tabanı Oluşturma.
  • CSS Dosyası Oluşturma.
  • Veri Tabanı Bağlantısı Oluşturma.
  • Arama Sayfası Oluşturma
  • Verileri Getirme

Veri Tabanı Oluşturma;

Öncelike bir veri tabanı oluşturalım.


Ben technopat_test isimli veri tabanı oluşturdum.

İçeriğine 4 adet sütun ekledim.
  • ID.
  • Title.
  • İnfo.
  • Link.
Arama işleminde göstermek için bazı veriler ekledim. İlgili verileri alt kısımda görebilirsiniz.

1677778114187.png


Gördüğünüz üzere böyle bir klasörleme yaptım.

1677778211316.png

  • TS_LiveSearch
    • Assets
      • Main.css
    • Dashboard
      • Connection.php
      • Search.php
    • index.php

CSS Dosyası Oluşturma;

1677778941270.png


CSS:
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

*{
    font-family: 'Alata', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

input{
    width: 250px;
    height: 35px;
    padding: 0 5px;
    color: #000;
    font-size: 16px;
    border-radius: 5px;
    margin: 0;
    outline: none;
    background-color: transparent;
    border: 2px solid grey;
}

Veri Tabanı Bağlantısı Oluşturma.

Şimdi bağlantı yapalım.

Ben mysqli kullandım. Siz PDO'da kullanabilirsiniz.

1677778290467.png


PHP:
<?php
    $mysql_connect = mysqli_connect("localhost", "root", "", "technopat_test"); // Veri tabanı isminizi kendinize göre değiştirebilirsiniz.
    if (mysqli_connect_errno()){
        echo "Bağlantı hatası: " . mysqli_connect_error();
        exit();
    }
?>

Şimdi ise arama sayfası için gerekli kodlarımızı yazalım.

1677778581547.png


PHP:
<?php
    require_once("Connection.php"); // Bağlantıyı başlatıyoruz.
    @$search = $_POST['search_query']; // Ajax ile veriyi alıyoruz.
    if (isset($search)){ // Verinin boş olup olmadığını kontrol edidiyoruz.
       if ($search == ""){ // Boşsa bilgi veriyoruz.
           echo "Aranacak değeri girip ve tekrar deneyiniz.";
       }else{ // Doluysa işlemlere devam ediyoruz.
            $s_1 = mb_strtolower($search, 'UTF-8'); // Yazıları küçük harfe çeviriyoruz.
            $s_2 = htmlspecialchars($s_1); // Özel karakterleri zarar vermemesi için dönüştürüyoruz.
            $s_3 = trim(addslashes(strip_tags(mb_strtolower($s_2, "UTF-8")))); // SQL Injection yememek için bazı güvenlik işlemleri daha ekliyoruz.

            $query = mysqli_query($mysql_connect, "SELECT * FROM aramalar WHERE info LIKE '%$s_3%'"); // "aramalar" tablosu içinde yer alan "info" sütunu üzerinde arama yapıyoruz.
            $data = ""; // Her arama sorgusu geldiğinde sütun oluşmaması için temizliyoruz.
       
            while($get_data = mysqli_fetch_assoc($query)){ // While döngüsü ile gelen verileri alıp işliyoruz.
                $data .=  "<tr><td>" . $get_data['id'] . "</td><td>" . $get_data['title'] . "</td><td>" . $get_data['info'] . "</td><td><a target='_blank' href='" . $get_data['link'] . "'>Görüntüle</a></td></tr>";
            }
            echo $data; // Bulunan değerleri ekrana basıyoruz.
       }
    }
?>

Şimdi ise index.php sayfamızı yapıyoruz.

Not: Site güvenliği izin vermediği için index.php sayfasını kod olarak atamıyorum.

1677778849685.png


Not: Site güvenliği izin vermediği için index.php sayfasını kod olarak atamıyorum.


Gördüğünüz üzere kelimenin içinden sadece bir kısmını yazarak canlı arama yaptık.


1677778886455.png


Projenin tüm dosyaları:

Umarım yardımcı olmuştur.
Burada kadar okuyan herkese teşekkür ederim.

Yazılım rehberlerimin devamı gelecek.
İyi çalışmalar, kolay gelsin 😇
 
Hocam hangi işletim sistemini kullanıyorsunuz?

Windows 11 / Linux Mint.

Tüm yazdığım rehberler içindeki dosyalar tek bir link olarak birleştirildi arkadaşlar. İstediğiniz dosyayı bu link üzerinden indirebilirsiniz:

 
Son düzenleme:

Geri
Yukarı