TD n°5 - Scripts côté client

Institut Universitaire de Technologie
Département Informatique - Campus III Ifs
Janvier-Février 2015

Réalisation TD n°4
Phalcon JQuery

1. Créer un nouveau projet Phalcon avec les devtools
2. Injectez JQuery au démarrage de l'application (dans le fichier services.php)
3. Intégrez JQuery dans le fichier views/index.volt par la version 2.1.3, ou utilisez l'insertion par CDN automatiques
4. Intégrez Bootstrap pour faciliter certains effets de présentation

Effectuer la connexion à la base de données Invo, et reprenez les models du projet précédent.

Créer un contrôleur testController

• Créer la vue views/test/hideShow.volt sur le modèle suivant :

• Créer une action hideShowAction incorporant le comportement suivant dans la vue :
  • Sur Changement de valeur de la case à cocher, la div #zone s'affiche si la case est cochée, et se masque dans le cas contraire

• Ajouter le changement de texte de la checkbox (Elle doit faire apparaître “Masquer” si elle est cochée et “Afficher” dans le cas contraire)

• Créer la vue views/test/changeCss.volt sur le modèle suivant :

• Créer une action changeCssAction incorporant le comportement suivant dans la vue :
  • Sur Changement de valeur de la case à cocher, la div #zone s'affiche si la case est cochée, et se masque dans le cas contraire

• Ajouter le changement de texte de la checkbox (Elle doit faire apparaître “Masquer” si elle est cochée et “Afficher” dans le cas contraire)

• Créer la vue views/test/changeCss.volt sur le modèle suivant :

• Créer une action getSimpleAction incorporant le comportement suivant dans la vue :
  • Sur click du bouton #btPage1, la page /test/page1/ est affichée dans la div #pageContent
  • Sur click du bouton #btPage2, la page /test/page2/ est affichée dans la div #pageContent

• Créer les actions page1Action et page2Action, se limitant à afficher “Contenu de la page #”, désactiver l'affichage de la vue correspondante

• Dans getSimpleAction, ajouter le comportement suivant :
  • sur mouseover des bouton, son attribut data-description est affiché dans la zone #pageDesc

Créer les actions page1Action, page2Action et les vues (/views/test/page1 et /views/test/page2) correspondant au fonctionnement décrit ci dessous :

• Créer l'action postFormAction, affichant le formulaire affiché dans la vue views/test/postForm, ajouter le comportement défini ci-dessous
• Créer l'action postReponseAction affichant la réponse du post du formulaire

On ajoute au formulaire précédent la possibilité de récupérer via JSON les données initiales du formulaire à afficher :

• Le btUser1 permet de récuprérer et d'afficher les données de l'utilisateur1
• De même le btUser2 pour l'utilisateur2

Créer l'action

1. Incorporer les fichiers de la librairie dans le projet library du projet Invo
2. Injectez JQuery au démarrage de l'application (dans le fichier services.php)
3. Mettez à jour la version de JQuery présente dans le dossier public/js : par la version 2.1.3