En este tutorial aprenderás paso a paso cómo integrar la librería de JavaScript Sweetalert 2 a Laravel y Livewire, esta librería te permite mostrar alertas y diálogos con un diseño genial que seguro dará un toque profesional a tus proyectos. Al final encontrarás el repositorio de GitHub de este proyecto. Sin más, manos a la obra.
Requisitos previos
- Contar con un ambiente de desarrollo como XAMPP, Wamp o Laragon.
- Tener instalado composer de manera global en tu sistema operativo.
- Editor de textos como VSCode, PhpStorm, etc.
1. Crear un proyecto nuevo en Laravel y Livewire
Abre la terminal de comandos en la raíz de tu ambiente de desarrollo que normalmente son las carpetas www o htdocs y ejecuta el siguiente comando que creará un nuevo proyecto en Laravel usando composer:
composer create-project laravel/laravel laravel-livewire-sweetalert-2
Desde la terminal ingresa a la carpeta recién creada del proyecto:
cd laravel-livewire-sweetalert-2
Ahora toca instalar Livewire en tu proyecto Laravel para ello desde la terminal de comandos ejecuta la siguiente instrucción:
composer require livewire/livewire
Livewire ya está instalado en tu proyecto Laravel pero para que funcione es necesario incluir los assets para ello se deben agregar a la plantilla principal o layout los tags <livewire:styles /> y <livewire:scripts /> como se muestra a continuación:
<html>
<head>
...
<livewire:styles />
</head>
<body>
...
<livewire:scripts />
</body>
</html>
2. Crear base de datos
Para crear la base de tu proyecto usaré la consola de MySQL para ello desde la terminal de comandos ejecuta la siguiente instrucción, recuerda ingresar tus credenciales de acceso:
mysql -u root -p
Crea la base de datos que usará tu proyecto:
CREATE DATABASE sweetalert2 CHARACTER SET utf8 COLLATE utf8_spanish_ci;
Sal de la consola de MySQL ejecutando la instrucción:
exit
Conecta la nueva base de datos a tu proyecto Laravel Livewire para ello con tu editor de textos abre el archivo .env que se encuentra en la raíz de tu proyecto y agrega la información de la base de datos como es el nombre y en caso de tenerla la contraseña:
3. Crear modelo, migración y controlador
Para este tutorial voy a crear un modelo llamado Student, con migración, factory y controlador, para ello en la terminal de comandos ejecuta la siguiente instrucción:
php artisan make:model Student -mfc
4. Configurar archivo de la migración
Con tu editor de código abre el archivo que se encuentra en la ruta database/migrations/…_create_students_table.php:
Agrega los campos ‘first_name’, ‘last_name’, ‘email’, ‘phone’ y ‘address’, la tabla debe quedar así:
Schema::create('students', function (Blueprint $table) {
$table->id();
$table->string('first_name');
$table->string('last_name');
$table->string('email');
$table->string('phone');
$table->string('address');
$table->timestamps();
});
5. Configurar archivo del Modelo Student
Ahora para habilitar la asignación masiva con tu editor de textos abre el archivo app/Models/Student y agrega la siguiente línea de código:
protected $fillable = ['first_name', 'last_name', 'email', 'phone', 'address'];
6. Configurar archivos StudentFactory y DatabaseSeeder
Para agregar datos falsos de prueba al proyecto abre el archivo database/factories/StudentFactory.php y en el método definition() dentro del array return agrega la siguiente información:
return [
'first_name' => $this->faker->firstName(),
'last_name' => $this->faker->lastName(),
'email' => $this->faker->email(),
'phone' => $this->faker->phoneNumber(),
'address' => $this->faker->address(),
];
La librería Faker va a generar datos falsos aleatorios los cuales poblarán la tabla students en la base de datos. Para que funcione abre el archivo database/seeders/DatabaseSeeder.php y en el método run() agrega la siguiente línea de código la cual hará que se agreguen los datos de prueba:
\App\Models\Student::factory(30)->create();
El archivo debe de quedar así:
Corre el factory abriendo la terminal de comandos y ejecuta la siguiente instrucción:
php artisan migrate:fresh --seed
7. Crear ruta y configurar controlador
Para crear la ruta abre el archivo route/web.php y agrega la siguiente línea de código:
Route::get('/students', [StudentController::class, 'index']);
NOTA: Recuerda importar la clase StudentController en la cabecera del archivo:
Configura el controlador abriendo el archivo App/Http/Controllers/StudentController.php y crea el método index el cual solamente retornará una vista:
public function index(){
return view('student.index');
}
Crea la carpeta resources/views/student y dentro de ella crea el archivo index.blade.php.
8. Crear componente Livewire
Toca crear el componente de Livewire y para ello desde la terminal de comandos ejecuta la siguiente instrucción:
php artisan make:livewire StudentComponent
Se crearon dos archivos, uno es la clase y el otro es la vista del componente o de la clase.
9. Lógica para mostrar y borrar registros
Para este tutorial solamente se listará los elementos de la base de datos y se borraran confirmándolo con la librería Sweetalert 2 y hacerlo abre el archivo de la clase del nuevo componente que está en app/Http/Livewire/StudentComponent.php y pega el siguiente código:
<?php
namespace App\Http\Livewire;
use App\Models\Student;
use Livewire\Component;
class StudentComponent extends Component
{
protected $listeners = ['destroy'];
public function destroy($id){
Student::destroy($id);
}
public function render()
{
$students = Student::all();
return view('livewire.student-component', compact('students'));
}
}
10. Vista para mostrar estudiantes
Con tu editor de texto abre el archivo resources/views/student/index.blade.php que será el archivo principal en donde irá el script de Sweetalert2, para ver la documentación oficial puedes verla aquí, en el siguiente código puedes ver que se está llamando la CDN de Sweetalert2 y cuando se da clic en borrar se activa dos eventos uno llamando la confirmación de Sweetalert2 y otro que llama el método destroy del componente de Livewire. Copia y pega el siguiente código en el archivo antes mencionado:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Integrar Sweetalert 2 en Laravel y Livewire | Diario del Programador</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/dashboard/">
<!-- Bootstrap core CSS -->
<link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{ asset('assets/css/dashboard.css') }}" rel="stylesheet">
<livewire:styles />
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
@livewire('student-component')
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<livewire:scripts />
<!-- CDN de Sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Scrip llama al modal de Sweetalert2 y llama al evento destroy del componente StudentComponent -->
<script>
Livewire.on('deleteStudent', studentId => {
Swal.fire({
title: '¿Estas seguro que deseas eliminar al estudiante?',
text: "Esta acción no se puede revertir",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Borrar',
cancelButtonText: 'Cancelar'
}).then((result) => {
if (result.isConfirmed) {
Livewire.emitTo('student-component', 'destroy', studentId);
Swal.fire(
'Eliminado',
'El estudiante ha sido eliminado',
'success'
)
}
})
});
</script>
</body>
</html>
Ahora abre el archivo app/Http/Livewire/StudentComponent que es el archivo de la clase en donde irá la lógica del componente de Livewire, agrega las siguientes líneas de código:
<?php
namespace App\Http\Livewire;
use App\Models\Student;
use Livewire\Component;
class StudentComponent extends Component
{
protected $listeners = ['destroy'];
public function destroy($id){
Student::destroy($id);
}
public function render()
{
$students = Student::all();
return view('livewire.student-component', compact('students'));
}
}
Para crear la vista del componente de Livewire, abre el archivo resources/views/livewire/student-component.blade.php y agrega el siguiente código que mostrará la lista de estudiantes y permitirá borrar un elemento confirmando la acción con una alerta de Sweetalert2:
<main role="main" class="col-md-12 pt-3 px-4">
<h2>Estudiantes</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Telefono</th>
<th>Direccion</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
@foreach ($students as $student)
<tr>
<td>{{ $student->id }}</td>
<td>{{ $student->first_name }}</td>
<td>{{ $student->last_name }}</td>
<td>{{ $student->email }}</td>
<td>{{ $student->phone }}</td>
<td>{{ $student->address }}</td>
<td>
<a class="btn btn-danger" wire:click="$emit('deleteStudent', {{ $student->id }})">Borrar</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</main>
11. Probar el proyecto en el navegador
Enciende el servidor de prueba de Laravel ejecutando en la terminal de comando la siguiente instrucción:
php artisan serve
En el navegador web ve a la dirección http://127.0.0.1:8000/students verás la vista donde se lista a todos los estudiantes:
Borra un elemento, si todo funciona correctamente se desplegará la ventana de confirmación de la acción de Sweetalert2:
Si aceptas la acción se borrará el elemento de la lista de estudiantes:
Has integrado correctamente Sweetalert 2 a tu proyecto en Laravel y Livewire!
Conclusión
En este tutorial aprendiste a integrar la librería de JavaScript Sweetalert 2 a tu proyecto en Laravel y Livewire. Si este tutorial fue de ayuda te invito a compartirlo en tus redes sociales para alcanzar a más personas y si tienes dudas o comentarios déjalos en la caja de comentarios, estaré al pendiente de ellos. Te envío un cordial saludo.
Fuente: Documentación Livewire. Documentación Sweetalert2.
