İçindekiler
Çoğu zaman sayfaları pHp ile programlarken ve bir veritabanına sorgu yaparken, php'nin sunucuda işlenmesi için web sayfasını yenilemeli, veritabanına bakmalı ve ardından sonucu döndürmeliyiz.Web'in bu yeniden yönlendirmesi, bazı durumlarda veriler işlenirken ve görüntülenirken kullanıcıya boş bir sayfa gösterilmesi genellikle birkaç saniye sürer. Sunucuya istekte bulunurken kullanıcıya daha şeffaf bir arayüz sağlamak için, sunucudan yanıt gerektiren bir web sayfasında yeniden yükleme yapmadan sorgu yapmamızı sağlayacak teknoloji olan AJAX'ı kullanabiliriz. Bir Araç Acentesini yönetmek için bir web listesiyle bir örneğe başlayacağız.
İlk olarak veritabanını oluşturacağız. MySQL bunu yapmak için bizi kullan Phpmyadmin. altında SQL kodu.
1) Veritabanını oluşturuyoruz
CREATE DATABASE auto_agency;
2) Ardından tabloları oluşturacağız.
- a) Araçlar tablosu için tablo yapısı
"araçlar" YOKSA TABLO OLUŞTUR ('id' int (10) NOT NULL AUTO_INCREMENT, 'vehicle_type' int (255) DEFAULT NULL, 'özellikler' metin, 'mark' varchar (255) VARSAYILAN NULL, 'model' varchar ( 255) VARSAYILAN NULL, 'normal_fiyat' ondalık (10,2) VARSAYILAN NULL, 'tanım' varchar (255) VARSAYILAN NULL, 'foto1' varchar (255) VARSAYILAN NULL, 'foto2' varchar (255) VARSAYILAN NULL, BİRİNCİL ANAHTAR ( `id`)) MOTOR = MyISAM VARSAYILAN CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Puan tablosu için tablo yapısı
CREATE TABLOSU VARSA `marks` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (10) DEFAULT NULL,` mark` varchar (200) VARSAYILAN NULL, PRIMARY KEY (`id`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) Ticari Markaları ekleriz
'markalar' (' id', 'araç_tipi', 'marka') DEĞERLERİNE EKLE (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Modeller tablosu için tablo yapısı
OLUMSUZ TABLO OLUŞTURMA 'modeller' ('id' int (11) DEĞİL NULL AUTO_INCREMENT, 'vehicle_type' int (200) DEFAULT NULL, 'brand id' int (200) VARSAYILAN NULL, 'model' varchar (255) VARSAYILAN NULL , BİRİNCİL ANAHTAR (`id`)) MOTOR = MyISAM VARSAYILAN CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Modeller tablosuna bazı veriler ekliyoruz
'modellere' EKLE (' id', 'araç_tipi', 'marka kimliği', 'model') DEĞERLER (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, 'SİVİL');
- f) type_vehiculo tablosu için tablo yapısı
"araç_türü" YOKSA TABLO OLUŞTURUN (` id` int (10) NULL DEĞİL AUTO_INCREMENT, `vehicle_type` varchar (200) VARSAYILAN BOŞ, BİRİNCİL ANAHTAR (` id`)) MOTOR = InnoDB VARSAYILAN KARAMETRE SETİ = latin1 AUTO_INCREMENT
- g) type_vehiculo tablosuna bazı veriler ekliyoruz
'araç_tipi' ('id', 'araç_türü') DEĞERLERİNE EKLE (1, 'Arabalar'), (2, 'Motosikletler') Şimdiye kadar tüm veritabanını oluşturduk.
1) config.php dosyasını oluşturarak Mysql veritabanına bağlanın
Araç listesini gösterecek koda sahip olacağımız index.php adında bir web sayfası oluşturacağız ve ardından listeyi jquery ile filtreleyeceğiz. Öğretici için kullandığımız düzen oldukça basittir.
Ardından üst paneli oluşturuyoruz:
| Araçlar | Ticari markalar | Modeller |
| Seçmek | Seçmek | Seçmek |
Daha sonra sql sorgularının olduğu listenin kodu gelecek, div daha sonra filtrelenmiş listeyi göstermeye hizmet edecektir:
| Araç | Marka | modeli | Fotoğraf | Hareketler | |
 | değiştir | ||||
Listeyi çalıştırdığımıza göre, filtreyi Jquery ile oluşturmalı ve seçimle ilgili işlevselliği programlamalıyız. İlk araç seçimine bir sorgu ekliyoruz ve seçimi aşağıdaki gibi değiştiriyoruz:
Seçmek
Yürütme sırasında, seçim araçlarla yüklenecektir:
Jquery kodunu saklamak için function.js adında bir dosya oluşturacağız ve onu önceki betiğin altındaki sayfaya aşağıdaki gibi ekleyeceğiz:
İlk komut dosyası, bir araç türü seçerken markalarla seçimi etkinleştiren komut olacaktır.
$ (function () {$ ("# araç").change (function () {// seçilen aracı seçtiğimde script aktif olur araç = $ (bu) .val () // seçilen değeri alıyorum / / sql sorgusunu yapacak ve seçilen $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + araç, işlev (veri)) içine koymak için verileri döndürecek bir sayfaya gönder $ ( "#işaret").html (veri); // Sonucu alıyorum ve verileri seçim işaretine ekliyorum});});}); Select Brands'e yüklenecek olan sorguyu gerçekleştirecek olan brand.php dosyasını oluşturuyoruz:
Böylece araç tipi seçilirken araç tipine karşılık gelen seçili markalar aktif hale getirilmektedir.
$ (işlev () {$ ("# marka").change (işlev () {marka = $ (bu) .val () // Seçilen değer $ .get ("http: // localhost / projeler / otoajans / model .php?markid = "+ işaret, işlev (veri) {$ (" # model "). html (veri); // Sayfa sonucunu alıyorum ve verileri seçime ekliyorum});});}); Sorguyu gerçekleştirmek için models.php dosyasını oluşturuyoruz:
Son olarak model seçerken bize listeyi gösteren fakat seçili seçeneklere göre filtrelenmiş aynı scripte ekleyeceğiz ve sonucu div id = "list"e atayacağız.
Seçilen modelden listeyi etkinleştiren juqery betiği
$ (function () {$ ("# model").change (function () {model = $ (bu) .val () // Seçilen değer $ .get ("http: // localhost / projeler / autoagency / listeleme") .php?idmodel = "+ model, fonksiyon (veri) {$ (" # listeleme "). html (veri); // Sayfa sonucunu alıyorum ve verileri div listesine ekliyorum});});}); Filtre sorgusunu gerçekleştirecek olan list.php dosyası:
| Araç | Marka | modeli | Fotoğraf | Hareketler | |
| değiştir | ||||
Son olarak, filtrelerin çalıştığı örnekte olduğu gibi, listeyi orijinaline geri yüklemek ve başka bir öğreticide göreceğimiz aracı kaydetmek için bir eksik olacaktır.
