Generirajte dinamičke popise s Jquery, pHp i MySQL

Mnogo puta prilikom programiranja stranica s pHp -om i postavljanja upita u bazu podataka moramo osvježiti web stranicu tako da se php obrađuje na poslužitelju, pregledati bazu podataka i zatim vratiti rezultat.
Ovo preusmjeravanje weba obično traje nekoliko sekundi u nekim slučajevima prikazujući korisniku praznu stranicu dok se podaci obrađuju i prikazuju. Kako bismo postigli transparentnije sučelje prema korisniku pri upućivanju zahtjeva poslužitelju, možemo koristiti AJAX, tehnologiju koja će nam omogućiti postavljanje upita na web stranici na koje je potreban odgovor poslužitelja bez ponovnog učitavanja. Započet ćemo primjer s web popisom za upravljanje Agencijom za vozila.
Prvo ćemo stvoriti bazu podataka u Mysql da biste to učinili, koristite nas Phpmyadmin. Ispod SQL kod.
1) Mi stvaramo bazu podataka

CREATE DATABASE auto_agency;

2) Zatim ćemo stvoriti tablice

• a) Struktura stola za stol vozila

 IZRADI TABLICU AKO NE POSTOJI `vozila` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` karakteristika` tekst, `mark` varchar (255) ZADNA NULL,` model` varchar ( 255) DEFAULT NULL, `normal_price` decimal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARNI KLJUČ ( `id`)) MOTOR = ZNAČAJNI ZNAČAJ MyISAM = latinski1 AUTO_INCREMENT = 1; 

• b) Struktura tablice za tablicu oznaka

 CREATE TABLE IF NOT EXISTS `marks` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (10) DEFAULT NULL,` mark` varchar (200) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE = ZNAČAJNI ZNAČAJ MyISAM = latin1 AUTO_INCREMENT = 1; 

• c) Ubacujemo zaštitne znakove

 UMETNI `robne marke` (` id`, `vozilo_tip`,` marka`) VRIJEDNOSTI (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'), 

• d) Struktura tablice za tablicu modela

 IZRADI TABLICU AKO NE POSTOJI `models` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL,` brand id` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL , PRIMARNI KLJUČ (`id`)) MOTOR = ZNAČAJNI ZNAČAJ MyISAM = latin1 AUTO_INCREMENT = 1; 

• e) U tablicu modela ubacujemo neke podatke

 UMETI U `modele` (` id`, `vozilo_tip`,` identifikaciju marke`, `model`) VRIJEDNOSTI (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, 'CIVIC'); 

• f) Struktura stola za tip stola_vehiculo

 IZRADI TABLICU AKO NE POSTOJI `vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` varchar (200) ZADNJA NULL, PRIMARNI KLJUČ (` id`)) MOTOR = InnoDB ZADNJA KARTA = latin1 AUTO_INCREMENT = 1; 

• g) U tablicu unosimo neke podatke type_vehiculo

 UMETI `vozilo_tip` (` id`, `vozilo_tip`) VRIJEDNOSTI (1, 'Automobili'), (2, 'Motocikli') 

Do sada smo stvorili cijelu bazu podataka.

Počinjemo strukturu web stranice s php -om, primjer će biti razvijen u običnom php -u, ali se može prilagoditi bilo kojem okviru.
1) Povežite se s bazom podataka Mysql stvaranjem datoteke config.php

Napravit ćemo web stranicu koja će se zvati index.php gdje ćemo imati kôd za prikaz popisa vozila, a zatim filtrirati popis pomoću jqueryja. Raspored koji koristimo za vodič je prilično jednostavan.

Kod unutar index.php za prikaz izgleda je sljedeći:

Zatim stvaramo gornju ploču:

 
 
 
Vozila
 
Zaštitni znakovi
 
Modeli
 

 
 
 Odabrati 
 
 Odabrati 
 
 Odabrati 
 

 

 

Zatim će doći kôd popisa sa sql upitima, div će tada poslužiti za prikaz filtriranog popisa:

 $ value) {$ row [$ key] = kose crte ($ value); }?> var13 -> 
 
Vozilo
 
Marka
 
Model
 
Fotografija
 
Radnje
 
 
 
 
 
 
Izmijeniti
 

 

Sada kada popis funkcionira, moramo stvoriti filter s Jqueryjem i programirati funkcionalnost koja se odnosi na odabir. Prvim odabirom vozila dodajemo upit i mijenjamo odabir na sljedeći način:

 Odabrati  

Prilikom izvršavanja, odabir će se učitati vozilima:

Sada dolazi Jquery za ovo što ćemo dodati u index.php u gornjem retku prije uključivanja, Jquery knjižnicu preuzetu s http://jquery.com/download/ ili povezati sljedeću skriptu i koristiti je s vanjske staze.

Napravit ćemo datoteku pod nazivom functions.js za pohranu Jquery koda i dodati je na stranicu ispod prethodne skripte na sljedeći način:

Prva skripta bit će ona koja pri odabiru vrste vozila aktivira odabir s markama

 $ (function () {$ ("# vehicle"). change (function () {// skripta se aktivira kad odaberem vozilo odabranog vozila = $ (this) .val () // uzimam odabranu vrijednost/ /poslati na stranicu koja će izvršiti sql upit i vratiti podatke za unos u odabrani $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + vozilo, funkcija (podaci) { $ ("#mark"). html (data); // Uzimam rezultat i ubacujem podatke u oznaku odabira});});}); 

Kreiramo datoteku brand.php koja će biti ta koja će izvršiti upit koji će se zatim učitati u Select Brands:

Tako se pri odabiru vrste vozila aktiviraju odabrane marke koje odgovaraju vrsti vozila.

Sada ćemo aktivirati odabrane modele iz oznake, za to ćemo dodati sljedeći kôd u functions.jps:

 $ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Odabrana vrijednost $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ oznaka, funkcija (podaci) {$ (" # model "). html (podaci); // Uzimam rezultat stranice i ubacujem podatke u odabir});});}); 

Za izradu upita stvaramo datoteku models.php:

Konačno, pri odabiru modela dodat ćemo istu skriptu koja nam prikazuje popis, ali filtriranu prema odabranim opcijama, a rezultat ćemo dodijeliti div id = "popisu"
Skripta juqery koja aktivira popis s odabranog modela bit će

 $ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Odabrana vrijednost $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ model, funkcija (podaci) {$ (" # listing "). html (podaci); // Uzimam rezultat stranice i ubacujem podatke u div na popisu});});}); 

Datoteka listing.php koja će izvesti upit filtriranja:

 

 $ value) {$ row [$ key] = kose crte ($ value); }?> var13 -> 
 
Vozilo
 
Marka
 
Model
 
Fotografija
 
Radnje
 
 
 
 
 
 
Izmijeniti
 

 

 

Konačno, kao što je primjer s filtrima koji rade, nedostajalo bi vraćanje popisa na izvornik i registriranje vozila koje ćemo vidjeti u drugom vodiču.

PažnjaNastavak i više informacija o ovom vodiču unesite ovdjeJe li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod