Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de CRUD de Laravel 7/6 Ajax con ejemplo de paginación y modal de Bootstrap 4

 En este tutorial, aprenderemos a construir un ejemplo CRUD con Laravel 7/6, Bootstrap 4, jQuery y Ajax.

Veremos por ejemplo cómo realizar operaciones Ajax CRUD en Laravel 6/7 con modal de arranque, tabla de datos y paginación.

Usando Ajax con Laravel 7/6 para operaciones CRUD

Usaremos el ajax()método jQuery para enviar solicitudes Ajax.

Usaremos yajratabla de datos para crear una tabla de datos.

  • Paso 1 - Instalación de Laravel 7
  • Paso 2: Instalación de Yajra Datatable
  • Paso 3: configurar una base de datos MySQL
  • Paso 4: crear una migración de Laravel 7
  • Paso 5: agregar una ruta de Laravel 7
  • Paso 6: agregar un controlador y modelo Laravel 7
  • Paso 7: agregar una vista de plantilla Blade
  • Paso 8: Servicio de la aplicación Laravel 7

Paso 1 - Instalación de Laravel 7

Comencemos instalando Laravel 7 en nuestra máquina de desarrollo.

Dirígete a una nueva interfaz de línea de comandos y ejecuta el siguiente comando:

$ composer create-project --prefer-dist laravel/laravel ajax-crud-example

Paso 2: Instalación de Yajra Datatable

A continuación, yajrainstalemos el paquete de tabla de datos en nuestro proyecto Laravel 7 usando el siguiente comando:

$ composer require yajra/laravel-datatables-oracle

A continuación, debe agregarlo a las matrices providersaliases:


'providers'  =>  [
    Yajra\DataTables\DataTablesServiceProvider::class,
]

'aliases'  =>  [

    'DataTables'  =>  Yajra\DataTables\Facades\DataTables::class,

]

Paso 3: configurar una base de datos MySQL

A continuación, configuremos una base de datos MySQL para nuestro proyecto Laravel 7. Asegúrese de haber creado una base de datos, luego vaya al .envarchivo y agregue la información para conectarse a su base de datos:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydb
DB_USERNAME= root
DB_PASSWORD= root

Paso 4: crear una migración de Laravel 7

Creemos ahora un archivo de migración para una customerstabla. Regrese a su terminal y ejecute el siguiente comando:

$ php artisan make:migration create_customers_table --create=customers

A continuación, abra el archivo de migración en la database/migrationscarpeta y actualícelo de la siguiente manera para crear una customerstabla de base de datos:

<?php

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

class  CreateCustomersTable  extends  Migration{

/**

* Run the migrations.

*

* @return void

*/

public  function up(){

    Schema::create('customers',  function  (Blueprint $table)  {
        $table->bigIncrements('id');
        $table->string('firstName');
        $table->string('lastName');
        $table->text('info');
        $table->timestamps();
    });

}

/**

* Reverse the migrations.

*

* @return void

*/

public  function down(){
    Schema::dropIfExists('customers');

}
}

A continuación, puede crear la tabla en la base de datos ejecutando el siguiente comando:

$ php artisan migrate

Paso 5: agregar una ruta de Laravel 7

Creemos ahora una ruta Laravel 7 para acceder a la vista.

Vaya al routes/web.phparchivo y agregue la siguiente ruta de recursos:

Route::resource('customers','CustomerController');

Paso 6: agregar un controlador y modelo Laravel 7

Regrese a su terminal y ejecute el siguiente comando para generar un controlador:

$ php artisan controller:make CustomerController

A continuación, abra el app/Http/Controllers/CustomerController.phparchivo y actualícelo de la siguiente manera:

<?php

namespace App\Http\Controllers;

use App\Customer;
use Illuminate\Http\Request;
use DataTables;

class CustomerController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {

        if ($request->ajax()) {
            $data = Customer::latest()->get();
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){

                           $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editCustomer">Edit</a>';

                           $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteCustomer">Delete</a>';

                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }

        return view('CustomerAjax');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        Customer::updateOrCreate(['id' => $request->Customer_id],
                ['firstName' => $request->firstName, 'info' => $request->info]);        

        return response()->json(['success'=>'Customer saved successfully!']);
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Customer  $Customer
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $Customer = Customer::find($id);
        return response()->json($Customer);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Customer  $Customer
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        Customer::find($id)->delete();

        return response()->json(['success'=>'Customer deleted!']);
    }
}

Generando un modelo de base de datos Laravel 7

A continuación, generemos un Customermodelo de base de datos usando el siguiente comando:

$ php artisan make:model Customer

A continuación, abra el app/Customer.phparchivo y actualícelo de la siguiente manera:

<?php

namespace  App;

use  Illuminate\Database\Eloquent\Model;

class  Customer  extends  Model{

    protected $fillable =  [

        'firstName', 'lastName', 'info'

    ];

}

Paso 7: agregar una vista de plantilla Blade

A continuación, dentro de la resources/views/carpeta, cree el customer.blade.phparchivo y actualícelo de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 6 Ajax CRUD Example</title>
    <meta name="csrf-token" content="">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Laravel 6 Ajax CRUD </h1>
    <a class="btn btn-success" href="javascript:void(0)" id="createNewCustomer"> Create New Customer</a>
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Details</th>
                <th width="280px">Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<div class="modal fade" id="ajaxModel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelHeading"></h4>
            </div>
            <div class="modal-body">
                <form id="CustomerForm" name="CustomerForm" class="form-horizontal">
                   <input type="hidden" name="Customer_id" id="Customer_id">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Details</label>
                        <div class="col-sm-12">
                            <textarea id="detail" name="detail" required="" placeholder="Enter Details" class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="col-sm-offset-2 col-sm-10">
                     <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes
                     </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
  $(function () {

      $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
    });

    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'firstName', name: 'firstName'},
            {data: 'lastName', name: 'lastName'},
            {data: 'info', name: 'info'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    $('#createNewCustomer').click(function () {
        $('#saveBtn').val("create-Customer");
        $('#Customer_id').val('');
        $('#CustomerForm').trigger("reset");
        $('#modelHeading').html("Create New Customer");
        $('#ajaxModel').modal('show');
    });

    $('body').on('click', '.editCustomer', function () {
      var Customer_id = $(this).data('id');
      $.get("" +'/' + Customer_id +'/edit', function (data) {
          $('#modelHeading').html("Edit Customer");
          $('#saveBtn').val("edit-user");
          $('#ajaxModel').modal('show');
          $('#Customer_id').val(data.id);
          $('#name').val(data.name);
          $('#detail').val(data.detail);
      })
   });

    $('#saveBtn').click(function (e) {
        e.preventDefault();
        $(this).html('Sending..');

        $.ajax({
          data: $('#CustomerForm').serialize(),
          url: "",
          type: "POST",
          dataType: 'json',
          success: function (data) {

              $('#CustomerForm').trigger("reset");
              $('#ajaxModel').modal('hide');
              table.draw();

          },
          error: function (data) {
              console.log('Error:', data);
              $('#saveBtn').html('Save Changes');
          }
      });
    });

    $('body').on('click', '.deleteCustomer', function () {

        var Customer_id = $(this).data("id");
        confirm("Are You sure want to delete !");

        $.ajax({
            type: "DELETE",
            url: ""+'/'+Customer_id,
            success: function (data) {
                table.draw();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });

  });
</script>
</html>

Paso 8: Servicio de la aplicación Laravel 7

Regrese a su terminal y ejecute el siguiente comando:

$ php artisan serve

A continuación, abra su navegador web y navegue hasta el http://localhost:8000/customersarchivo.

Eso es todo, hemos terminado nuestra aplicación Laravel 7/6 Ajax CRUD donde hemos visto cómo usar jQuery para enviar solicitudes Ajax e implementar una interfaz CRUD para trabajar con una base de datos MySQL.

Publicar un comentario

0 Comentarios