Curso de Laravel 5 y Vue.js [desde cero] - Español - Parte II (Autenticación)

---

Curso Laravel 5 desde cero #15 Autenticación [Práctica rutas protegidas]

Resumen:

• Crear proyecto para utilizar Laravel dentro de la carpeta htdocs del directorio xampp.
• Ver documentos sobre autenticación en Laravel.
• Ubicados en la carpeta de proyecto, instalar paquetes de Laravel: $ laravel new autenticacion.
• Para crear la autenticación de nuestro proyecto escribimos en la línea de comando: $ composer require laravel/ui.
• Luego ingresamos en línea de comando: $ php artisan ui vue --auth (La forma en como se indica en el vídeo ya está desactualizada.). Esta acción modifica el archivo de rutas y genera algunas vistas, también genera un nuevo controlador llamado HomeController.php.

NOTA: Este comando debe usarse en aplicaciones nuevas e instalará una vista de diseño, vistas de registro e inicio de sesión, así como rutas para todos los puntos finales de autenticación. A HomeController también se generará para manejar las solicitudes posteriores al inicio de sesión en el tablero de su aplicación.

• Crear base de datos en MySQL (yo llamaré laravel a la BD).
• Ir a archivo .env en la raíz del proyecto para ajustar la conexión a la base de datos.

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

• Configurar AppServiceProvider, para esto modificamos el archivo AppServiceProvider.php que se encuentra en app/Providers:

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191);
    }
}

• Crearemos un modelo y su migración mediante la siguiente línea de comando: 

$ php artisan make:model Nota -m 

Importante: que la primera letra del nombre Nota este en mayúscula y en singular, el parámetro -m es para crear de una vez la migración.

• Ubicamos la migración que se acaba de generar ubicada en database/migrations, con un nombre parecido a este:  2020_07_25_233859_create_notas_table.php, y lo modificamos como se indica:

<?php

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

class CreateNotasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('notas', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nombre');
            $table->text('descripcion');
            $table->text('usuario');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('notas');
    }
}

• Ejecutamos la migración con: $ php artisan migrate.
• Para generar el CRUD automaticamente introducimos en la línea de comando: $ php artisan make:controller NotaController --resource.
• Agregamos la siguiente ruta en el archivo web.php, ubicado en routes; 

Route::resource('/notas', 'NotaController');

• Modificamos en controlador NotaController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Nota;

class NotaController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        // return auth()->user();
        $usuarioEmail = auth()->user()->email;
        $notas = Nota::where('usuario', $usuarioEmail)->paginate(5);
        return view('notas.lista', compact('notas'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('notas.crear');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $nota = new Nota();
        $nota->nombre = $request->nombre;
        $nota->descripcion = $request->descripcion;
        $nota->usuario = auth()->user()->email;
        $nota->save();

        return back()->with('mensaje', 'Nota Agregada!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

• En resources/views creamos una carpeta llamada notas, y en esta carpeta un archivo llamado lista.blade.php, y codificamos como se indica:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>Lista de Notas para {{ auth()->user()->name }}</span>
                        <a href="/notas/create" class="btn btn-primary btn-sm">Nueva Nota</a>
                    </div>

                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th>
                                    <th scope="col">Descripción</th>
                                    <th scope="col">Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($notas as $item)
                                    <tr>
                                        <th scope="row">{{ $item->id }}</th>
                                        <td>{{ $item->nombre }}</td>
                                        <td>{{ $item->descripcion }}</td>
                                        <td>Acción</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $notas->links() }}
                        {{-- fin card body --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

• En resources/views/notas creamos una vista de nombre crear.blade.php, y codificamos como se indica:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>Agregar Nota</span>
                        <a href="/notas" class="btn btn-primary btn-sm">Volver a lista de notas...</a>
                    </div>
                    <div class="card-body">
                        @if(session('mensaje'))
                            <div class="alert alert-success">{{ session('mensaje') }}</div>
                        @endif
                        <form method="POST" action="/notas">
                            @csrf
                            <input type="text" name="nombre" placeholder="Nombre" class="form-control mb-2" />
                            <input type="text" name="descripcion" placeholder="Descripcion" class="form-control mb-2" />
                            <button class="btn btn-primary btn-block" type="submit">Agregar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

• En el archivo controlador LoginController.php es donde se indica a donde se redirecciona cuando se inicia sesión (cambiando la instrucción "protected $redirectTo = RouteServiceProvider::HOME;" por "protected $redirectTo = '/notas';", al iniciar sesión, se redirigirá notas).
• Ir a la guía de Laravel desarrollada por Ignacio Gutierrez.

Nota: En caso de presentar problemas con bootstrap, en el archivo resources/views/layouts/app.blade.php se pueden insertar los CDN de la página de Bootstrap.