1
00:00:00,200 --> 00:00:01,200
Torneremo.

2
00:00:01,200 --> 00:00:04,380
Quindi ora stiamo andando a riprendere con il resto dei nostri percorsi riposanti.

3
00:00:04,470 --> 00:00:09,360
Abbiamo fatto un indice e abbiamo preso una pausa per aggiungere al mantic tu. e. l'intestazione e il piè di pagina di Parshall.

4
00:00:09,360 --> 00:00:15,330
Ora faremo di nuovo e creeremo in modo che alla fine di questo video quando clicco su un nuovo post

5
00:00:15,330 --> 00:00:19,990
dovrei vedere un modulo e poi posso andare a quel modulo compilarlo e poi premere invio.

6
00:00:20,010 --> 00:00:23,970
Mi riporterà alla pagina indice e dovrei vedere un altro post.

7
00:00:24,000 --> 00:00:25,210
Quindi iniziamo.

8
00:00:25,530 --> 00:00:30,710
La prima cosa che dobbiamo fare è creare la nuova rotta che ricordi i nuovi spettacoli come una forma.

9
00:00:30,770 --> 00:00:37,110
È una richiesta di GET cani da slitta o blog slash tagliati nuovi e mostra solo un modulo.

10
00:00:37,380 --> 00:00:39,440
Quindi iniziamo da lì.

11
00:00:40,590 --> 00:00:43,620
Lo faremo dopo il nostro indice e aggiungiamolo qui.

12
00:00:43,650 --> 00:00:45,670
Indice ha scritto.

13
00:00:45,960 --> 00:00:51,980
Ora facciamo il nuovo percorso e aggiungerò anche a creare.

14
00:00:52,050 --> 00:01:00,730
Quindi, per il nostro nuovo percorso e dopo aver ricevuto nuovi blog slash nuovi e nuovi, è davvero semplice.

15
00:01:00,760 --> 00:01:06,790
È la più corta in realtà perché tutto ciò che dobbiamo fare è rendere sempre la stessa forma.

16
00:01:06,930 --> 00:01:09,280
Non dobbiamo cercare nulla nel database.

17
00:01:09,450 --> 00:01:11,730
Non è necessario inviare alcun dato al modulo.

18
00:01:11,730 --> 00:01:16,490
Tutto ciò che dobbiamo fare è rendere nuovo.

19
00:01:17,190 --> 00:01:19,110
E poi abbiamo bisogno di fare quel file, naturalmente.

20
00:01:19,110 --> 00:01:28,340
Quindi, le visualizzazioni touch toccano nuove viste Ejay Yes C-9 nuove.

21
00:01:29,100 --> 00:01:30,970
OK e iniziamo semplice.

22
00:01:31,380 --> 00:01:34,150
E tutti noi usiamo una piccola interfaccia semantica qui.

23
00:01:34,200 --> 00:01:43,400
Quindi faremo un div e questo dispositivo sarà semplice, ha solo un segmento del contenitore di testo principale di classe UI.

24
00:01:43,400 --> 00:01:44,720
Quindi c'è un sacco di cose lì.

25
00:01:44,760 --> 00:01:46,270
Lo romperò in un attimo.

26
00:01:46,530 --> 00:01:54,930
E poi invece di aggiungere un'intestazione per farlo, possiamo fare un'intestazione enorme e

27
00:01:54,930 --> 00:01:58,520
chiamiamo solo questo nuovo log.

28
00:01:59,300 --> 00:02:02,310
E se lo vediamo, sapremo che ci siamo riusciti.

29
00:02:03,030 --> 00:02:04,180
Quindi avvia l'app.

30
00:02:04,300 --> 00:02:07,760
Oh e in realtà abbiamo bisogno di includere anche i nostri partial.

31
00:02:07,770 --> 00:02:11,980
Altrimenti vedremo un diff, ma non vedremo nessuno degli stili semantici.

32
00:02:12,150 --> 00:02:22,470
Ejay includano la barra dei punti della barra di Parshall stessa riga nella parte inferiore della barra di Parshall per il salvataggio.

33
00:02:22,600 --> 00:02:25,410
Quindi abbiamo bisogno che i nostri

34
00:02:25,950 --> 00:02:29,830
Aggiorna questa pagina e vai al blog nuovo.

35
00:02:30,840 --> 00:02:32,070
E abbiamo due problemi.

36
00:02:32,070 --> 00:02:34,550
Il primo è un problema di spaziatura.

37
00:02:34,650 --> 00:02:37,540
Possiamo sistemarlo abbastanza facilmente, ma stiamo ottenendo il modello giusto.

38
00:02:37,800 --> 00:02:43,980
Ma ho notato una cosa un po 'strana che è che la nostra icona è tornata ad essere piccola nella home page.

39
00:02:44,010 --> 00:02:47,170
È grande su questa pagina è piccolo.

40
00:02:47,370 --> 00:02:51,760
E ho passato un po 'di tempo a guardarlo come una specie di errore di erba.

41
00:02:51,840 --> 00:02:52,490
L'avevo capito.

42
00:02:52,500 --> 00:02:57,540
E 'davvero una di quelle frustranti che emergono ogni tanto, dove all'inizio non

43
00:02:57,540 --> 00:03:01,990
è così ovvio, ma ti descriverò brevemente quello che ho notato.

44
00:03:02,160 --> 00:03:04,320
Puoi vederlo nella console.

45
00:03:04,320 --> 00:03:11,740
Non è riuscito a caricare il foglio di stile disattivare C S S, ma lo cercava sotto i blog infetti barra di

46
00:03:11,740 --> 00:03:16,250
stile slash app che C S S e che non è dove dovrebbe apparire.

47
00:03:16,290 --> 00:03:23,130
E così ho guardato il link che abbiamo impostato nel file di intestazione e ho notato che ho dimenticato una piccola cosa

48
00:03:24,020 --> 00:03:25,030
come una barra.

49
00:03:25,080 --> 00:03:29,080
Quindi se sei fresco ora vedrai che lo trova.

50
00:03:29,310 --> 00:03:31,680
E non otteniamo un errore qui.

51
00:03:31,680 --> 00:03:38,640
E se hai guardato nella scheda delle fonti puoi vedere che non guarda all'interno dei blog, per quello che è

52
00:03:38,640 --> 00:03:41,820
per ora, al di fuori dei fogli di stile.

53
00:03:41,850 --> 00:03:44,990
E ora finiamo con l'icona del codice più grande nel no.

54
00:03:45,390 --> 00:03:51,900
Ora affrontiamo il problema, ora stiamo sovrapponendo il resto del nostro contenuto e risolvendolo è fortunatamente molto facile

55
00:03:51,990 --> 00:03:54,690
ora che abbiamo impostato il foglio di stile.

56
00:03:54,900 --> 00:04:01,590
Tutto ciò che dobbiamo fare è aggiungere un margine all'inizio di questo elemento che è l'elemento contenitore.

57
00:04:02,250 --> 00:04:04,520
Tutto ciò che facciamo sarà all'interno di quel contenitore.

58
00:04:04,710 --> 00:04:14,430
Quindi lo selezioneremo nel nostro foglio di stile dopo la valutazione e faremo semplicemente il contenitore e quindi tutto quello che vogliamo fare è margine

59
00:04:14,430 --> 00:04:18,440
in alto invece di stare seduti in numero di pixel.

60
00:04:18,450 --> 00:04:23,280
Userò anche E-M solo per vederlo più spesso.

61
00:04:23,280 --> 00:04:29,700
Non l'abbiamo visto molto e vediamo che abbiamo un altro problema: il container che ispezioniamo

62
00:04:29,910 --> 00:04:32,640
si trova anche nella barra di navigazione.

63
00:04:32,640 --> 00:04:34,640
Ricorda che abbiamo un container lì.

64
00:04:34,830 --> 00:04:40,440
anche contenitori principali o contenitori che sono anche segmenti o qualcosa di diverso dai contenitori generali.

65
00:04:40,440 --> 00:04:43,800
Quindi vogliamo solo prendere come target le cose che sono

66
00:04:44,040 --> 00:04:46,060
Quindi questa è un'altra facile soluzione.

67
00:04:46,170 --> 00:04:48,370
Torneremo e mi faremo.

68
00:04:48,390 --> 00:04:49,520
Quindi questo significa qualcosa.

69
00:04:49,520 --> 00:04:55,070
Ho avuto entrambe le lezioni ora che ci aggiorniamo e sembra molto meglio.

70
00:04:55,100 --> 00:04:56,170
Quindi non ci siamo sbagliati.

71
00:04:56,210 --> 00:05:02,250
I margini di questo contenitore qui all'interno della Nav. il menu abbiamo appena giocato con questo qui e ora per

72
00:05:02,270 --> 00:05:02,930
lo styling.

73
00:05:02,930 --> 00:05:05,050
Ora facciamo in modo che il modulo funzioni.

74
00:05:05,150 --> 00:05:16,700
Quindi, invece del nostro nuovo papà, sì, vogliamo formarci e la nostra forma è un po 'come questa dove va a tagliare i tronchi

75
00:05:18,020 --> 00:05:25,940
che se hai dimenticato guardiamo i nostri percorsi riposati e puoi vedere creare cani in flash

76
00:05:25,940 --> 00:05:28,460
come l'indice di un inviare.

77
00:05:29,120 --> 00:05:37,760
Quindi questo modulo deve andare a slash logs dove il metodo è post e quindi all'interno di un form vuoi

78
00:05:37,760 --> 00:05:45,170
alcuni input il primo sarà semplicemente type uguale a text proprio così e digitando close text e

79
00:05:45,170 --> 00:05:52,090
gli darà un nome uguale al titolo del blog e poi un segnaposto uguale al titolo.

80
00:05:52,850 --> 00:06:00,550
E poi duplicheremo quell'eccezione piuttosto che il titolo lo farà per l'immagine.

81
00:06:01,350 --> 00:06:07,430
E questo dovrebbe essere una recensione da seduti alle richieste di post di alcuni

82
00:06:07,430 --> 00:06:10,750
video e poi faremo la stessa cosa per

83
00:06:13,340 --> 00:06:19,940
i contenuti che abbiamo chiamato body e semplicemente mettiamolo nel post di log qui come segnaposto.

84
00:06:19,940 --> 00:06:27,050
Va bene così abbiamo fatto e quindi abbiamo bisogno di un modo per inviarlo in modo che faccia il

85
00:06:29,480 --> 00:06:35,680
tipo di input equivale a presentare proprio così e quindi salvare e vedere ciò che otteniamo.

86
00:06:35,770 --> 00:06:38,230
Ecco la nostra forma non proprio in stile.

87
00:06:38,300 --> 00:06:39,600
Ci arriveremo presto.

88
00:06:39,740 --> 00:06:46,550
Ma dovrebbe funzionare bene se inviamo che dovremmo ricevere un errore che dice che non è possibile pubblicare messaggi su barre.

89
00:06:47,060 --> 00:06:49,660
Questo perché il nostro percorso di creazione non esiste.

90
00:06:50,150 --> 00:06:53,960
Quindi facciamolo ora tagliando i cani come un post.

91
00:06:54,110 --> 00:07:05,870
Quindi, invece di sì, sotto il commento Crea rotta, faremo un blog di post slash o Colback.

92
00:07:07,700 --> 00:07:13,160
Perfetto e qui abbiamo davvero bisogno di creare quel nuovo blog.

93
00:07:13,160 --> 00:07:22,710
Quindi abbiamo due passaggi per creare un blog, quindi eseguire un reindirizzamento e per il momento eseguiremo il reindirizzamento all'indice.

94
00:07:23,780 --> 00:07:30,220
Quindi per creare il blog abbiamo bisogno di creare un blog e la prima cosa sono i dati.

95
00:07:30,230 --> 00:07:31,990
Quindi non funzionerà ancora.

96
00:07:32,060 --> 00:07:34,140
E la seconda cosa è la richiamata.

97
00:07:34,580 --> 00:07:38,450
Quindi, con la nostra richiamata, possiamo iniziare con un errore.

98
00:07:38,510 --> 00:07:47,360
E se funziona, avremo un nuovo blog e i dati che stiamo passando ricorderanno dal video sul post che è

99
00:07:47,360 --> 00:07:54,200
tutto all'interno del punto dot dot body e qualsiasi cosa abbiamo chiamato nel nostro modulo nel

100
00:07:54,740 --> 00:07:55,600
nostro modulo.

101
00:07:55,610 --> 00:07:58,890
Tutto è all'interno di un blog e un gruppo e insieme.

102
00:07:58,940 --> 00:08:05,120
Quindi, se chiediamo semplicemente al blog di scarico del corpo, esso ha automaticamente un'immagine e un corpo del titolo.

103
00:08:05,120 --> 00:08:10,160
Diamo a questa richiesta un colpo di corpo. Prima discussione di agosto prende i dati che crea un nuovo blog quando

104
00:08:10,160 --> 00:08:10,530
è fatto.

105
00:08:10,530 --> 00:08:11,950
Causa questa richiamata.

106
00:08:12,140 --> 00:08:14,760
E facciamo il nostro standard in caso di errore.

107
00:08:15,030 --> 00:08:26,510
Facciamo una let invece di contare sulla registrazione, rendiamo di nuovo il nuovo modulo, faremo un reind reindirizzamento per

108
00:08:26,840 --> 00:08:27,620
tagliare

109
00:08:30,110 --> 00:08:35,870
i registri e dovremmo vedere il nuovo blog apparire lassù.

110
00:08:36,020 --> 00:08:43,410
Se ha funzionato, spostiamo questo commento e vediamo cosa succede se gli diamo un colpo.

111
00:08:43,520 --> 00:08:44,660
Quindi salveremo.

112
00:08:44,870 --> 00:08:52,540
copia di questo URL immagine solo per avere un'immagine o un titolo del post del blog.

113
00:08:52,540 --> 00:08:57,460
Dobbiamo riavviare il server e tornare alla radice per fare una

114
00:08:57,620 --> 00:09:00,230
Ecco la nostra immagine nel nostro post sul blog.

115
00:09:00,350 --> 00:09:03,740
Invia e funziona perfettamente.

116
00:09:03,800 --> 00:09:11,330
E puoi vedere che abbiamo un titolo, un'immagine che mostra anche un post sul blog molto breve nella nostra data

117
00:09:11,330 --> 00:09:12,020
di creazione.

118
00:09:12,170 --> 00:09:12,860
Meraviglioso.

119
00:09:13,010 --> 00:09:19,790
Quindi, per ricapitolare tutto ciò su rotte nuove e nuove è possibile tagliare qualunque sia il nome del modello.

120
00:09:19,790 --> 00:09:24,910
I cani nel nostro caso sono in realtà dei blog e tu ricevi richieste.

121
00:09:24,920 --> 00:09:32,580
Mostra che la forma di creazione è cani in flash, proprio come l'indice, tranne che è una richiesta di posta.

122
00:09:32,600 --> 00:09:35,350
Ed è qui che il nuovo modulo invia i dati.

123
00:09:35,430 --> 00:09:39,080
Per aggiungere al database creare un nuovo cane, quindi reindirizza nuovamente.

124
00:09:39,080 --> 00:09:43,820
Non deve essere l'indice per la maggior parte del tempo in realtà per mostrare la pagina che vedrai

125
00:09:43,820 --> 00:09:44,660
nel prossimo video.

126
00:09:45,140 --> 00:09:47,550
Definiamo rapidamente la nostra applicazione.

127
00:09:47,580 --> 00:09:49,820
Facciamo il modulo.

128
00:09:50,570 --> 00:10:02,000
dell'interfaccia utente e quindi all'interno di quella forma ognuno di questi input sarà in un div e quel div avrà una classe uguale ai campi.

129
00:10:02,000 --> 00:10:10,070
Quindi, usare la prima cosa semantica che faremo è dare al nostro modulo una classe uguale alla forma

130
00:10:10,550 --> 00:10:13,330
E poi guarda come etichettare in cui non abbiamo ancora.

131
00:10:13,730 --> 00:10:19,860
E la prima etichetta sarà il titolo e poi prendiamo il nostro titolo e lo mettiamo lì.

132
00:10:20,390 --> 00:10:21,450
Perfezionare.

133
00:10:21,470 --> 00:10:24,630
E poi lo faremo ancora un paio di volte.

134
00:10:24,770 --> 00:10:32,120
Abbiamo bisogno di uno di questi per l'immagine cambiare l'etichetta dire immagine e quindi una modifica che voglio fare

135
00:10:34,840 --> 00:10:42,770
è che invece di avere il nostro blog da input come questo voglio renderlo un'area di testo dove un utente

136
00:10:42,770 --> 00:10:47,470
può digitare un po 'di testo come un vero post sul blog.

137
00:10:48,050 --> 00:10:54,920
E per aggiustare questo piuttosto che rendere questo un input, avremo un div Chrisfield ancora nell'etichetta

138
00:10:54,920 --> 00:11:03,140
e lo chiameremo solo contenuto del blog ma piuttosto che questo input aggiungeremo un tag dell'area di testo che

139
00:11:03,140 --> 00:11:06,560
abbiamo visto presto ma non abbiamo usato molto.

140
00:11:06,830 --> 00:11:10,280
Ed è un po 'diverso dagli input, gli diamo ancora un nome.

141
00:11:10,400 --> 00:11:19,280
Quindi continuiamo a scrivere sul corpo del blog e poi salviamo ma non gli diamo un tipo di testo perché non è un input, è un tag

142
00:11:19,280 --> 00:11:24,590
designato che ha un tag di apertura e chiusura e si comporta in modo leggermente diverso.

143
00:11:24,830 --> 00:11:26,130
Quando arriveremo ad aggiungerlo.

144
00:11:26,270 --> 00:11:30,650
Quindi vedremo che in un attimo ci libereremo di quello e poi modificheremo il nostro pulsante.

145
00:11:30,650 --> 00:11:32,540
Diamo un'occhiata a ciò che abbiamo ora.

146
00:11:32,740 --> 00:11:36,610
Sembra abbastanza buono, tranne il pulsante potrebbe essere in stile un po 'più bello.

147
00:11:36,790 --> 00:11:43,670
E se apro l'interfaccia semantica e vai al pulsante ci sono molti più pulsanti in semantico che in Bootstrap.

148
00:11:43,910 --> 00:11:51,780
Così diversi tipi, ma anche molti colori pulsanti di base e quindi anche i pulsanti invertiti.

149
00:11:52,310 --> 00:12:00,680
Quindi scegli uno di questi che ti piace e quando vai con il preferito facciamo viola viola e se dai un'occhiata al codice sorgente

150
00:12:00,680 --> 00:12:04,890
tutto ciò di cui hai bisogno è una classe uguale a te.

151
00:12:05,250 --> 00:12:07,950
Il pulsante di base del colore.

152
00:12:08,480 --> 00:12:12,780
E mentre lo faccio spiegherò perché si chiama interfaccia semantica.

153
00:12:12,920 --> 00:12:21,910
E la ragione principale è che a differenza del bootstrap, dove abbiamo questo strano gergo ETN ETN e LGBT di

154
00:12:21,910 --> 00:12:28,880
dash per esempio che detesto il bootstrap in realtà non lo colpisce, ma la ragione

155
00:12:28,880 --> 00:12:40,470
per cui è stato creato il sematic era in risposta a questo tipo di markup dove invece possiamo avere UI violare il pulsante di base

156
00:12:41,150 --> 00:12:44,590
o posso fare il pulsante UI Violet invertito.

157
00:12:45,050 --> 00:12:46,820
Quindi base per ora va bene.

158
00:12:47,060 --> 00:12:48,050
E questo è tutto ciò che serve.

159
00:12:48,050 --> 00:12:49,630
Molto semplice.

160
00:12:49,760 --> 00:12:51,530
Non è che siano meno personaggi.

161
00:12:51,560 --> 00:12:52,840
Non si tratta di essere più brevi.

162
00:12:53,030 --> 00:12:58,340
Si tratta di essere significativi dove puoi facilmente guardare a questo e capire cosa significa.

163
00:12:58,340 --> 00:13:01,420
Quindi se torniamo indietro adesso e aggiorniamo.

164
00:13:01,690 --> 00:13:06,900
Ho quel pulsante e se voglio renderlo grande è davvero facile.

165
00:13:06,930 --> 00:13:09,050
Tutto quello che devo fare è digitare grande.

166
00:13:09,050 --> 00:13:16,910
Quindi non devo fare BT e lanciare Elgie solo un grande aggiornamento e otteniamo un pulsante più grande e basta.

167
00:13:16,910 --> 00:13:18,740
Quindi proviamo di nuovo.

168
00:13:18,740 --> 00:13:26,770
Voglio dire, io uso lo stesso audace argomento, chiamiamolo il mio nuovo cane.

169
00:13:27,980 --> 00:13:32,350
Altro blog Contac invia e funziona bene.

170
00:13:32,420 --> 00:13:33,110
Grande.

171
00:13:33,110 --> 00:13:38,240
Va bene quindi abbiamo un indice coperto che abbiamo coperto Nuovo e creato e ti ho mostrato un po

172
00:13:38,240 --> 00:13:41,480
'di semantica Potresti ottenere i moduli e i pulsanti nel prossimo video.

173
00:13:41,510 --> 00:13:42,650
Lavoreremo sulla pagina dello spettacolo