0% encontró este documento útil (0 votos)
151 vistas159 páginas

Guía Completa de Laravel 5 y HTML5

Este documento introduce Laravel, un framework PHP para desarrollo web. Explica cómo instalar Laravel y configurar el entorno de desarrollo, y describe la estructura básica de un proyecto Laravel, incluyendo directorios, archivos de configuración y características como enrutamiento, vistas, modelos, validación y middleware. También cubre conceptos como JSON, migraciones, seeders, Eloquent ORM y plantillas.

Cargado por

Jorge Sanchez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
151 vistas159 páginas

Guía Completa de Laravel 5 y HTML5

Este documento introduce Laravel, un framework PHP para desarrollo web. Explica cómo instalar Laravel y configurar el entorno de desarrollo, y describe la estructura básica de un proyecto Laravel, incluyendo directorios, archivos de configuración y características como enrutamiento, vistas, modelos, validación y middleware. También cubre conceptos como JSON, migraciones, seeders, Eloquent ORM y plantillas.

Cargado por

Jorge Sanchez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Contenido

Introducción a Laravel 5 .............................................................................................................5


Beneficios de Laravel ..........................................................................................................5
Requerimientos iniciales ....................................................................................................6
Gestor de dependencias ....................................................................................................8
Preparando nuestro entorno de trabajo. ....................................................................................9
Instalación de XAMPP (Windows) ...........................................................................................9
Instalación de LAMP (Linux) .....................................................................................................9
Instalación de composer (Windows) .....................................................................................10
Instalación de composer (Linux) ............................................................................................10
Instalación de Laravel ..................................................................................................................10
PSR-4 y namespaces ..................................................................................................................11
Conexión con bases de datos ................................................................................................13
Estructura de un proyecto en Laravel ..................................................................................14
El directorio app .................................................................................................................15
El directorio config ............................................................................................................16
El directorio database .......................................................................................................16
El directorio public .............................................................................................................17
El directorio resources .....................................................................................................17
El directorio storage ..........................................................................................................18
El directorio tests ...............................................................................................................18
El archivo .env y .env.example .......................................................................................18
JSON ..............................................................................................................................................19
Los tipos de valores aceptados por JSON .................................................................20
¿Por qué aprender JSON? ...............................................................................................20
Validación de JSON ...........................................................................................................21
Migraciones ..................................................................................................................................21
Beneficios .............................................................................................................................28
Seeders .........................................................................................................................................28
Modelos y uso de Eloquent ........................................................................................................31
Eloquent .................................................................................................................................32
Model Factories ............................................................................................................................37

1
Enrutamiento básico ....................................................................................................................39
Tipos de rutas por encabezado Http .................................................................................42
Rutas de tipo get ...................................................................................................................42
Parametros en las rutas de tipo get ..................................................................................43
Vistas y Blade ...............................................................................................................................45
Blade ...............................................................................................................................................48
Templates y Partials ....................................................................................................................50
Templates ..............................................................................................................................50
Partials ....................................................................................................................................52
Resumen, Anotaciones e informacion adicional ..........................................................53
Enrutamiento básico ....................................................................... ¡Error! Marcador no definido.
Tipos de rutas por encabezado Http .................................... ¡Error! Marcador no definido.
Rutas de tipo get ...................................................................... ¡Error! Marcador no definido.
Parametros en las rutas de tipo get ..................................... ¡Error! Marcador no definido.
Vistas y Blade .................................................................................. ¡Error! Marcador no definido.
Blade .................................................................................................. ¡Error! Marcador no definido.
Templates y Partials ....................................................................... ¡Error! Marcador no definido.
Templates ................................................................................. ¡Error! Marcador no definido.
Partials ....................................................................................... ¡Error! Marcador no definido.
Resumen, Anotaciones e informacion adicional .................... ¡Error! Marcador no definido.
Controladores ................................................................................................................................55
Validaciones en Laravel ..............................................................................................................59
Validación del lado del cliente: ...............................................................................................60
Validación del lado del servidor (Request). .........................................................................63
Middlewares ..................................................................................................................................70
Creando nuestros propios Middlewares ...................................................................................73
Preparativos ..............................................................................................................................73
Crear el middleware IsAdmin .................................................................................................77
¿Qué es HTML5? .........................................................................................................................80
¿Qué hay de nuevo en HTML5?................................................................................................80
Nuevos tags (etiquetas).......................................................................................................80
Nuevas API's .........................................................................................................................80
Plantilla básica de un documento en HTML5 ..........................................................................81

2
Encabezados .................................................................................................................................82
Secciones (divisiones) .................................................................................................................82
Formato de texto ...........................................................................................................................83
Formularios ....................................................................................................................................84
Atributos de los formularios ....................................................................................................84
Tablas .............................................................................................................................................85
Hipervínculos e imágenes ...........................................................................................................85
CSS3 (Hojas de estilo en cascada) ..........................................................................................87
Sintaxis .......................................................................................................................................87
Formas de insertar CSS en nuestro documento HTML .....................................................88
Comentarios en CSS ...............................................................................................................90
Selectores ..................................................................................................................................90
Selector por clase .................................................................................................................91
Creacion del CRUD con Laravel desde 0 ................................................................................93
Vistas del CRUD .........................................................................................................................100
Template App ......................................................................................................................100
Vista Index ...........................................................................................................................102
Partials: table y fields .........................................................................................................102
Vista Create .........................................................................................................................106
Vista Edit ..............................................................................................................................107
DataTable.....................................................................................................................................108
¿Cómo usar DataTables? .........................................................................................................109
Crear un DataTable ....................................................................................................................110
Ocupando el DOM (etiqueta <table>) ...............................................................................110
Ocupando un dataset en Javacript ......................................................................................111
Ocupando AJAX .....................................................................................................................112
Internacionalizar un dataTable .................................................................................................113
Filtrar datos de un DataTable ...................................................................................................113
Users .............................................................................................................................................149
Controller ......................................................................................................................................150
Model ............................................................................................................................................151
Assets ...........................................................................................................................................151
Storage .........................................................................................................................................152

3
Database ......................................................................................................................................152
Multilingual ...................................................................................................................................153
Dashboard ....................................................................................................................................154
Primary color ................................................................................................................................156
Show developer tips ....................................................................................................................156
Additional stylesheets .................................................................................................................157
Additional Javascript ...................................................................................................................157
Google Maps ................................................................................................................................158

4
Introducción a Laravel 5
Laravel es un framework para aplicaciones web con sintaxis expresiva y elegante. Creemos
que el desarrollo debe ser una experiencia agradable y creativa para que sea
verdaderamente enriquecedora. Laravel busca eliminar el sufrimiento del desarrollo
facilitando las tareas comunes utilizadas en la mayoría de los proyectos web, como la
autenticación, enrutamiendo, sesiones y almacenamiento en caché.

+
Laravel es un framework para el lenguaje de programación PHP. Aunque PHP es conocido
por tener una sintaxis poco deseable, es fácil de usar, fácil de desplegar y se le puede
encontrar en muchos de los sitios web modernos que usas día a día. Laravel no solo ofrece
atajos útiles, herramientas y componentes para ayudarte a conseguir el éxito en tus proyectos
basados en web, si no que también intenta arreglar alguna de las flaquezas de PHP.

Laravel tiene una sintaxis bonita, semántica y creativa, que le permite destacar entre la gran
cantidad de frameworks disponibles para el lenguaje. Hace que PHP sea un placer, sin
sacrificar potencia y eficiencia. Es sencillo de entender, permite mucho la modularidad de
código lo cuál es bueno en la reutilización de código.

Beneficios de Laravel

1. Incluye un ORM: A diferencia de CodeIgniter, Laravel incluye un ORM integrado. Por lo cual
no debes instalar absolutamente nada.

2. Bundles: existen varios paquetes que extienden a Laravel y te dan funcionalidades


increíbles..

5
3. Programas de una forma elegante y eficiente: No más código basura o espaguetti que no
se entienden, aprenderás a programar ‘con clase’ y ordenar tu código de manera de que sea
lo más re-utilizable posible.

4. Controlas la BD desde el código: Puedes tener un control de versiones de lo que haces


con ella. A esto se llaman migrations, es una excelente herramienta, porque puedes manejar
todo desde tu IDE, inclusive montar datos en tus tablas.

5. Da soporte a PHP 5.3.

6. Rutas elegantes y seguras: Una misma ruta puede responder de distinto modo a un método
GET o POST.

7. Cuenta con su propio motor de platillas HTML.

8. Se actualiza facilmente desde la línea de comandos: El framework es actualizable


utilizando composer update y listo, nada de descargar un ZIP y estar remplazando.

9. Cuenta con una comunidad activa que da apoyo rápido al momento de que lo
necesitas.

Requerimientos iniciales

Para empezar a trabajar con Laravel es necesario cumplir con los siguientes requisitos
iniciales:

• Un entorno de desarrollo web: Apache, IIS, Nginx PHP 5.3 o superior


• Base de datos: MySQL, Sqlite, Postgresql o sqlserver
• Librerías php : Mcrypt

6
Composer es una herramienta para administración de dependencias en PHP. Te permite
declarar las librerías de las cuáles tu proyecto depende o necesita y éste las instala en el
proyecto por ti.

Composer no es un administrador de paquetes. Sí, él trata con "paquetes" o "librerías", pero


las gestiona en función de cada proyecto y no instala nada globalmente en tu equipo, por lo
cual solo administra las dependencias del mismo.

Composer usa un archivo dentro de tu proyecto de Laravel para poder administrar las
dependencias el cual se llama: composer.json. Este usa un formato JSON el cual se
explicará más adelante, un ejemplo de él se muestra e esta imagen:

Ahora, composer no se limita a su uso unicamente con proyectos Laravel, sino que en Laravel
el uso de composer nos facilita el control de dependencias y en la actualización de cada una
como se explicó anteriormente. Para este curso se trabajará con este archivo pues es el que
se va a crear al momento de instalar Laravel.

En este archivo podemos observar cierto orden en el acomodo de la información.

7
• "name": En esta sección se describe el nombre del usuario propietario del proyecto seguido
del nombre del repositorio que aloja el proyecto separados por una barra(/).

• "description": Sirve para facilitar una breve descripción del paquete. Debemos ser muy
claros y breves si deseamos colocar una descripción de nuestro paquete.

• "keywords": Estas palabras claves son una matriz de cadenas usadas para representar tu
paquete. Son similares a etiquetas en una plataforma de blogs y, esencialmente, sirven al
mismo propósito. Las etiquetas te ofrecen metadatos de búsqueda para cuando tu paquete
sea listado en un repositorio.

• "homepage": La configuración de la página es útil para paquetes que van a ser de código
libre. Puedes usar esta página para el proyecto o quizá para la URL del repositorio. Lo que
creas que es más informativo.

• "license": Si tu paquete está pensado para ser redistribuido, querrás ofrecer una licencia
con él. Sin una licencia muchos programadores no podrán usar el paquete por restricciones
legales. Escoge una licencia que se ajuste a tus requisitos, pero que no sea muy restrictiva
para aquellos que esperan usar tu código. El proyecto de Laravel usa la licencia MIT que
ofrece gran libertad.

• "authors": ofrece información sobre los autores del paquete, y puede ser útil para aquellos
usuarios que quieran contactar con el autor o autores. Ten en cuenta que la sección de
autores permite una matriz de autores para paquetes colaborativos.

Gestor de dependencias

Una de las opciones interesantes del archivo composer.json es el campo “require”, en el se


agregan como un arreglo el nombre de los paquetes que queremos incluir en nuestro
proyecto seguido de la versión de cada dependencia.

Al final cuando se han agregado todas las dependencias que queremos para nuestro
proyecto entonces solo basta con usar el siguiente comando en nuestra consola:

composer install

Con esto le indicamos a composer que debe descargar nuestras dependencias y las
dependencias de estas dependencias para satisfacer las necesidades de nuestro proyecto.
Para más información sobre composer, sus campos y su forma de uso podemos consultar
su página oficial https://getcomposer.org/doc/ la cuál se encuentra en inglés.

8
Preparando nuestro entorno de
trabajo.
Laravel necesita un servidor web. No importa cuál sea pero la mayoría de la
comunidad usa Apache o Nginx y hacer lo mismo te pondrá las cosas más fáciles
a la hora de buscar ayuda si la necesitas.

Instalación de XAMPP (Windows)


XAMPP es un programa que nos ofrece una distribución de Apache, MySQL, PHP
y Perl muy simple de instalar, administrar y utilizar. Podemos descargarlo aquí.

Instalación de LAMP (Linux)


LAMP es el conjunto de aplicaciones Apache, MySQL, PHP o Python en entornos
Linux que nos facilitan el desarrollo de sistemas.

En Ubuntu o derivadas podemos instalarlo con los siguientes comandos:

sudo apt-get update


sudo apt-get upgrade
sudo apt-get install lamp-server^
sudo apt-get install php5-mcrypt
sudo php5enmod mcrypt

Despues de tener instalado nuestro Servidor web, es necesario instalar composer


el cuál es un gestor de dependencias php muy útil y del cuál se hablará más tarde.

9
Instalación de composer (Windows)
La forma más sencilla de instalar Composer en tu ordenador Windows consiste
en descargar y ejecutar el archivo Composer-Setup.exe, que instala la versión
más reciente de Composer y actualiza el PATH de tu ordenador para que puedas
ejecutar Composer simplemente escribiendo el comando composer.

Instalación de composer (Linux)


En ubuntu bastará con ejecutar los siguientes comandos en la terminal.

sudo apt-get install curl


curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
sudo echo 'PATH=$PATH:~/.composer/vendor/bin' >> ~/.profile

Instalación de Laravel
Existen diferentes formas de instalar laravel en nuestra computadora.

• Podemos clonar el repositorio Laravel de github.


• Usando el instalador:
• composer global require "laravel/installer=~1.1"

• laravel new Proyecto

• Usando composer:
• composer create-project laravel/laravel --prefer-dist Proyecto

Una vez instalado laravel es recomendable situarse en la raíz del proyecto y ejecutar:

composer update
php artisan key:generate
php artisan app:name Curso
a partir de la versión 6 instalar el siguiente comando

10
composer require andrey-helldar/laravel-app –dev
y ya podra usar php artisan app:name <name>

o visite https://github.com/andrey-helldar/laravel-app

para ver la lista de funcione

PSR-4 y namespaces

¿Qué es PSR-4?

Es una especificación para la auto carga de clases desde la ruta de los archivos.
Describe dónde se encuentran ubicados los archivos que serán autocargados.
PSR-4 hace uso de namespaces para distinguir una clase de otra, esto es de gran
ayuda cuando ocupamos librerías de terceros porque en muchas ocaciones
existirán clases con el mismo nombre que las nuestras y podrían sobreescribirse
o usar una que no queremos.

PSR-4 fue creada por el grupo de interoperabilidad de PHP, ellos han trabajado
en la creación de especificaciones de desarrollo para este lenguaje para que
estandarizemos diferentes procesos, como es en este caso el como nombrar las
clases de nuestro proyecto y hacer uso de ellas.

Usar especificaciones PSR-4 no es obligatorio y su uso puede ser completo o


parcial, aunque es recomendable no omitirlo porque a Composer le permite cargar
nuestras clases automaticamente.

¿Qué es un autoloader?

Aparecieron desde la versión de PHP5 y nos permite encontrar clases para PHP
cuando llamamos las funciones new() o class_exists(). De esta forma no tenemos
que seguir haciendo uso de require() o include().

11
PSR-4 nos permite definir namespaces de acuerdo a la ruta de los archivos de
las clases, es decir, si tenemos una clase "Pdf" en el directorio Clases/Templates/
, ese será su namespace. Podemos hacer un simil con el import de java.

El namespace de Clases/Templates quedaría de la siguiente forma:


Clases\Templates\Pdf.php

Para usar PSR-4 en composer podemos definir el namespace de nuestra


aplicación y el directorio dónde serán alojadas las clases, por ejemplo:

{
"autoload":{
"psr-4":{
"Taller\\": "app/"
}
}
}
Para usar los namespaces dentro de nuestros archivos php basta con
referenciarlos de la siguiente forma:

use Taller\Clase;

¿Qué es classmap?

Es un autoloader que nos permite registrar nuestras clases para poder ocuparlas
sin necesidad de un namespace, la desventaja respecto a PSR-4 es la colisión
de clases con mismo nombre, la principal ventaja es la rápidez de autocarga de
clases. Otro inconveniente de usar classmap es que debemos ejecutar
constantente el comando "composer dump-autoload" por cada clase nueva en
el directorio que indiquemos o tengamos registrado en el
archivo "composer.json".

Ejemplo:

12
"classmap": [
"database"
],
}

Nota a partir de laravel 6 no viene el comando app:name, para agregar se hace con el
siguiente comando composer require andrey-helldar/laravel-app –dev
Luego se usa el comando de siempre php artisan app:name nombre_del_proyecto

Conexión con bases de datos


Laravel tiene soporte para los motores de bases de datos más populares como:

• MySQL
• Postgresql
• SQLite3
• SQL Server

Veremos como utilizar MySQL con laravel.

Dentro del archivo database.php en el directorio config configuramos el driver de


la conexión, por defecto vendrá con mysql, si queremos cambiarlo por otro motor
de base de datos tendremos que cambiar el valor mysql por sqlite, pgsql, sqlsrv.
'default' => env('DB_CONNECTION', 'mysql')
Tendremos que configurar el archivo .env ubicado en la raíz del proyecto.
DB_HOST=localhost
DB_DATABASE=curso
DB_USERNAME=root
DB_PASSWORD=
Una vez que tengamos todo configurado, nos dirigimos a la terminal y ejecutamos
el comando php artisan migrate para crear las migraciones, si todo ha salido bien
tendremos que ver las tablas:

13
• migrations
• password_resets
• users

Si eres una persona curiosa habrás notado que el nombre de las tablas en Laravel
siempre son escritas en plural, esto no es por puro capricho, es parte de una
convención: Convención de la configuración , dicha convención le permite a
Laravel hacer magía por nosotros, nos evita realizar configuración y pasos extras
de la asociación de Modelos con tablas entre otras cosas.

Estructura de un proyecto en Laravel


Todos los proyectos nuevos en Laravel 5.1 tienen la siguiente estructura de
directorios:

• app/
• bootstrap/
• config/
• database/
• public/
• resources/
• storage/
• tests/
• vendor/
• .env
• .env.example
• .gitattributes
• .gitignore
• artisan
• composer.json
• composer.lock
• gulpfile.js

14
• package.json
• phpspec.yml
• phpunit.xml
• readme.md
• server.php

A continuación describiremos los directorios y archivos más importantes para que


nos ayuden a entender más el funcionamiento del framework.

El directorio app
App es usado para ofrecer un hogar por defecto a todo el código personal de tu
proyecto. Eso incluye clases que puedan ofrecer funcionalidad a la aplicación,
archivos de configuración y más. Es considerado el directorio más importante de
nuestro proyecto ya que es en el que más trabajaremos.

El directorio app tiene a su vez otros subdirectorios importantes pero uno de los
más utilizados es el directorio Http en el cuál ubicaremos
nuestros Controllers, Middlewares y Requestsen sus carpetas correspondientes,
además dentro del subdirectorio Http encontremos también el
archivo routes.phpdonde escribiremos las rutas de la aplicación.
A nivel de la raíz del directorio app encontraremos el modelo User.php, los
modelos comunmente se ubicarán a nivel de la raíz de la carpeta app aunque
igual es posible estructurarlos de la forma que queramos, por ejemplo, en una
carpeta llamada Models.

15
El directorio config

La configuración tanto para el framework como para tu aplicación se mantiene en


este directorio. La configuración de Laravel existe como un conjunto de archivos
PHP que contienen matrices clave-valor. Entre los archivos más usados del
directorio config se encuentran:

• app.php : En este archivo nos puede interesar configurar el lenguaje de nuestra


aplicación, la zona horaria, los providers y aliases de las clases más comunes.
• database.php : En este archivo podemos configurar principalmente el motor de
base de datos al cuál deseamos conectarnos.

El directorio database

Aquí se encontraran los archivos relacionados con el manejo de la base de datos.


Dentro de este directorio se encuentran los subdirectorios:

• factories : Aquí escribiremos nuestros model factories.


• migrations : Todas las migraciones que creamos se ubican en este subdirectorio.
• seeds : Contiene todas las clases de tipo seed.

16
El directorio public

Dentro de este directorio colocaremos todos los recursos estáticos de nuestra


aplicación, es decir, archivos css, js, imágenes y fuentes.

Es recomendable crear una carpeta por cada tipo de recurso.

El directorio resources

Dentro de este directorio se encuentran los subdirectorios:

• assets: Aquí se ubican todos los archivos less de nuestra aplicación (útil para
desarrolladores front-end).
• lang: Aquí se encuentran todos los archivos de internacionalización, es decir, los
archivos para poder pasar nuestro proyecto de un idioma a otro. Normalmente
habrá una carpeta por cada idioma, ejemplo:
o en: idioma inglés
o es: idioma español
• views: Aquí ubicaremos nuestras vistas en formato php o php.blade, es
recomendable crear una carpeta por cada controlador, además agregar una
carpeta templates para las plantillas. Una plantilla es una vista general, que tiene
segmentos que pueden ser reemplazados mediante la herencia de plantillas, más
adelante se hablará de este tema.

17
El directorio storage

Cuando Laravel necesita escribir algo en el disco, lo hace en el directorio storage.


Por este motivo, tu servidor web debe poder escribir en esta ubicación. Aquí
podemos encontrar otros directorios entre los cuales el más relevante es el
subdirectorio framework, es ahí donde se almacena el cache y las vistas
compiladas.

El directorio tests

Aquí escribiremos los archivos de pruebas que serán ejecutadas posteriormente


por phpunit.

El archivo .env y .env.example

El archivo .env no existe cuando instalamos laravel, en este archivo se configurará


el modo en que se ejecuta nuestra aplicación, por defecto será el modo debug,

18
además podemos configurar la conexión a la base de datos y la conexión con el
servidor de correo electronico. El archivo .env lo creamos copiando el
archivo .env.example y renombrando la copia como .env.

Por motivos de seguridad de la base de datos el archivo .env nunca se sube


cuando hacemos un push en nuestro repositorio. Es por eso que aparece escrito
dentro del archivo .gitignore en la raíz de nuestro proyecto.

JSON

JSON es un acrónimo de JavaScript Object Notation, un formato ligero


originalmente concebido para el intercambio de datos en Internet. JSON nos
permite representar objetos, arrays, cadenas, booleanos y números.

La ventaja de usar JSON para la transferencia de información es que puede ser


parseada por varios lenguajes y es un formato estandarizado, es decir que
cualquier lenguaje puede intercambiar datos con otro mediante JSON.

Por defecto, JSON se guarda sin espacios entre sus valores lo cual lo puede hacer
un poco más difícil de leer. Esto se hace normalmente para ahorrar ancho de
banda al transferir los datos, sin los espacios en blanco adicionales, la cadena
JSON será mucho más corta y por tanto habrá menos bytes que transferir.

Sin embargo, JSON no se inmuta con los espacios en blanco o saltos de linea
entre las claves y valores, así que podemos hacer uso de ellos para hacerlo un
poco más legible. JSON es un formato de transferencia de dato y no un lenguaje.

Debemos tener siempre en cuenta que en el formato JSON las cadenas siempre
van en comillas dobles, además, los elementos clave y valor debes estar
separadas con dos puntos (:), y las parejas clave-valor por una coma (,).

Por ejemplo:

{
"Frutas":[

19
{
"Nombre": "Manzana",
"Cantidad": 20,
"Precio": 10.50,
"Podrida": false
},
{
"Nombre": "Pera",
"Cantidad": 100,
"Precio": 1.50,
"Podrida": true
}
]

Los tipos de valores aceptados por JSON


Los tipos de valores que podemos encontrar en JSON son los siguientes:

• Numéricos (entero o flotante)


• Strings o cadenas (entre comillas dobles)
• Booleans (true o false)
• Arrays o arreglos (entre corchetes [] )
• Objetos (entre llaves {})
• Null

¿Por qué aprender JSON?

JSON es utilizado ampliamente en:

• El archivo composer.json de proyectos PHP


• Intercambio de información
• Representación de una base de datos
• AJAX

20
• Web Services

Validación de JSON

JSON es un un formato para el intercambio de información muy rígido y estricto,


si tenemos un error de sintaxis, obtendremos un error y no podremos parsear el
JSON. Para solucionar este tipo de problemas, existen en internet un gran número
de herramientas que nos ayudan a escanear y encontrar posibles errores en la
formación de nuestro JSON.

Podemos ocupar JSONLint que es una muy buena opción, bastará con copiar y
pegar nuestro JSON en el área de texto y a continuación dar click en el botón
"Validate".

JSONLint nos informará si es correcto el formato o en caso contrario nos mostrará


los errores sintácticos de nuestro JSON.

Migraciones
El comando php artisan migrate:rollback te permite deshacer la última migración
ejecutada.

Puedes ejecutar php artisan migrate:reset para deshacer todas las migraciones.
Cuando creamos nuestras bases de datos solemos crear diagramas que nos
facilitan la abstracción de como se va a almacenar nuestra información, pero la
forma de llevarlo a la realidad en algun gestor de bases de datos, como por
ejemplo: MySQL, SQLite, PostgreSQL, SQL Server, etc., lo más comun es
meternos al lenguaje de script encargado de implementar nuestra idea de la BD
y ejecutar dicho script, o incluso ocupar programas más avanzados que nos sirven
como interfaz para crearlas de una forma más gráfica y sin la necesidad de
profundizar demasiado en el lenguaje, como Workbench o Navicat.

En Laravel se lleva a otro contexto esta situación, puesto que visto de la forma
tradicional si se requieren cambios en la base de datos tenemos que meternos ya

21
sea a otro programa para cambiar el diagrama de la base o a un archivo SQL con
una sintaxis usualmente complicada o difícil de leer y ejecutar los cambios para
reflejarlos en el proyecto, sin embargo, con esto no contamos con un control de
los cambios (control de versiones) sobre la base de datos, si necesitamos
consultar un cambio anterior o de repente la solución previa o inicial era la que se
necesita al momento debemos re-escribir todo otra vez, cosa que con
la migraciones se soluciona instantaneamente.

Las migraciones son archivos que se encuentran el la


ruta database/migrations/ de nuestro proyecto Laravel, por defecto en la
instalación de Laravel 5 se encuentran dos migraciones ya
creadas, create_users_table y create_password_resets_table.
Para crear nuestras migraciones en Laravel se usa el siguiente comando:

php artisan make:migration nombre_migracion


que nos crea el archivo limpio para escribir nuestra migración, o bien el comando:

php artisan make:migration nombre_migracion --create=nombre_tabla


que nos agrega una plantilla de trabajo básica para empezar a trabajar.

Como ejemplo del curso se tomará este comando:

php artisan make:migration crear_tabla_pasteles --create=pasteles


el cual nos dará este resultado:

Created Migration: 2015_06_23_054801_crear_tabla_pasteles


Y nos creará además el siguiente archivo:

22
Ahora bien se puede observar que el archivo como tal no se llama
simplemente crear_tabla_pastelessino 2015_06_23_054801_crear_tabla_past
eles, esto pasa porque Laravel al crear una migración agrega como préfijo la
fecha y hora en la que fué creada la migración para poder ordenar qué migración
va antes que otra, por lo cual si tu ejecutas este comando, obviamente el nombre
de tu archivo será diferente pues la fecha y hora no pueden ser las mismas que
la mia al crear este ejemplo. Además las migraciones que vienen por defecto en
Laravel también se encuentran con este formato por lo cual podemos observar
que estos dos archivos si tienen el mismo nombre.

Dentro de la estructura del archivo podemos ver dos funciones, una


llamada up() y otra llamada down(), la primer función es en donde vamos a

23
especificar la estructura de nuestra tabla, inicialmente y gracias al comando se
encuentran ya algunas cosas escritas como lo son la clase Schema en la cual se
llama al método create, el cual nos permite crear la tabla en nuestra base de
datos, esta recibe dos parámetros, el primero es el nombre que va a recibir la
tabla que si no mal recuerdan es el que se le dio en el comando y por lo cual ya
se encuentra en su lugar, y el segundo parámetro es una función closure o función
anónima que lo que hace es definir las columnas de nuestra tabla, a su vez esta
función anónima recibe como parámetro un objeto de tipo Blueprint que se
agregó dentro del namespace con la palabra use en la cabecera del archivo, el
objeto $table es con el que vamos a trabajar para definir los campos, como se ve
en la imagen anterior esto se logra escribiendo $table->tipo_dato('nombre'); , y
esto puede variar dependiendo el tipo de dato que se use y para ello podemos
revisar la documentación oficial de Laravel aquí para poder ver todos los tipos de
campos con los que contamos.
En el ejemplo observamos que ya tenemos el campo 'id' de tipo increments que
es equivalente a un campo en SQL así:
create table pasteles (id int auto_increment);
Y un campo de tipo timestamps sin nombre, el efecto que tendrá será agregar dos
columnas muy útiles que son created_at y updated_at que son campos que se
usan para (como su nombre lo dice) guardar el registro de cuando fue creado y
cuando fue actualizado el registro, detalles muy importantes cuando queremos
obtener informes con base en el tiempo de la información de nuestra tabla, por
ejemplo si quisieramos saber cuales son los pasteles que se dieron de alta en el
catálogo en el mes de abril podriamos crear un filtro para obtener solo los pasteles
de ese mes usando el campo generado created_at.
Ahora bien si la función up crea nuestra tabla en la base de datos, la
función down logicamente hace lo opuesto, y eso es eliminar la tabla de la base
de datos, por eso dentro de esta función podemos observar que de la misma
clase Schema se llama al método drop que significa dejar caer o dar de baja.

24
Si bien cada función realiza una tarea en especifico, ¿Cuando es que se usan? o
¿Como se mandan a llamar?. Bueno para esto iremos nuevamente a nuestra linea
de comandos.

Para correr o iniciar nuestras migraciones usamos el comando:

php artisan migrate


Con esto si es la primera vez que se ejecuta este comando se creará en nuestra
base de datos la tabla migrations que es la encargada de llevar el control de que
migraciones que ya han sido ejecutadas, con el fin de no correr el mismo archivo
más de una vez si el comando se usa nuevamente.

Entonces si creamos nuestra migración crear_tabla_pasteles y usamos el


comando php artisan migrate como resultado en nuestra base de datos se
agregará la tabla pasteles y en la tabla migrations se añadirá el registro de la
migración recien ejecutada.
Pero, ¿si quisiera eliminar la tabla con la función down de la
migración crear_tabla_pasteles?

Esto se puede resolver de dos formas básicamente:

1. Con el comando php artisan migrate:rollback que lo que hará es deshacer la


última migración ejecutada y registrada en la base de datos.
2. Con el comando php artisan migrate:reset que lo que hará es deshacer todas las
migraciones de la base de datos.

• Nota: Un comando extra que nos permite actualizar las migraciones es el


comando php artisan migrate:refresh , el cual es equivalente a usar php artisan
migrate:reset y después php artisan migrate.

En el dado caso que necesitaramos agregar más campos a la tabla pasteles,


podríamos simplemente ir a la migración crear_tabla_pasteles y en la
función up poner la nueva columna, pero con esto perderiamos la primer versión
de la tabla, entonces para poder ejeplificar como se agregan columnas con las

25
migraciones crearemos una nueva que se
llame agregar_campos_tabla_pasteles con los comandos que ya hemos visto:

1. Primero ejecutamos el comando: php artisan make:migration

agregar_campos_tabla_pasteles , para crear la migración simple sin la plantilla.


2. Dentro de la función up agregamos los campos que necesitamos, en este caso
solo agregaremos el nombre y el sabor.

3. Después como la función down hace lo opuesto que la función up, dentro de esta
eliminaremos los campos recien agregados.

Ahora el archivo resultante quedaría así:

26
Para poder agregar más columnas a las tablas desde Laravel en vez de llamar al
método createllamamos al método table de la clase Schema pasandole como
primer parámetro a que tabla se va a agregar los campos y como segundo
parámetro la función anónima donde definimos que columnas se agregaran.
Y en la función down para eliminar columnas que vendría siendo lo opuesto de
agregarlas, se llama al método table y dentro de la función anónima del
objeto $table se usa el método dropColumn() que recibe como parámetro ya sea el
nombre de una sola columna o un arreglo con todas las columnas que se desean
eliminar.

27
Y ¡listo!, con esto podemos tener una idea inicial de como usar las migraciones,
lo que para este ejemplo podría continuar sería agregar más columnas a la tabla
pasteles y probar los comandos necesarios para poder deshacer los cambios de
la primera vez que se corrio la migración con una nueva versión, ya sea sobre el
mismo archivo o sobre otro nuevo.

Beneficios

• Tenemos un mayor control de las versiones de la base de datos.

• Podemos con un simple comando ver reflejados los cambios de nuestra base de
datos.

• El lenguaje en el cual se trabaja sigue siendo PHP, por lo cual no se diferencia


tanto de lo que ya nos acostumbraremos con Laravel.

• La ultima versión de nuestra base siempre estará actualizada para todos los
miembros del equipo de trabajo si usamos un control de versiones como GIT.

• Provee de portabilidad para diferentes gestores, usando el mismo código.

Seeders

Los Seeders por otra parte son archivos que nos van a permitir poblar nuestra
base de datos para no tener que perder el tiempo escribiendo de forma manual
todos los datos, un ejemplo, imagina llenar 15 tablas con 100 registros cada una
y piensa en que entre cada tabla deben existir registros que se relacionan entre
sí, eso suena de verdad horrible y tedioso, por lo cual Laravel nos salva con estos
archivos Seeders.

Un Seeder se ubica en la carpeta database/seeds/ de nuestro proyecto de Laravel


y para poder crear un nuevo Seeder se usa el comando:
php artisan make:seeder nombre_seeder
Esto nos creará un archivo en la carpeta database/seeds/ que tendrá el nombre
que le demos en el comando, por ejemplo crearemos uno retomando el ejemplo

28
anterior de las migraciones, se llamará PastelesSeeder, por lo cual el comando
quedaria de la siguiente forma:
php artisan make:seeder PastelesSeeder
Con esto ya tenemos el archivo pero no es todo lo que necesitamos para poder
trabajar con datos autogenerados, para ello usaremos un componente
llamado Faker el cual se encargará de generar estos datos, por defecto el
boilerplate del proyecto de Laravel 5.1 que estamos trabajando viene ya
con Fakerdentro del composer.json por lo cual ya debe estar instalado dentro de
nuestro proyecto, ahora bien si estamos trabajando con una instalación Laravel
5.0 sin el componente Faker basta con ir al archivo composer.json y agregar en
el "require-dev" las dependencias y para tener una idea más clara podemos ir a
la página de Packagist donde se encuetra Faker o a su Repositorio en Github y
ahí nos muestra que es lo que se debe agregar.

Al final solo se ocupa el comando composer update para actualizar las


dependencias y descargar Fakeral proyecto.
Una vez ya teniendo Faker iremos a nuestro archivo PastelesSeeder y dentro
podremos observer que se encuentra una función llamada run() que es donde
nosotros vamos a usar Faker para poblar, ahora bien antes de todo debemos
agregar la clase de Faker a nuestro Seeder, para esto agregamos al inicio del
archivo la linea:
use Faker\Factory as Faker;
Quedando el archivo de la siguiente forma:

29
Después crearemos una variable llamada $faker que nos servira para poblar la
base de datos, ahora bien usando la clase DB, si bien dentro del ejemplo
queremos crear 50 pasteles vamos a crear un for para que ejecute nuestro código
de inserción 50 veces y el componente de Faker en cada pasada cambiará los
valores del registro que se va a agregar, quedando de esta forma:
$faker = Faker::create();
for ($i=0; $i < 50; $i++) {
\DB::table('pasteles')->insert(array(
'nombre' => $faker->firstNameFemale,
'sabor' => $faker-
>randomElement(['chocolate','vainilla','cheesecake']),
'created_at' => date('Y-m-d H:m:s'),
'updated_at' => date('Y-m-d H:m:s')
));
}
Creamos nuestro objeto Faker, el cual puede generar información falsa para
nuestra base de datos y ahora usamos la clase DB el método table para llamar la
tabla donde se va a insertar la información y se le concatena el método insert() el
cual recibe por parametro un arreglo clave => valor con los campos de la tabla.

30
Faker tiene muchas variedades de datos, los cuales podemos consultar en
su Repositorio de Github así como su uso básico.

En este ejemplo usamos una propiedad que se llama firstNameFemale para


darle nombre al pastel y la propiedad randomElement que de un arreglo que se
le da asigna un elemento de ese arreglo aleatoriamente.

Y ahora lo que sigue es abrir un archivo llamado DatabaseSeeder.php , en este


archivo se mandan a llamar todos los seeders en el orden que los necesitemos,
en este archivo se agregará la linea:
$this->call('PastelesSeeder');
que en si mandará a llamar nuestro seeder recien creado y para ejecutar este
archivo se usa el comando:

php artisan db:seed


Y con esto queda poblada la tabla pasteles y lo puedes verificar en tu gestor de
base de datos.

Cuando trabajamos con Migraciones y Seeder por primera vez puede parecer un
poco más complicado que a lo que estamos acostumbrados pero las ventajas que
nos da superan por mucho a la forma convencional, además de ser una forma
más profesional de trabajar.

Unos comandos extras que nos pueden ser utiles son:

php artisan migrate --seed


El comando anterior lo que hace es realizar una combinación entre los
comandos php artisan migratey php artisan db:seed.
+
php artisan migrate:refresh --seed
El comando anterior lo que hace es realizar una combinación entre los
comandos php artisan migrate:refresh y php artisan db:seed.

Modelos y uso de Eloquent

31
Eloquent

En Laravel podemos hacer uso de un ORM llamado Eloquent, un ORM es


un Mapeo Objeto-Relacionalpor sus siglas en ingles (Object-Relational
mapping), que es una forma de mapear los datos que se encuentran en la base
de datos almacenados en un lenguaje de script SQL a objetos de PHP y
viceversa, esto surge con la idea de tener un codigo portable con el que no
tengamos la necesidad de usar lenguaje SQL dentro de nuetras clases de PHP.

Eloquent hace uso de los Modelos para recibir o enviar la información a la base
de datos, para esto analizaremos el modelo que viene por defecto en Laravel,
este es el modelo User que se ubica en la carpeta app/, los modelos hacen uso
de PSR-4 y namespaces, un modelo nos ayuda a definir que tabla, atributos se
pueden llenar y que otros se deben mantener ocultos.
Los modelos usan convenciones para que a Laravel se le facilite el trabajo y nos
ahorre tanto líneas de código como tiempo para relacionar más modelos, las
cuales son:

• El nombre de los modelos se escribe en singular, en contraste con las tablas de


la BD que se escriben en plural.

• Usan notacion UpperCamelCase para sus nombres.

Estas convenciones nos ayudan a detectar automaticamente las tablas, por


ejemplo: el modelo User se encuentra en singular y con
notacion UpperCamelCase y para Laravel poder definir que tabla es la que esta
ligada a este modelo le es suficiente con realizar la conversion a
notacion underscore y plural, dando como resultado la tabla: users.

Y esto aplica para cuando queremos crear nuestros modelos, si tenemos una
tabla en la base de datos con la que queremos trabajar que se
llama user_profiles, vemos que se encuentra con las convenciones para tablas
de bases de datos (plural y underscore), entonces el modelo para esta tabla
cambiando las convenciones seria: UserProfile (singular y UpperCamelCase).

32
Retomando el ejemplo que vimos en el Capítulo 6 sobre la migracion de pasteles,
crearemos ahora un modelo para poder trabajar con esa tabla, el cual recibira el
nombre de Pastel y el comando para poder crear nuestro modelos es:

php artisan make:model Pastel y php artisan make:model nombreModelo -mcr

(mcr crea modelo mas migración controlador y recursos)


Con esto se generará el archivo en donde ya se encuentra el modelo User en la
carpeta app/ y dentro de el vamos a definir la tabla que se va a usar con esta
linea:
protected $table = 'pasteles';

¿Pero no se suponia que Laravel identificaba automáticamente que tabla usar?

Si lo hace pero si cambiamos las convenciones del modelo Pastel el resultado


seria pastels y nuestra tabla se llama pasteles, esto es un problema para
nosotros por el hecho del uso del lenguaje español porque la conversion de
singular a plural no es la misma que la forma en que se hace en ingles, debido a
esto nos vemos forzados a definir el nombre de la tabla.

Bien una vez creado nuestro modelo pasaremos a crear una ruta de tipo get en
nuestro archivo routes.php, posteriormente estudiaremos el enrutamiento básico
en Laravel en el

Capítulo 9, por el momento solo seguiremos el ejemplo, que quedaria de la


siguiente forma:

Route::get('pruebasPastel', function(){

});
Dentro de esta ruta de prueba vamos a usar nuestro modelo, pero como estamos
usando la especificacion PSR-4 debemos incluir el namespace del modelo al
inicio del archivo, que seria igual a esto:

use Curso\Pastel;

33
Con esto estamos diciendo que incluya la clase Pastel que es nuestro modelo, y
con esto podemos ya hacer consultas a nuestra BD y mapear a objetos PHP. En
la documentacion oficial de Laravel podemos ver todas las opciones que nos
permite Eloquent, unas de las instrucciones basicas de este son get()que nos
regresa todos los registros de la BD y first() que nos regresa el primer registro de
una seleccion.

A su vez podemos unir esto a más filtros de seleccion SQL, como por ejemplo
seleccionar el primer pastel de vainilla, la sintaxis de Eloquent seria la siguiente:

$pastel = Pastel::where('sabor','vainilla')->first();
Esto nos va a dar el primer pastel sabor vainilla, pero si quisieramos todos los
pasteles de vainilla cambiariamos el metodo first() por el metodo get() para
obtener todos.
Y si queremos ver el resultado de esto y que de verdad estamos haciendo lo
correcto podemos usar la funcion dd() para mostrar en pantalla el valor de una
variable, con esto entonces nuestra ruta le agregariamos lo siguiente:
Route::get('pruebasPastel', function(){
$pasteles = Pastel::where('sabor','vainilla')->get();
dd($pasteles);
});
Y en el navegador deberiamos ver algo como esto:

34
Esto es la función dd($pasteles) mostrando el contenido de la variable $pasteles.
Ahora bien si tuvieramos la necesidad de realizar siempre un mismo filtro,
Eloquent nos provee de una herramienta llamada scopes que lo que realizan son
consultas en especifico encapsulandolas dentro de funciones en el modelo, por
ejemplo si quisieramos que el modelo Pastel tuviera una funcion que me diera
todos los pasteles de vainilla, otra de chocolate y otra función mas para
cheesecake, entonces podria crear un scope para cada una.
Con el ejemplo de la ruta pruebasPastel para el sabor vainilla:

public function scopeVainilla($query){


return $query->where('sabor','vainilla');
}
Los scopes en la función se debe iniciar el nombre de la función con la
palabra scope y seguido en notacion camelCase el nombre con el cual se va a
llamar el scope. Y su equivalente dentro de la ruta seria la siguiente:

Route::get('pruebasPastel', function(){
$pasteles = Pastel::vainilla()->get();
dd($pasteles);

35
});
También podemos crear scopes dinámicos de la siguiente forma:

public function scopeSabor($query, $sabor){


return $query->where('sabor',$sabor);
}
Esto nos daria una función genérica para obtener los pasteles de cierto sabor y
su implementación sería asi:

Route::get('pruebasPastel', function(){
$pasteles = Pastel::sabor('vainilla')->get();
dd($pasteles);
});
Además con Eloquent tambien podemos insertar, actualizar o eliminar registros,
por ejemplo:

Para insertar la sintaxis seria la siguiente:

$pastel = new Pastel;

$pastel->nombre = 'Pastel Richos Style';


$pastel->sabor = 'chessecake';

$pastel->save();
Para actualizar seria la siguiente:

$pastel = Pastel::find(51);

$pastel->sabor = 'chocolate';

$pastel->save();
Para eliminar seria la siguiente:

$pastel = Pastel::find(51);

$pastel->delete();
o bien podriamos destruir el registro directamente con el modelo si tenemos su
ID:

36
Pastel::destroy(51);

Model Factories
Los model factories son una excelente forma de poblar nuestra base de datos con
datos de prueba generados automáticamente. Laravel en su versión 5.1 incorpora
este nuevo componente por defecto, en versiones anteriores a Laravel 5.1 era
necesario agregar el componente faker en nuestro composer.jsony realizar el
proceso de manera manual en los archivos seeders, para más información sobre
estre proceso puedes visitar el link de github del componente Faker.

Los model Factories en realidad también trabajan con el componente Faker, esto
lo podemos confirmar si miramos nuestro composer.json, sin embargo, nos
ofrecen una manera más elegante y ordenada de trabajar.

Laravel 5.1 trae un ejemplo de como usar este nuevo componente, lo podemos
encontrar en el archivodatabase/factories/ModelFactory.php.

El método $factory->define() regresa un array con los datos del modelo que se
va a poblar, recibe como primer parámetro el modelo con el que deseamos
trabajar y como segundo parámetro una función que recibe como parámetro un
objeto $faker.
Ejemplo:

$factory->define(App\User::class, function ($faker) {


return [
'name' => $faker->name,
'email' => $faker->email,
'password' => str_random(10),
'remember_token' => str_random(10),
];
});
El método $factory->defineAs() regresa un array con los datos del modelo que se
va a poblar, recibe como primer parámetro el modelo con el que deseamos

37
trabajar, como segundo parámetro un tipo especifico de poblado y como tercer
parámetro una función que recibe como parámetro un objeto $faker.
Ejemplo:

// Creamos un model factory para poblar usuarios de tipo administrador


$factory->defineAs(App\User::class, 'administrador', function ($faker) {
return [
'name' => $faker->name,
'email' => $faker->email,
'password' => str_random(10),
'type' => 'administrador',
'remember_token' => str_random(10),
];
});

// Creamos un model factory para poblar usuarios de tipo encargado


$factory->defineAs(App\User::class, 'encargado', function ($faker) {
return [
'name' => $faker->name,
'email' => $faker->email,
'password' => str_random(10),
'type' => 'encargado',
'remember_token' => str_random(10),
];
});
En el ejemplo de arriba hemos creado dos tipos de poblado para el modelo User,
uno será para poblar usuarios de tipo "administrador" y otro para usuarios de tipo
"encargado".

Una vez creados los Model Factories, debemos ir al


archivo database/seeds/DatabaseSeeder.php y ejecutar el poblado dentro del
método run como en el siguiente ejemplo:
public function run()
{
Model::unguard();
factory('Curso\User', 50)->create();

38
factory('Curso\User','administrador',1)->create();
// $this->call('UserTableSeeder');
Model::reguard();
}
El objeto factory recibe como parámetros el nombre del modelo, el tipo de
poblado como parámetro opcional y el número de registros que deseamos crear.
Con el método create realizamos el poblado de datos.
+

Ejemplos:

factory('Curso\User',100)->create();

// Opcionalmente podemos agregar el tipo de poblado


factory('Curso\User', 'administrador',100)->create();

Rutas

Enrutamiento básico
La siguiente imágen muestra el proceso que se realiza cuando ingresamos a una
URL. Además muestra la arquitectura del patrón MVC que utiliza laravel para el
desarrollo de proyectos.

39
Cuando ingresamos a una url directamente desde el navegador lo hacemos
mediante una petición http de tipo GET, esta solicitud se envía al archivo
routes.php ubicado dentro de app/Http/routes.php, en caso de no existir nos
dará un error, si la ruta existe, nos llevará a un controlador en el cuál se encuentra
la lógica , el controlador interaccionará con un modelo (opcionalmente) para
recuperar información de una base de datos. Esta información llega al controlador
y desde el controlador invocamos una vista, las vistas se encuentran en el
directorio resources/views, finalmente la vista se carga y se muestra en el
navegador.

Así es como funciona el modelo MVC (Model-View-Controller).

Supongamos que queremos ingresar a la siguiente


URL http:/dominio.com/saludo y desplegar una página con el mensaje
“Bienvenido :)”. En laravel la porción /saludo pertenecería a una ruta que regresa
una respuesta o una vista dependiendo lo complejo que llegue a ser lo que
queramos mostrar. La parte de dominio.com pertenecería a localhost si lo
andamos probando de manera local. En nuestro ejemplo lo que mostraremos es

40
un mensaje muy simple por lo cual no es necesario hacer mostrar una vista. Para
lograrlo haremos lo siguiente:

Route::get('saludo', function () {
return "Bienvenido :)";
});
Lo que debería mostrar un mensaje similar a este:

41
Tipos de rutas por encabezado Http
Las rutas están siempre declaradas usando la clase Route . Eso es lo que
tenemos al principio, antes de :: . La parte get es el método que usamos para
‘capturar’ las peticiones que son realizadas usando el verbo ‘GET’ de HTTP hacia
una URL concreta.

Como verás, todas las peticiones realizadas por un navegador web contienen un
verbo. La mayoría de las veces, el verbo será GET , que es usado para solicitar
una página web. Se envía una petición GET cada vez que escribes una nueva
dirección web en tu navegador.

Aunque no es la única petición. También está POST , que es usada para hacer
una petición y ofrecer algunos datos. Normalmente se usa para enviar un
formulario en la que se necesita enviar los datos sin mostrarlo en la URL.

Hay otros verbos HTTP disponibles. He aquí algunos de los métodos que la clase
de enrutado tiene disponible para ti:

Route::get();
Route::post();
Route::any();
Route::delete();
Route::put();
Cualquier método de la clase Route recibe siempre dos argumentos, el primero
es la URI con la que queremos hacer coincidir la URL y el segundo es la función
a realizar que en este caso es un Clousure que no es otra cosa que una función
anonima, es decir, que no tiene un nombre.

Rutas de tipo get


En este caso ocuparemos el método estático get para escribir una ruta que
responda a una petición de este tipo, las rutas de tipo get son las más usadas. El

42
método estático get recibe como primer parámetro un string indicando la url con
la cuál vamos a ingresar, el string "/alumnos" responderá a la
solicitud http://localhost:8000/alumnos, el string "/" equivale a
htpp://localhost:8000, es decir, la ruta por defecto. Como segundo parámetro el
método estático get recibe un closure (una función sin nombre) que puede
devolver una view o un string.
// ruta de tipo GET que devuelve una vista
Route::get('/', function () {
return view('welcome');
});

// ruta de tipo GET que devuelve un simple string


Route::get('/', function () {
return "Hola mundo";
});
El método view dentro del closure recibe como parámetro el nombre de una vista
sin la extensión. En el ejemplo de arriba la vista welcome se encuentra ubicada
en resources/views/welcome.blade.php si
escribimos view('pasteles.lista_pasteles') estamos indicando que regresará el
archivo lista_pasteles.blade.php ubicado
en resources/views/pasteles/lista_pasteles.blade.php. Las vistas las veremos
en el capítulo 10.
Las rutas pueden ser relacionadas con métodos de un controlador. En el siguiente
ejemplo, la ruta http://localhost:8000/home regresará lo que indiquemos en el
método index del ControllerHomeController.

Route::get('home', 'HomeController@index');

Parametros en las rutas de tipo get


Los parámetros de las rutas pueden ser utilizados para introducir valores de
relleno en tus definiciones de ruta. Esto creará un patrón sobre el cual podamos
recoger segmentos de la URI y pasarlos al gestor de la lógica de la aplicación.
Para dejarlo un poco más claro pondremos unos ejemplos.
43
De igual forma es posible restringir rutas por medio de expresiones regulares
como por ejemplo:

En la imagen anterior podemos ver dos conceptos nuevos, el uso de valores por
default lo cúal logramos con el simbolo (?) despues del nombre de la variable y
en la función asignandole un valor por defecto, en este caso el entero 1.

Lo segundo que vemos es el uso del método where el cúal nos permite establecer
expresiones regulares a las variables que usamos en la construcción de las URIs.

44
Vistas y Blade
Las vistas en Laravel son la parte pública que el usuario de nuestro sistema va a
poder ver, se escriben en HTML junto con un motor de plantillas llamado Blade.
Las vistas se encuentran ubicadas en la carpeta resources/views/ y Laravel por
defecto trabaja con la idea de que tenemos que escribir la menor cantidad de
código repetido, modularizar nuestro código en donde mas se pueda, y si esto lo
aplicamos en nuestros modelos, controladores y demás partes de nuestro
proyecto, entonces, ¿Por que no hacerlo tambien en las vistas?.
Laravel usa unos archivos que se llaman plantillas o templates que suelen ser
nuestros archivos principales, que tienen los segmentos de código que se repiten
en mas de una vista, como por ejemplo la barra de navegacion, un menú de
opciones, la estructura del acomodo de nuestro proyecto, etc. y como deben de
estar practicamente presentes en todos lados, no tiene sentido estarlos repitiendo
en todas las vistas. Por defecto Laravel contiene
un template llamado app.blade.php, usualmente los templatescontienen el
head del HTML, las ligas del CSS del sistema y una seccion exclusiva para los
archivos Javascript.

Además de los templates, se cuentan con archivos que se llaman partials, estos
archivos son pequeños segmentos de código que suelen ser usados comunmente
en partes del sistema en especifico, como los formularios o secciones de
mensajes, estos archivos surgen por el código que es mas pequeño que
repetimos mucho pero no es lo suficientemente grande como para considerarlo
un template.

Esto hace que las vistas de cada parte del proyecto, que suelen ser llamadas por
una ruta o controlador sean mucho mas pequeñas que usando otro tipo de
frameworks para desarrollo Web, y para poder unir todos estos archivos o piezas
del rompecabezas usamos el motor de plantillas de Laravel llamado BLADE.

45
Antes de ver mas sobre el motor de plantillas Blade, veremos como trabajar con
las Vistas y llamarlas desde una ruta, crearemos un vista simple con un archivo
nuevo en la carpeta resources/views/ llamado saludo.blade.php con el siguiente
código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vista ejemplo</title>
</head>
<body>
<h1>Hola mundo desde Laravel</h1>
</body>
</html>
Es un HTML simple con un titulo 1, ahora vamos a crear una ruta que nos muestre
esta vista:

Route::get('saludo', function(){
return view('saludo');
});
De esta forma con la función view() le estamos diciendo a Laravel que busque
dentro de la carpeta resources/views/ la vista saludo.blade.php, por convension
las vistas Laravel no necesita que especifiquemos la extension .blade.php, sino
solo su nombre. Una vez hecho esto debemos ver este resultado o uno similar:

46
Continuando con el ejemplo de los Pasteles vamos a mandar a la vista el nombre
de un pastel, dentro de la ruta saludo vamos a obtener el primer Pastel de
chocolate de nuestra BD y a poner ese nombre en vez del mensaje. Para esto
podemos usar el scope de sabor para obtener los pasteles de chocolate y
despues decirle que con el metodo first() nos regrese el primer pastel y eso
guardarlo en una variable, dejando la ruta de la siguiente forma:

Route::get('saludo', function(){
$pastel = Pastel::sabor('chocolate')->first();
return view('saludo')->with('pastel', $pastel->nombre);
});
De esta forma estamos diciendo a la ruta que nos regrese la
vista saludo.blade.php con una variable llamada pastel, que es el nombre del
pastel, pero esto por si solo no lo va a mostrar el navegador, solo va a mandar la
variable, para que el navegador la muestre debemos agregar un titulo donde este
esa variable de esta forma:

<h2>{{ $pastel }}</h2>


Esta linea va justo abajo del mensaje Hola mundo desde Laravel, y ahora si
debemos de ver algo parecido a esto ya que nuestras BD tienen cosas diferentes
y gracias a Faker ninguno de nuestros resultados deberia ser igual:

47
Ahora si bien usamos los caracteres de las dobles llaves y no sabemos bien que
son, esto es parte de la sintaxis que ahora veremos con Blade.

Blade

Blade nos provee de muchas ventajas (asi como casi todo en Laravel), además
de modularizar nuestras vistas de una forma sorprendente, tambien nos permite
usar estructuras de control y variables de PHP directamente en ellas, aunque esto
ya era posible antes usando las etiquetas de php, por ejemplo:

<?php echo $var ?>

<?= $var ?>


Pero esto además de ser un poco incomodo de escribir deja nuestras vistas
mucho más difíciles de entender y sucias por la mezcla de tanto código.

Entonces para el ejemplo anterior usamos el siguiente código:

{{ $pastel }}
Esto es el equivalente a <?= $pastel ?> y aunque con un ejemplo tan sencillo no
se ve demasiada diferencia, con lo siguiente podremos verificar la potencia de
este motor de plantillas.

48
Usualmente las estructuras de control que conocemos las usamos en los archivos
PHP dedicados al Back-end (lado del servidor), pero blade nos da una sintaxis
muy comoda para este tipo de estructuras que con PHP plano son muy sucias e
incomodas de usar.

Para cada una de estas estructuras como lo son If, else, elseif, for, foreach,
etc., se antepone un @para usar estas estructuras y listo!! eso en suficiente, pero
a diferencia de como estamos a costumbrados de encapsular un grupo de
sentencias o lineas de código con llaves { }, en blade definimos el fin de una
estructura con un @end seguido del nombre de la estructura que usamos, por
ejemplo:

<h1>Lista de pasteles</h1>
@foreach($pasteles as $pastel)
<h2>{{ $pastel->nombre }}</h2>
@endforeach
Entonces en la ruta donde regresamos solo un nombre de un pastel, podriamos
regresar todos los pasteles y escribir una lista de todo los pasteles de un cierto
sabor e imprimirla en la vista.

Un ejemplo para el if seria:

@if( $pasteles->count() > 10 )


<h1>Hay muchos Pasteles</h1>
@endif
<h1>Lista de pasteles</h1>
@foreach($pasteles as $pastel)
<h2>{{ $pastel->nombre }}</h2>
@endforeach
El if nos dice, si el numero de pasteles que recibimos es mayor a 10 entonces
escribe el titulo Hay muchos Pasteles.

Esto aplica para todas las estructuras, su lógica es la misma pero solo cambia un
poco su sintaxis, pero hace que el HTML quede mas limpio que si incrustaramos
PHP plano dentro de nuestra vista.

49
Templates y Partials
Anteriormente hablabamos de templates y partials, describiremos un poco de
como se trabaja con esta estructuras de Blade y sus beneficios:

Templates
Estos archivos como se menciona al principio del capítulo son plantillas que nos
ahorran mucho código o leguaje HTML, y para usar un template se usa la
sentencia:

@extends('template') (significa que hereda @extends(“carpeta.archivo”)


Claramente se tendria que sustituir la palabra template dentro de la
sentencia extends por el nombre de la vista que va a funcionar
como template o plantilla.

Un template es una vista como las demás, simplemente que dentro de ella se
usan otras sentencias que nos va a permitir definir areas del archivo que se van
a poder sustituir mas adelante dentro de otra vista si es que lo deseamos. Para
esto se ocupa la sentencia:

@yield('nombre_seccion')
Para declarar una seccion que se va a rellenar en otro lugar:

@section('nombre_seccion')
que funciona de la misma forma que yield() con la diferencia que en la seccion
puedes definir HTML por defecto en caso de no definir la seccion con un nuevo
HTML.

Definiremos nuestra vista recien creada saludo.blade.php para que use un


template, por defecto Laravel trae uno que se llama app.blade.php, ese es el que
usaremos para este ejemplo.

50
El template app por defecto tiene definida un yield llamado content que significa
contenido, por lo cual la lista de pasteles que tenemos la vamos a agregar en esta
parte y la vista quedaria de la siguiente forma:

@extends('app')

@section('content')
<h1>Lista de pasteles</h1><br>
@if( $pasteles->count() > 10 )
<h2>Hay muchos Pasteles</h2><br>
@endif
@foreach($pasteles as $pastel)
<h4>{{ $pastel->nombre }}</h4>
@endforeach
@stop
Ahora nuestra vista ya no tiene el encabezado HTML normal ni las
etiquetas <body> ni <html>, sino que estamos diciendo que vamos a extender del
template app y que el yield content lo vamos a sustituir por nuestro propio
contenido, cabe mencionar que aunque en el template se uso la
sentencia yield('content'), al momento de sustituirla la vamos a cambiar
por section('content'), por lo cual en todas las vistas hijas del template solo se
va a definir secciones y el fin de esa seccion se va a declarar con la
entencia @stop.
Ahora el resultado seria algo parecido a esto:

51
Nos podemos dar cuenta que cambiaron muchas cosas, ahora tenemos una barra
de navegacion en la parte superior de la ventana y el debugbar en la parte inferior,
además de que la tipografia ha cambiado. Esto es porque dentro del template app
se estan agregando hojas de estilo CSS.

Partials
Continuaremos con los partials, basicamente es lo mismo que ya hemos visto
pero con una sentencia mas que se llama include('nombre.partial') , la cual esta
incluyendo o incrustando un archivo de HTML, podemos hacer un simil con
los use de PSR-4 o los import de Java, a diferencia de que esto lo inlcuye justo
en el lugar donde lo definimos.
Vamos a verlo con un ejemplo practico.

Dentro la actual vista saludo.blade.php, vamos a quitar todo el HTML Blade que
definimos para crear esta lista pequeña de pasteles y lo vamos a guardar en
nuevo archivo, para esto vamos a crear una carpeta llamada pasteles y dentro
otra carpeta llamada partials, donde vamos a guardar la vista de nuestro nuevo
partial, quedando la ruta de la siguiente
forma: resources/views/pasteles/partials/ .

52
Ahi vamos a crear un archivo llamado lista.blade.php y dentro de este archivo
vamos a cortar el código de nuestra vista saludo, quedando asi:

<h1>Lista de pasteles</h1><br>
@if( $pasteles->count() > 10 )
<h2>Hay muchos Pasteles</h2><br>
@endif
<ul>
@foreach($pasteles as $pastel)
<li>{{ $pastel->nombre }}</li>
@endforeach
</ul>
Y nuestra vista saludo.blade.php quedaria de esta forma una vez que ya
incluyamos nuestro partial:

@extends('app')

@section('content')
@include('pasteles.partials.lista')
@stop
Si todo lo hacemos bien nuestra vista en el navegador debe seguir viendose de
la misma manera, pero si se dan cuenta ahora se encuentra mucho mas modular
nuestro HTML, si la lista de Pasteles la necesitaramos en otra vista ahora solo
necesitamos hacer un @include('pasteles.partials.lista') y con eso ya
tendremos nuestra lista agregada en cualquier vista donde la necesitemos.

Resumen, Anotaciones e informacion adicional

Blade es un motor de plantillas potente que nos permite modularizar y estilizar a


un gran nivel nuestro HTML.

Como recordatorio listaremos algunas de las sentencias de Blade junto con su


funcion:

• @extends('nombre_template'): Esta sentencia nos ayuda a decirle a una vista


cual va a ser el template que se va a usar.

53
• @yield('nombre'): Esta sentencia nos permite declarar un futuro section de
nuestro HTML que se definira en las vistas que son heredadas y no puede
agregarse algun tipo de contenido por defecto, este sólo se usa en archivos que
toman el rol de Template .

• @section('nombre'): Esta sentencia tiene dos usos dependiendo de que


queremos declarar, el primero es que nos permite declarar como su nombre lo
dice una sección dentro del template que puede tener un contenido por defecto
que si no es redefinido en la vista que herede el template entonces aparecera; el
segundo nos permite asignar el contenido en una seccion que fue declarada en
nuestro template, es decir esta palabra section se usa tanto en el template como
en las vistas hijas, una diferencia mas es que si se usa en el template entonces
la seccion temina con un @show, pero si se usa en una vista hija entonces
termina la seccion con un @stop.

• @show: Esta sentencia se usa para decir donde termina el section definido en
el template.

• @parent: Esta sentencia nos ayuda a cargar el contenido por defecto de


un section del template, esto podemos usarlo cuando queremos agregar mas
contenido dentro pero sin alterar el contenido por defecto, es decir agregarle mas
HTML, esta sentencia se usa dentro de un section, podemos hacer un simil con
el super() de Java que sirve para llamar al contructor de la superclase de la que
se hereda.

• @stop: Esta sentencia nos permite decir donde termina un section cuando se
usa el section dentro de las vistas hijas.

• @include('ruta.nombre'): Esta sentencia nos agrega en el lugar donde sea


usada un archivo blade.php que contiene un partial o fragmento parcial de HTML,
si ese partial se encuentra en la raíz de las vistas no necesita mas que el nombre
sin la extension blade.php, pero si esta dentro de, por ejemplo, la
carpeta "views/admin/users/" llamado table.blade.php para poder ser incluido
se usaría la ruta junto con el nombre quedando

54
como @include('admin.users.table') , views no se contempla pues es la raiz de las
vistas.

Para mas informacion de Blade podemos ir a la documentacion oficial de Laravel


sobre templates.

Controladores
En lugar de definir en su totalidad la lógica de las peticiones en el archivo
routes.php, es posible que desee organizar este comportamiento usando clases
tipo Controller. Los Controladores puede agrupar las peticiones HTTP
relacionada con la manipulación lógica en una clase.
Los Controladoresnormalmente se almacenan en el directorio de
aplicación app/Http/Controllers/ .
Un controller usualmente trabaja con las peticiones:

• GET.
• POST.
• PUT.
• DELETE.
• PATCH.

Asociando los métodos de la siguiente forma:

• GET: index, create, show, edit.


• POST: store.
• PUT: update.
• DELETE: destroy.
• PATCH: update.

55
Los controladores nos ayudan a agrupar estas peticiones en una clase que se liga
a las rutas, en el archivo app/Http/routes.php , para esto usamos un tipo de ruta
llamana resource:
Route::resource('pasteles', 'PastelesController');
Esta ruta nos creara un grupo de rutas de recursos con las peticiones que estas
mencionadas arriba: index, create, show, edit, store, update, destroy. Estas
son las operaciones mas usadas en una clase y para no tener que crear una ruta
para cada método es que Laravel agrupa todo esto con una ruta de tipo resource
que se liga a un controlador.

Estos métodos significan:

• index: Es el método inicial de las rutas resource, usualmente lo usamos para


mostrar una vista como página principal que puede contener un catalogo o
resumen de la información del modelo al cual pertenece o bien no mostrar
información y solo tener la función de página de inicio.

• create: Este método lo podemos usar para direccionar el sistema a la vista donde
se van a recolectar los datos(probablemente con un formulario) para después
almacenarlos en un registro nuevo, usualmente redirige al index.

• show: Aqui podemos hacer unna consulta de un elemento de la base de datos o


de todos los elementos o registros por medio del modelo para realizar una
descripcion.

• edit: Este método es similar al de create porque lo podemos usar para mostrar
una vista que recolecta los datos pero a diferencia de create es con el fin de
actualizar un registro.

• store: Aqui es donde se actualiza un registro en especifico que proviene del


método create y normalmente redirige al index.

• update: Al igual que el store, solo que en vez de provenir de create proviene
de edit y en vez de crear un nuevo registro, busca un existente y lo modifica,
tambien suele redirigir al index.

56
• destroy: En este método usualmente se destruye o elimina un registro y la petición
puede provenir de donde sea siempre y cuando sea llamado con el
método DELETE, después puede redirigir al index o a otro sitio dependiendo si
logro eliminar o no.

Ahora esto no quiere decir que un controlador necesariamente debe ejecutar


estas peticiones obligatoriamente, podemos omitirlas o incluso agregar mas.

Para crear controladores en Laravel usamos artisan con el siguiente comando:

php artisan make:controller NameController


El comando anterior creara un controlador en la
carpeta app/Http/Controllers/ que por defecto va a tener todos estos métodos
dentro de si, entonces agregaremos la ruta de tipo resourse anterior al archivo de
rutas y correremos el siguiente comando en la consola:
php artisan make:controller PastelesController
Con esto vamos a poder trabajar para cada método del controlador una ruta y las
funciones internas son las que se van a ejecutar, el archivo creado se verá de la
siguiente manera:

57
En la linea de comandos podemos ver todas las rutas que nuestro proyecto tiene
registradas:

php artisan route:list

58
Este comando nos va a mostrar en la consola un resultado similar a esto:

aqui podemos ver el nombre de nuestras rutas, de que tipo son, si es que reciben
parametros y como se llaman, esta información es muy util para poder asociar los
métodos del controlador con las rutas y tambien como es que las vamos a usar
en el navegador.

Por ejemplo la ruta pateles/{pasteles} de tipo GET con el


nombre pasteles.index, se asocia a la función index() del controlador
PastelesController y por consecuente lo que hagamos en esa función lo podremos
ver en el navegador.
Los controladores son un tema complicado y extenso asi como el enrutamiento
aunque en el curso solo vimos enrutamiento basico, por lo cual dejamos los links
de la documentacion oficial de Controladores y de Enrutamiento en la version 5.1
de Laravel.

Validaciones en Laravel
59
Existen varias formas de validar nuestra aplicación para cubrir aspectos de
seguridad como SQL Injection, ataques XSS o CSRF, algunas de ellas son:

• Validación de lado del cliente (Javascript y etiquetas HTML).


• Validación a nivel de base de datos (Migraciones y modelos).
• Validación de formularios (Request).

Validación del lado del cliente:


Podemos validar que los campos de un formulario sean requeridos al agregar el
atributo required.
<form action="demo_form.asp">
Username: <input type="text" name="username" required>
<input type="submit">
</form>
El atributo required es un atributo booleano. Cuando esta presente, este
especifica que un campo debe ser rellenado antes de ser enviado el contenido
del formulario.
El atributo required trabaja con los siguientes tipos de input:

• text
• search
• url
• tel
• email
• password
• data pickers
• number
• checkbox

El atributo pattern

Con se menciono anteriormente, con required solo se necesita de cualquier valor


en el elemento <input> para ser válido, pero utilizando el atributo pattern en

60
conjunto, se logra que se verifique no solo la presencia de un valor, sino que este
valor debe contener un formato, una longitud o un tipo de dato especifico. Esto
último se logra definiendo un patrón con expresiones regulares.
<label for="tel">Teléfono 10 dígitos empezando por 228</label>
<input type="text" pattern="^228\d{8}$">
Para utilizar el atributo pattern es recomendable utilizar el type="text" y no un type
de los predefinidos en HTML5 que ya cuentan con patrones de validación en el
propio navegador. Mezclar ambos puede llevar a resultados inesperados.

Validación de formularios con plugins JQuery

El mejor plugin JQuery para validar formularios es formvalidation. Sin embargo


formvalidation es un plugin que tiene un costo dependiendo la licencia que
queramos ocupar.

Formvalidation es compatible con los formularios de los frameworks css más


populares:

• Bootstrap
• Foundation
• Pure
• Semantic UI
• Otros

Smoke es el más completo plugin JQuery diseñado para trabajar con bootstrap 3,
además es open source e incluye las siguientes características:

• Validación de formularios.
• Sistema de notificaciones.
• Progressbar.
• Soporte para fullscreen.
• Agregar funcionalidad extra a los paneles de bootstrap.
• Helpers para conversión de tipos.

61
Para incluir smoke en nuestro proyecto sólo tenemos que descargar el plugin
de aquí.

Extraer los archivos del zip, y colocar los archivos CSS y JS dentro de la carpeta
public/assets de nuestro proyecto en Laravel:

public/
assets/
css/
smoke.css
smoke.min.css
js/
smoke.js
smoke.min.js
lang/
es.js
es.min.js
Una vez hecho esto, debemos hacer referencia a los estilos y scripts desde
nuestro documento html en la sección de head y body:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Smoke</title>
{!! Html::style('assets/css/smoke.css') !!}
</head>
<body>

{!! Html::script('assets/js/smoke.js') !!}


{!! Html::script('assets/lang/es.js') !!}
</body>
</html>
Los ejemplos sobre validaciones, notifiaciones, progressbar, etc los encontrarás
en la página oficial de Smoke.

62
Validación del lado del servidor (Request).
Laravel permite validar los datos enviados por un formulario de forma muy sencilla
ocupando un Mecanismo llamados "Requests". Veamos un ejemplo ocupando el
controller PastelesController visto en el capítulo anterior, dandole uso a los
métodos store y update, el funcionamiento y lógica puedes verlo en el Anexo C.
CRUD con Laravel para comprender su funcionamiento:

Lo primero que debemos hacer es crear un request para el método store de


PastelesController ya que necesitamos validar que los datos enviados en el
formulario para crear un nuevo pastel sean válidos.

Ejemplo:

php artisan make:request CrearPastelesRequest


Con este comando Crearemos el Request CrearPastelesRequest ubicado en:

app/Http/Request/CrearPastelesRequest
Su contenido es el siguiente:

<?php

namespace Curso\Http\Requests;

use Curso\Http\Requests\Request;

class CrearPastelesRequest extends Request


{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return false;

63
}

/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
//
];
}
}
Lo siguiente que haremos será cambiar el valor que regresa el
método authorize() de false a true para permitir que el Request lo pueda ocupar
cualquier usuario.

public function authorize()


{
return true;
}
Posteriormente en el método rules() agregaremos las reglas de validación del
formulario para crear pasteles quedando así:

public function rules()


{
return [
'nombre' => 'required|string|max:60',
'sabor' => 'required|in:chocolate,vainilla,cheesecake'
];
}
Al final el archivo CrearPastelesRequest deberá verse así:

<?php

namespace Curso\Http\Requests;

64
use Curso\Http\Requests\Request;

class CrearPastelesRequest extends Request


{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}

/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'nombre' => 'required|string|max:60',
'sabor' => 'required|in:chocolate,vainilla,cheesecake'
];
}
}
De igual forma crearemos el Request para el método update de
PastelesController.

php artisan make:request EditarPastelesRequest


Y el archivo lo dejaremos como se muestra a continuación.

<?php

namespace Curso\Http\Requests;

65
use Curso\Http\Requests\Request;

class EditarPastelesRequest extends Request


{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}

/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'nombre' => 'required|string|size:60',
'sabor' => 'required|in:chocolate,vainilla,cheesecake'
];
}
}
Las reglas de validación ocupadas en el ejemplo anterior las podemos encontrar
explicadas con mayor detalle en la página de Validaciones de Laravel.

Para ocupar el nuevo request en PastelesController debemos incluirlo:

use Curso\Http\Requests\CrearPastelesRequest;
use Curso\Http\Requests\EditarPastelesRequest;
En el modelo Pastel agregaremos una propiedad $fillable para indicar que
atributos de la tabla pasteles podrán ser ocupados con el método $request->all().

66
El modelo pasteles quedaría así:

<?php

namespace Curso;

use Illuminate\Database\Eloquent\Model;

class Pastel extends Model


{
protected $table = 'pasteles';
protected $fillable = ['nombre','sabor'];

public function scopeSabor($query, $sabor){


return $query->where('sabor',$sabor);
}

public function scopeId($query, $id){


return $query->where('id',$id);
}
}
Los métodos store y update recibirán como parámetro un objeto Request para
aplicar las reglas de validación, al final el controlador PastelesController debe
tener el siguiente aspecto:

<?php

namespace Curso\Http\Controllers;

use Illuminate\Http\Request;

use Curso\Http\Requests;
use Curso\Http\Controllers\Controller;

use Curso\Pastel;
use Curso\Http\Requests\CrearPastelesRequest;
use Curso\Http\Requests\EditarPastelesRequest;

67
class PastelesController extends Controller
{
/**
* Display a listing of the resource.
*
* @return Response
*/
public function index()
{
$pasteles = Pastel::get();
return view('pasteles.index')->with('pasteles', $pasteles);
}

/**
* Show the form for creating a new resource.
*
* @return Response
*/
public function create()
{
return view('pasteles.create');
}

/**
* Store a newly created resource in storage.
*
* @return Response
*/
public function store(CrearPastelesRequest $request)
{
$pastel = Pastel::create($request->all());
return redirect()->route('pasteles.index');
}

/**
* Display the specified resource.

68
*
* @param int $id
* @return Response
*/
public function show($id)
{
//
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return Response
*/
public function edit($id)
{
$pastel = Pastel::find($id);
return view('pasteles.edit')->with('pastel',$pastel);
}

/**
* Update the specified resource in storage.
*
* @param int $id
* @return Response
*/
public function update(EditarPastelesRequest $request, $id)
{
$pastel = Pastel::find($id);
$pastel->fill($request->all());
$pastel->save();
return redirect()->route('pasteles.index');
}

/**
* Remove the specified resource from storage.

69
*
* @param int $id
* @return Response
*/
public function destroy($id)
{
$pastel = Pastel::find($id);
$pastel->delete();

Pastel::destroy($id);
return redirect()->route('pasteles.index');

}
}
Si te interesa ver el proceso con el cual se completaron los métodos te
recomendamos ir al Anexo C. CRUD con Laravel para mayor información y así
poder probar adecuadamente los Request.

Middlewares
En este punto debemos tener nuestro CRUD para la clase Pasteles, en caso de
no tenerlo recomiendo ver el Anexo C. CRUD con Laravel para poder continuar.
Ahora bien si ya podemos realizar las operaciones básicas no podemos pensar
en llevar a un ambiente real o comercial un proyecto en este nivel. Aun si funciona
correctamente no hemos contemplado todos los posibles casos o amenazas que
se encuentran afuera en la Web, tales como son hackers, estafadores o incluso
las fallas usuales de los usuarios finales.

Para solucionar esto Laravel utiliza los Middleware, que nos permiten proteger las
rutas de accesos no autorizados, como su nombre lo indica (middle) se ubica en
el medio de la peticion (Request), entonces si deseamos agregar un nuevo nivel
de seguridad a nuestro sistema los Middleware son la respuesta.

70
Primero vamos a analizar un Middleware para la autenticacion o logueo de los
usuarios en nuestras rutas. Por defecto en nuestro proyecto de Laravel debemos
de contar con un middleware llamado auth, este middleware de lo que se encarga
es de ver que el usuario se encuentre con una sesion activa, recuerden que en
Laravel ya tenemos por defecto el manejo de sesiones junto con las tablas de la
base de datos. Para decirle a nuestro proyecto que las rutas de nuestro
controlador de pasteles van a estar protegidas por el middleware auth usamos el
método middleware('name'); dentro del constructor de nuestra clase de la
siguiente forma:

public function __construct(){


$this->middleware('auth');
}
Recuerden que esto debe ubicarse dentro de nuestro
controlador PastelesController como una función mas, usualmente esta función
es la primera que se ve por lo cual recomiendo que al momento de agregar este
codigo lo hagan el inicio de su clase.

Con este cambio se daran cuenta de que si ingresan a las rutas en las cuales ya
antes podiamos ver nuestro crud los redirige al login, si crean una cuenta de
usuario y lo intentan nuevamente veran que el acceso ya se les va a conceder,
además el nombre y usuario con el que accedan se vera en la barra superior de
navegacion al lado derecho, comprobando las sesiones que Laravel nos da como
un regalo.

Analizaremos un poco los archivos, siempre es importante saber como funciona


lo que estamos usando y no quedarnos solo con la idea de que funciona sin tener
la mas remota idea de lo que sucede. Si la autenticación ya esta hecha esto lo
podemos verificar en el archivo Kernel.php dentro de la ruta app/Http/, en este
archivo vamos a ver un codigo similar a este:

71
en el podemos ver una variable protegida llamada $routeMiddleware donde estan
definidos los middleware del sistema, podemos observar tanto la ubicacion como
el nombre con el cual podemos usarlo, estos son auth, auth.basic y guest.
El archivo que hace referencia al middleware auth se
llama Authenticate.php que se encuentra en app/Http/Middleware/ , dentro de
este archivo podemos observar la estructura de un Middleware normal, este tipo
de archivos cuentan con una función llamada handle() que es la que se ejecuta
cuando se llama al middleware, la función hadle de este archivo es la siguiente:

72
En ella podemos observar que realiza una serie de preguntas para saber que
respuesta dar y a donde redirigir, primero pregunta si el usuario esta logueado
con la pregunta if($this->auth->guest()), guest significa invitado y por lógica si
esta invitado quiere decir que no cuenta con una sesion iniciada. Si ese fuera el
caso entonces debemos verificar si el logueo se intenta realizar por medio de
AJAX y si la peticion es de este tipo entonces rechazarla y mandar una respuesta
de acceso no autorizado, pero si no es de tipo AJAX entonces redirigir directo a
la vista de logueo. En el caso de que no sea un invitado entonces quiere decir
que si tiene iniciada su sesion por lo cual pasara la petición al siguiente
middleware hasta que llegue al último y termine las verificaciones del sistema.

Creando nuestros propios Middlewares

Preparativos

Ahora bien, esto no es la solución a todos nuestros problemas (aun), aunque el


tener la autenticación hecha por defecto es una gran ayuda podemos requerir
más protección, por ejemplo si manejamos roles en nuestra aplicación, digamos
que el CRUD de pasteles solo lo podemos ver si tenemos una cuenta de
administrador en el sistema pero no si tenemos una cuenta normal.

Vamos a modificar algunos archivos para poder aplicar nuestro nuevo


middleware, primero la migracion de usuarios

73
llamada create_users_table.php en la carpeta de las migraciones, vamos a
agregar un campo de tipo de esta forma:

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration


{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('email')->unique();
$table->string('password', 60);
$table->enum('type', ['admin','user']);
$table->rememberToken();
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('users');
}

74
}
Pero en el modelo de Users que viene por defecto con Laravel 5 se definen los
campos que se pueden llenar y los ocultos, vamos a decirle al modelo que
tambien puede llenar el campo type de esta forma:

protected $fillable = ['name', 'email', 'password', 'type'];


El modelo User se encuentra en app/Http/, ahora revisaremos el controlador de
registro, es decir el controlador AuthController en la
carpeta app/Http/Controllers/Auth/ , buscaremos el método create y vamos a
dejarlo de esta forma:
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
'type' => $data['type'],
]);
}
Hasta ahora solo estamos diciendole al método que agregue otro elemento que
va a provenir de la vista llamado 'type'.

Ahora necesitamos poder crear un administrador o un usuario normal, por esto


vamos a agregar un campo select en nuestra vista de registro para completar las
modificaciones, vamos a modificar la vista register.blade.php dentro de la
carpeta resources/views/auth/ . Le vamos a agregar el campo y debera verse de
esta forma:
@extends('app')

@section('content')
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">Sign Up</div>

75
<div class="panel-body">
{!! Form::open(['route' => 'auth/register', 'class' =>
'form']) !!}

<div class="form-group">
<label>Name</label>
{!! Form::input('text', 'name', '', ['class'=>
'form-control']) !!}
</div>

<div class="form-group">
<label>Email</label>
{!! Form::email('email', '', ['class'=> 'form-
control']) !!}
</div>

<div class="form-group">
<label for="type"> Type</label>
<select name="type" class="form-control">
<option value="" disabled selected>Elige una
opcion...</option>
<option value="admin">Administrador</option>
<option value="user">Usuario normal</option>
</select>
</div>

<div class="form-group">
<label>Password</label>
{!! Form::password('password', ['class'=> 'form-
control']) !!}
</div>

<div class="form-group">
<label>Password confirmation</label>
{!! Form::password('password_confirmation',
['class'=> 'form-control']) !!}

76
</div>

<div>
{!! Form::submit('send',['class' => 'btn btn-
primary']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</div>
@endsection

Crear el middleware IsAdmin


Con lo anterior tendremos todos los cambios necesarios para administrar roles en
nuestro sistema. Lo siguiente es crear el middleware isAdmin, para esto artisan
no provee este comando:

php artisan make:middleware name


El comando para nuestro ejemplo seria igual a esto:

php artisan make:middleware IsAdmin


esto nos va a crear un archivo dentro de la carpeta app/Http/Middleware/ con el
nombre que le dimos con la función handle que explicamos anteriormente. Para
poder verificar si el usuario logueado es un administrador debemos poder obtener
el usuario por lo cual vamos a agregar una clase para poder obtener ese usuario,
inyectaremos la dependencia, vamos a crear un atributo que será la autenticación
que viene del middleware anterior y el constructor de esta forma:
<?php

namespace Curso\Http\Middleware;

use Illuminate\Contracts\Auth\Guard;

77
use Closure;

class IsAdmin
{
protected $auth;

public function __construct(Guard $auth)


{
$this->auth = $auth;
}
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
if ($this->auth->user()->type != 'admin') {
$this->auth->logout();
if ($request->ajax()) {
return response('Unauthorized.', 401);
} else {
return redirect()->to('auth/login');
}
}

return $next($request);
}
}
Para la lógica podemos emular lo que pasa en el Middleware de Authenticate,
vamos a preguntar el tipo de usuario y vamos a preguntar si la peticion es AJAX
para dirigir la ruta de la peticion a donde sea el caso, si el usuario es de tipo admin
entonces vamos a redirigir la peticion al siguiente Middleware, sino entonces

78
vamos a cerrar la sesion y preguntaremos si la peticion es AJAX, en caso de ser
AJAX vamos a denegarla, si no entonces vamos a mandar al login. Usaremos la
función ->to(); porque si nos quedamos con la función guest() eso guarda la ruta
de destino a la que queremos llegar y nunca vamos a poder iniciar sesion con
usuarios normales.

Ahora vamos a registrar nuestro middleware para poder usarlo ya que por si
mismo no lo vamos a poder integrar al controlador, para esto tenemos que
modificar el Kernel.php, lo unico aqui es agregar en el $routeMiddleware un
nombre para nuestro Middleware y la ubicacion del mismo, asi es como se veria:

protected $routeMiddleware = [
'auth' => \Curso\Http\Middleware\Authenticate::class,
'auth.basic' =>
\Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'guest' => \Curso\Http\Middleware\RedirectIfAuthenticated::class,
'is_admin' => \Curso\Http\Middleware\IsAdmin::class,
];
Entonces con esto ya podemos ligarlo al controlador dentro de su constructor y
para cada función dentro de este se va a mandar a llamar el
Middleware is_admin:

public function __construct(){


$this->middleware('auth');
$this->middleware('is_admin');
}
Asi podemos probar entrando a una ruta con una cuenta de usuario normal y de
nuevo con una cuenta de administrador, entonces veremos que solo si usamos
una cuenta de administrador podemos ver lo que ya teniamos al inicio pero de
otro modo cerrará la sesión y no nos dejara entrar a ver el contenido.

Para mas informacion lean la documentacion oficial sobre Middlewares de


Laravel 5.

79
¿Qué es HTML5?
HTML5 es la nueva versión del lenguaje de marcado que se usa para estructurar
páginas web, actualmente sigue en evolucion, HTML5 incorpora características
nuevas y modificaciones que mejorará significativamente la forma de construir
sitios web.

HTML5 nos permite crear documentos HTML de una forma más simplificada y
sencilla que sus versiones anteriores.

¿Qué hay de nuevo en HTML5?


La declaración DOCTYPE es ahora más simple:

<!DOCTYPE html>
La codificación de caracteres se hace de la siguiente manera:

<meta charset="UTF-8">

Nuevos tags (etiquetas)

• Nuevos elementos semánticos como: <header>, <footer>, <article>, y <section>.


• Nuevos elementos para el control de formularios: number, date, time, calendar, y
range
• Nuevos elementos gráficos: <svg> y <canvas>.
• Nuevos elementos multimedia: <audio> y <video>.

Nuevas API's

• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache

80
• HTML Web Workers
• HTML SSE

Plantilla básica de un documento en


HTML5
Cualquier documento en HTML5 debe contener la siguiente estructura básica.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>

<body>
Cuerpo del documento
</body>
</html>
En la sección de la cabecera <head> escribiremos:

• La codificación que ocuparemos para el documento, es recomendado usar UTF-8.


• El título de la página
• Los elementos link para utilizar los archivos CSS.

En la sección del cuerpo <body> escribiremos:

• Barrá de navegación
• Encabezados
• Secciones
• Parrafos
• Elementos multimedia : audio, video, img
• Texto en negritas, cursiva y subrayado.
• Tablas

81
• Listas
• Formularios
• Hipervínculos
• etc.

Encabezados
Los encabezados en html tienen 6 tamaños diferentes y se escriben de la
siguiente forma:

HTML Resultado

Secciones (divisiones)
Podemos dividir nuestro documento en secciones distintas con la
etiqueta <div> para tener un mayor orden sobre nuestro documento y aplicar
diferentes estilos según la sección.

82
HTML Resultado

Formato de texto

HTML Resultado

<b> Texto en negrita

<i> Texto en cursiva

<u> Texto subrayado

<p> Parrafo

<code> Escribir en formato código de programación

<p> Parrafo

<em> Texto con énfasis

<br> Salto de línea

<!--Texto--> Comentarios en lenguaje HTML

83
<hr> Línea horizontal para dividir secciones

<font face="verdana" size="10"


Formatear texto
color="red">

Podemos definir diferentes el formato del texto como: negrita, cursiva, subrayado,
tipo de letra, tamaño de fuente, saltos de línea, párrafos, citas, etc.

Formularios
HTML Resultado

<form> Define un Formulario HTML

<input>

<textarea> Define un textarea para guardar una gran cantidad de texto.

<button> Define un botón

<select> Define una lista desplegable

<option> Define una opción en una lista desplegable

<label> Define una etiqueta para un input

Atributos de los formularios


• Seccion en desarrollo.

84
Tablas
Ejemplo de una tabla básica:

<table>
<thead>
<tr>
<th>cabecera</th>
<th>cabecera</th>
<th>cabecera</th>
</tr>
</thead>
<tfoot>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>celda</td>
<td>celda</td>
<td>celda</td>
</tr>
</tbody>
</table>
Las tablas se escriben con la etiqueta <table>, dentro de la tabla tendremos filas
y columnas, la etiqueta <tr> define las filas y la etiqueta <td> define las columas.

Hipervínculos e imágenes
Las imágenes pueden ser de formato png, jpg o gif y se escriben con la
etiqueta <img> entre sus principales atributos tenemos:

85
• src : La URI a la imágen.
• alt: Texto que se desplegará en caso de que la imagen no sea desplegada.
• width : Ancho de la imagen, puede ser escrita en pixeles o en porcentaje.
• height: Alto de la imagen, puede ser escrita en pixeles o en porcentaje.

Ejemplo:

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


Los Hipervínculos o links son definidos con la etiqueta <a> que cuenta con los
siguientes atributos:

• href : especifica la URI de destino.


• target : especifica en dónde se abrirá el nuevo documento del link.
o _blank : Abre el nuevo documento en una nueva ventana o pestaña.
o _self :Abre el nuevo documento en el mismo frame (acción por defecto).
o _parent : Abre el nuevo documento en el frame padre.
o _top : Abre el nuevo documento en todo el cuerpo de la ventana.

Ejemplo de un link:

<a href="https://www.facebook.com/oca159">Facebook</a>
Dentro de las etiquetas <a> puede ir un texto o una imagen.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial">
</a>
Los hipervínculos también pueden redireccionar a un segmento específico de la
página web.

Ejemplo: Primero creamos una sección con un atributo id.

<div id="Encabezado">Sección de encabezado</div>


Entonces agregamos un link que nos envíe a esa sección de la página. Para lograr
este objetivo, agregamos en el atributo href el id de la sección precedido de un
signo #.
+

<a href="#Encabezado">Visitar la sección de encabezado</a>

86
CSS3 (Hojas de estilo en cascada)
Es un lenguaje usado para definir y crear la presentación de un documento
estructurado escrito en HTML o XML.

La idea es separar el contenido (Texto) de su presentación (formato).

La información de estilo puede ser definida en un documento separado o en el


mismo documento HTML. En este último caso podrían definirse estilos generales
en la cabecera del documento o en cada etiqueta particular mediante el
atributo <style>.

Sintaxis
Una hoja de estilo se compone de una lista de reglas. Cada regla o conjunto de
reglas consiste en uno o más selectores y un bloque de declaración (o «bloque
de estilo») con los estilos a aplicar para los elementos del documento que
cumplan con el selector que les precede. Cada bloque de estilos se define entre
llaves, y está formado por una o varias declaraciones de estilo con el
formato propiedad:valor; .
En el CSS, los selectores marcarán qué elementos se verán afectados por cada
bloque de estilo que les siga, y pueden afectar a uno o varios elementos a la vez,
en función de su tipo, nombre (name), ID, clase (class), posición dentro del
Document Object Model, etcétera.

Abajo puede verse un ejemplo de una parte de una hoja de estilos CSS:

selector [, selector2, ...] [:pseudo-class][::pseudo-element] {


propiedad: valor;
[propiedad2: valor2;
...]
}

/* comentarios */

87
Un conjuno de reglas consiste en un selector y un bloque de declaraciones.

Formas de insertar CSS en nuestro documento


HTML

Hemos estado hablando un poco de todo, incluso que a ciertas cosas podemos darle el
diseño que queramos, pero no hemos explicado como se incluyen estos archivos JS y CSS.
Hoy vamos a explicar como hacerlo y también explicaremos una herramienta que tiene
Laravel llamada Laravel Mix.

Laravel Mix es una herramienta que nos permite compilar y minificar nuestros assets
(soporta preprocesadores CSS y JS) muy fácilmente.

INCLUIR CSS Y JAVASCRIPT

Para incluir archivos CSS y JS, puedes ponerlos directamente en la


carpeta public/css o public/js y después linkarlos desde el layout con la función asset():
resources/views/layouts/app.blade.php

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


2
3 <script src="{{ asset('js/example.js') }}"></script>
Así ya estarían añadidos y podríamos ir añadiendo el código en estos archivos.

88
Existen 3 formas de insertar CSS:

• Una hoja de estilo externo (Archivo con extensión .css).


• Una hoja de estilo interna (Dentro del HTML ocupando el tag <style>).
• Estilo inline (usando el atributo style sobre un elemento HTML).

Hoja de estilo externa

Podemos escribir nuestro CSS en un archivo de nuestro sistema con


extensión .css, para incluir una referencia a la hoja de estilo externa escribiremos
la ruta dentro del atributo href de la etiqueta <link>, es conveniente escribir esta
definición dentro de la etiqueta <head>.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Hoja de estilo interna

Una hoja de estilos interna puede ser usada si una única página tiene un único
estilo.

Las hojas de estilo internas son definidas dentro de la etiqueta <style> y en la


sección de la etiqueta <head>.
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

89
Estilos inline

Un estilo inline puede ser usado para aplicar un úncio estilo para un único
elemento de una página.

Para usar estilos inline , agregamos el atributo style al elemento html.


<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Comentarios en CSS
Los comentarios son una forma de explicar y documentar el código, pueden ser
de utilidad cuando queremos editar el código tiempo después. Los comentarios
son ignorados por el navegador.

En CSS un comentario empieza con /* y termina con */.


p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

Selectores
CSS3 puede aplicar diferentes estilos a un grupo de elementos HTML
dependiendo el tipo de selector que ocupemos, veremos cada uno de ellos.

Selector por elemento

Selecciona elementos basándose en el nombre del elemento.

90
Por ejemplo para seleccionar todos los elementos <p> de una página y aplicarles
el estilo: texto alineado al centro y de color rojo.
p {
text-align: center;
color: red;
}

Selector por id

El selector por id utiliza el atributo id de un elemento HTML para especificar el


elemento al que se le va a aplicar un estilo.

Cada id es un valor único dentro de una página HTML, por lo cuál la selección
sólo se aplicará sobre un único elemento en particular.

Para seleccionar un elemento con un id especifico, escribe un signo de numeral


o gato seguido por el valor del id del elemento.

La siguiente regla se aplicará a un elemento HTML con el id="dato1".


#dato1 {
text-align: center;
color: red;
}
El nombre de un id jamás empieza con un número, al igual que la definición de
variables en los lenguajes de programación.

Selector por clase


El selector por clase selecciona todos los elementos HTML con un atributo class
específico.

Para seleccionar elementos con una clase específica, escribimos un punto


seguido por el nombre el nombre de la clase.

En el ejemplo de abajo seleccionaremos todos los elementos HTML


con class="center" y los alinearemos al centro.

91
.center {
text-align: center;
color: red;
}
De igual forma es posible seleccionar elementos de un tipo HTML en especifico y
luego aquellos con una clase en particular.

En el ejemplo de abajo seleccionaremos los parrafos con class="center" y los


alinearemos al centro.
p.center {
text-align: center;
color: red;
}
Al igual que los ids, las clases no deben nombrarse empezando con un número.

Agrupar selectores

En el caso de que tuvieramos varios selecciones que apliquen el mismo estilo:

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
Podemos reducir el código agrupando los selectores separando cada selector por
una coma.

h1, h2, p {

92
text-align: center;
color: red;
}

Creacion del CRUD con Laravel desde 0


Este anexo del libro de Laravel 5 esta pensado para resumir el contenido de una forma
aplicada, de modo que se puedan ver en conjunto todos los conocimientos adquiridos durante
el curso.

Se explicara el proceso para dar altas, bajas, cambios y consultas de la


tabla pasteles o CRUD que significa Create, Read, Update and Delete por sus siglas en
ingles.

Nota. Para ver la lista de comandos de escribe en la terminal php artisan y nos da la lista de
comandos

Primero retomaremos las migraciones y los seeders, creando la migracion y un pequeño


seeder para poblar nuestra BD.

Para crear la migracion con la plantilla basica usaremos el comando

php artisan make:migration crear_tabla_pasteles --create=pasteles


Ahora dentro de la migracion vamos a definir la estructura de la tabla que tendra solo cuatro
campos que seran: id, nombre, sabor y timestamps(esto en BD es igual a created_at y
updated_at).

Dando un resultado como lo siguiente:

93
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CrearTablaPasteles extends Migration


{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('pasteles', function (Blueprint $table) {
$table->increments('id');
$table->string('nombre', 60);
$table->enum('sabor', ['chocolate','vainilla','cheesecake']);
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('pasteles');
}
}

Ahora crearemos el seeder con el comando:

php artisan make:seeder PastelesSeeder

y vamos a usar el componente Faker para crear 50 pasteles de forma automatica, el archivo
final quedara de la siguiente forma, recuerden que para usar Faker es necesario importar la
clase con la intruccion use:

<?php

use Illuminate\Database\Seeder;
use Faker\Factory as Faker;

94
class PastelesSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$faker = Faker::create();
for ($i=0; $i < 50; $i++) {
\DB::table('pasteles')->insert(array(
'nombre' => 'Pastel ' . $faker->firstNameFemale . ' ' . $faker->lastName,
'sabor' => $faker->randomElement(['chocolate','vainilla','cheesecake']),
'created_at' => date('Y-m-d H:m:s'),
'updated_at' => date('Y-m-d H:m:s')
));
}
}
}

Con esto ya tendremos la estructura de la tabla y un seeder para poblar, con esto ahora
usaremos el siguiente comando para crear la tabla en la BD y llenarla:

php artisan migrate --seed

Ahora vamos a pasar a crear el Modelo, el cual nos va a servir para mapear la tabla de la BD
a una clase de Laravel como lo vimos en el capítulo 7. Vamos a usar el comando:

php artisan make:model Pastel

Laravel nos recomienda seguir las convenciones para facilitarnos el trabajo, por lo que las
tablas de la Base de datos deben encontrarse en notacion underscore y en plural, y los
modelos deben encontrarse en notacion UpperCamelCase y en singular.

Con esto Laravel nos creara el archivo Pastel.php en la carpeta app/, si seguimos las
convenciones de Laravel por defecto esto seria lo unico necesario, pero debido a que nuestr o
lenguaje no convierte las palabras a plural de la misma forma que el ingles entonces debemos
definir al modelo con que tabla va a estar trabajando. Agregaremos dentro del modelo el
atributo protected $table = 'pasteles';, y eso seria todo para el modelo, quedando de la
siguiente manera:
<?php

namespace Curso;

95
use Illuminate\Database\Eloquent\Model;

class Pastel extends Model


{
protected $table = 'pasteles';
}

Ya tenemos listo nuestro manejo de datos, ahora vamos a proceder a crear nuestras vistas
para que desde el navegador podamos mandar la informacion y un controlador para poder
definir nuestras operaciones, ademas de especificar las rutas de nuestro sistema.

Para comenzar vamos a crear nuestro controlador con el comando:

php artisan make:controller PastelesController


Laravel automaticamente crea un archivo dentro de la ruta app/Http/Controllers con el
nombre que especificamos y dentro de el las funciones para los
metodos: index, create, store, show, edit, update, delete. Estos metodos los vamos a
definir mas adelante, por el momento vamos a crear en nuestro archivo de rutas un grupo de
rutas asociadas a cada uno de los metodos del controlador que acabamos de cre ar, esto se
hace con una ruta de tipo Resource o recurso, modificando el archivo routes agregando el
siguiente codigo:
Route::resource('pasteles', 'PastelesController');

Con esto ya tendremos nuestro controlador(aun vacio) y nuestras rutas del sistema, lo cual
podemos verificar con el comando:

php artisan route:list

Ahora vamos a terminar de llenar nuestro controlador, debemos importar la clase Pastel a
nuestro controlador para poder hacer uso del Modelo y asi trabajar con la base de datos, esto
con la ayuda de Eloquent, como vimos durante el curso para crear un nuevo registro con
Eloquent basta con definir una variable de un new Modelo, en este caso Pastel, segun se
describe en el capitulo 11 los metodos responden a una ruta en especifico de la ruta resource
que agregamos en routes.php, para este caso vamos a definir cada uno de ellos en orden:

Index - Pagina de Inicio

Cuando entramos a una pagina principal de administracion se pueden ver en ocasiones la


informacion que se encuentra en la BD y acceso a las operaciones basicas del CRUD, por lo
cual debemos ser capaces de recibir en el index los registros de la BD. Dentro el

96
metodo index(), vamos a usa Eloquent para obtener todos los pasteles y enviarlos a una
vista que vamos a definir mas adelante, quedando de la siguiente forma:

public function index()


{
$pasteles = Pastel::get();
return view('pasteles.index')->with('pasteles', $pasteles);
}

Eloquent nos facilita mucho las consultas a la BD y hace que sea portable nuestro codigo,
en el metodo decimos que seleccione todos los pasteles y os envie a una vista
llama index ubicada en la carpeta resoures/views/pasteles/, como vimos en el capitulo
10 las rutas en blade cambian la /(diagonal) por un .(punto), la
funcion view('pasteles.index'); toma como carpeta raiz a resources/views/ por lo que no
tenemos la necesidad de agregarlo en la ruta. Ademas se esta concatenando el
metodo with('nombre', $var); que como primer parametro pide el nombre con el cual se va
a poder usar una variable del lado de la vista, y como segundo parametro recibe la variable
que se va a mandar a la vista.

Create - Pagina de registro

Este metodo es muy sencillo puesto que solo va a devolver una vista sin ninguna variable ni
uso de Eloquent, por lo cual queda de la siguiente manera:

public function create()


{
return view('pasteles.create');
}

Store - Funcion de almacenamiento

Este metodo es donde despues de haber entrado a create se reciben los datos y se guardan
en la base de datos, para poder recibir la informacion en este ejemplo vamos a usar la
clase Request que significa peticion y es una clase que Laravel agrega por nosotros cuando
creamos el controlador, vamos a pasar por parametro la peticion en el metodo definiendo
que es una variable de la clase Request y despues de eso podemos recuperar por el nombre
del campo del formulario(atributo name) la informacion enviada, entonces el metodo
quedaria de la siguiente forma:

public function store(Request $request)


{

97
$pastel = new Pastel;
$pastel->nombre = $request->input('nombre');
$pastel->sabor = $request->input('sabor');

$pastel->save();

return redirect()->route('pasteles.index');
}

En la funcion estamos creando una instancia de un nuevo Pastel y asignando los atributos
de la clase que se llaman igual que los campos de la BD los valores del formulario con la
variable request y el metodo input('name'); que recibe como parametro el nombre del campo
del formulario, para mas detalle revise la seccion del Anexo A de HTML que habla sobre los
atributos de los formularios.
Despues de asignar los valores de la peticion a la variable $pastel, se usa el
metodo save(); para que el modelo se encargue de guardar los datos en la BD y finalmente
redireccionar al index con los metodos encadenados: redirect()->route('pasteles.index');.

Show - Pagina de descripcion

• Lo sentimos, seccion en desarrollo.

Edit - Pagina de edicion

La funcion de edit es similar a la de create pues solo muestra una vista, con una pequeña
diferencia, la cual es que se va a buscar el pastel que se quiere editar y se va a mandar a la
vista, esto es obio pues debemos poder ver la informacion que vamos a editar. La funcion
quedaria de la siguiente forma:

public function edit($id)


{
$pastel = Pastel::find($id);
return view('pasteles.edit')->with('pastel',$pastel);
}

Es muy claro, en una variable se guarda el pastel, gracias al modelo esto se soluciona
facilmente con el metodo find(), el id del pastel se manda en la url, ahora bien si esto es
preocupante puesto que el id se ve directamente en la URL recordemos que esto no modifica
aun, solo nos manda a la pagina que va a poder hacer una nueva peticion para actualizar.

98
Update - Funcion de actualizacion

Bien, despues de entrar en la pagina de edit vamos a poder editar la informacion y regresarla
al controlador para que efectue los cambios, dentro del metodo update vamos a recuperar
nuevamente el Pastel por medio de su id que tambien va en la url y se recibe como parametro
de la funcion, ademas vamos a agregar otro parametro que sera el Request al igual que en
la funcion create para recuperar la informacion del lado del cliente en el controlador, dejando
la funcion de esta forma:

public function update(Request $request, $id)


{
$pastel = Pastel::find($id);
$pastel->nombre = $request->input('nombre');
$pastel->sabor = $request->input('sabor');
$pastel->save();
return redirect()->route('pasteles.index');
}

Esta funcion es similar a la de create lo unico que cambia es que en vez de crear un nuevo
pastel vamos a recuperar uno existente y cambiar sus atributos.

Destroy - Funcion de borrado

Este metodo tiene la funcion de eliminar el registro de la BD, pero para efectuarlo tenemos
dos opciones, la primer forma: crear una variable $pastel y despues usar el
metodo delete() de Eloquent. o bien la segunda: directamente del modelo usar el metodo
de Eloquent destroy($id), que se encarga de directamente buscar y eliminar el registro,
finalmente vamos a redirigir al index, el metodo al final quedara de la siguiente forma:
// Esta es la primer opcion
public function destroy($id)
{
$pastel = Pastel::find($id);
$pastel->delete();
return redirect()->route('pasteles.index');
}

// Esta es la segunda opcion


public function destroy($id)
{
Pastel::destroy($id);
return redirect()->route('pasteles.index');
}

99
Vistas del CRUD
Estas son la ultima parte que vamos a crear, primero debemos preparar los direct orios y los
archivos que usaremos.

La estructura de la carpeta quedaria de la siguiente forma:

resources/
views/
pasteles/
partials/
fields.blade.php
table.blade.php
create.blade.php
edit.blade.php
index.blade.php

Usaremos el template por defecto de Laravel llamado app.blade.php que fuimos modificando
durante el curso por lo cual solo deberemos crear los archivos restantes.
Ahora en el archivo app.blade.php vamos a modificarlo para que el contenido este mejor
acomodado usando Bootstrap y vamos a agregar los estilos y scripts para quela tabla donde
vamos a mostrar el contenido funcione como un DataTable, dejando el archivo app de la
siguiente forma:

Template App
<!DOCTYPE html>
<html lang="en">
<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>Laravel</title>
@section('styles_laravel')
{!! Html::style('assets/css/bootstrap.css') !!}
{!! Html::style('assets/css/datatable-bootstrap.css') !!}
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet'
type='text/css'>
@show
@yield('my_styles')

100
</head>
<body>
@include('partials.layout.navbar')
@include('partials.layout.errors')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
@yield('content')
</div>
</div>
</div>
<!-- Scripts -->
{!! Html::script('assets/js/jquery.js') !!}
{!! Html::script('assets/js/jquery.dataTables.js') !!}
{!! Html::script('assets/js/bootstrap.min.js') !!}
{!! Html::script('assets/js/datatable-bootstrap.js') !!}
<script>
$(document).ready(function(){
$('#MyTable').dataTable();
});
</script>

@yield('my_scripts')
</body>
</html>

Los cambios mas notorios que podemos observar es que el @yield('content') se metio
dentro de una columna con un offset, eso dentro de una fila y todo dentro de un contenedor.
Asi nuestro contenido no lo vamos a tener todo pegado a la izquierda de nuestro navegador.

Nota: para poder hacer esto soN necesarios los archivos que se incluyen con blade, si no
los agregan la tabla se vera mas sencilla pero esto no quiere decir que no va a funcionar, ya
solo es cuestion de estilo, si quieren obtener los archivos dejamos los links a continuacion
para que los descarguen y los guarden dentro de la carpeta respectiva, es decir
los CSS en public/assets/css/ y los JS dentro de public/assets/js/:
• Estilos para el DataTable: datatable-bootstrap.css.

• Archivo JQuery: jquery.js.

• Archivo JQuery para DataTable: jquery.dataTables.js.

• Archivo JQuery para DataTable de bootstrap: datatable-bootstrap.js.

101
Nota: tambien les invito a ver el anexo de DataTable para mayor informacion.

Vista Index

Esta vista se refiere al archivo index.blade.php dentro de la


carpeta resources/views/pasteles/, aqui vamos a mostrar la tabla y un boton para crear
nuevos pasteles. Ahora bien para esto debemos tener nuestro partial de la tabla, mas
adelante lo vamos a mostrar pero por el momento el archivo index quedaria de la siguiente
forma:
@extends('app')

@section('content')
<a class="btn btn-success pull-right" href="{{ url('/pasteles/create') }}"
role="button">Nuevo pastel</a>
@include('pasteles.partials.table')
@endsection

Recuerden que gracias a blade nuestras vistas quedan de tamaños pequeños mas faciles de
entender, aqui solo estamos heredando la plantilla app y definiendo la seccion content con
un link que le daremos estilo de boton con la ruta para mostrar la vista de crear pasteles,
ademas de importar nuestra tabla, el archivo partial lo definiremos ahora.

Partials: table y fields

Table

Estos archivos los trabajaremos en partials por comodidad y porque son componentes de un
sistema Web que suelen repetirse constantemente, empezaremos por el table.

Primero recordemos un poco del pasado, en nuestro controlador en el metodo index


definimos que retornaria la vista index junto con una variable llamada $pasteles que
conteneria todos los pasteles del sistema, ahora bien esos pasteles los vamos a vaciar en la
tabla pues si bien no especificamos que esa variable va a llegar al partial table como lo
estamos incluyendo en el index tambien comparte las variables que tenga index, entonces el
envio puede verse de la siguiente manera:

102
Entonces vamos a usar un foreach con blade, para llenar el contenido de la tabla con los
atributos de los pasteles, dejando el archivo asi:

<h1 class="text-primary">Control de Pasteles</h1>

<table class="table table-bordered" id="MyTable">


<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Nombre</th>
<th class="text-center">Sabor</th>
<th class="text-center">Fecha</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
@foreach($pasteles as $pastel)
<tr>
<td class="text-center">{{ $pastel->id }}</td>
<td class="text-center">{{ $pastel->nombre }}</td>
<td class="text-center">{{ $pastel->sabor }}</td>
<td class="text-center">{{ $pastel->created_at }}</td>

{!! Form::open(['route' => ['pasteles.destroy', $pastel->id], 'method' => 'DELETE'])


!!}

<td class="text-center">
<button type="submit" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<a href="{{ url('/pasteles/'.$pastel->id.'/edit') }}" class="btn btn-info
btn-xs">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>

103
</td>

{!! Form::close() !!}

</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Nombre</th>
<th class="text-center">Sabor</th>
<th class="text-center">Fecha</th>
<th class="text-center">Acciones</th>
</tr>
</tfoot>
</table>
La estructura de la tabla la pueden ver en este link, pero lo importante esta dentro del <tbody>,
en donde con BLADE vamos a usar un foreach diciendo que para cada pastel dentro de la
variable $pasteles que llego del controlador se van a vaciar sus datos dentro de la fila de la
tabla, primero vamos a agregar su id, nombre y fecha de creacion, pero se va a agregar una
columna de acciones que contenga dos botones, uno para eliminar ese registro y otro para
editarlo, el boton de eliminar debe ser de tipo submit para enviar la peticion DELETE y para
esto es que se abre un formulario con la clase Form:: de Laravel, para que asi que de sintaxis
mas legible, agregamos los campos necesarios que son la ruta y el metodo del formulario;
para el boton de edit basta con un link <a> que con la funcion url()de Laravel la vamos a
dirigir con el ID de cada pastel.
Nota: Bootstrap nos permite tener a disposicion iconos para que los botones de nuestras
acciones se vean mas profesionales, por lo cual es lo que se agrega el tag <span>, para mas
informacion ir a la pagina oficial de Bootstrap.
Con esto debemos ser capaces de poder ver ahora nuestra tabla como un DataTable(en caso
de haber agregado lo necesario) llena con la informacion de pasteles:

104
Fields

Ahora vamos a crear un partials con los campos que va a requerir nuestro proyecto, si bien
sabemos es necesario pedir al usuario el nombre y sabor del pastel, pero la fecha de creacion
y ultima actualizacion son campos que Laravel pone automaticamente cuando se ejecuta el
metodo save() en el controlador, por lo cual nuestro partial solo debera tener dos campos de
entrada y un boton para enviar la solicitud.
Entonces para este archivo solo vamos a agregar como su nombre lo indica los campos de
entrada para un paste, dejandolo de la siguiente forma:

<div class="form-group">
{!! Form::label('nombre', 'Nombre', ['for' => 'nombre'] ) !!}
{!! Form::text('nombre', null , ['class' => 'form-control', 'id' => 'nombre',
'placeholder' => 'Escribe el nombre del pastel...' ] ) !!}
</div>

<div class="form-group">
{!! Form::label('sabor', 'Sabor', ['for' => 'sabor'] ) !!}
<select name="sabor" class="form-control">
<option value="" disabled selected>Elige un sabor...</option>
<option value="chocolate">Chocolate</option>
<option value="vainilla">Vainilla</option>
<option value="cheesecake">Cheesecake</option>
</select>
</div>

105
Si bien la clase Form:: no se ha explicado detalladamente dejo el link de la documentacion
oficial de Laravel, aunque se encuentra en su version 4.2 es debido a que para las versiones
mas actuales no se encuentra explicada, pero sigue siendo completamente compatible con
Laravel 5 y 5.1.
Con este partial vamos a poder llamar los campos de entrada para crear o editar un pastel.

Vista Create

En esta vista al igual que el index quedara muy corta:

@extends('app')

@section('content')
{!! Form::open([ 'route' => 'pasteles.store', 'method' => 'POST']) !!}
@include('pasteles.partials.fields')
<button type="submit" class="btn btn-success btn-block">Guardar</button>
{!! Form::close() !!}
@endsection

Extendemos del template app, definimos el contenido abriendo un formulario pero como se
trata de un almacenamiento el metodo se va a trabajar con store y POST, dentro vamos a
incluir el partial de fieldspara tener los campos de texto, el menu de opciones y un boton de
tipo submit para mandar la peticion.

Deberia quedar un resultado similar a este:

106
Vista Edit

Al tener ya listos nuestros archivos HTML la vista de edit se crea de la misma forma que la
de create con la diferencia de que en vez de abrir un formulario vamos a abrir un modelo, es
deir vamos a abrir el objeto que se envio del controlador a la vista para poder editar los
campos, como observacion podran notar cuando lo ejecuten en el navegador que un s elect
no se asigna automaticamente en valor anterior, por el momento vamos a ver como quedaria
la vista:

@extends('app')

@section('content')
<h4 class="text-center">Editar Pastel: {{ $pastel->nombre }}</h4>
{!! Form::model($pastel, [ 'route' => ['pasteles.update', $pastel], 'method' => 'PUT'])
!!}
@include('pasteles.partials.fields')
<button type="submit" class="btn btn-success btn-block">Guardar cambios</button>
{!! Form::close() !!}
@endsection

Al igual que las demas vistas se esta heredadndo de app y se agrega un titulo para saber
que pastel se esta editando, pero el Form::model() abre nuestra variable $pastel que
enviamos desde el controlador y crea un formulario lleno a partir de los valores del modelo,
claro que esto solo para los campos que coincidan con los nombres de los atributos del
modelo.
El resultado seria algo similar a esto:

Y con esto quedarian nuestras vistas del sistema terminadas y el CRUD basico de
los Pastelesfinalizado tambien, para mas informacion pueden retomar los capitulos de este
libro para analizar las diferentes opciones que tenemos para resolver este ejemplo pues esta
es solo una propuesta, no una solucion definitiva.

107
+

nota: La seccion de show no se ha contemplado para este anexo con una vista, disculpen
las molestias.

DataTable
Los DataTables son un plug-in para la librería JQuery de Javascript. Nos permiten
un mayor control sobre un elemento <table> de HTML. Algunas de sus
caracteristicas principales son:

• Paginación automática
• Búsqueda instantánea
• Ordenamiento multicolumna
• Soporta una gran cantidad de datos fuente.
o DOM (Convertir un elemento HTML <table> en un DataTable).
o Javascript (Un arreglo de arreglos en Javascript puede ser el dataset de un DataTable).
o AJAX (Un DataTable puede leer los datos de una tabla de un json obtenido vía AJAX, el
json puede ser servido mediante un Web Service o mediante un archivo.txt que lo
contenga).
o Procesamiento del lado del servidor (Un DataTable puede ser creado mediante la
obtención de datos del procesamiento de un script en el lado del servidor, este script
comúnmente tendrá interacción con la base de datos).
• Habilitar temas CSS para el DataTable fácilmente.
o Crear un tema
o Tema JQuery UI
o Tema Bootstrap
o Tema Foundation
• Amplia variedad de extensiones.
• Altamente internacionalizable.
• Es open source (Cuenta con una licencia MIT).

108
¿Cómo usar DataTables?
Para ocupar datables tenemos dos formas:

• Descargar el código fuente de los archivos js y css de datatables en el siguiente link.


• Ocupar un CDN
o CSS //cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
o JS //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

Usar DataTable descargando el código fuente

Antes que nada debemos tener descargado jquery, el cuál podemos descargar
de aquí. Una vez que hemos descargado los archivos css y js de DataTables de
este link debemos extraer el contenido y ubicar los archivos en la carpeta css y js
correspondiente dentro del directorio public de Laravel.

Ejemplo:

public/
assets/
css/
datatable-bootstrap.css
js/
datatable-bootstrap.js
jquery.dataTables.js
jquery.js
Lo siguiente será hacer una referencia de los script y archivos css dentro de
nuestro documento HTML.

Los script los ubicaremos dentro de la etiqueta <body> pero hasta el final de la
misma.
<body>
<!-- Contenido -->

<!-- Scripts -->

109
{!! Html::script('assets/js/jquery.js') !!}
{!! Html::script('assets/js/jquery.dataTables.js') !!}
{!! Html::script('assets/js/bootstrap.min.js') !!}
{!! Html::script('assets/js/datatable-bootstrap.js') !!}
<script>
$(document).ready(function(){
$('#MyTable').dataTable();
});
</script>
</body>
En el ejemplo de arriba estamos indicando que la tabla con el id #MyTable será un
elemento de tipo dataTable. La obtención de datos la hacemos mediante el DOM.
Por otro lado, los archivos para temas del datatable los ubicaremos dentro de la
etiqueta <head> de nuestro documento HTML.
<head>
<!-- Más archivos CSS -->

{!! Html::style('assets/css/datatable-bootstrap.css') !!}


</head>
De esta forma hemos conseguido crear nuestro primer DataTable.

Crear un DataTable
Existen diversas formas de llenar un DataTable con datos, veremos algunas de
las más usadas.

Ocupando el DOM (etiqueta <table>)


Ocuparemos una tabla HTML con un id="example", posteriormente convertiremos
la tabla en un DataTable mediante un script.

• HTML de la tabla

El código Javascript para convertir la tabla con id="example" en un DataTable es:

110
$(document).ready(function() {
$('#example').dataTable();
} );

Ocupando un dataset en Javacript


Un arreglo de arreglos en Javascript puede ser el dataset de un DataTable.

• Javascript del dataset

Una vez definido el dataset bastará con ejecutar la siguiente función para crear
una table en un div con id="demo" en nuestro HTML.

$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0"
class="display" id="example"></table>' );

$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
} );
} );
El código HTML es el siguiente:

<html>
<head>
</head>
<body>
<div id="demo">
</div>
</body>

111
</html>

Ocupando AJAX
Un DataTable puede leer los datos de una tabla de un json obtenido vía AJAX, el
json puede ser servido mediante un Web Service o mediante un json.txt que lo
contenga.

• El archivo JSON

El código Javascript para la creación de DataTable ocupando el json.

$(document).ready(function() {
$('#example').dataTable( {
"ajax": 'json.txt'
} );
} );
El archivo HTML contiene una tabla con un id="example".

<table id="example" class="display" cellspacing="0" width="100%">


<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>

112
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

Internacionalizar un dataTable
Es posible cambiar el idioma de las etiquetas de un datatable si bajamos el archivo
de la traducción en el siguiente link.

Para ocuparlo tenemos que hacer referencia en la función de la creación del


DataTable:

<script type="text/javascript" src="jquery.dataTables.js"></script>


<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"language": {
"url": "dataTables.spanish.lang"
}
} );
} );
</script>

Filtrar datos de un DataTable


Podemos ocupar el campo de texto de búsqueda del DataTable y buscar bajo
diferentes críterios separando por un espacio en blanco.

Ejemplo:

• Para buscar un administrador cuyo nombre empiece con la letra O y su teléfono sea
extensión 228, podemos poner administrador O 228

113
Notas

Para referenciar estilos css y js ejm.

href="{{asset(“assets/$theme/bower_components/font-awesome/css/font-
awesome.min.css")}}”>

en la documentacion de laravel en Views nos indica como pasar datos a la vista en


appserviceProvide en la función boot se tine que modificar como lo especifica la
documentación:

public function boot()

//

Paso 1: Instala Laravel 6

En primer lugar, necesitamos obtener una nueva versión de la aplicación


Laravel 6 con el siguiente comando, así que abra el terminal O el
símbolo del sistema y ejecute el siguiente comando:

compositor create-project --prefer-dist laravel / lar


avel blog

Paso 2: Configuración de la base de datos

En el segundo paso, haremos la configuración de la base de datos, por


ejemplo, el nombre de la base de datos, el nombre de usuario, la
contraseña, etc. para nuestra aplicación crítica de laravel 6. Así que
abramos el archivo .env y completemos todos los detalles de la siguiente
manera:

114
.env

