Inhoudsopgave
Vaak moeten we bij het programmeren van pagina's met pHp en het maken van query's op een database de webpagina vernieuwen zodat php op de server wordt verwerkt, de database raadplegen en vervolgens het resultaat retourneren.Deze omleiding van het web duurt meestal enkele seconden en in sommige gevallen wordt de gebruiker een lege pagina getoond terwijl de gegevens worden verwerkt en weergegeven. Om een transparantere interface voor de gebruiker te krijgen bij het doen van verzoeken aan de server, kunnen we AJAX gebruiken, de technologie waarmee we query's kunnen maken op een webpagina die een reactie van de server nodig hebben zonder deze opnieuw te laden. We beginnen een voorbeeld met een webvermelding om een voertuigagentschap te beheren.
We zullen eerst de database maken in Mysql gebruik ons om dit te doen Phpmyadmin. Onder de SQL-code.
1) We maken de database
MAAK DATABASE auto_agency;
2) Dan gaan we de tabellen maken
- a) Tabelstructuur voor de voertuigtabel
MAAK TABEL INDIEN NIET BESTAAT `vehicles` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` karakteristieken` tekst, `mark` varchar (255) DEFAULT NULL,` model` varchar ( 255) DEFAULT NULL, `normal_price` decimaal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMAIRE SLEUTEL ( `id`)) MOTOR = MyISAM STANDAARD CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Tabelstructuur voor de tabel met tekens
MAAK TABEL INDIEN NIET BESTAAT `marks` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (10) DEFAULT NULL,` mark` varchar (200) STANDAARD NULL, PRIMAIRE SLEUTEL (`id`)) MOTOR = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) We voegen de handelsmerken in
INVOEREN IN `merken` (` id`, `voertuigtype`,` merk`) WAARDEN (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Tabelstructuur voor de modellentabel
MAAK TABEL INDIEN NIET BESTAAT `modellen` (` id` int (11) NOT NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL,` brand id` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL , PRIMAIRE SLEUTEL (`id`)) MOTOR = MyISAM STANDAARD CHARSET = latin1 AUTO_INCREMENT = 1;
- e) We voegen enkele gegevens in de modellentabel in
INVOEREN IN `models` (` id`, `vehicle_type`,` brand id`, `model`) WAARDEN (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, 'CIVIC');
- f) Tabelstructuur voor tabel type_vehiculo
MAAK TABEL INDIEN NIET BESTAAT `vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` varchar (200) STANDAARD NULL, PRIMAIRE SLEUTEL (` id`)) MOTOR = InnoDB STANDAARD CHARSET = latin1 AUTO_INCREMENT = 1;
- g) We voegen wat gegevens in de tabel type_vehiculo
INSERT INTO `vehicle_type` (` id`, `vehicle_type`) WAARDEN (1, 'Auto's'), (2, 'Motorfietsen')
Tot nu toe hebben we de volledige database gemaakt.
1) Maak verbinding met de Mysql-database door het config.php-bestand te maken
We zullen een webpagina maken met de naam index.php waar we de code hebben om de lijst met voertuigen te tonen en vervolgens de lijst filteren met jQuery. De lay-out die we gebruiken voor de tutorial is vrij eenvoudig.
Vervolgens maken we het bovenste paneel:
| Voertuigen | Handelsmerken | modellen |
| Selecteren | Selecteren | Selecteren |
Dan komt de code van de lijst met de sql-query's, de div dient dan om de gefilterde lijst te tonen:
| Voertuig | Merk | Model | Foto | Acties | |
 | Aanpassen | ||||
Nu de lijst werkt, moeten we het filter maken met JQuery en de functionaliteit programmeren met betrekking tot de select. Bij de eerste selectie van Voertuig voegen we een zoekopdracht toe en wijzigen de selectie als volgt:
Selecteren
Bij het uitvoeren wordt de select geladen met de voertuigen:
We zullen een bestand maken met de naam functions.js om de JQuery-code op te slaan en als volgt aan de pagina onder het vorige script toe te voegen:
Het eerste script zal degene zijn die bij het selecteren van een type voertuig de select met de merken activeert
$ (functie () {$ ("# voertuig"). wijzigen (functie () {// het script wordt geactiveerd wanneer ik het geselecteerde voertuig voertuig selecteer = $ (this) .val () // ik neem de geselecteerde waarde / / stuur naar een pagina die de sql-query uitvoert en de gegevens retourneert om in de geselecteerde $ .get te plaatsen ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + voertuig, functie (data) { $ ("#mark"). html (data); // Ik neem het resultaat en plaats de gegevens in de select mark});});}); We creëren het bestand brands.php dat degene zal zijn die de query zal uitvoeren die vervolgens in de Select Brands wordt geladen:
Zo worden bij het selecteren van een voertuigtype de geselecteerde merken geactiveerd die overeenkomen met het type voertuig.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Geselecteerde waarde $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ mark, function (data) {$ (" # model ").html (data); // Ik neem het paginaresultaat en voeg de gegevens in de select in});});}); We maken het bestand models.php om de query uit te voeren:
Ten slotte zullen we bij het selecteren van het model hetzelfde script toevoegen dat ons de lijst toont, maar gefilterd volgens de geselecteerde opties en we zullen het resultaat toewijzen aan de div id = "lijst"
Het juqery-script dat de lijst van het geselecteerde model activeert, is:
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Geselecteerde waarde $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ model, function (data) {$ (" # listing "). html (data); // Ik neem het paginaresultaat en voeg de gegevens in de listing div});});}); Het bestand listing.php dat de filterquery zal uitvoeren:
| Voertuig | Merk | Model | Foto | Acties | |
| Aanpassen | ||||
Ten slotte, zoals het voorbeeld met de filters die werken, zou er een ontbreken om de lijst naar het origineel te herstellen en het voertuig te registreren dat we in een andere tutorial zullen zien.
