‫Commençons par configurer notre moteur de modèles dans Express,
‫qui nous permettra ensuite de rendre des
‫sites Web à l'aide de modèles simples, comme nous en
‫avons parlé précédemment.
‫Donc, comme vous le
‫savez déjà, dans cette partie du
‫cours, il est maintenant temps d'envoyer un site Web rendu final au
‫client contenant, bien sûr, toutes
‫les données avec lesquelles nous avons
‫travaillé jusqu'à présent, comme les visites, utilisateurs et avis.
‫Maintenant, comment construisons-nous ou rendons-nous réellement ces sites Web ?
‫Eh bien, nous utilisons ce qu'on appelle un moteur
‫de modèle qui nous permettra de
‫créer un modèle, puis de remplir facilement ce modèle avec nos données.
‫Et le moteur de template
‫que nous allons utiliser dans ce cours s'appelle pug.
‫Il existe quelques autres moteurs de templates
‫comme le guidon ou EGS pour les personnes qui n'aiment pas pug, car
‫je sais qu'il y a des opinions bien arrêtées autour
‫de pug, mais je dirais quand même que pug
‫est en fait le moteur de template le plus couramment utilisé avec Express.
‫Alors maintenant, dans cette vidéo, installons carlin
‫et rendons notre toute première page Web en l'utilisant.
‫La première étape consiste à dire à
‫Express quel moteur de modèle nous
‫allons utiliser, et nous le faisons
‫en disant juste
‫au début de l'application, app. set, donc fondamentalement, c'est comme
‫un paramètre pour le moteur de vue, puis nous définissons cela sur pug.
‫Et c'est tout.
‫Ainsi, Express prend automatiquement
‫en charge les moteurs les plus courants,
‫et bien sûr, carlin est l'un d'entre eux.
‫Nous n'avons donc même pas besoin d'installer Pug, et nous
‫n'avons pas non plus besoin de l'exiger n'importe où.
‫Tout cela se passe
‫dans les coulisses en interne dans Express.
‫Nous avons donc défini notre moteur
‫de vue, maintenant nous devons également définir où ces
‫vues se trouvent réellement dans notre système de fichiers.
‫Ainsi, nos modèles de carlin sont en fait appelés vues dans Express.
‫C'est parce que ces modèles sont en
‫fait les vues dans l'architecture du contrôleur de vue
‫modèle que nous avons utilisé dans ce cours jusqu'à ce point.
‫Comme vous le savez, nous avons déjà les contrôleurs
‫et les dossiers modèles.
‫Fermons ces derniers.
‫Et maintenant, il est temps de créer le dossier de vues.
‫Avec cela, nous avons les trois
‫composants de l'architecture MVC.
‫Afin de définir maintenant dans quel dossier nos
‫vues se trouvent réellement, tout ce que nous
‫devons refaire est de dire app. set, et cette fois
‫c'est le paramètre de vue, ou en fait vues, et
‫puis ici le nom du chemin.
‫Maintenant, ici, nous pourrions simplement mettre quelque
‫chose comme ça, donc /views, mais ce n'est pas idéal.
‫Comme vous le savez déjà, le chemin que nous
‫fournissons ici est toujours relatif au répertoire à
‫partir duquel nous avons lancé l'application Note, et il s'agit
‫généralement du dossier racine du projet, mais ce n'est
‫peut-être pas le cas.
‫Nous ne devrions donc pas utiliser de
‫point ici, mais nous devrions plutôt utiliser la variable de nom de répertoire.
‫Alors faisons-le, et avec une astuce intéressante
‫que nous pouvons utiliser avec Note, qui utilise le module path.
‫Path est un module Note intégré, donc un module de base, qui
‫est utilisé pour manipuler les noms de chemin, essentiellement.
‫Il faut donc un chemin, donc bien sûr, nous
‫n'avons rien à installer.
‫C'est juste un module intégré natif.
‫Ce que nous pouvons maintenant faire, c'est chemin. join, puis
‫le nom du répertoire, puis les vues.
‫Cela créera ensuite, essentiellement dans
‫les coulisses, un chemin joignant le nom du répertoire /views.
‫Maintenant, il peut sembler un peu
‫exagéré d'utiliser ce chemin. join fonction ici, mais
‫nous ne savons pas toujours si un
‫chemin que nous recevons de quelque part a déjà une barre oblique ou non.
‫Vous verrez donc cette fonction ici utilisée tout le
‫temps afin d'éviter ce genre de bug.
‫Parce que de cette façon, nous n'avons même
‫pas besoin de penser aux barres
‫obliques ou non, car Note créera automatiquement un chemin correct.
‫En fait, nous devrions
‫également l'utiliser ici où nous créons ce middleware.
‫Ici, nous devrions en effet utiliser exactement la même chose ici.
‫Alors dupliquons simplement ceci.
‫Alors chemin d'accès, et public.
‫Mettons en fait celui-ci ici en haut,
‫car il appartient en quelque sorte à ceux-ci ici.
‫Encore un middleware, mais comme vous le
‫verrez dans l'une des prochaines vidéos, cela fonctionne
‫étroitement avec un moteur de vues.
‫Mais ici, nous avons maintenant mis en place notre moteur de carlin.
‫Il est maintenant temps de créer notre tout premier modèle.
‫Donc ici, créons notre premier fichier
‫pug appelé base. pug, et comme vous le
‫verrez, vs code a en fait sa propre icône sympa pour ce type de fichier.
‫Tout ce que je veux vraiment faire
‫ici pour le moment, c'est de créer un élément h1, donc un
‫titre principal simplement avec le nom d'une tournée, et
‫la façon dont cela fonctionne avec carlin est exactement comme ça.
‫Donc h1, puis le contenu de l'élément.
‫Disons le Park Camper.
‫Et c'est effectivement tout !
‫Cela se traduira alors par ceci
‫ici, h1 The Park Camper, puis fermera cela.
‫Donc, en html, nous aurions à écrire ceci, mais
‫la syntaxe pug rend tellement plus facile
‫d'écrire du html comme celui-ci.
‫Bien sûr, cela nous
‫permettra également de mettre toutes sortes de variables
‫ici, afin que nous puissions vraiment injecter nos données dans ces
‫modèles, mais pour l'instant, je suis vraiment
‫intéressé à publier quelque chose dans le navigateur.
‫Vous en apprendrez beaucoup plus sur le fonctionnement du carlin
‫au cours des deux prochaines conférences.
‫Pour l'instant, nous avons notre modèle de base ici, et
‫gardons ce nom à l'esprit.
‫Nous pouvons maintenant créer une nouvelle route à partir de
‫laquelle nous accéderons ensuite à ce modèle.
‫Faisons-le donc ici juste avant la route api.
‫Alors, app. get, qui pour le rendu des pages dans
‫un navigateur est généralement toujours celui
‫que nous utilisons, et donc qui a spécifié l'url ici, donc la route,
‫et c'est simplement la racine de notre site Web.
‫Ensuite, comme avant, nous avons bien sûr besoin
‫d'une fonction de gestionnaire, donc demande,
‫réponse, et maintenant pour
‫rendre notre modèle comme avant d'utiliser l'objet de
‫réponse, nous définissons toujours le statut sur 200 dans ce cas pour ok.
‫Mais au lieu d'utiliser json, comme celui-ci, comme nous
‫l'avons toujours utilisé jusqu'à présent,
‫il est maintenant temps d'utiliser render.
‫Donc, render rendra ensuite le modèle
‫avec le nom que nous
‫passons, et c'est dans ce cas, base.
‫Nous n'avons même pas besoin de spécifier l'extension
‫pug car Express saura automatiquement
‫qu'il s'agit du fichier que nous
‫recherchons et bien sûr il cherchera
‫ce fichier dans le
‫dossier qui a été spécifié dès le début, donc ceci une.
‫Il ira dans le dossier des
‫vues et y cherchera le modèle avec le nom de base.
‫Ensuite, il prendra ce modèle, le
‫rendra, puis l'enverra essentiellement en réponse au navigateur.
‫Super, alors testons ça maintenant.
‫Ainsi, notre serveur fonctionne
‫toujours sur le port hôte local 3000, je crois.
‫Et cela nous donne cette erreur,
‫impossible de trouver le module pug, et donc
‫en fait, nous devons vraiment installer le module pug.
‫J'ai donc dit plus tôt que nous ne
‫l'avons pas fait, mais en fait, nous devons le faire.
‫Express le chargera toujours automatiquement dans les coulisses, mais il
‫n'est pas fourni avec tous ces moteurs de modèles
‫installés prêts à l'emploi.
‫Alors npm installez carlin.
‫Et c'est parti, alors
‫essayons à nouveau, et maintenant, en
‫effet, nous obtenons le camping-car du parc.
‫C'est notre élément h1 que nous venons
‫de créer dans la base. pug, et si nous l'inspectons
‫maintenant, vous verrez qu'il s'agit d'un simple élément h1.
‫Bien sûr, il n'y a
‫pas de style ni de CSS à ce stade, mais nous
‫allons nous en occuper
‫au cours des deux prochaines conférences.
‫Pour l'instant, ce qui compte ici,
‫c'est que lorsque nous accédons à notre racine, route ici sur notre hôte, donc avoir
‫ceci est en effet la même chose que d'avoir ceci.
‫En accédant à cette route, nous avons
‫maintenant accès à un site
‫Web rendu dynamiquement basé sur notre base. modèle de carlin, super.
‫C'est la première étape de la configuration de carlin, et au
‫cours des deux prochaines conférences,
‫vous apprendrez ensuite à vraiment utiliser ce moteur de modèle pour
‫créer des sites Web incroyables et dynamiques.