Motor de plantillas blade en nuestra página web.

Plantillas Blade: 

El framework laravel tiene incorporado un sistema de plantillas muy

funcional para que podamos trabajar mejor generando nuestras vistas  siempre con lenguaje php. 

Blade es como por decirlo así un generador o motor de plantillas que nos permite la función de manera automática  que nuestras plantillas madre o base se hereden en otras plantillas osea que adaptan el mismo diseño en sus vistas.

Todos los archivos de vista de Blade tienen que tener por necesidad la siguiente extensión:  blade.php si  por alguna razón se nos olvidara poner esta extensión estos archivos no funcionaran.Las vistas en Laravel son la parte pública que el usuario de nuestro sistema va a poder ver, se escriben en HTML junto con un motor de plantillas llamado Blade. Blade soluciona el famoso código espagueti.Por otra parte la acción @yield('nombre del titulo') esta sentencia lo que hace nos permite declarar un futuro section de nuestro HTML que se definirá en las vistas que son heredadas. Blade es un motor de plantillas potente que nos permite modularizar y estilizar a un gran nivel nuestro HTML. @extends('nombre del archivo madre'): Esta sentencia nos ayuda a decirle a una vista cual va a ser el la sentencia blade que se va a usar o a heredar.En blade se inyecta código php haciendo usos de llaves {{}}.

Clases CSS de BootStrap:

BootStrap es como un libro digital que contiene un conjunto de códigos, clases 

y herramientas de código libre o abierto para que nosotros los podamos implementar a nuestras páginas o aplicaciones web. 

Así de esta manera será más sencillo darle un buen diseño y estilo a todos nuestros sitios web. Es importante destacar que bootstrap solo contiene elementos y clases basados en lenguaje HTML y CSS y  poco de JavaScript.

Bueno en si las clases CSS de bootstrap, son hojas de estilo que nos permiten adaptarle un estilo a nuestras etiquetas HTML.

LINK DE COMO PODER INSTALAR XAMPP, COMPOSER Y LARAVEL EN WINDOWS:

https://www.youtube.com/watch?v=JLtTduONC9M&t=4s 

Pasos a seguir:

Recordatorio: Una vez instalado composer junto a laravel  y xampp deberás tener tu plantilla HTML o descargarla de la web y seguir  a continuación ok :  

Como paso #1 tendremos que tener nuestra plantilla HTML descargada. Luego esa plantilla con imágenes,css etc. La moveremos o hacemos copia de la misma y la vamos a pegar dentro de nuestro proyecto laravel.

Dentro de nuestro disco local (C) en nuestra carpeta xampp seguido de la sub-carpeta htdocs lo movemos en nuestro proyecto laravel que en mi caso se llama blog dentro de la carpeta public. Justo como lo puedes observar en la imagen señalado con rojo.

Paso#2: Luego abrir en nuestro entorno gráfico visual studio code nuestro proyecto laravel dando clic en la parte superior izquierda donde dice File luego seleccionar open folder y seleccionaremos la carpeta donde se guardo nuestro proyecto laravel junto a nuestra plantilla HTML.

Paso #3: Una vez abierto nuestro proyecto, nos dirigimos a la carpeta resources > luego a la sub-carpeta views y crearemos un nuevo elemento llamado inicio.blade.php (el primer nombre a tu preferencia con tal sepas que ese es el archivo madre).Siempre al crear un archivo que estaremos utilizando el motor de plantillas blade tiene que llevar por ende la sentencia .blade.php de lo contrario no sera reconocido como archivo de uso para las plantillas blade y no funcionara.

Paso #4: Pegar las marcas HTML de la plantilla que ya tenemos a inicio.blade.php (el primer nombre a tu preferencia con tal sepas que ese es el archivo madre) ya que esta es la que heredera los contenidos a los hijos.

Paso #5: Si tu quieres puedes marcar con comentarios las marcas semánticas de tu plantilla HTML para no perderte al momento de hacer uso de la plantilla blade.

Paso #6: Lo que se muestra en imagen a continuación es el estilo que le vamos a heredar a los hijos de inicio.blade.php. Puesto a esto solo estaremos cambiando contenido que se encuentra dentro del article (marca semántica) y lo importante que son las rutas al momento de direccionarnos a otras pestañas dentro de la página.

A si se mostrara el archivo madre llamándolo desde localhost/nombre_del_proyecto/public/inicio (nombre a tu preferencia con tal sepas que ese es el archivo madre) :

Paso #7: Comenzaremos a utilizar las sentencias blade para heredar a hijo y poder inyectar o extraer toda la información con la siguiente sentencia. La primera a utilizar sera @yield('título'), @yield('contenido') y otro contenido a tu preferencia dependiendo de tu plantilla HTML. En mi caso estaré cambiando título y contenido por ahora, y lo mismo se hace con los demás como primera ley,segunda y tercera ley de la robótica  lo puedes observar en la imagen de abajo, donde dice subtitulo1 es almacenado lo que dice como texto primera ley ahora dentro de el @yield justo donde dice primera ley allí se almacena el contenido que se va mostrar.

Paso #8: Crearemos el nuevo archivo dentro siempre de la carpeta view, ya que esta podrá heredar todo el contenido que se marca con @yield('titulo') entonces le pondremos el nombre iniciohijo.blade.php y haremos uso de otra sentencia del motor de plantillas blade llamado @extends("inicio") para que esa página pueda heredar el estilo lo de plantilla madre señalado en rojo a la izquierda, ojo que acá se utiliza las dobles comillas a diferencia de @yield con comillas simples.

Y para llamar la información desde hijo que esta inyectada dentro de @yield('contenido') en madre utilizaremos la otra sentencia llamada @section("") para copear y llamar ese texto guardado y se finaliza con @endsection.

Paso #9: Podemos verificar si hemos podido heredar el estilo de la madre en este caso inicio.blade.php y es aquí donde la carpeta routes se juega también unos de los papeles importantes que es darle la ruta del nuevo archivo que hemos creado osea iniciohijo.blade.php para que pueda heredar a hijo entonces abrimos dentro de routes la sub-carpeta web.php para darle una ruta a hijo y pueda heredar de madre.

Copiamos el código que trae por defecto web.php, colocamos lo que se ve en pantalla basta con poner iniciohijo ya que esta sabe que tiene sentencia blade.php , es importante ponerle nombre antes de el punto y coma a la ruta en mi caso se llama hijos pero para poder saber que la ruta va a funcionar y herede a hijo podemos ejecutar y verla desde la terminal haciendo clic en new terminal luego escribir con el comando señalado en azul en la imagen de arriba  y ver que el nombre de la ruta este allí, luego procederemos a abrir nuestra página desde nuestro navegador para verificar que si se heredo de madre a hijo.

Paso #10: Procedemos a ver en nuestro navegador ahora, pero antes tenemos que tener activado Apache desde nuestro servidor localhost  de xampp. Recuerda que para que funcione laravel junto con nuestro proyecto llamado blog tiene como requisito xampp pero también hay que tener en cuanta que para llamarlo desde nuestro navegador es así localhost/nombre de tu proyecto/public/iniciohijo ya que queremos ver el archivo hijo donde se hereda todo de madre  y podremos ver que si funciono ya que se muestra el titulo y el contenido que esta señalado en rojo en la imagen.

Paso #11: Si quieres agregar más páginas a tu sitio web solo creas el nuevo archivo y en este con el método @extends("inicio") heredas el estilo de la plantilla madre y luego le copeas el contenido mediante el método @section('titulo').

Y ahora como último paso y no menos importante como dije en el paso número seis  lo importante que son las rutas al momento de direccionarnos a otras pestañas dentro de la barra de navegación mediante php, de la página web creare un nuevo archivo hijo siempre en la carpeta views para que me lleve a  ¿Que es un robot ? dentro del nav haciendo uso de llaves y una sentencia llamada route  {{route('queesrobotp')}} <<< se pondrá dentro de madre.  

 No olvidar que hay que darle un nombre de ruta en mi caso se llamara queesrobotp.

Podremos observar que si funciono: Y a si hemos culminado llevando una pequeña base acerca de como poder utilizar el motor de plantillas blade. Si tienes alguna pregunta no dudes en preguntar en los comentarios.