Login con JavaScript, PHP, MySQL, Bootstrap, Postman y API's

Se mencionan diferentes pantallas que se deben crear, como la pantalla de inicio de sesión, la pantalla de recuperación de contraseña, la pantalla de cambio de contraseña, la pantalla de registro de usuario y la pantalla de la tienda. Se describe cada pantalla y se explica cómo se deben diseñar y qué elementos se deben incluir en ellas, como encabezados, menús, formularios, botones y pies de página. También se habla de la importancia de mantener una plantilla consistente para todas las pantallas para que sean agradables para el usuario y se puedan reutilizar en el futuro.

En el video se explica cómo instalar el servidor web XAMPP en Windows con la versión de PHP 8. Se muestra cómo descargar el archivo ejecutable desde la página de Apache Friends y cómo instalarlo en la computadora. Una vez instalado, se muestra cómo iniciar el servidor y cómo acceder a phpMyAdmin para manejar bases de datos y tablas. Al final, se resume que el proceso de instalación ha sido completado exitosamente.

El video muestra cómo instalar Visual Studio Code en un sistema operativo Windows. El proceso comienza al buscar en Google la página de descarga de Visual Studio Code, y desde allí descargar el instalador para Windows 10 de 64 bits. Luego, se ejecuta el archivo descargado, se acepta el acuerdo, se selecciona la instalación por defecto y se hace clic en "siguiente" varias veces hasta que la instalación esté completa. Finalmente, se hace clic en "finalizar", y el Visual Studio Code se abre automáticamente. El Visual Studio Code es un editor comúnmente utilizado para el desarrollo de sistemas.

En el video, se muestra la creación de una estructura de archivos necesaria para un sistema. Primero, se descarga un archivo comprimido y se descomprime. Luego, se copia el contenido de este archivo a la carpeta htdocs, y se renombra la carpeta como "sistemalogin". Se muestra el contenido de las carpetas css, img, js y fonts, que contienen archivos de estilos, animaciones, librerías de Bootstrap y jQuery, y fuentes, respectivamente. Además, se crea una carpeta llamada "Tools" donde se guardan archivos utilitarios. Se muestra cómo abrir la terminal y Visual Studio Code desde la carpeta creada, y se crea un archivo index.html para probar que se puede acceder a los archivos creados.

En este video, se explica cómo crear una base de datos MySQL en PHPMyAdmin. Comienza explicando cómo acceder a PHPMyAdmin desde el panel de control y cómo arrancar el servidor Apache. Luego, crea una base de datos con un nombre y cotejamiento específicos. Después de eso, se crea una tabla llamada "user" con cuatro columnas: ID, nombre, correo y password, especificando el tipo y la longitud de cada columna. Finalmente, se guarda la tabla y se muestra cómo agregar otra columna en caso de que sea necesario en el futuro.

El video muestra cómo crear una plantilla utilizando PHP y se enfoca en la configuración del servidor web, específicamente el servidor Sand y la base de datos MySQL. El tutor también muestra cómo abrir el Visual Studio Code de dos formas diferentes, cómo personalizar la plantilla básica de HTML, agregar meta descripciones y hacer la plantilla adaptable a diferentes dispositivos. También se muestra cómo cambiar el título de la página y ajustar el encabezado para agregar una imagen de logo.

Aqui se describe la creación de una plantilla utilizando Bootstrap. Se agrega una clase a un elemento "Body", se agregan secciones usando div y se utiliza el grid de Bootstrap para definir columnas. Se menciona la importancia de utilizar una sola etiqueta H1 en la página, y se agrega una imagen utilizando un sitio de iconos. También se explica cómo se ajusta la alineación de la imagen dependiendo del tamaño de la pantalla.

A partir del archivo llamado "Index" creamos un archivo llamado "header.php" dentro de una carpeta llamada "Tools". Luego cortamos un fragmento de código del archivo "Index" y lo pegamos en el archivo "header.php". A continuación, el archivo "Index" se modifica para incluir el archivo "header.php" con la instrucción "include" y se guarda. A continuación, el proceso se repite para crear un archivo "footer.php" y agregarlo al archivo "Index" con la instrucción "include".

El este video se describe un proceso de trabajo con archivos y plantillas en PHP para desarrollar una tienda virtual. Se muestra cómo se crean archivos de plantillas y se les da nombre para diferenciarlos, así como la importancia de incluir ciertas secciones en las plantillas. También se explica el concepto de un "modal" y se muestra cómo se trabaja con un archivo llamado "login modal" para crear una ventana emergente de inicio de sesión en la tienda virtual.

En este video, se explica cómo utilizar el inspector de un navegador web para corregir el código y solucionar problemas. Se muestra cómo abrir el inspector de dos maneras diferentes: haciendo clic derecho y seleccionando "inspect" o presionando la tecla F12. El inspector tiene diferentes opciones como elementos, consola, red (Network) y aplicación, que permiten evaluar elementos y solucionar problemas. También se recomienda la opción "cache and hard reload" para borrar la caché y actualizar la página. La pestaña de Network permite evaluar lo que está sucediendo en la página web.

Trabajamos en la creación de pantallas para una sección de recuperación de formulario en el sitio web utilizando elementos de Bootstrap. Se muestra algunos ejemplos de elementos Card de Bootstrap y se explica su estructura. Luego, se muestra el código para una nueva sección llamada "recuperar" que utiliza un elemento Card y la clase Content de Bootstrap. La sección tiene un ID y se utiliza el estilo "display:none" para ocultarla. El elemento Card tiene un elemento carbody con un elemento p que contiene un formulario para restablecer la contraseña.

En este video se muestra la creación de un formulario para cambiar la contraseña. Primero se corrige un error en el código y se presenta un formulario para ingresar la nueva contraseña. Luego se muestra un código para presentar mensajes y el formulario en la página. Se explica que la sección tiene una clase "content" y un ID "cambiar password", lo cual se utiliza para aplicar estilos y se muestra cómo se presenta el formulario en la página.

El video muestra cómo crear un formulario para incluir un usuario en una aplicación web. El formulario es creado en un archivo llamado "login modal" y se trabaja en la sección "content" del mismo. El formulario tiene un estilo provisional que se muestra con la clase "show". Incluye campos para el correo electrónico, nombre, contraseña y una confirmación de contraseña. El botón de envío del formulario tiene la clase "btn btn-primary btn-block" y lleva el texto "guardar". También se incluye un enlace que lleva al formulario de inicio de sesión. El código completo está disponible en un repositorio de GitHub.

Hacemos una explicación del código JavaScript en un archivo llamado "login funciones" que se encarga de ocultar elementos del formulario y mostrar la funcionalidad "Recuperar contraseña" cuando se hace clic en el botón "Olvidé mi contraseña". Se muestra cómo se define la función "Mostrar recuperar" dentro de este archivo y la llamada desde el botón correspondiente en el formulario. También se discute brevemente algunas convenciones de nomenclatura de JavaScript, como camelCase y PascalCase.

El video se muestra cómo se utiliza JavaScript para crear funciones que permitan mostrar y ocultar elementos de una página web, según la opción que el usuario seleccione en la interfaz. En la primera parte se muestra cómo crear una función para mostrar y ocultar el formulario de inicio de sesión, y en la segunda parte se muestra cómo crear otra función para mostrar el formulario de registro de usuario. Se utiliza la convención de nomenclatura Pascal Case para nombrar las funciones. También se muestra cómo se puede copiar y pegar código de una sección a otra del archivo JavaScript.

En este video, se explica cómo implementar la funcionalidad de buscar un usuario en un formulario de inicio de sesión. Se menciona que cuando el usuario ingresa un correo electrónico y una contraseña y hace clic en el botón de inicio de sesión, se debe llamar a una función llamada "Buscar usuario", que aún no está definida. La función se define y se muestra el código, que incluye la validación del formulario y la ejecución de una solicitud AJAX si el formulario es válido. También se explica el uso de un evento "submit" y se comenta el código para aclarar su funcionamiento.

En este video se muestra cómo crear un mockup que simule el comportamiento de una API en el lado del servidor. Para ello, se utiliza un archivo llamado "loginApi.php", en el que se utiliza el formato JSON y se incluyen las instrucciones necesarias para trabajar con variables de sesión. Además, se muestra cómo se puede simular la respuesta del servidor, crear variables y un arreglo de respuesta. También se explica cómo utilizar una condición para evaluar el método que se está utilizando y cómo obtener los datos del formulario para simular la respuesta. En general, el video muestra cómo simular una API de forma eficiente en el lado del servidor.

En el video, el presentador está enseñando a crear una API y muestra un código similar al que ya tenían, pero con algunas adiciones. Primero, se agrega el código para establecer la conexión a la base de datos. Luego, muestra cómo verificar si un usuario existe en la base de datos utilizando consultas preparadas para evitar inyección de código. Finalmente, explica cómo usar la estructura de control try-catch para manejar errores o excepciones en la programación. Se explica cómo cerrar la conexión y la consulta después de realizar una verificación de inicio de sesión en una base de datos. Si el usuario no es encontrado, se prepara un mensaje de error utilizando una función de excepción y se cierra la conexión y la consulta. También se muestra cómo crear una contraseña hash para verificar el inicio de sesión del usuario y cómo probar el código en el navegador.

Continuamos con la creación de una API de inicio de sesión y la verificación del token para evitar que los usuarios ingresen a una ruta sin un token válido. Se muestra una función llamada "verificar token", que utiliza una estructura condicional if para evaluar si la bandera y la variable bandera en el almacenamiento local son iguales a null. Si es así, se activará la parte de Ajax para verificar el token. La función Ajax utiliza el método get y pasará una autorización con un token concatenado con la palabra clave "Bearer". Si la respuesta es exitosa, se mostrará un mensaje de bienvenida y se actualizará el contenido de un elemento. El código completo está disponible en un repositorio de Github.

El video se centra en la realización del endpoint para verificar un token de autenticación en una API de login. Se muestra el código utilizado para extraer el token de la cabecera de la solicitud HTTP y se explica cómo se realiza la consulta a la base de datos para verificar la validez del token. También se habla sobre la utilización de operadores ternarios y de la función "sscanf" para leer datos de una cadena de texto en un formato específico.

En este video se muestra cómo solucionar un problema de mensajes de error en la tienda php. Se muestra un código de HTML que incluye diferentes iconos para representar diferentes acciones de usuario. Luego muestra cómo se resuelve el problema de los mensajes de error y cómo se puede iniciar sesión en la tienda php sin recibir mensajes de error en la consola.

El video muestra cómo se ha modificado una plantilla para agregar una sección con un carrusel de imágenes aleatorias, un título y un eslogan. Luego muestra el código para emular una sección de productos, con nombre, descripción, precio y un botón para agregar al carrito. Se menciona que el precio se genera de forma aleatoria y que este código debería ser dinámico en lugar de estático. Al final del video, se proporciona un enlace al repositorio de GitHub donde se puede encontrar el código utilizado.

Aqui se discute sobre la necesidad de cambiar el título de la página a "tienda". También se menciona una función llamada "remover token" que se utiliza para eliminar el token de sesión y se sugiere redirigir a los usuarios a una página de herramientas en PHP para inicializar las variables de sesión y destruir las cookies. Se mencionan varias instrucciones y funciones de PHP que se utilizarán para implementar estas funcionalidades.

En este video, se explica cómo trabajar con CSS y crear una clase personalizada llamada "redondeado" para redondear los bordes de un formulario. Muestra cómo crear la clase en una hoja de estilo separada y cómo animar los cambios de color del borde y el fondo. Al final, muestra cómo se aplica la clase a los formularios en la página web y cómo los cambios de estilo se aplican en cascada.

En este video, Gustavo Arias presenta la creación de una funcionalidad para resetear una contraseña. Comienza explicando el código de una función de verificación de tokens y, a continuación, muestra el código de la función para resetear la contraseña. La función utiliza un formulario para enviar una solicitud post mediante Ajax a un archivo PHP que procesa la solicitud. Si la solicitud tiene éxito, se muestra una notificación con un mensaje de enviado satisfactoriamente y se establece el valor del campo de entrada de correo recuperar en una cadena vacía. La alerta se despliega y luego se elimina después de cuatro segundos. Se indica que falta trabajar en la parte de la API de inicio de sesión para la función de restablecimiento de contraseña. Todo el código se puede encontrar en un repositorio de Github que se proporciona en el video.

En este fragmento del curso se trabaja con un archivo llamado loginApi.php. El código que se muestra es un script escrito en PHP que procesa una solicitud POST para restablecer la contraseña de un usuario y enviar un correo electrónico con la nueva contraseña. El script verifica si la solicitud es un POST y si el camino es "resetear". Luego valida y sanitiza el correo electrónico del usuario con una expresión regular y consulta la base de datos para verificar si existe el correo electrónico del usuario. Si el correo electrónico no existe, devuelve un error. Si existe, actualiza la contraseña del usuario en la base de datos y envía dos correos electrónicos, uno al administrador del sitio y otro al usuario que solicitó la recuperación de la contraseña. El cuerpo del correo electrónico es un HTML con variables incrustadas y se usa la función Mail para enviar el correo electrónico.

En el video, se explica una función de cambio de contraseña para un formulario en una página web. La función maneja el cambio de contraseña de un usuario, valida los datos ingresados y envía una solicitud Ajax al servidor para realizar el cambio de contraseña. También maneja posibles errores que puedan ocurrir durante el proceso. La función verifica si existe un valor llamado bandera en el almacenamiento local del navegador y crea el valor si no existe. Cuando se envía el formulario, la función realiza una solicitud Ajax a un archivo php llamado login Api punto php y le pasa los datos del formulario serializados. Si la solicitud Ajax es exitosa, muestra un mensaje de éxito y redirecciona al usuario a la página de inicio. Si la solicitud Ajax falla, la función muestra un mensaje de error específico según el tipo de error que se haya producido. La función utiliza el método POST y el parámetro que se le pasa es "cambiar".

En el video, se explica cómo crear un endpoint en PHP para cambiar la contraseña del usuario. Se comparte el código necesario para crear el endpoint y se explica brevemente cómo funciona. El código verifica si la solicitud es una solicitud POST y si la ruta es correcta. Luego, valida los datos del formulario ingresados utilizando expresiones regulares y, si todas las validaciones son correctas, actualiza la contraseña del usuario en la base de datos. Finalmente, devuelve un mensaje de éxito o error según corresponda. El video muestra cómo probar el endpoint en un navegador y cómo verificar si la actualización de la contraseña fue exitosa.

El video es una explicación sobre cómo crear o incluir un usuario en una página web a través de código Javascript. El autor del video muestra el código de la función que se encarga de este proceso, incluyendo una verificación de almacenamiento local del navegador y una solicitud de Ajax al servidor. Si la respuesta es exitosa, se muestra un mensaje y se redirige al usuario a la página de inicio, de lo contrario, se muestra un mensaje de error correspondiente.

El video muestra cómo crear un EndPoint en PHP para crear un nuevo usuario en una base de datos. Se indican los pasos necesarios para recibir los datos del usuario y validarlos antes de insertarlos en la base de datos. También se enseña cómo preparar una consulta preparada para insertar los datos del usuario en la base de datos y cómo devolver un mensaje de éxito o error dependiendo del resultado de la inserción. El ingeniero realiza varias pruebas para demostrar la funcionalidad del EndPoint.

