Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Tutorial de CRUD de API REST de Laravel 8 por aplicación de ejemplo con Bootstrap 4 y MySQL

A lo largo de este tutorial para principiantes, aprenderá a usar Laravel 8, la última versión de uno de los frameworks PHP más populares, para crear una aplicación web REST API CRUD con una base de datos MySQL y estilos Bootstrap 4 desde cero y paso a paso comenzando con la instalación de Composer (administrador de paquetes PHP) para implementar y servir su aplicación.

Este tutorial está actualizado de nuestro tutorial de Laravel 6/7

Creando nuestra API REST CRUD de Laravel 8

Antes de implementar nuestra aplicación CRUD de API REST de Laravel 8, veamos los requisitos previos que necesitaremos tener para este tutorial.

Prerrequisitos

Este tutorial asume que tienes PHP y MySQL instalados en tu sistema. Siga las instrucciones de su sistema operativo para instalar ambos.

También debe estar familiarizado con Linux / macOS bash, donde ejecutaremos los comandos en este tutorial.

Se requiere estar familiarizado con PHP ya que Laravel 8 se basa en PHP.

Para el desarrollo, usaré una máquina Ubuntu 18.04+, por lo que los comandos de este tutorial están dirigidos a este sistema, pero debería poder seguir este tutorial en cualquier sistema operativo que utilice.

Consulte el tutorial anterior sobre cómo instalar Laravel 8 y PHP 7.3 .

Hemos cubierto los siguientes temas en nuestra publicación anterior:

  • Instalación de PHP 7.3+
  • Instalación de los módulos PHP 7.3 necesarios
  • Instalación de PHP Composer
  • Instalación y creación de un proyecto de Laravel 8
  • Instalación de las dependencias de front-end

Después de haber instalado Laravel 8 y creado un nuevo proyecto, creemos nuestro ejemplo de API REST de Laravel 8.

Crear una base de datos MySQL

Comencemos por crear una base de datos MySQL que usaremos para persistir en nuestra aplicación API REST de Laravel 8.

En su terminal, ejecute el siguiente comando para ejecutar el mysqlcliente:

$ mysql -u root -p

Cuando se le solicite, ingrese la contraseña de su servidor MySQL cuando lo haya instalado.

A continuación, ejecute la siguiente declaración SQL para crear una dbbase de datos:

mysql> create database db;

Abra el .envarchivo y actualice las credenciales para acceder a su base de datos MySQL:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=******

Debe ingresar el nombre de la base de datos, el nombre de usuario y la contraseña.

En este punto, puede ejecutar el migratecomando para crear su base de datos y un montón de tablas SQL que Laravel necesita:

$ php artisan migrate

Nota : Puede ejecutar el migratecomando en cualquier otro punto de su desarrollo para agregar otras tablas SQL en su base de datos o posteriormente en su base de datos si necesita agregar algún cambio más adelante.

Creando su primer modelo de Laravel 8

Laravel usa el patrón arquitectónico MVC para organizar su aplicación en tres partes desacopladas:

  • El modelo que encapsula la capa de acceso a datos,
  • La vista que encapsula la capa de representación,
  • Controlador que encapsula el código para controlar la aplicación y se comunica con el modelo y las capas de vista.

Wikipedia define MVC como:

Modelo-vista-controlador es un patrón arquitectónico comúnmente utilizado para desarrollar interfaces de usuario que divide una aplicación en tres partes interconectadas. Esto se hace para separar las representaciones internas de información de las formas en que se presenta y acepta la información al usuario.

Vea el tutorial de migraciones de bases de datos de Laravel con ejemplo de roles de administrador

Ahora, creemos nuestro primer modelo de Laravel. En su terminal, ejecute el siguiente comando:

$ php artisan make:model Contact --migration

Esto creará un Contact.phparchivo modelo dentro del app/Modelsdirectorio de su proyecto de Laravel 8 y se creará un archivo de migración dentro del directorio de migraciones de la base de datos.

En la terminal, obtenemos una salida similar a:

Model created successfully.
Created Migration: 2020_09_20_193840_create_contacts_table

Abra el database/migrations/xxxxxx_create_contacts_tablearchivo de migración y actualícelo en consecuencia:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
            $table->string('first_name');
            $table->string('last_name');
            $table->string('email');
            $table->string('job_title');
            $table->string('city');   
            $table->string('country');            
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

