Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de CakePHP

Utiliser Bootstrap pour ses formulaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Bootstrap est un framework CSS très utilisé dans le monde du web. Un plug-in permet de générer des formulaires avec un code HTML déjà réalisé en Bootstrap. Vous gagnerez un temps précieux lors de la réalisation de vos projets.
07:24

Transcription

Bootstrap est un framework HTML, CSS, Java Script qui permet de créer facilement des maquettes HTML responsive. Donc ici c'est le site de Bootstrap. Donc vous pouvez télécharger, en fait Bootstrap directement sur ce site-là, donc en cliquant sur getting started. Et ici vous pouvez en fait télécharger Bootstrap. Donc la communauté CakePHP, elle a créé en fait un plugin qui permet d'intégrer facilement Bootstrap aux différentes pages, et aux différents formulaires de Cake. Ici vous avez le repository du Bootstrap helper de CakePHP. Ici, vous voyez en fait, comment l'installer. Donc avec un composer require, c'est ce que je vais faire maintenant. Donc là je suis bien dans mon répertoire Cake, et là je vais coller le composer require. Tout a été installé. Ensuite du coup, il faut loader. Donc pour ça, il faut aller dans config, bootstrap.php, et ajouter le plugin ::load. Donc là c'est le plugin bootstrap. Dans le fichier app controller.php, donc SRC, controller, app controller. En fait ici il va falloir ajouter différents helper puisque ici, les helper de base vont devoir être surchargés en fait, parce que le plugin bootstrap en fait, se base sur les helper de base de CakePHP. Il vient ajouter des informations, ajouter des méthodes, etc., pour le helper HTML, form, paginator, et model. Donc il faut faire attention, c'est que, du coup, comme là nous avons dit que le helper HTML correspondait maintenant à bootstrap HTML, il faut bien veiller à ce que, en fait, dans le app view, donc là où on chargeait les helper, ici, il va bien falloir enlever ceux qui sont en doublon. Donc il faut bien penser à enlever le HTML puisque maintenant c'est celui de Bootstrap qui sera utilisé. Il faut aussi enlever le paginator, parce que c'est pareil, c'est celui de Bootstrap qui est utilisé. Ici on a juste le modèle. Celui-là n'appartient pas à CakePHP de base, du coup, on n'a pas besoin de l'enlever. Donc ensuite il faut télécharger la librairie Bootstrap. Donc ici, dans notre Bootstrap. Donc là hop, je dé-zip. Dans phpstorm je prends le bootstrap min.css puisque c'est celui qui est minifié. Du coup il faut que je le mette dans webroot, css, je le colle, voilà. Ensuite il faut que je fasse pareil avec le bootstrapmin.js. Voilà. Et ensuite il faut pas que j'oublie, aussi, c'est le dossier font puisqu'on va en avoir besoin juste après. Donc là je pose directement le dossier font. Du coup dans le layout, il va falloir ajouter les éléments bootstrap. Donc pour ça je vais dans layout, défaut. Je vais les laisser par défaut, et je vais simplement ajouter bootstrapmin.css. Et je vais aussi ajouter le bootstrapmin.js que je vais mettre, du coup juste après ici. Normalement il est recommandé de le mettre en bas. Les scripts il faut plutôt les mettre en bas, mais je vais les laisser ici pour commencer. Ensuite il faut aussi bien veiller, c'est que bootstrap a besoin de jQuery pour fonctionner, donc là je vais prendre le dernier jQuery, voilà. Hop ! Je vais l'afficher dans le finder. Et je vais l'inclure dans le dossier web root aussi. OK. Et ensuite je vais l'ajouter dans le default, juste avant le bootstrap, je vais ajouter le jQuery, voilà. Donc là si maintenant je vais voir dans font, ici. Ici je vois que j'ai bien mes scripts en plus qui ont été chargés. Donc voilà, j'ai bien mes scripts, bootstrap et tout ça qui ont été chargés et qui sont maintenant ici. Si vous voulez du coup utiliser font awesome, il est possible de modifier le Helper HTML donc celui qui se trouve dans app controller. Ici, et il est possible de préciser last name, ici, de dire use font awesome à true. Donc comme ça vous dites que vous utilisez cette font d'icônes exactement. Donc voila, ici, ça a un peu changé, c'est normal puisque je viens de charger le bootstrap css. Je vais peut-être enlever, quand même, les deux inclusions ici, de Bake et de css, elles sont peut-être en conflit. Donc voilà, là j'ai vraiment un affichage bootstrap. Du coup là on va commencer à utiliser les assistants bootstrap. Donc par exemple si je veux afficher un fil d'Ariane, donc là je vais reprendre toujours le même élément. du coup je prends dans template, articles, index. Je ne vais pas changer, je vais mettre tout en haut. Et ici par exemple si je veux ajouter un fil d'Ariane, donc c'est tout simple, il suffit de faire add crumb et là en fait vous définissez ici l'ensemble des informations de votre fil d'Ariane. Et ici ensuite vous faites un get, crumb, list. Donc là si je fais ça, ça ne s'affiche pas puisque je suis sur voitures il faut que j'aille sur articles. Donc là vous voyez que j'ai bien mon fil d'Ariane. Et j'ai bien les informations ici qui sont remplacées. Donc là si je vais voir le code source directement, ce sera plus simple. Ici j'ai bien /articles. Il a bien remplacé mon controller, etc. Ensuite si vous voulez utiliser glyph icon par exemple, hop, avec gl icon et le nom de l'icône, ça vous permet directement de l'afficher. Donc ici j'ai bien mon glyph icon. Pour les label bootstrap ça peut être très interéssant aussi. Pour les label bootstrap, par exemple ceux-là, vous avez ici des labels, donc mon label 1 qui est en primary, ensuite danger, ensuite success. Ce qui donne à l'écran, cela en fait. Ensuite vous avez aussi les badges bootstrap. Par exemple c'est avec $this-html-badge, du coup on voit ici que ça étend bien le helper HTML de base de CakePHP. Ensuite ici vous avez les alertes, donc là vous avez différentes alertes, ici c'est un success, ici c'est une alerte normale. Vous avez ici la possibilité de mettre un ID ou un type par exemple. Donc ce qui donne ça exactement. Ensuite pour les formulaires, c'est à peu près la même chose, en fait c'est que là, du coup, le formulaire, maintenant ça va donner des formulaires bootstrap, donc ici c'est un formulaire classique, vraiment classique. Donc ça donne ça. donc c'est vraiment, directement bootstrappé. Donc c'est ça qui est vraiment intéressant. Donc vous pouvez aussi donner des paramètres à la fonction create, vous pouvez lui dire par exemple que c'est en mode horizontal, l'affichage, vous pouvez lui donner une colonne, etc. Donc il est aussi possible de générer des modal, des paginator, et aussi tout l'ensemble des autres composants bootstrap.

L'essentiel de CakePHP

Développez des applications web évolutives avec CakePHP, du simple blog au site e-commerce à fort trafic. Installez et configurez le framework, maîtrisez le routing, etc.

3h39 (45 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
CakePHP CakePHP 3
Spécial abonnés
Date de parution :22 nov. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !