Hoy continuamos con la quinta lección del Curso Primeros Pasos con Laravel 5.*, que tratará sobre el motor o sistema de plantillas de Laravel llamado Blade y cómo integrar el framework de CSS Bootstrap para crear las vistas de nuestra aplicación.
Repositorio
Mira el código en GitHub: actual, resultado, comparación.
Notas
- Para trabajar con Tinker:
php artisan tinker
- Ataque de tipo XSS (del inglés Cross-Site Scripting) es aquel que consiste en la posibilidad de introducir código Javascript en una aplicación web, lo que permite realizar una serie de acciones maliciosas en la misma.
- Blade usa dos tipos de etiquetas para mostrar contenido:
{{ $notes->note }}
la cual escapa etiquetas HTML{!! $notes->note !!}
que NO escapa etiquetas HTML
Debes tener cuidado cuando muestres contenido dado por los usuarios de la aplicación, usando siempre la sintaxis
{{ }}
para evitar ataques XSS y/o escapar etiquetas HTML de los datos. - Condicionales en Blade
@if (count($notes) === 1) I have one note! @elseif (count($notes) > 1) I have multiple notes! @else I don't have any notes! @endif
- Bucles en Blade
<ul> @foreach ($notes as $note) <li> {{ $note->note }} </li> @endforeach </ul>
También hay para bucles: while, for, entre otros.
- Para usar Bootstrap: copiamos la Plantilla y sustituimos los CDN del CSS y Js
- Layout o plantilla es una vista que contiene datos que se repiten en varias vistas, como por ejemplo, el menú principal, el sidebar, el pie de página, entre otras.
- Directivas de Blade para crear layouts:
@yield
directiva para indicar una sección en una plantilla que podemos extender en otras vistas.@extends
directiva para establecer que dicha vista extiende de otra vista (una plantilla), es decir que usa el contenido de esa vista.@section
directiva para usar una sección definida por medio de @yield en una plantilla.
Espero te haya gustado. En la próxima lección veremos cómo trabajar con los controladores. No dejes de practicar ni olvides compartir ésta y las anteriores lecciones para que muchas otras personas puedan aprender sobre Laravel.
Material relacionado
- Videotutorial: Integrar Bootstrap en Laravel 5.1
- Integrar Bootstrap 3 en Laravel 5.1
- Directivas personalizadas con Blade en Laravel 5.1
- Inyección de servicios en Blade con Laravel 5.1
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Rutas para formularios en Laravel (método POST) Lección siguiente Creación y uso de controladores en Laravel 5.*