Table des matières
Plusieurs fois, lors de la programmation de pages avec pHp et de l'interrogation d'une base de données, nous devons actualiser la page Web pour que php soit traité sur le serveur, consulter la base de données puis renvoyer le résultat.Cette redirection du web, prend généralement quelques secondes dans certains cas, montrant à l'utilisateur une page blanche pendant que les données sont en cours de traitement et d'affichage. Pour obtenir une interface plus transparente pour l'utilisateur lors des requêtes au serveur, nous pouvons utiliser AJAX, qui est la technologie qui nous permettra de faire des requêtes sur une page Web nécessitant une réponse du serveur sans la recharger. Nous allons commencer par un exemple avec une liste Web pour gérer une agence de véhicules.
Nous allons d'abord créer la base de données dans Mysql pour ce faire, utilisez-nous phpmyadmin. Sous le code SQL.
1) Nous créons la base de données
CREATE DATABASE auto_agency;
2) Ensuite, nous allons créer les tableaux
- a) Structure de la table des véhicules
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) Structure de la table des notes
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) Nous insérons les Marques
INSÉRER DANS `brands` (` id`, `vehicle_type`,` brand`) VALUES (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Structure de la table des modèles
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) Nous insérons des données dans la table des modèles
INSÉRER DANS `models` (` id`, `vehicle_type`,` brand id`, `model`) VALUES (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, 'CIVIQUE');
- f) Structure de la table pour la table 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) Nous insérons des données dans la table type_vehiculo
INSÉRER DANS `vehicle_type` (` id`, `vehicle_type`) VALUES (1, 'Voitures'), (2, 'Motos')
Jusqu'à présent, nous avons créé toute la base de données.
1) Connectez-vous à la base de données Mysql en créant le fichier config.php
Nous allons créer une page web qui s'appellera index.php où nous aurons le code pour afficher la liste des véhicules puis filtrer la liste avec jquery. La mise en page que nous utilisons pour le tutoriel est assez simple.
Ensuite, nous créons le panneau supérieur :
| Véhicules | Marques | Des modèles |
| Pour sélectionner | Pour sélectionner | Pour sélectionner |
Ensuite viendra le code de la liste avec les requêtes sql, le div servira alors à afficher la liste filtrée :
| Véhicule | Marque | Modèle | photo | Actions | |
 | Modifier | ||||
Maintenant que la liste fonctionne, nous devons créer le filtre avec Jquery et programmer la fonctionnalité relative à la sélection. La première sélection de véhicule, nous ajoutons une requête et modifions la sélection comme suit :
Pour sélectionner
Lors de l'exécution, le select sera chargé avec les véhicules :
Nous allons créer un fichier appelé functions.js pour stocker le code Jquery et l'ajouter à la page sous le script précédent comme suit :
Le premier script sera celui qui lors de la sélection d'un type de véhicule active la sélection avec les marques
$ (fonction () {$ ("# véhicule"). change (fonction () {// le script est activé lorsque je sélectionne le véhicule sélectionné véhicule = $ (this) .val ()) // je prends la valeur sélectionnée / / envoyer à une page qui fera la requête sql et renverra les données à mettre dans le $ .get sélectionné ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + véhicule, fonction (données) { $ ( "#mark"). html (data); // Je prends le résultat et insère les données dans la marque de sélection});});}); On crée le fichier marques.php qui sera celui qui effectuera la requête qui sera ensuite chargée dans le Select Brands :
Ainsi, lors de la sélection d'un type de véhicule, les marques de sélection correspondant au type de véhicule sont activées.
$ (function () {$ ("# brand"). change (function () {brand = $ (this) .val () // Valeur sélectionnée $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ marque, fonction (données) {$ (" # modèle "). html (données); // Je prends le résultat de la page et insère les données dans le select});});}); Nous créons le fichier models.php pour effectuer la requête :
Enfin, lors de la sélection du modèle, nous ajouterons dans le même script qui nous montre la liste mais filtrée selon les options sélectionnées et nous affecterons le résultat au div id = "list"
Le script juqery qui active la liste du modèle sélectionné sera
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Valeur sélectionnée $ .get ("http: // localhost / projects / autoagency / listing .php? idmodel = "+ modèle, fonction (données) {$ (" # listing "). html (données); // Je prends le résultat de la page et insère les données dans le listing div});});}); Le fichier listing.php qui effectuera la requête de filtrage :
| Véhicule | Marque | Modèle | photo | Actions | |
| Modifier | ||||
Enfin, comme c'est l'exemple avec les filtres qui fonctionnent, il en manquerait un pour restaurer la liste à l'origine et enregistrer le véhicule que nous verrons dans un autre tutoriel.
