Crear Una Aplicación Crud Sin Recargar La Pagina Usando Ajax en Laravel 5.4

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.
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></
<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>
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
/*
|--------------------------------------------------------------------------
| 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());
});
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();
});
Route::delete('producto/{producto_id?}',function($producto_id){
$producto = App\Producto::destroy($producto_id);
});
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 :)
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. ;)
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... 
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

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"
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?
Un Intent se define genérica...
16- JAVA: VARIABLES

GLOBALES
VARIABLES GLOBALES Variables Globales
/ Propiedades de la Clase Las
propiedades de la clase en java es el
equi...
Social Icons
Social Icons
Featured Posts
© Copyright 2015 CódigoJavaLibre. Designed by Bloggertheme9.

Crear Una Aplicación Crud Sin Recargar La Pagina Usando Ajax en Laravel 5.4

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Crear Una Aplicación Crud Sin Recargar La Pagina Usando Ajax en Laravel 5.4

Enviado por

Direitos autorais:

Formatos disponíveis

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

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

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

Laravel, crear aplicaciones CRUD con ajax sin recargar la pagina

laravel new crud-laravel-jquery

php artisan make:model Producto -m

Escribimos lo siguiente el siguiente codigo en CreateProductosTable:

class CreateProductosTable extends Migration

class Producto extends Model

Paso 4: Crear la vista

<div class="container text-center">

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

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

// muestra el formulario modal para la edición del producto

$.get(url + '/' + producto_id, function (data) {

Y por ultimo añadimos nuestras rutas:

 4 COMENTARIOS WRITE COMENTARIOS

algunvideo tutorial sobre lo q hiciste bro

Gracias por compartirlo es de gran ayuda. ;)

Excelente Tutorial me gusto y me ayudo mucho sigue asi crack

Comentar como: Naxter (Google Cerrar sesión

Publicar Vista previa Avisarme

Entrada más reciente Página principal Entrada antigua

Search this site... 

POPULAR RECENT COMMENTS

Filtrar o Buscar datos en una

21- JAVA: DISEÑO DE

EJERCICIO GUIADO. JAVA:

Crear un ListView con

8- JAVA: DESLIZADOR SLIDERS

Calculadora en Java Simple

Validar el correo electronico (email) en

Enviar datos entre actividades

Un Intent se define genérica...

16- JAVA: VARIABLES

© Copyright 2015 CódigoJavaLibre. Designed by Bloggertheme9.

Você também pode gostar