‫Instructeur : Et
‫avant de commencer, faisons un bref récapitulatif du rendu
‫côté serveur et côté client.
‫Et aussi, je veux vous montrer dans cette
‫vidéo le site Web rendu côté serveur que nous allons créer
‫au cours des prochaines heures.
‫Alors, rappelez-vous comment, dans le rendu côté client,
‫la construction réelle du
‫site Web se produit côté client.
‫Et pour cela, nous avons besoin d'une source
‫de données, qui est généralement une
‫API qui envoie des données au client comme demandé.
‫C'est donc ce que nous avons construit
‫jusqu'à ce stade du cours.
‫Mais maintenant que vous maîtrisez cette
‫partie, il est temps de passer au rendu côté serveur
‫et de créer le site Web sur le serveur.
‫Et l'aspect principal du rendu côté serveur est
‫la construction du code HTML
‫réel, essentiellement parce que c'est là que toutes nos données seront stockées.
‫Et pour ce faire, nous utilisons
‫des modèles, qui ont
‫des espaces réservés où nous injecterons ensuite nos données si nécessaire.
‫Ainsi, chaque fois qu'il y a
‫une demande, disons pour
‫la page d'accueil, nous obtenons ensuite les données
‫nécessaires de la base de données,
‫les injectons dans un modèle, qui
‫produira ensuite du HTML, et finalement
‫enverra ce HTML, avec CSS et
‫JavaScript et des fichiers image , retour au client.
‫Assez simple, non?
‫Maintenant, nous pouvons toujours utiliser l'API pour certaines
‫des choses sur le front-end,
‫et en fait, nous allons également le faire.
‫Bon, de toute façon, permettez-moi maintenant de vous montrer ce
‫que nous allons réellement construire dans cette section.
‫Voici donc le site Web final de Natours, et il est actuellement
‫en ligne sur www. natours. dev, et donc si vous
‫en avez envie, allez-y
‫et ouvrez
‫cette page dans votre navigateur maintenant,
‫et jetez un œil.
‫Vous devrez spécifier ce W-W-W, d'accord ?
‫Sinon, ça ne marchera pas.
‫Quoi qu'il en soit, vous voyez ici toutes les
‫visites avec lesquelles nous
‫avons travaillé pendant que nous construisions notre
‫API, et toutes les données ici sont vraiment exactement les mêmes.
‫Donc, toutes nos neuf tournées sont là, n'est-ce pas,
‫et
‫encore une fois, c'est exactement
‫ce que nous allons construire dans cette section.
‫Jetons un coup d'œil à l'une des pages de détails ici.
‫Donc, le Park Camper,
‫et donc effectivement, vous avez la note moyenne.
‫Vous avez tous les guides touristiques.
‫Vous avez alors quelques photos.
‫Vous avez tous les emplacements et affichés sur une carte, en fait.
‫Et vous avez aussi la critique.
‫Et ce sont, encore une fois, les
‫vraies critiques provenant de vrais utilisateurs de la base de données.
‫Donc, si vous deviez vérifier cette visite
‫ici dans Postman,
‫disons, alors obtenons d'abord toutes les visites
‫ici juste pour obtenir l'ID du Park Camper.
‫Alors, Sea Explorer,
‫City Wanderer,
‫alors où est-ce ?
‫Ah, voici le Park Camper.
‫Donc, si nous obtenons cette visite maintenant,
‫vous verrez que, par exemple,
‫les guides touristiques sont exactement les mêmes personnes.
‫Donc, il y a Aarav, Ben et Kate,
‫et donc, en effet, ce sont eux qui sont en
‫fait les guides touristiques.
‫Donc, ces
‫trois-là, et encore une
‫fois, les critiques sont aussi celles d'Ayla, Laura, Isabel
‫et Alexander, ainsi que ces autres là-bas.
‫Et donc, si nous regardons les
‫critiques ici, alors en
‫effet, elles viennent d'Ayla et Laura et Isabel et...
‫Oui, vraiment, vous voyez que ces données
‫sont vraiment les données sous-jacentes
‫à partir desquelles ce site Web est généré dynamiquement, d'accord ?
‫Ensuite, nous pouvons également nous connecter et
‫tous les utilisateurs que nous
‫avons dans la base de données fonctionneront pour cela.
‫Donc, si nous jetons un coup d'œil à l'un de
‫nos utilisateurs, utilisons par exemple Steve ici, qui
‫est en fait un guide touristique.
‫Donc, prenons l'exemple,
‫utilisons l'e-mail,
‫et le mot de
‫passe est, comme toujours, test1234.
‫D'accord, alors nous nous connectons, et cela
‫se passe réellement dans les coulisses
‫à l'aide de notre API.
‫D'accord, et maintenant, nous avons ici Steve.
‫On peut même ouvrir son compte.
‫Nous pouvons ensuite changer le mot de passe,
‫et cela, encore une fois, va
‫se produire dans les coulisses en utilisant le point de terminaison d'API
‫exact que nous avons construit pour un utilisateur changeant son mot de passe.
‫Vous pouvez alors également consulter les réservations
‫de cet utilisateur particulier, qui dans ce
‫cas, ne devraient pas être
‫des réservations car il est un guide touristique.
‫Donc, vous voyez, c'est vide ici,
‫mais de toute façon...
‫Ouais, c'est ce que je
‫voulais vous montrer car c'est ce que nous allons
‫faire tout au long du reste de cette section.
‫Donc, j'espère que cela vous
‫enthousiasme, tout
‫comme moi, et commençons maintenant.