WEBVTT

00:00:01.016 --> 00:00:05.136 align:middle
La página de inicio será el lugar
donde el usuario podrá diseñar

00:00:05.136 --> 00:00:07.906 align:middle
y crear su próxima cinta de mezclas.

00:00:08.256 --> 00:00:12.396 align:middle
Pero además de crear nuevas cintas,
los usuarios también podrán

00:00:12.396 --> 00:00:14.886 align:middle
examinar las creaciones de otras personas.

00:00:15.616 --> 00:00:17.726 align:middle
Hagamos una segunda página para eso.

00:00:18.676 --> 00:00:23.006 align:middle
¿Cómo? Añadiendo un segundo
controlador: función pública,

00:00:23.226 --> 00:00:27.186 align:middle
qué tal browse: el nombre
no importa realmente.

00:00:28.076 --> 00:00:32.356 align:middle
Y para ser responsable, añadiré
un tipo de retorno Response.

00:00:33.776 --> 00:00:35.806 align:middle
Por encima de esto, necesitamos nuestra ruta.

00:00:36.476 --> 00:00:41.486 align:middle
Ésta será exactamente igual, salvo
que pondremos la URL en /browse.

00:00:42.566 --> 00:00:46.446 align:middle
Dentro del método, ¿qué es lo que
siempre devolvemos de un controlador?

00:00:46.796 --> 00:00:49.566 align:middle
Así es: ¡un objeto Response!

00:00:50.506 --> 00:00:51.976 align:middle
Devuelve un nuevo Response...

00:00:52.426 --> 00:00:54.466 align:middle
con un mensaje corto para empezar.

00:00:58.256 --> 00:00:59.176 align:middle
¡Vamos a probarlo!

00:01:00.536 --> 00:01:03.386 align:middle
Si actualizamos la página
de inicio, no cambia nada.

00:01:03.886 --> 00:01:06.016 align:middle
Pero si vamos a /browse...

00:01:06.576 --> 00:01:08.086 align:middle
¡lo machacamos!

00:01:08.406 --> 00:01:10.716 align:middle
¡Una segunda página en menos de un minuto!

00:01:11.516 --> 00:01:16.136 align:middle
¡Caramba! En esta página, acabaremos listando
las cintas de mezclas de otros usuarios.

00:01:16.806 --> 00:01:22.836 align:middle
Para ayudar a encontrar algo que nos guste, quiero que
los usuarios también puedan buscar por género. Por

00:01:23.696 --> 00:01:27.656 align:middle
ejemplo, si voy a /browse/death-metal,

00:01:27.926 --> 00:01:31.256 align:middle
eso me mostraría todas las
cintas de vinilo de death metal.

00:01:31.796 --> 00:01:36.456 align:middle
Hardcore. Por supuesto, si
probamos esta URL ahora mismo...

00:01:36.856 --> 00:01:38.106 align:middle
no funciona.

00:01:38.296 --> 00:01:45.786 align:middle
No se ha encontrado ninguna ruta que coincida con esta
URL, por lo que nos muestra una página 404. Por cierto

00:01:46.386 --> 00:01:50.726 align:middle
, lo que estás viendo es la elegante
página de excepciones de Symfony,

00:01:50.856 --> 00:01:52.996 align:middle
porque estamos desarrollando.

00:01:53.676 --> 00:01:57.086 align:middle
Nos da muchos detalles cuando algo va mal.

00:01:57.676 --> 00:01:59.856 align:middle
Cuando finalmente despliegues a producción,

00:02:00.086 --> 00:02:04.106 align:middle
puedes diseñar una página de error
diferente que verían tus usuarios.

00:02:04.936 --> 00:02:09.266 align:middle
De todos modos, la forma más sencilla de
hacer que esta URL funcione es simplemente...

00:02:09.266 --> 00:02:13.276 align:middle
cambiar la URL a /browse/death-metal.

00:02:13.806 --> 00:02:16.776 align:middle
Pero... no es súper flexible, ¿verdad?

00:02:17.316 --> 00:02:20.456 align:middle
Necesitaríamos una ruta para cada género...

00:02:20.616 --> 00:02:22.446 align:middle
¡que podrían ser cientos!

00:02:22.966 --> 00:02:26.356 align:middle
Y además, ¡acabamos de matar la URL /browse!

00:02:26.796 --> 00:02:28.046 align:middle
Ahora es 404.

00:02:29.066 --> 00:02:34.206 align:middle
Lo que realmente queremos es una ruta que
coincida con /browse/<ANYTHING>.

00:02:34.606 --> 00:02:37.446 align:middle
Y podemos hacerlo con un comodín.

00:02:38.036 --> 00:02:45.096 align:middle
Sustituye el código duro
death-metal por {} y, dentro, slug.

00:02:46.086 --> 00:02:50.526 align:middle
Slug es sólo una palabra técnica para
designar un "nombre seguro para la URL".

00:02:50.986 --> 00:02:56.106 align:middle
En realidad, podríamos haber puesto cualquier
cosa dentro de las llaves, como {genre}

00:02:56.396 --> 00:03:01.046 align:middle
o {coolMusicCategory}: no
hay ninguna diferencia.

00:03:01.676 --> 00:03:06.536 align:middle
Pero sea lo que sea que pongamos
dentro de este comodín, se nos permite

00:03:06.536 --> 00:03:10.436 align:middle
tener un argumento con ese mismo nombre: $slug.

00:03:11.386 --> 00:03:16.526 align:middle
Sí, si vamos a /browse/death-metal,
coincidirá con esta ruta

00:03:16.526 --> 00:03:20.046 align:middle
y pasará la cadena
death-metal a ese argumento.

00:03:20.546 --> 00:03:26.106 align:middle
La coincidencia se hace por
nombre: {slug} conecta con $slug.

00:03:27.296 --> 00:03:32.676 align:middle
Para ver si funciona, devolvamos una
respuesta diferente: Genre y luego la $slug.

00:03:34.306 --> 00:03:35.296 align:middle
¡Hora de probar!

00:03:35.616 --> 00:03:40.106 align:middle
Vuelve a /browse/death-metal y...

00:03:40.406 --> 00:03:45.936 align:middle
¡sí! Prueba con /browse/emo y ¡ sí!

00:03:46.656 --> 00:03:50.656 align:middle
¡Estoy mucho más cerca de mi cinta
de mezcla de Dashboard Confessional!

00:03:51.296 --> 00:03:55.736 align:middle
Ah, y es opcional, pero puedes añadir
un tipo string al argumento $slug.

00:03:56.126 --> 00:03:57.816 align:middle
Eso no cambia nada...

00:03:57.816 --> 00:04:03.616 align:middle
sólo es una forma de programar: el
$slug ya iba a ser siempre una cadena.

00:04:04.436 --> 00:04:08.446 align:middle
Un poco más adelante, aprenderemos cómo
puedes convertir un comodín numérico

00:04:08.756 --> 00:04:13.846 align:middle
-como el número 5- en un
número entero si así lo deseas.

00:04:13.906 --> 00:04:15.766 align:middle
Hagamos esta página un poco más elegante.

00:04:16.396 --> 00:04:20.146 align:middle
En lugar de imprimir el slug exactamente,
vamos a convertirlo en un título.

00:04:20.746 --> 00:04:26.376 align:middle
Digamos $title = str_replace() y
sustituyamos los guiones por espacios.

00:04:29.706 --> 00:04:32.746 align:middle
Luego, aquí abajo, utiliza
el título en la respuesta.

00:04:33.486 --> 00:04:39.866 align:middle
En un futuro tutorial, vamos a consultar la base
de datos para estos géneros, pero, por ahora,

00:04:39.956 --> 00:04:42.046 align:middle
al menos podemos hacer que
tenga un aspecto más agradable.

00:04:42.756 --> 00:04:45.916 align:middle
Si lo probamos, el Emo no se ve diferente...

00:04:47.306 --> 00:04:49.346 align:middle
pero el death metal sí.

00:04:49.716 --> 00:04:51.796 align:middle
¡Pero quiero que sea más elegante!

00:04:52.556 --> 00:04:56.616 align:middle
Añade otra línea con
$title = y luego escribe u

00:04:56.706 --> 00:05:00.076 align:middle
y autocompleta una función
que se llama literalmente...

00:05:00.306 --> 00:05:06.476 align:middle
u. No utilizamos muchas funciones de
Symfony, pero éste es un ejemplo raro.

00:05:07.266 --> 00:05:11.786 align:middle
Proviene de una biblioteca de
Symfony llamada symfony/string.

00:05:12.566 --> 00:05:18.486 align:middle
Como he mencionado, Symfony tiene muchas bibliotecas
diferentes -también llamadas componentes-

00:05:18.746 --> 00:05:22.166 align:middle
y vamos a aprovechar esas
bibliotecas todo el tiempo.

00:05:23.016 --> 00:05:25.766 align:middle
Esta te ayuda a hacer
transformaciones de cadenas...

00:05:26.236 --> 00:05:29.116 align:middle
y resulta que ya está instalada.

00:05:29.806 --> 00:05:32.906 align:middle
Mueve el str_replace() al
primer argumento de u().

00:05:34.176 --> 00:05:39.876 align:middle
Esta función devuelve un objeto sobre el
que podemos hacer operaciones de cadena.

00:05:40.746 --> 00:05:42.206 align:middle
Uno de los métodos se llama title().

00:05:42.616 --> 00:05:47.146 align:middle
Digamos ->title(true) para convertir todas
las palabras en mayúsculas y minúsculas.

00:05:48.136 --> 00:05:49.276 align:middle
Ahora, cuando lo probamos...

00:05:50.456 --> 00:05:53.146 align:middle
¡qué bien! ¡Pone las letras en mayúsculas !

00:05:54.106 --> 00:05:57.526 align:middle
El componente de la cadena no es especialmente

00:05:57.646 --> 00:06:02.826 align:middle
importante, sólo quiero que veas cómo podemos
aprovechar partes de Symfony para hacer nuestro trabajo.

00:06:03.906 --> 00:06:05.636 align:middle
Vale: un último

00:06:05.866 --> 00:06:11.436 align:middle
reto. Ir a /browse/emo o /browse/death-metal

00:06:12.096 --> 00:06:14.256 align:middle
funciona. Pero ir a

00:06:14.456 --> 00:06:16.096 align:middle
/browse... no

00:06:16.256 --> 00:06:17.116 align:middle
funciona. ¡ Está

00:06:17.576 --> 00:06:23.986 align:middle
roto! Un comodín puede coincidir con cualquier
cosa, pero, por defecto, se requiere un comodín.

00:06:24.376 --> 00:06:28.226 align:middle
Tenemos que ir a

00:06:28.746 --> 00:06:30.886 align:middle
/browse/<something>.
¿Podemos hacer que el comodín

00:06:31.496 --> 00:06:32.506 align:middle
sea opcional?

00:06:32.876 --> 00:06:38.176 align:middle
Por supuesto Y es deliciosamente sencillo:
haz que el argumento correspondiente sea

00:06:39.076 --> 00:06:42.176 align:middle
opcional. En cuanto lo hagamos, le dirá
a la capa de enrutamiento de Symfony

00:06:42.246 --> 00:06:45.756 align:middle
que no es necesario que el {slug} esté en la

00:06:46.076 --> 00:06:47.646 align:middle
URL. Así que ahora cuando

00:06:48.116 --> 00:06:52.716 align:middle
refrescamos... funciona. Aunque
no es un buen mensaje para la

00:06:53.676 --> 00:06:54.346 align:middle
página.

00:06:54.716 --> 00:06:58.366 align:middle
Veamos. Si hay un slug, pon el título como

00:06:59.276 --> 00:07:02.236 align:middle
estábamos. Si no, pon
$title a "Todos los géneros

00:07:03.576 --> 00:07:06.626 align:middle
". Ah, y mueve el "Género:"

00:07:07.156 --> 00:07:10.446 align:middle
aquí arriba... para que abajo en el
Response podamos pasar simplemente

00:07:13.176 --> 00:07:15.226 align:middle
$title. Intentalo. En /browse ... 

00:07:16.276 --> 00:07:17.236 align:middle
"Todos los géneros".

00:07:17.916 --> 00:07:19.496 align:middle
En /browse/emo...

00:07:19.806 --> 00:07:21.076 align:middle
"Género: Emo".

00:07:22.156 --> 00:07:25.366 align:middle
Siguiente: poner
un texto como éste en un

00:07:25.806 --> 00:07:31.086 align:middle
controlador.... no es muy limpio ni escalable,
especialmente si empezamos a incluir

00:07:32.096 --> 00:07:34.686 align:middle
HTML. No, tenemos que representar una

00:07:35.146 --> 00:07:39.976 align:middle
plantilla. Para ello, vamos a instalar
nuestro primer paquete de terceros

00:07:40.186 --> 00:07:45.136 align:middle
y seremos testigos del importantísimo
sistema de recetas de Symfony en acción