1
00:00:00,200 --> 00:00:01,200
Bienvenido de nuevo.

2
00:00:01,200 --> 00:00:04,380
Así que ahora vamos a continuar con el resto de nuestras rutas de descanso.

3
00:00:04,470 --> 00:00:09,360
Hicimos el índice y nos tomamos un descanso para agregarlo a usted. mi. el encabezado y el pie de página de Parshall.

4
00:00:09,360 --> 00:00:15,330
Ahora vamos a hacer algo nuevo y crear para que, al final de este video, cuando hago clic en una

5
00:00:15,330 --> 00:00:19,990
nueva publicación, vea un formulario y luego pueda ir a ese formulario y luego enviarlo.

6
00:00:20,010 --> 00:00:23,970
Me llevará de vuelta a la página de índice y debería ver otra publicación.

7
00:00:24,000 --> 00:00:25,210
Entonces empecemos.

8
00:00:25,530 --> 00:00:30,710
Lo primero que debemos hacer es crear la nueva ruta que recuerde nuevos shows como un formulario.

9
00:00:30,770 --> 00:00:37,110
Es una solicitud GET de perros diagonales o de blogs de barras, nueva y solo muestra un formulario.

10
00:00:37,380 --> 00:00:39,440
Así que comencemos allí.

11
00:00:40,590 --> 00:00:43,620
Lo haremos después de nuestro índice y agreguemos eso aquí.

12
00:00:43,650 --> 00:00:45,670
Index escribió.

13
00:00:45,960 --> 00:00:51,980
Ahora hagamos la nueva ruta y agregaré en crear también.

14
00:00:52,050 --> 00:01:00,730
Entonces, para nuestra nueva ruta y después de que los blogs de barra obtienes nuevos y nuevos, es realmente simple.

15
00:01:00,760 --> 00:01:06,790
Es el más corto realmente porque todo lo que tenemos que hacer es renderizar la misma forma cada vez.

16
00:01:06,930 --> 00:01:09,280
No tenemos que buscar nada en la base de datos.

17
00:01:09,450 --> 00:01:11,730
No tenemos que enviar ningún dato al formulario.

18
00:01:11,730 --> 00:01:16,490
Todo lo que tenemos que hacer es renderizar nuevos.

19
00:01:17,190 --> 00:01:19,110
Y luego tenemos que hacer ese archivo, por supuesto.

20
00:01:19,110 --> 00:01:28,340
Así que las vistas táctiles reducen las nuevas vistas de Ejay Sí C-9.

21
00:01:29,100 --> 00:01:30,970
OK y empecemos de manera simple.

22
00:01:31,380 --> 00:01:34,150
Y todos usamos una pequeña IU semántica aquí.

23
00:01:34,200 --> 00:01:43,400
Así que haremos un div y este dispositivo será simple, solo tiene un segmento de contenedor de texto principal de la IU de clase.

24
00:01:43,400 --> 00:01:44,720
Entonces hay muchas cosas allí.

25
00:01:44,760 --> 00:01:46,270
Lo dividiré en solo un momento.

26
00:01:46,530 --> 00:01:54,930
Y luego, en lugar de eso, agreguemos un encabezado para hacer eso, podemos hacer un encabezado UI

27
00:01:54,930 --> 00:01:58,520
enorme y llamar a este nuevo registro.

28
00:01:59,300 --> 00:02:02,310
Y si vemos esto sabremos que lo logramos.

29
00:02:03,030 --> 00:02:04,180
Así que inicie la aplicación.

30
00:02:04,300 --> 00:02:07,760
Ah, y de hecho necesitamos incluir nuestros parciales también.

31
00:02:07,770 --> 00:02:11,980
De lo contrario, veremos una diferencia, pero no vamos a ver ninguno de los estilos semánticos.

32
00:02:12,150 --> 00:02:22,470
Ejay incluya la barra inclinada de Parshall de punto slash en la misma línea en la barra inferior de Parshall para ahorrar.

