Générer des listes dynamiques avec Jquery, pHp et MySQL

{title}

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 afin que php soit traité sur le serveur, vérifier la base de données puis renvoyer le résultat.
Cette redirection du Web prend généralement quelques secondes et dans certains cas montre à l’utilisateur une page vierge pendant le traitement et l’affichage des données. Pour obtenir une interface plus transparente pour l'utilisateur lors des requêtes adressées au serveur, nous pouvons utiliser AJAX, technologie qui nous permettra d'effectuer 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éhicule.
Tout d'abord, nous allons créer la base de données dans Mysql pour utiliser Phpmyadmin . Suivant le code SQL .
1) Nous créons la base de données

 CREATE DATABASE agency_autos; 

2) Ensuite, nous allons créer les tables
  • a) Structure de la table pour véhicule
 CREATE TABLE IF NOT EXISTS `véhicules` (` id` int (10) NON NULL AUTO_INCREMENT, `vehicle_type` int (255) DEFAULT NULL, texte` features`, `mark` varchar (255) DEFAULT NULL, ` model` varchar ( 255) DEFAULT NULL, décimal `normal_price` (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 marques
 CREATE TABLE IF NOT EXISTS `marks` (` id` int (11) NON NULL AUTO_INCREMENT, `vehicle_type` int (10) NULL PAR DÉFAUT, ` mark` varchar (200) NULL PAR DÉFAUT, KEY PRIMARY (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
  • c) Insérer les marques
 INSERT INTO `brands` (` id`, `type_de_véhicule`, 'marque') VALEURS (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'), 
  • d) Structure de la table pour les modèles
 CREATE TABLE IF NOT EXISTS `modèles` (` id` int (11) NON NULL AUTO_INCREMENT, `vehicle_type` int (200) DEFAULT NULL, ` idmarca` int (200) DEFAULT NULL, `model` varchar (255) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
  • e) On insère des données dans la table des modèles
 INSERT INTO `modèles` (` id`, `type_de_ véhicule`, ` idmarca`, `modèle`) VALEURS (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3, 1, 1, «CIVIC»); 
  • f) Structure de la table pour le type de véhicule
 CREATE TABLE SI PAS EXISTE `vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `vehicle_type` varchar (200) DEFAULT NULL, CLE PRIMARY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; 
  • g) On insère des données dans la table vehicle_type
 INSERT INTO `vehicle_type` ('id`, ' vehicle_type`) VALUES (1, 'Voitures'), (2, 'Motocyclettes') 

Jusqu'ici, nous créons la base de données complète.

{title}

Structure de la page Web


Nous commençons la structure de la page Web avec php, l'exemple sera développé en php plat mais peut être adapté à n'importe quel framework.
1) Connectez-vous à la base de données Mysql en créant le fichier config.php

Nous allons créer une page Web appelée index.php où nous aurons le code pour afficher la liste des véhicules, puis filtrer la liste avec jquery. La conception que nous utilisons pour le tutoriel est assez simple.

{title}


Le code à l'intérieur de index.php pour montrer le design est le suivant:

Ensuite, nous créons le panneau supérieur:
Les marquesLes modèlesSélectionnerSélectionner
Véhicules
Sélectionner

Ensuite, le code de liste viendra avec les requêtes SQL, le div servira ensuite à afficher la liste filtrée:

MarqueModèlePhoto$ valeur) {$ row [$ key] = stripslashes ($ value); }?>

Véhicule

Actions



Maintenant que la liste est en cours d’exécution, nous devrons créer le filtre avec Jquery et programmer la fonctionnalité en mettant en relation la sélection. Le premier véhicule sélectionné, nous ajoutons une requête et modifions la sélection comme suit:
 Sélectionner 

Lors de l'exécution, le select sera chargé avec les véhicules:

{title}


Maintenant, Jquery vient pour cela, nous allons ajouter à index.php sur la ligne supérieure avant l'inclusion, la bibliothèque Jquery téléchargée à partir de //jquery.com/download/ ou lier le script suivant et l'utiliser à partir d'un chemin externe.

Nous allons créer un fichier appelé functions.js pour stocker le code Jquery et l'ajouter à la page située 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
 $ (function () {$ ("# véhicule"). change (function () {// le script est activé lorsque je sélectionne le véhicule véhicule select = $ (this) .val () // je prends la valeur sélectionnée // envoyer à une page qui fera la requête SQL et me renverra les données à mettre dans le select $ .get ("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});});}); 

Nous créons le fichier marks.php qui sera celui qui fera la requête qui sera ensuite chargée dans la sélection de marques:

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.

{title}


Maintenant, nous allons activer les modèles sélectionnés à partir de Marks pour cela, nous allons ajouter le code suivant à functions.jps:
 $ (function () {$ ("# marque"). change (function () {marque = $ (this) .val () // Valeur sélectionnée $ .get ("http: // localhost / projects / agencyautos / model .php? idmarca = "+ mark, function (data) {$ (" # modèle "). html (data); // 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 le même script que celui qui affiche la liste mais filtrée en fonction des options sélectionnées et le résultat sera attribué à la div id = "liste".
Le script juqery qui active la liste du modèle sélectionné sera
 $ (fonction () {$ ("# modèle"). change (fonction () {modèle = $ (ceci) .val () // Valeur sélectionnée $ .get ("http: // localhost / projects / agencyautos / listing .php? idmodel = "+ model, function (data) {$ (" # listing "). html (data); // je prends le résultat de la page et insère les données dans la liste div});});}) ; 

Le fichier list.php qui effectuera la requête de filtre:
MarqueModèlePhoto$ valeur) {$ row [$ key] = stripslashes ($ value); }?> 

Véhicule

Actions


Enfin, comme l'exemple fonctionne avec les filtres, il vous manque l'un des éléments pour restaurer la liste d'origine et enregistrer un véhicule que nous verrons dans un autre didacticiel.

{title}


Attention

Suite et plus d'informations sur ce tutoriel entrer ici

  • 0