CRUD + Laravel + React js + Mysql : Enviar y Insertar datos desde API.

Tutorial anterior Listar datos desde API

React.js ( Frontend )

Variables state para el formulario del producto

formNombre:'',
formDescripcion:'',
formPrecio:'',

Agregar funciones de onChange en el constructor

 this.handleChangeNombre = this.handleChangeNombre.bind(this);
 this.handleChangeDescp  = this.handleChangeDescp.bind(this);
 this.handleChangePreci  = this.handleChangePreci.bind(this);

boton de modal

<button type="button" class="btn btn-primary col-md-4" data-toggle="modal" data-target="#exampleModal">
                Crear producto
              </button>

Modal y formulario del producto

<form>
            <div ref="putomodal" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Formulario de producto</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                     <label for="exampleInputEmail1">Nombre de producto </label>
                     <input type="text" class="form-control" value={this.state.formNombre} onChange={this.handleChangeNombre} />
                    </div>
                    <div class="form-group">
                     <label for="exampleInputEmail1">Descripcion de producto</label>
                     <textarea class="form-control" rows="3" value={this.state.formDescripcion} onChange={this.handleChangeDescp}></textarea>
                    </div>
                    <div class="form-group">
                     <label for="exampleInputEmail1">Precio</label>
                     <input type="number" class="form-control" value={this.state.formPrecio} onChange={this.handleChangePreci} />
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onClick={()=>this.sendNetworkProduct()}>Guardar</button>
                  </div>
                </div>
              </div>
            </div>
            </form>

Funciones de onChange que actualiza los datos del formulario

handleChangeNombre(event) {
      this.setState({formNombre: event.target.value});
    }

    handleChangeDescp(event) {
      this.setState({formDescripcion: event.target.value});
    }

    handleChangePreci(event) {
      this.setState({formPrecio: event.target.value});
    }

Enviar datos desde API

    sendNetworkProduct(){

      const formData = new FormData()
      formData.append('nombre',this.state.formNombre)
      formData.append('descripcion',this.state.formDescripcion)
      formData.append('precio',this.state.formPrecio)

      axios.post(baseUrl+'api/producto/create',formData).then(response=>{

           if (response.data.success==true) {
             alert(response.data.message)
             // cargar datos de nuevo
             this.loadDataProduct()
             $("#exampleModal").modal("hide");
           }

       }).catch(error=>{
         alert("Error "+error)
       })

    }

Laravel ( Backend )

routes/api.php

Route::post('producto/create','API\ControllerProduct@create');

Controlador app/Http/Controllers/API/ControllerProduct.php

public function create(Request $request){

      Producto::insert([
        'titulo' => $request->input('nombre'),
        'descripcion' => $request->input('descripcion'),
        'precio' => $request->input('precio'),
        'cantidad' => 0
      ]);

      $response['message'] = "Guardo exitosamente";
      $response['success'] = true;

      return $response;
    }

Modelo app/Producto.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Producto extends Model
{
    //
    protected $table='producto';

    protected $fillable=['id','titulo', 'descripcion', 'precio', 'cantidad' ];

}

Siguiente tutorial Editar y Actualizar datos desde API

Un comentario

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *