domingo, 15 de noviembre de 2015

5 - Tutorial de Laravel 5 - Layouts con blade e integrar Bootstrap




En este capítulo del Tutorial de Laravel 5 veremos como crear layouts para cargar nuestras vistas.

Primeramente crearemos una carpeta en resources\views llamada "layouts", en esta carpeta podremos ir almacenando tantos layouts como necesite la aplicación.

En la nueva carpeta "layouts" crearemos un nuevo archivo php llamado "home.blade.php", este será el layout que se encargará de cargar la vistas conectadas a las acciones del controlador HomeController, de este modo mantendremos un cierto orden en la aplicación. 

Para definir los bloques en el layout utilizaremos blade a través de la función "yield", por ejemplo, podemos crear variables para manejar la metainformación de una forma dinámica en las vistas, y por supuesto, crearemos un bloque para cargar el contenido visible de la vista en el interior de un div, en el vídeo también se muestra como integrar la librería Bootstrap, es bastante simple, sólo tenemos que descargar los archivos desde la página oficial y agregarlos a la carpeta "public", luego embeber los archivos desde el layout, para ello nos apoyaremos en el helper url() para obtener la base url -> http//localhost/tutorial-laravel/public 

En el vídeo se muestra como cargar y usar el layout en una de las vistas creadas en un capítulo anterior de este tutorial.

El código del layout home.blade.php lo podéis ver a continuación:


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>@yield('title')</title>
        <meta name="description" content="@yield('description')" />
        <meta name="keywords" content="@yield('keywords')" />
        <link rel='stylesheet' type='text/css' href='{{url()}}/bootstrap/css/bootstrap.min.css' />
        <script type='text/javascript' src='{{url()}}/bootstrap/js/jquery.js'>
        </script>
        <script type='text/javascript' src='{{url()}}/bootstrap/js/bootstrap.min.js'>
        </script>
        
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>


Y el uso de este layout en la vista showview.blade.php ...

@extends('layouts.home')
@section('title', 'Título del sitio web')
@section('description', 'Descripción del sitio web')
@section('keywords', 'palabras, clave, del, sitio, web')

@section('content')
<h1>Tutorial Laravel 5</h1>
{{$msg}}

@foreach ($array as $index => $val)
    <p>{{$index}} = {{$val}}</p>
@endforeach
@stop







4 comentarios:

Jako dijo...

Hola muchas gracias por el curso, estoy siguiendolo capitulo a capitulo.
Tengo laravel 5.2 y copie y pegue tu codigo pero me da un error al ejecutar.

El error es el siguiente:

Whoops, looks like something went wrong.

3/3
ErrorException in helpers.php line 529:
htmlentities() expects parameter 1 to be string, object given (View: C:\xampp\htdocs\notas\resources\views\layouts\home.blade.php) (View: C:\xampp\htdocs\notas\resources\views\layouts\home.blade.php)
in helpers.php line 529
at CompilerEngine->handleViewException(object(ErrorException), '1') in PhpEngine.php line 44
at PhpEngine->evaluatePath('C:\xampp\htdocs\notas\storage\framework\views/2754bac63579921d49d8f80989ae864b9ef68b02.php', array('__env' => object(Factory), 'app' => object(Application), 'msg' => 'Aprendiendo Laravel 5', 'array' => array('1', '2', '3', '4', '5', '6', '7', '8', '9'))) in CompilerEngine.php line 59
at CompilerEngine->get('C:\xampp\htdocs\notas\resources\views/home/showview.blade.php', array('__env' => object(Factory), 'app' => object(Application), 'msg' => 'Aprendiendo Laravel 5', 'array' => array('1', '2', '3', '4', '5', '6', '7', '8', '9'))) in View.php line 147
at View->getContents() in View.php line 118
at View->renderContents() in View.php line 83
at View->render() in Response.php line 53
at Response->setContent(object(View)) in Response.php line 199
at Response->__construct(object(View)) in Router.php line 1087
at Router->prepareResponse(object(Request), object(View)) in ControllerDispatcher.php line 95
at ControllerDispatcher->Illuminate\Routing\{closure}(object(Request))
at call_user_func(object(Closure), object(Request)) in Pipeline.php line 52
at Pipeline->Illuminate\Routing\{closure}(object(Request))
at call_user_func(object(Closure), object(Request)) in Pipeline.php line 103
at Pipeline->then(object(Closure)) in ControllerDispatcher.php line 96
at ControllerDispatcher->callWithinStack(object(HomeController), object(Route), object(Request), 'showView') in ControllerDispatcher.php line 54
at ControllerDispatcher->dispatch(object(Route), object(Request), 'App\Http\Controllers\HomeController', 'showView') in Route.php line 174
at Route->runController(object(Request)) in Route.php line 140
at Route->run(object(Request)) in Router.php line 724
at Router->Illuminate\Routing\{closure}(object(Request))
at call_user_func(object(Closure), object(Request)) in Pipeline.php line 52
at Pipeline->Illuminate\Routing\{closure}(object(Request))
at call_user_func(object(Closure), object(Request)) in Pipeline.php line 103
at Pipeline->then(object(Closure)) in Router.php line 726
at Router->runRouteWithinStack(object(Route), object(Request)) in Router.php line 699
at Router->dispatchToRoute(object(Request)) in Router.php line 675
at Router->dispatch(object(Request)) in Kernel.php line 246
at Kernel->Illuminate\Foundation\Http\{closure}(object(Request))
at call_user_func(object(Closure), object(Request)) in Pipeline.php line 52
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in CheckForMaintenanceMode.php line 44
at CheckForMaintenanceMode->handle(object(Request), object(Closure))

Anónimo dijo...

a mi tambien me salio ese error, ese error sale al tratar de importar la libreria con {{url()}}, yo le cambie la ruta y se me quito, pero si me gustaria que funcionara con el {{url()}}, por que no tengo necesidad de cambiar rutas, el me trae la raiz, pero ps yo lo quite para que me funcionara.

Oasis dijo...

Usa esto en el URL: {{URL::to('bootstrap/css/bootstrap.min.css')}} para todos los enlaces

Unknown dijo...

Lo resolvi de esta manera, en el controlador puse

$url = url('');
return View('home.showview',['msg'=>$msg,'array'=>$array,'url'=>$url]);


Y en la vista:

link rel='stylesheet' type='text/css' href='{{$url}}/bootstrap/css/bootstrap.min.css' />
script type='text/javascript' src='{{$url}}/bootstrap/js/jquery.js'
/script
script type='text/javascript' src='{{$url}}/bootstrap/js/bootstrap.min.js'
/script