Módulo de usuarios (II): Integra Bootstrap con Laravel

En este nuevo tutorial veremos cómo integrar Bootstrap con Laravel en nuestro módulo de usuarios. ya creamos la ruta y el controlador de nuestro módulo, ahora trabajaremos con las vistas.

Para poder trabajar con las vistas, recomiendo ver el tutorial Blade, el sistema de plantillas de Laravel publicado anteriormente en Cristalab.

Integrando Bootstrap con Laravel

Esta parte es opcional, pero recomiendo que lo hagamos, no sólo es importante que nuestro módulo funcione, también tenemos que cuidar un poco la estética, y Frameworks ya hechos como Bootstrap caen perfectos en situaciones como ésta.

Con Bootstrap practicaremos cómo hacer un Layout en Laravel, además de hacer que nuestro panel se vea mejor.

Si es de su preferencia intenten seguir el tutorial usando otro framework, el procedimiento debería ser bastante estándar.

Descargar Bootstrap

Descarguen la última versión de Bootstrap

Busquen y descompriman el archivo a una carpeta cualquiera (ej. /descargas/bootstrap/)
Luego, dentro de esa carpeta copien la carpeta dist/ a la carpeta public de nuestro proyecto
Por último, renombren la carpeta dist/ a assets/ de manera que quede así, por ejemplo:

Código :

../descargas/bootstrap-3.0.0/dist ->  ../pruebalaravel/public/assets

Dentro de public/assets deberíamos tener las carpetas css/ fonts/ y js/ que vienen en la distribución de Bootstrap. Si es así, todo bien.

Por último vamos a copiar dos archivos que están en descargas/bootstrap-3.0.0/assets/js/

Código :

html5shiv.js
respond.min.js

Y vamos a pegarlos en public/assets/js

html5shiv y respond.js hacen falta para que Bootstrap sea compatible con las versiones anteriores de Explorer

Crear un layout sencillo con Bootstrap

Vamos a partir del layout básico propuesto en la página oficial de Bootstrap, con algunos cambios y con la sintaxis de Blade.

Creen la carpeta admin en app/views y el archivo: app/views/admin/layout.blade.php, luego peguen esto:

Código :

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="wrap">
      <div class="container">
        <h1>Hello, world!</h1>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

¿Qué hay que cambiarle a esto para convertirlo en un layout de Laravel?

Primero hay que utilizar lo que vimos en el tutorial anterior, para definir las secciones (content y title por ahora está bien)

Cambien:

Código :

<h1>Hello, world!</h1>

Por:

Código :

@yield('content')

Código :

<title>Bootstrap 101 Template</title>

Por:

Código :

<title>@yield('title', 'Aprendiendo Laravel')</title>

Segundo, tenemos que corregir las llamadas a los assets (CSS, JS…) de modo que apunten al directorio correcto, para esto Laravel tiene helpers, que colocan la ruta correcta por nosotros, y son portables, es decir, aunque cambiemos el directorio de nuestro proyecto, o lo subamos a un server, seguirán funcionando las rutas:

Cambien:

Código :

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

Por:

Código :

<link href="{{ asset(‘assets/css/bootstrap.min.css’) }}" rel="stylesheet" media="screen">

O aún más corto:

Código :

{{ HTML::style('assets/css/bootstrap.min.css', array('media' => 'screen')) }}

Con Javascript sucede lo mismo. Cambien:

Código :

<script src="js/bootstrap.min.js"></script>

Por:

Código :

<script src="{{ assets(‘assets/js/bootstrap.min.js’) }}"></script>

O mejor aún:

Código :

{{ HTML::script('assets/js/bootstrap.min.js') }}

Por último, hagan lo mismo con las llamadas a los scripts para IE8, intentenlo ustedes:

Código :

      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>

¿Qué habría que hacer aquí? Debajo la respuesta (spoiler alert):

Código :

{{ HTML::script(‘assets/js/html5shiv.js’) }}
{{ HTML::script(‘assets/js/respond.min.js’) }}

