Sommario
Molte volte quando si programmano pagine con pHp e si effettuano query su un database, è necessario aggiornare la pagina Web in modo che il php venga elaborato sul server, consultare il database e quindi restituire il risultato.Questo reindirizzamento del web, di solito richiede alcuni secondi in alcuni casi mostrando all'utente una pagina vuota mentre i dati vengono elaborati e visualizzati. Per ottenere un'interfaccia più trasparente per l'utente quando si effettuano richieste al server, possiamo utilizzare AJAX, che è la tecnologia che ci consentirà di effettuare query su una pagina Web che richiedono una risposta dal server senza ricaricarla. Inizieremo un esempio con un elenco web per gestire un'agenzia di veicoli.
Creeremo prima il database in MySQL per farlo usa noi Phpmmyadmin. Sotto il codice SQL.
1) Creiamo il database
CREA DATABASE auto_agency;
2) Quindi creeremo le tabelle
- a) Struttura della tabella per la tabella dei veicoli
CREATE TABLE IF NOT EXISTS `vehicles` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL,` features` text, `mark` varchar (255) DEFAULT 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, PRIMARY KEY ( `id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- b) Struttura della tabella per la tabella dei voti
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 = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) Inseriamo i Marchi
INSERISCI IN `marchi` (` id`, `tipo_veicolo`,` marchio`) VALORI (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Struttura della tabella per la tabella dei modelli
CREATE TABLE IF NOT EXISTS `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 , PRIMARY KEY (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Inseriamo alcuni dati nella tabella dei modelli
INSERISCI IN `models` (` id`, `vehicle_type`,` brand id`, `model`) VALORI (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, 'CIVICO');
- f) Struttura della tabella per la tabella type_vehiculo
CREATE TABLE IF NOT EXISTS `vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` varchar (200) DEFAULT NULL, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- g) Inseriamo alcuni dati nella tabella type_vehiculo
INSERT INTO `tipo_veicolo` (` id`, `tipo_veicolo`) VALORI (1, 'Automobili'), (2, 'Motociclette')
Finora abbiamo creato l'intero database.
1) Connettiti al database Mysql creando il file config.php
Creeremo una pagina web che si chiamerà index.php dove avremo il codice per mostrare la lista dei veicoli e poi filtreremo la lista con jquery. Il layout che usiamo per il tutorial è piuttosto semplice.
Quindi creiamo il pannello superiore:
| Veicoli | Marchi Trade | Modelli |
| Selezionare | Selezionare | Selezionare |
Quindi arriverà il codice della lista con le query sql, il div servirà quindi a mostrare la lista filtrata:
| Veicolo | Marca | Modello | Foto | Azioni | |
 | Modificare | ||||
Ora che abbiamo la lista funzionante dobbiamo creare il filtro con Jquery e programmare la funzionalità relativa al select. Alla prima selezione di Veicolo aggiungiamo una query e modifichiamo la selezione come segue:
Selezionare
Durante l'esecuzione, la selezione verrà caricata con i veicoli:
Creeremo un file chiamato functions.js per memorizzare il codice Jquery e aggiungerlo alla pagina sotto lo script precedente come segue:
Il primo script sarà quello che quando si seleziona un tipo di veicolo attiva la selezione con i marchi
$ (funzione () {$ ("# veicolo"). change (funzione () {// lo script viene attivato quando seleziono il veicolo selezionato veicolo = $ (questo) .val () // prendo il valore selezionato / / invia a una pagina che effettuerà la query sql e restituirà i dati da inserire nel select $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + veicolo, funzione (dati) { $ ("#mark"). html (data); // prendo il risultato e inserisco i dati nel select mark});});}); Creiamo il file brand.php che sarà colui che effettuerà la query che verrà poi caricata nel Select Brands:
Pertanto, quando si seleziona un tipo di veicolo, vengono attivate le marche selezionate corrispondenti al tipo di veicolo.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Valore selezionato $ .get ("http: // localhost / project / autoagency / model .php? markid = "+ mark, function (data) {$ (" # modello "). html (data); // prendo il risultato della pagina e inserisco i dati nel select});});}); Creiamo il file models.php per eseguire la query:
Infine, selezionando il modello, aggiungeremo nello stesso script che ci mostra l'elenco ma filtrato in base alle opzioni selezionate e assegneremo il risultato al div id = "lista"
Lo script juqery che attiva l'elenco dal modello selezionato sarà
$ (funzione () {$ ("# modello"). change (funzione () {modello = $ (questo) .val () // Valore selezionato $ .get ("http: // host locale / progetti / agenzia automatica / elenco .php? idmodel = "+ modello, funzione (dati) {$ (" # lista "). html (dati); // prendo il risultato della pagina e inserisco i dati nel listato div});});}); Il file listato.php che eseguirà la query del filtro:
| Veicolo | Marca | Modello | Foto | Azioni | |
| Modificare | ||||
Infine, come è l'esempio con i filtri funzionanti, ne mancherebbe uno per ripristinare la lista all'originale e registrare il veicolo che vedremo in un altro tutorial.
