jQuery mobile [Part2]

845 vues

Publié le

jQuery mobile [Part2]
Atelier Web Mobile Insat Android Club
2011-2012

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
845
Sur SlideShare
0
Issues des intégrations
0
Intégrations
77
Actions
Partages
0
Téléchargements
18
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

jQuery mobile [Part2]

  1. 1. Chibani Nader INSAT ANDROID CLUB 1 Atelier WebMobile : Tutoriel n°2 Validation d’un formulaire Commençons Ca y est, vous avez crée votre formulaire d’inscription ? Vous devriez maintenant envoyer les données entrés à un serveur pour les stocker dans une base de données mais avant ca on doit vérifier la disponibilité et la cohérence des informations données Dans ce chapitre, nous allons commencer à pratiquer ! Nous allons découvrir les bases du jQquery mobile et enregistrer notre première application web ! ☺ Alors oui, bien sûr, ne vous attendez pas encore à réaliser une page web exceptionnelle dès ce second chapitre, mais patience... ça viendra inchallah ! :D Principe Allez, mettons-nous en situation ! Comme je vous l'ai dit, nous allons vérifier nos information entrées dans le formulaire avent qu’elles soient transmises vers la base de données pour garantir qu’elles seront bien stockées et qu’il y’aura pas des problèmes des requêtes SQL Pour cela on doit programmer un script JQUERY permettant de réaliser cette tache donc on doit procéder par créer un nouveau fichier d’extension .JS Commençons le travail Ca y’est vous y êtes ?? GO GO GO :D La première tâche à réaliser lors de la programmation est de déclarer les variables qui seront utilisées plus tard dans les fonctions et exprimant les différents éléments participants dans le script (comme éléments de formulaire, emmm … et bcp d’autres choses :p ) var hdrMainvar = null; var contentMainVar = null; var ftrMainVar = null; var contentTransitionVar = null; var fonctionLabelVar = null; var fonctionVar = null; var sexeLabelVar = null; var sexeVar = null; var form1var = null;
  2. 2. Chibani Nader INSAT ANDROID CLUB 2 var confirmationVar = null; var contentDialogVar = null; var hdrConfirmationVar = null; var contentConfirmationVar = null; var ftrConfirmationVar = null; var inputMapVar = null; Ainsi que déclarer les constantes var MISSING = "missing"; var EMPTY = ""; var NO_FONCTION = "ZZ"; Une fois les variables et les constantes sont bien déclarées on doit les remplir et les initialiser, pour faire cela dans JQuerymobile on doit attendre que la page soit entièrement chargée pour cela on doit les initialiser dans la fonction $(document).ready(function (){….}) qui vérifie que la page est bien chargée dans le navigateur aussi on définit une variable ‘inputMapVar’ qui se chargera de parcourir toutes les balises de type ‘input’ dans le formulaire .Dans ce cas on ($('input[name*="_r"]') signifie que la variable inputMapVar contient toutes les balises input dont les noms finissent par "_r" Attention il faut vérifier que tous les noms des variables des balises input se terminent par ‘_r’ Ouf enfin toutes les variables qu’on va utiliser sont définit et initialisées :o Maintenant on va commencer la partie la plus dure (ne vous inquiétez pas ce n’est pas vrai juste un peu de concentration pas plus ;)) On commence tout d’abord par cacher les boites de dialogues et les pages de transitions ainsi définis dans le premier tutoriel (les divisions de ‘contentTransition’, ‘contentConfirmation’, ‘contentDialog’). On utilise pour ca les fonctions prédéfinies dans JQuery var.hide() & var.show (pour afficher) Alors on déclare les fonctions responsables de réaliser ce traitement de hide et de show pour toutes les divisions cités et qui sont très simple a implémenter .Bon comme même je vais vous présenter un exemple et a vous de suivre :D Ex : Pour cacher le contenu de la division contenant le formulaire ici on procède comme suit function hideMain(){ hdrMainVar.hide(); contentMainVar.hide(); ftrMainVar.hide(); } function showMain(){ hdrMainVar.show(); contentMainVar.show(); ftrMainVar.show(); }
  3. 3. Chibani Nader INSAT ANDROID CLUB 3 Maintenant on implémente toutes les fonctions de la même manière présentés ici je vais citer les noms de ces fonctions et a vous de les compléter bien sûr function hideContentTransition() //pour cacher la page de transition function showContentTransition() //pour afficher la page de transition function hideContentDialog() //pour cacher la division de boite de dialogue function showContentDialog() //pour afficher la division de boite de dialogue function hideConfirmation() //pour cacher la page de confirmation function showConfirmation() // pour afficher la page de confirmation Bonne chance :p Vous avez terminez ? Ok .Placez vous dans la fonction $(document).ready() après l’initialisation des variables vous devez cacher toutes les divisions que vous ne voulez pas les afficher lors de la première exécution de la page avec les fonctions ainsi définis (ici on va cacher les divisions de ‘contentTransition’, ‘contentConfirmation’, ‘contentDialog’ comme nous avons dis toute a l’heur ) N.B on peut aussi nommer la division qui va s’afficher lors du premier démarrage comme home en id et name mais ce n’est pas toujours efficace ;) Validation du formulaire Comme dans la plupart des formulaires pour indiquer aux utilisateurs qu’un tel champ doit être ré- rempli on lui souligner le label de ce champ pour cela on va mettre en place un nouvelle classe CSS qui se chargera de colorier les champs mal remplis en rouge label.missing { color:#FF0000; font-weight:bold; } Attention : verifier bien que la classe CSS missing est enregistré dans le répertoire CSS de votre projet On se lance maintenant a faire la vérification du formulaire on doit tout d’abord attendre que l’utilisateur appuie sur le bouton submit n’est ce pas ? Pour cela on déclare la fonction $(‘#nomForm’).submit(function(){….}) dans laquelle on va attaquer la vérification du formulaire mais avant la vérification des champs on doit initialiser les données de formulaire donc on doit éliminer les labels soulignés lors des précédentes vérifications on utilisera pour ce fin la fonction removeClass(missing)(n’oubliez pas ‘missing’ est le nom de la classe CSS ainsi défini ;)) Enfin on va commencer la vérification par la fameuse variable inputMapVar inputMapVar.each(function(index){ if($(this).val()==null || $(this).val()==EMPTY){ $(this).prev().addClass(MISSING); //pour marquer en rouge le label de this bon = true; } });
  4. 4. Chibani Nader INSAT ANDROID CLUB 4 Ici on voit claire l’utilisation de quelques nouvelles méthodes Var.Prev() //cette méthode est responsable de retourner vers l’élément qui précède la variable dans la page Var.val() // cette méthode retourne la valeur de la variable Pour parcourir les éléments de inputMapVar n’oubliez pas d’utiliser la méthode each() [inputMapVar.each(function(index){….})] Vous avez bien lu le code ?vous avez compris le rôle de chaque méthode ? Comme d’habitude maintenant a vous de terminer pour les autres éléments de la page (autre que input) montrez moi vite !!! Vérification terminés ? emm on doit voir si l’utilisateur a bien rempli son formulaire ou non pour cela on a utilisé une variable appelée ‘bon’ qui prend initialement false puis true a chaque fois qu’un élément ne vérifie pas les conditions du formulaire Si bon est true alors on doit appeler la boite du dialogue pour afficher un message d’erreur et retourner la valeur false pour submit if(bon == true){ showContentDialog(); return false; } Puis dans le contentDialog un bouton ok permet de retourner vers le formulaire qui sera modifier par la classe CSS missing pour indiquer les champs la ou on doit vérifier les données $('#buttonOK').click(function() { hideContentDialog(); showMain(); return false; });
  5. 5. Chibani Nader INSAT ANDROID CLUB 5 Oh j’ai oublié :p si le formulaire est bien rempli et la vérification était bonne (la variable bon = false) on doit afficher la page de transition et rediriger le submit vers la page cible (soit js ,php,…etc) puis afficher la page de confirmation showContentTransition(); //pour afficher la page de transition // envoyer le formulaire $.post("/forms/pageCible.php", form1Var.serialize(), function(data){ confirmationVar.text(data); hideContentTransition(); showConfirmation(); }); Page de transition Page de confirmation Vous trouvez avec ce tutoriel le code entier du projet réalisé enjoy ;)
  6. 6. Chibani Nader INSAT ANDROID CLUB 6 Liens utiles http://www.jquerymobile.com http://mobile.tutsplus.com http://www.siteduzero.com/ ****************************** Dans ce second tutoriel, nous avons commencé a invoquer la notion d’interaction pour notre page par l’intégration d’un script de vérification de formulaire en attendant l’intégration d’un script php pour une communication avec une base de donnée :D je vous promets que ca sera assez facile que celui-ci un juste un eu de concentration comme d’habitude ;) Cordialement, Chibani Nader 04/12/2011

×