Conectar Angular 11 con Laravel 8

2021-06-08 08:58:51
conectar-angular-11-con-laravel-8-image

Este es el primer artículo que escribo para la página, pero más que como un documento para el público en general es como una nota de recuerdo para mi aprendizaje con este framework. Así mismo trataré de ir tomando notas (escribiendo en esta página) algunos artículos o publicaciones que puedan servirme como notas o apuntes y que puedan ayudar a alguien más.

Para este ejercicio vamos a basarnos en Windows y vamos a usar WampServer a fin de facilitar para todos los usuarios el maneja de las bases de datos como los componentes de php.

 

Ahora sí, procedamos con lo que importa.

 

Previo:

  • Creamos carpeta del proyecto

mkdir angularLaravel

  • #Instalamos composer: getcomposer.org
  • #Instalamos nodejs: nodejs.org
  • #Instalamos WampServer: www.wampserver.com

 

Instalamos Laravel:

Antes que nada, asumiendo que tenemos instalado wamp server, vamos a abrir cmd y nos ubicamos en C:\wamp64\www y desde esa ruta procederemos a ejecutar los siguientes comandos.

composer create-project laravel/laravel backendLaravel

cd backendLaravel

cp .env.example .env

php artisan key:generate

composer install

 

 

Instalamos Angular:

Tambien desde consola vamos a escribir lo siguiente

npm install -g @angular/cli

#nos ubicmaos en la carpeta del proeyecto (angularLaravel) desde la consola

ng new frontend

  • Nos preguntara si queremos que tenga ruta (Would you like to add routing ) respondemos que si (Yes)
  • Nos preguntara que formato de estilo queremos usar (Which stylesheet format would you like to use ) en mi caso, selecciono CSS

Con esto ya tendríamos angular instalado en nuestro nuevo proyecto

 

Instalamos la seguridad que en angular 8 cambia.

Instalamos fortify o podemos instalar starter kit. 

composer require laravel/fortify

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

php artisan migrate

O si no queremos fortify, Podemos instalar el paquete Starter kit también oficial de Laravel, ya que este provee todo lo necesario para poder funcionar la seguridad en laravel (Fortify Incluido)

https://laravel.com/docs/8.x/starter-kits

 

Vamos a angular y empezamos con la configuracion

vamos a src/enviroments/enviroment.prod.ts

Allí agregamos un variable debajo de production que se llame baseUrl y ponemos la ruta api de laravel;

export const environment = {

  production: true,

  baseUrl: 'http://127.0.0.1:8081/angular/public/api/',

};

 

creamos un servicio de autenticacion

ng generate service auth

 

--otra forma: ng g s auth

 

Editar el servicio auth para que consulte los registros

Debe quedar así

import { Injectable } from '@angular/core';

import { environment } from '../environments/environment.prod';

import { HttpClient } from '@angular/common/http';

 

@Injectable({

  providedIn: 'root'

})

export class AuthService {

 

  baseUrl = environment.baseUrl;

 

  constructor(private http: HttpClient) { }

 

  getUser(){

    console.log(this.baseUrl + 'users');

    return this.http.get(this.baseUrl + 'users' );

  }

}

 

 

Ahora vamos a llamar este servicio desde src/app/app.component.ts

import { Component, OnInit } from '@angular/core';

import { AuthService } from './auth.service';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{

  title = 'angular';

  usuarios = [

    {email: ''}

  ];

 

  constructor(private authService:AuthService){

 

  }

 

  ngOnInit(): void {

    this.authService.getUser().subscribe({

        next: (data: any) => {

          console.log(data);

          this.usuarios = data;

        },

        error: error => {

            // this.errorMessage = error.message;

            console.error('There was an error!', error);

        }

    })

  }

}

 

 

Configuramos ahora en Laravel el controller de users para que nos retorne un listado de usuarios.

 

php artisan make:controller usuarioController

Procedemos a modificar el controlador que acabamos de crear.

<?php

namespace App\Http\Controllers;

 

use App\Models\User;

use Illuminate\Http\Request;

 

