Plantilla Blade

Plantillas Blade, Clases de BootStrap enrutamiento con
Laravel 5.4
Objetivos
 Crear una plantilla para el sitio web
 Diseñar un sitio web estático utilizando plantillas blade
 Escribir rutas para llamar las vistas de nuestro sitio web
 Explicar la implementación de plantillas en las vistas

Conocimientos previos
 Saber Manejar marcas HTML
 Conocimientos de BootsTrap
 Conocer el lenguaje de php para poder realizar el proyecto

Requisitos para el funcionamiento
 Tener un editor como Visual Studio Code o Sublime text
cual sea su preferencia
 El programa Xampp debe estar instalado
 Crear una plantilla HTML
 Tener un proyecto creado de Laravel en nuestro Disco
Local
 Instalación de php correctamente.

Descripción de Plantillas de Blade Clases de CSS
BootsTrap
Laravel 5.4 utiliza a Blade para definir las plantillas en las vistas.
Esta Librería permite realizar todo tipo de operaciones con

datos, en la sustitución de secciones de plantillas por contenido
entre planillas.
BootsTrap el farmework más popular de los códigos abiertos es
utilizado para diseñar sitios web a diferentes dispositivos.
Pasos a Seguir Para la Realización del nuestro Proyecto
1. Tener un sitio web estático para trabajar o una
plantilla ya descargada y editada.

2. Copiar las siguientes carpetas (css, fonts, img, js) de la
documentación BootsTrap a la carpeta de nuestro
proyecto Laravel dentro de la carpeta public.
3. Una vez teniendo los archivos copiados ya está listo
para abrir nuestro proyecto de Laravel en nuestro
editor Visual Studio Code o Sublime Text.
4. Una vez abierto nuestro proyecto vamos abrir la
carpeta resources/Views crear la carpeta layouts y
dentro de esta crear un archivo llamado
madre.blade.php. Es muy necesario que el nombre de
nuestro archivo lleve la referencia .blade.php de lo
contrario no será reconocido como plantilla blade.
5. Una vez tengamos listos los cambios realizados
correctamente de nuestro proyecto empezaremos
copiando las marcas HTML dentro del archivo
madre.blade.php

En el estilo de “madre.blade.php” le da poder a los
demás archivos creados para el sitio web. En la
plantilla dividimos el header, section y un footer.
En el header estará el carrusel y en la parte inferior el
menú en el cual están los archivos creados que son las

otras páginas. En el section encontramos lo que es el
aside con un ancho de 4 columnas en la derecha de
nuestra página en la parte izquierda encontraremos 8
columnas también en el section se encuentra el titulo
del articulo después en el carrusel podemos poner
imágenes o banner. El footer es el pie de la página
donde se identifica el diseñador web.

Esta es nuestra planilla

Iniciaremos con el heredar el estilo a los archivos para
eso utilizaremos el método
“@yield(‘nombre_seccion’)”. Con esto estamos
inyectando la información que deseamos mostrar en
el lugar que queremos.

Con este método también extraemos información del
título, dato y contenido asi mismo dejamos de utilizar
el archivo madre ya que la utilizamos para tener
nuestro estilo. En esto utilizaremos el método
“@extends” en el resto de los archivos creados que
heredan al archivo madre.

Y empezados creando el primer archivo lo cual lo
llamaremos “archivo1.php.blade”.

Para que la pagina contenga el estilo del archivo
madre le damos uso al método @extends(“”)

Una vez apliquemos el método en las comillas
ponemos el nombre del archivo en este caso nuestro
archivo se “madre” el nombre es opcional ya sea cual
de su preferencia, para ver si esta bueno si hemos
obtenido el estilo en la planilla madre del nuevo
archivo que creamos el cual lo llame “archivo1” . Para
poder agregar nos dirigimos al directorio
routes/web.php estando ahí añadimos la ruta.

Para añadir la ruta al “archivo1” copiamos el código
que dos da el archivo web.php que les indicaremos.
Se debe tener en cuenta que en la ruta se agrega el

método name al final del paréntesis antes del punto y
coma de la siguiente manera

->name('doloresmenstruales');

Por este nombre se le hace el llamado al archivo de
“dolores menstruales” en la función llamada router.

Con este avance abrimos el navegador de nuestra
preferencia en nuestro caso es Google Chrome e
ingresados la siguiente dirección
http://localhost/mi_primer_proyeccto_laravel/public
/archivo1 Sugerencia: Tener activo el servidor
Apache y Mysql de Xampp muy importante tenerlos
activo. Con esto podemos ingresar al nuestro local
que es localhost / nombres del proyecto / public /
nombre del archivo en mi caso será archivo1
Ingresaremos otro método para esto llamado
“@section (‘nombre_area’)

Conclusión

Aprendimos a implementar plantillas de blade ya que
ese era nuestro objetivo como lo marcamos arriba

Bibliografía

https://styde.net/blade-el-sistema-de-plantillas-de-
laravel/

http://www.cristalab.com/tutoriales/blade-el-
sistema-de-plantillas-de-laravel-c111587l/

http://mialtoweb.es/plantillas-blade-en-laravel/