Fatih SoysalBu yazımda PHP’yi temel dilde kullanarak Ajax Arama Kutusu oluşturacağız. Gerçek zamanlı arama, Google’ın kullandığı bir teknoloji. Web projelerinin kullanımını oldukça hızlandırıyor. Avantajları arasında sunucu üzerinde daha az yük barındırmak ta yer alıyor.Başlayalım..
Tarayıcıdan gelen GET isteğini kullanarak dinamik bir arama sistemi oluşturacağım. Tabi bu isteği son kullanıcı göremeyecek.
Aşama 1: Database
Örnek için bir veritabanı oluşturalım. phpMyAdmin arayüzünü kullanabilirsiniz. Oluşturduktan sonra aşağıdaki sorguyu çalıştıralım.
1 2 3 4 5 | CREATE TABLE 'user_name' ( user_id INT(20) PRIMARY KEY, first_name TEXT ); |
Çalıştırdıktan sonra testlerde kullanılmak üzere, tabloya biraz demo kullanıcı adları ekleyebilirsiniz.
Aşama 2: Front-End
PHP dosyasına Ajax isteği yapmak için typeahead adında bir JavaScript kitaplığı kullanıyorum. Bu tür bir amaç için özel olarak tasarlanmış düzgün ve temiz bir kütüphanedir kendisi.
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Ajax ve PHP ile gerçek zamanlı arama işlemi fatihsoysal.com</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script src="typeahead.min.js"></script> </head> <body> <input type="text" name="typeahead"> </body> </html> |
Aşama 3: GET kullanarak PHP Komut Dosyasını Çağırma
Bu aşamadaki görevimiz, metin kutusuna kullanıcı yazı yazarken PHP dosyamıza istek atmak olacaktır. Bunu typehead kütüphanesini kullanarak yapıyoruz. Aşağıdaki gibi:
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function(){ $('input.typeahead').typeahead({ name: 'typeahead', remote:'search.php?key=%QUERY', limit : 10 }); }); </script> |
Dipnot: Otomatik olarak metin kutusu değerini %QUERY değişkende döndürür.
Aşama 4: MySQL’den veri alıp JSON olarak geri döndüreceğiz
İşte artık en önemli aşamadayız. Şimdiye kadar gerekli altyapımızı oluştuduk. Şimdi ise PHP dosyasında gelen parametreyi alıp, veritabanından sorugulamasını yapacağız. Geri sonuç döndüreceğiz.
Sonuç alındıktan sonra, ilgili sonucu JSON formatında paketleyeceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 | <?php $key=$_GET['key']; $array = array(); $con=mysql_connect("localhost","root",""); $db=mysql_select_db("database name",$con); $query=mysql_query("select * from table_name where <coloumn_name> LIKE '%{$key}%'"); while($row=mysql_fetch_assoc($query)) { $array[] = $row['title']; } echo json_encode($array); ?> |
Lütfen parametrenizi veritabanınıza ve sütun ayrıntılarına göre değiştirin.
İşlemler tamamlandı. Gerçek zamanlı arama çalışmamızı istediğiniz şekilde kullanabilirsiniz.