class usuarioController extends Controller

{

    //

    public function index(){

        $users = User::get();

 

        return response()->json($users, 200);

    }

}

 

 

 

 

Modificamos la ruta de api para que llame a este controlador

Vamos a routes/api.php y creamos la ruta users

<?php

use App\Http\Controllers\usuarioController;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

 

/*

|--------------------------------------------------------------------------

| API Routes

|--------------------------------------------------------------------------

|

| Here is where you can register API routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| is assigned the "api" middleware group. Enjoy building your API!

|

*/

 

Route::get('users', [usuarioController::class,'index']);

 

Route::middleware('auth:api')->get('/user', function (Request $request) {

    return $request->user();

});

 

 

 

Vamos a configurar el seeder para que nos cree varios usuarios en las migraciones.

Vamos entonces a database/seeders/DatabaseSeeder.php

 

<?php

 

namespace Database\Seeders;

 

use Illuminate\Database\Seeder;

 

class DatabaseSeeder extends Seeder

{

    /**

     * Seed the application's database.

     *

     * @return void

     */

    public function run()

    {

        \App\Models\User::factory(10)->create();

    }

}

 

 

 

Verificamos que la ruta api de laravel retorne un json.

 

 

Nota: Para ver los json bonitos hago uso de esta librería en Edge: JSON Beauty Formatter

 

  1. Ahora vamos a configurar los registros en angular.

Vamos a la ruta src/app/app.component.html

 

Y vamos al final de documento y justo antes de <router-outlet></router-outlet> vamos a adicionar el listado de email de los usuarios y se vería de la siguiente manera:

 

<div class="card" *ngFor="let usuario of usuarios;">

  {{ usuario.email }}

</div>

 

<router-outlet></router-outlet>

 

 

  1. Ahora que verificamos que todo esté bien procedemos a ejecutar lo mismo en angular.

Vamos a la consola, en la carpeta de angular y ejecutamos:

 

ng serve

 

con este comando se compila el código y ya podemos acceder desde una web. Angular muestra la url a la que debes acceder. Normalmente es: http://localhost:4200

 

vemos que obtenemos el resultado deseado:

 

 

  1. Ahora vamos a crear una ruta, para ello vamos a generar un nuevo controlador para clientes

en la consola de laravel escribimos lo siguiente:

php artisan make:controller clienteController

php artisan make:model cliente

php artisan make:migration create_cliente_table

Ahora vamos al archive creado en database/migrations/créate_cliente_table y debe quedar así:

<?php

 

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

 

class CreateClientesTable extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

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

            $table->id();

            $table->string('identificacion',20);

            $table->string('nombre');

            $table->string('apellido');

            $table->timestamp('fecha_nacimiento');

            $table->integer('edad');

 

            $table->timestamps();

        });

    }

 

    /**

     * Reverse the migrations.

     *

     * @return void

     */

    public function down()

    {

        Schema::dropIfExists('clientes');

    }

}

 

 

Nos vamos al modelo en app/models/Cliente.php y nos debe quedar así:

<?php

 

namespace App\Models;

 

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

 

class Cliente extends Model

{

    use HasFactory;

 

    // protected $table = 'clientes';

    protected $fillable = [

        'identificacion',

        'nombre',

        'apellido',

        'fecha_nacimiento',

        'edad',

    ];

}

 

 

Nos vamos al controlador en app/Http/Controllers/ClienteController.php y nos debe quedar así:

<?php

 

namespace App\Http\Controllers;

 

use App\Models\Cliente;

use Illuminate\Http\Request;

 

