Welkom terug.
Dus nu gaan we op te pikken met de rest van onze rustgevende routes.
We deden index en we namen een pauze om toe te voegen in mantic je dat wil zeggen de kop- en voettekst Parshall's.
Nu gaan we nieuws te doen en te creëren, zodat tegen het einde van deze video wanneer ik op nieuwe post Ik zou een vorm te zien en dan kan ik naar die vorm vul het in en druk dan op te leggen.
Het zal me terug te nemen naar de indexpagina en ik zou een andere functie te zien.
Dus laten we beginnen.
Het eerste wat we moeten doen is het creëren van de nieuwe route die nieuwe shows als een vorm herinneren.
Het is een GET-verzoek slash honden of slash blogs slash nieuwe en het toont slechts een formulier.
Dus laten we daar beginnen.
We doen het na onze index en laten we toevoegen dat hier.
Index schreef.
Laten we nu doen de nieuwe route en ik voeg in creëren.
Dus voor onze nieuwe route en nadat ik slash blogs slash nieuwe en nieuw het is heel eenvoudig.
Het is de kortste men echt, want alles wat we moeten doen is te maken dezelfde vorm elke keer.
We hoeven niet om iets op te zoeken in de database.
Wij hebben alle gegevens op het formulier te sturen.
Alles wat we moeten doen is te maken nieuw.
En dan moeten we dat bestand natuurlijk te maken.
Dus raak uitzicht slash nieuwe Ejay Ja C-9 uitzicht slash nieuw.
OK en laten we beginnen simpel.
En ieder van ons hier gebruik een weinig semantische UI.
Dus we een div te doen en dit apparaat eenvoudig zijn heeft gewoon een klasse UI hoofdtekst container segment.
Dus er is een heleboel dingen daar.
Ik zal het breken in slechts een moment.
En dan in plaats van die laten we toe te voegen in een header te doen dat we een UI enorme kop kan doen en laten we gewoon noemen deze nieuwe log.
En als we dit zien weten we dat we geslaagd.
Zo start de app op.
Oh, en eigenlijk moeten we onze partials te omvatten.
Anders zien we een verschil, maar we zullen niet zullen we niet een van de semantische stijlen te zien.
Dus moeten we onze Ejay s zijn stippen slash Parshall's slash header dezelfde lijn aan slash de onderkant Parshall voor te redden.
Refresh deze pagina en ga naar blog slash nieuw.
En we hebben twee problemen.
De eerste is een tussenruimte kwestie.
We kunnen dat oplossen vrij gemakkelijk, maar we krijgen het juiste sjabloon.
Maar ik merkte iets een beetje raar dat dat onze icoon ging terug naar zijn kleine op de homepage.
Het is groot op deze pagina is het klein.
En ik heb een tijdje op zoek naar dit als een soort onkruid fout.
Ik heb het uitgezocht.
Het is echt een van die frustrerende degenen die die komen zo nu en dan waar het niet erg duidelijk op het eerste, maar ik zal u door het kort wat ik zag.
U kunt zien staat er in de console.
Zij heeft niet de stylesheet opt ​​out te laden C S S, maar het was op zoek naar het onder sashed blogs slash style sheets slash app die C S S en dat is niet waar het zou moeten kijken.
En dus ik keek naar de link die we zetten in de header-bestand en ik heb gemerkt dat ik vergat een klein ding een schuine streep.
Dus als je fris bent nu zul je zien dat het vindt.
En we niet een fout hier.
En als je keek in het tabblad bronnen kun je zien dat het er niet in de blogs die is wat het is want voor nu lijkt het buiten style sheets.
En nu komen we uit op dat grotere code pictogram in het niet.
Volgende laten we de kwestie van het nu overlappen de rest van onze content en de vaststelling dat is gelukkig zeer eenvoudig nu hebben we dat style sheet opgezet aan te pakken.
Alles wat we moeten doen is het toevoegen van enige marge aan de bovenkant van dit element dat de container element.
Alles wat we doen zal de binnenkant van die container.
Dus we in onze style sheet selecteren dat na het beoordelen en we zullen gewoon container doen en dan alles wat we willen doen is margin top in plaats van zitten in het aantal pixels.
Ik ga naar E-M te gebruiken als ook gewoon zo dat je het vaker zien.
We hebben nog niet echt gezien veel en gewoon te zien hebben we een ander probleem en dat is dat de container inspecteren we ook in de navigatiebalk.
Onthoud, wij hebben een container daar.
Dus we willen alleen dingen die containers die ook hoofd-of containers die ook gericht zijn segment of iets anders dan alleen maar algemene containers.
Dus dat is een ander eenvoudig vast te stellen.
We zullen teruggaan en gewoon me te doen.
Dus dat betekent iets.
Ik had beide klassen nu we vernieuwen en het ziet er veel beter.
Dus hebben we niet knoeien met het.
De marges van deze container hier in de Nav. het menu we alleen met deze voor de styling speelde hier en nu.
Nu laten we het formulier om mee te werken.
Dus in plaats van onze nieuwe papa ja we willen vormen en onze vorm is een soort van als deze waar het gaat om logs die als je vergeten we kijken naar onze rustige routes en u kunt zien creëren is flash slash honden hetzelfde als de index als een post.
Dus dit formulier moet naar logs slash waar de methode is post en vervolgens binnenkant van een formulier dat u wilt een aantal ingangen van de eerste zal gewoon type zijn gelijk aan de tekst, net als dat en het typen close text en zal het een naam die gelijk is aan de titel blog te geven en vervolgens een tijdelijke aanduiding die gelijk is aan de titel.
En dan zullen we dat eerder uitzondering dan de titel is voor het doen dupliceren.
En dit moet worden bezien van het zitten op de post verzoeken van een paar video's om te gaan en dan zullen we hetzelfde doen voor inhoud die we geroepen lichaam en zet ze gewoon inloggen paal gaat hier als een placeholder.
Oké dus we hebben dat gedaan en dan moeten we een manier om het in te dienen, zodat het input type zal doen gelijken indienen, net als dat en vervolgens opslaan en zien wat we krijgen.
Hier is onze formulier niet echt vormgegeven.
We zullen binnenkort dat.
Maar het zou moeten werken prima als we leggen we een fout die niet kan zegt posten op blogs slash moeten krijgen.
Dat komt omdat onze creëren route bestaat niet.
Dus laten we dat nu doen slash honden als een post.
Dus in plaats van daadwerkelijk ja onder Maak een route reactie zullen we een app bericht slash blogs of Colback doen.
Perfect en hier moeten we eigenlijk naar die nieuwe blog te maken.
Dus hebben we twee stappen creëren blog voer vervolgens een omleiding en we zullen doorverwijzen naar de index voor nu.
Dus om de blog hebben we een blog creëren en het eerste wat is de data.
Dus dat zal nog gewoon niet.
En de tweede is de callback.
Dus onze callback we kunnen beginnen hebben we een fout.
En dan, als het werkt zullen we een nieuwe blog en de gegevens die we passeren herinneren van de video op de post verzoeken het is allemaal binnenkant van het verzoek dot dot lichaam en wat we in ons formulier in ons formulier naam te hebben.
Alles is in een blog en een groep en samen.
Dus als we gewoon vragen up lichaam dump blog heeft het beeld automatisch een titel en lichaam.
Wij geven het een zware slag augustus eerste argument duurt die gegevens ontstaat er een nieuwe blog wanneer het klaar is vragen.
Want dit callback.
En we doen ons standaard als fout.
Laten we een let's in plaats van graaf over houtkap laten maken van de nieuwe vorm weer anders zullen we een rez redirect doen om logs slash en we moeten zien de nieuwe blog verschijnen daar.
Als het werkte gaan we door deze reactie en laten we zien wat er gebeurt als we geven het een schot.
Dus we zullen redden.
We moeten de server opnieuw en ga helemaal terug naar de root maak een kopie van dit beeld URL gewoon zo hebben we een afbeelding of de titel van de blog post.
Hier is ons imago in onze blog post.
Indienen en het werkt perfect.
En je kunt zien hebben we een titel een beeld een zeer korte blog plaatsen van het lichaam in onze geschapen datum wordt ook weergegeven.
Geweldig.
Dus dat allemaal samen te vatten tot nieuwe routes en nieuwe slash is wat de naam van het model is.
Honden in ons geval zijn eigenlijk blogs slash en je krijgt verzoeken.
Het toont de vorm te creëren is flash honden net als de index was behalve dat het een post aanvraag.
En dat is waar de nieuwe vorm stuurt gegevens naar.
Om toe te voegen aan de database te creëren nieuwe hond dan leidt het automatisch terug.
Het hoeft niet om de index het grootste deel van de tijd is het eigenlijk om pagina waar je zien in de volgende video laten zien.
Laten we snel stijl van onze applicatie.
Laten we het formulier.
Dus om semantische eerste wat we doen gebruiken is te geven van onze vorm van een klasse die gelijk is aan UI vorm en dan de binnenkant van die vorm elk van deze ingangen zal worden in een div en dat div class zal gelijk zijn aan velden.
En kijk dan naar hoe om te labelen waarin we nog geen account hebt.
En de eerste label titel en dan zullen we onze titel te nemen en zet het daar.
Perfect.
En dan zullen we dit nog een paar keer te doen.
We moeten een van deze voor het beeld veranderen het etiket zeggen afbeelding en vervolgens een verandering die ik wil maken is dat in plaats van het hebben van onze blog vormen de input als deze wil ik het maken van een tekst gebied waar een gebruiker wat meer tekst kunt typen als een echte blog post.
En dat op te lossen in plaats van het maken van deze een input gaan we een div Chrisfield nog in de label en we noemen het blog inhoud, maar in plaats van deze input gaan we een tekst gebied tag toe te voegen die we zagen vroeg op, maar we hebben niet echt veel gebruikt.
En het is een beetje anders dan inputs we nog steeds geef het een naam.
Dus nog steeds blog lichaam en dan besparen we maar we weten niet geef het een vorm van tekst, want het is niet een input is het haar eigen aangewezen tag die een begin- en tag heeft en het gedraagt ​​zich een beetje anders ook.
Als we toe te voegen.
Dus we zullen zien dat in slechts een moment om zich te ontdoen van die te krijgen en dan zullen we onze knopstijl.
We nemen een kijkje op wat we nu hebben.
Het ziet er goed uit, behalve de knop kan gestyled worden een beetje mooier.
En als ik trek semantische UI en ga naar de knop zijn er veel meer knoppen in semantische dan in Bootstrap.
Dus verschillende types, maar ook tal van kleuren elementaire knoppen en vervolgens omgekeerd knoppen ook.
Dus kies een van deze die je leuk vindt en als je met de favoriet laten we violet paars en als je een kijkje nemen op de broncode te nemen alles wat je nodig hebt is de klasse gelijk is aan jou.
De kleur basic knop.
En terwijl ik dit doe ik zal uitleggen waarom het semantische UI heet.
En de belangrijkste reden is dat in tegenstelling tot bootstrap waar we dit soort bizarre jargon ETN ETN dash LGBT en dash standaard bijvoorbeeld die ik afkerig bootstrappen niet echt kloppen, maar de reden dat semantische werd gemaakt was een reactie op dit soort markup waar in plaats we kunnen hebben UI schenden basic button of ik kan UI Violet doen omgekeerde knop.
Zo fundamenteel voor nu is prima.
En dat is alles wat er nodig is.
Erg makkelijk.
Het is niet dat het minder karakters.
Het gaat niet over het feit dat korter.
Het gaat over een zinvolle waar u gemakkelijk kunt kijken en begrijpen wat het betekent.
Dus als we nu terug te gaan en te vernieuwen.
Ik heb die knop en als ik wil om het te groot te maken het is echt gemakkelijk.
Alles wat ik moet doen is het type groot.
Dus ik hoef niet te doen BT en dash Elgie net groot refresh en we krijgen een grotere knop en dat is het.
Dus laten we test het weer uit.
Ik bedoel, ik gebruik maken van dezelfde gedurfde debatteer goed laten we dit gewoon bellen mijn nieuwe hond.
Meer blog Contac leggen en het werkt prima.
Grote.
Oké, dus we hebben behandeld index we hebben behandeld Nieuw en maak en ik liet je een klein beetje van semantische Je zou de vormen en de knoppen in de volgende video te krijgen.