¡Hola! ¿Qué tal nuevamente? Continuando con el curso, hoy llegamos a nuestra penúltima última clase, veremos lo que son las vistas blade en Laravel 10. Al final de esta clase, tendremos un módulo funcional de cursos con todas sus funciones básicas.
¡Empecemos!
¿Qué son las vistas en Laravel?
Las vistas en Laravel son archivos de plantillas que permiten definir y estructurar la presentación de los datos que se mostrarán al usuario en el navegador web. Las vistas nos permiten separar la presentación de la aplicación de la lógica del negocio. Las vistas pueden contener código HTML, CSS y JAVASCRIPT.
Plantillas Blade
Las plantillas Blade son un potente sistema de motor de plantillas integrado en Laravel que facilita la creación de vistas y la presentación de datos en aplicaciones web mediante una sintaxis concisa y expresiva. Blade te permite crear y separar vistas en trozos de código que luego puedes aprovechar en distintas vistas de la aplicación.
Levantar el servicio
Para realizar las pruebas de nuestra aplicación “Curso-de-laravel” iniciaremos el servidor local de Laravel de la siguiente forma:
- Iniciamos Apache y MySQL de Xampp.
- Abrimos la Terminal o CMD de Windows, nos dirigimos al directorio del proyecto en nuestro caso “curso-laravel” y escribimos la siguiente línea de código: php artisan serve.
- Abrimos nuestro navegador Chrome y escribimos la siguiente ruta: http://127.0.0.1:8000/.
Crear las vistas de nuestra aplicación en Laravel
Para comenzar a trabajar en las vistas, lo primero que haremos será crear la carpeta “alumnos” en la ruta resources/views.
Crear la vista listar Alumnos
Creamos el archivo lista.blade.php dentro de la carpeta “Alumnos”.
En la vista “listar alumnos” introducimos código CSS (en este punto no explicaremos a detalle el código, por ahora nos limitaremos a que estas líneas de código se encargan del diseño de la página web).
body {
margin: auto;
padding: 50px;
}
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
}
td {
height: 30px;
}
.button {
background-color:#4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
} Si recordamos las anterior clases, en el controlador creamos el método “index” que retorna a la vista un objeto $alumnos que contiene el listado de todos los alumnos de nuestra base de datos. En las rutas Web definimos la ruta GET que hace referencia al método index del controlador “AlumnoController”.
Para mostrar en la vista utilizamos las directivas Blade, utilizamos el signo de “@” para crear el ciclo foreach para recorrer todo el array, los signos de “{{ }}” se utilizan para imprimir el contenido de la variable en la vista.
@foreach ($alumnos as $alumno)
<tr>
<td>{{ $alumno->nombre }}</td>
<td>{{ $alumno->apellido }}</td>
<td>{{ $alumno->edad }}</td>
<td>{{ $alumno->direccion }}</td>
<td>
<a href="/alumnos/ver/{{$alumno->id}}">Ver</a>
<a href="/alumnos/editar/{{$alumno->id}}">Editar</a>
<a href="/alumnos/eliminar/{{$alumno->id}}">Eliminar</a>
</td>
</tr>
@endforeach 
Actualizamos nuestro navegador en la ruta http://127.0.0.1:8000/alumnos para ver los resultados.
Vista nuevo Alumno
Siguiendo, ahora creamos el formulario para registrar un nuevo alumno, dentro de la carpeta “Alumnos” creamos el archivo crear.blade.php.
Para ésta y todas las demás vistas de formularios utilizaremos el siguiente código css.
body {
margin: auto;
padding: 50px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
background-color: #f2f2f2;
padding: 20px;
} Creamos el formulario “Nuevo Alumno” que contendrá los campos Nombre, Apellido, Edad y Dirección. Utilizaremos en el formulario el método POST (los datos ingresados por el usuario en los campos del formulario se envían al servidor web como parte del cuerpo de la solicitud HTTP).
La directiva “@csrf” se utiliza para generar un campo de entrada oculto que contiene un token CSRF (Cross-Site Request Forgery) en un formulario HTML. Este token es una medida de seguridad para proteger tu aplicación web contra ataques CSRF, también conocidos como ataques de falsificación de solicitudes entre sitios.
<form action="/alumnos/crear" method ="POST">
@csrf
<label>Nombre:</label>
<input type="text" name="nombre" placeholder="Su nombre">
<label>Apellido:</label>
<input type="text" name="apellido" placeholder="Su Apellido">
<label>Edad:</label>
<input type="text" name="edad" placeholder="Su edad">
<label>Dirección:;</label>
<input type="text" name="direccion" placeholder="Su dirección">
<input type="submit" value="Guardar">
</form> En nuestro navegador hacemos clic en nuevo alumno que nos enviará al formulario para crear un nuevo registro o en la siguiente URL http://127.0.0.1:8000/alumnos/crear.
Vista ver Alumno
Ahora realizaremos la vista “Ver Alumno” para mostrar a un alumno en particular. Primero, creamos el archivo ver.blade.php. Utilizaremos el método show de la clase “AlumnoController”, que retorna a la vista un objeto que contiene los datos de un registro único de la base de datos.
En la vista creamos un formulario de solo lectura para mostrar los datos del alumno.
<div>
<h2> Alumno: {{ $alumno->nombre}} {{ $alumno->apellido}}</h2>
<p> Edad: {{ $alumno->edad}}</p>
<p> Dirección: {{ $alumno->direccion}}</p>
</div> En el navegador Chrome, en el listado de alumnos hacemos clic en la opción “Ver alumno” en una fila en particular, se nos mostrará los datos de un alumno.
Vista editar Alumno
Ahora empezamos con la vista editar para poder modificar los datos de un alumno en particular. Primero, creamos el archivo editar.blade.php. En la vista creamos el formulario editar con los campos Nombre, Apellido, Edad y Dirección, similar a el formulario de crear.
Agregamos el método “method_field(‘PUT’)” se usa para indicar que se está realizando una solicitud PUT en lugar de una solicitud POST (la razón por la que se utiliza “method_field(‘PUT’)” en lugar de definir directamente el método PUT en el atributo “method” del formulario HTML es debido a una limitación en los navegadores web. Los navegadores modernos solo admiten los métodos HTTP GET y POST al enviar formularios HTML).
<form action="/alumnos/editar/{{ $alumno->id}}" method ="POST">
@csrf
{{ method_field('PUT') }}
<label>Nombre:</label>
<input type="text" name="nombre" placeholder="Su nombre" value="{{ $alumno->nombre}}">
<label>Apellido:</label>
<input type="text" name="apellido" placeholder="Su Apellido" value="{{ $alumno->apellido}}">
<label>Edad:</label>
<input type="text" name="edad" placeholder="Su edad" value="{{ $alumno->edad}}">
<label>Dirección:</label>
<input type="text" name="direccion" placeholder="Su dirección" value="{{ $alumno->direccion}}">
<input type="submit" value="Guardar">
</form> Actualizamos nuestro navegador, en el listado de alumnos hacemos clic en la opción editar de una fila en particular, se abrirá un formulario con los datos de un alumno seleccionado en modo edición. Una vez modificado los datos hacemos clic en el botón “Guardar”, esto actualizará los datos del registro en la base de datos, en la vista listado de alumnos se reflejaran los cambios.
Vista eliminar Alumno
Finalmente, implementaremos la función para eliminar a un alumno. Por ahora lo realizaremos de una manera muy sencilla, al proceder con la eliminación de un alumno, se mostrará un mensaje de confirmación al usuario final antes de completar la acción.
En el archivo lista.blade.php agregamos código JavaScript que se encargará de enviar el mensaje de confirmación para poder eliminar un alumno en particular.
<script>
function eliminarAlumno(value) {
action = confirm(value) ? true : event.preventDefault()
}
</script> En la vista listado de alumnos modificamos la opción eliminar alumno, agregamos el evento onClick.
<a href="/alumnos/eliminar/{{$alumno->id}}" onclick="return eliminarAlumno('Eliminar Alumno')"> Eliminar</a> Actualizamos Chrome, en el listado de alumnos hacemos clic en la opción “Eliminar alumno” en una fila en particular, se nos mostrará un mensaje de confirmación. Si aceptamos, eliminará el registro seleccionado y esto se refleja en el listado de alumnos.
Si todo está correcto ya tenemos un módulo completo y funcional en Laravel 10.
Ejercicios de la clase
Crear las vistas para la funcionalidad “Publicaciones” con todos los métodos básicos para un CRUD (además la funcionalidad de publicaciones debe de estar enlazado con la funcionalidad de alumnos).
- Crear la vista “Listado” para mostrar todas las publicaciones realizadas.
- Crear la vista “Ver” para mostrar una publicación en particular.
- Crear la vista “Ver publicaciones por alumno” para obtener las publicaciones realizadas por un alumno en particular.
- Crear la vista “Crear” con un formulario para insertar un registro en la tabla “Publicaciones”.
- Crear la vista “Editar” con un formulario para actualizar un registro en la tabla “Publicaciones”.
- Crear la funcionalidad de “eliminar” para eliminar una publicación en particular.
Para cualquier duda o consulta de vistas blade en Laravel puedes dejarnos un comentario para poder ayudarte.
Puedes descargarte el código fuente de este ejemplo y todos los demás en el repositorio de GitHub En la siguiente y última clase veremos como validar la información enviada desde nuestros formularios.
Saludos y éxitos.
Victor Peña
Desarrollador de software Backend Developer, experto en Laravel Framework, PHP, JavaScript y MySQL. Creador de contenidos de emprendimiento y desarrollo de software.