En el video, se continúa con la realización del código para el sistema de login y se menciona que en el video anterior se presentó una situación en la que no se estaba considerando una excepción porque el código estaba fuera del try-catch. Por lo tanto, sugiere que se revise el código para evitar que esto suceda en el futuro.

Se muestra cómo se puede preparar la consulta y asignar los valores dentro del try-catch, en lugar de fuera de él, para evitar errores en la preparación de la consulta. Hace este cambio para cada uno de los endpoints que se han creando.

Después de hacer los cambios, se verifica que todo está correcto y se sugiere que este es un detalle importante que podría afectar el código más adelante si no se corrige.

En resumen, aqui se muestra cómo se puede mejorar el código para evitar errores en la preparación de la consulta y cómo se puede incluir todo el código dentro del try-catch para prevenir problemas en el futuro.

En este video, se explica cómo descargar e instalar Postman en un equipo con sistema operativo Windows. Primero, desde el navegador, se busca "Postman Download" y se accede a la página oficial de Postman. Allí, se aceptan las cookies y se descarga la versión correspondiente a tu sistema operativo. Una vez descargado, se ejecuta el archivo y se siguen los pasos de instalación. Puedes optar por crear una cuenta o saltarte ese paso. Finalmente, se muestra cómo abrir la aplicación Postman para empezar a trabajar. El proceso es sencillo y rápido.

Aqui se muestra cómo trabajar con los endpoints desde Postman. Comenzamos mostrando un archivo llamado "loginfunciones" que contiene todas las funciones utilizadas para interactuar con nuestra aplicación. Luego, se muestra una serie de rutas de endpoints utilizados para buscar usuarios, verificar tokens, resetear y cambiar contraseñas, e incluir nuevos usuarios. Se explica que algunos de estos endpoints utilizan el método POST, mientras que otros utilizan el método GET. A continuación, se explica cómo utilizar Postman para enviar una solicitud POST a un endpoint específico y pasarle datos a través del cuerpo de la solicitud.
Se menciona el error 3 y se discute cómo darle una mejor descripción al mensaje de error para que sea más útil al usuario final. También se hacen cambios en el cuerpo del mensaje para solucionar estos problemas.

El video muestra cómo subir archivos a Github, una plataforma de alojamiento de repositorios de control de versiones. El proceso implica crear una cuenta en Github, crear un repositorio, copiar una línea de comando en la consola para inicializar el repositorio, agregar archivos, hacer confirmaciones y luego enviar los cambios al repositorio. Además, se dan algunos consejos sobre cómo nombrar el repositorio y los archivos.

Agradecemos al estudiante por su asistencia haber completado el curso y enumeramos todas las cosas que se hicieron en el proyecto. Comenzando con el diseño de las pantallas y la instalación de El XAMPP, que es su servidor web. También instalaron Visual Studio Code, que se considera uno de los editores más populares del mercado en la actualidad. Se planificó la estructuración de los archivos y se creó con phpMyAdmin una base de datos mysql. Además, se realizó una plantilla html y css utilizando la librería de Bootstrap y se crearon el encabezado (Header) y el pie de página (Footer). También se crearon un inicio de sesión modal y ventanas para recuperar contraseñas, cambiar contraseñas e incluir usuarios. Te enseñamos cómo manejar el inspector, la consola, la pestaña de Network y la de aplicaciones para trabajar con las variables del local storage y session storage. También se enseñó a mostrar y ocultar un formulario y a crear funciones para buscar usuarios, resetear contraseñas, cambiar contraseñas e incluir usuarios. Además, se hizo un mockup de los datos y los endpoint de autenticación, verificación, reseteo y cambio de contraseña e incluir usuario, respectivamente. Se evitó el ingreso indebido si no se está autenticado a través de la verificación del token y se realizó la persistencia de los datos. También se crearon secciones de la tienda de manera que pintara los datos de forma aleatoria y mostrara imágenes para emular que estaban en una tienda. Finalmente, hablamos sobre el manejo de errores con el try Cash, la instalación de Postman y cómo manejar los endpoint y por último se hizo el deploy en Github.