1
00:00:00,350 --> 00:00:03,100
Welkom terug bij onze laatste video op deze blog.

2
00:00:03,310 --> 00:00:04,400
Dus moeten we veranderen.

3
00:00:04,400 --> 00:00:05,050
We gaan maken.

4
00:00:05,100 --> 00:00:20,030
De eerste is om de Express reiniger die ik noemde die ons zal helpen met dat probleem waar als voor het weergeven van HDMI Olafur hem eigenlijk het renderen van een gebruiker kan mogelijk dient een schadelijke javascript in plaats van een script hack uit te voeren.

5
00:00:20,130 --> 00:00:30,980
We willen niet dat de code uit te voeren, zodat we gebruiken ontsmettingsmiddel om ons te helpen met dat in principe neemt die ingang en het verwijdert alle scripts uit te halen en net geeft ons de collegiale hem eruit jaar.

6
00:00:31,290 --> 00:00:33,660
En dan willen we ook de stijl van de indexpagina een beetje.

7
00:00:33,690 --> 00:00:41,730
Het ziet er een beetje ruw en het laatste wat zal doen is een kleine update voor een rustgevende Rhodes tafel alleen maar om het een beetje meer nuttig voor u.

8
00:00:41,760 --> 00:00:44,000
Dus laten we beginnen met de reiniger.

9
00:00:44,400 --> 00:00:51,350
Dus ik ga een pakket met de naam Express dash sanitiser dash dash installeren.

10
00:00:51,390 --> 00:00:53,430
Besparen.

11
00:00:54,930 --> 00:00:55,660
OK.

12
00:00:55,710 --> 00:01:12,080
Nu dat is gebeurd in onze app ja we gaan om te eisen dat zo uitdrukkelijk sanitiser gelijk vereisen express Desch sanitiser net als dat.

13
00:01:12,330 --> 00:01:23,690
En dan moeten we onze app te vertellen om het te gebruiken app te gebruiken Express ontsmettingsmiddel en de enige vereiste is dat dit gaat na alle parser.

14
00:01:23,730 --> 00:01:25,110
Definieer hier.

15
00:01:25,270 --> 00:01:25,960
OK.

16
00:01:26,410 --> 00:01:27,730
En dat is het.

17
00:01:27,750 --> 00:01:34,410
Nu om het te gebruiken je het wilt doen om te beginnen in plaats van worden gemaakt wanneer u een nieuwe blog te maken.

18
00:01:34,410 --> 00:01:36,180
Dus het is echt een update te maken.

19
00:01:36,180 --> 00:01:39,900
Zijn de twee plaatsen waar we nemen data en het opslaan in de database.

20
00:01:39,900 --> 00:02:03,770
Beide keren wilt u ervoor zorgen dat ontsmetten de input en in plaats van het creëren wat we willen zuiveren is vragen up lichaam omhoog log van het lichaam dat is een soort van een puinhoop herinneren verzoeken up lichaam is wat afkomstig is van een vorm welke gegevens in het verzoek orgaan dat in ons geval afkomstig is van een vorm dan blog is vanwege deze lijn hier.

21
00:02:04,240 --> 00:02:09,020
image blog titel blog en vind uiteindelijk blog lichaam.

22
00:02:09,270 --> 00:02:11,020
En dit is degene die we de zorg over.

23
00:02:11,280 --> 00:02:13,500
Dus moeten we blog dot lichaam doen.

24
00:02:13,590 --> 00:02:18,470
Dus het is een soort van een lange lange naam hier maar te vragen lichaam omhoog blog temp lichaam.

25
00:02:18,720 --> 00:02:27,630
En we gaan om het te veranderen, zodat het gelijk is aan dat verzoek ontsmetten en we gaan dit hele ding te ontsmetten.

26
00:02:29,100 --> 00:02:38,670
Dus we nemen wat het is momenteel gelijk aan schoonmaken en dan het veranderen van de gehele verzoek een lichaam dump ingelogd lichaam te evenaren dat.

27
00:02:38,700 --> 00:02:42,230
Dus laat me dat duidelijk te maken voor u laten we een agent blog.

28
00:02:42,770 --> 00:02:51,510
Verzoek om het lichaam voor en na.

29
00:02:51,510 --> 00:02:53,080
Gewoon zo.

30
00:02:53,520 --> 00:02:59,330
En laat me toe te voegen in iets om het een beetje makkelijker om te zien maken.

31
00:02:59,340 --> 00:03:00,100
Grote.

32
00:03:00,570 --> 00:03:01,080
OK.

33
00:03:01,140 --> 00:03:02,360
Dus laten we geven het een schot nu.

34
00:03:02,400 --> 00:03:08,140
Start de server frisse de pagina.

35
00:03:08,250 --> 00:03:10,600
We moeten een nieuw bericht te maken.

36
00:03:11,340 --> 00:03:24,790
Laten we één belde net Demo willekeurige afbeelding en laat ons toe te voegen in een aantal goede HMO die we willen gebruiken of aan te gaan en dan is er iets slecht die net een waarschuwing weer zal zijn.

37
00:03:26,680 --> 00:03:28,630
Daar gaan we.

38
00:03:28,680 --> 00:03:35,330
Dus als dit werkt moeten we zien dat voor zowel van deze en het na slechts heeft dit.

39
00:03:35,730 --> 00:03:37,920
Laten we eens een kijkje nemen op wat er tot ongeveer is gekomen.

40
00:03:37,950 --> 00:03:38,620
Perfect.

41
00:03:38,640 --> 00:03:41,610
Je kunt zien dat de eerste keer dat lichaam is gelijk aan deze.

42
00:03:41,610 --> 00:03:45,320
Of we hadden onze script tag daar de tweede keer.

43
00:03:45,390 --> 00:03:47,360
Instantie alleen de H-1.

44
00:03:47,820 --> 00:03:49,830
Dus dat is alles wat we moeten doen om iets te ontsmetten.

45
00:03:50,040 --> 00:03:56,690
En als we nu weer hebben we naar onze nieuwe functie die zij geloven is dit een.

46
00:03:56,690 --> 00:03:59,700
Hier nemen we een kijkje nemen.

47
00:03:59,730 --> 00:04:03,350
We tonen van het probleem zelf, maar er is geen script-tag op alle.

48
00:04:03,540 --> 00:04:04,950
Dus dat werkt geweldig.

49
00:04:04,950 --> 00:04:14,380
Het laatste wat ze willen doen is dezelfde code uit te voeren, maar doe het in plaats van de update.

50
00:04:15,180 --> 00:04:21,040
Wij zijn daar voordat we een update verzoek op de blog.

51
00:04:21,390 --> 00:04:23,110
Wel deed hetzelfde.

52
00:04:23,400 --> 00:04:24,630
Een kleine No.

53
00:04:24,750 --> 00:04:34,170
Dit zou een goede use case voor wat bekend staat als een middleware die we hebben nog niet echt over gesproken, maar het is iets dat we twee keer zijn herhalende in twee verschillende routes.

54
00:04:34,170 --> 00:04:40,410
Wat we wel kunnen doen is schrijven een middleware die deze code voordat deze twee routes zal lopen maar we zullen dekken middleware.

55
00:04:40,440 --> 00:04:45,270
Later in deze cursus aan het einde van EXPRESS Dus we laten het hoe het is voor nu.

56
00:04:45,720 --> 00:04:47,270
En dat werkt prima.

57
00:04:47,520 --> 00:04:52,840
Dat maakt het ontsmetten zowel tijd als je te werken om het even wie maakt volgende.

58
00:04:52,860 --> 00:04:55,300
Laten we focussen op of index die E. J ..

59
00:04:55,320 --> 00:04:56,050
Ja.

60
00:04:56,060 --> 00:04:57,800
Dus het moet een beetje werk.

61
00:04:57,850 --> 00:04:59,380
Het lijkt erop dat dit recht nu.

62
00:04:59,760 --> 00:05:03,160
Laten we beginnen met een paar dingen te verwijderen.

63
00:05:03,600 --> 00:05:08,400
En dat was een van de berichten die ik had gemaakt voordat we het ontsmettingsmiddel toegevoegd.

64
00:05:08,440 --> 00:05:18,120
I Om een ​​aantal van deze degenen die geen afbeeldingen beschikbaar zijn gewoon zo dat we eindigen met iets makkelijker om stijl, waar we eigenlijk de foto's kunt zien verwijderen.

65
00:05:18,570 --> 00:05:25,370
OK dus hebben we deze wat we willen doen is het centreren te beginnen en ik ga een groot deel van de code die we al hebben gebruikt gebruiken.

66
00:05:25,600 --> 00:05:42,800
Dus in plaats van onze index hebben we een header dat is goed, maar dan gaan we alles te zetten binnen van een div en deze div class zal gelijk zijn aan hoofdtekst container dat is wat geeft ons dat gecentreerd container UI hebben.

67
00:05:43,060 --> 00:05:45,730
En dan binnen zal onze div hebben.

68
00:05:46,060 --> 00:05:52,690
En dit is in principe gerecycleerd uit de laatste weinig lijn in het laatste beetje schreven we voor de vormen en voor de show pagina.

69
00:05:52,720 --> 00:05:58,890
Dus class is gelijk aan je grote kop en dan gaan we gewoon een set van indexpagina.

70
00:05:58,930 --> 00:06:03,990
Laten we gewoon rust voor een blog.

71
00:06:04,390 --> 00:06:05,710
Gewoon zo.

72
00:06:05,830 --> 00:06:09,700
En toen hebben we dat goed gedaan ik voegde een andere div.

73
00:06:09,700 --> 00:06:23,770
Deze zal ons segment erin waarop dit UI top bevestigd segment dat net dat beetje lijn in het vak en dan de binnenkant van daar zullen worden doorlussen geeft geeft te hebben.

74
00:06:24,010 --> 00:06:43,940
En wij op pad gaan nog één lijn voordat we zelfs naar de lus die een div met de klas UI verdeeld items en vervolgens voor elk item dat we naar binnen gaan van jou Ik verdeelde items en we krijgen een automatische verdeler te zetten tussen hen.

75
00:06:44,170 --> 00:06:49,120
Dus we gaan om deze code te kopiëren naar dit je zijn verdeeld items.

76
00:06:49,120 --> 00:06:53,700
Wat we nodig hebben om een ​​aantal wijzigingen aan te brengen.

77
00:06:53,710 --> 00:06:58,470
De eerste is gewoon in de schulden, maar we zijn niet gewoon om deze binnen te drukken.

78
00:06:58,510 --> 00:07:21,620
We gaan een div class gelijk aan artikel en vervolgens in het artikel hebben wij ons imago eerste en het beeld zal in plaats daarvan gaan van een div met klasse die gelijk is aan het en we zullen daar we deze en die zal helpen beperken het creëren grootte van het beeld, zodat we niet de gigantische beelden toegang tot het hele scherm niet meer te krijgen.

79
00:07:21,990 --> 00:07:29,780
OK dus deed het beeld zet de afbeelding in dan moet een andere div class gelijk is aan de inhoud.

80
00:07:30,220 --> 00:07:32,470
En dit is waar ik een paar dingen zal zetten.

81
00:07:32,470 --> 00:07:53,430
Eerste is de titel en in plaats van het maken van een H-2 met een titel daadwerkelijk en om een ​​anker tag en of anchor tag klasse gelijk aan Hetter hebben, maar zal ook een referentie gelijk aan de show pagina en Riskin een kopie die u bent hier net als dat wat je al hebt.

82
00:07:53,440 --> 00:08:04,470
Dus de lees verder link, zodat de reden waarom we dit doen bent, zodat we kunnen eindigen met onze header voor elke blog ik kan erop klikken om naar de show pagina of klik op lees meer.

83
00:08:04,880 --> 00:08:07,410
Laten we ervoor zorgen dat we hebben een kleine syntax error.

84
00:08:07,450 --> 00:08:11,450
We missen onze slotkoers hier voor Atra flops.

85
00:08:12,670 --> 00:08:13,630
OK.

86
00:08:13,960 --> 00:08:18,520
Atra is de show pagina en vervolgens in de beugels hebben we een blog titel.

87
00:08:18,520 --> 00:08:19,860
Het is een beetje een puinhoop.

88
00:08:19,930 --> 00:08:35,530
Dan na dat zullen we voegen in een div met klasse gelijk is aan Metta dat is gewoon een plek voor ons om informatie te zetten over dit specifieke artikel dat in ons geval slechts een overspanning met de datum die we al hebben, zal zijn.

89
00:08:36,040 --> 00:08:51,890
Maar ik ga deze datum ook, dus blog dot gemaakt om datumtekenreeks die we al op de show pagina zag opmaken en dan sluiten we die er wonen dan zullen we een div class gelijk aan beschrijving hebben.

90
00:08:52,210 --> 00:08:55,280
En dat is waar we deze inhoud zullen zetten.

91
00:08:55,690 --> 00:08:58,230
De behuizing van de blog.

92
00:08:58,600 --> 00:09:08,160
En in plaats van het doen van isgelijkteken Ik zal het terug naar een streepje of niet veranderen veranderen terug, maar we zullen het veranderen naar een Dasht zodat we de werkelijke leeftijd van onze content die nu is opgeschoond te krijgen.

93
00:09:08,380 --> 00:09:24,430
Ten slotte ik een div klassiek tot extra en in plaats van dat zal de knop om te zetten om meer te lezen en zal een anker tag te maken en ik ga een tag hebben we al in kopiëren en veranderen het gewoon een beetje.

