Bienvenido de nuevo.
Así que ahora vamos a continuar con el resto de nuestras rutas de descanso.
Hicimos el índice y nos tomamos un descanso para agregarlo a usted. mi. el encabezado y el pie de página de Parshall.
Ahora vamos a hacer algo nuevo y crear para que, al final de este video, cuando hago clic en una
nueva publicación, vea un formulario y luego pueda ir a ese formulario y luego enviarlo.
Me llevará de vuelta a la página de índice y debería ver otra publicación.
Entonces empecemos.
Lo primero que debemos hacer es crear la nueva ruta que recuerde nuevos shows como un formulario.
Es una solicitud GET de perros diagonales o de blogs de barras, nueva y solo muestra un formulario.
Así que comencemos allí.
Lo haremos después de nuestro índice y agreguemos eso aquí.
Index escribió.
Ahora hagamos la nueva ruta y agregaré en crear también.
Entonces, para nuestra nueva ruta y después de que los blogs de barra obtienes nuevos y nuevos, es realmente simple.
Es el más corto realmente porque todo lo que tenemos que hacer es renderizar la misma forma cada vez.
No tenemos que buscar nada en la base de datos.
No tenemos que enviar ningún dato al formulario.
Todo lo que tenemos que hacer es renderizar nuevos.
Y luego tenemos que hacer ese archivo, por supuesto.
Así que las vistas táctiles reducen las nuevas vistas de Ejay Sí C-9.
OK y empecemos de manera simple.
Y todos usamos una pequeña IU semántica aquí.
Así que haremos un div y este dispositivo será simple, solo tiene un segmento de contenedor de texto principal de la IU de clase.
Entonces hay muchas cosas allí.
Lo dividiré en solo un momento.
Y luego, en lugar de eso, agreguemos un encabezado para hacer eso, podemos hacer un encabezado UI
enorme y llamar a este nuevo registro.
Y si vemos esto sabremos que lo logramos.
Así que inicie la aplicación.
Ah, y de hecho necesitamos incluir nuestros parciales también.
De lo contrario, veremos una diferencia, pero no vamos a ver ninguno de los estilos semánticos.
Ejay incluya la barra inclinada de Parshall de punto slash en la misma línea en la barra inferior de Parshall para ahorrar.
Por lo tanto, necesitamos que nuestro
Actualiza esta página y ve a blog slash new.
Y tenemos dos problemas.
El primero es un problema de espacio.
Podemos arreglarlo con bastante facilidad, pero estamos obteniendo la plantilla correcta.
Pero noté algo un poco raro, que es que nuestro icono volvió a ser pequeño en la página de inicio.
Es grande en esta página, es pequeño.
Y pasé un tiempo mirando esto como una especie de error de hierba.
Me lo imaginé.
Es realmente uno de esos frustrantes que surgen de vez en cuando, donde no
es terriblemente obvio al principio, pero te explicaré brevemente lo que noté.
Puedes verlo en la consola.
Falló la carga de la hoja de estilos para inhabilitar C S, pero la estaba buscando debajo de los blogs modulares que reducen la velocidad de la
aplicación de hojas de estilo que C S S y que no está donde debería verse.
Y entonces miré el enlace que configuramos en el archivo de encabezado y noté que olvidé una pequeña
cosa, una barra.
Entonces, si estás fresco ahora, verás que lo encuentra.
Y no obtenemos un error aquí.
Y si miró en la pestaña de fuentes, puede ver que no se ve dentro de los blogs, que es lo que es antes
de que ahora se vea fuera de las hojas de estilo.
Y ahora terminamos con ese ícono de código más grande en el no.
A continuación, vamos a abordar el problema de que ahora se superponen al resto de nuestro contenido y, afortunadamente, solucionarlo es muy
fácil ahora que tenemos configurada esa hoja de estilo.
Todo lo que tenemos que hacer es agregar un margen a la parte superior de este elemento, que es el elemento contenedor.
Todo lo que hacemos estará dentro de ese contenedor.
Así que seleccionaremos eso en nuestra hoja de estilo después de la evaluación y simplemente haremos un contenedor y luego todo lo que queremos hacer
es margen arriba en lugar de estar en número de píxeles.
Voy a usar E-M también para que lo veas más seguido.
Realmente no lo hemos visto mucho y solo vemos que tenemos otro problema, que es que el contenedor que inspeccionamos
también está dentro de la barra de navegación.
Recuerde que tenemos un contenedor allí.
contenedores que también son principales o contenedores que también son segmentos o algo más que solo contenedores generales.
Por lo tanto, solo queremos apuntar a objetos que son
Entonces esa es otra solución fácil.
Volveremos y solo hazme.
Entonces eso significa algo.
Tenía ambas clases ahora que actualizamos y se ve mucho mejor.
Entonces no nos metimos con eso.
Los márgenes de este contenedor aquí dentro del Nav. el menú que acabamos de jugar con este aquí y ahora
para el diseño.
Ahora vamos a hacer que la forma funcione.
Entonces, en lugar de nuestro nuevo papá sí, queremos formarnos y nuestro formulario es similar al que se usa para cortar registros que, si
lo olvidamos, observamos nuestras rutas de descanso y puede ver cómo crear es flash para perros igual
que el índice como enviar.
Así que este formulario debe ir a los registros de barras donde el método se publica y luego dentro de un formulario
que quiere unas pocas entradas; la primera simplemente tecleará texto igual y escribirá el texto cercano y le dará
un nombre igual al título del blog y luego un marcador de posición que es igual al título.
Y luego duplicaremos esa excepción en lugar de que el título lo haga por imagen.
Y esto debería ser una revisión desde la sesión en las solicitudes de publicación de algunos
videos para ir y luego haremos lo mismo para
el contenido que llamamos cuerpo y simplemente ponlo como publicación de registro como marcador de posición.
Está bien, así que tenemos eso hecho y luego necesitamos una forma de enviarlo para que haga que el
tipo de entrada sea igual a enviar así y luego guardar y ver lo que obtenemos.
Aquí está nuestra forma no muy estilizada.
Pronto llegaremos a eso.
Pero debería funcionar bien si enviamos deberíamos obtener un error que dice que no se puede publicar para recortar blogs.
Eso es porque nuestra ruta de creación no existe.
Así que hagámoslo ahora, cortando perros como una publicación.
Entonces, en lugar de en realidad, sí, en el comentario de Crear ruta, haremos una publicación de aplicación, barra diagonal o Colback.
Perfecto y aquí realmente necesitamos crear ese nuevo blog.
Así que tenemos dos pasos para crear blog, luego ejecutamos una redirección y por el momento lo redirigiremos al índice.
Entonces para crear el blog necesitamos crear un blog y lo primero son los datos.
Entonces eso no funcionará todavía.
Y lo segundo es la devolución de llamada.
Entonces, nuestra devolución de llamada podemos comenzar, tenemos un error.
Y luego, si funciona, tendremos un nuevo blog y los datos que estamos pasando recordarán del video en las solicitudes de publicación, todo está
dentro de la solicitud dot body dot y lo que sea que hayamos nombrado en nuestro formulario en
nuestro formulario.
Todo está dentro de un blog y un grupo y juntos.
Entonces, si solo solicitamos el blog body dump, automáticamente tendrá una imagen y cuerpo del título.
Le damos la solicitud de un golpe al cuerpo Agosto primer argumento que toma esa información crea un nuevo blog cuando
está hecho.
Causa esta devolución de llamada.
Y hacemos nuestro estándar si hay un error.
Hagamos un vamos a contar en lugar de contar el registro, rendericemos el nuevo formulario otra vez, haremos una redirección de
rez
para cortar registros y deberíamos ver el nuevo blog aparecer allí.
Si funcionó, pasemos este comentario y veamos qué sucede si le damos una oportunidad.
Así que ahorraremos
copia de esta URL de imagen solo para que tengamos una imagen o título de la publicación del blog.
Tenemos que reiniciar el servidor e ir hasta la raíz para hacer una
Aquí está nuestra imagen en nuestra publicación de blog.
Presentar y funciona perfecto.
Y puede ver que tenemos un título, una imagen, una publicación de blog muy corta, el cuerpo en nuestra fecha de creación también
se muestra.
Maravilloso.
Entonces recapitular todo eso en rutas nuevas y crear nuevas es barra cualquiera sea el nombre del modelo.
Los perros en nuestro caso son blogs slash y recibes solicitudes.
Muestra que la forma de crear es flash dogs al igual que el índice, excepto que es una solicitud posterior.
Y ahí es donde el nuevo formulario envía datos.
Para agregar a la base de datos, crea un nuevo perro y luego redirecciona.
No tiene que ser el índice la mayoría de las veces para mostrar la página que verá en
el siguiente video.
Vamos a estilizar rápidamente nuestra aplicación.
Hagamos la forma.
forma de UI y luego dentro de esa forma cada una de estas entradas estará en un div y esa div tendrá una clase igual a campos.
Entonces, para usar lo semántico, lo primero que haremos es dar a nuestra forma una clase igual a la
Y luego mira cómo etiquetar en el que aún no tenemos.
Y la primera etiqueta será título y luego tomaremos nuestro título y lo pondremos allí.
Perfecto.
Y luego haremos esto unas cuantas veces más.
Necesitamos uno de estos para cambiar la imagen de la etiqueta decir imagen y luego un cambio que quiero
hacer es que en lugar de tener nuestro blog como entrada, quiero convertirlo en un área de texto donde un usuario
pueda escribir un poco más de texto como una publicación de blog real.
Y para arreglar eso, en lugar de hacer de esto una entrada, vamos a tener un div Chrisfield en la
etiqueta y lo llamaremos contenido de blog, pero en lugar de esta entrada vamos a agregar una etiqueta de área de texto que vimos
desde el principio, pero realmente no hemos usado mucho.
Y es un poco diferente a las entradas, aún le damos un nombre.
Así que aún guardamos el cuerpo del blog y luego lo guardamos, pero no le damos un tipo de texto porque no es una entrada, es su propia etiqueta
designada que tiene una etiqueta de apertura y cierre y también se comporta de manera un poco diferente.
Cuando tenemos que agregarlo.
Así que veremos eso en un momento para deshacernos de eso y luego le daremos estilo a nuestro botón.
Echemos un vistazo a lo que tenemos ahora.
Se ve bastante bien, excepto que el botón podría ser un poco más agradable.
Y si detengo la interfaz de usuario semántica y voy al botón, hay más botones en semántica que en Bootstrap.
Tan diferentes tipos pero también muchos botones básicos de colores y luego botones invertidos también.
Así que elige uno de estos que te gusten y cuando te vayas con el favorito vamos a hacer violeta violeta y si echas un vistazo
al código fuente, todo lo que necesitas es una clase igual a ti.
El botón básico de color.
Y mientras hago esto, explicaré por qué se llama UI semántica.
Y la razón principal es que a diferencia de bootstrap donde tenemos este tipo de jerga extraña, ETN ETN dash
LGBT y dash por defecto, por ejemplo, aborrezco que bootstrap realmente no lo detenga, pero
la razón por la que se creó sematic fue en respuesta a este tipo de marcado donde podemos tener la IU violar el botón básico
o puedo hacer el botón IU violeta invertido.
Tan básico por ahora está bien.
Y eso es todo lo que se necesita.
Muy simple.
No es que sean menos personajes.
No se trata de ser más bajo.
Se trata de ser significativo en donde puedes ver esto fácilmente y entender lo que significa.
Entonces, si volvemos ahora y actualizamos
Tengo ese botón y si quiero agrandarlo es realmente fácil.
Todo lo que tengo que hacer es escribir a lo grande.
Así que no tengo que hacer BT y darle a Elgie una gran actualización y obtenemos un botón más grande y listo.
Así que probémoslo de nuevo.
Quiero decir que utilizo el mismo argumento audaz, vamos a llamar a este mi nuevo perro.
Más blog Contac submit y funciona bien.
Estupendo.
De acuerdo, tenemos un índice cubierto que hemos cubierto Nuevo y crear, y te mostré un poco de semántica. Es
posible que obtengas los formularios y los botones en el siguiente video.
Trabajaremos en la página del programa