Tabla de Contenido

Introducción---------------------------------------------------------------------------------------4

Objetivos------------------------------------------------------------------------------------------4

SPRINT 1: Diseño, codificación y validación del Login del Sistema----------------------------5

Product Backlog----------------------------------------------------------------------------------5

Sprint Plannig-------------------------------------------------------------------------------------6

Sprint Backlog------------------------------------------------------------------------------------6

Seguridad de App con sesiones en PHP y encriptación de datos.-----------------------------7

Diseño de login y bases de datos----------------------------------------------------------------8

Diseño de tablas con campos y atributos-------------------------------------------------------10

Procedimientos y funciones.---------------------------------------------------------------------14

Creación del proyecto en visual Studio controlando las versiones con git--------------------15

SPRINT 2: Configuración de ambiente remoto Github y Heroku -----------------------------23

Product Backlog----------------------------------------------------------------------------------23

Sprint Plannig------------------------------------------------------------------------------------24

Sprint Backlog------------------------------------------------------------------------------------24

Creación del entorno remoto--------------------------------------------------------------------25

Conclusión----------------------------------------------------------------------------------------32

Lista de Figuras

• Ilustración 1: Historia de Usuario---------------------------------------------------------7

• Ilustración 2encriptación------------------------------------------------------------------7

• Ilustración 3 seguridad de datos----------------------------------------------------------7

• Ilustración 4 inicio de sesión--------------------------------------------------------------8

• Ilustración 5 Registro Login---------------------------------------------------------------8

• Ilustración 6 codificacion login-----------------------------------------------------------9

• Ilustración 7 Validacion de datos---------------------------------------------------------9

• Ilustración 8 codificación de registro----------------------------------------------------9

• Ilustración 9 Validacion de registro------------------------------------------------------10

• Ilustración 10 conexión a base de datos-------------------------------------------------10

• Ilustración 11 diseño de base de datos--------------------------------------------------11

• Ilustración 12 Tablas de base de datos--------------------------------------------------11

• Ilustración 13 tabla propietario----------------------------------------------------------11

• Ilustración 14 tablas inmuebles----------------------------------------------------------12

• Ilustración 15 tabla inquilinos------------------------------------------------------------12

• Ilustración 16 tabla contrato--------------------------------------------------------------12

• Ilustración 17 tabla alquiler---------------------------------------------------------------13

• Ilustración 18 tabla pagos-----------------------------------------------------------------13

• Ilustración 19 tabla costos-----------------------------------------------------------------13

• Ilustración 20 login registro---------------------------------------------------------------14

• Ilustración 21 login conectado------------------------------------------------------------14

• Ilustración 22 tabla login------------------------------------------------------------------14

• Ilustración 23 login iniciar sesión---------------------------------------------------------15

• Ilustración 24 acceso de usuario----------------------------------------------------------15

• Ilustración 25: Ubicar la direccion del proyecto. ----------------------------------------16

• Ilustración 26: Obteniendo ruta del repositorio TLAXROOM.--------------------------16

• Ilustración 27: Abriendo terminal de Git en la carpeta Git.-----------------------------17

• Ilustración 28: Clonando el repositorio TLAXROOM. ------------------------------------17

• Ilustración 29: Comando git commit.----------------------------------------------------18

• Ilustración 30: Configurando usuario.---------------------------------------------------18

• Ilustración 31: Creando las ramas Desarrollo y Pruebas.-------------------------------19

• Ilustración 32: Viendo el estado de la rama master.------------------------------------19

• Ilustración 33: comando git checkout Desarrollo--------------------------------------20

• Ilustración 34: Comando git add.-------------------------------------------------------20

• Ilustración 35: guardando cambios con git commit.-----------------------------------21

• Ilustración 36: Subiendo los archivos al repositorio remoto con git push.-----------21

• Ilustración 37: Creando estructura MVC.-----------------------------------------------22

• Ilustración 38:Historia de Usuario.------------------------------------------------------24

• Ilustración 39: Creando cuenta en heroku.--------------------------------------------25

• Ilustración 40: Creando nueva Aplicación.--------------------------------------------25

• Ilustración 41: Creación del repositorio logintlaxroom.------------------------------26

• Ilustración 42: archivos subidos al repositorio.---------------------------------------27

