Laboratorio 2 Marcos Apolinar Programacion III

UNIVERSIDAD MARIANO GALVEZ DE GUATEMALA
Facultad de Ingeniería en Sistemas de Información
Centro Regional de Coatepeque
Curso: Programación lll
Catedrático: Ing. Alberto Marroquín
Sistema de Control de
pacientes con Problemas
Mentales
Nombre:
Marcos Rodolfo Arana Apolinar
Carné:
0906-22-16405
Coatepeque, 10 de Mayo de 2,024
1
2
Índice general
Portada---------------------------------------------------------------------------------------------------2
Índice de tablas------------------------------------------------------------------------------------------4
Introducción---------------------------------------------------------------------------------------------5
1. Planteamiento del problema-------------------------------------------------------------------
2. Antecedentes-----------------------------------------------------------------------------------7
3. Importancia y alcances------------------------------------------------------------------------7
4. Beneficiarios------------------------------------------------------------------------------------
5. Delimitaciones---------------------------------------------------------------------------------7
6. Objetivos general y especifico----------------------------------------------------------------
7. Marco metodológico---------------------------------------------------------------------------
8. Análisis del problema--------------------------------------------------------------------------
9. Modelo de autenticación---------------------------------------------------------------------
10
10. Marco teorico-----------------------------------------------------------------------------11-19
11. Requerimientos---------------------------------------------------------------------------20-22
12. Plataforma de desarrollo---------------------------------------------------------------22-23
3
13. Presupuesto------------------------------------------------------------------------------------
23
14. Cronograma-----------------------------------------------------------------------------------24
15. Pruebas ambiente, pruebas técnicas y producción------------------------------------25-
49
16. Acta de Constitución---------------------------------------------------------------------50-52
Conclusión---------------------------------------------------------------------------------------------53
Recomendaciones-------------------------------------------------------------------------------------54
Anexos----------------------------------------------------------------------------------------------55-64
Referencias---------------------------------------------------------------------------------------------65
ÍNDICE DE TABLAS
Tabla 1--------------------------------------------------------------------------------------------------
20
Tabla 2--------------------------------------------------------------------------------------------------
21
Tabla 3--------------------------------------------------------------------------------------------------
21
Tabla 4--------------------------------------------------------------------------------------------------
22
Tabla 5--------------------------------------------------------------------------------------------------
22
Tabla 6--------------------------------------------------------------------------------------------------
22
Tabla 7----------------------------------------------------------------------------------------------22-
4
23
Tabla 8--------------------------------------------------------------------------------------------------
23
5
Introducción
Los sistemas informáticos en la actualidad, especialmente en este tiempo de pandemia,
brindan un amplio soporte en el ámbito empresarial, debido a que ayudan en la
optimización de procesos y recursos en los distintos niveles jerárquicos dentro de la
organización y en este proyecto de desarrollo e implementación de una aplicación web que
le permita establecer un mayor control de actividades como de los pacientes y así evitar
futuros errores en la manipulación de información.
El proyecto desarrollado tiene como finalidad coordinar y mejorar el proceso de ingreso de
información ya que el este software automatiza los diferentes procesos enfocados en los
controles médicos, atención de pacientes y horarios de agendamiento que son parte clave en
el desarrollo diario de la Unidad Médica.
6
Planteamiento del problema
Se evidencia que al no poseer un sistema informático que ayude en la gestión de control
de los procesos que tiene, el prolongado tiempo de espera para recibir asistencia médica es
excesivamente alto, provocando desorganización en la planificación y malestar en el
público objetivo. Además, dificultades con, búsquedas manuales de información, tiempo
de registros de forma manual, la pérdida o duplicación de la información de los pacientes,
genera una imagen deficiente.
Se ve en la necesidad de contar con un sistema informático que les permita la
manipulación de todos los datos y procesos de forma más eficiente y segura que
demuestre el profesionalismo. Brindando una mejor atención mediante la optimización de
tiempo y recursos y fomentando confianza.
7
Antecedentes
Las instituciones de prestaciones de salud a nivel mundial mantienen un desafío continuo
por brindar servicios para complementar esfuerzos con los estados dentro un marco legal y
político, en donde los sectores público-privado fortalezcan alianzas para tener una fluida
gestión en la sociedad, recursos adecuados asistenciales, monitoreo y entrega de
información temprana y evaluación de sus procesos de manera constante.
Importancia y alcance
El alcance de este proyecto tiene como finalidad la implementación de una aplicación web
para el control de citas y manejo de historial médico en la institución, que pueda contar con
un diseño personalizado, adaptado a las necesidades del personal médico y administrativo
que permite el ingreso y registro de información de los pacientes con sus debidos datos
personales, así como del historial clínico, registro y asignación de médico tratante, entrega
de medicina, evolución y reporte médico, entrega de certificados médicos, todo esto
disponible mediante un servicio web.
Beneficiarios
Beneficiarios directos
Que se podrá optimizar el tiempo de respuesta y modernizar los procesos para así permitir
una correcta colaboración, coordinación entre todas las áreas involucradas y mejor
administración en los datos manejados.
Beneficiarios Indirectos
Los pacientes, quienes gozaran de una mejor atención y valoración médica eficiente,
permitiéndoles obtener seguridad y mayor confianza.
Delimitaciones
El desarrollo e implementación de la aplicación web para el control de citas e historial mé.

8
Objetivos
Objetivo General
Desarrollar una aplicación web que permita el control y ingresar o registrar de citas
garantizando fiabilidad y seguridad en el manejo de los datos almacenados de los pacientes
con problemas mentales.
Objetivos Específicos
 Gestionar de manera eficiente y coordinada la atención al paciente.
 Brindar a médicos tratantes la facilidad de obtener datos precisos al instante.
 Optimizar el tiempo para ofrecer un diagnóstico veraz al paciente.
 Permitir a médicos de la institución llevar reportes globales y específicos del
paciente.
 Realizar pruebas de software / aceptación para validar la aplicación propuesta
9
Marco Metodológico
En esta sección se detallan las técnicas y métodos que se utilizan para el proceso de
desarrollo del sistema web. En la actualidad el uso de procesos agiles en el desarrollo de
software viene siendo una forma de trabajo muy utilizada debido a la flexibilidad y
adaptabilidad que ofrece durante el transcurso del desarrollo permitiendo adecuar la forma
de trabajo a las condiciones del proyecto. La elección de metodologías agiles de las
tradicionales, es su alto nivel de colaboración entre las personas involucradas en el
desarrollo, realizando aportes o retroalimentaciones con la finalidad de evitar un
descontento del cliente en la entrega final del producto. En el actual proyecto se seguirá el
proceso de desarrollo de software con el uso metodológico XP.
Análisis del problema

Hoy en día los avances tecnológicos han sido un gran apoyo para que la humanidad se
desempeñe de manera eficiente y moderna, siendo a su vez de vital importancia en su
implementación en el área de salud; ya que permite la optimización en el desarrollo de
actividades de forma eficaz y segura. El siguiente proyecto es importante porque no está
brindando una total satisfacción hacia sus usuarios debido a los diversos inconvenientes que
se han suscitado a lo largo de su funcionamiento, lo que refleja que no se ha logrado
obtener una solución rápida y efectiva. El control y seguimiento de pacientes por parte del
personal que demuestra ineficiencia organizacional, ya que no disponen de un sistema
informático que les permita manejar de manera adecuada el registro diario de dicha unidad
de salud. Con el cambio e implementación del software se pretende mejorar los procesos
los cuales se llevan de manera manual y poco efectiva en el ámbito administrativo, evitando
así errores de percepción humana, garantizando una respuesta inmediata del médico y
menor tiempo de espera por parte de los pacientes, además logrando cumplir con los
objetivos.
10
Módulo de Autenticación
Se plantea la creación de un módulo que permita la autenticación a la aplicación de parte de
los usuarios que van a interactuar con el sistema para poder proporcionar la seguridad y
confiabilidad de los datos, para poder acceder al sistema los usuarios debes de ingresar su
usuario y contraseña los mismo que serán validados por la aplicación para tener un acceso
Módulo de Agentamiento y Valoración
Módulo muy importante encargada en el agenda miento de cita médica estos siendo
seleccionado de acuerdo con la disponibilidad asignada por el médico.
Tiene como finalidad de permitir el ingreso, toma de signos vitales e información necesaria
para una valoración y asistencia médica oportuna
Módulo de Reportes
Esta opción tiene como meta obtener la informa generada por el sistema para una apropiada
toma de decisiones que permita mejorar procesos. Estos no ayudan a la búsqueda de
información más eficiente y rápida de los pacientes y poder dar un servicio más factible.
11
Marco Teórico
Análisis del Proyecto
PHP
Es un lenguaje de programación interpretado del lado del servidor y de uso general que
se adapta especialmente al desarrollo web. Fue creado inicialmente por
el programador danés-canadiense Rasmus Lerdorf en 1994. En la actualidad,
la implementación de referencia de PHP es producida por The PHP Group. PHP
originalmente significaba Personal Home Page (Página personal), pero ahora significa el
inicializo recursivo PHP: Hipertexto Reprocesar.
El código PHP suele ser procesado en un servidor web por un intérprete PHP
desarrollado como un módulo, un daemon o como un ejecutable de interfaz de entrada
común (CGI). En un servidor web, el resultado del código PHP interpretado y ejecutado —
que puede ser cualquier tipo de datos, como el HTML generado o datos de imágenes
binarias— formaría la totalidad o parte de una respuesta HTTP. Existen diversos sistemas
de plantillas, sistemas de gestión de contenidos y frameworks que pueden emplearse para
organizar o facilitar la generación de esa respuesta. Por otra parte, PHP puede utilizarse
para muchas tareas de programación fuera del contexto de la web, como aplicaciones
gráficas autónomas y el control de drones. También se puede interpretar y ejecutar un
código PHP cualquiera a través de una interfaz de línea de comandos (CLI).
El intérprete estándar de PHP, impulsado por Motor Zend, es un software
libre publicado bajo Licencia PHP. PHP ha sido ampliamente portado y puede ser
desplegado en la mayoría de los servidores web en casi todos los sistemas
operativos y plataformas, de forma gratuita.
El lenguaje PHP evolucionó sin una especificación formal escrita o un estándar hasta 2014,
12
con la implementación original actuando como el estándar de facto que otras
implementaciones intentaban seguir. Desde 2014, se ha trabajado para crear una
especificación formal de PHP.
(htt54)
MySQL
Es un sistema de administración de bases de datos relacionales. Es un software de
código abierto desarrollado por Oracle. Se considera como la base de datos de código
abierto más utilizada en el mundo.
¿Para qué sirve MySQL?
MySQL es uno de los sistemas más popularizados para almacenar y administrar datos.
Con administrar nos referimos a las acciones CRUD:
 Create: crear
 Read: leer
 Update: actualizar
 Delete: borrar
