11 Slim micro framework – PARTE 1 – Integrar plantillas Blade

En este tutorial veremos como integrar el sistema de plantillas Blade (Laravel) dentro de Slim Framework.

Necesitamos integrar en nuestro composer.json el repositorio slim-bade, nuestro archivo quedaría así:

{
    "require": {
        "slim/slim": "2.*",
        "clickcoder/slim-blade": "dev-master"
    }
}

Luego en nuestro proyecto, creamos una carpeta llamada cache con permisos de escritura, aquí es donde se guardará la cache de las páginas creadas.

Paso siguiente en nuestro index.php, creamos la estructura que ya hemos seguido en anteriores tutoriales.

<?php 
require 'vendor/autoload.php'; 
$app = new SlimSlim(array('view' => new SlimViewsBlade(),
    'templates.path' => './templates',
));

$view = $app->view();
$view->parserOptions = array(
    'debug' => true,
    'cache' => dirname(__FILE__) . '/cache'
);

$app->get('/', function() use($app){
	$app->render('home');
});
$app->run();

Debemos especificar la carpeta donde guardaremos nuestros templates base, en este caso es la carpeta templates.

$app = new SlimSlim(array(
    'view' => new SlimViewsBlade(),
    'templates.path' => './templates',
));

Dentro de la carpeta templates, crearemos una carpeta llamada layout, donde guardaremos nuestra plantilla master a la que llamaremos base.blade.php, usaremos Bootstrap para este ejemplo



<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
    	<link href="../../favicon.ico" rel="icon" />

Blade

    <!-- Bootstrap core CSS -->
    	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    	<link href="css/custom.css" rel="stylesheet" type="text/css" />

    <!-- Custom styles for this template -->
    	<link href="starter-template.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>



          </button>
          <a class="navbar-brand" href="#">Project name</a></div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse --></div>
</nav>

    @yield('content')

    <!-- Bootstrap core JavaScript     ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Si nos fijamos en esta línea

$app->get('/', function() use($app){
	$app->render('home');
});

Con $app->render(‘home’) lo que estamos haciendo es renderizar el template llamado home.blade.php.

El siguiente paso es crear dicho archivo dentro de templates

@extends('layout.base')
@section('content')
	<div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->
@stop

En la línea

@extends('layout.base')

Estamos indicando que use la plantilla (layout/base.blade.php) y las secciones que nosotros asignemos serán reemplazadas en dicha plantilla

Por ejemplo en esta parte del código le estamos diciendo que en la plantilla base, reemplace en la plantilla base @yield(‘content’) con el contenido de @section(‘content)

@section('content')
	<div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->
@stop

No olvidar crear el archivo .htaccess en la raíz del proyecto con el siguiente contenido

RewriteEngine On

# Some hosts may require you to use the `RewriteBase` directive.
# If you need to use the `RewriteBase` directive, it should be the
# absolute physical path to the directory that contains this htaccess file.
#
# RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

Esto serían todos los pasos a seguir para integrar Blade dentro de nuestro Slim

Dejo un video para que veáis todos los pasos a seguir.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *