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 :

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