Características de MySQL
Código abierto
MySQL utiliza la Licencia Pública General de GNU, por lo que se puede descargar,
utilizar y modificar a voluntad. Esto facilita su uso tanto académico como profesional.
Uso multiplataforma
Una de sus características principales y de mayor ventaja es que puede instalarse en
entornos con sistemas operativos diversos como Windows, Mac y la mayoría de
distribuciones Linux, así como en ambientes Unix.
13
Escalabilidad
Tiene soporte para 40-50 millones de registros, 150.000-200.000 tablas y 5000 millones
de filas.
Tipos de datos
Soporta una amplia gama de tipos de datos, lo que permite tener una gran versatilidad en
cuanto a las situaciones, industrias o casos de uso donde puede implementarse una base de
datos MySQL. Puede emplearse para la industria financiera, al manejar datos con mucha
precisión; por otro lado, también puede utilizarse en ámbitos de geolocalización por sus
datos de tipo espacial. De igual forma puede competir, en ciertas situaciones, con las bases
de datos no relacionales con su tipo de dato JSON.
Conjuntos de caracteres
Es compatible con un gran listado de conjuntos de caracteres e idiomas, lo que le
permite adaptarse a cualquier parte del mundo. Sin duda alguna, es un aspecto que le ha
ayudado a posicionarse en los sistemas de internet a lo largo y ancho del planeta.
Clientes gráficos
Si bien MySQL utiliza su propio lenguaje para administrar los datos almacenados,
existen diversas herramientas o clientes gráficos que nos permiten interactuar con las bases
de datos, ayudando a que dicha interacción sea más sencilla y, por lo tanto, más rápida.
Algunas herramientas son:
 PHPMyAdmin
 MySQL Workbench
Soporte para lenguajes de programación
14
Las características y ventajas de MySQL son muchas, pero sin duda todas ellas son
mejor explotadas cuando están integradas dentro de un sistema de información. Para ello
existe un amplio abanico de API nativas, librerías, paquetes, etc. que permiten integrar una
base de datos MySQL en un sistema desarrollado en cualquier lenguaje de programación.
Documentación actualizada
Al ser muy popular y utilizado, permite que exista una documentación oficial muy
amplia, además de una comunidad enorme siempre dispuesta a ayudar, colaborar y aportar
al conocimiento compartido.
¿Cómo funciona MySQL?
El funcionamiento de MySQL depende de dos conceptos relacionados entre ellos:
 Base de datos relacionales
 Modelo de cliente-servidor
Base de datos relacionales
En una base de datos relacional, los datos son organizados y almacenados en tablas en
lugar de guardar todos los datos juntos y organizados en una única unidad de
almacenamiento. Lo «relacional» hace referencia al uso de una llave para relacionar los
datos de una tabla con los de otra.
Modelo de cliente-servidor
El servidor es donde residen realmente los datos. Para acceder a dichos datos alguien
debe solicitarlos: ese alguien es el o los clientes. El cliente lanza una petición al servidor de
la base de datos solicitando aquellos datos que desea obtener.
(htt55)
¿Qué es Laravel?
15
Existe una gran cantidad de herramientas que permiten simplificar el proceso de
desarrollo. Una de ellas es Laravel. OK, no es una herramienta nueva ni mucho menos,
pero a pesar de tener algunos años en el mercado sigue resultando innovadora para algunas
aplicaciones.
¿Qué es Laravel en programación?
Laravel es un framework PHP gratis y de código abierto que brinda un conjunto de
herramientas y recursos para crear aplicaciones modernas. Posee un ecosistema integral que
combina funciones integradas y una variedad de paquetes y extensiones compatibles.
Este framework de PHP creció en popularidad rápidamente en los últimos años, y muchos
desarrolladores lo adoptaron como su framework de trabajo favorito para lograr un proceso
de desarrollo optimizado.
(htt56)
¿Qué es Bootstrap?
Bootstrap es un framework CSS desarrollado por Twitter en 2010, para estandarizar las
herramientas de la compañía.
Inicialmente, se llamó Twitter Blueprint y, un poco más tarde, en 2011, se transformó en
código abierto y su nombre cambió para Bootstrap. Desde entonces fue actualizado varias
veces y ya se encuentra en la versión 4.4.
El framework combina CSS y JavaScript para estilizar los elementos de una página
HTML. Permite mucho más que, simplemente, cambiar el color de los botones y los
enlaces.
Esta es una herramienta que proporciona interactividad en la página, por lo que ofrece una
serie de componentes que facilitan la comunicación con el usuario, como menús de
navegación, controles de página, barras de progreso y más.
16
Además de todas las características que ofrece el framework, su principal objetivo es
permitir la construcción de sitios web responsive para dispositivos móviles.
Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y
smartphones, de una manera muy simple y organizada.
¿Cómo funciona Bootstrap?
Bootstrap está constituido por una serie de archivos CSS y JavaScript responsables de
asignar características específicas a los elementos de la página.
Hay un archivo principal llamado bootstrap.css, que contiene una definición para todos
los estilos utilizados. Básicamente, la estructura del framework se compone de dos
directorios:
 css: contiene los archivos necesarios para la estilización de los elementos y una
alternativa al tema original;
 js: contiene la parte posterior del archivo bootstrap.js (original y minificado),
responsable de la ejecución de aplicaciones de estilo que requieren manipulación
interactiva.
¿Cuál es la funcionalidad de Bootstrap?
Bootstrap ofrece una serie de características que se pueden implementar en un sitio web.
A continuación hablaremos de las posibilidades de esta herramienta.
Diseño responsive
Una de las características principales de Bootstrap es permitir que la adaptación de la
página se realice según el tipo de dispositivo utilizado. Para garantizar la responsividad, el
framework funciona con:
 la estilización del elemento <div>;
17
 el uso del class container.
En la práctica, el elemento <div>, funciona para crear una serie de notas, similar a una
tabla, capaz de estructurar la página de forma adaptable.
Ya hubo un intento de utilizar tablas para crear diseños responsivos, sin embargo
existían limitaciones para definir la longitud de las columnas lo que hizo imposible su uso
en dispositivos más pequeños, como smartphones.
El elemento <div> es más flexible, ya que permite definir y cambiar el tamaño de la
longitud fácilmente.
Bootstrap le ha asignado al elemento <div> una característica de class container, que
funciona para determinar las dimensiones apropiadas para los elementos insertados en ese
espacio.
Básicamente, o framework funciona con tres tipos de containers:
 Container: como un conjunto con una propiedad de ancho máximo, que determina
qué tamaño de tela es ideal para crear el diseño de página.
 Container-fluid: considera la longitud total de la tela del dispositivo para definir el
diseño. Para esto, se considera la propiedad width —100% en todos los límites de
tamaño de tela—.
 Container-{ breakpoint}: considera width —100% hasta alcanzar un cierto tamaño
(htt57).
Definiciones de HTML, CSS y JavaScript
Todo website se compone de dos caras: el Back End y el Front End. El primero tiene
que ver con el desarrollo del elemento web que no está visible para los usuarios, y el front-
end representa la interfaz gráfica de un sitio web, desde la estructura hasta los estilos, como
18
puede ser la definición de los colores, tipografías, texturas, secciones, entre otros. Su uso es
determinante para que el usuario tenga una buena experiencia cuando navega por el sitio u
aplicación.
HTML, CSS y Javascript son tres lenguajes que se utilizan en el Front End, es decir, que
se utilizan en el lado del usuario. HTML existe desde los inicios de Internet y a partir del
crecimiento de este lenguaje surge CSS para mejorar la parte estética de los website creados
a partir de HTML. Por último surge Javascript para darle interactividad.
HTML: Su nombre es una sigla que proviene de “HyperText Markup Language”. En la
práctica, se utiliza para programar la estructura semántica de un website a través del uso de
tags (etiquetas).
Por ejemplo, para insertar un párrafo se usa la etiqueta <p> justo al inicio y al final del
párrafo.
De esta manera, estamos ante un lenguaje de marcado que sirve para estructurar
elementos de la página, como enlaces, tablas, párrafos, títulos, videos e imágenes.
CSS: Proviene de “Cascading Style Sheet”. Se trata de un lenguaje de estilo, por ende,
se usa para programar la estética y visual del sitio.
CSS se puede escribir dentro del archivo HTML, aunque también en un archivo
separado, importándolo luego al documento HTML. Gracias a él se definen fuentes, colores
y tamaños, posicionamiento y animaciones, entre otros detalles.
JavaScript: Se trata de un lenguaje de programación que viene a complementarse con los
otros dos elementos descritos. Su función es proporcionar dinamismo e interactividad a los
websites, pero también posibilita el procesamiento y transformación de los datos enviados y
recibidos. Es decir que gracias a Javascript el desarrollador crea contenidos que se
actualizan de forma dinámica y animada. Además, gracias a NodeJS, podemos utilizarlo no

19
sólo para trabajar en Front End, si no también en Back End ya que consiste en un entorno
de código abierto multiplataforma que ejecuta el código JavaScript fuera de un navegador.
Orientado a eventos asíncronos (no dependen de que otros se hayan ejecutado previamente)
permite crear aplicaciones escalables con la posibilidad de realizar conexiones de manera
simultánea sin que tenga que leer el código línea a línea, ni abrir múltiples procesos.
(htt58)
20
Requerimientos
Requerimientos No Funcionales
La aplicación web cuenta con los requerimientos funcionales y no funcionales,
los cuales se menciona a continuación; en la tabla 1 podemos visualizar los
requerimientos no funcionales que se elaboraron en el proyecto.
Tabla 1. RF-01 Requerimientos no funcionales
ID RNF-01 Prioridad: Esencial
Responsable Marcos Rodolfo Apolinar
Descripción Interfaces
Fácil de interactuar para el usuario
Fácil manejo en el control de procesos
Satisfacer las necesidades de la Unidad Médica
Requerimientos Funcionales
Los requerimientos funciones para el desarrollo del proyecto que podemos
visualizar son los siguientes:
En la tabla 2 se muestra el requerimiento funcional de la autenticación de los
usuarios, que permitirá al usuario administrador crear, modificar y eliminar los
21
usuarios que van a utilizar la aplicación web.
22
Tabla 2. RF-02 Autenticación
ID RF-02 Prioridad: Esencial
Descripción Autenticación
Permite el ingreso de los usuarios, con su respectivo usuario y
contraseña.
En la tabla 3 se muestra el requerimiento funcional de ingreso de pacientes, en
el cual el usuario paciente para agendar una cita médica tiene obligatoriamente
registrase en la aplicación.
Tabla 3. RF-06 Ingreso de pacientes
Descripción Ingreso de pacientes
En la tabla 4 se muestra el requerimiento funcional de reportes, el médico tiene
acceso a generar reportes de diagnóstico y permisos médicos de todos sus
pacientes.
23
Tabla 4. RF-09 Reportes
Descripción Reportes
Permite consultas cita médicas, Diagnóstico, permisos de los
pacientes. Generar listado de pacientes y médicos de la Unidad
Médica
Plataforma de desarrollo
Para el desarrollo del proyecto se han utilizado los siguientes recursos tecnológicos:
Software
WebStorm
IDE Desarrollo
PhpStorm
Servidor Local XAMPP
24
Servidor Web Servidor compartido Ionos
Maquetado documentación Microsoft Word
Diseño Gráfico Photoshop
Creación de Wireframes Balsamiq
Chrome
Navegadores testeo
Firefox
Web app
Control de versiones GitHub
Respaldo de documentación Google Drive
Tabla 5
Tabla 6: Web app utilizadas en el desarrollo del proyecto
Hardware
Windows
Ordenadores
Pantalla auxiliar LG Ultrawide
Tabla 7: Hardware utilizado para el desarrollo del proyecto
Presupuesto
A continuación, se detallará el presupuesto estimado para el diseño y desarrollo de la aplicación
web. Para el equipo humano se ha estimado que se trabajará durante 4 horas cada día, por lo que
tenemos en total 860 horas. Si a esto lo multiplicamos por el importe por hora que cobra un ingeniero,
estimado en 35Q/hora.
Obtenemos el importe total de 30.100Q.
EQUIPO HUMANO
Acciones Tiempo Horas Importe
Definición de la idea principal 7 días 28 h 980 Q
Planificación y análisis de requisitos 4 días 16 h 560 Q
Elaboración de propuestas y solución final 4 días 16 h 560 Q
Diseño de la aplicación 20 días 80 h 2.800 Q
Desarrollo de la aplicación 180 días 720 h 25.200 Q
25
TOTAL 30.100Q
Tabla 8: Presupuesto equipo humano
EQUIPAMIENTO TÉCNICO
Recursos Tipo de pago Importe por unidad Importe anual
Servidor web mensual 80 Q 960 Q
Dominio (.es y .com) anual 14 Q 28 Q
WebStorm anual 129 Q 129 Q
PhpStrom anual 199 Q 199 Q
Balsamiq anual 90 Q 90 Q
Protosol mensual 29,99 Q 359,88 Q
TOTAL 1.765,88 Q
Cronograma planificación
Cada día está estipulado una jornada de 4 horas.
Nombre Duració Inicio Final Hor

n as
Inicio del proyecto 15 días 20/02/2024 10/05/2024 58
h
Búsqueda y organización de información 7 días 28 h
Introducción 3 días 12 h
Enfoque y método seguido 1 día 4h
Creación de índice 1/2 día 2h
Planificación del trabajo 3 días 12 h
Diseño de la aplicación 20 días 07/03/2024 26/03/2024 80 h
Árbol de navegación 1 día 4h
Diseño de Wireframes 3 días 12 h
Modelo de Base de datos 2 días 8h
Redacción y corrección de memoria 8 días 32 h
Desarrollo de la aplicación 47 días 26/03/2024 3/05/2024 188 h
Configuración del espacio de trabajo 1 día 4h
Programación de la aplicación 34 días 136 h
26
Maquetación y estilos de la aplicación 6 días 24 h
Revisión errores y testeo de la aplicación 2 días 8h
Creación video funcionamiento aplicación 1 días 4h
Documentar desarrollo aplicación 3 días 12 h
Fase final del proyecto 29 días 03/05/2024 10/05/2024 116 h
Programación de aplicación y corrección errores 15 días 60 h
Documentación y revisión del proyecto 10 días 40 h
Elaboración presentación final 4 días 16 h
Total 442 h
27
Pruebas ambiente, pruebas técnicas y producción
Se inicia con el login:
Si no tiene una cuenta, tiene la opción se poder registrarse y crear una “cuenta”:
Todos los campos tienes validadores que impiden que se ingresen cualquier tipo de dato:
28
También tiene validadores en el registro, donde nos indica que debemos llenar todos los campos,
por ejemplo:
29
En este caso indica que el correo es requerido y se deben llenar todos los campos, también indica
que las contraseñas deben coincidir.
30
En este caso indica que no llenamos los campos de contraseñas:
Tenemos un pre requisito que se indicó en el lado del Backend, las contraseñas deben tener como
mínimo 4 dígitos, de lo contrario mostrará este error:
31
Donde dice min:4 indica que debe tener como mínimo 4 caracteres o dígitos o lo que sea, son datos
alfanuméricos:
Si intentamos acceder con un correo que ya existe también nos tirará otro error:
32
Cuando se crea un nuevo usuario nos tira de nuevo al login para que podamos ingresar nuestros
credenciales directamente, aunque esta vez nos tira un mensaje adicional en el login:
33
Cuando iniciamos sesión nos tira al dashboard o al index:
Esta es la dirección con la que se accede, el dashboard es una dirección protegida por el login, si no
se acceden primero los credenciales no podremos acceder aunque sepamos la dirección exacta:
34
Si el usuario no existe en la base de datos nos regresará un mensaje de error:
Si logramos acceder al dashboard esta será la vista que tendremos:
Siempre tendremos la opción de cerrar sesión, si pulsamos el botón de cerrar sesión regresaremos a
la vista del login:
En la base de datos las bases de datos se guardan encriptadas:
35
Los íconos de las redes sociales son hipervínculos que si son presionados nos redireccionarán a las
páginas oficiales del “negocio”, en este caso a las páginas “home”.
36
Este es un formulario que debe ser llenado para que nos podamos poner en contacto con la persona
interesada en nuestros servicios:
Cuando el formulario es enviado, nosotros enviamos un mensaje “alert” en la parte posterior, esto lo
hacemos median Java Script:
Los datos se muestran de esta manera:
37
Resultados de pruebas
Lo resultados de las pruebas en la aplicación web.
Resultados obtenidos:
Sin errores = OK Tipos de error:
 Tiempo de respuesta = TR
 Error de procesamiento = EP (No termina la ejecución por algún error).
 Error de funcionalidad = EF (Puede terminar la ejecución, pero no tiene la misma
funcionalidad).
Los resultados están basados en los objetivos que fueron tomados en el levantamiento del
proyecto, la cual fue desarrollada bajo un entorno web para el control de donde se
analizaron los factores relaciones con atención medica de los pacientes, se logró optimizar
de una mejor manera el control de agenda miento a través de la aplicación web y facilitar
de una manera más rápida la búsqueda de la información
38
Códigos
El autenticador:
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Symfony\Contracts\Service\Attribute\Required;
class AuthController extends Controller
/**
* Display a listing of the resource.
* @return \Illuminate\Http\Response
*/
public function index()
//
39
}
public function register()
//view codigo html para mostrar al usuario
return view('auth/register');
public function registerVerify(Request $request)
//Muestra los valores ingresados en el formulario
//dd($request->all());
$request->validate([
'email' => 'required|unique:users,email|email',
'password' => 'required|min:4',
'password_confirmation' => 'required|same:password'
], [
'email.required' => 'El email es requerido',
'email.unique' => 'El email ya a sido utilizado',
'email.email' => 'Solo puedes ingresar correos válidos',
'password.required' => 'La contraseña es requerida',
'password.min' => 'La contraseña debe tener al menos 4',
'password_confirmation.required' => 'La contraseña es requerida',
'password_confirmation.min' => 'La contraseña debe tener al menos 4'
40
]);
User::create([
'email' => $request->email,
'password' => bcrypt($request->password)
]);
return redirect()->route('login')->with('success', 'Usuario registrado correctamente');
public function login()
return view('auth.login');
public function loginVerify(Request $request)
$request->validate([
'email' => 'required|email',
'password' => 'required|min:4'
], [
'email.required' => 'El email es requerido',
'email.email' => 'El email debe ser válido',
'password.required' => 'La contraseña es requerida',
41
'password.min' => 'la contraseña debe tener como min 4'
]);
if(Auth::attempt(['email'=>$request->email, 'password'=>$request->password])){
return redirect()->route('dashboard');
// else if(Auth::attempt(['email'=>$request->email, 'password'=>$request->password]))
// return redirect()->route('sobreNosotros');
// }
else if(Auth::attempt(['email'=>$request->email, 'password'=>$request->password])){
return redirect()->route('contactanos');
return back()->withErrors(['invalid_credentials'=> 'Usuario o contraseña inválida'])-
>withInput();
public function signOut(){
Auth::logout();
return redirect()->route('login')->with('success', 'Sesión cerrada correctamente');
42
}
Las rutas:
<?php
use App\Http\Controllers\Auth\AuthController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
*/
Route::get('/', function () {
return view('welcome');
});
43
// auth, ruta que mostrará el formulario de login y las autenticaciones
Route::prefix('auth')->group(function(){
//Ejemplo de vista
Route::get('login', [AuthController::class, 'login'])->name('login');
//Enviar datos del login
Route::post('login',[AuthController::class,'loginVerify']);
//Datps regostro
Route::get('register',[AuthController::class,'register'])->name('register');
//Enviar los datos del formulario
Route::post('register',[AuthController::class,'registerVerify']);
//cerrar sesión
Route::post('signOut',[AuthController::class,'signOut'])->name('signOut');
});
//rutas protegidas por el login
//middleware valida
Route::middleware('auth')->group(function() {
Route::get('dashboard', function() {
return view('dashboard.index');
})->name('dashboard');
// Route::get('sobreNosotros', function() {
// return view('dashboard.sobreNosotros');
// })->name('sobreNosotros');
44
Route::get('contactanos', function() {
return view('dashboard.contactanos');
})->name('contactanos');
});
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trastornados</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>

<body>
<!DOCTYPE html>
45
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dashboard</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>

<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="{{ route('dashboard') }}">Trastornados</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
46
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-
scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link" href="{{ route('contactanos') }}">Contáctanos</a>
</li>
</ul>
<form method="post" action="{{ route('signOut') }}">
@csrf
<button type="submit" class="btn btn-primary btn-block">Cerrar
sesión</button>
</form>
</div>
</div>
</nav>
<header class="bg-dark p-1 opacity-75 mt-auto">
<h1 class="display-1 text-center text-white tamanio">TRASTORNADOS</h1>
<h2 class="display-2 text-center text-white tamanio">Comprometidos con tu salud
mental</h2>
</header>
<div class="row row-cols-1 row-cols-md-2 g-4">
47
<div class="col">
<div class="card">
<img src="/img/img1Index.jpg" class="card-img-top custom-card-img"
alt="Imagen medico">
<div class="card-body">
<p class="card-text">Tenemos a personal altamente capacitado</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<p class="card-text">Nuestras medicinas son las mejores del mercado</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<p class="card-text">Estamos comprometidos con tu salud mental</p>
48
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="/img/imag4Index.jpg" class="card-img-top custom-card-img"
<p class="card-text">Contamos con mucho personal</p>
</div>
</div>
</div>
</div>
<footer class="pb-0">
<div class="container-fluid bg-dark text-white">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="fot">
<strong>
<h3>Oficinas centrales:</h3>
</strong>
<h4>Coatepeque UMG</h4>
49
<h4>Quetzaltenango Quetzaltenango</h4>
</div>
</div>
<div class="fot">
<strong>
<h3>Contacto:</h3>
</strong>
<h4>0000-0000</h4>
<h4>3006-4005</h4>
</div>
</div>
<div class="fot">
<strong>
<h3>Email:</h3>
</strong>
<h4>[email protected]</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="redes-sociales">
50
<a target="_blank" href="https://www.facebook.com/"><img
src="/img/facebook.svg" alt="icono facebook"></a>
<a target="_blank" href="https://web.whatsapp.com/"><img
src="/img/whatsapp.svg" alt="icono whatsApp"></a>
<a target="_blank" href="https://www.linkedin.com/"><img
src="/img/linkedin.svg" alt="icono linkedin"></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="copy">
Copyright © Derechos de Trastornados, todos los derechos
reservados
</div>
</div>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2p
51
M8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</body>
</html>
52
Acta de Constitución
CONTROL DE VERSIONES
Versió Hecha Revisada por Aprobada Fecha Motivo

n por por
2.0 RA AV AV 10-05-24 Versión original
ACTA DE
CONSTITUCIÓN
DEL PROYECTO
NOMBRE DEL PROYECTO SIGLAS DEL PROYECTO
Sistema de Control de pacientes con Trastornos Comprometidos ala salud

Problemas Mentales
FINALIDAD DEL PROYECTO: El propósito último del proyecto es mejorar la atención.
Generar ingresos para la empresa.
OBJETIVOS DEL PROYECTO:
CONCEPTO OBJETIVOS CRITERIO DE ÉXITO
1. ALCANCE Desarrollar un sistema de registro de Aprobación de todos los

pacientes que permita almacenar entregables por parte del
información detallada sobre su historial cliente.
médico y contactos de emergencia.
2. CRONOGRAMA Concluir el proyecto en el plazo Concluir el proyecto para 10

solicitado. de mayo.
3. COSTO Cumplir con el presupuesto estimado del No exceder el presupuesto del

proyecto. proyecto.
DEFINICIÓN DE REQUISITOS DEL PROYECTO: DESCRIBIR LOS REQUERIMIENTOS

FUNCIONALES, NO FUNCIONALES, DE CALIDAD, ETC., DEL PROYECTO.
53
Requisitos Funcionales:
 Informativa.
Requisitos No Funcionales:
 Interfaz de usuario intuitiva y fácil de usar.

Requisitos de Calidad:
 Garantizar la precisión y confiabilidad de la información almacenada en el sistema.
 Proporcionar soporte técnico y actualizaciones periódicas para mantener el sistema en óptimas
condiciones.
DESCRIPCIÓN GENERAL DEL PROYECTO, LÍMITES Y ENTREGABLES CLAVE:
El proyecto consiste en diseñar, desarrollar e implementar un sistema de registro y gestión de pacientes

con problemas mentales.
El proyecto será realizado desde el 03 de marzo hasta 10 de mayo.
RIESGOS GENERALES DEL PROYECTO:
R001 Problemas sindicales con el cliente podrían provocar huelgas, paros o

manifestaciones, lo que podría causar retrasos en el cronograma.
R003 Procesos inadecuados de aseguramiento y control de calidad.
R004 Una definición insuficiente de alcance e identificación de los interesados.
CRONOGRAMA DE HITOS DEL PROYECTO:
HITO O EVENTO FECHA PROGRAMADA

SIGNIFICATIVO
Inicio del Proyecto. 03 de marzo.
1. Gestión del Proyecto. Del 03 de marzo al 10 de mayo.
Fin del Proyecto. Lunes 10 de mayo.
RECURSOS Fondos destinados para el desarrollo y la implementación del sistema de

FINANCIEROS DEL registro y gestión de pacientes.
PROYECTO:
CONCEPTO MONTO (Q)
4. OTROS COSTOS Refrigerio, Transportes, Otros. 7,150

TOTAL LÍNEA BASE
11,135 3,615
5. RESERVA DE 1,360
CONTINGENCIA
54
6. RESERVA DE GESTIÓN 5,852
TOTAL PRESUPUESTO 35,512.00 35,512.00
LISTA DE INTERESADOS CLAVE:
Nadie 0
REQUISITOS DE 100,000.000
APROBACIÓN DEL
PROYECTO:
El proyecto será exitoso
CRITERIOS DE CULMINACIÓN DEL PROYECTO:
El proyecto será cerrado del proyecto o no lo considere como necesidad.
DESIGNACIÓN DEL DIRECTOR DE PROYECTO:

Proyecto de Marcos Rodolfo Apolinar
Ing. Alberto Marroquín
55
Conclusión
Con el desarrollo de la aplicación web se logra mejorar la atención a los se tiene beneficios
que ayudan al control del agenda miento de citas médicas y manejo del historial clínico del
paciente donde los médicos pueden agilizar de una manera más efectiva y rápida la
atención a sus clientes.
En el proyecto se analizaron los factores relacionados a la atención médica con el único
objetivo de optimizar de una manera muy eficaz y rápida la asistencia médica en los
pacientes, y a su vez brindar un mejor control del historial clínico de los pacientes.
Con la integración de reportes o informes que se pueden generar, la aplicación alcanza una
funcionalidad importante en el sistema, ya que con los resultados visualizados se toman
decisiones que conlleven a un aumento de aceptación de clientes.
56
Recomendaciones
 Se recomienda el uso de la aplicación web de manera constante para mantener los
datos asegurados y respaldados, también de recomienda la copia de seguridad de la
información cada tres meses para evitar perdida de datos.
 Se recomienda para un trabajo futuro agregar un módulo de facturación que permite
al paciente realizar sus pagos una vez escogida la cita médica.
 Se recomienda el mantenimiento respectivo de la aplicación web para evitar futuros
errores posibles que se pueden generar a futuros.
 Como complemento para un buen funcionamiento del sistema dentro de la
institución es recomendable un mejor servicio de internet evitando retrasos en el
manejo de la aplicación.
57
Anexos
58
59
60
61
62
63
64
65
66
67
Bibliografía
(s.f.). Obtenido de https://es.wikipedia.org/wiki/PHP
(s.f.). Obtenido de https://blog.hubspot.es/website/que-es-mysql
(s.f.). Obtenido de https://talently.tech/blog/que-es-laravel/
(s.f.). Obtenido de https://rockcontent.com/es/blog/bootstrap/#google_vignette
(s.f.). Obtenido de https://www.digitalhouse.com/blog/html-css-y-javascript-para-que-sirve-
cada-lenguaje/#:~:text=HTML%2C%20CSS%20y%20Javascript%20son,creados
%20a%20partir%20de%20HTML.
68

Laboratorio 2 Marcos Apolinar Programacion III

Cargado por

Copyright:

Formatos disponibles

Laboratorio 2 Marcos Apolinar Programacion III

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Laboratorio 2 Marcos Apolinar Programacion III

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD MARIANO GALVEZ DE GUATEMALA

Facultad de Ingeniería en Sistemas de Información

Centro Regional de Coatepeque

Curso: Programación lll

Catedrático: Ing. Alberto Marroquín

pacientes con Problemas

Marcos Rodolfo Arana Apolinar

Coatepeque, 10 de Mayo de 2,024

1. Planteamiento del problema-------------------------------------------------------------------

6. Objetivos general y especifico----------------------------------------------------------------

8. Análisis del problema--------------------------------------------------------------------------

10. Marco teorico-----------------------------------------------------------------------------11-19

12. Plataforma de desarrollo---------------------------------------------------------------22-23

15. Pruebas ambiente, pruebas técnicas y producción------------------------------------25-

16. Acta de Constitución---------------------------------------------------------------------50-52

Los sistemas informáticos en la actualidad, especialmente en este tiempo de pandemia,

brindan un amplio soporte en el ámbito empresarial, debido a que ayudan en la

optimización de procesos y recursos en los distintos niveles jerárquicos dentro de la

organización y en este proyecto de desarrollo e implementación de una aplicación web que

futuros errores en la manipulación de información.

El proyecto desarrollado tiene como finalidad coordinar y mejorar el proceso de ingreso de

el desarrollo diario de la Unidad Médica.

Se evidencia que al no poseer un sistema informático que ayude en la gestión de control

excesivamente alto, provocando desorganización en la planificación y malestar en el

público objetivo. Además, dificultades con, búsquedas manuales de información, tiempo

de registros de forma manual, la pérdida o duplicación de la información de los pacientes,

genera una imagen deficiente.

Se ve en la necesidad de contar con un sistema informático que les permita la

demuestre el profesionalismo. Brindando una mejor atención mediante la optimización de

tiempo y recursos y fomentando confianza.

Las instituciones de prestaciones de salud a nivel mundial mantienen un desafío continuo

gestión en la sociedad, recursos adecuados asistenciales, monitoreo y entrega de

información temprana y evaluación de sus procesos de manera constante.

un diseño personalizado, adaptado a las necesidades del personal médico y administrativo

de medicina, evolución y reporte médico, entrega de certificados médicos, todo esto

disponible mediante un servicio web.

administración en los datos manejados.

permitiéndoles obtener seguridad y mayor confianza.

El desarrollo e implementación de la aplicación web para el control de citas e historial mé.

garantizando fiabilidad y seguridad en el manejo de los datos almacenados de los pacientes

con problemas mentales.

 Gestionar de manera eficiente y coordinada la atención al paciente.

 Brindar a médicos tratantes la facilidad de obtener datos precisos al instante.

 Optimizar el tiempo para ofrecer un diagnóstico veraz al paciente.

 Permitir a médicos de la institución llevar reportes globales y específicos del

 Realizar pruebas de software / aceptación para validar la aplicación propuesta

Análisis del problema

Se plantea la creación de un módulo que permita la autenticación a la aplicación de parte de

Módulo de Agentamiento y Valoración

seleccionado de acuerdo con la disponibilidad asignada por el médico.

para una valoración y asistencia médica oportuna

toma de decisiones que permita mejorar procesos. Estos no ayudan a la búsqueda de

Análisis del Proyecto

se adapta especialmente al desarrollo web. Fue creado inicialmente por

el programador danés-canadiense Rasmus Lerdorf en 1994. En la actualidad,

la implementación de referencia de PHP es producida por The PHP Group. PHP

inicializo recursivo PHP: Hipertexto Reprocesar.

desarrollado como un módulo, un daemon o como un ejecutable de interfaz de entrada

de plantillas, sistemas de gestión de contenidos y frameworks que pueden emplearse para

gráficas autónomas y el control de drones. También se puede interpretar y ejecutar un