Guía Completa de Laravel 5 y HTML5
Guía Completa de Laravel 5 y HTML5
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.
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.
6. Rutas elegantes y seguras: Una misma ruta puede responder de distinto modo a un método
GET o POST.
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:
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 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.
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
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.
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 Laravel
Existen diferentes formas de instalar laravel en nuestra computadora.
• 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
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.
¿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.
{
"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
• MySQL
• Postgresql
• SQLite3
• SQL Server
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.
• 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
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
El directorio database
16
El directorio public
El directorio resources
• 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
El directorio tests
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.
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
}
]
20
• Web Services
Validación de 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".
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.
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.
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.
25
migraciones crearemos una nueva que se
llame agregar_campos_tabla_pasteles con los comandos que ya hemos visto:
3. Después como la función down hace lo opuesto que la función up, dentro de esta
eliminaremos los campos recien agregados.
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
• Podemos con un simple comando ver reflejados los cambios de nuestra base de
datos.
• 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.
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.
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.
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.
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.
31
Eloquent
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:
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:
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
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:
Route::get('pruebasPastel', function(){
$pasteles = Pastel::vainilla()->get();
dd($pasteles);
35
});
También podemos crear scopes dinámicos de la siguiente forma:
Route::get('pruebasPastel', function(){
$pasteles = Pastel::sabor('vainilla')->get();
dd($pasteles);
});
Además con Eloquent tambien podemos insertar, actualizar o eliminar registros,
por ejemplo:
$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:
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:
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();
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.
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.
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');
});
Route::get('home', 'HomeController@index');
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:
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:
{{ $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.
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:
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.
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.
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 .
• @show: Esta sentencia se usa para decir donde termina el section definido en
el template.
• @stop: Esta sentencia nos permite decir donde termina un section cuando se
usa el section dentro de las vistas hijas.
54
como @include('admin.users.table') , views no se contempla pues es la raiz de las
vistas.
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.
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.
• 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.
• 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.
• 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.
57
En la linea de comandos podemos ver todas las rutas que nuestro proyecto tiene
registradas:
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.
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:
• text
• search
• url
• tel
• email
• password
• data pickers
• number
• checkbox
El atributo pattern
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.
• 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>
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:
Ejemplo:
app/Http/Request/CrearPastelesRequest
Su contenido es el siguiente:
<?php
namespace Curso\Http\Requests;
use Curso\Http\Requests\Request;
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.
<?php
namespace Curso\Http\Requests;
64
use Curso\Http\Requests\Request;
/**
* 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
namespace Curso\Http\Requests;
65
use Curso\Http\Requests\Request;
/**
* 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.
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;
<?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:
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.
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.
Preparativos
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;
/**
* 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:
@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
namespace Curso\Http\Middleware;
use Illuminate\Contracts\Auth\Guard;
77
use Closure;
class IsAdmin
{
protected $auth;
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:
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.
<!DOCTYPE html>
La codificación de caracteres se hace de la siguiente manera:
<meta charset="UTF-8">
Nuevas API's
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
80
• HTML Web Workers
• HTML SSE
<!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:
• 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
<p> Parrafo
<p> Parrafo
83
<hr> Línea horizontal para dividir secciones
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
<input>
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:
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.
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.
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:
/* comentarios */
87
Un conjuno de reglas consiste en un selector y un bloque de declaraciones.
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.
88
Existen 3 formas de insertar CSS:
Una hoja de estilos interna puede ser usada si una única página tiene un único
estilo.
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.
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.
/* 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.
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
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.
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.
Agrupar selectores
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;
}
Nota. Para ver la lista de comandos de escribe en la terminal php artisan y nos da la lista de
comandos
93
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('pasteles');
}
}
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:
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:
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;
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.
Con esto ya tendremos nuestro controlador(aun vacio) y nuestras rutas del sistema, lo cual
podemos verificar con el comando:
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:
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:
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.
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:
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:
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');.
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:
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:
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.
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');
}
99
Vistas del CRUD
Estas son la ultima parte que vamos a crear, primero debemos preparar los direct orios y los
archivos que usaremos.
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.
101
Nota: tambien les invito a ver el anexo de DataTable para mayor informacion.
Vista Index
@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.
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.
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:
<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>
</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
@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.
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:
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 -->
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 -->
Crear un DataTable
Existen diversas formas de llenar un DataTable con datos, veremos algunas de
las más usadas.
• HTML de la tabla
110
$(document).ready(function() {
$('#example').dataTable();
} );
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
$(document).ready(function() {
$('#example').dataTable( {
"ajax": 'json.txt'
} );
} );
El archivo HTML contiene una tabla con un id="example".
<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.
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
href="{{asset(“assets/$theme/bower_components/font-awesome/css/font-
awesome.min.css")}}”>
//
114
.env
DB_CONNECTION = mysql
DB _PORT = 3306
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
/ **
* *
* @return void
* /
función pública up ()
});
/ **
116
* Revertir las migraciones.
* *
* @return void
* /
117
nuevo controlador. debajo del controlador para crear un controlador de
recursos.
<? php
118
clase ProductController extiende Controlador
/ **
* *
* /
/ **
119
* *
* /
/ **
* *
* /
120
]);
/ **
* *
* /
121
/ **
* *
* /
/ **
* *
* /
122
actualización de la función pública ( Solicitud $
solicitud , Producto $ producto )
]);
/ **
* *
123
* /
<? php
124
{
protegido $ rellenable = [
'nombre' , 'detalle'
];
<html>
<head>
125
<link href = "https://cdnjs.cloudflare.com/ajax/l
ibs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"
rel = "stylesheet" >
</head>
<cuerpo>
@yield ('contenido')
</div>
</body>
</html>
@extends ('products.layout')
@section ('contenido')
</div>
126
<div class = "pull-right" >
</div>
</div>
</div>
</div>
@terminara si
<tr>
<th> No </th>
</tr>
127
@foreach ($ productos como $ producto)
<tr>
<td>
@csrf
@method ('BORRAR')
</form>
128
</td>
</tr>
@endforeach
</table>
@endsection
@extends ('products.layout')
@section ('contenido')
</div>
</div>
129
</div>
</div>
<ul>
@endforeach
</ul>
</div>
@terminara si
@csrf
130
<div class = "col-xs-12 col-sm-12 col-md-12"
>
</div>
</div>
</div>
</div>
</div>
</div>
131
</form>
@endsection
@extends ('products.layout')
@section ('contenido')
</div>
</div>
</div>
</div>
132
<strong> ¡Vaya! </strong> Hubo algunos pr
oblemas con su entrada. <br> <br>
<ul>
@endforeach
</ul>
</div>
@terminara si
@csrf
@method ('PUT')
133
<input type = "text" name = "name
" value = "{{$ product-> name}}" class = "form-contro
l" placeholder = "Name">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
@endsection
@section ('contenido')
</div>
</div>
</div>
</div>
</div>
135
</div>
</div>
</div>
</div>
@endsection
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.
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
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:
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');
}
}
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');
<!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,
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
Inicie un servidor de desarrollo local con php artisan serve y visite la URL http: //
Si instaló con los datos ficticios, se ha creado un usuario para usted con las siguientes
contraseña: contraseña
Nota rápida
comando:
148
php artesanal voyager: admin [email protected]
Si desea crear un nuevo usuario administrador, puede pasar el indicador --create, así:
https://voyager-docs.devdojo.com/getting-started/installation
Configuraciones
Users
<?php
'user' => [
149
'namespace' => App\User::class,
],
Controller
<?php
'controllers' => [
],
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' => [
],
Assets
<?php
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.
151
desea personalizar cualquier estilo, querrá duplicar ese directorio y especificar la
nueva ubicación de su ruta de activos .
Storage
<?php
'storage' => [
],
Database
<?php
'database' => [
'tables' => [
152
],
],
Multilingual
<?php
'multilingual' => [
'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' => [
],
'Home' => [
],
'Logout' => [
154
'route' => 'voyager.logout',
],
],
'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'.
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
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
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.
<?php
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.
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.
Google Maps
<?php
'googlemaps' => [
'center' => [
],
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