Laravel:Creación de Vistas con Blade II

En esta segunda entrada hablaremos con un poco mas de detalle de las plantillas en Blade.

Laravel utiliza archivos llamados plantillas o template, los cuales contienen código que se repite en mas de una vista (menú, footer etc). Por defecto Laravel contiene app.blade.php

También están los partials, son segmentos pequeños de código, usados en partes especificas  como los formularios. La diferencia con los template es que son código pequeño que se repite pero que no es tan grande para llamarse template.

Template

Podemos crear mas de un template en nuestro proyecto, nuestro template principal (encabezado y footer) la cual es conocida como pagina maestra.

En el ejemplo la pagina maestra solo contiene el menú y footer.Para crear nuestra vista usamos como normalmente HTML.

Sin embargo hay algunas consideramos que debemos de tomar en cuenta.

1.Adjuntar CSS

HTML    <link rel="stylesheet" href="style.css">

BLADE   <link rel="stylesheet"href="{{asset('css/style.css') }}"/>

2.Adjuntar Imágenes

HTML<img src="img/archivo.png">

BLADE  <imgclass="logoin"src="{{asset ('img/archivo.png')}}"/>

3.Incluir JS

HTML   <script src="js/myscript.js"></script>

BLADE <script src="{{ asset('js/myscript.js') }}"></script>

Ejemplo de Pagina Maestro

!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="{{asset ('img/logoinf.png')}}"  sizes="any">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>La Ventana</title>
        <link rel="stylesheet" href="{{asset('css/style.css') }}" />
   </head>

<body>
<nav>
<img class="logo" src="{{asset ('img/logosup.png')}}"/>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Conoce el Proyecto</a></li>
        <li><a href="#">Mi Kit</a></li>
        <li><a href="#">Videos</a></li>
        <br clear="all" />
    </ul>
    <a id="pull" href="#">LaVentana</a>
</nav>
<div id="content" >
<div  id="info">
 @yield('contenido')

 
</div>
  </div>

 <footer>
        <div id="footerinf">
</div>
    <img class="logoin" src="{{asset ('img/logoinf.png')}}"/>
 </footer>

Implementar Template

El siguiente paso es utilizar nuestro template y llenar con la información que necesitemos. En el HTML del template podemos encontrar esta parte:

<div id="info">

@yield('contenido')

 </div>
Esta sentencia  @yield(‘name_template’) nos permite definir el área que se va a sustituir dentro del template, para definir esta área usamos entonces otro archivo también .blade
Vamos a crear un archivo blade para implementar el template, en la ubicación resources\view con la extensión blade.php (info.blade.php)
@extends (‘name_template’) Indicamos cual es la vista que usaremos como Template (Pagina Maestra).
@section (‘name_section’) El nombre de esta sección debe corresponder al que colocamos en la plantilla como @yield(‘name’), por que en ese espacio es donde colocara lo que pongamos en este archivo.
@stop Indica el final de la información que se colocara en la sección con el nombre indicado.
@extends('principal')

@section('contenido')
<div class="slider">
                <ul>
                    <li>
                        <img src= "{{asset ('img/banner/banner3.jpeg')}}" />
                        <span>
              <p>El video participativo como herramienta </p>
              <p>de convivencia de niños y niñas</p>
                        </span>
                    </li>
                    <li>
                        <img src="{{asset ('img/banner/g5.jpeg')}}" />
                    </li>
                    <li>
                        <img src="{{asset ('img/banner/g4.jpg')}}" />
                    </li>
                </ul>
            </div>

<div id="mid_content">
    <h1>La Ventana</h1>
    <p>El video como herramientas de convivencia de niños y niñas </p>
</div>

@stop

En este ejemplo podemos notar que  no tiene encabezado ni body <html>, </html> ,<body>, solo contiene lo especifico para colocar imágenes y un párrafo.De esta manera el espacio que dejamos como @yield(‘contenido’) en la plantilla (pagina maestra) se llena con lo que se encuentra entre @section (‘contenido’) y @stop de nuestro archivo nuevo.

Partials

Como se menciono antes son semejantes a un template  con la diferencia en la cantidad de código que se utiliza.

@extends('principal')
@section('confi')
  @include('partials.lista')
@stop

@extends(‘principal’) indica la plantilla que usaremos, @section(‘confi’) es la misma función que en el archivo anterior. @include(‘partials.lista.blade’) indica el archivo partials que utilizaremos para mostrar.

De esta manera podemos crear nuestro pagina maestra y cambiar el contenido de acuerdo a nuestra necesidad. También nos ayuda a mantener un orden en nuestros archivos y hace mas fácil la edición de nuestro código.

Espero que esta información les ayuda sido de ayuda si tienen alguna duda o comentario pueden dejarlo en los comentarios.

Entrada anterior Laravel:Creación de Vistas con Blade I

 

 

 

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.