PHP Livewire

Introducción

• Livewire permite o uso de compoñentes integrados en Laravel nos que se establece unha comunicación bidireccional (podemos enviar información desde o cliente (HTML) ao servidor (controlador) e viceversa sen necesidade de recargar completamente a páxina).

É o mesmo concepto que se empregaba en AJAX e que agora se usa con FETCH, pero integrado no framework de Laravel.

Instalación

• No directorio raíz do proxecto Laravel escribe: composer require livewire/livewire

Validación de campos

• Imos crear a táboa marcas e imos crear unha relación entre perfumes e marcas.

A nivel de mysql:

CREATE TABLE perfumes.marcas (

  `id` int NOT NULL,

  `descripcion` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_spanish2_ci NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_spanish2_ci;



INSERT INTO `marcas` (`id`, `descripcion`) VALUES
(1, 'Descripción actualizada da marca con id=1'),
(2, 'ADIDAS'),
(3, 'ARAMIS');

Táboa perfumes

CREATE TABLE perfumes.perfumes (
  `id` int NOT NULL,
  `descripcion` varchar(45) CHARACTER SET utf8mb4 COLLATE utf8mb4_spanish2_ci NOT NULL,
  `prezo` decimal(8,2) NOT NULL,
  `data_compra` date DEFAULT NULL,
  `marca_id` int DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_spanish2_ci;

ALTER TABLE perfumes.perfumes
  ADD PRIMARY KEY (`id`),
  ADD KEY `fk_PERFUMES_1_idx` (`id`),
  ADD KEY `fk_PERFUMES_MARCA_idx` (`marca_id`);

INSERT INTO perfumes.perfumes (`id`, `descripcion`, `prezo`, `data_compra`, `marca_id`) VALUES
(18, 'Best Aramis', '54.32', '2024-01-18', 2),
(19, 'Novo perfume da marca con id 1', '100.22', '2024-01-22', 1);

• Creamos o modelo, ruta, controlador e polo de agora imos facer a vista para crear unha nova marca.

Dende o terminal escribimos: php artisan make:model Marca --resource

Arquivo: routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PerfumeController;
use App\Http\Controllers\MarcaController;

Route::resource('perfumes', PerfumeController::class);
Route::resource('marcas', MarcaController::class);

O arquivo de MarcaController xa se crearia con todo o código necesario para a xestión.

Arquivo resources/views/marcas/form_alta_marcas.blade.php (creado o cartafol marcas dentro de view)

@extends('plantilla');

@section('pageTitle', 'Alta de marcas')

@section('content')
<h2>Alta de novos perfumes</h2>



@if (session()->has('idPerfume'))
    <h4>Creado un novo rexistro co id: {{session('idPerfume')}}</h4>
@endif

@if(count($errors) > 0)
	<div class="errors">
		<ul>
		@foreach($errors->all() as $error)
			<li>{{ $error }}</li>
		@endforeach
		</ul>
	</div>
@endif


@include('mensaxes.alertas_javascript')


@endsection

• Como fixemos con perfume, os campos que conforman o formulario en Alta e Modificar son os mesmos, polo que imos crear un arquivo para facer un include nas dúas vistas:

Arquivo: resources/views/marcas/campos_marca.blade.php

<div>
    Descipción:<input type="text" maxlength="45" size="45" value="{{!empty($perfume) ? $perfume->descripcion : old('descripcion')}}" name="descripcion" />
</div>

• Como vemos o contido é parecido ao que tiñammos con perfumes, pero agora o contido (form e campos) os imos xestionar dende un compoñente Livewire.

Creamos o compoñente con esta orde: php artisan make:livewire marca

Isto creará dous arquivos en Laravel:

• CLASS: app/Livewire/Marca.php => Ven a ser o controlador que vimos ata o de agora en Laravel.
• VIEW: resources/views/livewire/marca.blade.php => Ven a ser a vista que vai visualizar Laravel no cliente.

Arquivo: app/Livewire/Marca.php

<?php

namespace App\Livewire;

use Livewire\Component;

class Marca extends Component
{
    public function render()
    {
        return view('livewire.marca');
    }
}

Básicamente indicamos en render a vista que vai enviar ao cliente.

Arquivo resource/views/Livewire/marca.blade.php

<form method="post" action="{{route('marca.store')}}" name="formulario_marcas">

    @csrf
    @include('marcas.campos_marca')
    <div>
        <input type="submit" name="btnAlta" value="Alta" onClick="return confirm('Estás seguro de dar de alta a nova marca ');"/>
        <input type="reset" name="btnBorrar" value="Limpar" />

    </div>


</form>

Funcionamento

Volver á UD7

-- Ángel D. Fernández González -- (2025).