Welkom terug bij onze laatste video op deze blog.
Dus moeten we veranderen.
We gaan maken.
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.
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.
En dan willen we ook de stijl van de indexpagina een beetje.
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.
Dus laten we beginnen met de reiniger.
Dus ik ga een pakket met de naam Express dash sanitiser dash dash installeren.
Besparen.
OK.
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.
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.
Definieer hier.
OK.
En dat is het.
Nu om het te gebruiken je het wilt doen om te beginnen in plaats van worden gemaakt wanneer u een nieuwe blog te maken.
Dus het is echt een update te maken.
Zijn de twee plaatsen waar we nemen data en het opslaan in de database.
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.
image blog titel blog en vind uiteindelijk blog lichaam.
En dit is degene die we de zorg over.
Dus moeten we blog dot lichaam doen.
Dus het is een soort van een lange lange naam hier maar te vragen lichaam omhoog blog temp lichaam.
En we gaan om het te veranderen, zodat het gelijk is aan dat verzoek ontsmetten en we gaan dit hele ding te ontsmetten.
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.
Dus laat me dat duidelijk te maken voor u laten we een agent blog.
Verzoek om het lichaam voor en na.
Gewoon zo.
En laat me toe te voegen in iets om het een beetje makkelijker om te zien maken.
Grote.
OK.
Dus laten we geven het een schot nu.
Start de server frisse de pagina.
We moeten een nieuw bericht te maken.
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.
Daar gaan we.
Dus als dit werkt moeten we zien dat voor zowel van deze en het na slechts heeft dit.
Laten we eens een kijkje nemen op wat er tot ongeveer is gekomen.
Perfect.
Je kunt zien dat de eerste keer dat lichaam is gelijk aan deze.
Of we hadden onze script tag daar de tweede keer.
Instantie alleen de H-1.
Dus dat is alles wat we moeten doen om iets te ontsmetten.
En als we nu weer hebben we naar onze nieuwe functie die zij geloven is dit een.
Hier nemen we een kijkje nemen.
We tonen van het probleem zelf, maar er is geen script-tag op alle.
Dus dat werkt geweldig.
Het laatste wat ze willen doen is dezelfde code uit te voeren, maar doe het in plaats van de update.
Wij zijn daar voordat we een update verzoek op de blog.
Wel deed hetzelfde.
Een kleine No.
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.
Wat we wel kunnen doen is schrijven een middleware die deze code voordat deze twee routes zal lopen maar we zullen dekken middleware.
Later in deze cursus aan het einde van EXPRESS Dus we laten het hoe het is voor nu.
En dat werkt prima.
Dat maakt het ontsmetten zowel tijd als je te werken om het even wie maakt volgende.
Laten we focussen op of index die E. J ..
Ja.
Dus het moet een beetje werk.
Het lijkt erop dat dit recht nu.
Laten we beginnen met een paar dingen te verwijderen.
En dat was een van de berichten die ik had gemaakt voordat we het ontsmettingsmiddel toegevoegd.
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.
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.
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.
En dan binnen zal onze div hebben.
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.
Dus class is gelijk aan je grote kop en dan gaan we gewoon een set van indexpagina.
Laten we gewoon rust voor een blog.
Gewoon zo.
En toen hebben we dat goed gedaan ik voegde een andere div.
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.
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.
Dus we gaan om deze code te kopiëren naar dit je zijn verdeeld items.
Wat we nodig hebben om een ​​aantal wijzigingen aan te brengen.
De eerste is gewoon in de schulden, maar we zijn niet gewoon om deze binnen te drukken.
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.
OK dus deed het beeld zet de afbeelding in dan moet een andere div class gelijk is aan de inhoud.
En dit is waar ik een paar dingen zal zetten.
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.
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.
Laten we ervoor zorgen dat we hebben een kleine syntax error.
We missen onze slotkoers hier voor Atra flops.
OK.
Atra is de show pagina en vervolgens in de beugels hebben we een blog titel.
Het is een beetje een puinhoop.
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.
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.
En dat is waar we deze inhoud zullen zetten.
De behuizing van de blog.
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.
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.
Dus we hoeven niet de klassiek tot meer header maar we willen in plaats daarvan is een grote knop.
Dus ik zweefde basic.
Kies uw kleur van do Violet weer.
En we kunnen dit doen een beetje.
Het is zeker veel om naar te kijken.
Dus laten we dit laten we dit op een klein beetje.
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.
OK marathon daar.
Veel dingen die we toegevoegd.
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.
Laten we eens kijken hoe het er naar jou geen syntax fouten.
Dat of we gaan net wat we zoeken.
Dus we afkappen de eerste 100 tekens in die of zoveel personages als er in dit bericht.
In dit geval zeer korte klik op lees meer de link werken neemt ons mee naar de show pagina.
We kunnen terugkijken bewerken gaan.
We hebben haar beelden hier.
Na het verdeelde lijnen die we hebben onze Hetter we hebben dit segment rond te gaan alles en we zijn vrij veel gedaan.
Dus nogmaals niet het gevoel dat we zeker niet het gevoel dat je moet al deze klassen kennen.
Ik heb soort gewoon.
Je weet dat gaf ze aan u voor.
Snelvuur stijl.
Omdat een punt is niet dat je je leert al deze.
Maar als je meer wilt weten en ga naar semantische dashi waarom dotcom.
Er is een groot aantal mooie tutorials en middelen.
Het is nog niet zo veel gebruikt als bootstrap, maar het is zeker groeit.
Ik heb veel van mijn studenten merkte zou het te vinden op hun eigen.
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.
De meeste studenten, maar helemaal aan jou.
Ik heb genoten van hen beiden en bootstrap is zeker meer populair voor nu.
OK dus het laatste wat ik noemde we doen is refactoren onze tafel slechts een heel klein beetje.
En alles wat ik wil doen is toe te voegen in een laatste kolom voor de mangoest methode die overeenkomt met elk van deze.
Dus vinden door id vinden door 80 een update vondst van id toe te voegen verwijderen en ga zo maar door.
Ik zal een snel overzicht van de manier waarop de tabellen werken.
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.
Daar is onze tafel of nieuwe Th.
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.
Daar ga je.
Next up hebben we nieuwe die eigenlijk geen monniken methode bij allen hebben.
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.
Vervolgens hebben we te maken en creëren gaat om een ​​hond dot maken te doen.
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.
Dus je hoeft niet eens om de openstelling van de inspecteur en gewoon live te zien.
En als ze dingen die ze te werken voor live en veranderen zonder op te slaan of vernieuw de pagina.
OK.
Dus dan hebben we een show die een hond die vinden door ID dan hebben we het doet.
Die doet ook een hond krijgt een boete opgelegd door ID.
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.
En hij is ook enigszins lange hond niet vinden door id en verwijder elke gaan.
Laten we kijken.
Hier is onze tafel.
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.
Okee.
Nu moeten we weer terug naar normaal.
Hier is onze tafel.
Dus de enige die geen mangoest methoden heeft op alle.
Het gaat nieuw te zijn omdat er is niets te vinden van de database is het niet om het even wat toe te voegen.
Het maakt ons alleen maar een vorm.
Grote.
Dus hopelijk is dit nuttig voor u in de toekomst kan verwijzen naar deze tabel.
Ik zal verwijzen naar het zeker bestrijkt heel wat belangrijke informatie die we gebruiken veel.
Okee.
Dus eindigen we dit nu krijgen we om verder te gaan om wat meer leuke dingen wat ingewikkelder apps.
Ik heb gemerkt dat er was een beetje van Amerika op bedekt veel.
Het is altijd een zware dobber om te maken.
Interessant omdat ze een hoop informatie.
Maar maar het is belangrijk om dat geloofwaardig te kunnen lezen-update te maken en een entiteit te verwijderen kost veel wraps.
Okee.
Ik zie je in het volgende jaar.