1
00:00:01,240 --> 00:00:02,660
‫Instructeur : Et

2
00:00:02,660 --> 00:00:05,610
‫avant de commencer, faisons un bref récapitulatif du rendu

3
00:00:05,610 --> 00:00:07,440
‫côté serveur et côté client.

4
00:00:07,440 --> 00:00:09,860
‫Et aussi, je veux vous montrer dans cette

5
00:00:09,860 --> 00:00:12,850
‫vidéo le site Web rendu côté serveur que nous allons créer

6
00:00:12,850 --> 00:00:14,393
‫au cours des prochaines heures.

7
00:00:15,670 --> 00:00:18,680
‫Alors, rappelez-vous comment, dans le rendu côté client,

8
00:00:18,680 --> 00:00:20,600
‫la construction réelle du

9
00:00:20,600 --> 00:00:22,720
‫site Web se produit côté client.

10
00:00:22,720 --> 00:00:25,330
‫Et pour cela, nous avons besoin d'une source

11
00:00:25,330 --> 00:00:27,722
‫de données, qui est généralement une

12
00:00:27,722 --> 00:00:30,590
‫API qui envoie des données au client comme demandé.

13
00:00:30,590 --> 00:00:32,600
‫C'est donc ce que nous avons construit

14
00:00:32,600 --> 00:00:34,490
‫jusqu'à ce stade du cours.

15
00:00:34,490 --> 00:00:36,750
‫Mais maintenant que vous maîtrisez cette

16
00:00:36,750 --> 00:00:39,900
‫partie, il est temps de passer au rendu côté serveur

17
00:00:39,900 --> 00:00:43,030
‫et de créer le site Web sur le serveur.

18
00:00:43,030 --> 00:00:45,780
‫Et l'aspect principal du rendu côté serveur est

19
00:00:45,780 --> 00:00:47,930
‫la construction du code HTML

20
00:00:47,930 --> 00:00:52,140
‫réel, essentiellement parce que c'est là que toutes nos données seront stockées.

21
00:00:52,140 --> 00:00:54,480
‫Et pour ce faire, nous utilisons

22
00:00:54,480 --> 00:00:56,090
‫des modèles, qui ont

23
00:00:56,090 --> 00:00:59,960
‫des espaces réservés où nous injecterons ensuite nos données si nécessaire.

24
00:00:59,960 --> 00:01:02,200
‫Ainsi, chaque fois qu'il y a

25
00:01:02,200 --> 00:01:04,170
‫une demande, disons pour

26
00:01:04,170 --> 00:01:07,172
‫la page d'accueil, nous obtenons ensuite les données

27
00:01:07,172 --> 00:01:09,280
‫nécessaires de la base de données,

28
00:01:09,280 --> 00:01:11,410
‫les injectons dans un modèle, qui

29
00:01:11,410 --> 00:01:13,610
‫produira ensuite du HTML, et finalement

30
00:01:13,610 --> 00:01:15,890
‫enverra ce HTML, avec CSS et

31
00:01:15,890 --> 00:01:18,990
‫JavaScript et des fichiers image , retour au client.

32
00:01:18,990 --> 00:01:21,320
‫Assez simple, non?

33
00:01:21,320 --> 00:01:24,290
‫Maintenant, nous pouvons toujours utiliser l'API pour certaines

34
00:01:24,290 --> 00:01:26,640
‫des choses sur le front-end,

35
00:01:26,640 --> 00:01:29,840
‫et en fait, nous allons également le faire.

36
00:01:29,840 --> 00:01:32,600
‫Bon, de toute façon, permettez-moi maintenant de vous montrer ce

37
00:01:32,600 --> 00:01:35,150
‫que nous allons réellement construire dans cette section.

38
00:01:36,690 --> 00:01:39,900
‫Voici donc le site Web final de Natours, et il est actuellement

39
00:01:39,900 --> 00:01:44,000
‫en ligne sur www. natours. dev, et donc si vous

