Vistas en Laravel: blade

icon picker
Vistas

Las vistas
En una aplicación real, rara vez devolverá la respuesta directamente de una ruta, al menos pasará por una vista. En su versión más simple, una vista es un archivo simple con código HTML:
<!DOCKTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera Vista</title>
</head>
<body>
Soy una Vista !
</body>
</html>
Debe guardar esta vista (elegí el nombre "vue1") en la carpeta de resources/views con la extensión php:
image33.png
Incluso si coloca solo código HTML en una vista, debe guardarlo con la extensión php.
Esta vista se puede llamar desde una ruta con este código:
Route::get('/', function() {
return view('vue1');
});
image34.png
Para que esto funcione, comente o elimine la ruta básica de la instalación.
Aquí hay una ilustración del proceso:
image.jpeg failed to upload
Vista parametrizada
En general, tenemos información para transmitir a una vista, veamos cómo ponerla en su lugar. Supongamos que queremos responder a este tipo de consulta:
image35.png
El parámetro n puede tomar un valor numérico. Veamos cómo se compone esta url:
image45.png
la base de la url es constante para el sitio, sea cual sea la solicitud,
la parte fija aquí corresponde a los artículos,
la parte variable corresponde al número del artículo deseado (el parámetro).
Route
Necesitamos un camino para interceptar estas URL:
image37.png
La variable se pasa a la vista con el método with.
Vista
Todo lo que tenemos que hacer es crear la vista article.php en los resources/views :
image42.png
Para recuperar el número del artículo usamos la variable $ numero.
Aquí hay una esquematización de la operación:
http://laravel.sillo.org/wp-content/uploads/2017/09/Capture-39.png
Hay un método "mágico" para transmitir un parámetro, por ejemplo, para transmitir la variable numero como hice anteriormente, uno puede escribir el código de la siguiente manera:
image39.png
Simplemente concatene el nombre de la variable con la palabra clave with .
También puede enviar una tabla como parámetro:
image40.png

Blade

Laravel tiene un elegante motor de plantillas llamado Blade que nos permite hacer muchas cosas. El primero es simplificar la sintaxis. Por ejemplo, en lugar de la siguiente línea que hemos planeado en la vista anterior:
image41.png
Esta sintaxis se puede usar con Blade:
image43.png
Todo entre llaves dobles se interpreta como código PHP. Pero para que esto funcione, tenemos que decirle a Laravel que queremos usar Blade para esta vista. Se realiza simplemente modificando el nombre del archivo:
https://laravel.sillo.org/wp-content/uploads/2019/08/Capture-39.png
Simplemente agregue "blade" antes de la extensión "php". Puede probar el ejemplo anterior con estos cambios y verá que todo funciona perfectamente con una sintaxis limpia.
También existe la versión con la sintaxis {!! ... !!}. La diferencia entre las dos versiones es que el texto entre llaves dobles se escapa (utilizamos htmlspecialchars internamente para evitar ataques XSS). Así que ten cuidado si usas la sintaxis {!! ... !!}!
Una plantilla
Una función fundamental de Blade es permitir la creación de plantillas, es decir, factorizar el código de presentación. Continuemos nuestro ejemplo completando nuestra solicitud con otra ruta responsable de interceptar las URL de las facturas. Aquí está la ruta:
image46.png
Y aquí está la vista:
image49.png
Nos damos cuenta de que esta vista es prácticamente la misma que la de los artículos. Sería interesante poner el código común en un archivo.
Precisamente el propósito de una plantilla es realizar esta operación.
Aquí está la plantilla:
image47.png
Tomé el código común y proporcioné dos ubicaciones identificadas por la palabra clave @yield y las llamé "título" y "contenido". Todo lo que tienes que hacer es cambiar las dos vistas. Esto en cuanto a los artículos:
image51.png
Y aquí están las facturas:
image53.png
Al principio decimos que queremos usar la plantilla con @extends y el nombre de plantilla "template". Luego completamos las áreas provistas en la plantilla con la sintaxis @section especificando el nombre de la ubicación y cerrando con @endsection. Aquí hay un diagrama para visualizar todo esto con los artículos:
image60.png
En el nivel del archivo de las vistas, tenemos los tres archivos:
https://laravel.sillo.org/wp-content/uploads/2019/08/Capture-40.png
Redirecciones
A menudo no es necesario enviar la respuesta directamente sino redirigir a otra url. Para lograr esto tenemos el ayudante de redireccionamiento:
image50.png
Aquí redirigimos a la url http://monsite/facture.
También puede redirigir en una ruta con nombre. Por ejemplo tienes esta ruta:
image55.png
Esta ruta se llama acción y corresponde a la url http://monsite/users/action. Simplemente podemos redirigir en esta ruta con esta sintaxis:
image52.png
Si la ruta tiene un parámetro (o varios), también se le puede asignar un valor. Por ejemplo con esta ruta:
image57.png
Podemos redirigir así informando el parámetro:
image56.png
A veces, solo queremos volver a cargar la misma página, por ejemplo, al enviar un formulario con errores en la validación de datos, luego simplemente:
image54.png
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.