Ajout d'un template HTML pour la page d'accueil
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte00:00:00 :Pour le moment dans notre application on retourne directement une chaîne de caractère donc ce n'estpas très pratique pour écrire du HTML. Bien entendu avec Flask on peut avoir un template HTML que l'on
00:00:09 :retourne directement et c'est ce qu'on va faire dans cette partie. Donc pour ça je vais créerun nouveau dossier qu'on va appeler templates. Alors attention c'est bien important de l'appeler
00:00:17 :templates avec un s tout en minuscules comme ça puisque Flask va se servir de ce nom pourtrouver les templates de l'application. Donc si vous l'appelez autrement ça ne marchera pas. Et
00:00:27 :avec PyCharm on peut mettre directement un slash et indiquer le nom du fichier qu'on veut créer. Dansce cas-ci je veux créer un fichier index.html. Donc même si je crée un nouveau dossier je peux
00:00:36 :créer un fichier directement à l'intérieur de ce dossier comme ça ça va être plus pratique. Doncje valide avec entrée et PyCharm va me dire qu'il a détecté un nom de fichier. Dans ce cas-ci je
00:00:45 :veux bien créer le fichier donc je clique sur yes create file et là on a bien le dossier et lefichier qui sont créés automatiquement. Ensuite je vais créer donc une structure de base ici. Donc
00:00:54 :je vais la coller comme ça. Donc toutes ces sources vous pouvez les retrouver dans les sourcesdu projet. Je vais pas écrire toutes les lignes une à une puisque ça serait un petit peu trop
00:01:02 :long. Donc là on a une structure de base avec un doc type html. On est avec ensuite le meta viewportdonc ça c'est pour le mobile donc pour qu'il détecte en fait quand on est sur un téléphoneet pour qu'il fasse un recadrage de notre interface pour qu'elle soit utilisable sur mobile. On a
00:01:17 :ensuite le titre de la page et là j'ai remis tout simplement le h1 avec le hello world. Donc pourl'instant on a créé le template mais on ne l'a pas retourné dans notre application. Pour ça on
00:01:27 :va utiliser une fonction qui s'appelle render template donc pour ça il faut l'importer. Doncon va rajouter cet import ici tout en haut de notre fichier et à la place de la chaîne de caractèreici on va faire un render template et indiquer le nom du template qui dans ce cas-ci est juste
00:01:41 :index.html. Alors là vous voyez que PyCharm me le surligne en jaune donc ça c'est normal c'estparce qu'on n'a pas encore indiqué que ce dossier était un dossier de template. Donc pour ça on peut
00:01:50 :faire un clic droit et on va aller ici dans mark directory as et indiquer qu'il s'agit d'un dossierde template. Il va aussi me dire que là pour l'instant il n'y a aucun langage de template qui
00:02:00 :est configuré donc je clique sur yes pour aller automatiquement le configurer dans les préférenceset dans le cas de Flask on est avec le langage de template Jinja2. Donc vous voyez qu'il y a
00:02:10 :différents langages ici. On a le langage de template de Django avec Flask par défaut c'estJinja2 qui va être utilisé. C'est un langage de template qui est très similaire à celui qui est
00:02:20 :disponible avec Django si jamais vous avez également utilisé ce framework. Donc je valide avec ok etlà on voit que la surbrillance disparaît puisqu'il a compris maintenant que ce dossier contenait destemplates et maintenant on peut naviguer directement dans ce template en faisant commande ou ctrl bpour atterrir dans ce fichier. Donc ça c'est parce que PyCharm a compris cette fois-ci la
00:02:39 :structure de notre dossier et on peut naviguer de l'un à l'autre. Donc voilà pour ce templateon va quand même s'assurer que ça fonctionne. Je vais relancer mon script mais cette fois-ci sans
00:02:48 :passer par le terminal on va cliquer sur la flèche bleue ici pour exécuter notre script. On peutle lancer de plein de façons différentes. Je peux cliquer sur la flèche ici, je peux aussi faire un
00:02:56 :clic droit sur app.py et faire un run de app et ça va créer une configuration qui va lancer cefichier. Donc là on voit qu'il va utiliser Python 3.10 donc l'exécutable de Python que l'on a
00:03:06 :défini dans nos préférences et il va tout simplement lancer le fichier app.py. Si je clique ici on vavoir qu'on a bien le hello world qui s'affiche. Pour être sûr que c'est bien le fichier html on va
00:03:16 :changer un petit peu on va dire goodbye world par exemple et si on retourne voir le site on a biengoodbye world cette fois qui s'affiche. Dès qu'on va faire une modification ici vous allez voir que
00:03:26 :on peut retourner sur le site et la modification a été prise en compte. Donc ça c'est vraiment parcequ'on a mis le mode debug à true. Si on enlève ce mode debug, donc si je reviens dans mon
00:03:35 :application je vais arrêter mon serveur en attendant et là je vais mettre le debug à false. Il vacharger les fichiers une fois seulement au début donc là je relance l'application, il va chargerles fichiers. Si je vais voir mon application j'ai bien hello world cette fois-ci et si je change
00:03:50 :et que je mets goodbye world, vous allez voir que les changements ne vont pas être répercutés et ona toujours hello world qui s'affiche même si j'actualise la page. Donc ça c'est vraiment
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
