Les premières routes et pages

Cette partie sera introduite en live-coding. Pensez à bien prendre des notes pour vous y référer plus tard !

1. Si ce n'est pas déjà fait, installez le maker bundle. Documentation : https://symfony.com/bundles/SymfonyMakerBundle/current/index.html
2. Pour rendre des pages HTML et non du JSON, assurez-vous que le bundle Twig est installé. Documentation : https://symfony.com/doc/current/templates.html
3. Créez la page d'accueil (méthode GET, route /, nom Home) avec la commande symfony console make:controller.
4. Créez la page des wallets (méthode GET,route /wallets, nom Wallets\List) avec la commande symfony console make:controller.
5. Créez la page d'un wallet (méthode GET,route /wallets/{id}, nom Wallets\Show) avec la commande symfony console make:controller.
6. Créez la page de paramètres (méthode GET,route /settings, nom Settings) avec la commande symfony console make:controller.

La commande ne génèrera pas forcément le bon code directement, vous devrez certainement ajuster les paramètres dans les attributs de route pour correspondre aux consignes.

Cette partie sera introduite en live-coding. Pensez à bien prendre des notes pour vous y référer plus tard !

1. Si ce n'est pas déjà fait, installez l'asset mapper. Documentation : https://symfony.com/doc/current/frontend/asset_mapper.html
2. Supprimez le fichier app.js généré par défaut dans le dossier assets.
3. Créez un fichier CSS de base (par exemple assets/styles/main.css) et un fichier JavaScript de base (par exemple assets/scripts/main.js).
4. Dans le template de base (base.html.twig), supprimez la directive importmap si elle est présente.
5. Utilisez la directive asset() de Twig pour inclure ces fichiers dans le template de base.

Vous pouvez ajouter Bootstrap ou Tailwind CSS pour faciliter la mise en forme.

Vous devrez simplement utiliser leurs modes CDN pour vous faciliter la tâche, et inclure leurs liens avant vos propres fichiers CSS/JS pour pouvoir les surcharger si besoin.

• Bootstrap : https://getbootstrap.com/docs/5.3/getting-started/introduction/
• Tailwind CSS : https://tailwindcss.com/docs/installation/play-cdn

Cette partie sera introduite en live-coding. Pensez à bien prendre des notes pour vous y référer plus tard !

1. Créez un dossier _layouts dans le dossier templates.
2. Définissez deux fichiers de layouts : un layout _layouts/standard.html.twig pour les pages publiques et un layout _layouts/in_app.html.twig pour les pages accessibles aux utilisateurs connectés.
3. Faites en sorte que les layouts héritent d'un template de base base.html.twig qui inclut les styles et scripts communs.
4. Liez les pages créées précédemment (via make:controller) à leur layout respectif en utilisant l'héritage de templates de Twig (directive {% extends %}).
   • La page d'accueil utilisera le layout _layouts/standard.html.twig.
   • Les pages des wallets utiliseront le layout _layouts/in_app.html.twig.

Vous trouverez toute la documentation nécessaire par ici :

• Documentation Twig : https://twig.symfony.com/doc/3.x/
• Héritage de templates Twig : https://twig.symfony.com/doc/3.x/tags/extends.html
• Intégration de Twig avec Symfony : https://symfony.com/doc/current/templates.html

Cette partie sera introduite en live-coding. Pensez à bien prendre des notes pour vous y référer plus tard !

1. Créez un dossier _components dans le dossier templates.
2. Créez un component Twig pour le menu de navigation. (par exemple _components/menu.html.twig).
3. Incluez ce composant dans le layout _layouts/in_app.html.twig avec la directive {% include %}.
4. Le menu doit contenir des liens vers les pages suivantes : Wallets, Settings, Logout.
5. Utilisez la fonction path() de Twig pour générer les URLs des liens du menu.
6. Mettez en évidence la page active dans le menu en utilisant une condition Twig pour comparer la route actuelle avec les routes des liens du menu. Documentation : https://symfony.com/doc/current/templates.html#the-app-global-variable

Cette partie sera introduite en live-coding. Pensez à bien prendre des notes pour vous y référer plus tard !

1. Si ce n'est pas déjà fait, installez le Web Profiler Bundle. Documentation : https://symfony.com/doc/current/profiler.html
2. Vérifiez que le profiler est bien activé en environnement de développement.
3. Accédez à une page de votre application et vérifiez que la barre de debug apparaît en bas de la page.

1. Consultez la documentation suivante : https://symfony.com/doc/current/controller/error_pages.html
2. Créez des templates Twig personnalisés pour les erreurs 404 et 500.
   • Les pages devront afficher un message d'erreur clair, le code d'erreur et un lien pour revenir à la page d'accueil.