DB_CONNECTION = mysql

DB_HOST = 127.0 . 0.1

DB _PORT = 3306

DB _DATABASE = aquí el nombre de su base de datos ( b


log )

DB_USERNAME = aquí nombre de usuario de la base de da


tos ( root )

DB_PASSWORD = aquí contraseña de la base de datos ( r


oot )

Lea también: Laravel 6 lanza nuevas funciones y mejora

Paso 3: crear migración

vamos a crear una aplicación cruda para el producto. así que tenemos que
crear la migración para la tabla de "productos" usando el comando
Laravel 6 php artisan, así que primero comience el siguiente comando:

php artesanal make: migración create_products_table -


-create = productos

Después de este comando, encontrará un archivo en la siguiente ruta


"base de datos / migraciones" y deberá colocar el siguiente código en su
archivo de migración para crear la tabla de productos.

<? php

use Illuminate \ Support \ Facades \ Schema ;

use Illuminate \ Database \ Schema \ Blueprint ;


115
use Illuminate \ Database \ Migrations \ Migration ;

La clase CreateProductsTable extiende la migración

/ **

* Ejecuta las migraciones.

* *

* @return void

* /

función pública up ()

Schema :: create ( 'productos' , función ( Bl


ueprint $ table ) {

$ tabla -> incrementos ( 'id' );

$ tabla -> cadena ( 'nombre' );

$ tabla -> texto ( 'detalle' );

$ tabla -> marcas de tiempo ();

});

/ **

116
* Revertir las migraciones.

* *

* @return void

* /

función pública abajo ()

Esquema :: dropIfExists ( 'productos' );

Ahora debe ejecutar esta migración siguiendo el comando:

php artesanal migrar

Paso 4: Agregar ruta de recursos

Aquí, necesitamos agregar una ruta de recursos para la aplicación de


productos defectuosos. abra su archivo "routes / web.php" y agregue la
siguiente ruta.
rutas / web.php

Route :: resource ( 'productos' , 'ProductController'


);

Paso 5: Agregar controlador y modelo

En este paso, ahora deberíamos crear un nuevo controlador como


ProductController. Entonces ejecute el siguiente comando y cree un

117
nuevo controlador. debajo del controlador para crear un controlador de
recursos.

php artisan make: controller ProductController --reso


urce --model = Producto

Después del siguiente comando, encontrará un nuevo archivo en esta ruta


"app / Http / Controllers / ProductController.php".
En este controlador creará siete métodos por defecto como los siguientes
métodos:
1) índice ()
2) crear ()
3) tienda ()
4) mostrar ()
5) editar ()
6) actualizar ()
7) destruir ()
Entonces, copiemos el siguiente código y coloquemos el archivo
ProductController.php.
app / Http / Controllers / ProductController.php

<? php

aplicación de espacio de nombres \ Http \ Controllers


;

use App \ Product ;

use Illuminate \ Http \ Request ;

118
clase ProductController extiende Controlador

/ **

* Mostrar una lista del recurso.

* *

* @return \ Illuminate \ Http \ Response

* /

índice de función pública ()

$ productos = Producto :: latest () -> pagina


te ( 5 );

vista de retorno ( 'products.index' , compact


( 'productos' ))

-> con ( 'i' , ( solicitud () -> input (


'página' , 1 ) - 1 ) * 5 );

/ **

* Mostrar el formulario para crear un nuevo recu


rso.

119
* *

* @return \ Illuminate \ Http \ Response

* /

función pública create ()

vista de retorno ( 'productos.crear' );

/ **

* Almacene un recurso recién creado en el almace


namiento.

* *

* @param \ Illuminate \ Http \ Request $ request

* @return \ Illuminate \ Http \ Response

* /

público tienda de funciones ( Solicitud $ solicit


ud )

$ request -> validar ([

'nombre' => 'requerido' ,

'detalle' => 'obligatorio' ,

120
]);

Producto :: crear ( $ solicitud -> all ());

return redirect () -> route ( 'productos.inde


x' )

-> con ( 'éxito' , 'Producto


creado con éxito' );

/ **

* Mostrar el recurso especificado.

* *

* @param \ App \ Product $ product

* @return \ Illuminate \ Http \ Response

* /

función pública show ( Producto $ producto )

vista de retorno ( 'productos.show' , compact


a ( 'producto' ));

121
/ **

* Mostrar el formulario para editar el recurso e


specificado.

* *

* @param \ App \ Product $ product

* @return \ Illuminate \ Http \ Response

* /

función pública editar ( Producto $ producto )

vista de retorno ( 'productos.editar' , compa


cto ( 'producto' ));

/ **

* Actualiza el recurso especificado en el almace


namiento.

* *

* @param \ Illuminate \ Http \ Request $ request

* @param \ App \ Product $ product

* @return \ Illuminate \ Http \ Response

* /

122
actualización de la función pública ( Solicitud $
solicitud , Producto $ producto )

$ request -> validar ([

'name' => 'requerido' ,

'detail' => 'obligatorio' ,

]);

$ product -> update ( $ request -> all ());

return redirect () -> route ( 'productos.inde


x' )

-> con ( 'éxito' , 'Producto


actualizado con éxito' );

/ **

* Eliminar el recurso especificado del almacenam


iento.

* *

* @param \ App \ Product $ product

* @return \ Illuminate \ Http \ Response

123
* /

función pública destruir ( Producto $ producto )

$ producto -> eliminar ();

return redirect () -> route ( 'productos.inde


x' )

-> con ( 'éxito' , 'Producto


eliminado con éxito' );

Ok, entonces, después de ejecutar el siguiente comando, encontrará "app


/ Product.php" y colocará el siguiente contenido en el archivo
Product.php:
app / Product.php

<? php

aplicación de espacio de nombres ;

use Illuminate \ Database \ Eloquent \ Model ;

clase Producto se extiende Modelo

124
{

protegido $ rellenable = [

'nombre' , 'detalle'

];

Paso 6: Agregar archivos Blade

En el ultimo paso. En este paso tenemos que crear solo archivos


Blade. Así que principalmente tenemos que crear un archivo de diseño y
luego crear una nueva carpeta "productos" y luego crear archivos blade
de la aplicación Crud. Entonces, finalmente, debe crear el siguiente
archivo blade:
1) layout.blade.php
2) index.blade.php
3) create.blade.php
4) edit.blade.php
5) show.blade.php
Así que vamos a crear el siguiente archivo y poner el siguiente código.
resources / views / products / layout.blade.php

<! DOCTYPE html>

<html>

<head>

<title> Laravel 6 CRUD Application - ItSolutionSt


uff.com </title>

125
<link href = "https://cdnjs.cloudflare.com/ajax/l
ibs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"
rel = "stylesheet" >

</head>

<cuerpo>

<div class = "container" >

@yield ('contenido')

</div>

</body>

</html>

recursos / vistas / productos / index.blade.php

@extends ('products.layout')

@section ('contenido')

<div class = "row" >

<div class = "col-lg-12 margin-tb" >

<div class = "pull-left" >

<h2> Laravel 6 CRUD Ejemplo desde cer


o - ItSolutionStuff.com </h2>

</div>
126
<div class = "pull-right" >

<a clase = "btn btn-success" href = "


{{ route('products.create') }}"> Crear nuevo producto
</a>

</div>

</div>

</div>

@if ($ mensaje = Sesión :: get ('éxito'))

<div class = "alert alert-success" >

<p> {{$ mensaje}} </p>

</div>

@terminara si

<table class = "table table -bordered" >

<tr>

<th> No </th>

<th> Nombre </th>

<th> Detalles </th>

<th width = "280px" > Acción </th>

</tr>

127
@foreach ($ productos como $ producto)

<tr>

<td> {{++ $ i}} </td>

<td> {{$ product-> name}} </td>

<td> {{$ product-> detail}} </td>

<td>

<form action = "{{route ('products.de


stroy', $ product-> id)}}" method = "POST">

<a class = "btn btn-info" href =


"{{ route('products.show',$product-> id)}} "> Mostrar
</a>

<a class = "btn btn-primary" href


= "{{ route('products.edit',$product-> id)}} "> Edita
r </a>

@csrf

@method ('BORRAR')

<button type = "submit" class = "


btn btn-danger" > Eliminar </button>

</form>

128
</td>

</tr>

@endforeach

</table>

{!! $ productos-> enlaces () !!}

@endsection

recursos / vistas / productos / create.blade.php

@extends ('products.layout')

@section ('contenido')

<div class = "row" >

<div class = "col-lg-12 margin-tb" >

<div class = "pull-left" >

<h2> Añadir nuevo producto </h2>

</div>

<div class = "pull-right" >

<a class = "btn btn-primary" href = "{{ r


oute('products.index') }}"> Volver </a>

</div>

129
</div>

</div>

@if ($ errores-> any ())

<div class = "alert alert-danger" >

<strong> ¡Vaya! </strong> Hubo algunos proble


mas con su entrada. <br> <br>

<ul>

@foreach ($ errores-> all () como $ error


)

<li> {{$ error}} </li>

@endforeach

</ul>

</div>

@terminara si

<form action = "{{route ('products.store')}}" method


= "POST" >

@csrf

<div class = "row" >

130
<div class = "col-xs-12 col-sm-12 col-md-12"
>

<div class = "form-group" >

<strong> Nombre: </strong>

<input type = "text" name = "name" cl


ass = "form-control" placeholder = "Name" >

</div>

</div>

<div class = "col-xs-12 col-sm-12 col-md-12"


>

<div class = "form-group" >

<strong> Detalle: </strong>

<textarea class = "form-control" styl


e = " height : 150px " name = "detail" placeholder =
"Detail" > </textarea>

</div>

</div>

<div class = "col-xs-12 col-sm-12 col-md-12 t


ext-center" >

<button type = "submit" class = "btn


btn-primary" > Enviar </button>

</div>

</div>

131
</form>

@endsection

recursos / vistas / productos / edit.blade.php

@extends ('products.layout')

@section ('contenido')

<div class = "row" >

<div class = "col-lg-12 margin-tb" >

<div class = "pull-left" >

<h2> Editar producto </h2>

</div>

<div class = "pull-right" >

<a class = "btn btn-primary" href = "


{{ route('products.index') }}"> Volver </a>

</div>

</div>

</div>

@if ($ errores-> any ())

<div class = "alert alert-danger" >

132
<strong> ¡Vaya! </strong> Hubo algunos pr
oblemas con su entrada. <br> <br>

<ul>

@foreach ($ errores-> all () como $ e


rror)

<li> {{$ error}} </li>

@endforeach

</ul>

</div>

@terminara si

<form action = "{{route ('products.update', $ pro


duct-> id)}}" method = "POST">

@csrf

@method ('PUT')

<div class = "row" >

<div class = "col-xs-12 col-sm-12 col-md-


12" >

<div class = "form-group" >

<strong> Nombre: </strong>

133
<input type = "text" name = "name
" value = "{{$ product-> name}}" class = "form-contro
l" placeholder = "Name">

</div>

</div>

<div class = "col-xs-12 col-sm-12 col-md-


12" >

<div class = "form-group" >

<strong> Detalle: </strong>

<textarea class = "form-control"


style = " height : 150px " name = "detail" placeholde
r = "Detail" > {{$ product-> detail}} </textarea>

</div>

</div>

<div class = "col-xs-12 col-sm-12 col-md-


12 text-center" >

<button type = "submit" class = "btn bt


n-primary" > Enviar </button>

</div>

</div>

</form>

@endsection

recursos / vistas / productos / show.blade.php


134
@extends ('products.layout')

@section ('contenido')

<div class = "row" >

<div class = "col-lg-12 margin-tb" >

<div class = "pull-left" >

<h2> Mostrar producto </h2>

</div>

<div class = "pull-right" >

<a class = "btn btn-primary" href = "


{{ route('products.index') }}"> Volver </a>

</div>

</div>

</div>

<div class = "row" >

<div class = "col-xs-12 col-sm-12 col-md-12"


>

<div class = "form-group" >

<strong> Nombre: </strong>

{{$ producto-> nombre}}

</div>

135
</div>

<div class = "col-xs-12 col-sm-12 col-md-12"


>

<div class = "form-group" >

<strong> Detalles: </strong>

{{$ producto-> detalle}}

</div>

</div>

</div>

@endsection

Ahora estamos listos para ejecutar nuestro ejemplo de aplicación Crud


con laravel 6, así que ejecute el siguiente comando para una ejecución
rápida:

servicio artesanal php

Otro ejemplo
CÓMO CREAR UN CRUD EN LARAVEL 5.5 DESDE CERO
Hola que tal, bienvenido a este nuevo artículo en donde aprenderás cómo crear un crud en
Laravel 5.5 desde cero, este es un articulo que por así decirlo es una continuación del
artículo Cómo instalar y configurar Laravel 5.5 y lo que vamos hacer es básicamente crear
las opciones de crear, leer, actualizar y eliminar que son las opciones básicas que tiene una
tabla, para esto usaremos Laravel que es un Framework para PHP que como se verá a

136
continuación nos ayuda y nos abstrae la creación de un motón de código simplemente con
usar comandos vía consola.

INSTALACIÓN DE LARAVEL VÍA COMPOSER


Previamente debemos tener instalado XAMPP y en la ubicación C:\xampp\htdocs abrimos
una ventana de comandos e instalamos usando el siguientes comando:

1 composer create-project laravel/laravel=5.5 crudlaravel


Como te darás cuenta dependiendo la velocidad de tu conexión a internet esto puede o no
tardar mucho.
Bien, ahora que ya tenemos creado el proyecto lo primero que vamos hacer es cambiar la
configuración para la base de datos, usuario y clave, si aún no lo has hecho puedes ver el
artículo anterior Cómo instalar y configurar Laravel 5.5 donde explico como hacerlo. El
nombre de la base de datos le llamaremos del mismo nombre del proyecto crudlaravel,
posteriormente deberás crear la base de datos en MySQL.

CREACIÓN DE MIGRACIONES
El tema de migraciones en Laravel tiene que ver con el diseño de tablas de nuestra base de
datos, y aunque podemos directamente crear nuestra tabla en MySQL crear el controlador y
el modelo, lo vamos hacer usando migraciones, cual es la diferencia? Pues la diferencia es
que usando migraciones diseñas las tablas como si de modelos se tratarán y luego las puedes
generar a MySQL con un sólo comando, además puedes llevar la cronología de la creación
de tus tablas y si algo salió mal, por ejemplo te olvidaste de crear un campo, fácilmente haces
un rollback y deshaces los cambios. Pero bueno para que se entienda mejor vamos al ejemplo.

137
La tabla que vamos a crear para el ejemplo se va llamar Libros y contendrá los campos:
nombre, resumen, número de páginas, edición, autor y precio.
Para crear la tabla creamos un archivo de migración, para esto vamos a la ventana de
comandos abierta anteriormente y usamos el siguiente comando:

1 php artisan make:migration create_libros_table


Si te das cuenta ahora se creó un nuevo archivo dentro de la carpeta database->migratios
2018_01_26_035203_create_libros_table.php.
Es una clase que hereda de la clase Migration, en esta clase definimos los campos que va
contener la tabla Libros, en esta clase hay dos métodos dow que se llama cuando ejecutamos
un rollback y up que es donde crearemos los campos para nuestra tabla, el archivo debe
quedar como se muestra a continuación:

1 <?php
2
3 use Illuminate\Support\Facades\Schema;
4 use Illuminate\Database\Schema\Blueprint;
5 use Illuminate\Database\Migrations\Migration;
6
7 class CreateLibrosTable extends Migration
8 {
9 /**
10 * Run the migrations.
11 *
12 * @return void
13 */
14 public function up()
15 {
16 Schema::create('libros', function (Blueprint $table) {
17 $table->increments('id');
18 $table->string('nombre');
19 $table->string('resumen');
20 $table->integer('npagina');
21 $table->integer('edicion');
22 $table->string('autor');
23 $table->decimal('precio',5,2);
24 $table->timestamps();
25 });
26 }
27
28 /**
29 * Reverse the migrations.
30 *
31 * @return void
32 */
33 public function down()
34 {
35 Schema::dropIfExists('libros');

138
36 }
37 }
Ahora lo que nos queda es ejecutar la migración, esto para que se cree nuestra
tabla libros, para esto ejecutamos el siguiente comando:

1 php artisan migrate


Lo que nos queda es revisar la tabla libros, para esto puedes usar phpMyadmin o si usas
MySQL Workbeanch puedes ver que efectivamente se creó la tabla libros junto con otras
adicionales.
Bien, como te mencionaba en ciertos casos pueda que que quieras añadir algún campo a
alguna tabla que ya está creada, simplemente puedes hacer un rollback, lo que hace en este
caso es eliminar las tablas creadas con las migraciones, la base de datos queda vacía sin
ninguna tabla, puedes probar el siguiente comando y verás que pasa:

1 php artisan migrate:rollback


Si de nuevo revisas la base de datos te darás cuenta que la base de datos volvió a su estado
inicial y como este comando era sólo para probar, debes volver a generar el comando migrate
para crear la tabla libros.

CREAR EL MODELO
Ahora que, y tenemos la tabla creada, necesitamos un modelo que mapee los campos a la
tabla libros y para esto usamos el comando:
1 php artisan make:model Libro
Si vas a la carpeta app del proyecto vas a encontrar un nuevo archivo llamado Libro.php,
como te darás cuenta es una clase vacía y en teoría deberíamos crear las propiedades, los
setter y getter, pero con la ayuda de Laravel sólo creamos un array $fillable y le pasamos los
campos que queremos llenar, así de fácil como se muestra a continuación:

1 <?php
2
3 namespace App;
4
5 use Illuminate\Database\Eloquent\Model;
6
7 class Libro extends Model
8 {
9 //
10 protected $fillable = ['nombre', 'resumen', 'npagina','edicion','autor','precio'];
11 }

CREAR EL CONTROLLER

139
Laravel es un Framework que usa el patrón MVC (Modelo, Vista, Controlador), por lo que
ahora tenemos que crear el controlador con los métodos index, show, update, delete.
Como te habrás dado cuenta hasta ahora hemos generado todo básicamente a través de
comandos y bueno esta vez no es la excepción, así que para crear el controlador usamos el
siguiente comando:
1 php artisan make:controller LibroController --resource
Si ahora vas a la carpeta app/Http/Controllers puedes ver que se generó un nuevo archivo
VideoController.php y como por arte de magia se crearon todos los métodos que necesitamos,
a continuación dejo el código para cada uno de los métodos, que como te darás cuenta es
corto y sencillo, puesto que el framework prácticamente hace todo por nosotros.
1 <?php
2
3 namespace App\Http\Controllers;
4
5 use Illuminate\Http\Request;
6 use App\Libro;
7
8 class LibroController extends Controller
9 {
10 /**
11 * Display a listing of the resource.
12 *
13 * @return \Illuminate\Http\Response
14 */
15 public function index()
16 {
17 //
18 $libros=Libro::orderBy('id','DESC')->paginate(3);
19 return view('Libro.index',compact('libros'));
20 }
21
22 /**
23 * Show the form for creating a new resource.
24 *
25 * @return \Illuminate\Http\Response
26 */
27 public function create()
28 {
29 //
30 return view('Libro.create');
31 }
32
33 /**
34 * Store a newly created resource in storage.
35 *
36 * @param \Illuminate\Http\Request $request
37 * @return \Illuminate\Http\Response
38 */
39 public function store(Request $request)
40 {
41 //
42 $this->validate($request,[ 'nombre'=>'required', 'resumen'=>'required', 'npagina'=>'required',
43 'edicion'=>'required', 'autor'=>'required', 'npagina'=>'required', 'precio'=>'required']);
44 Libro::create($request->all());
45 return redirect()->route('libro.index')->with('success','Registro creado satisfactoriamente');

140
46 }
47
48 /**
49 * Display the specified resource.
50 *
51 * @param int $id
52 * @return \Illuminate\Http\Response
53 */
54 public function show($id)
55 {
56 $libros=Libro::find($id);
57 return view('libro.show',compact('libros'));
58 }
59
60 /**
61 * Show the form for editing the specified resource.
62 *
63 * @param int $id
64 * @return \Illuminate\Http\Response
65 */
66 public function edit($id)
67 {
68 //
69 $libro=libro::find($id);
70 return view('libro.edit',compact('libro'));
71 }
72
73 /**
74 * Update the specified resource in storage.
75 *
76 * @param \Illuminate\Http\Request $request
77 * @param int $id
78 * @return \Illuminate\Http\Response
79 */
80 public function update(Request $request, $id) {
81 //
82 $this->validate($request,[ 'nombre'=>'required', 'resumen'=>'required', 'npagina'=>'required',
83 'edicion'=>'required', 'autor'=>'required', 'npagina'=>'required', 'precio'=>'required']);
84
85 libro::find($id)->update($request->all());
86 return redirect()->route('libro.index')->with('success','Registro actualizado satisfactoriamente');
87
88 }
89
90 /**
91 * Remove the specified resource from storage.
92 *
93 * @param int $id
94 * @return \Illuminate\Http\Response
95 */
96 public function destroy($id)
97 {
98 //
99 Libro::find($id)->delete();
100 return redirect()->route('libro.index')->with('success','Registro eliminado satisfactoriamente');
}
}