• Ilustración 43: Aplicación login-tlaxroom creada.-----------------------------------27

• Ilustración 44: Conectando GitHub con Heroku.-------------------------------------28

• Ilustración 45: Conectando la aplicación al repositorio logintlaxroom.------------28

• Ilustración 46: Vinculacion con exito.------------------------------------------------29

• Ilustración 47: Desplegando la aplicación con la rama main.-----------------------29

• Ilustración 48: Desplegando aplicación.----------------------------------------------30

• Ilustración 49: vista desplegada de la aplicación login-tlaxroom.------------------30

• Ilustración 50: Agregando complementos.------------------------------------------31

---

Introducción

En este trabajo se presentará la documentación detallada del Login para Back-end, en la cual se pondrán todos los factores importantes para nuestro desarrollo de proyecto basándonos de un diseñó para hacer funcional y codificar las funciones y partes que contendrá un login a la cual se presentara al cliente para la validación , igual la creación de base de datos con tablas correspondientes que se utilizaran y realizar la conexión con el login de esta maneara para tener un login funcional para el cliente o usuario . En este trabajo nos basados de dos sprint para hacer más fácil y rápido el trabajo, también se realiza la validación por parte del cliente y líder del proyecto, para que así nuestro proyecto tenga una funcionalidad, eficacia y diseño adecuado de acuerdo a la necesidad que se tiene

Objetivos

Diseñar, codificar, validar el login de un sistema aplicando el Modelo arquitectónico MVc (Modelo Vista Controlador), Seguridad de App con sesiones en PHP y encriptación de datos.

SPRINT 1: Diseño, codificación y validación del Login del Sistema.

Product Backlog

Sprint Plannig

Reunión de equipo de desarrollo Plataforma y fecha: Microsoft Teams, a 30 de Abril del 2021. Hora: 9:00-10:00 am. Tema: Asignación de actividades que se desarrollaran durante el sprint 1, así como la definición de la tecnología para el diseño del front end y la duración para la entrega en tiempo y forma. Participantes • Juan Carlos Chávez Santiago • Reyes Barios Jaime • Edith Reyes Sánchez

Sprint Backlog

Historia de Usuario: Programación Front End.

Ilustración 1: Historia de Usuario

---

Seguridad de App con sesiones en PHP y encriptación de datos.

1-Se muestra el código de la seguridad y encriptación de la contraseña de los usuarios en una base de dato

Ilustración 2encriptación

1.1-Como resultado de la encriptación y seguridad de datos se muestra el ejemplo en la siguiente ilustración donde es encriptado las contraseñas en el base de datos

Ilustración 3 seguridad de datos

Diseño de login y bases de datos

2-Se diseña el login para la parte de inicio de sección de usuarios para arrendar cuartos

Ilustración 4 inicio de sesión

2-.1e muestra la parte de registro del login para los usuarios almacenando los registros en la base de datos

Ilustración 5 Registro Login

2.2 se hace la codificación del login la parte principal del contenido que se mostrara para el usuario para iniciar sesión

Ilustración 6 codificacion login

2.3 Esta codificación es la validación de inicio de sesión de un usuario del login con la base de datos

Ilustración 7 Validacion de datos

2.4 La parte del registro de usuario codificado con un formulario para los datos a ingresar del usuario

Ilustración 8 codificación de registro

2.5 En esta codificación se muestra la validación de los datos de registro del login con la verificación de la tabla en la base de datos para almacenar datos de los usuarios

Ilustración 9 Validacion de registro

2.6 Se realiza la conexión del login con la base de datos del proyecto para hacer funcional los registros de usuarios

Ilustración 10 conexión a base de datos

Diseño de tablas con campos y atributos

3 -La base de datos es diseñada haciendo uso de la entidad relación para la conexión de las tablas en la base de dato

Ilustración 11 diseño de base de datos

3.1 Para la implementación de las tablas en base de datos se usa phpmyadmin xaamp para crear tablas que se utilizaran para realizar el proyecto. Para ello se crearon 9 tablas con sus correspondientes columnas y atributos

Ilustración 12 Tablas de base de datos

3.2 Se crea la tabla con el nombre propietario que esa se utilizara para aquellos usuarios que ofrecen rentar cuartos o habitaciones incluyendo los siguientes registros

