Desarrollo de Aplicaciones

en Internet

Laboratorio N° 10

Motor de Plantillas Blade

CÓDIGO DEL CURSO: II3100

Alumno(s) Nota

Renzo Gonzalo Quispe Valdez

Grupo D

Ciclo III

Fecha 17-05-2024
 Laboratorio 10 - Plantillas Blade
Página 1

I. OBJETIVOS

○ Familiarización con plantillas Blade y el patrón MVC.

II. SEGURIDAD

Advertencia:
En este laboratorio está prohibida la manipulación de hardware, conexiones
eléctricas o de red; así como la ingestión de alimentos o bebidas.

III. NORMAS EMPLEADAS

○ No aplica

IV. RECURSOS
○ En el siguiente laboratorio se trabajará con un equipo que cuente con una conexión a
Internet y una navegador web (Mozilla Firefox o Google Chrome)
○ Instalación de Laravel completada
○ Entorno de desarrollo configurado (PHP, Compose, servidor web local como XAMPP o
similar)

V. METODOLOGÍA PARA EL DESARROLLO DE LA TAREA

○ El desarrollo del laboratorio es individual.
 Laboratorio 10 - Plantillas Blade
Página 2

VI. MARCO TEÓRICO

Blade simplifica el proceso de creación y gestión de vistas en aplicaciones Laravel, permitiendo

a los desarrolladores concentrarse en crear excelentes experiencias de usuario sin complicarse
con los detalles de la sintaxis HTML y PHP.

El motor de plantillas Blade en Laravel es una herramienta poderosa para construir vistas en tu
aplicación. Está diseñado para hacer que el proceso de creación y gestión de plantillas sea más
fácil y eficiente. Así es como funciona:

1. Sintaxis: Blade utiliza una sintaxis simple e intuitiva, que incluye directivas, estructuras de
control y herencia de plantillas. Esta sintaxis es fácil de entender y minimiza la cantidad de
código que necesitas escribir.
2. Herencia de Plantillas: Una de las características clave de Blade es la herencia de
plantillas. Esto te permite definir una plantilla base (o diseño) con secciones que pueden ser
sobreescritas por plantillas hijas. Promueve la reutilización de código y facilita mantener un
diseño consistente en toda tu aplicación.
3. Directivas: Blade proporciona un conjunto de directivas que te permiten realizar tareas
comunes dentro de tus plantillas. Por ejemplo, la directiva @extends se utiliza para
especificar qué plantilla debería heredar, mientras que la directiva @section se utiliza para
definir una sección dentro de una plantilla que puede ser sobreescrita por plantillas hijas.
4. Estructuras de Control: Blade soporta estructuras de control familiares como declaraciones
if, bucles foreach y bucles while. Estas estructuras te permiten iterar sobre datos y mostrar
contenido condicionalmente dentro de tus plantillas.
5. Seguridad: Blade previene ataques de scripting entre sitios (XSS) de forma predeterminada.
Esto significa que cualquier entrada de usuario mostrada en tus plantillas es
automáticamente desinfectada para prevenir la ejecución de código malicioso.
6. Directivas y Extensiones Personalizadas: Laravel te permite definir tus propias directivas
Blade y extender la funcionalidad del motor de plantillas. Esto puede ser útil para encapsular
funcionalidad común o integrar bibliotecas de terceros en tus plantillas.

VII. PROCEDIMIENTO

NOTA
En caso esté usando Docker como entorno de desarrollo para sus aplicaciones, al
momento de ejecutar los comandos de artisan deberá hacerlo de la siguiente forma:
sail artisan ...

Y para los comandos de composer y npm deberá hacerlo así:

sail composer ...
sail npm ...

A. Uso Simple de Blade

1. Cree un nuevo proyecto de Laravel llamado lab-10:

 Laboratorio 10 - Plantillas Blade
Página 3

2. Genere las siguientes vistas:

hello.blade.php

layout.blade.php
 Laboratorio 10 - Plantillas Blade
Página 4

3. Defina una ruta que muestre la vista hello mediante el método GET. El valor de la variable
name deberá ser extraído de la URI:

4. Realice un análisis completo de las plantillas Blade definidas:

Plantilla layout.blade.php
Estructura Base:

Define la estructura html común para las vistas, incluyendo datos y enlaces a recursos
externos.
Contiene un contenedor principal para el contenido de la página.

Directivas @yield:
@yield('title'): Espacio reservado para el título de la página, que será definido por las
vistas que extienden esta plantilla.
@yield('content'): Espacio reservado para el contenido principal de la página, que
 Laboratorio 10 - Plantillas Blade
Página 5

también será definido por las vistas hijas.

Plantilla hello.blade.php

Extensión de Plantilla:

Utiliza la directiva @extends('layout') para extender la plantilla base layout.blade.php.

Secciones Definidas:
@section('title', 'Hello Blade!'): Define el contenido de la sección title, estableciendo
"Hello Blade!" como el título de la página.
@section('content'): Define el contenido de la sección content, mostrando un mensaje de
saludo "Hello, John Doe!".
Ventajas
Reutilización:

Permite definir una estructura HTML base reutilizable en múltiples vistas, reduciendo la
duplicación de código.
Flexibilidad:

Las directivas @yield permiten que las vistas hijas definan su propio contenido para las
secciones title y content, proporcionando flexibilidad en la personalización del contenido.
Separación de Preocupaciones:

Separa la estructura base del HTML del contenido específico de cada vista, mejorando la
organización y la mantenibilidad del proyecto.
Mantenibilidad:

Facilita la gestión y actualización del contenido, ya que cada vista puede definir sus
propias secciones específicas sin afectar la estructura base.

B. Uso Complejo de Blade

1. En el mismo proyecto usado en la sección anterior se creará un modelo nombrado

Contact con ayuda de artisan:
php artisan make:model Contac –migration
 Laboratorio 10 - Plantillas Blade
Página 6

2. El comando anterior generará dos archivos. El primero está dentro de la carpeta

app/Models/, edite el contenido de dicho archivo de forma que coincida con lo que se
muestra a continuación:

app/Models/Contact.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{
protected $fillable = ['name', 'email', 'message'];
}
 Laboratorio 10 - Plantillas Blade
Página 7

3. El segundo está dentro de la carpeta database/migrations/. El nombre de dicho archivo

corresponde a una estampa de tiempo. Edite la función Schema::create de forma que
coincida con lo siguiente:

database/migrations/..._create_contacts_table.php

// ... contenido omitido

Schema::create('contacts', function (Blueprint $table) {

$table->id();
$table->string('name');
$table->string('email');
$table->string('message');
$table->timestamps();
});

// ... contenido omitido

4. Para crear la tabla en la base de datos del modelo Contact corremos la migración definida
con ayuda de artisan:
php artisan migrate

5. También actualice la plantilla definida en la primera sección:

resources/views/layout.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 Laboratorio 10 - Plantillas Blade
Página 8

<meta name="viewport" content="width=device-width, initial-

scale=1.0">
<title>@yield('title')</title>
<link href="{{ asset('css/styles.css') }}" rel="stylesheet">
<!-- Esto permite que las vistas hijas definan estilos
adicionales -->
@yield('styles')
</head>
<body>

<nav>
<!-- Aquí podrías incluir la barra de navegación común a
todas las páginas -->
</nav>

<div class="container">
@yield('content') <!-- Esto insertará el contenido
específico de cada página -->
</div>

<footer>
<!-- Aquí podrías incluir el pie de página común a todas
las páginas -->
</footer>

<script src="{{ asset('js/validation.js') }}"></script>

</body>
</html>
 Laboratorio 10 - Plantillas Blade
Página 9

6. Seguidamente extenderemos la plantilla en la vista contact:

resources/views/contact.blade.php

@extends('layout')

@section('title', 'Contact Us')

@section('content')
<h2>Contact Us</h2>

<form id="contactForm" method="POST" action="{{

route('contact.submit') }}">
@csrf
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="{{
old('name') }}" class="form-control">
<span class="error-message" id="name-error"></span>
</div>
 Laboratorio 10 - Plantillas Blade
Página 10

<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="{{
old('email') }}" class="form-control">
<span class="error-message" id="email-error"></span>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" class="form-
control">{{ old('message') }}</textarea>
<span class="error-message" id="message-error"></span>
</div>
<button type="submit" class="btn btn-
primary">Submit</button>
</form>

<script src="{{ asset('js/validation.js') }}"></script>

@endsection

@section('styles')
<link href="{{ asset('css/styles.css') }}" rel="stylesheet">
@endsection
 Laboratorio 10 - Plantillas Blade
Página 11

7. También definiremos los estilos usados creando un recurso estático en la carpeta

public/css/

public/css/styles.css

.form-group {
margin-bottom: 20px;
}

.error-message {
color: red;
font-size: 0.8rem;
}

.form-control {
width: 100%;
padding: 8px;
font-size: 1rem;
border: 1px solid #ccc;
 Laboratorio 10 - Plantillas Blade
Página 12

border-radius: 4px;
}

button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

8. Lo mismo haremos para los scripts de Javascript:

public/js/validation.js

document.getElementById('contactForm').addEventListener('submit',
function(event) {
var name = document.getElementById('name').value.trim();
var email = document.getElementById('email').value.trim();
var message = document.getElementById('message').value.trim();
var nameError = document.getElementById('name-error');
var emailError = document.getElementById('email-error');
var messageError = document.getElementById('message-error');
 Laboratorio 10 - Plantillas Blade
Página 13

var isValid = true;

nameError.innerHTML = '';
emailError.innerHTML = '';
messageError.innerHTML = '';

if (name === '') {

nameError.innerHTML = 'Name is required';
isValid = false;
}

if (email === '') {

emailError.innerHTML = 'Email is required';
isValid = false;
} else if (!isValidEmail(email)) {
emailError.innerHTML = 'Invalid email format';
isValid = false;
}

if (message === '') {

messageError.innerHTML = 'Message is required';
isValid = false;
}

if (!isValid) {
event.preventDefault();
}
});

function isValidEmail(email) {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
 Laboratorio 10 - Plantillas Blade
Página 14

9. Necesitaremos un controlador para nuestros contactos, empleando artisan genere el

controlador ContactController

10. Actualice el contenido del controlador creado de forma que coincida con lo siguiente:
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Contact;
 Laboratorio 10 - Plantillas Blade
Página 15

class ContactController extends Controller

{
public function showForm()
{
return view('contact');
}

public function submitForm(Request $request)

{
$request->validate([
'name' => 'required|string|max:100',
'email' => 'required|email|max:100',
'message' => 'required|string',
]);

// Save the submitted data to the database (optional)

Contact::create([
'name' => $request->input('name'),
'email' => $request->input('email'),
'message' => $request->input('message'),
]);

// Redirect back to the form with a success message

return redirect()->back()->with('success', 'Your message
has been sent successfully!');
}
}
 Laboratorio 10 - Plantillas Blade
Página 16

11. Actualice el archivo de las rutas para la aplicación web agregando las siguientes líneas:
<?php

// ... contenido omitido

use App\Http\Controllers\ContactController;

// ... contenido omitido

Route::get('/contact', [ContactController::class, 'showForm'])-

>name('contact.form');
Route::post('/contact', [ContactController::class, 'submitForm'])-
>name('contact.submit');
 Laboratorio 10 - Plantillas Blade
Página 17

12. Pruebe el funcionamiento de su aplicación

 Laboratorio 10 - Plantillas Blade
Página 18

En XAMPP me aparece solo 1 usuario debido a que no lo configure antes y solo se

guardo el ultimo usuario ingresado.

13. Realizar un diagrama de todo el flujo de los archivos anteriores, haciendo énfasis en el
patrón MVC.
 Laboratorio 10 - Plantillas Blade
Página 19

14. Investigue respecto a la herramienta Tinker, de modo que pueda validar la información
guarda de sus contactos en la base de datos:
Tinker es una herramienta de línea de comandos incluida en el framework Laravel que te
permite interactuar con tu aplicación de Laravel y su base de datos de una manera
interactiva y en tiempo real. Con Tinker, puedes ejecutar consultas de Eloquent, crear y
actualizar registros, y realizar otras operaciones en tu base de datos desde la línea de
comandos.

Para validar la información guardada de tus contactos en la base de datos utilizando

Tinker, puedes seguir estos pasos:

Abre una terminal y navega hasta el directorio raíz de tu proyecto Laravel.

Ejecuta el comando php artisan tinker para abrir el entorno Tinker.

Puedes usar Eloquent para recuperar los registros de tu base de datos y validar la
información. Por ejemplo, si tienes un modelo Contact que representa tus contactos,
puedes usar la siguiente consulta para recuperar todos los contactos:

php
Copiar código
$contacts = App\Models\Contact::all();
Esto devolverá una colección de todos los contactos en tu base de datos. Puedes iterar
sobre esta colección para mostrar la información de cada contacto:

php
 Laboratorio 10 - Plantillas Blade
Página 20

Copiar código
foreach ($contacts as $contact) {
echo $contact->name . ' - ' . $contact->email . PHP_EOL;
}
Reemplaza name y email con los nombres reales de tus columnas en la tabla de
contactos.

Puedes realizar otras operaciones de validación según tus necesidades. Por ejemplo,
puedes buscar un contacto específico por su ID:

php
Copiar código
$contact = App\Models\Contact::find(1); // Reemplaza 1 con el ID del contacto que
quieres validar
Una vez que hayas terminado de usar Tinker, puedes salir del entorno escribiendo exit
en la línea de comandos.

C. Ejercicio Propuesto

1. Crear una aplicación de Laravel que permita el ingreso de notas de un solo curso para
usuarios registrados. Documente el proceso hecho:
Procedo a crear el nuevo proyecto con el nombre de notas en la terminal.
El nombre de este proyecto sera notas como lo vemos en la captura.

Realizamos la migración:
Con los comandos correctos
 Laboratorio 10 - Plantillas Blade
Página 21

Luego los métodos para ello tendremos que instalar los controladores con el nombre de
NotasController como se ve en la imagen o captura

Definimos las el archivos blade que para este caso se llamara notas.balde.php
 Laboratorio 10 - Plantillas Blade
Página 22

Luego modificamos el controlador con los métodos que usaremos y todo aquello.

Hago lo mismo en el modelo:

Creamos el archivo notas.php dentro del archivo models.
 Laboratorio 10 - Plantillas Blade
Página 23

Luego creo el archivo de validación que se llama validation,js que tiene como función el
correcto ingreso y la confirmación de datos a la base de datos.

Luego definimos las rutas en el archivo web.php.

 Laboratorio 10 - Plantillas Blade
Página 24

También no olvidemos configurar el archivo .env para que se realice correctamente la

migración.
 Laboratorio 10 - Plantillas Blade
Página 25

Verificamos las rutas:

Vamos al buscador:
 Laboratorio 10 - Plantillas Blade
Página 26

Ahora captura de los registros que tenemos en el phpmyadmin:

Como vemos tenemos 5 registros añadiremos 1 más para corroborar de que todo
funciona de manera óptima.
 Laboratorio 10 - Plantillas Blade
Página 27

De damos en cuadro azul.

Como vemos se agrego el ultimo que tiene de nombre Carmen.

 Laboratorio 10 - Plantillas Blade
Página 28

OBSERVACIONES

● Define claramente las relaciones entre modelos (uno a uno, uno a muchos, muchos a
muchos) para aprovechar al máximo Eloquent.

● Implementa validaciones y reglas de negocio dentro de los modelos para mantener la

integridad de los datos.

● Organiza tus rutas usando el archivo web.php para rutas web y api.php para rutas de API,
facilitando la separación de preocupaciones.

● Utiliza middleware en tus rutas para gestionar aspectos como la autenticación, autorización
y registro de actividades.

● Reutiliza componentes de Blade para evitar duplicación de código y mantener tus vistas
limpias y modulares.

VIII. CONCLUSIONES

● Los controladores actúan como intermediarios entre las rutas y los modelos/vistas.
Contienen la lógica que determina qué datos obtener del modelo y qué vista presentar al
usuario.

● Laravel permite crear controladores de manera sencilla con comandos de Artisan,

facilitando la organización del código.

● Las vistas son la parte de tu aplicación que se encarga de presentar los datos al usuario.
En Laravel, las vistas se crean utilizando Blade, un motor de plantillas propio.

● Blade permite usar características como herencia de plantillas, bucles y condiciones,

haciendo que la creación de vistas sea más eficiente y mantenible.

● Los modelos son el lugar donde puedes definir la lógica de negocio relacionada con tu
aplicación

IX. REFERENCIAS