| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| slam4:php:phalcon:td4 [2016/03/03 22:47] – jcheron | slam4:php:phalcon:td4 [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1 |
|---|
| **Institut Universitaire de Technologie**\\ | **Institut Universitaire de Technologie**\\ |
| Département Informatique - Campus III Ifs\\ | Département Informatique - Campus III Ifs\\ |
| Janvier-Février 2016 | Janvier-Février 2017 |
| ===== -- Pré-requis ===== | ===== -- Pré-requis ===== |
| <html><a href="/slam4/php/phalcon/td3"><button class="button" style="min-width:250px">Réalisation TD n°3</button></a><br> | <html><a href="/slam4/php/phalcon/td3"><button class="button" style="min-width:250px">Réalisation TD n°3</button></a><br> |
| <a href="http://slamwi.kobject.net/slam4/php/phalcon/jquery" target="new"><button class="button" style="min-width:250px">Phalcon JQuery</button></a><br> | <a href="http://phpmv-ui.kobject.net" target="new"><button class="button" style="min-width:250px">phpMv-UI toolkit</button></a><br> |
| </html> | </html> |
| |
| ===== -- Installation ===== | ===== -- Installation ===== |
| - Créer un nouveau projet Phalcon avec les devtools | - Créer un nouveau projet Phalcon avec les devtools |
| - Intégrer la librairie Phalcon-jquery avec composer | - Intégrer la librairie phpMv-UI avec composer |
| - Injectez le service **JQuery** au démarrage de l'application (dans le fichier **services.php**) | - Injecter le service **JQuery** au démarrage de l'application (dans le fichier **services.php**) et instancier **semantic** |
| - Intégrez le fichier javascript JQuery dans le fichier views/index.volt [[http://jquery.com/download/|jQuery download]], ou utilisez l'insertion par CDN automatiques | - Intégrer le fichier javascript JQuery dans le fichier views/index.volt [[http://jquery.com/download/|jQuery download]] |
| - Intégrez Bootstrap pour faciliter certains effets de présentation | - Intégrer Semantic-UI pour la partie présentation |
| ===== -- Tests ===== | ===== -- Tests ===== |
| |
| |
| ==== -- Afficher/masquer des éléments ==== | ==== -- Afficher/masquer des éléments ==== |
| | |
| | **Composants à utiliser :** |
| | |
| | * [[http://phpmv-ui.kobject.net/index/direct/main/54|HtmlCheckbox]] |
| | * [[http://phpmv-ui.kobject.net/index/direct/main/38|HtmlMessage]] ou [[http://phpmv-ui.kobject.net/index/direct/main/38|HtmlSegment]] pour **#zone** |
| | |
| * Créer la vue **views/test/hideShow.volt** sur le modèle suivant : | * Créer la vue **views/test/hideShow.volt** sur le modèle suivant : |
| | |
| * 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 | * 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) | ==== -- Requêtes Ajax Get sur event ==== |
| |
| ==== -- Changement de classe CSS ==== | **Composants à utiliser :** |
| * Créer la vue **views/test/changeCss.volt** sur le modèle suivant : | |
| | |
| {{:slam4:php:phalcon:jquery:changecssaction.png?nolink|}} | |
| |
| * Créer une action **changeCssAction** incorporant le comportement suivant dans la vue : | * [[http://phpmv-ui.kobject.net/index/direct/main/33|HtmlButton]] ou [[http://phpmv-ui.kobject.net/index/direct/main/50|HtmlButtonGroups]] pour les boutons |
| * Sur Changement dans la liste, la classe Css du bouton prend la valeur de l'élément sélectionné | * [[http://phpmv-ui.kobject.net/index/direct/main/38|HtmlMessage]] ou [[http://phpmv-ui.kobject.net/index/direct/main/38|HtmlSegment]] pour **#pageContent** |
| |
| ==== -- Requêtes Ajax Get sur event ==== | |
| * Créer la vue **views/test/changeCss.volt** sur le modèle suivant : | * Créer la vue **views/test/changeCss.volt** sur le modèle suivant : |
| | |
| |
| ==== -- Requête de récupération de données JSON ==== | ==== -- Requête de récupération de données JSON ==== |
| | |
| | **Composants à utiliser :** |
| | |
| | * [[http://phpmv-ui.kobject.net/index/direct/main/81|DataForm]] ou [[http://phpmv-ui.kobject.net/index/direct/main/83|FormLogin]] |
| |
| On ajoute au formulaire précédent la possibilité de récupérer via JSON les données initiales du formulaire à afficher : | On ajoute au formulaire précédent la possibilité de récupérer via JSON les données initiales du formulaire à afficher : |
| |
| - Effectuer la connexion à la base de données **{{:slam4:php:phalcon:invo.sql|Invo}}**. | - Effectuer la connexion à la base de données **{{:slam4:php:phalcon:invo.sql|Invo}}**. |
| - Générer le model **Products** correspondant à la table **products** de la base de données (respectant l'encapsulation) | - Générer les modèles correspondant aux tables de la base de données (en respectant l'encapsulation, avec getters/setters) |
| ==== -- Contrôleur et Vues ==== | ==== -- Contrôleur et Vues ==== |
| |
| |
| <html><div class="note">Les divs <b>#productDetails</b> et <b>#productForm</b> et leur squelette doivent être présents dans la page au chargement de la page index</div></html> | <html><div class="note">Les divs <b>#productDetails</b> et <b>#productForm</b> et leur squelette doivent être présents dans la page au chargement de la page index</div></html> |
| | |
| | **Composants à utiliser :** |
| | * [[http://phpmv-ui.kobject.net/index/direct/main/81|DataForm]] pour le formulaire |
| | * [[http://phpmv-ui.kobject.net/index/direct/main/80|DataElement]] pour l'affichage d'un produit |
| | * [[http://phpmv-ui.kobject.net/index/direct/main/79|DataTable]] ou [[http://phpmv-ui.kobject.net/index/direct/main/84|JsonDataTable]] pour la liste des produits |
| |
| {{:slam4:php:phalcon:jquery:products.png?nolink|}} | {{:slam4:php:phalcon:jquery:products.png?nolink|}} |
| |