Añadimos los first_namelast_nameemailjob_titlecitycountrylos campos de la contactstabla.

Vea también, Tutorial y ejemplo de verificación de correo electrónico de Laravel

Ahora puede crear la contactstabla en la base de datos usando el siguiente comando:

$ php artisan migrate

Ahora, veamos nuestro Contactmodelo, que se utilizará para interactuar con la contactstabla de la base de datos. Abra el app/Models/Contact.phparchivo y actualícelo de la siguiente manera:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    protected $fillable = [
        'first_name',
        'last_name',
        'email',
        'city',
        'country',
        'job_title'       
    ];
}

Creación del controlador y las rutas de Laravel 8

Después de crear el modelo y migrar nuestra base de datos. Creemos ahora el controlador y las rutas para trabajar con el Contactmodelo. En su terminal, ejecute el siguiente comando:

$ php artisan make:controller ContactController --resource

El enrutamiento de recursos de Laravel asigna las típicas rutas "CRUD" a un controlador con una sola línea de código. Por ejemplo, es posible que desee crear un controlador que maneje todas las solicitudes HTTP de "fotos" almacenadas por su aplicación. Usando el make:controllercomando Artisan, podemos crear rápidamente dicho controlador:

Este comando generará un controlador en app/Http/Controllers/ContactController.phpEl controlador contendrá un método para cada una de las operaciones de recursos disponibles.