40
00:01:44,000 --> 00:01:45,360
‫en avez envie, allez-y

41
00:01:45,360 --> 00:01:46,193
‫et ouvrez

42
00:01:46,193 --> 00:01:48,150
‫cette page dans votre navigateur maintenant,

43
00:01:48,150 --> 00:01:49,500
‫et jetez un œil.

44
00:01:49,500 --> 00:01:52,360
‫Vous devrez spécifier ce W-W-W, d'accord ?

45
00:01:52,360 --> 00:01:54,320
‫Sinon, ça ne marchera pas.

46
00:01:54,320 --> 00:01:56,760
‫Quoi qu'il en soit, vous voyez ici toutes les

47
00:01:56,760 --> 00:01:58,060
‫visites avec lesquelles nous

48
00:01:58,060 --> 00:02:00,020
‫avons travaillé pendant que nous construisions notre

49
00:02:00,020 --> 00:02:02,940
‫API, et toutes les données ici sont vraiment exactement les mêmes.

50
00:02:02,940 --> 00:02:06,133
‫Donc, toutes nos neuf tournées sont là, n'est-ce pas,

51
00:02:07,010 --> 00:02:07,920
‫et

52
00:02:07,920 --> 00:02:09,800
‫encore une fois, c'est exactement

53
00:02:09,800 --> 00:02:12,700
‫ce que nous allons construire dans cette section.

54
00:02:12,700 --> 00:02:16,000
‫Jetons un coup d'œil à l'une des pages de détails ici.

55
00:02:16,000 --> 00:02:18,100
‫Donc, le Park Camper,

56
00:02:18,100 --> 00:02:21,170
‫et donc effectivement, vous avez la note moyenne.

57
00:02:21,170 --> 00:02:22,773
‫Vous avez tous les guides touristiques.

58
00:02:24,030 --> 00:02:25,600
‫Vous avez alors quelques photos.

59
00:02:25,600 --> 00:02:29,870
‫Vous avez tous les emplacements et affichés sur une carte, en fait.

60
00:02:29,870 --> 00:02:31,610
‫Et vous avez aussi la critique.

61
00:02:31,610 --> 00:02:34,060
‫Et ce sont, encore une fois, les

62
00:02:34,060 --> 00:02:37,380
‫vraies critiques provenant de vrais utilisateurs de la base de données.

63
00:02:37,380 --> 00:02:39,940
‫Donc, si vous deviez vérifier cette visite

64
00:02:39,940 --> 00:02:41,363
‫ici dans Postman,

65
00:02:43,500 --> 00:02:46,250
‫disons, alors obtenons d'abord toutes les visites

66
00:02:47,980 --> 00:02:51,100
‫ici juste pour obtenir l'ID du Park Camper.

67
00:02:51,100 --> 00:02:52,393
‫Alors, Sea Explorer,

68
00:02:55,770 --> 00:02:57,003
‫City Wanderer,

69
00:02:58,180 --> 00:02:59,880
‫alors où est-ce ?

70
00:02:59,880 --> 00:03:01,233
‫Ah, voici le Park Camper.

71
00:03:02,170 --> 00:03:04,123
‫Donc, si nous obtenons cette visite maintenant,

72
00:03:08,950 --> 00:03:10,650
‫vous verrez que, par exemple,

73
00:03:10,650 --> 00:03:12,690
‫les guides touristiques sont exactement les mêmes personnes.

74
00:03:12,690 --> 00:03:15,123
‫Donc, il y a Aarav, Ben et Kate,

75
00:03:16,130 --> 00:03:19,410
‫et donc, en effet, ce sont eux qui sont en

76
00:03:19,410 --> 00:03:21,080
‫fait les guides touristiques.

77
00:03:21,080 --> 00:03:22,730
‫Donc, ces

78
00:03:22,730 --> 00:03:25,210
‫trois-là, et encore une

79
00:03:25,210 --> 00:03:29,890
‫fois, les critiques sont aussi celles d'Ayla, Laura, Isabel

80
00:03:29,890 --> 00:03:33,690
‫et Alexander, ainsi que ces autres là-bas.

81
00:03:33,690 --> 00:03:36,640
‫Et donc, si nous regardons les

82
00:03:36,640 --> 00:03:38,807
‫critiques ici, alors en

83
00:03:38,807 --> 00:03:43,090
‫effet, elles viennent d'Ayla et Laura et Isabel et...

84
00:03:43,090 --> 00:03:46,150
‫Oui, vraiment, vous voyez que ces données

85
00:03:46,150 --> 00:03:48,520
‫sont vraiment les données sous-jacentes

86
00:03:48,520 --> 00:03:53,023
‫à partir desquelles ce site Web est généré dynamiquement, d'accord ?

87
00:03:54,140 --> 00:03:56,260
‫Ensuite, nous pouvons également nous connecter et

88
00:03:56,260 --> 00:03:57,890
‫tous les utilisateurs que nous

89
00:03:57,890 --> 00:04:00,353
‫avons dans la base de données fonctionneront pour cela.

90
00:04:01,750 --> 00:04:04,723
‫Donc, si nous jetons un coup d'œil à l'un de

91
00:04:06,430 --> 00:04:08,620
‫nos utilisateurs, utilisons par exemple Steve ici, qui

92
00:04:08,620 --> 00:04:10,593
‫est en fait un guide touristique.

93
00:04:12,690 --> 00:04:14,093
‫Donc, prenons l'exemple,

94
00:04:16,600 --> 00:04:17,630
‫utilisons l'e-mail,

95
00:04:17,630 --> 00:04:19,563
‫et le mot de

96
00:04:21,010 --> 00:04:23,010
‫passe est, comme toujours, test1234.

97
00:04:23,010 --> 00:04:25,070
‫D'accord, alors nous nous connectons, et cela

98
00:04:25,070 --> 00:04:26,880
‫se passe réellement dans les coulisses

99
00:04:26,880 --> 00:04:28,390
‫à l'aide de notre API.

100
00:04:28,390 --> 00:04:31,120
‫D'accord, et maintenant, nous avons ici Steve.

101
00:04:31,120 --> 00:04:33,663
‫On peut même ouvrir son compte.

102
00:04:35,620 --> 00:04:37,780
‫Nous pouvons ensuite changer le mot de passe,

103
00:04:37,780 --> 00:04:39,720
‫et cela, encore une fois, va

104
00:04:39,720 --> 00:04:42,840
‫se produire dans les coulisses en utilisant le point de terminaison d'API

105
00:04:42,840 --> 00:04:46,083
‫exact que nous avons construit pour un utilisateur changeant son mot de passe.

106
00:04:47,830 --> 00:04:49,610
‫Vous pouvez alors également consulter les réservations

107
00:04:49,610 --> 00:04:51,460
‫de cet utilisateur particulier, qui dans ce

108
00:04:51,460 --> 00:04:53,180
‫cas, ne devraient pas être

109
00:04:53,180 --> 00:04:55,170
‫des réservations car il est un guide touristique.

110
00:04:55,170 --> 00:04:56,773
‫Donc, vous voyez, c'est vide ici,

111
00:04:57,900 --> 00:04:58,970
‫mais de toute façon...

112
00:04:59,830 --> 00:05:01,520
‫Ouais, c'est ce que je

113
00:05:01,520 --> 00:05:03,800
‫voulais vous montrer car c'est ce que nous allons

114
00:05:03,800 --> 00:05:06,130
‫faire tout au long du reste de cette section.

115
00:05:06,130 --> 00:05:07,980
‫Donc, j'espère que cela vous

116
00:05:07,980 --> 00:05:09,000
‫enthousiasme, tout

117
00:05:09,000 --> 00:05:10,573
‫comme moi, et commençons maintenant.