Ilustración 13 tabla propietario

3.4 Se crea una tabla llamada inmuebles que contiene informaciones inmuebles que cuentan los cuartos o habitaciones con los siguientes registros de datos

Ilustración 14 tablas inmuebles

3.5 La tabla de inquilinos es para almacenar datos de personas que buscan hacer y rentar un cuarto o habitación, así como los datos que se muestra en la ilustración

Ilustración 15 tabla inquilinos

3.6 Tabla de contrato es donde se guardará la información de cada inquilino que desea rentar una habitación o cuarto

Ilustración 16 tabla contrato

3.7 Registros de alquiler en esta tabla se inserta información del inquilino que rentaran un cuarto

Ilustración 17 tabla alquiler

3.8 Tabla de pagos se registran información de los pagos a realizar de la habitación

Ilustración 18 tabla pagos

3.9 Tabla de costos son donde se almacenarán los costos de dichas habitaciones a rentar

Ilustración 19 tabla costos

Procedimientos y funciones.

4.Se realiza la prueba de la conexión de la base de datos con el login realizado Haciendo un registro con los siguientes datos

Ilustración 20 login registro

4.1 Se muestra una conexión exitosa de registro de datos

Ilustración 21 login conectado

4.2 Se muestra en la tabla de login los datos almacenados del registro de usuario

Ilustración 22 tabla login

4.3 Una vez registrado el usuario se inicia sesión para verificar la prueba de conexión

Ilustración 23 login iniciar sesión

4.4 Nos muestra que se ha iniciado exitosamente la sesion del usuario

Ilustración 24 acceso de usuario

Creación del proyecto en visual Studio controlando las versiones con git

Para poder crear un nuevo proyecto debemos de tener en cuenta en donde lo queremos almacenar, para esto es muy importante movernos dentro de nuestra terminal Git Bash, una vez hayamos pensado en donde queremos almacenar nuestro proyecto, debemos de saber dónde nos encontramos dentro de nuestra terminal, regularmente siempre nos ubica en nuestro escritorio.

Ilustración 25: Ubicar la direccion del proyecto.

1. Conectando Git Local con GitHub Como ya tenemos un repositorio creado llamado TlaxRoom ingresamos a GitHub nos posicionamos en la pestaña code, damos clic en el botón code para obtener la ruta y trabajar remotamente.

Ilustración 26: Obteniendo ruta del repositorio TLAXROOM.

1.1. Posteriormente en el escritorio creamos una carpeta llamada Git y dentro de la carpeta abrimos la terminal de Git.

Ilustración 27: Abriendo terminal de Git en la carpeta Git.

1.2. En la terminal escribimos el comando git clone seguido de la dirección del repositorio para clonar dicho repositorio y poder trabajar remotamente en él.

Ilustración 28: Clonando el repositorio TLAXROOM.

1.3. Una vez clonado el repositorio se procede a crear los commits para guardar los cambios cada que se realice una modificación en nuestro código.

Ilustración 29: Comando git commit.

1.4. Con el comando git config procedemos a configurar el usuario que realizara los cambios.

Ilustración 30: Configurando usuario.

1.5. Con el comando git Branch procedemos a crear las ramas Desarrollo y Pruebas puesto que ramas Master ya fue creada al crear el repositorio.

Ilustración 31: Creando las ramas Desarrollo y Pruebas.

1.6. Posteriormente con el comando git status veremos el estado de la rama master, como observamos los archivos creados aún no se ha agregado al área de trabajo.

Ilustración 32: Viendo el estado de la rama master.

1.7. Procedemos a agregar estos archivos a la rama Desarrollo, para eso salimos de la rama master y con el comando git checkout Desarrollo accedemos.

Ilustración 33: comando git checkout Desarrollo

1.8. Con el comando git add . agregamos los archivos al área de trabajo de la rama Desarrollo.

Ilustración 34: Comando git add.

1.9. Posteriormente con el comando git commit guardamos los cambios de los archivos creados y también los cambios posteriores.

Ilustración 35: guardando cambios con git commit.

1.10. Posteriormente procedemos subir los archivos a la rama desarrollo en el servidor remoto.

Ilustración 36: Subiendo los archivos al repositorio remoto con git push.

2. Creación de la estructura con metodología MVC

