1
00:00:00,200 --> 00:00:01,200
Welkom terug.

2
00:00:01,200 --> 00:00:04,380
Dus nu gaan we op te pikken met de rest van onze rustgevende routes.

3
00:00:04,470 --> 00:00:09,360
We deden index en we namen een pauze om toe te voegen in mantic je dat wil zeggen de kop- en voettekst Parshall's.

4
00:00:09,360 --> 00:00:19,990
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.

5
00:00:20,010 --> 00:00:23,970
Het zal me terug te nemen naar de indexpagina en ik zou een andere functie te zien.

6
00:00:24,000 --> 00:00:25,210
Dus laten we beginnen.

7
00:00:25,530 --> 00:00:30,710
Het eerste wat we moeten doen is het creëren van de nieuwe route die nieuwe shows als een vorm herinneren.

8
00:00:30,770 --> 00:00:37,110
Het is een GET-verzoek slash honden of slash blogs slash nieuwe en het toont slechts een formulier.

9
00:00:37,380 --> 00:00:39,440
Dus laten we daar beginnen.

10
00:00:40,590 --> 00:00:43,620
We doen het na onze index en laten we toevoegen dat hier.

11
00:00:43,650 --> 00:00:45,670
Index schreef.

12
00:00:45,960 --> 00:00:51,980
Laten we nu doen de nieuwe route en ik voeg in creëren.

13
00:00:52,050 --> 00:01:00,730
Dus voor onze nieuwe route en nadat ik slash blogs slash nieuwe en nieuw het is heel eenvoudig.

14
00:01:00,760 --> 00:01:06,790
Het is de kortste men echt, want alles wat we moeten doen is te maken dezelfde vorm elke keer.

15
00:01:06,930 --> 00:01:09,280
We hoeven niet om iets op te zoeken in de database.

16
00:01:09,450 --> 00:01:11,730
Wij hebben alle gegevens op het formulier te sturen.

17
00:01:11,730 --> 00:01:16,490
Alles wat we moeten doen is te maken nieuw.

18
00:01:17,190 --> 00:01:19,110
En dan moeten we dat bestand natuurlijk te maken.

19
00:01:19,110 --> 00:01:28,340
Dus raak uitzicht slash nieuwe Ejay Ja C-9 uitzicht slash nieuw.

20
00:01:29,100 --> 00:01:30,970
OK en laten we beginnen simpel.

21
00:01:31,380 --> 00:01:34,150
En ieder van ons hier gebruik een weinig semantische UI.

22
00:01:34,200 --> 00:01:43,400
Dus we een div te doen en dit apparaat eenvoudig zijn heeft gewoon een klasse UI hoofdtekst container segment.

23
00:01:43,400 --> 00:01:44,720
Dus er is een heleboel dingen daar.

24
00:01:44,760 --> 00:01:46,270
Ik zal het breken in slechts een moment.

25
00:01:46,530 --> 00:01:58,520
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.

26
00:01:59,300 --> 00:02:02,310
En als we dit zien weten we dat we geslaagd.

27
00:02:03,030 --> 00:02:04,180
Zo start de app op.

28
00:02:04,300 --> 00:02:07,760
Oh, en eigenlijk moeten we onze partials te omvatten.

29
00:02:07,770 --> 00:02:11,980
Anders zien we een verschil, maar we zullen niet zullen we niet een van de semantische stijlen te zien.

30
00:02:12,150 --> 00:02:25,410
Dus moeten we onze Ejay s zijn stippen slash Parshall's slash header dezelfde lijn aan slash de onderkant Parshall voor te redden.

31
00:02:25,950 --> 00:02:29,830
Refresh deze pagina en ga naar blog slash nieuw.

32
00:02:30,840 --> 00:02:32,070
En we hebben twee problemen.

33
00:02:32,070 --> 00:02:34,550
De eerste is een tussenruimte kwestie.

34
00:02:34,650 --> 00:02:37,540
We kunnen dat oplossen vrij gemakkelijk, maar we krijgen het juiste sjabloon.

35
00:02:37,800 --> 00:02:44,000
Maar ik merkte iets een beetje raar dat dat onze icoon ging terug naar zijn kleine op de homepage.

36
00:02:44,010 --> 00:02:47,170
Het is groot op deze pagina is het klein.

37
00:02:47,370 --> 00:02:51,760
En ik heb een tijdje op zoek naar dit als een soort onkruid fout.

38
00:02:51,840 --> 00:02:52,490
Ik heb het uitgezocht.

39
00:02:52,500 --> 00:03:01,990
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.

40
00:03:02,160 --> 00:03:04,320
U kunt zien staat er in de console.

41
00:03:04,320 --> 00:03:16,250
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.

42
00:03:16,290 --> 00:03:25,030
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.

43
00:03:25,080 --> 00:03:29,080
Dus als je fris bent nu zul je zien dat het vindt.

44
00:03:29,310 --> 00:03:31,680
En we niet een fout hier.

45
00:03:31,680 --> 00:03:41,820
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.

46
00:03:41,850 --> 00:03:44,990
En nu komen we uit op dat grotere code pictogram in het niet.

47
00:03:45,390 --> 00:03:54,690
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.

48
00:03:54,900 --> 00:04:01,590
Alles wat we moeten doen is het toevoegen van enige marge aan de bovenkant van dit element dat de container element.

49
00:04:02,250 --> 00:04:04,520
Alles wat we doen zal de binnenkant van die container.

50
00:04:04,710 --> 00:04:18,440
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.

51
00:04:18,450 --> 00:04:23,280
Ik ga naar E-M te gebruiken als ook gewoon zo dat je het vaker zien.

52
00:04:23,280 --> 00:04:32,640
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.

53
00:04:32,640 --> 00:04:34,640
Onthoud, wij hebben een container daar.

54
00:04:34,830 --> 00:04:43,800
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.

55
00:04:44,040 --> 00:04:46,060
Dus dat is een ander eenvoudig vast te stellen.

56
00:04:46,170 --> 00:04:48,370
We zullen teruggaan en gewoon me te doen.

57
00:04:48,390 --> 00:04:49,520
Dus dat betekent iets.

58
00:04:49,520 --> 00:04:55,070
Ik had beide klassen nu we vernieuwen en het ziet er veel beter.

59
00:04:55,100 --> 00:04:56,170
Dus hebben we niet knoeien met het.

60
00:04:56,210 --> 00:05:02,930
De marges van deze container hier in de Nav. het menu we alleen met deze voor de styling speelde hier en nu.

61
00:05:02,930 --> 00:05:05,050
Nu laten we het formulier om mee te werken.

62
00:05:05,150 --> 00:05:28,460
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.

63
00:05:29,120 --> 00:05:52,090
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.

64
00:05:52,850 --> 00:06:00,550
En dan zullen we dat eerder uitzondering dan de titel is voor het doen dupliceren.

65
00:06:01,350 --> 00:06:19,940
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.

66
00:06:19,940 --> 00:06:35,680
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.

67
00:06:35,770 --> 00:06:38,230
Hier is onze formulier niet echt vormgegeven.

68
00:06:38,300 --> 00:06:39,600
We zullen binnenkort dat.

69
00:06:39,740 --> 00:06:46,820
Maar het zou moeten werken prima als we leggen we een fout die niet kan zegt posten op blogs slash moeten krijgen.

70
00:06:47,060 --> 00:06:49,660
Dat komt omdat onze creëren route bestaat niet.

71
00:06:50,150 --> 00:06:53,960
Dus laten we dat nu doen slash honden als een post.

72
00:06:54,110 --> 00:07:07,260
Dus in plaats van daadwerkelijk ja onder Maak een route reactie zullen we een app bericht slash blogs of Colback doen.

73
00:07:07,700 --> 00:07:13,160
Perfect en hier moeten we eigenlijk naar die nieuwe blog te maken.

74
00:07:13,160 --> 00:07:22,710
Dus hebben we twee stappen creëren blog voer vervolgens een omleiding en we zullen doorverwijzen naar de index voor nu.

75
00:07:23,780 --> 00:07:30,220
Dus om de blog hebben we een blog creëren en het eerste wat is de data.

76
00:07:30,230 --> 00:07:31,990
Dus dat zal nog gewoon niet.

77
00:07:32,060 --> 00:07:34,140
En de tweede is de callback.

78
00:07:34,580 --> 00:07:38,450
Dus onze callback we kunnen beginnen hebben we een fout.

79
00:07:38,510 --> 00:07:55,600
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.

80
00:07:55,610 --> 00:07:58,890
Alles is in een blog en een groep en samen.

81
00:07:58,940 --> 00:08:05,120
Dus als we gewoon vragen up lichaam dump blog heeft het beeld automatisch een titel en lichaam.

82
00:08:05,120 --> 00:08:10,530
Wij geven het een zware slag augustus eerste argument duurt die gegevens ontstaat er een nieuwe blog wanneer het klaar is vragen.

83
00:08:10,530 --> 00:08:11,950
Want dit callback.

84
00:08:12,140 --> 00:08:14,760
En we doen ons standaard als fout.

85
00:08:15,030 --> 00:08:35,870
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.

86
00:08:36,020 --> 00:08:43,410
Als het werkte gaan we door deze reactie en laten we zien wat er gebeurt als we geven het een schot.

87
00:08:43,520 --> 00:08:44,660
Dus we zullen redden.

88
00:08:44,870 --> 00:08:57,460
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.

89
00:08:57,620 --> 00:09:00,230
Hier is ons imago in onze blog post.

90
00:09:00,350 --> 00:09:03,740
Indienen en het werkt perfect.

91
00:09:03,800 --> 00:09:12,020
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.

92
00:09:12,170 --> 00:09:12,860
Geweldig.

93
00:09:13,010 --> 00:09:19,790
Dus dat allemaal samen te vatten tot nieuwe routes en nieuwe slash is wat de naam van het model is.

94
00:09:19,790 --> 00:09:24,910
Honden in ons geval zijn eigenlijk blogs slash en je krijgt verzoeken.

95
00:09:24,920 --> 00:09:32,580
Het toont de vorm te creëren is flash honden net als de index was behalve dat het een post aanvraag.

96
00:09:32,600 --> 00:09:35,350
En dat is waar de nieuwe vorm stuurt gegevens naar.

97
00:09:35,430 --> 00:09:39,080
Om toe te voegen aan de database te creëren nieuwe hond dan leidt het automatisch terug.

98
00:09:39,080 --> 00:09:44,660
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.

99
00:09:45,140 --> 00:09:47,550
Laten we snel stijl van onze applicatie.

100
00:09:47,580 --> 00:09:49,820
Laten we het formulier.

101
00:09:50,570 --> 00:10:10,070
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.

102
00:10:10,550 --> 00:10:13,330
En kijk dan naar hoe om te labelen waarin we nog geen account hebt.

103
00:10:13,730 --> 00:10:19,860
En de eerste label titel en dan zullen we onze titel te nemen en zet het daar.

104
00:10:20,390 --> 00:10:21,450
Perfect.

105
00:10:21,470 --> 00:10:24,630
En dan zullen we dit nog een paar keer te doen.

106
00:10:24,770 --> 00:10:47,470
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.

107
00:10:48,050 --> 00:11:06,560
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.

108
00:11:06,830 --> 00:11:10,280
En het is een beetje anders dan inputs we nog steeds geef het een naam.

109
00:11:10,400 --> 00:11:24,830
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.

110
00:11:24,830 --> 00:11:26,130
Als we toe te voegen.

111
00:11:26,270 --> 00:11:30,650
Dus we zullen zien dat in slechts een moment om zich te ontdoen van die te krijgen en dan zullen we onze knopstijl.

112
00:11:30,650 --> 00:11:32,540
We nemen een kijkje op wat we nu hebben.

113
00:11:32,740 --> 00:11:36,610
Het ziet er goed uit, behalve de knop kan gestyled worden een beetje mooier.

114
00:11:36,790 --> 00:11:43,800
En als ik trek semantische UI en ga naar de knop zijn er veel meer knoppen in semantische dan in Bootstrap.

115
00:11:43,910 --> 00:11:51,780
Dus verschillende types, maar ook tal van kleuren elementaire knoppen en vervolgens omgekeerd knoppen ook.

116
00:11:52,310 --> 00:12:04,890
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.

117
00:12:05,250 --> 00:12:07,950
De kleur basic knop.

118
00:12:08,480 --> 00:12:12,780
En terwijl ik dit doe ik zal uitleggen waarom het semantische UI heet.

119
00:12:12,920 --> 00:12:44,590
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.

120
00:12:45,050 --> 00:12:46,820
Zo fundamenteel voor nu is prima.

121
00:12:47,060 --> 00:12:48,050
En dat is alles wat er nodig is.

122
00:12:48,050 --> 00:12:49,630
Erg makkelijk.

123
00:12:49,760 --> 00:12:51,530
Het is niet dat het minder karakters.

124
00:12:51,560 --> 00:12:52,840
Het gaat niet over het feit dat korter.

125
00:12:53,030 --> 00:12:58,340
Het gaat over een zinvolle waar u gemakkelijk kunt kijken en begrijpen wat het betekent.

126
00:12:58,340 --> 00:13:01,420
Dus als we nu terug te gaan en te vernieuwen.

127
00:13:01,690 --> 00:13:06,900
Ik heb die knop en als ik wil om het te groot te maken het is echt gemakkelijk.

128
00:13:06,930 --> 00:13:09,050
Alles wat ik moet doen is het type groot.

129
00:13:09,050 --> 00:13:16,910
Dus ik hoef niet te doen BT en dash Elgie net groot refresh en we krijgen een grotere knop en dat is het.

130
00:13:16,910 --> 00:13:18,740
Dus laten we test het weer uit.

131
00:13:18,740 --> 00:13:26,770
Ik bedoel, ik gebruik maken van dezelfde gedurfde debatteer goed laten we dit gewoon bellen mijn nieuwe hond.

132
00:13:27,980 --> 00:13:32,350
Meer blog Contac leggen en het werkt prima.

133
00:13:32,420 --> 00:13:33,110
Grote.

134
00:13:33,110 --> 00:13:41,480
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.