94
00:09:24,430 --> 00:09:30,710
Dus we hoeven niet de klassiek tot meer header maar we willen in plaats daarvan is een grote knop.

95
00:09:30,970 --> 00:09:35,280
Dus ik zweefde basic.

96
00:09:35,470 --> 00:09:38,410
Kies uw kleur van do Violet weer.

97
00:09:39,370 --> 00:09:42,190
En we kunnen dit doen een beetje.

98
00:09:42,190 --> 00:09:44,630
Het is zeker veel om naar te kijken.

99
00:09:44,950 --> 00:09:48,090
Dus laten we dit laten we dit op een klein beetje.

100
00:09:48,160 --> 00:10:07,360
Dus na de opening hier vervolgens de anchor tag we meer hebben gelezen en we voegen op een pictogram van een chevron pictogram dat net een beetje pijl na meer lezen.

101
00:10:07,380 --> 00:10:09,040
OK marathon daar.

102
00:10:09,070 --> 00:10:10,680
Veel dingen die we toegevoegd.

103
00:10:10,750 --> 00:10:20,470
Zorg ervoor dat alles is op zoek OK en zeker gewoon een kijkje nemen op de oplossing code als u niet wilt dat dit te nemen vanaf nul.

104
00:10:20,710 --> 00:10:25,360
Laten we eens kijken hoe het er naar jou geen syntax fouten.

105
00:10:27,310 --> 00:10:30,570
Dat of we gaan net wat we zoeken.

106
00:10:30,580 --> 00:10:37,570
Dus we afkappen de eerste 100 tekens in die of zoveel personages als er in dit bericht.

107
00:10:37,570 --> 00:10:43,560
In dit geval zeer korte klik op lees meer de link werken neemt ons mee naar de show pagina.

108
00:10:43,690 --> 00:10:47,760
We kunnen terugkijken bewerken gaan.

109
00:10:47,760 --> 00:10:49,170
We hebben haar beelden hier.

110
00:10:49,210 --> 00:10:57,910
Na het verdeelde lijnen die we hebben onze Hetter we hebben dit segment rond te gaan alles en we zijn vrij veel gedaan.

111
00:10:58,210 --> 00:11:04,060
Dus nogmaals niet het gevoel dat we zeker niet het gevoel dat je moet al deze klassen kennen.

112
00:11:04,060 --> 00:11:04,940
Ik heb soort gewoon.

113
00:11:05,140 --> 00:11:06,090
Je weet dat gaf ze aan u voor.

114
00:11:06,130 --> 00:11:07,380
Snelvuur stijl.

115
00:11:07,510 --> 00:11:10,660
Omdat een punt is niet dat je je leert al deze.

116
00:11:11,080 --> 00:11:14,670
Maar als je meer wilt weten en ga naar semantische dashi waarom dotcom.

117
00:11:14,690 --> 00:11:17,200
Er is een groot aantal mooie tutorials en middelen.

118
00:11:17,260 --> 00:11:21,270
Het is nog niet zo veel gebruikt als bootstrap, maar het is zeker groeit.

119
00:11:21,400 --> 00:11:24,770
Ik heb veel van mijn studenten merkte zou het te vinden op hun eigen.

120
00:11:24,880 --> 00:11:37,430
Terwijl in het verleden zou ik het introduceren om ze na BlueChip in de meeste van de twee meest recente klassen ik heel snel leerde de studenten verliefd op het zonder me ooit laten zien voor hen en ze belandde via het over bootstrap.

121
00:11:37,630 --> 00:11:40,800
De meeste studenten, maar helemaal aan jou.

122
00:11:40,880 --> 00:11:45,300
Ik heb genoten van hen beiden en bootstrap is zeker meer populair voor nu.

123
00:11:45,340 --> 00:11:50,780
OK dus het laatste wat ik noemde we doen is refactoren onze tafel slechts een heel klein beetje.

124
00:11:50,920 --> 00:11:57,140
En alles wat ik wil doen is toe te voegen in een laatste kolom voor de mangoest methode die overeenkomt met elk van deze.

125
00:11:57,400 --> 00:12:03,510
Dus vinden door id vinden door 80 een update vondst van id toe te voegen verwijderen en ga zo maar door.

126
00:12:03,860 --> 00:12:06,100
Ik zal een snel overzicht van de manier waarop de tabellen werken.

