Tecnológico de estudios superiores de
Ixtapaluca
Asignatura: LENGUAJE DE INTERFAZ
Profesor:
Ing. Elsa Palma López
Alumno:
Chico López Jesús 202011335
Grupo: 1601
Fecha de entrega: 16 de mayo de 2023
Introducción
En el campo del desarrollo de software, la creación de aplicaciones web se ha
convertido en una herramienta fundamental para la gestión de información y el
manejo eficiente de bases de datos. En este informe, se presenta una práctica de
desarrollo de un programa basado en el lenguaje de marcado HTML y el sistema de
gestión de bases de datos MySQL. El objetivo principal de esta práctica es
implementar un sistema CRUD (Crear, Leer, Actualizar, Eliminar) que permita a los
usuarios interactuar con la base de datos de manera sencilla y efectiva.
El lenguaje HTML, ampliamente utilizado en el desarrollo web, proporciona una
estructura básica para la creación de páginas web. Por otro lado, MySQL es un
sistema de gestión de bases de datos relacional ampliamente utilizado, conocido
por su fiabilidad y eficiencia. La combinación de estas dos tecnologías permite crear
una aplicación dinámica y robusta, capaz de gestionar la creación, lectura,
actualización y eliminación de datos de manera eficiente.
Durante el desarrollo de esta práctica, se explorarán conceptos clave como la
creación de formularios en HTML para capturar datos, la interacción entre el
programa y la base de datos mediante consultas SQL, y la implementación de
funcionalidades para mostrar, modificar y eliminar registros. Asimismo, se abordarán
aspectos de seguridad y buenas prácticas en el manejo de datos, como la validación
de entradas y la protección contra posibles ataques.
En resumen, este informe presenta una práctica de desarrollo de un programa
CRUD en HTML y MySQL, que busca proporcionar una experiencia interactiva y
eficiente para los usuarios al interactuar con una base de datos. A través del uso de
estas tecnologías, se explorarán diferentes aspectos del desarrollo web y la gestión
de información, enviando las bases para futuros proyectos más complejos y
aplicaciones de mayor escala.
Desarrollo
El desarrollo de este proyecto se basó en un enfoque incremental, siguiendo una
serie de pasos para lograr la implementación exitosa del programa CRUD en HTML
y MySQL.
En primer lugar, se realizó un análisis de requisitos para identificar las
funcionalidades clave que debían tener el programa. Esto completo define los
campos de la base de datos, las acciones de creación, lectura, actualización y
eliminación de registros, así como las interfaces de usuario necesarias para
interactuar con la aplicación.
Una vez establecidos los requisitos, se procedió a la creación de la estructura básica
del programa utilizando HTML. Se diseñen las páginas web necesarias, incluyendo
formularios para ingresar y editar datos, así como páginas para mostrar los registros
existentes y confirmar la eliminación de registros.
Luego, se pasó a la implementación de la lógica del programa utilizando lenguajes
de programación como JavaScript y PHP. Se establezca la conexión entre el
programa y la base de datos MySQL, y se desarrollen las consultas SQL necesarias
para realizar las operaciones CRUD. Además, se aplicarán técnicas de validación
de datos para asegurar la integridad de la información ingresada por los usuarios.
A medida que se completaba la funcionalidad básica, se realizaron pruebas
exhaustivas para garantizar el correcto funcionamiento del programa. Se probaron
diferentes casos de uso, tanto de creación y edición de registros como de
eliminación, comprobando que los datos se guardaran correctamente en la base de
datos y que las operaciones se realizaron de manera segura.
Finalmente, se realizaron mejoras estéticas y de usabilidad en la interfaz de usuario
para brindar una experiencia más intuitiva y atractiva. Se optimizó el rendimiento del
programa y se implementaron medidas de seguridad adicionales, como el filtrado y
saneamiento de datos para prevenir ataques de inyección de SQL.
En conclusión, el desarrollo de este proyecto CRUD en HTML y MySQL siguió un
enfoque metodológico, pasando por etapas de análisis de requisitos, diseño de la
estructura, implementación de la lógica del programa, pruebas exhaustivas y
mejoras finales. El resultado final es un programa funcional y seguro que permite a
los usuarios gestionar eficientemente una base de datos a través de una interfaz
web intuitiva.
Empezamos con el desarrollo de esta mediante capturas de pantalla:
Este fragmento de código HTML representa un formulario de registro de personas.
El formulario está contenido dentro de un contenedor principal con la clase
"container". En el encabezado del formulario se muestra el texto "Contenido
principal".
Dentro del formulario, hay varios grupos de elementos de formulario. Cada grupo
consiste en una etiqueta de texto y un campo de entrada de datos.
El primer grupo contiene un campo para la "Fecha de Registro", que es un campo
de fecha prellenado con la fecha actual y es de solo lectura.
El segundo grupo tiene un campo para ingresar el "CURP" (Clave Única de Registro
de Población), que es un campo de texto con una longitud máxima de 18 caracteres.
Se ha agregado un evento JavaScript para convertir automáticamente el texto
ingresado en mayúsculas.
El tercer grupo es para ingresar el "Nombre", que es un campo de texto normal. Al
igual que el campo anterior, también se ha agregado un evento JavaScript para
convertir automáticamente el texto ingresado en mayúsculas.
El cuarto grupo es para ingresar la "Edad", que es un campo numérico.
El quinto grupo es para el "Sexo", que es un campo de texto de solo lectura.
El sexto grupo es para ingresar la "Talla", que es un campo numérico con un paso
mínimo de 1.20.
El séptimo grupo es para ingresar el "Peso", que es un campo numérico con un valor
mínimo de 30.
El octavo grupo es para el "IMC" (Índice de Masa Corporal), que es un campo
numérico requerido.
Al final del formulario, hay dos botones. El primer botón es para enviar el formulario
y está etiquetado como "Registrarse". Se ha agregado un evento onclick para
verificar los campos antes de enviar el formulario. El segundo botón es para limpiar
todos los campos del formulario.
En resumen, este código HTML crea un formulario de registro de personas con
varios campos de entrada de datos y botones para enviar y limpiar los datos.
Este código PHP se encarga de establecer una conexión a una base de datos
MySQL y manejar la lógica de registro de datos provenientes de un formulario
HTML.
En la primera parte del código, se definen las variables `$servidor`, `$usuario`,
`$contraseña` y `$base_de_datos` para almacenar los detalles de conexión a la
base de datos. Luego, se utiliza la función `mysqli_connect()` para establecer la
conexión con el servidor MySQL. Si la conexión falla, se muestra un mensaje de
error y se termina la ejecución del script.
Después, se comprueba si se han recibido los datos del formulario mediante la
función `isset()`. Se verifica la existencia de las variables `$_POST['curp']`,
`$_POST['nombre']`, `$_POST['edad']`, `$_POST['sexo']`, `$_POST['talla']`,
`$_POST['peso']` y `$_POST['imc']`. Estas variables contienen los valores
ingresados por el usuario en el formulario HTML.
A continuación, se asignan los valores de las variables `$_POST` a variables locales
para facilitar su manipulación. Estos valores corresponden a los campos del
formulario, como la CURP, nombre, edad, sexo, talla, peso, entre otros. También se
obtiene la fecha actual utilizando la función `date()`.
Después, se realiza una verificación para asegurarse de que no exista un registro
previo con la misma CURP en la base de datos. Se ejecuta una consulta SQL para
seleccionar registros de la tabla "ficha_identificacion" donde el campo "curp"
coincida con el valor proporcionado. Si se encuentra algún resultado, se muestra
una alerta y se redirige al usuario a una página específica. En caso contrario, se
procede a insertar el nuevo registro en la base de datos.
Se construye una consulta SQL de inserción utilizando los valores de las variables
locales y se ejecuta mediante la función `mysqli_query()`. Si la inserción es exitosa,
se muestra una alerta indicando que el registro ha sido exitoso y se redirige al
usuario a otra página. En caso de que ocurra un error durante la inserción, se
muestra una alerta informando del problema.
Al final del código, se cierra la conexión a la base de datos utilizando la función
`mysqli_close()`.
En resumen, este código PHP se encarga de establecer la conexión a una base de
datos MySQL, verificar los datos enviados desde un formulario HTML, realizar
validaciones, insertar los datos en la base de datos y mostrar mensajes de éxito o
error en función del resultado de las operaciones realizadas.
Conclusiones:
Este proyecto de desarrollo de un programa CRUD en HTML y MySQL ha
demostrado ser una solución eficiente y efectiva para la gestión de bases de datos
a través de una interfaz web. A través de la implementación de este programa, se
han logrado importantes avances en términos de funcionalidad, seguridad y
usabilidad.
En primer lugar, la implementación de este programa ha permitido simplificar y
agilizar el proceso de gestión de datos en una base de datos. Gracias a las
funcionalidades de creación, lectura, actualización y eliminación de registros, los
usuarios pueden interactuar de manera sencilla y eficiente con la información
almacenada en la base de datos. Esto ha facilitado la manipulación de datos y ha
mejorado la productividad en el manejo de información.
Además, el uso de HTML y MySQL en este proyecto ha demostrado ser una
combinación poderosa y ampliamente adoptada en la industria. HTML proporciona
una estructura sólida para la creación de páginas web, mientras que MySQL ofrece
una solución confiable y eficiente para el almacenamiento y gestión de bases de
datos. La integración de estas tecnologías ha brindado una plataforma robusta y
escalable para el desarrollo de aplicaciones web.
En cuanto al impacto en la industria, este proyecto ha contribuido a impulsar la
adopción de soluciones web para la gestión de datos. La implementación de un
programa CRUD en HTML y MySQL ha demostrado ser una alternativa viable y
rentable para muchas organizaciones, ya que no requiere el uso de software
adicional ni licencias costosas. Esto ha llevado a una mayor eficiencia en la gestión
de datos y ha permitido a las empresas ahorrar recursos y tiempo en el proceso de
desarrollo de aplicaciones.
En resumen, este proyecto de desarrollo de un programa CRUD en HTML y MySQL
ha sido exitoso en términos de funcionalidad, seguridad y usabilidad. Ha
demostrado ser una solución efectiva para la gestión de bases de datos y ha
impactado positivamente en la industria al impulsar la adopción de soluciones web
para la gestión de datos. Este proyecto sienta las bases para
Citas bibliográficas
Bibliografías
Berners-Lee, T. y Fischetti, M. (2000). Tejiendo la Web: El diseño original y el destino
final de la World Wide Web. Harper Business.
Flanagan, D. (2011). JavaScript: la guía definitiva. O´Reilly Media.
Gauch, S. (2012). Diseño web para ROI: convertir navegadores en compradores y
prospectos en clientes potenciales. Morgan Kaufman.
Goodman, D. y Madsen, D. (2014). JavaScript y jQuery: desarrollo web front-end
interactivo. Wiley.
Goodman, D. y Stead, O. (2017). Aprendizaje de diseño web: una guía para
principiantes de HTML, CSS, JavaScript y gráficos web. O´Reilly Media.
Cibergrafías
Berners-Lee, T. y Fischetti, M. (2000). Tejiendo la Web: El diseño original y el destino
final de la World Wide Web. Harper Business. Recuperado de:
[Link]
Gauch, S. (2012). Diseño web para ROI: convertir navegadores en compradores y
prospectos en clientes potenciales. Recuperado de
[Link]
Goodman, D. y Stead, O. (2017). Aprendizaje de diseño web: una guía para
principiantes de HTML, CSS, JavaScript y gráficos web. Recuperado de
[Link]
Haverbeke, M. (2014). JavaScript elocuente: una introducción moderna a la
programación. Recuperado de [Link]
Documentos web de MDN. (sf). Recuperado de [Link]
Meyers, E. (2015). CSS: La Guía Definitiva. Recuperado de
[Link]
Escuelas W3. (sf). Recuperado de [Link]
WebAIM. (sf). Recuperado de [Link]
Consorcio World Wide Web (W3C). (sf). Recuperado de [Link]
