Sadržaj
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.
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.
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:
| 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:
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.
$ (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:
| 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.