CREAR LAS RUTAS

141
Una ruta en Laravel indica a que método del controlador debe direccionar una petición por
ejemplo cuando queramos crear un nuevo libro, editar etc., para esto vamos a la carpeta routes
y al archivo web.php el cual debe quedar como sigue:

1 <?php
2
3 /*
4 |--------------------------------------------------------------------------
5 | Web Routes
6 |--------------------------------------------------------------------------
7 |
8 | Here is where you can register web routes for your application. These
9 | routes are loaded by the RouteServiceProvider within a group which
10 | contains the "web" middleware group. Now create something great!
11 |
12 */
13
14 Route::resource('libro', 'LibroController');

CREAR LAS VISTAS


Finalmente lo que vamos hacer es crear las vistas, para mostrar, editar y eliminar libros, para
esto vamos a /resources/views/ y creamos una nueva carpeta llamada layouts y dentro de
esta carpeta creamos el archivo layout.blade.php, este archivo tiene la plantilla del proyecto,
es importante mencionar que Laravel usa el motor de plantillas blade que junto con HTML
permiten crear vistas más simples y limpias.

<!DOCTYPE html>
1
<html lang="es">
2
<head>
3
<meta charset="utf-8">
4
<meta name="viewport"
5
content="width=device-width, initial-scale=1, user-scalable=yes">
6
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
7
rel="stylesheet">
8
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
9
</head>
10
<body>
11
12
<div class="container-fluid" style="margin-top: 100px">
13
14
@yield('content')
15
</div>
16
<style type="text/css">
17
.table {
18
border-top: 2px solid #ccc;
19
20
}
21
</style>
22
</body>
23
</html>

142
ARCHIVO INDEX.BLADE.PHP
Posteriormente en la ruta /resources/views/ creamos una nueva carpeta llamada Libro que va
contener las vistas (index, create, show, edit). Dentro de esta carpeta creamos el archivo
index.blade.php como se muestra a continuación:

1 @extends('layouts.layout')
2 @section('content')
3 <div class="row">
4 <section class="content">
5 <div class="col-md-8 col-md-offset-2">
6 <div class="panel panel-default">
7 <div class="panel-body">
8 <div class="pull-left"><h3>Lista Libros</h3></div>
9 <div class="pull-right">
10 <div class="btn-group">
11 <a href="{{ route('libro.create') }}" class="btn btn-info" >Añadir Libro</a>
12 </div>
13 </div>
14 <div class="table-container">
15 <table id="mytable" class="table table-bordred table-striped">
16 <thead>
17 <th>Nombre</th>
18 <th>Resumen</th>
19 <th>No. Páginas</th>
20 <th>Edicion</th>
21 <th>Autor</th>
22 <th>Precio</th>
23 <th>Editar</th>
24 <th>Eliminar</th>
25 </thead>
26 <tbody>
27 @if($libros->count())
28 @foreach($libros as $libro)
29 <tr>
30 <td>{{$libro->nombre}}</td>
31 <td>{{$libro->resumen}}</td>
32 <td>{{$libro->npagina}}</td>
33 <td>{{$libro->edicion}}</td>
34 <td>{{$libro->autor}}</td>
35 <td>{{$libro->precio}}</td>
36 <td><a class="btn btn-primary btn-xs" href="{{action('LibroController@edit', $libro->id)}}" ><span
37 class="glyphicon glyphicon-pencil"></span></a></td>
38 <td>
39 <form action="{{action('LibroController@destroy', $libro->id)}}" method="post">
40 {{csrf_field()}}
41 <input name="_method" type="hidden" value="DELETE">
42
43 <button class="btn btn-danger btn-xs" type="submit"><span class="glyphicon glyphicon-
44 trash"></span></button>
45 </td>
46 </tr>
47 @endforeach
48 @else
49 <tr>
50 <td colspan="8">No hay registro !!</td>
51 </tr>
52 @endif

143
53 </tbody>
54
55 </table>
56 </div>
57 </div>
58 {{ $libros->links() }}
59 </div>
60 </div>
61 </section>

@endsection

ARCHIVO CREATE.BLADE.PHP

1 @extends('layouts.layout')
2 @section('content')
3 <div class="row">
4 <section class="content">
5 <div class="col-md-8 col-md-offset-2">
6 @if (count($errors) > 0)
7 <div class="alert alert-danger">
8 <strong>Error!</strong> Revise los campos obligatorios.<br><br>
9 <ul>
10 @foreach ($errors->all() as $error)
11 <li>{{ $error }}</li>
12 @endforeach
13 </ul>
14 </div>
15 @endif
16 @if(Session::has('success'))
17 <div class="alert alert-info">
18 {{Session::get('success')}}
19 </div>
20 @endif
21
22 <div class="panel panel-default">
23 <div class="panel-heading">
24 <h3 class="panel-title">Nuevo Libro</h3>
25 </div>
26 <div class="panel-body">
27 <div class="table-container">
28 <form method="POST" action="{{ route('libro.store')
29 }}" role="form">
30 {{ csrf_field() }}
31 <div class="row">
32 <div class="col-xs-6 col-sm-6 col-
33 md-6">
34 <div class="form-group">
35 <input
36 type="text" name="nombre" id="nombre" class="form-control input-sm" placeholder="Nombre del libro">
37 </div>
38 </div>
39 <div class="col-xs-6 col-sm-6 col-
40 md-6">
41 <div class="form-group">
42 <input
43 type="text" name="npagina" id="npagina" class="form-control input-sm" placeholder="Número de Páginas">
44 </div>

144
45 </div>
46 </div>
47
48 <div class="form-group">
49 <textarea name="resumen"
50 class="form-control input-sm" placeholder="Resumen"></textarea>
51 </div>
52 <div class="row">
53 <div class="col-xs-6 col-sm-6 col-
54 md-6">
55 <div class="form-group">
56 <input
57 type="text" name="edicion" id="edicion" class="form-control input-sm" placeholder="Edición del libro">
58 </div>
59 </div>
60 <div class="col-xs-6 col-sm-6 col-
61 md-6">
62 <div class="form-group">
63 <input
64 type="text" name="precio" id="precio" class="form-control input-sm" placeholder="Precio del libro">
65 </div>
66 </div>
67 </div>
68 <div class="form-group">
69 <textarea name="autor"
70 class="form-control input-sm" placeholder="Autor"></textarea>
71 </div>
72 <div class="row">
73
74 <div class="col-xs-12 col-sm-12 col-
75 md-12">
76 <input
type="submit" value="Guardar" class="btn btn-success btn-block">
<a href="{{
route('libro.index') }}" class="btn btn-info btn-block" >Atrás</a>
</div>

</div>
</form>
</div>
</div>

</div>
</div>
</section>
@endsection

ARCHIVO EDIT.BLADE.PHP

1 @extends('layouts.layout')
2 @section('content')
3 <div class="row">
4 <section class="content">
5 <div class="col-md-8 col-md-offset-2">
6 @if (count($errors) > 0)
7 <div class="alert alert-danger">
8 <strong>Error!</strong> Revise los campos obligatorios.<br><br>
9 <ul>

145
10 @foreach ($errors->all() as $error)
11 <li>{{ $error }}</li>
12 @endforeach
13 </ul>
14 </div>
15 @endif
16 @if(Session::has('success'))
17 <div class="alert alert-info">
18 {{Session::get('success')}}
19 </div>
20 @endif
21
22 <div class="panel panel-default">
23 <div class="panel-heading">
24 <h3 class="panel-title">Nuevo Libro</h3>
25 </div>
26 <div class="panel-body">
27 <div class="table-container">
28 <form method="POST" action="{{
29 route('libro.update',$libro->id) }}" role="form">
30 {{ csrf_field() }}
31 <input name="_method" type="hidden"
32 value="PATCH">
33 <div class="row">
34 <div class="col-xs-6 col-sm-6 col-
35 md-6">
36 <div class="form-group">
37 <input
38 type="text" name="nombre" id="nombre" class="form-control input-sm" value="{{$libro->nombre}}">
39 </div>
40 </div>
41 <div class="col-xs-6 col-sm-6 col-
42 md-6">
43 <div class="form-group">
44 <input
45 type="text" name="npagina" id="npagina" class="form-control input-sm" value="{{$libro->npagina}}">
46 </div>
47 </div>
48 </div>
49
50 <div class="form-group">
51 <textarea name="resumen"
52 class="form-control input-sm" placeholder="Resumen">{{$libro->resumen}}</textarea>
53 </div>
54 <div class="row">
55 <div class="col-xs-6 col-sm-6 col-
56 md-6">
57 <div class="form-group">
58 <input
59 type="text" name="edicion" id="edicion" class="form-control input-sm" value="{{$libro->edicion}}">
60 </div>
61 </div>
62 <div class="col-xs-6 col-sm-6 col-
63 md-6">
64 <div class="form-group">
65 <input
66 type="text" name="precio" id="precio" class="form-control input-sm" value="{{$libro->precio}}">
67 </div>
68 </div>
69 </div>
70 <div class="form-group">

146
71 <textarea name="autor"
72 class="form-control input-sm" placeholder="Autor">{{$libro->autor}}</textarea>
73 </div>
74 <div class="row">
75
76 <div class="col-xs-12 col-sm-12 col-
77 md-12">
<input
type="submit" value="Actualizar" class="btn btn-success btn-block">
<a href="{{
route('libro.index') }}" class="btn btn-info btn-block" >Atrás</a>
</div>

</div>
</form>
</div>
</div>

</div>
</div>
</section>
@endsection
Y bien como puedes ver que en cuestión de minutos puedes crear un CRUD con Laravel,

Voyager
Voyager es súper fácil de instalar. Después de crear su nueva aplicación Laravel,

puede incluir el paquete Voyager con el siguiente comando:

compositor requiere tcg / voyager

A continuación, asegúrese de crear una nueva base de datos y agregar sus

credenciales de base de datos a su archivo. env, también querrá agregar la URL de su

aplicación en la variable APP_URL:

APP_URL=http://localhost
DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

147
Finalmente, podemos instalar Voyager. Puede elegir instalar Voyager con datos

ficticios o sin los datos ficticios. Los datos ficticios incluirán 1 cuenta de administrador

(si aún no existen usuarios), 1 página de demostración, 4 publicaciones de

demostración, 2 categorías y 7 configuraciones.

Para instalar Voyager sin datos ficticios, simplemente ejecute

php artisan voyager: instalar

Si prefiere instalarlo con los datos ficticios, ejecute el siguiente comando:

php artisan voyager: instalar --with-dummy

La clave especificada fue un error demasiado largo

Si ve este mensaje de error, tiene una versión desactualizada de MySQL, use la

siguiente solución: https://laravel-news.com/laravel-5-4-key-too-long-error

¡Y todos estamos listos para irnos!

Inicie un servidor de desarrollo local con php artisan serve y visite la URL http: //

localhost: 8000 / admin en su navegador.

Si instaló con los datos ficticios, se ha creado un usuario para usted con las siguientes

credenciales de inicio de sesión:

correo electrónico: [email protected]

contraseña: contraseña

Nota rápida

Un usuario ficticio solo se crea si no hay usuarios actuales en su base de datos.

Si no fue con el usuario ficticio, es posible que desee asignar privilegios de

administrador a un usuario existente. Esto se puede hacer fácilmente ejecutando este

comando:

148
php artesanal voyager: admin [email protected]

Si desea crear un nuevo usuario administrador, puede pasar el indicador --create, así:

php artisan voyager: admin [email protected] --crear

Y se le solicitará el nombre de usuario y la contraseña.


para mayor información lea la documentación de Voyager

https://voyager-docs.devdojo.com/getting-started/installation

Configuraciones

Con la instalación de Voyager, encontrará un nuevo archivo de configuración


ubicado en config / voyager.php.

En este archivo puede encontrar varias opciones para cambiar la configuración


de su instalación de Voyager.

Si almacena en caché sus archivos de configuración, asegúrese de ejecutar php


artisan config: clear después de cambiar algo.

A continuación, profundizaremos en el archivo de configuración y daremos una


descripción detallada de cada conjunto de configuración.

Users

<?php

'user' => [

'add_default_role_on_register' => true,

'default_role' => 'user',

'admin_permission' => 'browse_admin',

149
'namespace' => App\User::class,

'redirect' => '/admin'

],

add_default_role_on_register: especifique si desea agregar la función


predeterminada a cualquier usuario nuevo que se cree. default_role: también
puede especificar cuál es el default_role del usuario. admin_permission: el
permiso necesario para ver el panel de administración. espacio de nombres: el
espacio de nombres de sus aplicaciones Clase de usuario. redirigir: redirige la ruta
después de que el usuario haya iniciado sesión.

Controller

<?php

'controllers' => [

'namespace' => 'TCG\\Voyager\\Http\\Controllers',

],

Puede especificar el espacio de nombres del controlador predeterminado de


Voyager. Si alguna vez desea anular alguna de las funciones principales de
Voyager, puede hacerlo duplicando los controladores Voyager y especificando la
ubicación de sus controladores personalizados.

150
Sobrescribir un solo controlador Si solo desea sobrescribir un solo controlador,
puede considerar agregar el siguiente código a su
AppServiceProvider class in the register method. $this->app-
>bind(VoyagerBreadController::class, MyBreadController::class);

Model

<?php

'models' => [

//'namespace' => 'App\\',

],

Puede especificar el espacio de nombres o la ubicación de sus modelos. Esto se


usa al crear los modelos desde la sección de base de datos de Voyager. Si no se
define, se utilizará el espacio de nombres de la aplicación predeterminada.

Assets

<?php

'assets_path' => '/vendor/tcg/voyager/assets',

Es posible que desee especificar una ruta de activos diferente. Si su sitio vive en
una subcarpeta, es posible que deba incluir ese directorio al comienzo de la ruta.
Esto también se puede usar en caso de que desee duplicar los activos publicados
y personalizar los suyos.

Al actualizar a una nueva versión de Voyager, los activos ubicados en el directorio


/ vendor / tcg / voyager / assets pueden necesitar sobrescribirse, por lo que si

151
desea personalizar cualquier estilo, querrá duplicar ese directorio y especificar la
nueva ubicación de su ruta de activos .

Storage

<?php

'storage' => [

'disk' => 'public',

],

Por defecto, Voyager utilizará el almacenamiento local público. También puede


usar cualquier controlador dentro de su config / filesystems.php. Esto significa que
puede usar S3, Google Cloud Storage o cualquier otro sistema de
almacenamiento de archivos que desee.

Database

<?php

'database' => [

'tables' => [

'hidden' => ['migrations', 'data_rows', 'data_types', 'menu_items',


'password_resets', 'permission_role', 'settings'],

152
],

],

Es posible que desee ocultar algunas tablas de base de datos en la sección de


base de datos Voyager. En la configuración de la base de datos, puede elegir qué
tablas desea ocultar.

Multilingual

<?php

'multilingual' => [

'enabled' => false,

'default' => 'en',

'locales' => [

'en',

//'pt',

],

],

153
Puede especificar si desea habilitar múltiples idiomas o no. Luego puede
especificar su idioma predeterminado y todos los idiomas de soporte (locales)
Leer más sobre multilenguaje here.

Dashboard

<?php

'dashboard' => [

'navbar_items' => [

'Profile' => [

'route' => 'voyager.profile',

'classes' => 'class-full-of-rum',

'icon_class' => 'voyager-person',

],

'Home' => [

'route' => '/',

'icon_class' => 'voyager-home',

'target_blank' => true,

],

'Logout' => [

154
'route' => 'voyager.logout',

'icon_class' => 'voyager-power',

],

],

'widgets' => [

'TCG\\Voyager\\Widgets\\UserDimmer',

'TCG\\Voyager\\Widgets\\PostDimmer',

'TCG\\Voyager\\Widgets\\PageDimmer',

],

],

In the dashboard config you can add navbar_items, make the data_tables
responsive, and manage your dashboard widgets.

navbar_items Include a new route in the main user navbar dropdown by including
a 'route', 'icon_class', and 'target_blank'.

data_tables If you set 'responsive' to true the datatables will be responsive.

widgets Here you can manage the widgets that live on your dashboard. You can
take a look at an example widget class by viewing the current widgets inside of

En la configuración del tablero puede agregar elementos de barra de navegación,


hacer que las tablas de datos respondan y administrar los widgets del tablero.

navbar_items Incluya una nueva ruta en el menú desplegable de la barra de


navegación del usuario principal al incluir una 'ruta', 'icon_class' y 'target_blank'.

155
data_tables Si configura 'responsive' en true, las datatables serán responsive.

widgets Aquí puede administrar los widgets que viven en su tablero. Puede echar
un vistazo a una clase de widget de ejemplo al ver los widgets actuales dentro de
tcg/voyager/src/Widgets.

Primary color

<?php

'primary_color' => '#22A7F0',

The default primary color for the Voyager admin dashboard is a light blue color.
You can change that primary color by changing the value of this config.

El color primario predeterminado para el panel de administración de Voyager es un


color azul claro. Puede cambiar ese color primario cambiando el valor de esta
configuración.

Show developer tips

<?php

'show_dev_tips' => true,

In the Voyager admin there are developer tips or notifications that will show you
how to reference certain values from Voyager. You can choose to hide these
notifications by setting this configuration value to false.

156
En el administrador de Voyager hay sugerencias o notificaciones para
desarrolladores que le mostrarán cómo hacer referencia a ciertos valores de
Voyager. Puede optar por ocultar estas notificaciones estableciendo este valor de
configuración en falso.

Additional stylesheets

<?php

'additional_css' => [

//'css/custom.css',

],

You can add your own custom stylesheets that will be included in the Voyager
admin dashboard. This means you could technically create a whole new theme for
Voyager by adding your own custom stylesheet.

Puede agregar sus propias hojas de estilo personalizadas que se incluirán en el


panel de administración de Voyager. Esto significa que técnicamente podría crear
un tema completamente nuevo para Voyager agregando su propia hoja de estilo
personalizada.

Read more here.

The path will be passed to Laravels asset function.

Additional Javascript

<?php

157
'additional_js' => [

//'js/custom.js',

],

The same goes for this configuration. You can add your own javascript that will be
executed in the Voyager admin dashboard. Add as many javascript files as
needed.

Read more here.

Google Maps

<?php

'googlemaps' => [

'key' => env('GOOGLE_MAPS_KEY', ''),

'center' => [

'lat' => env('GOOGLE_MAPS_DEFAULT_CENTER_LAT', '32.715738'),

'lng' => env('GOOGLE_MAPS_DEFAULT_CENTER_LNG', '-117.161084'),

],

'zoom' => env('GOOGLE_MAPS_DEFAULT_ZOOM', 11),

158
],

There is a new data type called coordinates that allow you to add a google map
as a datatype. The user can then drag and drop a pin in the Google Maps to save
a longitude and latitude value in the database.

In this config you can set the default Google Maps Keys and center location. This
can also be added to your .env file.

159

También podría gustarte