Participantes:

Abel Colmenarez
Francis Sequera
Geholin Colmenarez
IN3111
U. C.: Electiva III
Profesor: Ing. Carlos Soto

BARQUISIMETO, NOVIEMBRE DEL 2019

 Configuración inicial Laravel 6.2

Luego de iniciado la instalación del Laravel con el comando: composer global

require “laravel/installer”.

Luego de haber hecho la instalación global. Desde nuestra línea de comando

nos posicionamos en el directorio de nuestro servidor de la siguiente forma.

Y creamos nuestro nuevo proyecto que en nuestro caso se llamara

pruebaLogin.

Luego debemos instalar el Front End UI Vue para habilitar las vistas del
resource y se hace de la siguiente forma.

Después de ejecutar la instalación del Front End UI Vue debemos establecer

las rutas de autenticación, para ello ejecutamos el siguiente comando.
Luego debemos crear las vistas vue para poder implementar la librería
bootstrap de la siguiente forma

NOTA: En caso de pedir sustitución de los archivos creados por el comando

composer require laravel/ui presione yes en cada petición para aplicar los
cambios y habilitar el uso del vue y bootstrap para las vistas en blade.

Después procedemos a instalar las librerías de bootstrap y vue a través del

comando node npm y ejecutamos la compilación de la siguiente forma.

Luego de haber culminado nuestra etapa de instalación podremos ejecutar el

servidor para poder ver los primeros resultados de laravel, esto lo hacemos de
la siguiente forma.
 CÓMO CREAR UN LOGIN PERSONALIZADO EN LARAVEL 6.2

Primero debemos realizar la instalación de nuestra carpeta Laravel, luego de

ello debemos crear un nuevo archivo el cuál llamaremos “login.blade.php”,
este lo guardaremos dentro de la carpeta “resources/views/auth” de la
siguiente forma.

Luego empezaremos a definir nuestro login utilizando el gestor de plantillas

Blade que viene integrado con Laravel y, a su vez, Bootstrap para
proporcionarle estilo a nuestro formulario de inicio de sesión.

@extends('layouts.app')

@section('content')

<div class="container" style="height: auto;">

<div class="row align-items-center">

<div class="col-lg-4 col-md-6 col-sm-8 ml-auto mr-auto">

<form class="form" method="POST" action="{{ route('login') }}">

@csrf

<div class="card card-login card-hidden mb-3">

<div class="card-header card-header-primary text-center">

<h4 class="card-title"><strong>{{ __('Iniciar Sesión') }}</strong></h4>

</div>

<div class="card-body">

