Curso Laravel V-1

CURSO BÁSICO
FRAMEWORK
LARAVEL
Ingeniería en Tecnologías de la Información y Comunicaciones
ISC. Salvador Duarte Rodríguez
CONFIGURACIÓN SUBLIME
TEXT
 Activar el Side Bar para una mejor visualización del proyecto.
Menú View -> Side Bar -> Show Side Bar
 Plugins extras
 Intalación del Manejador de Paquetes
Tools -> Install Package Control

Tools -> Command Palette
 Con ayuda del Manejador de Paquetes vamos a descargar e instalar los siguientes
complementos:
 Instalar el tema para el entorno de trabajo:
 Package Control: Install Package
 Material Theme
 Activar el paquete de temas para el entorno de trabajo:

 Material Theme: Activate theme (Seleccionar uno de los cuatro temas que hay)
 El tema más común es la opción “Material-Theme-Darker”
 Instalar el lenguaje de plantillas Blade para que lo reconozca el editor
 Laravel Blade Highlighter
 Se activa en la parte inferior derecha de la pantalla al dar click se despliega una lista de
lenguajes, en este caso se activa el que dice “Laravel Blade”.
 Instalar el autocompletado para el lenguaje de plantillas Blade

 Laravel Blade AutoComplete
 Instalar complemento para inspeccionar clases y hacer imports automáticos dentro del código
PHP

 PHP Companion
Vamos a copiar los siguientes atajos de teclado:
{ "keys": ["f6"], "command": "expand_fqcn" },

{ "keys": ["shift+f6"], "command": "expand_fqcn", "args": {"leading_separator": true} },
{ "keys": ["f5"], "command": "find_use" },
{ "keys": ["f4"], "command": "import_namespace" },
{ "keys": ["f3"], "command": "implement" },
{ "keys": ["shift+f12"], "command": "goto_definition_scope" },
{ "keys": ["f7"], "command": "insert_php_constructor_property" }
 Se va a agregar los atajos anteriores en el siguiente documento (parte derecha, después de la
coma) y se guardan los cambios una vez que se a terminado esta acción
 Menú Preferences -> Key Bindings
 Instalar complemento para agregar iconos a las hojas del editor

 A File Icon
 Cambiar apariencia del texto en el editor, al agregar la siguiente configura en la ventana
derecha de la pantalla, dentro de
 Menú Preferences -> Settings

Código:
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"font_size": 23, //Tamaño de letra
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 6, //Espaciado entre líneas en la parte inferior
"line_padding_top": 8, //Espaciado entre líneas en la parte superior
"save_on_focus_lost": true, //Guardado automático al cambiar de hoja de trabajo
"theme": "Material-Theme-Darker.sublime-theme", //Tema que fue instalado
"trim_trailing_white_space_on_save": false //Quita espacios en blanco al guardar
 Instalar complemento para SASS para reconcimiento de sintaxis
 Sass
 Instalar complemento para crear archivos rapidamente

 AdvancedNewFile
 Instalar complemento para Vuejs para reconcimiento de sintaxis

 Vuejs Complete Package
COMANDOS BÁSICOS
TERMINAL/CONSOLA
Composer = Manejador de dependecias de Laravel
Verificar la versión de PHP instalada: php –v
Verificar la versión de Composer instalada: composer –v
Creación de un nuevo proyecto de laravel con composer:
composer create-project laravel/laravel Nombre-Proyecto “5.5.*”
Inicializar el servidor: php artisan serve

Nota: Se tiene que estar dentro del proyecto para que funcione
ESTRUTURA DE CARPETAS
 App -> Código fuente de la aplicación.
 bootstrap ->
 app.php (Archivo de arranque del Framework Laravel).
 cache -> Archivos generados por Laravel.
 config -> Configuración de la aplicación (Se sugiere modificar el archivo .env).
 databases -> Configuración de Bases de datos (factories, migrations, seeders).
 public -> Punto de entrada a la aplicación.
 resources -> Contiene los recursos de la aplicación (CSS, JS, lang, Views).
 routes -> Contiene las rutas de la aplicación (archivo de rutas web.php).
 storages -> Contiene las vistas compiladas.
 tests -> Capa de pruebas de la aplicación

 Feature (peticiones http)
 Unit (Clases/métodos)
 vendor -> Dependencias de composer (no tocar).

Resultado de la ejecución del comando
composer create-project laravel/laravel Curso-Laravel “5.5.*”
Resultado de la ejecución de los

comandos
 php –v
 composer –v
 Ahora para iniciar el servidor de Laravel se utiliza el siguiente comando en la consola/terminal
php artisan serve
 El cual arroja la dirección url del servidor que acaba de inicializarse:
http://127.0.0.1:8000/
 La cual se debe de ingresar en el navegador para ver que funcione correctamente.

Resultado de la ejecución del
comando
php artisan serve
Resultado al ingresar la url del

servidor en el navegador
http://127.0.0.1:8000
 Para verificar que todo este funcionando correctamente, se va a realizar la siguiente
modificación dentro del archivo “welcome.blade.php”, el cual se encuentra dentro de
“resources -> views”.
 1.- Modificar la etiqueta <title> de la siguiente manera:

 <title>Carrera ITIC</title>
 2.- Cambiar el texto “Laravel” por “Carrera ITIC” en la etiqueta <div class=“title m-b-md”>
<div class=“title m-b-md”>

Carrera ITIC
</div>
 3.- Borrar el menú que está debajo de la etiqueta del paso anterior.
Etiqueta <title>
ORIGINAL
<title>Laravel</title>
Etiqueta <title>
Modificada
<title>Carrera ITIC</title>
Etiquetas
Laravel
</div>
<div class=“links”> (Menú) </div>
ORIGINALES
Etiquetas
Carrera ITIC
</div>
<div class=“links”>(Menú)</div>
Eliminar esta etiqueta
MODIFICADAS
Página Principal
ORIGINAL
Página Principal
MODIFICADA
RUTAS EN LARAVEL
 Las rutas están contenidas dentro de la carpeta “routes” en el archivo “web.php”, en el cual se
pueden definir la cantidad de rutas que se necesiten.
 Nota: Las rutas únicamente deben dirigir el direccionamiento del usuario por la aplicación, por
lo que no deben de contener lógica de programación.
 Al crear nuestro proyecto, Laravel nos proporciona la ruta inicial, la cual se puede tomar como
base para la creación de las demás.
//La ruta recibe dos parámetros

//El primero es la dirección y el segundo es una función anónima
Route::get(‘/’, function(){
return view(‘welcome’); //Muestra el contenido de la vista en el navegador
});
CREACIÓN DE RUTAS EN EL
ARCHIVO “WEB.PHP”
//Ruta para la página principal
Route::get(‘/’, function(){
return ‘Página Principal’; //Muestra el texto Página Principal
});
URL: /
//Ruta para la página usuarios

Route::get(‘/usuarios’, function(){
return ‘Usuarios’; //Muestra el texto Usuarios en el navegador
});
URL: /usuarios
Codificación de las rutas en el archivo
web.php
URL: /
URL: /usuarios
//Ruta para la página Detalles de usuarios - Estática
Route::get(‘/usuarios/detalles’, function(){
return ‘Mostrando detalle del usuario: ’. $_GET[‘id’];
//Muestra el texto “Mostrando detalle del usuario: id”
//La variable id se pasa por la URL
});
URL: /usuarios/detalles?id=6
// Ruta para la página Detalles de usuarios - Dinámica

Route::get(‘/usuarios/{id}’, function($id){
return “Mostrando detalle del usuario: {$id}”;
});
URL: /usuarios/6
web.php
URL: /usuarios/detalles?id=6
Notas:
 Ambas rutas hacen mismo direccionamiento.
 Recuerda comentar la ruta “Detalles de usuario –
Estática”, ya que es un poco compleja y solo
dejamos activa la ruta “Detalles de usuario –
Dinámica”.
URL: /usuarios/6
//Ruta para la página de creación de usuarios
Route::get(‘/usuarios/nuevo’, function(){
return ‘Crear un nuevo usuario’;
//Muestra el texto Crear un nuevo usuario
});
URL: /usuarios/nuevo
Al crear estás rutas y probarlas en el navegador obtendemos una funcionalidad anormal, ya que
Laravel compara cada una de ellas en el orden en que fueron creadas, por lo que si una ruta coincide
con otra en un dato o parámetro, las demás no son tomadas en cuenta, ya que solo usa la primera
con la cual coincide.
Nota: Se recomienda que durante la creación de cada una de las rutas sea lo más detallada posible
con la fialidad de evitar confunciones para Laravel o ir acomodando las rutas de forma secuencial,
pero esto es un poco más complicado conforme crece un proyecto.
No se olviden de comentar la ruta “Detalles de usuario – Estática” para evitar problemas
Codificación de las rutas en el archivo Funcionamiento anormal de la ruta
web.php Creación de usuarios
Ahora vamos a modificar la ruta “Detalles de usuarios - Dinámica”, para evitar el problema
que surgió al detallarla un poco más
// Ruta para la página Detalles de usuarios - Dinámica

Route::get(‘/usuarios/{id}’, function($id){
return “Mostrando detalle del usuario: {$id}”;
})->where(‘id’, ‘[0-9]+’);
//Se emplea la expresión where, la cual acepta dos parámetros
//El primero es la variable que va a ser evaluada
//El segundo es una expresión regular con la cual se evaulará la variable
//0-9+ Esta expresión regular es para validar cualquier número positivo
URL: /usuarios/6
web.php
URL: /usuarios/6
Notas:
 La ruta “Detalles de usuario - Dinámica” se
modificó para hacerla más detallada y evitar
confusión al ser llamada.
 Se muestra el correcto funcionamiento de la ruta
“Creación de usuarios”.
//Ruta para la página Saludo – Varios parámetros
Route::get(‘/saludo/{nombre}/{apellido?}’, function($nombre, $apellido=null){
//En la dirección la variable apellido es opcional, por lo que lleva el signo “?”
//En la función anónima la variable apellido se inicializa en “null” por ser opcional
if($apellido){
return “Bienvenido {$nombre} {$apellido}”;
//Muestra el texto Bienvenido Nombre Apellido que se proporcionen
}else{
return “Bienvenido {$nombre}”;
//Muestra el texto Bienvenido Nombre que se proporciona
}
});
URL: /saludo/Salvador/Duarte
URL: /saludo/Salvador
web.php
URL: /saludo/Salvador/Duarte
Notas:
 La ruta “Saludo” maneja dos variables para su
ejecución, la primera es obligatoria y la segunda es
opcional.
URL: /saludo/Salvador
PRUEBAS EN LARAVEL
 Las pruebas que se realizan en el navegador denominadas “pruebas en el momento”, no
garantizan el funcionamiento futuro de la aplicación, ya que se pueden ingresar errores de
cualquier tipo.
 Laravel tiene la Capa de Pruebas, la cual esta contenida en la carpeta “test”, la cual contiene
dos subcarpetas las cuales son:
 Feature: Para pruebas que simulaban peticiones http al servidor.

 Unit: Para pruebas unitarias de la aplicación en las clases y métodos que se implementaban sin hacer
peticiones http al servidor.
 Por lo cual, Laravel permite hacer pruebas automátizadas de la aplicación de manera rápida y
sencilla.
 Para realizar las pruebas automátizadas vamos a utilizar las Terminal/Consola, ya que es un
poco más rapida y sencilla esta forma, por medio de los siguientes comandos:
 1.- Hay que situarnos dentro del proyecto.
 2.- Una vez situados en el proyecto, ingresamos el siguiente comando:
vendor/bin/phpunit (Para Linux y Mac OS)

vendor\bin\phpunit (Para Windows)
vendor/phpunit/phpunit/phpunit (Para Windows)
 3.- Se puede definir un alias para realizar ésta acción mediante el comando:
alias p= vendor/bin/phpunit
alias p= vendor/phpunit/phpunit/phpunit
Para comprobar el funcionamiento de las pruebas se escribe p en la terminal y se da enter
para ejecutar las pruebas y ver los resultados que se obtienen.
Ejecución de pruebas
Comando:
vendor/bin/phpunit
vendor\bin\phpunit
vendor\phpunit\phpunit\phpunit
Ejecución de pruebas
Comandos:
alias p=vendor/bin/phpunit
p
CREACIÓN DE PRUEBAS EN
LARAVEL
 Para crear las pruebas nos dirigimos a la terminal/consola e ingresamos el comando:
php artisan make:test ModuloUsuarioTest
 Ahora nos dirigimos al editor de código (Sublime Text) para verificar la creación del archivo
“ModuloUsuarioTest.php” en el cual vamos a codificar las pruebas, el cual debe de estar
contenido en “test -> Feature” y su abre para ver su contenido.
 Nota:
 Al crear un nuevo archivo para codificar pruebas, éste debe de terminar con la palabra “Test”
para que phpunit lo reconozca de manera adecuada.
Verificar la creación del archivo:
ModuloUsuarioTest.php
en
test -> Feature
Creación del archivo de pruebas con el

comando:
php artisan make:test
ModuloUsuarioTest
 Se tiene la siguiente prueba de manera automática (modificada) para evaluar la ruta de la página
principal:
/**
* @return void
*/
public function testBasicTest(){ //Función para realizar la prueba con prefijo “test”
$this->get(‘/’) //Ruta que va a ser evaluada en la prueba
->assertStatus(200) //Código del resultado esperado
->assertSee(‘Página Principal’);//Texto que se espera visualizar en el navegador
}
Verificar el código del archivo:
ExampleTest.php
en
test -> Feature
y modificarlo
Ejecutar las pruebas en

test -> Feature
con el comando:
p
 A continuación, se muestra la sintaxis simplificada para la creación de pruebas mediante la prueba
para evaluar el funcionamiento de la ruta “/usuarios”.
/**
* @test //Permite quitar el prefijo “test” del nombre de la función
*/
public function carga_lista_de_usuarios(){ //Función para realizar la prueba
$this->get(‘/usuarios’) //Ruta que va a ser evaluada
->assertStatus(200) //Código del resultado esperado
->assertSee(‘Usuarios’); //Texto que se espera visualizar en el navegador
}
 Nota:
Se guardan los cambios y se procede a comprobar el funcionamiento de la prueba al ejecutarla con el

comando “p” que fuedefinido anteriormente en la terminal/consola.
Modificar el código del archivo:
en
test -> Feature
Ejecutar las pruebas

test -> Feature
con el comando:
p
Agregar dos pruebas más al archivo:
en
test -> Feature
Para las rutas:
Detalles de Usuario - Dinámica
Creación de Usuarios
Ejecutar las todas las pruebas

test -> Feature
con el comando:
p
ModuloSaludoTest.php
en
test -> Feature
Creación del archivo de pruebas con el

comando:
php artisan make:test
ModuloSaludoTest
Agregar dos pruebas al archivo:
ModuloSaludoTest.php
en
test -> Feature
Para la ruta:
Saludo – Varios parámetros
Ejecutar las pruebas

test -> Feature
con el comando:
p
CONTROLADORES EN
LARAVEL
 Nos permiten separar la lógica de programación del direccionamiento entre páginas dentro de
la aplicación web, lo que reduce la complejidad al implementar la Capa de Controladores
como medidas de seguridad.
 Esta capa nos permite agrupar clases y dividirlas en métodos sencillos de implementar.
 Para crear un controlador nos dirigimos a la terminal/consola e ingresamos el comando:
php artisan make:controller ControladorUsuario
 Ahora nos dirigimos al editor de código (Sublime Text) para verificar la creación del archivo
“ControladorUsuario.php” en el cual vamos a codificar el controlador, el cual debe de estar
contenido en “app -> http -> Controllers” y su abre para ver su contenido.
ControladorUsuario.php
en
app -> Http -> Controllers
Creación del archivo del controlador con

el comando:
php artisan make:controller
ControladorUsuario
ControladorSaludo.php
en
Creación del archivo del controlador con

el comando:
php artisan make:controller
ControladorSaludo
 Se tiene el siguiente controlador de manera automática, el cual contiene la clase
“ControladorUsuario” que extiende “Controller”, la cual fue creada por medio de las
depencias de “Composer”:
class ControladorUsuarios extends Controller{
 Dentro de esta clase, se van a codificar los métodos que se van a vincular con las rutas que
fueron creadas anteriormente para hacerlas más simples y sencillas de entender al quietarles la
lógica de programación.
 Para realizar el vínculo entre el controlador y las rutas, se recomienda trabajar esta parte en
dos columnas para identificar de manera rápida los cambios que se van a producir, como se
muestra a continuación.
Controlador (ControladorUsuario.php) Ruta (web.php)

app -> Http -> Controllers routes
Dentro de la clase “ControladorUsuarios” Route::get(‘/usuarios’,
‘ControladorUsuarios@index’);
public function index(){
return ‘Usuarios’; La ruta va a estar conformada por dos parámetros,
} los cuales son:
A esta función se le asigna la lógica de 1.- La ruta a vincular.

programación que estaba contenida en la ruta y 2.- El nombre de la clase @ nombre del método, él
puede contener más funciones, de acuerdo a lo que cual va a realizar la lógica de programación (entre
necesite el usuario. comillas simples).
VÍNCULO ENTRE
CONTROLADORUSUARIO.PHP
Y WEB.PHP
VÍNCULO ENTRE
CONTROLADORSALUDO.PHP
Y WEB.PHP
VISTAS EN LARAVEL
 Las vistas son páginas completas (código HTML) con el propósito de diseñar el sitio web, las
cuales están contenidas un archivo “php”.
 Las Vistas o Views, se encuentran dentro de la carpeta “resourse -> views”.
 Ahora nos dirigimos al archivo “ControladorUsuario.php” que se encuentra en:
 Para modificar el método “listar” de la siguiente forma, para que muestre una vista en lugar de
un texto.
public function listar(){

return view(‘usuarios’);
}
Archivo
ORIGINAL
Archivo
MODIFICADO
 Se pueden pasar datos a las Vistas o Views en Laravel de las siguientes dos formas:
 Datos estáticos (Arreglos de Datos)
 Datos dinámicos (Bases de Datos)
 Ahora dentro del archivo “ControladorUsuario.php”, se va declarar un arreglo con varios

nombres de usuario dentro del método que hace el llamado a la vista, el cual es “listar”.
$usuarios = [‘Miriam’, ‘Salvador’, ‘Carolina’, ‘Guillermo’, ‘Ernesto’];

Código completo de la Vista/View “usuarios.php”
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport” content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lista de Usuarios</title>
</head>
<body>
</body>
</html>
 Enseguida se crea la vista “usuarios.php” en “resources -> views” y le agregamos el
siguiente código HTML/PHP en dentro de la etiqueta <body>:
<ul>
<?php foreach ($usuarios as $usuario): ?>
<li><?php echo $usuario ?></li>
<?php endforeach ?>
</ul>
Código completo de la Vista/View “usuarios.php”
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport” content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lista de Usuarios</title>
</head>
<body>
<h1>Listado de Usuarios</h1>
<ul>
<?php foreach ($usuarios as $usuario): ?>
<li><?php echo $usuario ?></li>
<?php endforeach; ?>
</ul>
</body>
</html>
 Ahora modificamos de nuevo el archivo “ControladorUsuario.php” agregandole el paso de datos
a la vista que es llamada en el método “listar” de la siguiente manera:
//El método view acepta dos parámetros

return view(‘usuarios’, [ //El primero es el nombre de la vista
‘usuarios’ => $usuarios //El segundo es un arreglo asociativo el cual
]); //se conforma con una variable interna (usuarios)
//a la cual se le asigna el arreglo de usuarios.
Ahora ya podemos probar está Vista/View en el navegador con la ruta:

/usuarios
Archivo
con el paso de datos al view en el método
listar
Visualización del View

usuarios.php
URL: /usuarios
 Ahora nos dirigimos al archivo “ModuloUsuarioTest.php”, cual se encuentra en “test ->
Feature”, para modificar la prueba “carga_lista_de_usuarios”, agregandole las siguientes
líneas de código:
->assertSee(‘Miriam’)
->assertSee(‘Salvador’)
Éstas líneas de código tienen como propósito verificar que los usuarios que se muestran en el
navegador son los que están contenidos en el arreglo de usuarios ($usuarios), el cual está
definido en el método “listar” del controlador (ControladorUsuario.php)
Archivo
Método carga_lista_de_usuarios
ORIGINAL
Archivo
Método carga_lista_de_usuarios
MODIFICADO
EJECUCIÓN DE LAS PRUEBAS
MODULOUSUARIOTEST.PHP
 Ahora vamos a modificar el arreglo de usuarios ($usuarios) del controlador
“ControladorUsuario.php”, al agregarle el siguiente registro:
‘<script>alert(“Hola”)</ script >’//Es código JS
 Con la finalidad de producir un error de seguridad en la aplicación web, para mostrar de que
manera se puede evitar que los usuarios introduzcan este tipo de códigos maliciosos en nuestra
plataforma.
Archivo
Arreglo $usuarios
MODIFICADO
Error de seguridad
Ejecución de código JS
Introducido por el usuario y ejecutado cada vez
que se actualice la página
URL: /usuarios
 Para quitar este error de seguridad que se genera cuando un usuario mal intencionado
introduce código de JavaScript o cualquier otro código (SQL, etc.), Laravel proporciona
ciertas acciones o funciones llamadas “Helpers”que evitan que se ejecuten éste tipo códigos,
por ejemplo:
 La función helper “e”, la cual nos permite escapar o transformar código HTML, JS, SQL,
etc., en texto plano, lo cual evita que se lleve a cabo la acción de dicho código, mostrandoce
únicamente el código sin ejecutarse, esta función se va a implementar en la variable $usuario
de la vista “usuarios.php”, como se muestra a continuación.
e($usuario)
Archivo View
usuarios.php
Variable e($usuario)
MODIFICADO
Código JS
Transformado en Texto Plano
URL: /usuarios
 Por otro lado, también se pueden mandar varias variables a una vista, al ser agregadas al
arreglos asociativo que se le pasa como segundo parámetro a una Vista/View.
 Ahora dentro del archivo “ControladorUsuarios.php” vamos a modificar la función
“return” del método “listar” de la siguiente forma:
return view(‘usuarios’, [
‘usuarios’ => $usuarios,
‘titulo’ => ‘Listado de usuarios’
]);
 Por lo cual también haremos que el título de la página y el encabezado de la lista de usuarios
sean dinámicos, esto al modificar las siguientes etiquetas en el archivo de la Vista/View
llamado “usuarios.php”
<title><?php echo e($titulo)></title>

<h1><?php echo e($titulo)></h1>
Archivo
MODIFICADO
Archivo View
usuarios.php
MODIFICADO
VISUALIZACIÓN EN EL
NAVEGADOR DE LA
VISTA/VIEW “USUARIOS.PHP”
 Ahora vamos a actualizar el archivo de pruebas “ModuloUsuarioTest.php” en el método
“carga_lista_de_usuarios”, para estar seguros que no hay problemas hasta el momento.
 Vamos a cambiar la siguiente línea de código:
->assertSee(‘Usuarios’)
 Por:
->assertSee(‘Listado de usuarios’)
 Por último, comprobamos que las pruebas esten pasando de forma satisfactoria.
Archivo
MODIFICADO
Ejecución de las pruebas

ModuloUsuarioTest
 Otras formas de pasar datos del Controlador (Controller) a la Vista (View) son:
 Método with con arreglo asociativo
return view(‘usuarios’) -> with([

‘usuarios’ => $usuarios,
‘titulo’ => ‘Listado de usuarios’
]);
 Método with simple
return view(‘usuarios’)
-> with(‘usuarios’, $usuarios)
-> with(‘titulo’ , ‘Listado de usuarios’);
PLANTILLAS BLADE
LARAVEL
 El Sistema de Plantillas Blade nos permite realizar diseños más rápidos y sencillos en torno
al acabado del sitio web, ya que permite la reutilización del código de diseño (HTML, CSS,
JS, etc.) por medio de diversas directivas.
 Además, el Blade proporciona una funcionalidad de seguridad, por su función de

escapado/transformación de código a texto plano, evitando diversos ataques al sitio web.
 Los archivos que implementan el Sistema de Plantillas Blade tienen la extensión:
.blade.php
 Para que funcione Blade, se cambia la extensión de la vista:
“usuarios.php” por “usuarios.blade.php”

 Ahora realizaremos la impresión de variables y uso de algunas directivas de Blade de la
siguiente manera:
 Dentro de la Vista/View “usuarios.php” ubicada en “resources -> views”, se realizan los
sigueintes cambio:
 Modificar las etiquetas <h1> y <li> como se muestra:
<h1><?php echo e($titulo) ?></h1> por <h1>{{ $titulo }}</h1>

<li><?php echo e($usuario) ?></li> por <li>{{ $usuario }}</li>
 La sintaxis de Blade para imprimir una variable es entre llaves doble “{{ }}”, lo que se pone
dentro es código PHP.
 Las directivas de Blade permiten simplificar el código PHP utilizado, además éstas se
caracterizan por comenzar con el carácter “@” como se muestra:
<?php foreach ($usuarios as $usuario): ?> por @foreach ($usuarios as $usuario)
<?php endforeach; ?> por @endforeach
Archivo View
usuario.blade.php
MODIFICADO
Ejecución del View en el navegador

usuarios.blade.php
URL: /usuarios
 Ahora haremos la simulación de la existencia o no de usuarios en la Vista/View por medio del
Sistema de Plantillas Blade.
 Primero vamos a modificar el Controller “ControladorUsuario.php”, el cual está ubicado

en “app -> Http ->controllers” de la siguiente manera:
if(request() -> has(‘empty’)){

$usuarios = [];
}else{
$usuarios = [‘Miriam’, ‘Salvador’, ‘Carolina’, ‘Guillermo’, ‘Ernesto’];
}
Probamos que este funcionando correctamente el código anterior en el navegador mediante las
rutas:
URL: /usuarios?empty
URL: /usuarios
Codificación del controlador en el archivo
URL: /usuarios
 Ahora vamos a modificar el View “usuarios.blade.php”, el cual está ubicado en “resources
-> views” de la siguiente manera:
@if(! empty($usuarios))
<ul>
@foreach ($usuarios as $usuario)
<li>{{ $usuario }}</li>
@endforeach
</ul>
@else
<p>No hay usuarios registrados</p>
@endif
Volvemos a probar el correcto funcionamiento en el navegador mediante las rutas:

URL: /usuarios
Codificación del view en el archivo
usuarios.blade.php
URL: /usuarios
 Ahora vamos a agregar una nueva prueba al archivo “ModuloUsuarioTest.php” el cual está
ubicado en “test -> Feature”.
 El código de la prueba es el siguiente:
/**
* @test
*/
function mostrar_lista_vacia(){
$this->get(‘/usuarios?empty’)
->assertStatus(200)
->assertSee(‘No hay usuarios registrados’);
}
 Una vez códificada la prueba anterior, se procede a ejecutar las pruebas.

Archivo de Test
MODIFICADO
Ejecución de las pruebas

ModuloUsuarioTest
LAYOUTS BLADE (DISEÑO)
 Ahora vamos a implementar las directivas “LAYOUTS” de Blade para hacer el diseño de un
sitio web.
 Primero vamos a descargar una plantilla de Bootstrap.

 Ingresamos a la dirección: https://getbootstrap.com.
 Enseguida nos dirigimos al menú “Examples” que está en la parte superior.
 Ahora nos dirigimos al apartado “Custom components”.
 Abrimos la plantilla llamada “Sticky footer navbar”.
 Por último, descargamos la plantilla (Código fuente) del navegador
https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/
y la guardamos con el nombre “bootstrap.html”.
https://getbootstrap.com -> Examples Examples -> Custom Components
Custom Components -> Sticky footer navbar

 Una vez que ha sido descargado el Código Fuente de la Plantilla de Bootstrap
(bootstrap.html) procederemos a hacerla funcionar antes de integrarla al proyecto.
 Primero, vamos a pegar el Código Fuente (bootstrap.html) en la carpeta “public” o crear

directamente el archivo “bootstrap.html” en la carpeta “public” y pegar el Código Fuente
de la Plantilla de Bootstrap.
ARCHIVO
BOOTSTRAP.HTML
 Segundo, vamos a hacer funcionar las Hojas de Estilo (CSS), para lo cual realizamos lo
siguiente:

 Enseguida nos dirigimos al menú “Documentation” que está en la parte superior.
 Ahora copiamos la etiqueta <link> que está en el apartado “CSS”.
 Enseguida sustituimos la etiqueta <link> que se encuentra en la línea 16 de archivo
“bootstrap.html”.
 Después creamos el archivo “estilo.css” en la ubicación “public -> css” y pegamos el
contenido que se obtiene en el navegador en la línea 44 de la plantilla de bootstrap al ser
inspeccionada en él.
 Ahora vamos a hacer referencia al archivo “estilo.css” por medio de la ruta: “css/estilo.css”
en la etiqueta <link> en la línea 47 del archivo “bootstrap.html”.
Etiqueta CSS – BOOTSTRAP Etiqueta CSS enlazada al archivo
“estilo.css”
Línea 16
Inspección del código de la plantilla – Línea 44

 Tercero, vamos a hacer funcionar los archivos de JavaScript, para lo cual realizaremos lo
siguientes:

 Enseguida nos dirigimos al menú “Documentation” que está en la parte superior.
 Ahora copiamos las etiquetas <script> que están en los apartados “Bundle” y “Separate”.
 Enseguida sustituimos las etiquetas <script> que se encuentra antes de la etiqueta </body>
 Comprobamos el funcionamiento correcto del archivo “bootstrap.html” en el navegador.

Archivo
bootstrap.html
Varificación del correcto funcionamiento

del archivo
Bootstrap.html
dentro del navegador
 En este punto, ya estamos lista para implementar el archivo “bootstrap.html” como base
para el diseño de nuevo sitio web.
 Ahora vamos a fraccionar el archivo “bootstrap.html” en dos archivos o vistas/views de la
siguiente manera:
 Archivo 1:
 Crear un archivo llamado “encabezado.blade.php” en la ubicación “resources -> views”.
 En este archivo se va a copiar el código del archivo “bootstrap.html” de la línea 1 hasta la
línea 87 o desde la etiqueta <!doctype html> hasta la etiqueta <div class="container">
 Archivo 2:
 Crear un archivo llamado “pie.blade.php” en la ubicación “resources -> views”.
 En este archivo se va a copiar el código del archivo “bootstrap.html” de la línea 91 hasta la
línea 108 o desde la etiqueta </div> hasta la etiqueta</html>.
Archivo
encabezado.blade.php
resources -> views
Archivo
pie.blade.php
resources -> views
 Ahora vamos a modificar la vista/view llamada “usuarios.blade.php” al incluir las
siguientes directivas del Sistema de Plantillas Blade de Laravel.
@include(‘encabezado’) //Esta directiva permite incrustar el contenido del

//archivo encabezado.blade.php en la vista como
//parte del diseño de la página.
@include(‘pie’) //Esta directiva permite incrustar el contenido del

//archivo encabezado.blade.php en la vista como
//parte del diseño de la página.
 Ahora comprobamos la funcionalidad de la vista/view usuarios.blade.php en el navegador,

con la finalidad de observar el comportamiento del diseño.
Archivo
usuarios.blade.php
resources -> views
Visualización del archivo

usuarios.blade.php
en el navegador
AGREGAR UNA BARRA
LATERAL AL DISEÑO
 Ahora vamos modificar de nuevo la vista/view “usuarios.blade.php”, la cual se encuentra en
“resources -> views” para agregarle una barra lateral de la siguiente manera:
@include('encabezado’)
<div class=“row mt-3”>
<div class=“col-8”>
<h1>{{ $titulo }}</h1>
@if(!empty($usuarios))
<ul>
@foreach ($usuarios as $usuario)
<li>{{ $usuario }}</li>
@endforeach
</ul>
CONTINUACIÓN DEL CÓDIGO
@else
<p>No hay usuarios registrados</p>
@endif
</div>
<div class=“col-4”>
<h2>Barra Lateral</h2>
</div>
<div>
@include('pie’)
 Verificamos que se muestra el diseño de la Barra Lateral en el navegador.

Archivo
usuarios.blade.php
resources -> views
Modificado
Visualización del archivo

usuarios.blade.php
en el navegador
 En este momento, vamos a hacer todavía más genérico nuestro diseño con la finalidad de
poder modificar partes específicas de él de forma automática para evitar errores, por lo cual
vamos a crear el archivo “BLateral.blade.php” en la ubicación “resources -> views” para
el diseño personalizado de la Barra Lateral del sitio web, el cual contendrá el siguiente código:
<h2>Barra Lateral</h2>
 Enseguida en la vista/view “usuarios.blade.php” se le añadirá la directiva

“@include(‘BLateral’)” en vez de la etiqueta <h2> que tiene como encabezado la sección
del la Barra Lateral.
 Comprobar el funcionamiento correcto de estos cambios en el navegador.

usuarios.blade.php - Modificado BLateral.blade.php
Comprobación del funcionamiento de usuarios.blade.php

 Ahora vamos a implementar el diseño que acabamos de crear a otra página de nuestro sitio web, la cual
va a ser ubicada en la ruta “Detalles de usuarios” (/usuarios/{id}), para lo cual vamos a modificar el
método “mostrar” del archivo “ControladorUsuarios.php” el cual se ubica en “app -> Http ->
Controllers” con la finalidad de mostrar en el navegador otra vista/view con un diseño en vez de solo
un texto plano como se muestra a continuación.
public function mostrar($id){

return view(‘mostrarUsuarios’,compact(‘id’)); //La función compact nos
} //permite mandar variables
//a la vista, solo hay que hacer
//que coincida la dicha variable
//con la del método
Nota:
Si en este momento comprobamos el funcionamiento en el navegador de la ruta “Detalles de usuarios
(/usuarios/{id})”, nos va a mandar un error de que no se encuentra la vista “mostrarUsuarios” y el motivo
de esto es que todavía no ha sido creada.
Archivo
Modificado
Visualización de la ruta
/usuarios/6
en el navegador
Manda un error porque la vista
“mostrarUsuarios” NO EXISTE
 Para corregir el error que se acaba de presentar nos dirigimos a la ubicación “resources ->
views” y creamos la vista/view “mostrarUsuarios.blade.php” y en la cual vamos a copiar el
diseño que tenemos en la vista “usuarios.blade.php” y le realizamos los siguientes cambios:
 1.- Borramos el contenido del la etiqueta <div class="col-8">

 2.- Ahora dentro de dicha etiqueta vamos a poner el siguiente código:
<h1>Usuario #{{ $id }}</h1>

Mostrando detalle del usuario: {{ $id }}
Nota:
Se va a presentar un problema con los estilos del sitio web, ya que no se van a estar
implementando correctamente, pero las pruebas si van a estar funcionando correctamente.
Mal funcionamiento de los estilos en la ruta /usuarios/
mostrar.blade.php – Modificado
{id}
Comprobación de las pruebas del sitio web

 Para solucionar el problema que tenemos con el estilo (CSS) en la ruta “/usuarios/{id}” nos
dirigimos a la ubicación “resources -> views” y abrimos en la vista/view
“encabezado.blade.php” y realizamos la siguiente modificación:
 Cambiamos la etiqueta:
<link href="css/estilo.css" rel="stylesheet" type="text/css">

 Por:
<link href=”{{ asset(‘css/estilo.css’) }}" rel="stylesheet" type="text/css">
 El método asset de Blade nos permite obtener la ruta absoluta que tiene Laravel al
archivo “estilos.css” para poder encontrarlo, recordemos que ya estaba creado en la
ubicación “public -> css” y que permitia el buen funcionamiento de la plantilla base
“bootstrap.html”.
Archivo
encabezado.blade.php
resources -> views
Modificado
Visualización de la ruta
/usuarios/6
en el navegador
 También podemos hacer el diseño base del sitio web en un solo archivo, como lo veremos a
continuación:
 Primero creamos un archivo llamado “diseno.blade.php” en la ubicación “resources -> views”

 Enseguida vamos a copiar dentro del archivo “diseno.blade.php” el contenido de los archivos
“encabezado.blade.php” y “pie.blade.php”.
 Después en la parte del contenido vamos a agregar la directiva “@yield(‘contenido’)”, la cual
hace referencia a una sección dentro del archivo, la cual vamos a poder modificar de manera
específica.
 Enseguida regresamos al archivo “usuarios.blade.php” ubicado en “resources -> views” y se le
quitan las directivas “@include(‘encabezado’)” y “@include(‘pie’)”.
 Después extendemos el diseño base por medio de la directiva “@extends(‘diseno’)” y definimos
las secciones que se van a mostrar por medio de la directiva “@section(‘contenido’)”, la cual se
cierra con “@endsection”.
 Nota:
Ahora ya no son necesarios los archivos “encabezado.blade.php” y “pie.blade.php”, por lo que ya

se pueden eliminar del proyecto.
diseno.blade.php usuarios.blade.php
Visualización de la ruta /usuarios en el navegador

Curso Laravel V-1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Laravel V-1

Cargado por

Copyright:

Formatos disponibles

CURSO BÁSICO

Menú View -> Side Bar -> Show Side Bar

Tools -> Install Package Control

 Activar el paquete de temas para el entorno de trabajo:

 Instalar el autocompletado para el lenguaje de plantillas Blade

 Package Control: Install Package

Vamos a copiar los siguientes atajos de teclado:

{ "keys": ["f6"], "command": "expand_fqcn" },

 Instalar complemento para agregar iconos a las hojas del editor

 Menú Preferences -> Settings

 Instalar complemento para crear archivos rapidamente

 Instalar complemento para Vuejs para reconcimiento de sintaxis

Verificar la versión de PHP instalada: php –v

Verificar la versión de Composer instalada: composer –v

Creación de un nuevo proyecto de laravel con composer:

composer create-project laravel/laravel Nombre-Proyecto “5.5.*”

Inicializar el servidor: php artisan serve

 config -> Configuración de la aplicación (Se sugiere modificar el archivo .env).

 databases -> Configuración de Bases de datos (factories, migrations, seeders).

 public -> Punto de entrada a la aplicación.

 routes -> Contiene las rutas de la aplicación (archivo de rutas web.php).

 storages -> Contiene las vistas compiladas.

 tests -> Capa de pruebas de la aplicación

 vendor -> Dependencias de composer (no tocar).

composer create-project laravel/laravel Curso-Laravel “5.5.*”

Resultado de la ejecución de los

php artisan serve

 El cual arroja la dirección url del servidor que acaba de inicializarse:

 La cual se debe de ingresar en el navegador para ver que funcione correctamente.

php artisan serve

Resultado al ingresar la url del

 1.- Modificar la etiqueta <title> de la siguiente manera:

<div class=“title m-b-md”>

//La ruta recibe dos parámetros

//Ruta para la página usuarios

// Ruta para la página Detalles de usuarios - Dinámica

// Ruta para la página Detalles de usuarios - Dinámica

 Feature: Para pruebas que simulaban peticiones http al servidor.

 1.- Hay que situarnos dentro del proyecto.

 2.- Una vez situados en el proyecto, ingresamos el siguiente comando:

vendor/bin/phpunit (Para Linux y Mac OS)

php artisan make:test ModuloUsuarioTest

Creación del archivo de pruebas con el

Ejecutar las pruebas en

Se guardan los cambios y se procede a comprobar el funcionamiento de la prueba al ejecutarla con el

Ejecutar las pruebas

Ejecutar las todas las pruebas

Creación del archivo de pruebas con el

Ejecutar las pruebas

 Para crear un controlador nos dirigimos a la terminal/consola e ingresamos el comando:

php artisan make:controller ControladorUsuario

Creación del archivo del controlador con

Creación del archivo del controlador con

class ControladorUsuarios extends Controller{

Controlador (ControladorUsuario.php) Ruta (web.php)

A esta función se le asigna la lógica de 1.- La ruta a vincular.

 Ahora nos dirigimos al archivo “ControladorUsuario.php” que se encuentra en:

app -> Http -> Controllers

public function listar(){

 Ahora dentro del archivo “ControladorUsuario.php”, se va declarar un arreglo con varios

$usuarios = [‘Miriam’, ‘Salvador’, ‘Carolina’, ‘Guillermo’, ‘Ernesto’];

//El método view acepta dos parámetros

Ahora ya podemos probar está Vista/View en el navegador con la ruta:

Visualización del View