SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

PLAN DE TRABAJO
DEL ESTUDIANTE
 TRABAJO FINAL DEL CURSO

1. INFORMACIÓN GENERAL

Apellidos y Nombres: Bruce Alexis Melo Rengifo ID: 1525573

Dirección Zonal/CFP: Loreto, CFP Iquitos
Carrera: Ingeniería de Software con IA Semestre: III
Curso/ Mód. Formativo Backend Developer Web
Tema del Trabajo: Documentación del Desarrollo

2. PLANIFICACIÓN DEL TRABAJO

N ACTIVIDADES/
CRONOGRAMA/ FECHA DE ENTREGA
° ENTREGABLES
1
2 Entregable 1 y 2 30/06/24
3
4
5

3. PREGUNTAS GUIA
Durante la investigación de estudio, debes obtener las respuestas a las siguientes interrogantes:

Nº PREGUNTAS

2
 TRABAJO FINAL DEL CURSO

HOJA DE RESPUESTAS A LAS PREGUNTAS GUÍA

1.

2.

3.

4.

5.

6.

3
 TRABAJO FINAL DEL CURSO

HOJA DE PLANIFICACIÓN

SEGURIDA
OPERACIONES / PASOS /SUBPASOS D / MEDIO
AMBIENTE
/ NORMAS
-
ESTANDA
RES
1. El primer paso realizado fue crear las carpetas donde irán los archivos PHP dichas AHORR
O DE
carpetas seguirán las reglas del patrón de diseño MVC
ENERGÍ
A
La estructura sería de la siguiente manera
C:\xampp\htdocs\crud
│ .htaccess # Archivo de configuración de Apache
│ autoload.php # Archivo de autoloading para cargar clases
automáticamente
│ index.php # Archivo principal de entrada
│
├───app
│ ├───ajax
│ │ buscadorAjax.php # Archivo PHP para solicitudes de búsqueda AJAX
│ │ usuarioAjax.php # Archivo PHP para solicitudes de usuario AJAX
│ │
│ ├───controllers
│ │ loginController.php # Controlador de inicio de sesión
│ │ searchController.php # Controlador de búsqueda
│ │ userController.php # Controlador de usuarios
│ │ viewsController.php # Controlador de vistas
│ │
│ ├───models
│ │ mainModel.php # Modelo principal
│ │ viewsModel.php # Modelo de vistas
│ │
│ └───views
│ ├───content
│ │ 404-view.php # Vista de error 404
│ │ dashboard-view.php # Vista del panel de control
│ │ login-view.php # Vista de inicio de sesión
│ │ logOut-view.php # Vista de cierre de sesión
│ │ userList-view.php # Vista de lista de usuarios
│ │ userNew-view.php # Vista de nuevo usuario
│ │ userPhoto-view.php # Vista de fotos de usuarios
4
 TRABAJO FINAL DEL CURSO

│ │ userSearch-view.php # Vista de búsqueda de usuarios

│ │ userUpdate-view.php # Vista de actualización de usuarios
│ │
│ ├───css
│ │ bulma.min.css # Framework CSS Bulma
│ │ estilos.css # Estilos personalizados
│ │ sweetalert2.min.css # Estilos para SweetAlert2
│ │
│ ├───fotos
│ │ default.png # Foto predeterminada
│ │
│ ├───img
│ │ logoSenati.png # Logo de Senati
│ │
│ ├───inc
│ │ btn_back.php # Botón de retroceso
│ │ error_alert.php # Alerta de error
│ │ head.php # Encabezado HTML
│ │ navbar.php # Barra de navegación
│ │ script.php # Script común
│ │ session_start.php # Inicio de sesión
│ │
│ └───js
│ ajax.js # JavaScript para AJAX
│ main.js # JavaScript principal
│ sweetalert2.all.min.js # SweetAlert2
│
├───config
│ app.php # Configuración de la aplicación
│ server.php # Configuración del servidor
│
└───DB
db.sql # Script SQL de la base de datos

2. El siguiente paso sería definir varias constantes en el archivo server.php que se

usan para configurar la conexión a la base de datos en la aplicación. Estas
constantes incluyen la dirección del servidor de la base de datos, el nombre de la
base de datos, el nombre de usuario y la contraseña. Estas configuraciones
permiten que la aplicación se conecte y interactúe con la base de datos MySQL.

