Publicacion de Laravel

Integrantes:

-Bessy Yolany Zavala Galdamez

-Carlos Eduardo Mejia Galeas

-David Enrrique Mejia Velasquez

-Michael Josue Figueroa Padilla

AUTENTICACIÓN DE USUARIOS  CON DATOS PERSONALES

La autenticación en Laravel es un proceso que nos permite comprobar que el usuario es quien dice ser, por medio de un nombre de usuario o una dirección de e-mail y una contraseña.

Antes de todo esto tiene que tener descargado composer, y  laravel 5.4
Lo que haremos es:
Descargaremos una plantilla  
Crearemos un proyecto de Laravel desde la consola
Crearemos una base de datos en MySQL Workbench 

Primero verificaremos que tengamos descargado laravel desde la consola

Ahora verificaremos que tengamos descargado composer:

 una vez asegurados que contamos con Laravel y composer  iremos a descargar  la plantilla:
Clic aqui--> Descargar la Plantilla , de inmediato te llevara a la pagina donde se encuentra la plantilla con la cual estaremos trabajando. Y daremos Clic en Download.

Al ya haberse descargado la plantilla, Nos vamos a la carpeta de descargas, seleccionamos la plantilla que hemos descargado  damos clic derecho y le damos clic  la opción 'extraer aquí', después de eso nos creara una carpeta, la cual la copiaremos a la carpeta 'htdocs' de 'XAMPP' y esta se encuentra en 'disco local c':

Ahora crearemos el proyecto de Laravel desde la Consola (cmd)
para ello abriremos el cmd e ingresaremos lo siguiente:
el cd c:\xampp\htdocs es ubicación de donde queremos que se instale el nuevo proyecto, que cuyo nombre sera de hoja_de_vida.

Una ves finalizada la instalación le deberá aparecer los siguiente en la consola:

Después de esto podemos observar que el proyecto hoja_de_vida esta en los archivos de htdocs(XAMPP) junto a la plantilla que descargamos.

Hecho todo esto, ahora trabajaremos en el proyecto que instalamos desde la consola,
para ello necesitaremos abrir el programa XAMPP y ejecutar el servidos de 'apache'

Abriremos MySQL y crearemos un esquema:
-Clic derecho sobre una parte libre del lado derecho
-Seleccionamos la opción 'create schema'
-Asignamos el nombre(hoja_de_vida)
-En la parte inferior izquierda le damos clic en 'apply'
-Aparecerá una ventana y nuevamente damos clic en 'apply'
.Finalmente damos clic en finish

Ahora abriremos el programa de Visual Studio Code, y abriremos la carpeta de  hoja_de_vida: Para habir una carpeta en visual nos iremos a archivo, clic en abrir carpeta y seleccionamos la carpeta.(hoja_de_vida)

Ahora lo que aremos es abrir el documento de '.env' para modificar el nombre del esquema(hoja_de_vida), el nombre del usuario (root) y la contraseña (root), todo esto ira entre apostrofes('')

Ahora vamos a migrar las tablas en MySQL:
Entonces abrimos el cmd y escribimos lo siguiente
Primero entramos a la carpeta de hoja_de_vida 

Al estar listo aparecerá:

Nos vamos a MySQL para verificar que las tablas estén migradas:
Actualizamos MySQL y observamos que efectivamente si están las tablas:

Después de haber cambiado los nombre y migrado las tablas , nos vamos al cmd a crear una nueva carpeta:

Nos ubicamos en la carpeta recién creada (Database y luego migrations) y Agregamos los siguientes campos:

Entonces solo nos queda probar la autenticacion  de usuario, abriremos el navegador e ingresaremos a: localhost/hoja_de_vida/public/login
y al cargar nos deberá aparecer lo siguiente: pero para que inicie les recuerdo que el servidor apache (XAMPP) tiene que estar activado

Entonces nos registramos desde la paste superior izquierda 'register'
llenamos los datos.

Entonces aquí ya esta creado el usuario

Ahora nos vamos a  ver a MySQL en la tabla users

Y efectivamente nos funciona correctamente.

Ya con nuestra plantilla descargada  empezaremos a ver que seria lo que tendríamos que cambiar en el formulario o Index como mayormente lo llamamos en este caso abriremos en nuestro navegador el Index para ver lo que tenemos

También abrimos el index en Visual studio code para empezar a ir cambiando lo que será lo primordial

Esta seria la plantilla donde lo que iremos a cambiar seria todo lo que es la barra de opciones del lado derecho y todo lo que son las tablas de diagramas y lo que es el tablero .

Ya en visual lo primero que iremos a cambiar será lo que es el titulo donde lo encontramos en la línea  10. En donde como tema pondremos lo que será Hoja de Vida – Hoja Principal

Después nos dirigiremos a la línea de código #24 donde le cambiaremos el (Start Bootstrap)

Por lo que escribiremos sera panel ya que deberá ir el nombre de la persona registrada pero por los momentos será asi.

Como pueden ver ya los modifico lo que seria el nombre de la barra del titulo y la de del menú de la derecha.

Después lo que iremos a buscar será lo que es el código de el Tablero ya que necesariamente no lo necesitaremos por que utilizaremos esto para algo mas . Ya encontrado el código del tablero como lo llama “ Icons Cards”

Que lo encontramos lo que es en la línea #233 bajremos mas y reduciremos también a lo que es ell área chart example también y luego los seleccionaremos para eliminar todo lo que es el tablero.

Después de eliminado lo que es el tablero guardamos cambios y recargaremos lo que es nuestra pagina.

Como pueden ver los elimino lo que es el tablero ahora lo que iremos hacer a continuación será eliminar todas las tablas que nos muestra en nuestro formulario.

Iremos a eliminar en la línea #233 lo que seria las Example DataTables Card seleccionamos hasta donde termine lo que es el div y eliminamos guardamos cambios y recargaremos lo que es nuestra pagina donde los tuvo que haber eliminado las tablas y todo el contenido dentro de el.

Como podemos ver los elimino todo lo que tenia adentro las TablesDate  y proseguiremos a configurar lo que es el menú que tenemos ala derecha donde cambiaremos y eliminaremos unos menus que nos aparecen en la imagen donde sale una flecha para que aparezca otro menú ese lo borraremos porque no los servirá de nada ya que no lo utilizaremos  y también se eliminara y cambiara la barra de arriba donde solo dejaremos un botón donde será cerrar sesión.

Aquí estamos cambiando el nombre al botón en la línea #219 donde le daremos el nombre de “Cerrar Sesion”.

Luego nos dirigimos a buscar lo que son los elementos de la barra de aariba del formulario dond eliminaremos los li class ítem dropdown de la línea de código #162  ml-auto del código #127 y también se eliminara el li class nav ítem de la línea de código #205.

Despues de haber eliminado guardaremos los cambios y recargaremos nuestra pagina donde nos tuvo que solo haber dejado lo que seria “Cerrar Sesion”.

Como pueden ver asi nos tiene que ir quedando con los cambios que vamos realizando en nuestro index. Ahora lo que iremos a cambiar son los nombres de la barra donde también iremos a eliminar algunos menus como anteriormente los dije.

Cambiaremos el nombre alas líneas de código #33, 39, y eliminaremos los que son los menus que  a continuacion verán cuales son.

Luego eliminamos lo que son los menus que están el la línea de código #67 hasta la 112.

Luego de eso lo que aremos es copiar el código de idioma conocimientos y lo pegaremos 3 veces dándole nombre a Reconocimientos , Referencias ,  Pasatiempos.

Asi nos aparecerá ya guardado  cambios la pagina en la que trabajamos.

Ahora los tocara copiar todo lo que tenemos en nuestra index e irlo a copiarlo a  a app.blade

En el app blade eliminaremos todo y copiaremos lo que tenemos en el index para facilitar le damos Control +A y selecciona todo después damos control +c y asi copiamos el código en el blade.

Lo que faltaría después de haber guardado cambios seria lo que es ejecutar xammp y abrirlo con el localhost.

Luego lo abrimos con el localhost.

En lo que nos abrirá el archivo blade pero sin hoja de estilo de la siguiente manera.

Lo que tendremos que hacer será buscar los archivos “css y js” y moverlos a las carpetas donde esta el archivo app.blade y buscarlo nada mas

Para lo que seria las hojas de estilo cambiaran algunas circunstancias  porque tendremos que modificarlas.

En estas hojas de estilo solo borraremos lo que antes donde diga css sy no tiene borrarelos lo que este antes de la ultima pleca

Y  lo que es en el js se hara lo mismo con el mismo procedimiento el JS para encontrarlo esta al final del proyecto.

Aquí será lo mismo ya cuando guardamos cambios nos tendrá que aparecer tal como si lo abriéramos en el index original con los iconos y todo lo demás

Después de eso lo único que nos faltaría es ponerle el nombre del inicio de sesion de algún usuario lo que escribiremos la siguiente línea 

Escribimos esta línea de código y en otro documento de la plantilla estará lo que nos servirá para poder mostrar quien  lo esta usando nos dirigimos al home.blade.php y  esta parte  nos guardara el nombre a nosotros no los aparece porque nadie lo esta usando pero si funciona .

Eso a sido todo espero que les haya gustado el tutorial.

Espero que les haya gustado  nuestro tutorial.