33
00:02:22,600 --> 00:02:25,410
Por lo tanto, necesitamos que nuestro

34
00:02:25,950 --> 00:02:29,830
Actualiza esta página y ve a blog slash new.

35
00:02:30,840 --> 00:02:32,070
Y tenemos dos problemas.

36
00:02:32,070 --> 00:02:34,550
El primero es un problema de espacio.

37
00:02:34,650 --> 00:02:37,540
Podemos arreglarlo con bastante facilidad, pero estamos obteniendo la plantilla correcta.

38
00:02:37,800 --> 00:02:43,980
Pero noté algo un poco raro, que es que nuestro icono volvió a ser pequeño en la página de inicio.

39
00:02:44,010 --> 00:02:47,170
Es grande en esta página, es pequeño.

40
00:02:47,370 --> 00:02:51,760
Y pasé un tiempo mirando esto como una especie de error de hierba.

41
00:02:51,840 --> 00:02:52,490
Me lo imaginé.

42
00:02:52,500 --> 00:02:57,540
Es realmente uno de esos frustrantes que surgen de vez en cuando, donde no

43
00:02:57,540 --> 00:03:01,990
es terriblemente obvio al principio, pero te explicaré brevemente lo que noté.

44
00:03:02,160 --> 00:03:04,320
Puedes verlo en la consola.

45
00:03:04,320 --> 00:03:11,740
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

46
00:03:11,740 --> 00:03:16,250
aplicación de hojas de estilo que C S S y que no está donde debería verse.

47
00:03:16,290 --> 00:03:23,130
Y entonces miré el enlace que configuramos en el archivo de encabezado y noté que olvidé una pequeña

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

49
00:03:25,080 --> 00:03:29,080
Entonces, si estás fresco ahora, verás que lo encuentra.

50
00:03:29,310 --> 00:03:31,680
Y no obtenemos un error aquí.

51
00:03:31,680 --> 00:03:38,640
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

52
00:03:38,640 --> 00:03:41,820
de que ahora se vea fuera de las hojas de estilo.

53
00:03:41,850 --> 00:03:44,990
Y ahora terminamos con ese ícono de código más grande en el no.

54
00:03:45,390 --> 00:03:51,900
A continuación, vamos a abordar el problema de que ahora se superponen al resto de nuestro contenido y, afortunadamente, solucionarlo es muy

55
00:03:51,990 --> 00:03:54,690
fácil ahora que tenemos configurada esa hoja de estilo.

56
00:03:54,900 --> 00:04:01,590
Todo lo que tenemos que hacer es agregar un margen a la parte superior de este elemento, que es el elemento contenedor.

57
00:04:02,250 --> 00:04:04,520
Todo lo que hacemos estará dentro de ese contenedor.

58
00:04:04,710 --> 00:04:14,430
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

59
00:04:14,430 --> 00:04:18,440
es margen arriba en lugar de estar en número de píxeles.

60
00:04:18,450 --> 00:04:23,280
Voy a usar E-M también para que lo veas más seguido.

61
00:04:23,280 --> 00:04:29,700
Realmente no lo hemos visto mucho y solo vemos que tenemos otro problema, que es que el contenedor que inspeccionamos

62
00:04:29,910 --> 00:04:32,640
también está dentro de la barra de navegación.

63
00:04:32,640 --> 00:04:34,640
Recuerde que tenemos un contenedor allí.

64
00:04:34,830 --> 00:04:40,440
contenedores que también son principales o contenedores que también son segmentos o algo más que solo contenedores generales.

65
00:04:40,440 --> 00:04:43,800
Por lo tanto, solo queremos apuntar a objetos que son

66
00:04:44,040 --> 00:04:46,060
Entonces esa es otra solución fácil.

67
00:04:46,170 --> 00:04:48,370
Volveremos y solo hazme.

68
00:04:48,390 --> 00:04:49,520
Entonces eso significa algo.

69
00:04:49,520 --> 00:04:55,070
Tenía ambas clases ahora que actualizamos y se ve mucho mejor.

70
00:04:55,100 --> 00:04:56,170
Entonces no nos metimos con eso.

71
00:04:56,210 --> 00:05:02,250
Los márgenes de este contenedor aquí dentro del Nav. el menú que acabamos de jugar con este aquí y ahora

72
00:05:02,270 --> 00:05:02,930
para el diseño.

73
00:05:02,930 --> 00:05:05,050
Ahora vamos a hacer que la forma funcione.

74
00:05:05,150 --> 00:05:16,700
Entonces, en lugar de nuestro nuevo papá sí, queremos formarnos y nuestro formulario es similar al que se usa para cortar registros que, si

75
00:05:18,020 --> 00:05:25,940
lo olvidamos, observamos nuestras rutas de descanso y puede ver cómo crear es flash para perros igual

76
00:05:25,940 --> 00:05:28,460
que el índice como enviar.

77
00:05:29,120 --> 00:05:37,760
Así que este formulario debe ir a los registros de barras donde el método se publica y luego dentro de un formulario

78
00:05:37,760 --> 00:05:45,170
que quiere unas pocas entradas; la primera simplemente tecleará texto igual y escribirá el texto cercano y le dará

79
00:05:45,170 --> 00:05:52,090
un nombre igual al título del blog y luego un marcador de posición que es igual al título.

80
00:05:52,850 --> 00:06:00,550
Y luego duplicaremos esa excepción en lugar de que el título lo haga por imagen.

81
00:06:01,350 --> 00:06:07,430
Y esto debería ser una revisión desde la sesión en las solicitudes de publicación de algunos

82
00:06:07,430 --> 00:06:10,750
videos para ir y luego haremos lo mismo para

83
00:06:13,340 --> 00:06:19,940
el contenido que llamamos cuerpo y simplemente ponlo como publicación de registro como marcador de posición.

84
00:06:19,940 --> 00:06:27,050
Está bien, así que tenemos eso hecho y luego necesitamos una forma de enviarlo para que haga que el

85
00:06:29,480 --> 00:06:35,680
tipo de entrada sea igual a enviar así y luego guardar y ver lo que obtenemos.

86
00:06:35,770 --> 00:06:38,230
Aquí está nuestra forma no muy estilizada.

87
00:06:38,300 --> 00:06:39,600
Pronto llegaremos a eso.

88
00:06:39,740 --> 00:06:46,550
Pero debería funcionar bien si enviamos deberíamos obtener un error que dice que no se puede publicar para recortar blogs.

89
00:06:47,060 --> 00:06:49,660
Eso es porque nuestra ruta de creación no existe.

90
00:06:50,150 --> 00:06:53,960
Así que hagámoslo ahora, cortando perros como una publicación.

91
00:06:54,110 --> 00:07:05,870
Entonces, en lugar de en realidad, sí, en el comentario de Crear ruta, haremos una publicación de aplicación, barra diagonal o Colback.

92
00:07:07,700 --> 00:07:13,160
Perfecto y aquí realmente necesitamos crear ese nuevo blog.

93
00:07:13,160 --> 00:07:22,710
Así que tenemos dos pasos para crear blog, luego ejecutamos una redirección y por el momento lo redirigiremos al índice.

94
00:07:23,780 --> 00:07:30,220
Entonces para crear el blog necesitamos crear un blog y lo primero son los datos.

95
00:07:30,230 --> 00:07:31,990
Entonces eso no funcionará todavía.

96
00:07:32,060 --> 00:07:34,140
Y lo segundo es la devolución de llamada.

97
00:07:34,580 --> 00:07:38,450
Entonces, nuestra devolución de llamada podemos comenzar, tenemos un error.

98
00:07:38,510 --> 00:07:47,360
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á

99
00:07:47,360 --> 00:07:54,200
dentro de la solicitud dot body dot y lo que sea que hayamos nombrado en nuestro formulario en

100
00:07:54,740 --> 00:07:55,600
nuestro formulario.

101
00:07:55,610 --> 00:07:58,890
Todo está dentro de un blog y un grupo y juntos.

