Anda di halaman 1dari 14

19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.

4 - CódigoJavaLibre

CódigoJavaLibre Código Java, Php, Desarrollo En Laravel, Android, Bases De Datos


Y Mucho Mas. "CodigoJavaLibre"

CURSO DE JAVA  CURSO DE ANDROID  DESARROLLO WEB  BASES DE DATOS 

Home  crear aplicaciones CRUD con ajax sin recargar la pagina laravel  CRUD web sin actualizar la página
 CRUD web sin actualizar la página en laravel usando ajax  Laravel  laravel y ajax
 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4

Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4
     2 years ago

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.

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 1/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

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.

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 2/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

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');
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 3/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

}
}

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
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 4/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

</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></
<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>
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 5/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

</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);
}
});
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 6/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

});
// 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>
producto += '<td><button class="btn btn-warning btn-detail open_modal" value="' + data.id + '">Editar</bu
producto += ' <button class="btn btn-danger btn-delete delete-producto" value="' + data.id + '">Eliminar<
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

/*
|--------------------------------------------------------------------------
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 7/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

| 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 :)

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 8/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

SHARE THIS     

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
19 de septiembre de 2017, 13:12 delete

algunvideo tutorial sobre lo q hiciste bro

Reply

Jossy
25 de septiembre de 2017, 15:55 delete

Gracias por compartirlo es de gran ayuda. ;)

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 9/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

Reply

Luis Capote
8 de marzo de 2018, 13:27 delete

Excelente Tutorial me gusto y me ayudo mucho sigue asi crack

Reply

Hernan Chaparro
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

Introduce tu comentario...

Comentar como: Naxter (Google Cerrar sesión

Publicar Vista previa Avisarme

Entrada más reciente Página principal Entrada antigua

Search this site... 

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 10/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

POPULAR RECENT COMMENTS

Filtrar o Buscar datos en una


JTable en Java
Hoy hoy e decidido crear este
articulo donde le voy a enseñar a hacer
búsquedas dinámicas en un JTable sin
base de datos . La búsqued...

21- JAVA: DISEÑO DE


FORMULARIOS DESDE CÓDIGO
EJERCICIO GUIADO. JAVA:
DISEÑO DE FORMULARIOS DESDE
CÓDIGO La Ventana de Diseño La
ventana de diseño es una gran
herramienta que nos pe...

9- JAVA: SPINNER
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 11/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

EJERCICIO GUIADO. JAVA:


SPINNER Introducción a los
JSpinner La clase JSpinner
permite crear cuadros como el siguiente:
Son elem...

Explicación de wrap_content,
fill_parent o match_parent en
Android Studio
En androide cada etiqueta en el archivo
XML contiene dos atributos importantes:
android: layout_width android:
layout_height E...

Crear un ListView con


Imagenes en Android Studio
¿Como crear una lista con
imágenes en android studio? El ListView
estándar sólo muestra una lista de
elementos. si bien puede se...

8- JAVA: DESLIZADOR SLIDERS


"JSLider"
EJERCICIO GUIADO. JAVA:
SLIDERS Introducción a los JSliders La
clase JSlider permite crear objetos como
el siguiente: Estos ele...

Calculadora en Java Simple


(NetBeans)
Calculadora en Java Simple
(NetBeans) En este tutorial vamos a
enseñarles como hacer una calculadora
básica en java. Este sera el ...

Validar el correo electronico (email) en


Java usando expresiones regulares
Estas validaciones de correo electronico
son utilizando expresiones regulares .
Puede haber otras formas, pero voy a
explicarles como...

Enviar datos entre actividades


en Android Studio
Pasar parámetros entre
activities a través de los Intents
explícitos ¿Que es un Intent en android?
www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 12/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

Un Intent se define genérica...

16- JAVA: VARIABLES


GLOBALES
EJERCICIO GUIADO. JAVA:
VARIABLES GLOBALES Variables Globales
/ Propiedades de la Clase Las
propiedades de la clase en java es el
equi...

Social Icons

Social Icons

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 13/14
19/3/2019 Crear una aplicación crud sin recargar la pagina usando Ajax en laravel 5.4 - CódigoJavaLibre

Featured Posts

© Copyright 2015 CódigoJavaLibre. Designed by Bloggertheme9.

www.codigojavalibre.com/2017/05/crear-una-aplicacion-crup-sin-recargar-la-pagina-en-laravel-ajax.html 14/14