class ClienteController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function index()

    {

        //

        return Cliente::all();

    }

 

    /**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function create()

    {

        //

    }

 

    /**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

    public function store(Request $request)

    {

        //

        return Cliente::create($request->all());

    }

 

    /**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function show($id)

    {

        //

    }

 

    /**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function edit($id)

    {

        //

    }

 

    /**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function update(Request $request, $id)

    {

        //

        $cliente = Cliente::findOrFail($id);

        $cliente->nombre = $request->nombre;

        $cliente->identificacion= $request->identificacion;

        $cliente->apellido= $request->apellido;

        $cliente->fecha_nacimiento= $request->fecha_nacimiento;

        $cliente->edad= $request->edad;

 

        $cliente->update();

        return $cliente;

    }

 

    /**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function destroy($id)

    {

        //

        $cliente = Cliente::findOrFail($id)->delete();

    }

}

 

 

Ahora vamos al a ruta API en routes/api.php y creamos una ruta de tipo resource para el controller cliente. Debería quedar así:

<?php

 

use App\Http\Controllers\ClienteController;

use App\Http\Controllers\usuarioController;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

 

/*

|--------------------------------------------------------------------------

| API Routes

|--------------------------------------------------------------------------

|

| Here is where you can register API routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| is assigned the "api" middleware group. Enjoy building your API!

|

*/

 

Route::get('users', [usuarioController::class,'index']);

Route::resource('clientes', ClienteController::class);

 

Route::middleware('auth:api')->get('/user', function (Request $request) {

    return $request->user();

});

 

 

 

 

  1. Ahora configuremos todo en angular

Antes que nada vamos a crear una clase en angular. Escribimos así en la consola:

ng generate class clientes/cliente

ng generate component clientes/cliente

ng generate service clientes/cliente

Ahora vamos editar la clase creada en src/app/clientes/cliente.ts

export class Client {

  id:number;

  nombre:string;

  apellido:string;

  edad:number;

 

  constructor(){

    //vacio

    this.id=0;

    this.nombre='';

    this.apellido='';

    this.edad=0;

  }

}

 

 

Ahora editamos el servicio en src/app/clientes/cliente.service.ts

import { Injectable } from '@angular/core';

import { Client } from './client';

import { environment } from 'src/environments/environment.prod';

import { HttpClient } from '@angular/common/http';

 

@Injectable({

  providedIn: 'root'

})

export class ClientService {

  clientes = Client;

  baseUrl = environment.base;

 

  constructor(private http: HttpClient) { }

 

  read(){

    return this.http.get(this.baseUrl+'clientes');

  }

 

  insert(data: Client){

    return this.http.post(this.baseUrl+'clientes',data);

  }

 

  update(data: Client){

    return this.http.put(this.baseUrl + 'clientes/'+  data.id, data)

  }

 

  delete(id:number){

    return this.http.delete(this.baseUrl + 'clientes/' + id)

  }

}

 

 

 

Ahora editamos el componente en src/app/clientes/cliente/cliente.component.html y por ahora lo vamos a dejar de la siguiente manera:

<p>Hola, aqui se motrara el listado de los clientes</p>

 

 

Vamos a configurar los módulos en src/app/modules.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

 

import { HttpClientModule } from '@angular/common/http';

import { ClientComponent } from './ap/client/client.component';

import { FormsModule } from '@angular/forms';

import { ClientService } from './ap/client.service';

import { HttpModule } from '@angular/http';

 

@NgModule({

  declarations: [

    AppComponent,

    ClientComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

    FormsModule,

    HttpModule

  ],

  providers: [ClientService],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

Configuramos la ruta en angular en src/ap/app-routing.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

 

import { HttpClientModule } from '@angular/common/http';

import { ClientComponent } from './ap/client/client.component';

import { FormsModule } from '@angular/forms';

import { ClientService } from './ap/client.service';

import { HttpModule } from '@angular/http';

 

@NgModule({

  declarations: [

    AppComponent,

    ClientComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

    FormsModule,

    HttpModule

  ],

  providers: [ClientService],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

ahora pondremos un enlace en la vista en src/app/app.component.html para redirigir a la ruta que acabamos de crear.

 

<a href="./clientes" >

  <div class="card card-small">

    <span>Clientes</span>

  </div>

</a>

 

<div class="card" *ngFor="let usuario of usuarios;">

  {{ usuario.email }}

</div>

 

<router-outlet></router-outlet>

 

 

En el compontente src/app/clientes/cliente/cliente.component.ts ponemos lo siguiente:

import { Component, OnInit } from '@angular/core';

import { Client } from '../client';

import { ClientService } from '../client.service';

 

@Component({

  selector: 'app-client',

  templateUrl: './client.component.html',

  styleUrls: ['./client.component.css']

})

export class ClientComponent implements OnInit {

 

  clients: Client[];

  curretClient = new Client;

  crudOperation = {

    is_new: false,

    is_visible: false,

    inpu: false

  }

 

  constructor(private service: ClientService) {

    this.clients=[];

   }

 

  ngOnInit(): void {

    this.service.read().subscribe({

        next: (data: any) => {

          console.log(data);

          this.clients = data;

          this.curretClient = new Client();

        },

        error: error => {

            // this.errorMessage = error.message;

            console.error('There was an error!', error);

        }

    })

 

    // this.service.read().subscribe( (data:any) => {

    //   this.clients = data;

    //   this.curretClient = new Client();

    // });

  }

 

  new(){

    this.curretClient = new Client();

    this.crudOperation.is_visible = true;

    this.crudOperation.is_new = true;

  }

 

  save(){

    if(this.crudOperation.is_new){

      this.service.insert(this.curretClient).subscribe((res:any)=>{

        this.curretClient = new Client();

        this.crudOperation.is_visible=false;

        this.ngOnInit();

      });

      return;

    }

    this.service.update(this.curretClient).subscribe((res:any)=>{

      this.curretClient = new Client();

      this.crudOperation.is_visible = false;

    });

  }

 

  edit(row:any){

    this.crudOperation.is_visible = true;

    this.crudOperation.is_new = false;

    this.curretClient = row;

  }

 

  delete(id:number){

    this.service.delete(id).subscribe((res:any)=>{

      this.crudOperation.is_new = false;

      this.ngOnInit();

    })

  }

 

}

 

 

 

 

  1. Vamos a configurar bootstrap en los estilos de la siguiente manera.

Procedemos a instalar Bootstrap desde consola.

npm install bootstrap

ahora buscamos en el archivo de angular angular.json y donde diga style lo dejamos así:

"styles": [

              "node_modules/bootstrap/dist/css/bootstrap.css",

              "src/styles.css"

            ],

 

 

  1. Validamos que funcione la ruta

Validamos que la ruta funcione correctamente.

ng serve

 

 

Al dar clic en clientes nos mostrará el texto que pusimos en el componente de clientes:

 

 

  1. Vamos a configurar el componente de clientes para hacer el CRUD.

Vamos al archivo de componentes en src/app/clientes/cliente.component.html

 

<div class="form-group" *ngIf="crudOperation.is_visible">

  <label for="identificacion">Identificacion</label>

  <input type="text" id="identificacion" class="form-control" [(ngModel)]="curretClient.identificacion">

  <label for="nombre">Nombre</label>

  <input type="text" id="nombre" class="form-control" [(ngModel)]="curretClient.nombre">

  <label for="apellido">Apellido</label>

  <input type="text" id="apellido" class="form-control" [(ngModel)]="curretClient.apellido">

  <label for="fechaNacimiento">Fecha Nacimiento</label>

  <input type="date" id="fechaNacimiento" class="form-control" [(ngModel)]="curretClient.fecha_nacimiento">

  <label for="edad">Edad</label>

  <input type="number" id="edad" class="form-control" [(ngModel)]="curretClient.edad">

  <button class="btn btn-primary" (click)="save()">Guardar</button>

  <button class="btn btn-danger" (click)="crudOperation.is_visible=false">Cancelar</button>

</div>

 

<div class="panel-body">

  <table class="table table-striped table-over">

    <thead>

      <tr>

        <th>#</th>

        <th>IDENTIFICACION</th>

        <th>NOMBRE</th>

        <th>APELLIDO</th>

        <th>FECHA NACIMIENTO</th>

        <th>EDAD</th>

        <th></th>

      </tr>

    </thead>

    <tbody>

      <tr *ngFor="let cliente of clients;">

        <td>{{ cliente.id }}</td>

        <td>{{ cliente.identificacion }}</td>

        <td>{{ cliente.nombre }}</td>

        <td>{{ cliente.apellido }}</td>

        <td>{{ cliente.fecha_nacimiento }}</td>

        <td>{{ cliente.edad }}</td>

        <td>

          <button class="btn btn-warning" (click)="curretClient = cliente;crudOperation.is_visible=true;">Editar</button>

          <button class="btn btn-danger" (click)="delete(cliente.id)">Eliminar</button>

        </td>

      </tr>

    </tbody>

    <tfoot>

      <tr>

        <td colspan="6">

          <button class="btn btn-success" (click)="new();">Nuevo</button>

        </td>

      </tr>

    </tfoot>

  </table>

</div>

 

 

 

  1. Agregamos un filtro de búsqueda

Vamos al cliente.ts

import { Injectable } from '@angular/core';

import { Client } from './client';

import { environment } from 'src/environments/environment.prod';

import { HttpClient } from '@angular/common/http';

 

@Injectable({

  providedIn: 'root'

})

export class ClientService {

  clientes = Client;

  baseUrl = environment.base;

 

  constructor(private http: HttpClient) { }

 

  read(datoBuscar=''){

    return this.http.get(this.baseUrl+'clientes',{params: {buscar: datoBuscar}});

  }

 

  insert(data: Client){

    return this.http.post(this.baseUrl+'clientes',data);

  }

 

  update(data: Client){

    return this.http.put(this.baseUrl + 'clientes/'+  data.id, data)

  }

 

  delete(id:number){

    return this.http.delete(this.baseUrl + 'clientes/' + id)

  }

}

 

 

Y al componente cliente.component.html

<div class="form-inline">

  <input type="text" id="buscar" class="form-control" [(ngModel)]="query">

  <button class="btn btn-success" (click)="ngOnInit();">Buscar</button>

</div>

 

<div class="form-group" *ngIf="crudOperation.is_visible">

  <label for="identificacion">Identificacion</label>

  <input type="text" id="identificacion" class="form-control" [(ngModel)]="curretClient.identificacion">

  <label for="nombre">Nombre</label>

  <input type="text" id="nombre" class="form-control" [(ngModel)]="curretClient.nombre">

  <label for="apellido">Apellido</label>

  <input type="text" id="apellido" class="form-control" [(ngModel)]="curretClient.apellido">

  <label for="fechaNacimiento">Fecha Nacimiento</label>

  <input type="date" id="fechaNacimiento" class="form-control" [(ngModel)]="curretClient.fecha_nacimiento">

  <label for="edad">Edad</label>

  <input type="number" id="edad" class="form-control" [(ngModel)]="curretClient.edad">

  <button class="btn btn-primary" (click)="save()">Guardar</button>

  <button class="btn btn-danger" (click)="crudOperation.is_visible=false">Cancelar</button>

</div>

 

<div class="panel-body">

  <table class="table table-striped table-over">

    <thead>

      <tr>

        <th>#</th>

        <th>IDENTIFICACION</th>

        <th>NOMBRE</th>

        <th>APELLIDO</th>

        <th>FECHA NACIMIENTO</th>

        <th>EDAD</th>

        <th></th>

      </tr>

    </thead>

    <tbody>

      <tr *ngFor="let cliente of clients;">

        <td>{{ cliente.id }}</td>

        <td>{{ cliente.identificacion }}</td>

        <td>{{ cliente.nombre }}</td>

        <td>{{ cliente.apellido }}</td>

        <td>{{ cliente.fecha_nacimiento }}</td>

        <td>{{ cliente.edad }}</td>

        <td>

          <button class="btn btn-warning" (click)="curretClient = cliente;crudOperation.is_visible=true;">Editar</button>

          <button class="btn btn-danger" (click)="delete(cliente.id)">Eliminar</button>

        </td>

      </tr>

    </tbody>

    <tfoot>

      <tr>

        <td colspan="6">

          <button class="btn btn-success" (click)="new();">Nuevo</button>

        </td>

      </tr>

    </tfoot>

  </table>

</div>

 

 

Cliente.component.ts

import { Component, OnInit } from '@angular/core';

import { Client } from '../client';

import { ClientService } from '../client.service';

 

@Component({

  selector: 'app-client',

  templateUrl: './client.component.html',

  styleUrls: ['./client.component.css']

})

export class ClientComponent implements OnInit {

 

  clients: Client[];

  curretClient: Client;

  crudOperation = {

    is_new: false,

    is_visible: false,

    inpu: false

  }

  query= '';

 

  constructor(private service: ClientService) {

    this.clients=[];

    this.curretClient = new Client();

   }

 

  ngOnInit(): void {

    this.service.read(this.query).subscribe({

        next: (data: any) => {

          console.log(data);

          this.clients = data;

          this.curretClient = new Client();

        },

        error: error => {

            // this.errorMessage = error.message;

            console.error('There was an error!', error);

        }

    })

 

    // this.service.read().subscribe( (data:any) => {

    //   this.clients = data;

    //   this.curretClient = new Client();

    // });

  }

 

  new(){

    this.curretClient = new Client();

    this.crudOperation.is_visible = true;

    this.crudOperation.is_new = true;

  }

 

  save(){

    if(this.crudOperation.is_new){

      this.service.insert(this.curretClient).subscribe((res:any)=>{

        this.curretClient = new Client();

        this.crudOperation.is_visible=false;

        this.ngOnInit();

      });

      return;

    }

    this.service.update(this.curretClient).subscribe((res:any)=>{

      this.curretClient = new Client();

      this.crudOperation.is_visible = false;

    });

  }

 

  edit(row:any){

    this.crudOperation.is_visible = true;

    this.crudOperation.is_new = false;

    this.curretClient = row;

  }

 

  delete(id:number){

    this.service.delete(id).subscribe((res:any)=>{

      this.crudOperation.is_new = false;

      this.ngOnInit();

    })

  }

 

}

 

 

ClienteController

<?php

 

namespace App\Http\Controllers;

 

use App\Models\Cliente;

use Illuminate\Http\Request;

 

class ClienteController extends Controller

{

    /**

     * Display a listing of the resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function index(Request $request)

    {

        //

        // $clientes = Cliente::get();

        $clientes = Cliente::buscar($request->buscar);

        return response()->json($clientes, 200);

    }

 

    /**

     * Show the form for creating a new resource.

     *

     * @return \Illuminate\Http\Response

     */

    public function create()

    {

        //

    }

 

    /**

     * Store a newly created resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

     */

    public function store(Request $request)

    {

        //

        return Cliente::create($request->all());

    }

 

    /**

     * Display the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function show($id)

    {

        //

    }

 

    /**

     * Show the form for editing the specified resource.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function edit($id)

    {

        //

    }

 

    /**

     * Update the specified resource in storage.

     *

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function update(Request $request, $id)

    {

        //

        $cliente = Cliente::findOrFail($id);

        $cliente->nombre = $request->nombre;

        $cliente->identificacion= $request->identificacion;

        $cliente->apellido= $request->apellido;

        $cliente->fecha_nacimiento= $request->fecha_nacimiento;

        $cliente->edad= $request->edad;

 

        $cliente->update();

        return $cliente;

    }

 

    /**

     * Remove the specified resource from storage.

     *

     * @param  int  $id

     * @return \Illuminate\Http\Response

     */

    public function destroy($id)

    {

        //

        $cliente = Cliente::findOrFail($id)->delete();

    }

}

 

 

 

Modelo cliente

<?php

 

namespace App\Models;

 

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

 

class Cliente extends Model

{

    use HasFactory;

 

    // protected $table = 'clientes';

    protected $fillable = [

        'identificacion',

        'nombre',

        'apellido',

        'fecha_nacimiento',

        'edad',

    ];

 

    public static function buscar($query){

 

        if(!$query){

            return self::all();

        }

 

        return self::where('nombre','like','%'.$query.'%')

                    ->orWhere('apellido','like','%'.$query.'%')

                    ->get();

 

    }

}

 

 

 

  1.