102
00:07:58,940 --> 00:08:05,120
Entonces, si solo solicitamos el blog body dump, automáticamente tendrá una imagen y cuerpo del título.

103
00:08:05,120 --> 00:08:10,160
Le damos la solicitud de un golpe al cuerpo Agosto primer argumento que toma esa información crea un nuevo blog cuando

104
00:08:10,160 --> 00:08:10,530
está hecho.

105
00:08:10,530 --> 00:08:11,950
Causa esta devolución de llamada.

106
00:08:12,140 --> 00:08:14,760
Y hacemos nuestro estándar si hay un error.

107
00:08:15,030 --> 00:08:26,510
Hagamos un vamos a contar en lugar de contar el registro, rendericemos el nuevo formulario otra vez, haremos una redirección de

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

109
00:08:30,110 --> 00:08:35,870
para cortar registros y deberíamos ver el nuevo blog aparecer allí.

110
00:08:36,020 --> 00:08:43,410
Si funcionó, pasemos este comentario y veamos qué sucede si le damos una oportunidad.

111
00:08:43,520 --> 00:08:44,660
Así que ahorraremos

112
00:08:44,870 --> 00:08:52,540
copia de esta URL de imagen solo para que tengamos una imagen o título de la publicación del blog.

113
00:08:52,540 --> 00:08:57,460
Tenemos que reiniciar el servidor e ir hasta la raíz para hacer una

114
00:08:57,620 --> 00:09:00,230
Aquí está nuestra imagen en nuestra publicación de blog.

115
00:09:00,350 --> 00:09:03,740
Presentar y funciona perfecto.

116
00:09:03,800 --> 00:09:11,330
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

117
00:09:11,330 --> 00:09:12,020
se muestra.

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

119
00:09:13,010 --> 00:09:19,790
Entonces recapitular todo eso en rutas nuevas y crear nuevas es barra cualquiera sea el nombre del modelo.

120
00:09:19,790 --> 00:09:24,910
Los perros en nuestro caso son blogs slash y recibes solicitudes.

121
00:09:24,920 --> 00:09:32,580
Muestra que la forma de crear es flash dogs al igual que el índice, excepto que es una solicitud posterior.

122
00:09:32,600 --> 00:09:35,350
Y ahí es donde el nuevo formulario envía datos.

123
00:09:35,430 --> 00:09:39,080
Para agregar a la base de datos, crea un nuevo perro y luego redirecciona.

124
00:09:39,080 --> 00:09:43,820
No tiene que ser el índice la mayoría de las veces para mostrar la página que verá en

125
00:09:43,820 --> 00:09:44,660
el siguiente video.

126
00:09:45,140 --> 00:09:47,550
Vamos a estilizar rápidamente nuestra aplicación.

127
00:09:47,580 --> 00:09:49,820
Hagamos la forma.

128
00:09:50,570 --> 00:10:02,000
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.

129
00:10:02,000 --> 00:10:10,070
Entonces, para usar lo semántico, lo primero que haremos es dar a nuestra forma una clase igual a la

130
00:10:10,550 --> 00:10:13,330
Y luego mira cómo etiquetar en el que aún no tenemos.

131
00:10:13,730 --> 00:10:19,860
Y la primera etiqueta será título y luego tomaremos nuestro título y lo pondremos allí.

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

133
00:10:21,470 --> 00:10:24,630
Y luego haremos esto unas cuantas veces más.

134
00:10:24,770 --> 00:10:32,120
Necesitamos uno de estos para cambiar la imagen de la etiqueta decir imagen y luego un cambio que quiero

135
00:10:34,840 --> 00:10:42,770
hacer es que en lugar de tener nuestro blog como entrada, quiero convertirlo en un área de texto donde un usuario

136
00:10:42,770 --> 00:10:47,470
pueda escribir un poco más de texto como una publicación de blog real.

137
00:10:48,050 --> 00:10:54,920
Y para arreglar eso, en lugar de hacer de esto una entrada, vamos a tener un div Chrisfield en la

138
00:10:54,920 --> 00:11:03,140
etiqueta y lo llamaremos contenido de blog, pero en lugar de esta entrada vamos a agregar una etiqueta de área de texto que vimos

139
00:11:03,140 --> 00:11:06,560
desde el principio, pero realmente no hemos usado mucho.

140
00:11:06,830 --> 00:11:10,280
Y es un poco diferente a las entradas, aún le damos un nombre.

141
00:11:10,400 --> 00:11:19,280
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

142
00:11:19,280 --> 00:11:24,590
designada que tiene una etiqueta de apertura y cierre y también se comporta de manera un poco diferente.

143
00:11:24,830 --> 00:11:26,130
Cuando tenemos que agregarlo.

144
00:11:26,270 --> 00:11:30,650
Así que veremos eso en un momento para deshacernos de eso y luego le daremos estilo a nuestro botón.

145
00:11:30,650 --> 00:11:32,540
Echemos un vistazo a lo que tenemos ahora.

146
00:11:32,740 --> 00:11:36,610
Se ve bastante bien, excepto que el botón podría ser un poco más agradable.

147
00:11:36,790 --> 00:11:43,670
Y si detengo la interfaz de usuario semántica y voy al botón, hay más botones en semántica que en Bootstrap.

148
00:11:43,910 --> 00:11:51,780
Tan diferentes tipos pero también muchos botones básicos de colores y luego botones invertidos también.

149
00:11:52,310 --> 00:12:00,680
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

150
00:12:00,680 --> 00:12:04,890
al código fuente, todo lo que necesitas es una clase igual a ti.

151
00:12:05,250 --> 00:12:07,950
El botón básico de color.

152
00:12:08,480 --> 00:12:12,780
Y mientras hago esto, explicaré por qué se llama UI semántica.

153
00:12:12,920 --> 00:12:21,910
Y la razón principal es que a diferencia de bootstrap donde tenemos este tipo de jerga extraña, ETN ETN dash

154
00:12:21,910 --> 00:12:28,880
LGBT y dash por defecto, por ejemplo, aborrezco que bootstrap realmente no lo detenga, pero

155
00:12:28,880 --> 00:12:40,470
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

156
00:12:41,150 --> 00:12:44,590
o puedo hacer el botón IU violeta invertido.

157
00:12:45,050 --> 00:12:46,820
Tan básico por ahora está bien.

158
00:12:47,060 --> 00:12:48,050
Y eso es todo lo que se necesita.

159
00:12:48,050 --> 00:12:49,630
Muy simple.

160
00:12:49,760 --> 00:12:51,530
No es que sean menos personajes.

161
00:12:51,560 --> 00:12:52,840
No se trata de ser más bajo.

162
00:12:53,030 --> 00:12:58,340
Se trata de ser significativo en donde puedes ver esto fácilmente y entender lo que significa.

163
00:12:58,340 --> 00:13:01,420
Entonces, si volvemos ahora y actualizamos

164
00:13:01,690 --> 00:13:06,900
Tengo ese botón y si quiero agrandarlo es realmente fácil.

165
00:13:06,930 --> 00:13:09,050
Todo lo que tengo que hacer es escribir a lo grande.

166
00:13:09,050 --> 00:13:16,910
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.

167
00:13:16,910 --> 00:13:18,740
Así que probémoslo de nuevo.

168
00:13:18,740 --> 00:13:26,770
Quiero decir que utilizo el mismo argumento audaz, vamos a llamar a este mi nuevo perro.

169
00:13:27,980 --> 00:13:32,350
Más blog Contac submit y funciona bien.

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

171
00:13:33,110 --> 00:13:38,240
De acuerdo, tenemos un índice cubierto que hemos cubierto Nuevo y crear, y te mostré un poco de semántica. Es

172
00:13:38,240 --> 00:13:41,480
posible que obtengas los formularios y los botones en el siguiente video.

173
00:13:41,510 --> 00:13:42,650
Trabajaremos en la página del programa