Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4

Laravel, crear aplicaciones CRUD con ajax sin recargar la pagina

En este tutorial les voy a enseñar cómo construir aplicaciones CRUD web sin actualizar la página en laravel usando ajax.

Antes de esto, usted debe conocer acerca de la solicitudes en Ajax, Ajax se utiliza básicamente para afectar partes de la páginas web sin tener que recargar esta misma.

Paso 1: Instalar laravel, la ultima versión de laravel es Laravel 5.4, en esta versión esta hecha el tutorial.

laravel new crud-laravel-jquery

Paso 2; Crear nuestra tabla productos y el modelo: Para crear el modelo y la estructura de nuestra migracion tenemos que correr el siguiente comando en en la carpeta de nuestro proyecto.

php artisan make:model Producto -m

Nota: El -m al final del comando es para que cree también nuestra migración.

Paso 3: Nos vamos a nuestra migración producto que vemos creado en la carpeta database/migrations.

Escribimos lo siguiente el siguiente codigo en CreateProductosTable:

<?php

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

class CreateProductosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('productos', function (Blueprint $table) {
            $table->increments('id');
            $table->string('nombre');
            $table->text('descripcion');
            $table->timestamps();
        });
    }

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

Ahora ejecute el comando ' php artisan migrate ' para crear la tabla de productos en nuestra base de datos. Nota: para que la migracion funcione el archivo .env tiene que estar configurado con los datos de nuestra base de datos.

El modelo Producto:

Ruta app/Producto.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Producto extends Model
{
    public $fillable=['nombre','descripcion'];
}

Paso 4: Crear la vista

Ahora Crear un directorio de producto y dentro de este directorio crear un archivo de vista index.blade.php

resources/views/producto/index.blade.php

<html>

<head>
 <title>Crear una aplicación crud sin recargar la pagina en laravel </title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

 <br>
 <br>

 <div class="container text-center">
  <div class="jumbotron">
   <h1>Crear una aplicación crud sin recargar la pagina en laravel</h1>
  </div>
 </div>

 <div class="container">
  <div class="panel panel-primary">
   <div class="panel-heading">Crear una aplicación crud sin recargar la pagina en laravel
    
   </div>
   <div class="panel-body">
    <button id="btn_add" name="btn_add" class="btn btn-primary pull-right">Nuevo Producto</button>
    <table class="table">
     <thead>
      <tr>
       <th>ID</th>
       <th>Nombre</th>
       <th>Descripcion</th>
       <th>Accion</th>
      </tr>
     </thead>
     <tbody id="productos-list" name="productos-list">
      @foreach ($productos as $producto)
      <tr id="producto{{$producto->id}}">
       <td>{{$producto->id}}</td>
       <td>{{$producto->nombre}}</td>
       <td>{{$producto->descripcion}}</td>
       <td>
        <button class="btn btn-warning btn-detail open_modal" value="{{$producto->id}}">Editar</button>
        <button class="btn btn-danger btn-delete delete-producto" value="{{$producto->id}}">Eliminar</button>
       </td>
      </tr>
      @endforeach
     </tbody>
    </table>
   </div>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h4 class="modal-title" id="myModalLabel">Producto</h4>
     </div>
     <div class="modal-body">
      <form id="frmproductos" name="frmproductos" class="form-horizontal" novalidate="">
       <div class="form-group error">
        <label for="inputName" class="col-sm-3 control-label">Nombre</label>
        <div class="col-sm-9">
         <input type="text" class="form-control has-error" id="nombre" name="nombre" placeholder="Product Name" value="">
        </div>
       </div>
       <div class="form-group">
        <label for="inputDetail" class="col-sm-3 control-label">Descripcion</label>
        <div class="col-sm-9">
         <input type="text" class="form-control" id="descripcion" name="descripcion" placeholder="details" value="">
        </div>
       </div>
      </form>
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-primary" id="btn-save" value="add">Guardar</button>
      <input type="hidden" id="producto_id" name="producto_id" value="0">
     </div>
    </div>
   </div>
  </div>
 </div>
 <meta name="_token" content="{!! csrf_token() !!}" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="{{asset('js/crud.js')}}"></script>
</body>

</html>

Ahora crear un archivo crud.js en la siguiente ruta public/js/crud.js

public/js/crud.js.

var url = "http://localhost:8000/producto";

// muestra el formulario modal para la edición del producto
$(document).on('click', '.open_modal', function () {
    var producto_id = $(this).val();

    $.get(url + '/' + producto_id, function (data) {
        //success data
        console.log(data);
        $('#producto_id').val(data.id);
        $('#nombre').val(data.nombre);
        $('#descripcion').val(data.descripcion);
        $('#btn-save').val("update");
        $('#myModal').modal('show');
    })
});
// muestra el formulario modal para crear un nuevo producto
$('#btn_add').click(function () {
    $('#btn-save').val("add");
    $('#frmproductos').trigger("reset");
    $('#myModal').modal('show');
});
// eliminar el producto y eliminarlo de la lista
$(document).on('click', '.delete-producto', function () {
    var producto_id = $(this).val();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    })
    $.ajax({
        type: "DELETE",
        url: url + '/' + producto_id,
        success: function (data) {
            console.log(data);
            $("#producto" + producto_id).remove();
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});
// crear nuevo producto / actualizar producto existente
$("#btn-save").click(function (e) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    })
    e.preventDefault();
    var formData = {
        nombre: $('#nombre').val(),
        descripcion: $('#descripcion').val(),
    }
    // utilizado para determinar el metodo http que se va a utilizar [add = POST], [update = PUT]
    var state = $('#btn-save').val();
    var type = "POST"; // para crear un nuevo recurso
    var producto_id = $('#producto_id').val();;
    var my_url = url;
    if (state == "update") {
        type = "PUT"; // para actualizar recursos existentes
        my_url += '/' + producto_id;
    }
    console.log(formData);
    $.ajax({
        type: type,
        url: my_url,
        data: formData,
        dataType: 'json',
        success: function (data) {
            console.log(data);
            var producto = '<tr id="producto' + data.id + '"><td>' + data.id + '</td><td>' + data.nombre + '</td><td>' + data.descripcion + '</td>';
            producto += '<td><button class="btn btn-warning btn-detail open_modal" value="' + data.id + '">Editar</button>';
            producto += ' <button class="btn btn-danger btn-delete delete-producto" value="' + data.id + '">Eliminar</button></td></tr>';
            if (state == "add") { // para actualizar recursos existentes...
                $('#productos-list').append(producto);
            } else { // si el usuario actualiza un registro existente
                $("#producto" + producto_id).replaceWith(producto);
            }
            $('#frmproductos').trigger("reset");
            $('#myModal').modal('hide')
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

Y por ultimo añadimos nuestras rutas:

routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

use Illuminate\Http\Request;

Route::get('producto', function () {
    $productos = App\Producto::all();
    return view('producto.index')->with('productos',$productos);
});
Route::get('producto/{producto_id?}',function($producto_id){
    $producto = App\Producto::find($producto_id);
    return response()->json($producto);
});
Route::post('producto',function(Request $request){   
    $producto = App\Producto::create($request->input());
    return response()->json($producto);
});
Route::put('producto/{producto_id?}',function(Request $request,$producto_id){
    $producto = App\Producto::find($producto_id);
    $producto->nombre = $request->nombre;
    $producto->descripcion = $request->descripcion;
    $producto->save();
    return response()->json($producto);
});
Route::delete('producto/{producto_id?}',function($producto_id){
    $producto = App\Producto::destroy($producto_id);
    return response()->json($producto);
});