PROCESO DE EJECUCIÓN

5
 TRABAJO FINAL DEL CURSO

También vamos a configurar algunas constantes importantes en el archivo app.php

para la aplicación (como la URL base y el nombre de la aplicación) y establecer la
zona horaria predeterminada para el servidor, asegurando que las operaciones de
fecha y hora se realicen en la zona horaria correcta.

(en las imágenes proporcionadas esta la documentación del codigo)

3. Luego en la carpeta principal creamos el archivo autoload.php para configurar una

función de autocarga para la aplicación.

Esta función toma el nombre de una clase que se está intentando usar. Construye
una ruta de archivo basada en el nombre de la clase y la ubicación del archivo
actual. Reemplaza las barras invertidas con barras inclinadas en la ruta del archivo.
Verifica si el archivo existe.
Incluye el archivo si existe.
Este mecanismo de autocarga es útil porque permite cargar clases automáticamente
sin necesidad de incluir manualmente cada archivo de clase en el código.

(en las imágenes proporcionadas esta la documentación del codigo)

4. Luego en el archivo .htaccess realizaremos lo siguiente:

 Activar el módulo de reescritura de URL de Apache.

 Desactivar la lista de directorios para mejorar la seguridad.

 Reescribir las URL amigables para que las solicitudes se dirijan a index.php
con el parámetro views establecido en la parte coincidente de la URL.

(en las imágenes proporcionadas esta la documentación del codigo)

5. También utilizamos Bulma y SweetAlert2 dos herramientas útiles para el

desarrollo web que facilitan la creación de interfaces de usuario atractivas y
funcionales.
Los archivos iran en la carpeta CSS y JS correspondiente.

Bulma es un framework CSS basado en Flexbox que permite crear

diseños web modernos y responsivos con facilidad.

Sus principales características incluyen:

 Componentes predefinidos: Como botones, tarjetas y formularios.

PROCESO DE EJECUCIÓN
6
 TRABAJO FINAL DEL CURSO

 Responsive: Adaptación automática a diferentes tamaños de pantalla.

 Modular: Posibilidad de incluir solo las partes necesarias del framework.

 Facilidad de uso: Sintaxis clara y coherente.

SweetAlert2 es una librería JavaScript para crear alertas

personalizadas y estilizadas.

Sus características principales son:

 Alertas estilizadas: Diseño atractivo que se integra bien con la interfaz de

usuario.

 Personalización: Amplias opciones de personalización, incluyendo colores,

iconos, botones y animaciones.

 Interactividad: Elementos interactivos como botones de confirmación y

campos de entrada.

 Facilidad de uso: API simple y directa.

Importamos al proyecto sweetalert2.all.js y sweetalert2.min.css

 sweetalert2.all.js: Archivo JavaScript con la funcionalidad principal de

SweetAlert2.

 sweetalert2.min.css: Archivo CSS minificado con los estilos necesarios

para las alertas de SweetAlert2.

Uso conjunto en un proyecto web

Ambas herramientas pueden ser usadas en conjunto para mejorar la estética y

funcionalidad de tu sitio web. Bulma proporciona la estructura y el estilo general,
mientras que SweetAlert2 añade interactividad y alertas visualmente atractivas.

(en las imágenes proporcionadas esta la documentación del codigo)

7
 TRABAJO FINAL DEL CURSO

proporciona una solicitud válida, redirige al usuario a la página de

inicio de sesión.
 usuarioAjax.php: Gestiona las solicitudes AJAX
relacionadas con los usuarios.
 Este script PHP maneja acciones relacionadas con usuarios en una
aplicación web. Dependiendo de la solicitud recibida a través de
POST (modulo_usuario), llama a métodos específicos en un
controlador de usuario para realizar operaciones como registro,
actualización, eliminación o manejo de fotos de usuarios. Si no se
proporciona una solicitud válida, redirige al usuario a la página de
inicio de sesión.
o controllers: Contiene los controladores que gestionan la lógica de
negocio y actúan como intermediarios entre el modelo y la vista.
 loginController.php: Controlador que gestiona el proceso
de inicio de sesión.
 searchController.php: Controlador que maneja las
operaciones de búsqueda.
 userController.php: Controlador que gestiona las
operaciones CRUD de usuarios.
 viewsController.php: Controlador que gestiona la lógica
relacionada con las vistas.
o models: Incluye los modelos que representan la estructura de los datos
y gestionan la lógica de acceso a la base de datos.
 mainModel.php: Modelo principal que contiene la lógica base
para la interacción con la base de datos.

mainModel.php define una clase mainModel que encapsula

métodos para interactuar con una base de datos MySQL usando
PDO. Proporciona métodos para conectar a la base de datos,
ejecutar consultas SQL, limpiar cadenas de posibles secuencias
peligrosas, verificar datos, guardar datos en la base de datos,
seleccionar datos según criterios, actualizar registros, eliminar
registros y generar un paginador HTML para tablas. Estos métodos
están diseñados para ser heredados y utilizados por otras clases en
la aplicación para manejar operaciones CRUD de manera segura y
eficiente.

 viewsModel.php: Modelo específico para la gestión de las

vistas.

la clase viewsModel contiene un método obtenerVistasModelo que

se utiliza para determinar la vista correcta a cargar basada en el
nombre de la vista solicitada. Comprueba si la vista está en una
8
 TRABAJO FINAL DEL CURSO

lista blanca de vistas permitidas y si el archivo correspondiente

existe. Si no es así, maneja casos especiales como "login" e
"index" o retorna "404" si la vista no es válida o no existe.

o views: Contiene las vistas que gestionan la presentación de los datos al

usuario.
 content: Vistas específicas para diferentes funcionalidades
(404, dashboard, login, logout, lista de usuarios, nuevo usuario,
foto de usuario, búsqueda de usuarios, actualización de usuarios).
 css: Hojas de estilo en cascada para la presentación
(bulma.min.css, estilos.css, sweetalert2.min.css).
 fotos: Almacena las fotos de los usuarios (default.png).
 img: Imágenes generales del proyecto (logoSenati.png).
 inc: Incluye fragmentos reutilizables de PHP (botón de retroceso,
alerta de error, encabezado HTML, barra de navegación, script
común, inicio de sesión).
 js: Scripts JavaScript que gestionan la interactividad del lado del
cliente (ajax.js, main.js, sweetalert2.all.min.js).

 Directorio config: Contiene las configuraciones de la aplicación.

o app.php: Configuraciones generales de la aplicación.
o server.php: Configuraciones específicas del servidor.

 Directorio DB: Contiene los scripts SQL relacionados con la base de datos.
o db.sql: Script SQL para la configuración de la base de datos.

Conclusión

Este proyecto CRUD implementado utilizando el modelo MVC demuestra una

aplicación organizada y modular, lo que facilita su desarrollo, mantenimiento y
escalabilidad. A continuación, se destacan los aspectos clave del proyecto y las
ventajas de utilizar el patrón MVC:

1. Separación de Responsabilidades:
o Modelo (Model): Gestiona la lógica de acceso y manipulación de los
datos. En este proyecto, mainModel.php y viewsModel.php son
responsables de estas tareas.
o Vista (View): Encargada de la presentación de los datos. La carpeta
views contiene todas las vistas que representan la interfaz de usuario.
o Controlador (Controller): Actúa como intermediario entre el Modelo y
la Vista. Los controladores en la carpeta controllers gestionan la
lógica de negocio y responden a las solicitudes del usuario.
9
 TRABAJO FINAL DEL CURSO

2. Facilidad de Mantenimiento:
o La separación de responsabilidades permite que los desarrolladores
trabajen en diferentes componentes del proyecto sin interferir en otras
partes, facilitando la identificación y solución de errores.

3. Reutilización de Código:
o Los fragmentos reutilizables en inc y los scripts comunes en js y css
promueven la reutilización de código, reduciendo la duplicación y
mejorando la consistencia.

4. Escalabilidad:
o La estructura modular del proyecto facilita la adición de nuevas
funcionalidades sin afectar significativamente las existentes. Nuevas
vistas, controladores y modelos pueden integrarse de manera ordenada y
eficiente.

5. Interactividad y Mejora de la Experiencia de Usuario:

o El uso de AJAX para manejar las solicitudes asincrónicas permite una
experiencia de usuario más fluida y dinámica, evitando recargas
completas de la página y mejorando la velocidad de respuesta de la
aplicación.

En resumen, este proyecto CRUD bien estructurado siguiendo el patrón MVC no solo
cumple con los requisitos funcionales de gestión de usuarios, sino que también
establece una base sólida para futuras expansiones y mejoras, demostrando la
efectividad y eficiencia del modelo MVC en el desarrollo de aplicaciones web.

(en las imágenes proporcionadas esta la documentación del codigo)

PROCESO DE EJECUCIÓN

10
 TRABAJO FINAL DEL CURSO

PROCESO DE EJECUCIÓN

11
 TRABAJO FINAL DEL CURSO

6. También utilizamos para la base de datos MySQL donde creamos una tabla
llamada usuarios con sus respectivos atributos, para poder almacenar a los usuarios
que podrán ingresar a nuestra aplicación.

(en las imágenes proporcionadas esta la documentación del codigo)

Resumen y Conclusió n del Proyecto CRUD siguiendo el Modelo MVC

Resumen del Proyecto

El proyecto CRUD (Create, Read, Update, Delete) se ha desarrollado siguiendo la

arquitectura MVC (Modelo-Vista-Controlador), un patrón ampliamente utilizado en el
desarrollo de software que separa las aplicaciones en tres componentes principales: el
Modelo, la Vista y el Controlador. Esta separación facilita la gestión del código,
mejora la organización y permite una escalabilidad y mantenibilidad más efectiva.

Estructura del Proyecto

El proyecto está alojado en el directorio principal crud y se organiza de la siguiente

manera:

 Archivos Principales:
o .htaccess: Archivo de configuración de Apache para la gestión de
redireccionamientos y configuraciones del servidor web.
o autoload.php: Script para la carga automática de clases PHP.
o index.php: Punto de entrada principal del proyecto.

 Directorio app: Contiene la lógica principal del proyecto dividido en cuatro

subdirectorios.
o ajax: Gestiona las solicitudes asíncronas (AJAX) que permiten una
comunicación fluida y en tiempo real entre el cliente y el servidor sin
necesidad de recargar la página completa.
 buscadorAjax.php: Maneja las solicitudes AJAX
relacionadas con la búsqueda.
 Este script PHP maneja acciones relacionadas con el buscador en
una aplicación web. Dependiendo de la solicitud recibida a través
de POST (modulo_buscador), llama a métodos específicos en un
controlador de búsqueda para realizar operaciones como iniciar
una búsqueda o eliminar resultados de búsqueda. Si no se
PROCESO DE EJECUCIÓN

12
 TRABAJO FINAL DEL CURSO
INSTRUCCIONES: debes ser lo más explícito posible. Los gráficos ayudan a transmitir
mejor las ideas. No olvides los aspectos de calidad, medio ambiente y SHI.

13
 TRABAJO FINAL DEL CURSO

DIBUJO / ESQUEMA/ DIAGRAMA

Paso 2 :

app.php

server.php

14
 TRABAJO FINAL DEL CURSO

Paso 3:
autoload.php

15
 TRABAJO FINAL DEL CURSO

Paso 4:

Paso 5: Importamos bulma y SweetAlert2

16
 TRABAJO FINAL DEL CURSO

Paso 6: BD en MySQL

Imágenes del resto del codigo documentado

Archivo index.php

17
TRABAJO FINAL DEL CURSO

18
 TRABAJO FINAL DEL CURSO

Archivo buscadoAjax.php

19
 TRABAJO FINAL DEL CURSO

Archivo usuarioAjax.php

Interfaz de la aplicación

20
TRABAJO FINAL DEL CURSO

[NOMBRE DEL TRABAJO]

[APELLIDOS Y NOMBRES] [ESCALA]

21
 TRABAJO FINAL DEL CURSO

LISTA DE RECURSOS

INSTRUCCIONES: completa la lista de recursos necesarios para la ejecución del trabajo.

1. MÁQUINAS Y EQUIPOS

PC/LAPTOP
ENERGÍA ELECTRICA
CONEXIÓN A INTERNET

3. HERRAMIENTAS E INSTRUMENTOS

VSCode
Xammp
MySQL sSSSSS

5. MATERIALES E INSUMOS

22