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;
Öncelike bir veri tabanı oluşturalım.
Ben
İçeriğine 4 adet sütun ekledim.
Gördüğünüz üzere böyle bir klasörleme yaptım.
CSS Dosyası Oluşturma;
Veri Tabanı Bağlantısı Oluşturma.
Şimdi bağlantı yapalım.
Ben
Şimdi ise arama sayfası için gerekli kodlarımızı yazalım.
Şimdi ise
Not: Site güvenliği izin vermediği için
Not: Site güvenliği izin vermediği için
Gördüğünüz üzere kelimenin içinden sadece bir kısmını yazarak canlı arama yaptık.
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
Bugün açtığım ankette 2. olarak PHP, SQL, Ajax ve JavaScript ile gelişmiş arama motoru yapımı istendi.
Hangi rehberi istersiniz?
Merhaba. Aklımda bir kaç rehber var. Hangisini önce isterseniz? Anti-Virüs çalışma mantığı. CSS Flex yapısı. PHP, SQL, Ajax ve JavaScript ile gelişmiş arama motoru yapımı.
www.technopat.net
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.
Gördüğünüz üzere böyle bir klasörleme yaptım.
- TS_LiveSearch
- Assets
- Main.css
- Dashboard
- Connection.php
- Search.php
- index.php
- Assets
CSS Dosyası Oluşturma;
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.
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.
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.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.
Projenin tüm dosyaları:
TS_LiveSearch.zip
drive.google.com
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