Ilustración 37: Creando estructura MVC.

SPRINT 2: Configuración de ambiente remoto Github y Heroku

Product Backlog

Sprint Plannig

Reunión de equipo de desarrollo Plataforma y fecha: Microsoft Teams, a 15 de Mayo del 2021. Hora: 9:00-10:00 am. Tema: Asignación de actividades que se desarrollaran durante el sprint 2, así como la definición de la tecnología para el diseño del front end y la duración para la entrega en tiempo y forma. Participantes

• • Juan Carlos Chávez Santiago
• • Reyes Barios Jaime
• • Edith Reyes Sánchez

Sprint Backlog

Historia de Usuario: Programación Front End.

Ilustración 38:Historia de Usuario.

Creación del entorno remoto

1. Creación de cuenta nueva app en Heroku. Comenzamos ingresando con usuario y contraseña en Heroku, para posteriormente crear una nueva aplicación. Para ello damos clic en el botón créate new app.

Ilustración 39: Creando cuenta en heroku. 1.2. Ingresar el nombre de la aplicación, la región y dar clic en el botón Create app.

Ilustración 40: Creando nueva Aplicación.

2. Creación de un nuevo repositorio nombrado como logintlaxroom el cual se vinculará con Heroku.

Ilustración 41: Creación del repositorio logintlaxroom.

2.1. Subiendo archivos al repositorio logintlaxroom. Para ello clonamos nuestro repositorio que se encuentra en la organización SistemaTecTlaxiaco. Y posteriormente realizamos los commits en el nuevo repositorio.

Ilustración 42: archivos subidos al repositorio.

3. Vinculación de Git Hub con Heroku para desplegar el dominio del sistema a desarrollar. Para ello dar clic en la sección de GitHub, para poder vincular a nuestro repositorio.

Ilustración 43: Aplicación login-tlaxroom creada.

2.2. Damos clic en el botón Connect to GitHub.

Ilustración 44: Conectando GitHub con Heroku.

2.3. Se procede a buscar el repositorio para vincularlo a la aplicación creada, encontrado el repositorio dar clic en el botón Connet.

Ilustración 45: Conectando la aplicación al repositorio logintlaxroom.

2.4. En la siguiente imagen observamos que la vinculación se realizó con éxito.

Ilustración 46: Vinculacion con exito.

2.5. Posteriormente procedemos a habilitar implementaciones automáticas desde la rama principal o main.

Ilustración 47: Desplegando la aplicación con la rama main.

2.6. La imagen siguiente muestra que las implementaciones se realizaron correctamente.

Ilustración 48: Desplegando aplicación.

2.7. Desplegamos la aplicación para observar si se implementó con éxito.

Ilustración 49: vista desplegada de la aplicación login-tlaxroom.

2.8. Procedemos a agregar el complemento jawsDB Maria para conectar a la base de datos remotamente.

Ilustración 50: Agregando complementos. 2.9. Nos dirigimos a la pestaña resources y observamos que ya se agrego el complemento para conectar a base de datos.

Conclusión

Una vez de haber desarrollado la documentación de Login para Back-end,, podemos concluir con una buen desarrollo y codificación del login ,con el alcance que tendrá, además se presentan los componentes necesarios para tener una buena conexión con la base de datos para que sea funcional e interactivo con el cliente al igual que sea fácil de interactuar con funcionalidad de sus botones como el registro y el acceso del usuario ,el registro del usuario es relacionado un gestor de base de datos, con sus componentes necesario para la captura y almacenamiento de datos del usuario teniendo en cuenta la seguridad y encriptación de datos
La encriptación es el proceso de ofuscar datos mediante el uso de una clave o contraseña que consigue quienes accedan a ellos sin la password adecuada, no puedan encontrar ninguna utilidad en los mismos, puesto que resulta imposible descifrar su contenido. en el caso de que el ordenador host de la base de datos estuviese mal configurado y un hacker llegase a obtener datos confidenciales, Al plantearse la encriptación de datos hay que tener en cuenta que:

• El cifrado no resuelve los problemas de control de acceso.
• Esta opción sí que mejora la seguridad, al limitar la pérdida de datos incluso si se omitieran esos controles.
• Se tomo en cuenta todo para el desarrollo del login.