127
00:12:06,110 --> 00:12:24,540
Dus hier is een grafiek die het bedrag dat we nodig hebben om toe te voegen in een andere th ouder worden en we zullen gewoon noemen het mangoest methode en laten we het openstellen van de voorvertoning een koken voorbeeld en verplaats het naar de bodem hier.

128
00:12:24,750 --> 00:12:27,150
Daar is onze tafel of nieuwe Th.

129
00:12:27,460 --> 00:12:36,450
En dan voor de index zullen we een tv in de mangoest methode er toe te voegen voor de hond zou moeten zijn hond te vinden.

130
00:12:36,880 --> 00:12:38,230
Daar ga je.

131
00:12:38,230 --> 00:12:43,400
Next up hebben we nieuwe die eigenlijk geen monniken methode bij allen hebben.

132
00:12:43,450 --> 00:12:50,890
Dus in plaats van het verlaten van het veld leeg zal ik gewoon in een bestand dat het doet is het maken van een formulier.

133
00:12:51,130 --> 00:12:59,330
Vervolgens hebben we te maken en creëren gaat om een ​​hond dot maken te doen.

134
00:13:01,150 --> 00:13:12,040
En een echt leuke functie als je dit leven voorvertoning is als MIDI bewerken van het kwam merkte dat het me laat zien als ik het selecteren van hier beneden die is vrij cool.

135
00:13:12,190 --> 00:13:15,920
Dus je hoeft niet eens om de openstelling van de inspecteur en gewoon live te zien.

136
00:13:16,120 --> 00:13:21,900
En als ze dingen die ze te werken voor live en veranderen zonder op te slaan of vernieuw de pagina.

137
00:13:22,420 --> 00:13:22,820
OK.

138
00:13:22,930 --> 00:13:31,900
Dus dan hebben we een show die een hond die vinden door ID dan hebben we het doet.

139
00:13:32,260 --> 00:13:35,400
Die doet ook een hond krijgt een boete opgelegd door ID.

140
00:13:35,710 --> 00:13:49,880
We moeten de hond die we bewerkt te vinden en dat is voor de vorm en dan updaten doet een hond die trimed door id en updaten lang.

141
00:13:50,360 --> 00:14:00,830
En hij is ook enigszins lange hond niet vinden door id en verwijder elke gaan.

142
00:14:01,300 --> 00:14:02,300
Laten we kijken.

143
00:14:02,620 --> 00:14:04,250
Hier is onze tafel.

144
00:14:04,380 --> 00:14:23,150
Het lijkt erop dat ik per ongeluk verwijderde een van de CD's hier die geacht wordt om te laten zien welke update is dus update is bedoeld om de hond Stuper wekkerkettingen hond te werken dan omgeleid ergens.

145
00:14:24,150 --> 00:14:24,860
Okee.

146
00:14:25,150 --> 00:14:26,430
Nu moeten we weer terug naar normaal.

147
00:14:26,480 --> 00:14:28,220
Hier is onze tafel.

148
00:14:28,210 --> 00:14:31,740
Dus de enige die geen mangoest methoden heeft op alle.

149
00:14:31,960 --> 00:14:37,390
Het gaat nieuw te zijn omdat er is niets te vinden van de database is het niet om het even wat toe te voegen.

150
00:14:37,570 --> 00:14:40,090
Het maakt ons alleen maar een vorm.

151
00:14:40,210 --> 00:14:40,570
Grote.

152
00:14:40,570 --> 00:14:44,580
Dus hopelijk is dit nuttig voor u in de toekomst kan verwijzen naar deze tabel.

153
00:14:44,870 --> 00:14:50,290
Ik zal verwijzen naar het zeker bestrijkt heel wat belangrijke informatie die we gebruiken veel.

154
00:14:50,290 --> 00:14:50,860
Okee.

155
00:14:50,980 --> 00:14:56,280
Dus eindigen we dit nu krijgen we om verder te gaan om wat meer leuke dingen wat ingewikkelder apps.

156
00:14:56,360 --> 00:14:59,980
Ik heb gemerkt dat er was een beetje van Amerika op bedekt veel.

157
00:15:00,040 --> 00:15:01,710
Het is altijd een zware dobber om te maken.

158
00:15:01,710 --> 00:15:03,870
Interessant omdat ze een hoop informatie.

159
00:15:03,880 --> 00:15:12,380
Maar maar het is belangrijk om dat geloofwaardig te kunnen lezen-update te maken en een entiteit te verwijderen kost veel wraps.

160
00:15:12,380 --> 00:15:12,810
Okee.

161
00:15:12,900 --> 00:15:13,920
Ik zie je in het volgende jaar.