Pasos para crear una plantilla Laravel 7 con autenticación y DataTables en Soluciones++

Parte I: Creación del proyecto con los componentes de Autenticación y DataTables.

Crear proyecto Laravel ejecutando en terminal:

$ composer create-project --prefer-dist laravel/laravel NombreProyecto

Configurar conexión a la base de datos y dar nombre a la aplicación editando el archivo .env:

APP_NAME=MiNombreDeApp

*****

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel

DB_USERNAME=root

DB_PASSWORD=clave

Para crear autenticación ejecutamos en terminal:

$ composer require laravel/ui

Para configurar los archivos de rutas, vistas y crear controlador (HomeController.php), ejecutamos en terminal:

$ php artisan ui vue --auth

Par instalar DataTables ejecutamos en terminal:

$ composer require yajra/laravel-datatables-oracle:"~9.0"

Agregaremos el siguiente código a config/app.php:

    /* 'name' => env('APP_NAME', 'Genealogía Sefar'), */
    'name' => 'Nombre de mi aplicación',
******
    'providers' => [
******

        Yajra\Datatables\DatatablesServiceProvider::class,
    ],
******

    'aliases' => [
******

        'Datatables' => Yajra\Datatables\Facades\Datatables::class,
    ],

Agregaremos el siguiente código a app/Providers/AppServiceProvider.php:

*****
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;
*****

    public function boot()
    {
        Schema::defaultStringLength(191);
    }
*****

Ejecute los siguientes comandos para publicar el vendor y volver a compilar el laravel después de instalar DataTables.

$ php artisan vendor:publish

$ composer dump-autoload

Si deseas usar algún Framework como Bootstrap, puedes agregar los CDN en resources/views/layouts/app.blade.php. Este archivo también puedes personalizarlo para establecer estilos y script, y como el nombre de su carpeta contenedora lo dice también podrá servir de plantilla.
Personaliza el archivo resources/views/welcome.blade.php según las exigencias de tu aplicación.
Modificar los siguientes archivos para personalizarlos según las exigencias del proyectos:

resources/views/auth/login.blade.php.
resources/views/auth/register.blade.php.
resources/views/auth/verify.blade.php.
resources/views/auth/passwords/comfirm.blade.php.
resources/views/auth/passwords/email.blade.php.
resources/views/auth/passwords/reset.blade.php.

Nota: Ya en este punto, en caso de tener la tabla users creada en MySQL nuestro aplicación tendrá la apariencia externa deseada y un sistema de atenticación completamente funcional. En caso de no tener la tabla users creada se deberá a proceder a ejecutar las migraciones como se indica en el siguiente punto.

En caso de no tener la tabla users creada en MySQL ejecutar la siguiente instrucción en terminal para realizar la migración.

$ php artisan migrate

Parte II: Configuración del CRUD.

Nota: Las migraciones en Laravel son "copiadas" de RoR (Ruby on Rails). Si bien no es obligatorio su uso (puedes manejar tu DB vía PHPMyAdmin), su fin principal es llevar un versionamiento de la base de datos de tu sistema y poder administrarla de manera organizada y estructurada. Las migraciones eliminan la necesidad de escribir SQL para crear, modificar o eliminar tablas, por lo que independiente si trabajas con MySQL, SQL Server, SQLite o Postgres la forma de escribir tus migraciones siempre va a ser la misma, y es Laravel quien se encarga de generar las consultas correspondientes para cada tipo de base de datos (URL fuente).

Para crear un modelo y su migración ejecutamos en terminal:

$ php artisan make:model Tabla -m

Nota: la primera letra del nombre Tabla (o el nombre de la tabla que elegiste) deberá estar en mayúscula y en singular, el parámetro -m es para crear de una vez la migración.

Al ejecutar el paso anterior se creará la migración en database/migrations, con un nombre parecido a este: 2020_07_25_233859_create_tablas_table.php, y lo modificamos como se indica:

    public function up()
    {
        Schema::create('tablas', function (Blueprint $table) {
            /* $table->id(); */

            $table->bigIncrements('id');
            $table->string('Campo1');
            $table->text('Campo2');
            $table->date('Campo3');
            $table->integer('Campo4');

            $table->timestamps();
        });
    }

Nota: En la documentación de Laravel se pueden ver los tipos de columnas disponibles.

Para crear la tabla en MySQL ejecutamos en terminal nuevamente:

$ php artisan migrate

Para generar el CRUD automáticamente ejecutamos en terminal:

$ php artisan make:controller TablaController --resource

Nota: Esta acción generará un controlador de nombre: app/Http/Controllers/TablaControllers.php.

Modificamos el controlador que se acaba de generar (app/Http/Controllers/TablaControllers.php) como se indica:

*****
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Tabla;
use DataTables;
use Redirect,Response;

class TablaController extends Controller
*****
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = Tabla::latest()->get();
            return Datatables::of($data)
            ->addIndexColumn()
            ->addColumn('action', function($row){          
                $action = 
                '
                    <a class="btn btn-info" id="show-registro" data-toggle="modal" data-id='.$row->id.'>Mostar</a>
                    <a class="btn btn-success" id="edit-registro" data-toggle="modal" data-id='.$row->id.'>Editar</a>
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <a id="delete-registro" data-id='.$row->id.' class="btn btn-danger delete-user">Borrar</a>
                ';
                return $action;
            })
            ->rawColumns(['action'])
            ->make(true);
        }       
        return view('tablas');
    }
*****
    public function store(Request $request)
    {
        $r=$request->validate([
            'Campo1' => 'required',
            'Campo2' => 'required',  
        ]);
        $uId = $request->tabla_id;
        Tabla::updateOrCreate(['id' => $uId],['Campo1' => $request->Campo1, 'Campo2' => $request->Campo2]);
        if(empty($request->tabla_id))
            $msg = 'Registro creado satisfactoriamente.';
        else
            $msg = 'Registro actualizado satisfactoriamente';
        return redirect()->route('tablas.index')->with('success',$msg);
    }
*****
    public function show($id)
    {
        $where = array('id' => $id);
        $tabla = Tabla::where($where)->first();
        return Response::json($tabla);
        //return view('tablas.show',compact('tabla'));
    }
*****
    public function edit($id)
    {
        $where = array('id' => $id);
        $tabla = Tabla::where($where)->first();
        return Response::json($tabla);
    }
*****
    public function destroy($id)
    {
        $tabla = Tabla::where('id',$id)->delete();
        return Response::json($tabla);
        //return redirect()->route('tablas.index');
    }
*****

Agregamos las siguientes rutas en routes/web.php:

*****
Route::resource('tablas','TablaController');
Route::get('tablas/{id}/edit/','TablaController@edit');
*****

Crear un archivo blade llamado resources/views/tablas.blade.php y codificar lo siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 CRUD usando Datatables</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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>
    <script>
        error=false
        function validate(){
            if(document.registroForm.Campo1.value !='' && document.registroForm.Campo2.value !='' )
                document.registroForm.btnsave.disabled=false
            else
                document.registroForm.btnsave.disabled=true
            }
    </script>
</head>
<body>
    <div class="container">
        <h1>Laravel 7 - CRUD usando DataTables</h1>
        <br/>
        <div class="row">
            <div class="col-lg-12 margin-tb">
                <div class="pull-right">
                    <a class="btn btn-success mb-2" id="new-registro" data-toggle="modal">Nuevo Registro</a>
                </div>
            </div>
        </div>
        <table class="table table-bordered data-table" >
            <thead>
                <tr id="">
                    <th width="5%">No</th>
                    <th width="5%">Id</th>
                    <th width="30%">Campo 1</th>
                    <th width="30%">Campo 2</th>
                    <th width="20%">Acción</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- Ventana Modal de añadir y editar -->
    <div class="modal fade" id="crud-modal" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="tablaCrudModal"></h4>
                </div>
                <div class="modal-body">
                    <form name="registroForm" action="{{ route('tablas.store') }}" method="POST">
                        <input type="hidden" name="tabla_id" id="tabla_id" >
                        @csrf
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <strong>Campo 1:</strong>
                                    <input type="text" name="Campo1" id="Campo1" class="form-control" placeholder="Campo 1" onchange="validate()" >
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <strong>Campo 2:</strong>
                                    <input type="text" name="Campo2" id="Campo 2" class="form-control" placeholder="Campo 2" onchange="validate()">
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                                <button type="submit" id="btn-save" name="btnsave" class="btn btn-primary" disabled>Guardar</button>
                                <a href="{{ route('tablas.index') }}" class="btn btn-danger">Cancelar</a>
                            </div>
                        </div>                          
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Ventana Modal mostrar registro -->
    <div class="modal fade" id="crud-modal-show" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="tablaCrudModal-show"></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-2 col-sm-2 col-md-2"></div>
                        <div class="col-xs-10 col-sm-10 col-md-10 ">
                            <table class="table-responsive ">
                                <tr height="50px">
                                    <td><strong>Campo 1:</strong></td>
                                    <td id="sCampo1"></td>
                                </tr>
                                <tr height="50px">
                                    <td><strong>Campo 2:</strong></td>
                                    <td id="sCampo2"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td style="text-align: right ">
                                        <a href="{{ route('tablas.index') }}" class="btn btn-danger">OK</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('tablas.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'id', name: 'id'},
                {data: 'Campo1', name: 'Campo1'},
                {data: 'Campo2', name: 'Campo2'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });
        /* Clic en el botón nuevo registro */
        $('#new-registro').click(function () {
            $('#btn-save').val("create-tabla");
            $('#tabla').trigger("reset");
            $('#tablaCrudModal').html("Add New User");
            $('#crud-modal').modal('show');
        });
        /* Editar registro */
        $('body').on('click', '#edit-registro', function () {
            var tabla_id = $(this).data('id');
            $.get('tablas/'+tabla_id+'/edit', function (data) {
                $('#tablaCrudModal').html("Edit User");
                $('#btn-update').val("Update");
                $('#btn-save').prop('disabled',false);
                $('#crud-modal').modal('show');
                $('#tabla_id').val(data.id);
                $('#Campo1').val(data.Campo1);
                $('#Campo2').val(data.Campo2);
            })
        });
        /* Mostrar registro */
        $('body').on('click', '#show-registro', function () {
            var tabla_id = $(this).data('id');
            $.get('tablas/'+tabla_id, function (data) {
                $('#sCampo1').html(data.Campo1);
                $('#sCampo2').html(data.Campo2);
            })
            $('#tablaCrudModal-show').html("User Details");
            $('#crud-modal-show').modal('show');
        });
        /* Borrar registo */
        $('body').on('click', '#delete-registro', function () {
            var tabla_id = $(this).data("id");
            var token = $("meta[name='csrf-token']").attr("content");
            confirm("¿Está seguro que quiere eliminar el registro?");
            $.ajax({
                type: "DELETE",
                url: "tablas/"+tabla_id,
                data: {
                    "id": tabla_id,
                    "_token": token,
                },
                success: function (data) {
                    //$('#msg').html('Customer entry deleted successfully');
                    //$("#customer_id_" + tabla_id).remove();
                    table.ajax.reload();
                },
                error: function (data) {
                    console.log('Error:', data);
                }
            });
        });
    });
</script>
</html>

Nota: está pendiente resolver algunos detalles en el funcionamiento de las ventanas modales.

Buscar este blog

Soluciones++