Algunas observaciones

Como sospecharán: asset(), HTML::style y HTML::script son todos “helpers” de Laravel, funciones que sirven de ayuda para determinar la ruta, en el caso de asset y además, escribir HTML de forma más dinámica en el caso de las funciones HTML::style y HTML::script.

La llamada a Jquery hay que dejarla tal como está, dado que es una URL absoluta: http://code.jquery.com/jquery.js no hay que usar los helpers de Laravel.

Fíjense que todas las demás rutas parten de public/ Laravel se encargará de convertir:

Código :

 assets(‘assets/js/bootstrap.min.js’)

...en una URL completa al archivo, como, por ejemplo:

Código :

http://localhost/pruebalaravel/public/assets/js/bootstrap.min.js

Esto es muy conveniente. Además me tomé la libertad de cambiar todos los comentarios HTML por comentarios de Blade (todo excepto el que sirve de IF para las versiones de IE, ese quedó igual por supuesto).

Nuestro Layout final, siguiendo todos los pasos, debería haber quedado así:
app/views/admin/layout.blade.php

Código :

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Aprendiendo Laravel')</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{-- Bootstrap --}}
    {{ HTML::style('assets/css/bootstrap.min.css', array('media' => 'screen')) }}

    {{-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --}}
    <!--[if lt IE 9]>
        {{ HTML::script('assets/js/html5shiv.js') }}
        {{ HTML::script('assets/js/respond.min.js') }}
    <![endif]-->
  </head>
  <body>
    {{-- Wrap all page content here --}}
    <div id="wrap">
      {{-- Begin page content --}}
      <div class="container">
        @yield('content')
      </div>
    </div>

    {{-- jQuery (necessary for Bootstrap's JavaScript plugins) --}}
    <script src="//code.jquery.com/jquery.js"></script>
    {{-- Include all compiled plugins (below), or include individual files as needed --}}
    {{ HTML::script('assets/js/bootstrap.min.js') }}
  </body>
</html>

Crear las otras vistas

Vamos a probar nuestro Layout. Primero regresemos a nuestro controlador, desde allí llamaremos a la vista admin/users/list.blade.php:

app/controllers/admin/UsersController.php:

Código :

   public function index()
   {
      return View::make('admin/users/list);
   }

Por supuesto, esta vista tenemos que crearla, en este caso en:

Código :

app/views/admin/users/list.blade.php

Recuerden que Laravel completa el resto del path por nosotros, es decir no hace falta escribir app/views/ ni la extensión .blade.php cuando invocamos una vista

Como se dan cuenta necesitamos crear una nueva carpeta llamada “users” dentro de “app/views/admin” dentro de ella colocaremos todas las vistas de nuestro módulo users.

app/views/admin/users/list.blade.php

Código :

@extends ('admin/layout')

@section ('title') Lista de Usuarios @stop

@section ('content')

  <h1>Lista de usuarios</h1>

@stop

Similar al ejemplo anterior cuando vimos las vistas todo lo que necesitamos fue extender el layout principal y luego reemplazar las secciones.

Si accedemos ahora al navegador, por ejemplo, en mi caso:

Código :

http://localhost/pruebalaravel/public/admin/users

Veremos el texto:

Código :

Lista de Usuarios

Con algo de estilo básico. Más adelante allí haremos nuestra lista de usuarios dinámica ^_^

Ya con el layout preparado, en nuestro próximo tutorial aprenderemos cómo crear un formulario con Laravel y probaremos las otras acciones de nuestro controlador Admin_UsersController.

Dudas y preguntas en los comentarios.

Stay tuned.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Módulo de usuarios (II): Integra Bootstrap con Laravel

Integrando Bootstrap con Laravel

Descargar Bootstrap

Crear un layout sencillo con Bootstrap

¿Qué hay que cambiarle a esto para convertirlo en un layout de Laravel?

Algunas observaciones

Crear las otras vistas

Publica tu comentario

o puedes...