domingo, 21 de mayo de 2017

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);
});



Y listo eso seria todo, ejecutamos el es siguiente comando " php artisan serve ",  y nos vamos a la ruta http://localhost:8000/producto y listo :)


César GI

About César GI

Lo que me importa es poder enseñar lo poco que se, por que asi como yo aprendo leyendo gracias a las personas que comparten sus conocimiento yo tambien quiero ayudar a la comunidad en español aportando lo poco que he aprendido hasta el momento.

4 comentarios

Write comentarios
Mayron Lima
AUTHOR
19 de septiembre de 2017, 13:12 delete

algunvideo tutorial sobre lo q hiciste bro

Reply
avatar
Jossy
AUTHOR
25 de septiembre de 2017, 15:55 delete

Gracias por compartirlo es de gran ayuda. ;)

Reply
avatar
Luis Capote
AUTHOR
8 de marzo de 2018, 13:27 delete

Excelente Tutorial me gusto y me ayudo mucho sigue asi crack

Reply
avatar
3 de abril de 2018, 14:11 delete

tengo este error.. jquery.js:9664 PUT http://127.0.0.1:8000/noticia/2 500 (Internal Server Error), alguien podria ayudarme

Reply
avatar