<p class="card-description text-center">{{ __('Utilice su cuenta de usuario

afiliada.') }}</p>

<div class="bmd-form-group{{ $errors->has('email') ? ' has-danger' : '' }}">

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="fas fa-user"></i>

</span>

</div>

<input type="text" name="username" id="username" class="form-control

@error('username') is-invalid @enderror" placeholder="{{ __('Ingrese su usuario') }}"
autocomplete="username" value="{{ old('username') }}" required autofocus>

</div>

@error('username')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

<div class="bmd-form-group{{ $errors->has('password') ? ' has-danger' : '' }} mt-3">

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="fas fa-lock"></i>

</span>
</div>

<input type="password" name="password" id="password" class="form-control

@error('password') is-invalid @enderror" placeholder="{{ __('Ingrese su contraseña') }}"
required autocomplete="current-password">

</div>

@error('password')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

<div class="form-check mr-auto ml-3 mt-3">

<label class="form-check-label">

<input class="form-check-input" type="checkbox" name="remember" {{

old('remember') ? 'checked' : '' }}> {{ __('Recordar mis datos') }}

<span class="form-check-sign">

<span class="check"></span>

</span>

</label>

</div>

</div>

<div class="card-footer justify-content-center">

<button type="submit" class="btn btn-primary btn-lg btn-block">{{ __('Acceder')

}}</button>

<div class="col-md-8 offset-md-2">

@if (Route::has('password.request'))

<a class="btn btn-link" href="{{ route('password.request') }}">

{{ __('¿Olvide mi contraseña?') }}

</a>

@endif

</div>

</div>

</div>

</form>
 </div>

</div>

</div>

@endsection

Luego de terminar, debemos dirigirnos al archivo de migración de la tabla

“users” donde añadiremos un nuevo campo de tipo string con una extensión
de 8 caracteres el cual llamaremos “username”, el archivo lo ubicamos en la
carpeta “database/migrations” este lleva de nombre
“2014_10_12_000000_create_users_table.php”, añadiremos el campo de la
siguiente forma.

Localizaremos la línea de código 17 “$table->string(‘name’);”, daremos un

“Enter” y debajo de esta haremos lo siguiente.
Agregaremos la línea de código “$table->string(‘username’, 8)->unique();”,
en esta línea estaremos indicando que crearemos un campo llamado
username y será de tipo string con una extensión de 8 caracteres como
máximo, y haciendo apuntación al método unique() estamos indicando que
será de tipo único.

Luego de esto ejecutaremos el comando en cmd “php artisan migrate” de esta

forma.

Al presionar Enter obtendremos el siguiente resultado dentro de nuestro

MySQL que se nos ha creado dentro de nuestra base de datos Laravel las
tablas: “failed_jobs”, “migrations”, “passwords_resets” y “users”.
Al inspeccionar la estructura de nuestra tabla “users” podremos notar que
poseemos un campo adicional llamado “username” y es de tipo varchar con
una extensión de 8 caracteres y, a su vez, es único tal cual lo definimos en el
archivo de migración de la tabla usuario.

Luego de esto, ubicaremos el archivo “AuthenticatesUsers.php” que se

encuentra contenido en el directorio
“vendor/laravel/framework/src/Illuminate/Foundation/Auth/” donde
ubicaremos la línea de código 147 donde ubicaremos lo siguiente “return
‘email’;”.
Comentaremos la línea 147 utilizando un “#” al inicio de la línea, luego haremos
Enter y escribiremos la nueva línea de código “return ‘username’;”, esto
permitirá a Laravel implementar el nuevo campo “username” para poder
logear a los usuarios con su respectivo username.

Para culminar esta etapa, modificaremos el home para crear una pantalla
personalizada para confirmar que nuestro login está funcionando. Para ello
ubicaremos el archivo “home.blade.php” dentro de la carpeta
“resources/views” y escribiremos lo siguiente:

@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">Mi Perfil</div>

 <div class="card-body">

@if (session('status'))

<div class="alert alert-success" role="alert">

{{ session('status') }}

</div>

@endif

<h5 class="panel-title">Bienvenido <strong>{{ Auth::user()->name

}}</strong></h5>

<h6 class="panel-title"><strong>Correo: </strong>{{ Auth::user()->email

}}</h6>

</div>

<div class="card-footer justify-content-center">

<a class="btn btn-danger btn-lg btn-block" href="{{ route('logout') }}"

onclick="event.preventDefault();

document.getElementById('logout-form').submit();">

{{ __('Cerrar Sesión') }}

</a>

</div>

</div>

</div>

</div>

</div>

@endsection

Luego de esto ya podremos ejecutar nuestro servidor con el comando “php

artisan serve” y podremos probar nuestro login.
Luego Ingresamos el usuario y contraseña que registramos previamente en
nuestra base de datos.

Luego de presionar acceder debe llevarnos a nuestra pantalla de home.

• NOTA: Para que se nos muestren los siguientes iconos.
Lo que debemos hacer es dirigirnos a https://fontawesome.com/how-to-use/on-the-
web/setup/hosting-font-awesome-yourself y descargar el pack de inconos para la web.

Al hacer esto nos dejará un archivo comprimido de esta forma.

Abrimos el archivo comprimido de la siguiente forma y seleccionaremos la
carpeta “css” y la carpeta “webfonts” y extraeremos sin pedir confirmación.

Esto nos dejará las 2 carpetas seleccionadas de esta forma.

Copiaremos esas carpetas y luego nos dirigiremos a la carpeta de nuestro
proyecto Laravel, ubicaremos el siguiente directorio “public/css” donde
procederemos a pegar ambas carpetas.

Ahora procederemos a renombrar la carpeta “css” y le colocaremos

“fontawesome”.

Ahora desde nuestro Sublime Text procederemos a ubicar el archivo “app.css”

que se encuentra contenido dentro de la carpeta “public/css”.
En él, procederemos a colocar la siguiente línea de código justo en la línea 2,
“@import url(fontawesome/all.css);”, esta línea importará la hoja de estilo
de fontawesome permitiéndonos utilizar el pack de iconos dentro de nuestras
vistas.
 • NOTA 2 : En caso que nuestras vistas no reflejen los cambios
realizados, dirigirse a la terminal o cmd y escribiremos primero el
comando:
“php artisan cache:clear” el cuál limpiará la cache de Laravel.

“php artisan view:clear” El cuál limpiará las vistas almacenadas en

caché de Laravel.

AUTO REGISTRO DE USUARIOS EN LARAVEL

Las ventajas de Laravel 6.2 en cuanto a registro de usuario es su simplicidad de integración y

elaboración, en este caso crearemos el formulario y modificaremos el Controlador respectivo
del módulo de registro de usuarios para integrar un campo adicional, el cual, en el inicio de
sesión “login” implementamos para proporcionar una forma de iniciar sesión distinta
utilizando un nombre de usuario único en vez de un correo electrónico. Para ello debemos
seguir la siguiente serie de pasos:

Primero creamos una vista llamada “register.blade.php” y lo guardaremos dentro de la

carpeta “resources/views/auth” de la siguiente forma.
En el archivo que creamos escribiremos el siguiente código:

ntainer">

<div class="row justify-content-center">

<div class="col-md-8">

<div class="card">

<div class="card-header">{{ __('Registrarse') }}</div>

<div class="card-body">

<form method="POST" action="{{ route('register') }}">

@csrf

<div class="form-group row">

<label for="name" class="col-md-4 col-form-label text-md-right">{{

__('Nombre') }}</label>

<div class="col-md-6">

<input id="name" type="text" class="form-control @error('name') is-

invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name"
autofocus>
 @error('name')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row">

<label for="name" class="col-md-4 col-form-label text-md-right">{{

__('Usuario') }}</label>

<div class="col-md-6">

<input id="username" type="text" class="form-control

@error('username') is-invalid @enderror" name="username" value="{{ old('username') }}"
required autocomplete="username" autofocus>

@error('username')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row">

<label for="email" class="col-md-4 col-form-label text-md-right">{{

__('Correo Electrónico') }}</label>

<div class="col-md-6">
 <input id="email" type="email" class="form-control @error('email') is-
invalid @enderror" name="email" value="{{ old('email') }}" required
autocomplete="email">

@error('email')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row">

<label for="password" class="col-md-4 col-form-label text-md-right">{{

__('Contraseña') }}</label>

<div class="col-md-6">

<input id="password" type="password" class="form-control

@error('password') is-invalid @enderror" name="password" required
autocomplete="new-password">

@error('password')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row">

<label for="password-confirm" class="col-md-4 col-form-label text-md-

right">{{ __('Confirmar Contraseña') }}</label>
 <div class="col-md-6">

<input id="password-confirm" type="password" class="form-control"

name="password_confirmation" required autocomplete="new-password">

</div>

</div>

<div class="form-group row mb-0">

<div class="col-md-6 offset-md-4">

<button type="submit" class="btn btn-primary">

{{ __('Registrarse') }}

</button>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

@endsection

Luego que creemos la vista, procedemos a localizar el archivo “User.php” ubicado en la

carpeta “app”, allí ubicaremos las líneas de código 18, 19 y 20 donde contemplaremos un
arreglo:

“protected $fillable = [

'name', 'email', 'password',

];”
Luego de haber ubicado las líneas de código, exactamente en la línea 19 luego de “‘name’”
añadiremos el campo “’username’”, esto con la finalidad de utilizar el campo añadido
username dentro de nuestra tabla users.
 AUTENTICACIÓN DE USUARIOS Y CAMBIAR CONTRASEÑA

Para estas funciones es necesario realizar una configuración adicional en cuanto al envío de
correos electrónicos mediante smtp, en este caso utilizaremos mailtrap, para ello nos dirigimos
al enlace de la página oficial http://mailtrap.io.

Luego nos dirigimos al registro “Sing up”, en este apartado nos permite registrarnos con
cuentas de Google, GitHub o un registro normal.
Luego del registro y su respectiva verificación, mailtrap nos proporciona unas credenciales las
cuales nos servirán para configurar la información de envío de correos electrónicos en laravel.

Dichas credenciales las configuraremos en el archivo “.env” el cuál se ubica en la raíz de

nuestra carpeta del proyecto.
Luego de configurar, nos dirigimos al archivo “User.php” ubicado en la carpeta “app”, en este
nos fijaremos en la línea de código 6 “use Illuminate\Foundation\Auth\User as
Authenticatable;”, esto nos permitirá implementar dicha interface que nos permitirá realizar
la autenticación de los usuarios y la Modificación de la contraseña.

En la línea 9 colocaremos la implementación de la interfaz colocando “implements

Authenticatable” de la siguiente forma.
Luego de ello, nos dirigimos al archivo “web.php” en la carpeta “routes” y localizamos la línea
19 “Auth::routes();” y la línea 21 “Route::get('/home', 'HomeController@index')-
>name('home');”.

En la línea 19 agregaremos el arreglo de verificación como parámetro dentro del método

“routes();” de la siguiente forma “Auth::r outes(['verify' => true]);”, luego nos dirigimos a la
línea 21 y añadiremos el nuevo middleware de autenticación el cual permitirá acceder a los
usuarios autenticados únicamente, esto lo hacemos de la siguiente forma
“Route::get('/home', 'HomeController@index')->name('home')->middleware('verified');”.

De esta manera nuestro Laravel está completamente configurado para poder realizar la
autenticación de usuarios y recuperar contraseña. A continuación, procedemos a elaborar las
vistas de autenticación de usuario, para ello crearemos un nuevo archivo el cual llamaremos
“verify.blade.php” y lo guardaremos dentro de la carpeta “resources/views/auth” y
escribiremos el siguiente código:

@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">{{ __('Verificacón de Correo Electrónico') }}</div>

<div class="card-body">

@if (session('resent'))
 <div class="alert alert-success" role="alert">

{{ __('Se ha enviado un nuevo enlace de verificación a su dirección de

correo electrónico.') }}

</div>

@endif

{{ __('Antes de continuar, revise su correo electrónico para obtener un

enlace de verificación.') }}

{{ __('Si no recibiste el correo electrónico') }},

<form class="d-inline" method="POST" action="{{ route('verification.resend')

}}">

@csrf

<button type="submit" class="btn btn-link p-0 m-0 align-baseline">{{

__('Haga click aquí para solicitar otro') }}</button>.

</form>

</div>

</div>

</div>

</div>

</div>

@endsection

De esta forma ya nuestra autenticación de Usuario se encentra funcionando, al realizar

pruebas debemos revisar en nuestro correo mailtrap donde podremos ver un correo de Laravel
donde nos envía un enlace de autenticación de usuario.
Para concluir, crearemos los archivos para realizar la Restauración de Contraseña, para ello
comenzamos creando un archivo al cuál llamaremos “reset.blade.php” y lo almacenaremos
dentro de la carpeta “sources/views/auth/password” y crearemos la siguiente vista:

@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">{{ __('Cambiar Contraseña') }}</div>

<div class="card-body">

<form method="POST" action="{{ route('password.update') }}">

@csrf

<input type="hidden" name="token" value="{{ $token }}">

<div class="form-group row">

<label for="email" class="col-md-4 col-form-label text-md-right">{{

__('Correo Electrónico') }}</label>

<div class="col-md-6">

<input id="email" type="email" class="form-control @error('email') is-

invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required
autocomplete="email" autofocus>

@error('email')

<span class="invalid-feedback" role="alert">

 <strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row">

<label for="password" class="col-md-4 col-form-label text-md-right">{{

__('Contraseña') }}</label>

<div class="col-md-6">

<input id="password" type="password" class="form-control

@error('password') is-invalid @enderror" name="password" required
autocomplete="new-password">

@error('password')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row">

<label for="password-confirm" class="col-md-4 col-form-label text-md-

right">{{ __('Confirmar Contraseña') }}</label>

<div class="col-md-6">

<input id="password-confirm" type="password" class="form-control"

name="password_confirmation" required autocomplete="new-password">

</div>

</div>
 <div class="form-group row mb-0">

<div class="col-md-6 offset-md-4">

<button type="submit" class="btn btn-primary">

{{ __('Cambiar Contraseña') }}

</button>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

@endsection

Luego de esto crearemos otro archivo llamado “email.blade.php” y lo almacenaremos en

“resources/views/auth/password” donde crearemos la siguiente vista:

@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">{{ __('Recuperar Contraseña') }}</div>

<div class="card-body">

@if (session('status'))
<div class="alert alert-success" role="alert">

{{ session('status') }}

</div>

@endif

<form method="POST" action="{{ route('password.email') }}">

@csrf

<div class="form-group row">

<label for="email" class="col-md-4 col-form-label text-md-right">{{

__('Correo Electrónico') }}</label>

<div class="col-md-6">

<input id="email" type="email" class="form-control @error('email') is-

invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email"
autofocus>

@error('email')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row mb-0">

<div class="col-md-6 offset-md-4">

<button type="submit" class="btn btn-primary">

{{ __('Enviar enlace') }}

</button>

</div>
 </div>

</form>

</div>

</div>

</div>

</div>

</div>

@endsection

Por último, elaboraremos un último archivo llamado “confirm.blade.php” almacenado en

“resources/views/auth/password” y crearemos nuestra última interfaz:

@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">{{ __('Confirmar Contraseña') }}</div>

<div class="card-body">

{{ __('Por favor confirme su contraseña antes de continuar.') }}

<form method="POST" action="{{ route('password.confirm') }}">

@csrf
 <div class="form-group row">

<label for="password" class="col-md-4 col-form-label text-md-right">{{

__('Contraseña') }}</label>

<div class="col-md-6">

<input id="password" type="password" class="form-control

@error('password') is-invalid @enderror" name="password" required
autocomplete="current-password">

@error('password')

<span class="invalid-feedback" role="alert">

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

</div>

<div class="form-group row mb-0">

<div class="col-md-8 offset-md-4">

<button type="submit" class="btn btn-primary">

{{ __('Confirmar Contraseña') }}

</button>

@if (Route::has('password.request'))

<a class="btn btn-link" href="{{ route('password.request') }}">

{{ __('¿Olvidó su cntraseña?') }}

</a>

@endif

</div>
 </div>

</form>

</div>

</div>

</div>

</div>

</div>

@endsection

Para finalizar probaremos el funcionamiento de nuestra interfaz de restauración de

contraseña queda de la siguiente forma.

Al enviar el correo nos dirigimos a mailtrap y podremos confirmar que en nuestra bandeja de
entrada se encontrará el correo para realizar el cambio de contraseña.