Abra el app/Http/Controllers/ContactController.phparchivo. Este es el contenido inicial:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * 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)
    {
        //
    }

    /**
     * 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)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

La ContactControllerclase extiende la Controllerclase disponible de Laravel y define un montón de métodos que se utilizarán para realizar las operaciones CRUD contra el Contactmodelo.

Puede leer el papel del método en el comentario que se encuentra arriba.

Ahora debemos proporcionar implementaciones para estos métodos.

Pero antes de eso, agreguemos el enrutamiento. Abra el routes/web.phparchivo y actualícelo en consecuencia:

<?php
Route::get('/', function () {
    return view('welcome');
});

Route::resource('contacts', 'App\Http\Controllers\ContactController');

En versiones anteriores de Laravel, había una propiedad en el RouteServiceProvider.phpespacio de nombres llamado $ que se usaba para prefijar el espacio de nombres de sus controladores automáticamente agregando, App\Http\Controllerspero en Laravel 8, debe agregarlo usted mismo.

También puede utilizar la siguiente sintaxis:

Route::resource('contacts', ContactController::class);

Con el resource()método estático de Route, puede crear varias rutas para exponer varias acciones en el recurso.

Estas rutas se asignan a varios ContactControllermétodos que deberán implementarse en la siguiente sección:

  • GET /contacts, asignado al index()método,
  • GET /contacts/create, asignado al create()método,
  • POST /contacts, asignado al store()método,
  • GET /contacts/{contact}, asignado al show()método,
  • GET /contacts/{contact}/edit, asignado al edit()método,
  • PUT / PATCH /contacts/{contact}, asignado al update()método,
  • DELETE /contacts/{contact}, mapeado al destroy()método.

Estas rutas se utilizan para servir plantillas HTML y también como puntos finales de API para trabajar con el Contactmodelo.

Nota : Si desea crear un controlador que solo expondrá una API RESTful, puede usar el apiResourcemétodo para excluir las rutas que se usan para servir las plantillas HTML:

Route::apiResource('contacts', 'ContactController');

Implementación de las operaciones CRUD

Implementemos ahora los métodos del controlador junto con las vistas.

C: Implementar la operación Create y agregar un formulario

La ContactControllerincluye el store()método que se asigna al POST /contactspunto final de la API que se utiliza para crear un contacto en la base de datos y la create()que se asigna a la GET /contacts/createruta que será utilizada para servir el formulario HTML utilizado para enviar el contacto a POST /contactspunto final de la API.

Implementemos estos dos métodos.

Vuelva a abrir el app/Http/Controllers/ContactController.phparchivo y comience importando el Contactmodelo:

use App\Contact;

A continuación, ubique el store()método y actualícelo en consecuencia:

    public function store(Request $request)
    {
        $request->validate([
            'first_name'=>'required',
            'last_name'=>'required',
            'email'=>'required'
        ]);

        $contact = new Contact([
            'first_name' => $request->get('first_name'),
            'last_name' => $request->get('last_name'),
            'email' => $request->get('email'),
            'job_title' => $request->get('job_title'),
            'city' => $request->get('city'),
            'country' => $request->get('country')
        ]);
        $contact->save();
        return redirect('/contacts')->with('success', 'Contact saved!');
    }

A continuación, ubique el create()método y actualícelo:

    public function create()
    {
        return view('contacts.create');
    }

La create()función hace uso del view()método para devolver la create.blade.phpplantilla que debe estar presente en la resources/viewscarpeta.

Antes de crear la create.blade.phpplantilla, necesitamos crear una plantilla base que se ampliará con la plantilla de creación y todas las demás plantillas que se crearán más adelante en este tutorial.

En la resources/viewscarpeta, cree un base.blade.phparchivo:

$ cd resources/views
$ touch base.blade.php

Abra el resources/views/base.blade.phparchivo y agregue la siguiente plantilla de hoja:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Laravel 8 & MySQL CRUD Tutorial</title>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
    @yield('main')
  </div>
  <script src="{{ asset('js/app.js') }}" type="text/js"></script>
</body>
</html>

Ahora, creemos la create.blade.phpplantilla. Primero, cree una carpeta de contactos en la carpeta de vistas:

$ mkdir contacts

A continuación, crea la plantilla

$ cd contacts
$ touch create.blade.php

Abra el resources/views/contacts/create.blade.phparchivo y agregue el siguiente código:

@extends('base')

@section('main')
<div class="row">
 <div class="col-sm-8 offset-sm-2">
    <h1 class="display-3">Add a contact</h1>
  <div>
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('contacts.store') }}">
          @csrf
          <div class="form-group">    
              <label for="first_name">First Name:</label>
              <input type="text" class="form-control" name="first_name"/>
          </div>

          <div class="form-group">
              <label for="last_name">Last Name:</label>
              <input type="text" class="form-control" name="last_name"/>
          </div>

          <div class="form-group">
              <label for="email">Email:</label>
              <input type="text" class="form-control" name="email"/>
          </div>
          <div class="form-group">
              <label for="city">City:</label>
              <input type="text" class="form-control" name="city"/>
          </div>
          <div class="form-group">
              <label for="country">Country:</label>
              <input type="text" class="form-control" name="country"/>
          </div>
          <div class="form-group">
              <label for="job_title">Job Title:</label>
              <input type="text" class="form-control" name="job_title"/>
          </div>                         
          <button type="submit" class="btn btn-primary-outline">Add contact</button>
      </form>
  </div>
</div>
</div>
@endsection

¡Esta es una captura de pantalla de nuestro formulario de creación!

Tutorial de Laravel 8 CRUD

Complete el formulario y haga clic en el botón Agregar contacto para crear un contacto en la base de datos. Debería ser redirigido a la ruta / contactos que aún no tiene una vista asociada.

R: Implementación de la operación de lectura y obtención de datos

A continuación, implementemos la operación de lectura para obtener y mostrar datos de contactos de nuestra base de datos MySQL.

Vaya al app/Http/Controllers/ContactController.phparchivo, localice el index()método y actualícelo:

    public function index()
    {
        $contacts = Contact::all();

        return view('contacts.index', compact('contacts'));
    }

A continuación, debe crear la plantilla de índice. Crea un resources/views/contacts.index.blade.phparchivo:

$ touch index.blade.php

Abra el resources/views/contacts/index.blade.phparchivo y agregue el siguiente código:

@extends('base')

@section('main')
<div class="row">
<div class="col-sm-12">
    <h1 class="display-3">Contacts</h1>    
  <table class="table table-striped">
    <thead>
        <tr>
          <td>ID</td>
          <td>Name</td>
          <td>Email</td>
          <td>Job Title</td>
          <td>City</td>
          <td>Country</td>
          <td colspan = 2>Actions</td>
        </tr>
    </thead>
    <tbody>
        @foreach($contacts as $contact)
        <tr>
            <td>{{$contact->id}}</td>
            <td>{{$contact->first_name}} {{$contact->last_name}}</td>
            <td>{{$contact->email}}</td>
            <td>{{$contact->job_title}}</td>
            <td>{{$contact->city}}</td>
            <td>{{$contact->country}}</td>
            <td>
                <a href="{{ route('contacts.edit',$contact->id)}}" class="btn btn-primary">Edit</a>
            </td>
            <td>
                <form action="{{ route('contacts.destroy', $contact->id)}}" method="post">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-danger" type="submit">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
<div>
</div>
@endsection

U: Implementación de la operación de actualización

A continuación, necesitamos implementar la operación de actualización. Vaya al app/Http/Controllers/ContactController.phparchivo, localice el edit($id)método y actualícelo:

    public function edit($id)
    {
        $contact = Contact::find($id);
        return view('contacts.edit', compact('contact'));        
    }

A continuación, debe implementar el update()método:

    public function update(Request $request, $id)
    {
        $request->validate([
            'first_name'=>'required',
            'last_name'=>'required',
            'email'=>'required'
        ]);

        $contact = Contact::find($id);
        $contact->first_name =  $request->get('first_name');
        $contact->last_name = $request->get('last_name');
        $contact->email = $request->get('email');
        $contact->job_title = $request->get('job_title');
        $contact->city = $request->get('city');
        $contact->country = $request->get('country');
        $contact->save();

        return redirect('/contacts')->with('success', 'Contact updated!');
    }

Ahora, debe agregar la plantilla de edición. Dentro de resources/views/contacts/, crea un edit.blade.phparchivo:

$ touch edit.blade.php

Abra el resources/views/contacts/edit.blade.phparchivo y agregue este código:

@extends('base') 
@section('main')
<div class="row">
    <div class="col-sm-8 offset-sm-2">
        <h1 class="display-3">Update a contact</h1>

        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        <br /> 
        @endif
        <form method="post" action="{{ route('contacts.update', $contact->id) }}">
            @method('PATCH') 
            @csrf
            <div class="form-group">

                <label for="first_name">First Name:</label>
                <input type="text" class="form-control" name="first_name" value={{ $contact->first_name }} />
            </div>

            <div class="form-group">
                <label for="last_name">Last Name:</label>
                <input type="text" class="form-control" name="last_name" value={{ $contact->last_name }} />
            </div>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="text" class="form-control" name="email" value={{ $contact->email }} />
            </div>
            <div class="form-group">
                <label for="city">City:</label>
                <input type="text" class="form-control" name="city" value={{ $contact->city }} />
            </div>
            <div class="form-group">
                <label for="country">Country:</label>
                <input type="text" class="form-control" name="country" value={{ $contact->country }} />
            </div>
            <div class="form-group">
                <label for="job_title">Job Title:</label>
                <input type="text" class="form-control" name="job_title" value={{ $contact->job_title }} />
            </div>
            <button type="submit" class="btn btn-primary">Update</button>
        </form>
    </div>
</div>
@endsection

U: Implementación de la operación de eliminación

Finalmente, procederemos a implementar la operación de eliminación. Vaya al app/Http/Controllers/ContactController.phparchivo, busque el destroy()método y actualícelo en consecuencia:

    public function destroy($id)
    {
        $contact = Contact::find($id);
        $contact->delete();

        return redirect('/contacts')->with('success', 'Contact deleted!');
    }

Puede notar que cuando redirigimos a la /contactsruta en nuestros métodos de API CRUD, también pasamos un mensaje de éxito pero no aparece en nuestra indexplantilla. ¡Cambiemos eso!

Vaya al resources/views/contacts/index.blade.phparchivo y agregue el siguiente código:

<div class="col-sm-12">

  @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div>
  @endif
</div>

También necesitamos agregar un botón que nos lleve al formulario de creación. Agregue este código debajo del encabezado:

    <div>
    <a style="margin: 19px;" href="{{ route('contacts.create')}}" class="btn btn-primary">New contact</a>
    </div>  

Esta es una captura de pantalla de la página después de que creamos un contacto:

Ejemplo CRUD de Laravel 8

Conclusión

Llegamos al final de este tutorial. Creamos una aplicación REST API CRUD con Laravel 8, PHP 7 y MySQL.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas