Bem vindo de volta.
Então, agora vamos pegar com o resto de nossas rotas repousantes.
Nós fizemos o índice e nós fizemos uma pausa para adicionar no mantic você. e. o cabeçalho e rodapé Parshall's.
Agora vamos fazer novo e criar para que, no final deste vídeo, quando eu clicar na nova publicação, eu deveria ver
um formulário e então eu posso ir a esse formulário preenchê-lo e, em seguida, clicar em enviar.
Isso me levará de volta à página do índice e eu deveria ver outra postagem.
Então vamos começar.
A primeira coisa que precisamos fazer é criar a nova rota que lembra de novos shows como forma.
É um pedido de GET que escolhe os cachorros ou os blogs de barras cortar o novo e apenas mostra um formulário.
Então vamos começar por lá.
Vamos fazer isso depois do nosso índice e vamos adicionar isso aqui.
Índice escreveu.
Agora vamos fazer a nova rota e vou adicionar também.
Então, para a nossa nova rota e depois que eu obter barras de barras de barras novas e novas, é realmente simples.
É o mais curto realmente porque tudo o que temos a fazer é renderizar a mesma forma sempre.
Não temos que procurar nada no banco de dados.
Não temos que enviar dados para o formulário.
Tudo o que precisamos fazer é tornar o novo.
E então precisamos fazer esse arquivo, é claro.
Então, toque as vistas do novo Ejay Sim As visualizações do C-9 são novas.
OK e vamos começar simples.
E todos nós usamos uma pequena UI semântica aqui.
Então, vamos fazer uma div e este dispositivo será simples, tem apenas um segmento de contêiner de texto principal da classe UI.
Então há muitas coisas lá.
Eu vou derrubá-lo em apenas um momento.
E então, em vez disso, vamos adicionar um cabeçalho para fazer isso, podemos fazer um enorme cabeçalho
UI e vamos chamar esse novo registro.
E se vermos isso, saberemos que conseguimos.
Então, inicie o aplicativo.
Ah, e na verdade, nós precisamos incluir nossos parciais também.
Caso contrário, veremos um diferencial, mas não vamos ver nenhum dos estilos semânticos.
Ejay s incluir ponto slash Parshall's slash header mesma linha na parte inferior Parshall's slash para salvar.
Então, precisamos do nosso
Atualize esta página e vá para o blog novo.
E temos dois problemas.
O primeiro é um problema de espaçamento.
Podemos corrigir isso muito facilmente, mas estamos recebendo o modelo certo.
Mas notei algo estranho, que é que o nosso ícone voltou a ser pequeno na página inicial.
É grande nesta página, é pequeno.
E eu fiquei um pouco olhando isso como um tipo de erro de erva daninha.
Eu descobri.
É realmente um daqueles frustrantes que surgiram de vez em quando, quando não
é terrivelmente óbvio no início, mas vou abordá-lo brevemente o que notei.
Você pode ver isso no console.
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
estilo, barra de aplicativos que C S S e não é onde deveria procurar.
E então eu olhei para o link que configuramos no arquivo de cabeçalho e notei que esqueci uma pequena coisa
de uma barra.
Então, se você estiver fresco agora, você verá que o encontra.
E não temos um erro aqui.
E se você olhou na guia de fontes, você pode ver que não olha dentro dos blogs, que é o que
é antes, agora parece estar fora das folhas de estilo.
E agora acabamos com esse ícone de código maior no não.
Em seguida, vamos abordar a questão disso agora estão sobrepondo o resto do nosso conteúdo e corrigir isso, felizmente, é muito
fácil agora que temos essa folha de estilo configurada.
Tudo o que precisamos fazer é adicionar alguma margem para o topo deste elemento, que é o elemento do contêiner.
Tudo o que fazemos será dentro desse recipiente.
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
é margem superior em vez de estar em número de pixels.
Eu também vou usar E-M, para que você veja isso com mais freqüência.
Nós realmente não vimos muito e só vemos que temos outro problema, que é que o contêiner que
inspecionamos também está dentro da barra de navegação.
Lembre-se de que temos um recipiente lá.
também são principais ou contêineres que também são segmentos ou algo diferente de apenas contêineres gerais.
Então, queremos apenas segmentar coisas que são contêineres que
Então, essa é outra solução fácil.
Vamos voltar e apenas me fazer.
Então isso significa alguma coisa.
Eu tive essas duas classes agora que atualizamos e parece muito melhor.
Então, não nos incomodamos com isso.
As margens deste recipiente aqui dentro da Nav. O menu que acabamos de jogar com este aqui e agora
para o estilo.
Agora vamos fazer o formulário funcionar.
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
você esqueceu, olhamos nossas rotas repousantes e você pode ver criar os cães flash o mesmo que
o índice como um postar.
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
você quer algumas entradas, o primeiro será o tipo igual ao texto assim e digitando texto fechado e lhe
dará um nome igual ao título do blog e, em seguida, um espaço reservado igual ao título.
E então, vamos duplicar essa exceção, em vez do título, a partir da imagem.
E isso deve ser revisado de sessão nas solicitações de publicação de alguns vídeos para
ir e depois faremos o mesmo para o
conteúdo que chamamos de corpo e apenas colocá-lo, o log post vai aqui como um espaço reservado.
Tudo bem, então temos isso feito e então precisamos de uma maneira de enviá-lo para que ele faça
o tipo de entrada igual a enviar assim, e salve e veja o que recebemos.
Aqui está a nossa forma não muito desenhada.
Chegaremos a isso em breve.
Mas deve funcionar bem se enviarmos, devemos ter um erro que diz que não pode publicar para cortar blogs.
Isso porque nossa rota de criação não existe.
Então, vamos fazer isso agora cortar cães como uma publicação.
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.
Perfeito e aqui precisamos criar esse novo blog.
Então, temos duas etapas criamos blog, então executamos um redirecionamento e redirecionaremos para o índice por enquanto.
Então, para criar o blog, precisamos criar um blog e a primeira coisa é os dados.
Então, isso não vai funcionar ainda.
E a segunda coisa é o retorno de chamada.
Então, nosso retorno de chamada, podemos começar com um erro.
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
do ponto do ponto do ponto do pedido e o que quer que nós designemos em nossa forma em
nosso formulário.
Tudo está dentro de um blog e um grupo e juntos.
Então, se acabamos de solicitar o blog de despejo do corpo, ele automaticamente tem uma imagem e um corpo de título.
Nós pedimos um golpe de corpo. Primeiro argumento de agosto, é preciso que os dados criem um novo blog quando ele
estiver pronto.
Por causa desse retorno de chamada.
E nós fazemos o nosso erro padrão se.
Vamos fazer um let's em vez de contar sobre o registro, vamos renderizar o novo formulário de novo mais, vamos fazer um
redirecionamento
rez para barramentos e deveríamos ver o novo blog aparecer lá.
Se funcionou, vamos mudar esse comentário e vamos ver o que acontece se nós o fizéssemos.
Então vamos economizar.
uma cópia deste URL de imagem apenas para que possamos ter uma imagem ou título da postagem no blog.
Nós temos que reiniciar o servidor e voltar até a raiz fazer
Aqui está a nossa imagem na nossa publicação no blog.
Submeta e funciona perfeitamente.
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
é exibido.
Maravilhoso.
Então, recapitular tudo isso para rotas novas e criar novas é cortar qualquer que seja o nome do modelo.
Os cães no nosso caso são realmente barras de blogs e você recebe pedidos.
Ele mostra que o formulário cria são cachorros flash, como o índice foi, exceto que é uma solicitação de publicação.
E é aí que o novo formulário envia dados para.
Para adicionar ao banco de dados, crie um novo cão e redireciona de volta.
Não precisa ser o índice a maior parte do tempo, é realmente mostrar a página que você verá
no próximo vídeo.
Vamos fazer um estilo rápido da nossa aplicação.
Vamos fazer o formulário.
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.
Então, para usar o primeiro semântico que faremos é dar a nossa forma uma classe igual ao
E então, veja como rotular em que ainda não temos.
E o primeiro rótulo será o título e então vamos pegar o nosso título e colocá-lo aqui.
Perfeito.
E então vamos fazer isso algumas vezes mais.
Precisamos de um desses para a mudança de imagem, o rótulo diz imagem e, em seguida, uma mudança que eu
quero fazer é que, ao invés de ter nosso blog, a entrada como essa, eu quero torná-lo uma área de texto
onde um usuário pode digitar mais texto como uma postagem de blog atual.
E para consertar isso, ao invés de fazer uma entrada, teremos um div Chrisfield ainda no rótulo e
só chamaremos de conteúdo de blog, mas, ao invés de essa entrada, vamos adicionar uma tag de área de texto que
vimos No começo, mas nós realmente não usamos muito.
E é um pouco diferente dos insumos que ainda lhe damos um nome.
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
que possui uma tag de abertura e fechamento e ela também se comporta um pouco diferente.
Quando chegarmos a adicioná-lo.
Então, vamos ver isso em apenas um momento para livrar-se disso e então vamos usar o nosso botão.
Examinamos o que temos agora.
Parece muito bom, exceto que o botão poderia ser um pouco mais agradável.
E se eu puxar a UI semântica e ir ao botão, há mais botões em semântica do que no Bootstrap.
Então tipos diferentes, mas também muitos botões básicos de cores e, em seguida, botões invertidos também.
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
código-fonte, tudo o que você precisa é a classe igual a você.
O botão básico de cores.
E enquanto eu fizer isso, vou explicar por que se chama UI semântica.
E o principal motivo é que, ao contrário do bootstrap, temos esse tipo de jargão estranho ETN ETN dash LGBT e
dash padrão, por exemplo, que eu não adoro o bootstrap, não o toco, mas o motivo
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
posso fazer o botão UI Violet invertido.
Então, básico, por enquanto, está bem.
E isso é tudo o que é preciso.
Muito simples.
Não é que sejam menos personagens.
Não se trata de ser mais curto.
Trata-se de ser significativo onde você pode facilmente ver isso e entender o que isso significa.
Então, se voltarmos agora e atualizando.
Eu tenho esse botão e, se eu quiser fazer isso, é muito fácil.
Tudo o que tenho a fazer é digitar grande.
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.
Então vamos testá-lo novamente.
Quero dizer, eu uso o mesmo argumento audaz, vamos chamar isso de meu novo cão.
Mais blog Contac enviar e funciona bem.
Ótimo.
Tudo bem, então nós cobrimos o índice que cobrimos Novo e criamos e mostrei-lhe um pequeno número de
semântica Você pode obter os formulários e os botões no próximo vídeo.
Trabalharemos na página do show