1
00:00:00,200 --> 00:00:01,200
Bem vindo de volta.

2
00:00:01,200 --> 00:00:04,380
Então, agora vamos pegar com o resto de nossas rotas repousantes.

3
00:00:04,470 --> 00:00:09,360
Nós fizemos o índice e nós fizemos uma pausa para adicionar no mantic você. e. o cabeçalho e rodapé Parshall's.

4
00:00:09,360 --> 00:00:15,330
Agora vamos fazer novo e criar para que, no final deste vídeo, quando eu clicar na nova publicação, eu deveria ver

5
00:00:15,330 --> 00:00:19,990
um formulário e então eu posso ir a esse formulário preenchê-lo e, em seguida, clicar em enviar.

6
00:00:20,010 --> 00:00:23,970
Isso me levará de volta à página do índice e eu deveria ver outra postagem.

7
00:00:24,000 --> 00:00:25,210
Então vamos começar.

8
00:00:25,530 --> 00:00:30,710
A primeira coisa que precisamos fazer é criar a nova rota que lembra de novos shows como forma.

9
00:00:30,770 --> 00:00:37,110
É um pedido de GET que escolhe os cachorros ou os blogs de barras cortar o novo e apenas mostra um formulário.

10
00:00:37,380 --> 00:00:39,440
Então vamos começar por lá.

11
00:00:40,590 --> 00:00:43,620
Vamos fazer isso depois do nosso índice e vamos adicionar isso aqui.

12
00:00:43,650 --> 00:00:45,670
Índice escreveu.

13
00:00:45,960 --> 00:00:51,980
Agora vamos fazer a nova rota e vou adicionar também.

14
00:00:52,050 --> 00:01:00,730
Então, para a nossa nova rota e depois que eu obter barras de barras de barras novas e novas, é realmente simples.

15
00:01:00,760 --> 00:01:06,790
É o mais curto realmente porque tudo o que temos a fazer é renderizar a mesma forma sempre.

16
00:01:06,930 --> 00:01:09,280
Não temos que procurar nada no banco de dados.

17
00:01:09,450 --> 00:01:11,730
Não temos que enviar dados para o formulário.

18
00:01:11,730 --> 00:01:16,490
Tudo o que precisamos fazer é tornar o novo.

19
00:01:17,190 --> 00:01:19,110
E então precisamos fazer esse arquivo, é claro.

20
00:01:19,110 --> 00:01:28,340
Então, toque as vistas do novo Ejay Sim As visualizações do C-9 são novas.

21
00:01:29,100 --> 00:01:30,970
OK e vamos começar simples.

22
00:01:31,380 --> 00:01:34,150
E todos nós usamos uma pequena UI semântica aqui.

23
00:01:34,200 --> 00:01:43,400
Então, vamos fazer uma div e este dispositivo será simples, tem apenas um segmento de contêiner de texto principal da classe UI.

24
00:01:43,400 --> 00:01:44,720
Então há muitas coisas lá.

25
00:01:44,760 --> 00:01:46,270
Eu vou derrubá-lo em apenas um momento.

26
00:01:46,530 --> 00:01:54,930
E então, em vez disso, vamos adicionar um cabeçalho para fazer isso, podemos fazer um enorme cabeçalho

27
00:01:54,930 --> 00:01:58,520
UI e vamos chamar esse novo registro.

28
00:01:59,300 --> 00:02:02,310
E se vermos isso, saberemos que conseguimos.

29
00:02:03,030 --> 00:02:04,180
Então, inicie o aplicativo.

30
00:02:04,300 --> 00:02:07,760
Ah, e na verdade, nós precisamos incluir nossos parciais também.

31
00:02:07,770 --> 00:02:11,980
Caso contrário, veremos um diferencial, mas não vamos ver nenhum dos estilos semânticos.

32
00:02:12,150 --> 00:02:22,470
Ejay s incluir ponto slash Parshall's slash header mesma linha na parte inferior Parshall's slash para salvar.

33
00:02:22,600 --> 00:02:25,410
Então, precisamos do nosso

34
00:02:25,950 --> 00:02:29,830
Atualize esta página e vá para o blog novo.

35
00:02:30,840 --> 00:02:32,070
E temos dois problemas.

36
00:02:32,070 --> 00:02:34,550
O primeiro é um problema de espaçamento.

37
00:02:34,650 --> 00:02:37,540
Podemos corrigir isso muito facilmente, mas estamos recebendo o modelo certo.

38
00:02:37,800 --> 00:02:43,980
Mas notei algo estranho, que é que o nosso ícone voltou a ser pequeno na página inicial.

39
00:02:44,010 --> 00:02:47,170
É grande nesta página, é pequeno.

40
00:02:47,370 --> 00:02:51,760
E eu fiquei um pouco olhando isso como um tipo de erro de erva daninha.

41
00:02:51,840 --> 00:02:52,490
Eu descobri.

42
00:02:52,500 --> 00:02:57,540
É realmente um daqueles frustrantes que surgiram de vez em quando, quando não

43
00:02:57,540 --> 00:03:01,990
é terrivelmente óbvio no início, mas vou abordá-lo brevemente o que notei.

44
00:03:02,160 --> 00:03:04,320
Você pode ver isso no console.

45
00:03:04,320 --> 00:03:11,740
Ele não conseguiu carregar a folha de estilo, exclua C S S, mas estava procurando por isso em barras de estilo slash, barra de

46
00:03:11,740 --> 00:03:16,250
estilo, barra de aplicativos que C S S e não é onde deveria procurar.

47
00:03:16,290 --> 00:03:23,130
E então eu olhei para o link que configuramos no arquivo de cabeçalho e notei que esqueci uma pequena coisa

48
00:03:24,020 --> 00:03:25,030
de uma barra.

49
00:03:25,080 --> 00:03:29,080
Então, se você estiver fresco agora, você verá que o encontra.

50
00:03:29,310 --> 00:03:31,680
E não temos um erro aqui.

51
00:03:31,680 --> 00:03:38,640
E se você olhou na guia de fontes, você pode ver que não olha dentro dos blogs, que é o que

52
00:03:38,640 --> 00:03:41,820
é antes, agora parece estar fora das folhas de estilo.

53
00:03:41,850 --> 00:03:44,990
E agora acabamos com esse ícone de código maior no não.

54
00:03:45,390 --> 00:03:51,900
Em seguida, vamos abordar a questão disso agora estão sobrepondo o resto do nosso conteúdo e corrigir isso, felizmente, é muito

55
00:03:51,990 --> 00:03:54,690
fácil agora que temos essa folha de estilo configurada.

56
00:03:54,900 --> 00:04:01,590
Tudo o que precisamos fazer é adicionar alguma margem para o topo deste elemento, que é o elemento do contêiner.

57
00:04:02,250 --> 00:04:04,520
Tudo o que fazemos será dentro desse recipiente.

58
00:04:04,710 --> 00:04:14,430
Então, vamos selecionar isso em nossa folha de estilos após a avaliação e nós apenas faremos um container e então tudo o que queremos fazer

59
00:04:14,430 --> 00:04:18,440
é margem superior em vez de estar em número de pixels.

60
00:04:18,450 --> 00:04:23,280
Eu também vou usar E-M, para que você veja isso com mais freqüência.

61
00:04:23,280 --> 00:04:29,700
Nós realmente não vimos muito e só vemos que temos outro problema, que é que o contêiner que

62
00:04:29,910 --> 00:04:32,640
inspecionamos também está dentro da barra de navegação.

63
00:04:32,640 --> 00:04:34,640
Lembre-se de que temos um recipiente lá.

64
00:04:34,830 --> 00:04:40,440
também são principais ou contêineres que também são segmentos ou algo diferente de apenas contêineres gerais.

65
00:04:40,440 --> 00:04:43,800
Então, queremos apenas segmentar coisas que são contêineres que

66
00:04:44,040 --> 00:04:46,060
Então, essa é outra solução fácil.

67
00:04:46,170 --> 00:04:48,370
Vamos voltar e apenas me fazer.

68
00:04:48,390 --> 00:04:49,520
Então isso significa alguma coisa.

69
00:04:49,520 --> 00:04:55,070
Eu tive essas duas classes agora que atualizamos e parece muito melhor.

70
00:04:55,100 --> 00:04:56,170
Então, não nos incomodamos com isso.

71
00:04:56,210 --> 00:05:02,250
As margens deste recipiente aqui dentro da Nav. O menu que acabamos de jogar com este aqui e agora

72
00:05:02,270 --> 00:05:02,930
para o estilo.

73
00:05:02,930 --> 00:05:05,050
Agora vamos fazer o formulário funcionar.

74
00:05:05,150 --> 00:05:16,700
Então, em vez do nosso novo pai, sim, queremos formar e nosso formulário é como esse, onde ele vai para barramentos de logs, se

75
00:05:18,020 --> 00:05:25,940
você esqueceu, olhamos nossas rotas repousantes e você pode ver criar os cães flash o mesmo que

76
00:05:25,940 --> 00:05:28,460
o índice como um postar.

77
00:05:29,120 --> 00:05:37,760
Então, este formulário precisa ir para barras de registro onde o método é post e, em seguida, dentro de um formulário que

78
00:05:37,760 --> 00:05:45,170
você quer algumas entradas, o primeiro será o tipo igual ao texto assim e digitando texto fechado e lhe

79
00:05:45,170 --> 00:05:52,090
dará um nome igual ao título do blog e, em seguida, um espaço reservado igual ao título.

80
00:05:52,850 --> 00:06:00,550
E então, vamos duplicar essa exceção, em vez do título, a partir da imagem.

81
00:06:01,350 --> 00:06:07,430
E isso deve ser revisado de sessão nas solicitações de publicação de alguns vídeos para

82
00:06:07,430 --> 00:06:10,750
ir e depois faremos o mesmo para o

83
00:06:13,340 --> 00:06:19,940
conteúdo que chamamos de corpo e apenas colocá-lo, o log post vai aqui como um espaço reservado.

84
00:06:19,940 --> 00:06:27,050
Tudo bem, então temos isso feito e então precisamos de uma maneira de enviá-lo para que ele faça

85
00:06:29,480 --> 00:06:35,680
o tipo de entrada igual a enviar assim, e salve e veja o que recebemos.

86
00:06:35,770 --> 00:06:38,230
Aqui está a nossa forma não muito desenhada.

87
00:06:38,300 --> 00:06:39,600
Chegaremos a isso em breve.

88
00:06:39,740 --> 00:06:46,550
Mas deve funcionar bem se enviarmos, devemos ter um erro que diz que não pode publicar para cortar blogs.

89
00:06:47,060 --> 00:06:49,660
Isso porque nossa rota de criação não existe.

90
00:06:50,150 --> 00:06:53,960
Então, vamos fazer isso agora cortar cães como uma publicação.

91
00:06:54,110 --> 00:07:05,870
Então, ao invés de realmente sim sob o comentário Create route nós faremos uma publicação de aplicativos, barras de blogs ou Colback.

92
00:07:07,700 --> 00:07:13,160
Perfeito e aqui precisamos criar esse novo blog.

93
00:07:13,160 --> 00:07:22,710
Então, temos duas etapas criamos blog, então executamos um redirecionamento e redirecionaremos para o índice por enquanto.

94
00:07:23,780 --> 00:07:30,220
Então, para criar o blog, precisamos criar um blog e a primeira coisa é os dados.

95
00:07:30,230 --> 00:07:31,990
Então, isso não vai funcionar ainda.

96
00:07:32,060 --> 00:07:34,140
E a segunda coisa é o retorno de chamada.

97
00:07:34,580 --> 00:07:38,450
Então, nosso retorno de chamada, podemos começar com um erro.

98
00:07:38,510 --> 00:07:47,360
E então, se funcionar, teremos um novo blog e os dados que estamos passando, lembre-se do vídeo nas solicitações de postagem, tudo está dentro

99
00:07:47,360 --> 00:07:54,200
do ponto do ponto do ponto do pedido e o que quer que nós designemos em nossa forma em

100
00:07:54,740 --> 00:07:55,600
nosso formulário.

101
00:07:55,610 --> 00:07:58,890
Tudo está dentro de um blog e um grupo e juntos.

102
00:07:58,940 --> 00:08:05,120
Então, se acabamos de solicitar o blog de despejo do corpo, ele automaticamente tem uma imagem e um corpo de título.

103
00:08:05,120 --> 00:08:10,160
Nós pedimos um golpe de corpo. Primeiro argumento de agosto, é preciso que os dados criem um novo blog quando ele

104
00:08:10,160 --> 00:08:10,530
estiver pronto.

105
00:08:10,530 --> 00:08:11,950
Por causa desse retorno de chamada.

106
00:08:12,140 --> 00:08:14,760
E nós fazemos o nosso erro padrão se.

107
00:08:15,030 --> 00:08:26,510
Vamos fazer um let's em vez de contar sobre o registro, vamos renderizar o novo formulário de novo mais, vamos fazer um

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

109
00:08:30,110 --> 00:08:35,870
rez para barramentos e deveríamos ver o novo blog aparecer lá.

110
00:08:36,020 --> 00:08:43,410
Se funcionou, vamos mudar esse comentário e vamos ver o que acontece se nós o fizéssemos.

111
00:08:43,520 --> 00:08:44,660
Então vamos economizar.

112
00:08:44,870 --> 00:08:52,540
uma cópia deste URL de imagem apenas para que possamos ter uma imagem ou título da postagem no blog.

113
00:08:52,540 --> 00:08:57,460
Nós temos que reiniciar o servidor e voltar até a raiz fazer

114
00:08:57,620 --> 00:09:00,230
Aqui está a nossa imagem na nossa publicação no blog.

115
00:09:00,350 --> 00:09:03,740
Submeta e funciona perfeitamente.

116
00:09:03,800 --> 00:09:11,330
E você pode ver que temos um título de uma imagem que um blog muito curto, o corpo na nossa data criada também

117
00:09:11,330 --> 00:09:12,020
é exibido.

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

119
00:09:13,010 --> 00:09:19,790
Então, recapitular tudo isso para rotas novas e criar novas é cortar qualquer que seja o nome do modelo.

120
00:09:19,790 --> 00:09:24,910
Os cães no nosso caso são realmente barras de blogs e você recebe pedidos.

121
00:09:24,920 --> 00:09:32,580
Ele mostra que o formulário cria são cachorros flash, como o índice foi, exceto que é uma solicitação de publicação.

122
00:09:32,600 --> 00:09:35,350
E é aí que o novo formulário envia dados para.

123
00:09:35,430 --> 00:09:39,080
Para adicionar ao banco de dados, crie um novo cão e redireciona de volta.

124
00:09:39,080 --> 00:09:43,820
Não precisa ser o índice a maior parte do tempo, é realmente mostrar a página que você verá

125
00:09:43,820 --> 00:09:44,660
no próximo vídeo.

126
00:09:45,140 --> 00:09:47,550
Vamos fazer um estilo rápido da nossa aplicação.

127
00:09:47,580 --> 00:09:49,820
Vamos fazer o formulário.

128
00:09:50,570 --> 00:10:02,000
formulário UI e, então, dentro dessa forma, cada uma dessas entradas estará em uma div e essa div terá classe igual a campos.

129
00:10:02,000 --> 00:10:10,070
Então, para usar o primeiro semântico que faremos é dar a nossa forma uma classe igual ao

130
00:10:10,550 --> 00:10:13,330
E então, veja como rotular em que ainda não temos.

131
00:10:13,730 --> 00:10:19,860
E o primeiro rótulo será o título e então vamos pegar o nosso título e colocá-lo aqui.

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

133
00:10:21,470 --> 00:10:24,630
E então vamos fazer isso algumas vezes mais.

134
00:10:24,770 --> 00:10:32,120
Precisamos de um desses para a mudança de imagem, o rótulo diz imagem e, em seguida, uma mudança que eu

135
00:10:34,840 --> 00:10:42,770
quero fazer é que, ao invés de ter nosso blog, a entrada como essa, eu quero torná-lo uma área de texto

136
00:10:42,770 --> 00:10:47,470
onde um usuário pode digitar mais texto como uma postagem de blog atual.

137
00:10:48,050 --> 00:10:54,920
E para consertar isso, ao invés de fazer uma entrada, teremos um div Chrisfield ainda no rótulo e

138
00:10:54,920 --> 00:11:03,140
só chamaremos de conteúdo de blog, mas, ao invés de essa entrada, vamos adicionar uma tag de área de texto que

139
00:11:03,140 --> 00:11:06,560
vimos No começo, mas nós realmente não usamos muito.

140
00:11:06,830 --> 00:11:10,280
E é um pouco diferente dos insumos que ainda lhe damos um nome.

141
00:11:10,400 --> 00:11:19,280
Então, continue o blog e, em seguida, salvamos, mas não lhe damos um tipo de texto, porque não é uma entrada, é a própria etiqueta designada

142
00:11:19,280 --> 00:11:24,590
que possui uma tag de abertura e fechamento e ela também se comporta um pouco diferente.

143
00:11:24,830 --> 00:11:26,130
Quando chegarmos a adicioná-lo.

144
00:11:26,270 --> 00:11:30,650
Então, vamos ver isso em apenas um momento para livrar-se disso e então vamos usar o nosso botão.

145
00:11:30,650 --> 00:11:32,540
Examinamos o que temos agora.

146
00:11:32,740 --> 00:11:36,610
Parece muito bom, exceto que o botão poderia ser um pouco mais agradável.

147
00:11:36,790 --> 00:11:43,670
E se eu puxar a UI semântica e ir ao botão, há mais botões em semântica do que no Bootstrap.

148
00:11:43,910 --> 00:11:51,780
Então tipos diferentes, mas também muitos botões básicos de cores e, em seguida, botões invertidos também.

149
00:11:52,310 --> 00:12:00,680
Então, escolha um desses que você gosta e quando você vai com o favorito, faça o violeta roxo e, se você olhar para o

150
00:12:00,680 --> 00:12:04,890
código-fonte, tudo o que você precisa é a classe igual a você.

151
00:12:05,250 --> 00:12:07,950
O botão básico de cores.

152
00:12:08,480 --> 00:12:12,780
E enquanto eu fizer isso, vou explicar por que se chama UI semântica.

153
00:12:12,920 --> 00:12:21,910
E o principal motivo é que, ao contrário do bootstrap, temos esse tipo de jargão estranho ETN ETN dash LGBT e

154
00:12:21,910 --> 00:12:28,880
dash padrão, por exemplo, que eu não adoro o bootstrap, não o toco, mas o motivo

155
00:12:28,880 --> 00:12:40,470
pelo qual o sematic foi criado foi em resposta a esse tipo de marcação em que, em vez disso, podemos ter UI violar o botão básico ou

156
00:12:41,150 --> 00:12:44,590
posso fazer o botão UI Violet invertido.

157
00:12:45,050 --> 00:12:46,820
Então, básico, por enquanto, está bem.

158
00:12:47,060 --> 00:12:48,050
E isso é tudo o que é preciso.

159
00:12:48,050 --> 00:12:49,630
Muito simples.

160
00:12:49,760 --> 00:12:51,530
Não é que sejam menos personagens.

161
00:12:51,560 --> 00:12:52,840
Não se trata de ser mais curto.

162
00:12:53,030 --> 00:12:58,340
Trata-se de ser significativo onde você pode facilmente ver isso e entender o que isso significa.

163
00:12:58,340 --> 00:13:01,420
Então, se voltarmos agora e atualizando.

164
00:13:01,690 --> 00:13:06,900
Eu tenho esse botão e, se eu quiser fazer isso, é muito fácil.

165
00:13:06,930 --> 00:13:09,050
Tudo o que tenho a fazer é digitar grande.

166
00:13:09,050 --> 00:13:16,910
Então eu não tenho que fazer a BT e tirar Elgie apenas uma grande atualização e nós conseguimos um botão maior e é isso.

167
00:13:16,910 --> 00:13:18,740
Então vamos testá-lo novamente.

168
00:13:18,740 --> 00:13:26,770
Quero dizer, eu uso o mesmo argumento audaz, vamos chamar isso de meu novo cão.

169
00:13:27,980 --> 00:13:32,350
Mais blog Contac enviar e funciona bem.

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

171
00:13:33,110 --> 00:13:38,240
Tudo bem, então nós cobrimos o índice que cobrimos Novo e criamos e mostrei-lhe um pequeno número de

172
00:13:38,240 --> 00:13:41,480
semântica Você pode obter os formulários e os botões no próximo vídeo.

173
00:13:41,510 --> 00:13:42,650
Trabalharemos na página do show