✅ Développement d'applications Web dynamiques avec Jquery, Php ET MySQL

Table des matières

La combinaison de PHP et Jquery est l'une des techniques les plus utilisées pour développer des applications Web dynamiques.
La bibliothèque JQuery fournit de nombreux plugins Jquery que les développeurs utilisent pour donner beaucoup de dynamisme à leurs applications afin d'améliorer l'expérience du visiteur à la fois sur le navigateur Internet ou sur un appareil mobile. Nous continuerons à développer l'application du didacticiel Générer des listes dynamiques avec Jquery, Php et Mysql, nous ajouterons des formulaires dynamiques pour enregistrer et modifier les informations, en appliquant la combinaison de php et jquery, nous pourrons effectuer cette tâche sans rediriger la page.
Nous allons également ajouter le plugin jquery.validator qui nous permettra de valider les champs du formulaire.
AttentionPour ce tutoriel nous aurons besoin du plugin que nous pouvons télécharger depuis http://jqueryvalidation.org/, lorsque nous le téléchargeons nous le décompressons et nous aurons tous les fichiers dont nous ne sommes intéressés que par deux pour l'instant, qui sont :
jquery.validate.js quel est le plugin lui-même messages_es.js qui est le fichier où nous mettrons les messages pour le visiteur et nous pouvons le traduire par langue.
Nous ajoutons les fichiers dans le répertoire du projet :

Nous avons alors la liste des véhicules générée, nous allons ajouter un formulaire pour enregistrer les véhicules.

En continuant avec le code du tutoriel précédent, nous devons avoir un calque où les formulaires seront affichés lorsqu'ils seront invoqués avec Jquery, pour cela, sous le nouveau bouton nous allons créer le calque des formulaires.

AGRANDIR

Dans l'en-tête de la page web index.php, nous ajoutons les bibliothèques de jquery.validator et messages. Ensuite, nous les utiliserons pour faire des formulaires dynamiques

Si nous ne voulons pas télécharger le plugin, nous pouvons l'utiliser à partir d'un serveur externe

Nous allons maintenant créer les fichiers avec le formulaire qui serviront à immatriculer un véhicule et que nous invoquerons à partir du nouveau bouton. Pour ce faire, nous devons nous assurer que le nouveau bouton a un identifiant (identifiant) afin que nous puissions ensuite reconnaître lorsqu'un événement se produit dans lequel, par exemple, un clic se produit. Ensuite, le code du bouton sera le suivant :
Le nom du composant et l'identifiant peuvent être les mêmes, mais uniques pour chaque composant html. Dans le fichier functions.js, nous écrivons le code suivant qui détectera le clic de souris sur le bouton newvehiculo et invoquera le fichier hivehiculos avec le formulaire d'inscription.

 // Appelez le formulaire d'immatriculation du véhicule $ (function () {$ ("# newvehiculo"). Cliquez sur (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data ) {$ ("#forms").html (data); // Je prends le résultat de la page et insère les données dans les formulaires div});});});

Ensuite, nous créons le formulaire d'inscription qui s'appellera altavehiculos.php
Nous intégrons les librairies nécessaires dans l'entête pour pouvoir travailler avec jquery et valider les champs

Nous créons des styles pour donner à la forme un peu de design et d'ordre. Pour l'exemple, il peut être utilisé dans le même fichier ou dans un fichier de feuille de style séparé, puis ajouté dans l'en-tête.

Ensuite, nous écrivons le code pour enregistrer les données et le code du formulaire pour capturer les données

 valeur $) {$ _POST [clé $] = mysql_real_escape_string (valeur $); } $ sql = "INSERT INTO` vehicle` (`vehicle_idtype`,` features`, `brandid`,` modelid`, `photo1`) VALEURS ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'characteristics']}', '{$ _POST [' brand id ']}', '{$ _POST [' model id ']}', '{$ _POST [' photo1 ']}') "; mysql_query ($ sql) ou die (mysql_error ()); echo "Enregistrement terminé."; }?> var13 -> // Je consulte les véhicules pour renseigner la sélection du type de véhicule Immatriculation du véhicule
Sélection de véhicule

Je crée également les fonctions Jquery pour relier les déclarations dans le formulaire d'inscription

 // sélectionnez l'immatriculation du véhicule et les marques associées $ (function () {$ ("# immatriculation du véhicule"). change (function () {vehicle = $ (this) .val (); // Valeur sélectionnée $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Je prends le résultat de la page et insère les données dans le combinaison });});}); // sélectionnez les marques et modèles associés $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Valeur sélectionnée $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Je prends le résultat de la page et insère les données dans le select} );});});

Une fois terminé, si nous exécutons et appuyons sur le nouveau bouton, le formulaire d'inscription devrait apparaître comme suit :

Comme nous pouvons le voir, le formulaire est affiché sans rediriger la page, si nous avons un plugin comme Firebug installé dans notre navigateur, nous pouvons voir les appels Jquery en arrière-plan.

Enfin nous allons faire le code de validation du formulaire en utilisant un simple script jquery et les règles du plugin validator. Dans le fichier functions.js, nous créons un script et nous nous référons à l'identifiant du formulaire et lui attribuons la fonction valider et la langue espagnole, sinon il sera par défaut en anglais lorsqu'il affichera un message d'erreur.

 // validation de formulaire $ (document) .ready (function () {$ ("# frmalta").validate ({lang: 'es' // ou quelle que soit l'option de langue que vous avez.});});

Ensuite, dans le composant que nous voulons valider, nous ajoutons la classe requise, c'est-à-dire que l'élément ne peut pas être vide ou sans données.
Les classes de validation se trouvent dans le fichier message. Exemple de validation
Valider un email :
Valider une date :
Valider un numéro :
Donc, si nous ajoutons la classe requise à notre formulaire à l'élément textarea, par exemple, et dans le cas des instructions select, nous devons laisser la première option vide, alors si rien n'est sélectionné, l'erreur se produira et le formulaire ne sera pas expédié.
fonctionnalités

Exemple pour les modèles sélectionnés :

 Sélection du modèle

Enfin, si nous remplissons le formulaire et cliquons sur le bouton Enregistrer, le formulaire s'enverra en effectuant un appel jquery à la même page altavehiculos.php, qui envoie le drapeau envoyé avec la valeur 1 puis active l'insertion dans la table MySQL.
Un détail qui reste à faire soit avec jquery soit en redirigeant de manière traditionnelle, c'est que lorsque les données sont sauvegardées la liste en haut est rafraîchie puisque le formulaire d'inscription disparaît, mais nous n'avons aucun événement pour irriguer la liste des véhicules, nous devons donc ajouter l'appel pour que la liste soit affichée dans la couche de liste que nous avons précédemment utilisée dans l'autre didacticiel, de cette manière, nous pouvons enregistrer des informations si vous redirigez la page ou effectuez des tâches en arrière-plan sans que l'utilisateur doive rediriger la page ou pour donner plus d'interactivité ou de transparence à l'application web, il permet également la réutilisation du code source puisqu'il est compatible avec tout navigateur et appareil compatible avec javascript.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif