PROGRAMACIÓN DE SITIOS WEB

PRESENTADO POR:
JHON STALING SEVILLANO ZEMANATE

TEMÁTICA:
MANEJO DE BASE DE DATOS

CÓDIGO:
1061687075

GRUPO: 301127_19

TUTOR:
FRANCISCO JAVIER HILARIÓN

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

CEAD POPAYÁN - ZONA CENTRO SUR
27 DE NOVIEMBRE DE 2018
POPAYÁN – CAUCA
 INTRODUCCIÓN

Este trabajo representa el estudio y aplicación de conceptos estudiados durante el curso de

Programación de Sitios Web de la Universidad Nacional Abierta y a Distancia UNAD .

Para el desarrollo de esta actividad recopilamos conceptos acerca del manejo de base de
datos en php, con sus respectivas querys de Inserción (INSERT), Eliminación (DELETE),
Actualización (UPDATE) y creación (CRUD).

También se construyó el funcionamiento a los formularios diseñados en la unidad anterior,

junto con el manejo de la librería fpdf, la cual nos permite general un reporte en formato
pdf de los productos registrados en el sistema.
 CAPTURAS DE PANTALLA DE LOS EJERCICIOS Y EXPLICACIÓN

1. Dentro del menú de administrador, debe crear un script en PHP que permita crear la
base de datos de su aplicativo en MYSQL, dicha base de datos se llamará: bdunadXX,
donde XX corresponde al número de su grupo de trabajo colaborativo.

Figura 1. Opción crear base de datos (Noviembre 27, 2018). Elaboración propia.

Figura 2. Confirmación de creación base de datos (Noviembre 27, 2018). Elaboración propia.
 Figura 3. Base de datos creada en MySQL (Noviembre 27, 2018). Elaboración propia.

Figura 4. Código creación de base de datos (Noviembre 27, 2018). Elaboración propia.

Para la creación de la base de datos desde el aplicativo web, se generó una opción en el
menú de administrador, la cual se denominó "Crear base de datos". Para esto se creó una
clase a la cual se le pasaron las parámetros de conexión en unas variables (Host, Nombre y
Contraseña), se creó la conexión en la variable $conn, y se pasó la consulta del Create
database en una variable denominada $sql. Luego procedí a ejecutar la consulta con la
función mysqli_query pasándole la conexión y la sentencia ($sql), y coloqué un mensaje de
sweetalert que le indique al sistema si se creó o no la base de datos.
2. Dentro del menú de administrador, debe crear un script en PHP que permita crear
una tabla en la base de datos creada anteriormente. Dicha tabla debe llamarse: tablaXX,
donde XX corresponde al número de su grupo de trabajo colaborativo.

Figura 5. Opción crear tabla Grupo Colaborativo (Noviembre 27, 2018). Elaboración propia.

Figura 6. Confirmación de creación tablas en base de datos (Noviembre 27, 2018). Elaboración propia.

Figura 7. Tablas creadas en base de datos MySQL (Noviembre 27, 2018). Elaboración propia.
 Figura 8. Código creación de tablas en base de datos (Noviembre 27, 2018). Elaboración propia.

Para la creación de las tablas en la base de datos desde el aplicativo web, se generó una
opción en el menú de administrador, la cual se denominó "Crear tabla grupo colaborativo".
Para esto se creó una clase a la cual se le pasaron las parámetros de conexión en unas
variables (Host, Nombre, Contraseña y base de datos), se creó la conexión en la variable
$conn, y se pasó la consulta del Create table en una variable denominada $sql. Luego
procedí a ejecutar la consulta con la función mysqli_query pasándole la conexión y la
sentencia ($sql), y coloqué un mensaje de sweetalert que le indique al sistema si se creó o
no la base de datos.

Para este punto creé 2 tablas, una con el número de mi grupo colaborativo
(tabla301127_19), y otra tabla denominada productos, en la cual se realizó toda la lógica
que se solicitó en la guía de actividades.
3. La clave para acceso al motor phpMyAdmin deberá ser: 12345678 El usuario para
acceso al motor phpMyAdmin de la base de datos deberá ser: root Estas credenciales se
establecen cuando se instala el servidor Apache AppServ.

Figura 9. Interfaz phpMyAdmin (Noviembre 27, 2018). Elaboración propia.

Figura 10. Sesión iniciada phpMyAdmin (Noviembre 27, 2018). Elaboración propia.

Como se puede observar en las imágenes anteriores se realizó correctamente la conexión

con phpMyAdmin, con los datos de acceso que se brindaron en la primera actividad del
curso, los cuales fueron: username = root / contraseña: 12345678.
4. Dentro del menú de Ingreso de productos debe enlazar el formulario de captura de
datos diseñado en la fase anterior a la tabla de la base de datos y guardar este registro
allí, por medio de la operación INSERT de MySQL.

Figura 11. Formulario registro de productos (Noviembre 27, 2018). Elaboración propia.

Figura 12. Registrando datos en el formulario (Noviembre 27, 2018). Elaboración propia.
 Figura 13. Confirmación de datos Registrados (Noviembre 27, 2018). Elaboración propia.

Figura 14. Validación de inserción en base de datos (Noviembre 27, 2018). Elaboración propia.

Figura 15. Producto registrado en el sistema (Noviembre 27, 2018). Elaboración propia.
 Figura 16. Código inserción de productos en el sistema (Noviembre 27, 2018). Elaboración propia.

Para la inserción de productos desde el aplicativo web, se procedió a registrar los

respectivos datos en el formulario diseñado en la anterior fase del curso, y estos datos se
pasaron vía POST. Para esto se creó una clase a la cual se le pasaron las parámetros de
conexión en unas variables (Host, Nombre, Contraseña y base de datos), se creó la
conexión en la variable $conn, y se pasó la consulta del Insert en una variable denominada
$sql. Igualmente en esta clase (claseInsercion.php) se reciben los datos del formulario html,
y posteriormente procedí a ejecutar la consulta con la función mysqli_query pasándole la
conexión y la sentencia ($sql), la cual contiene todos los datos de los campos de texto, y
coloqué un mensaje de sweetalert en el formulario html (Donde se ingresaron los datos de
los productos), y por medio de una función Ajax se visualiza el mensaje y el formulario no
se redirige a ninguna otra página, y permanece en este mismo formulario.
5. Dentro del menú de consulta de productos debe enlazar este formulario de captura
de datos diseñado en la fase anterior con la base de datos y permitir mostrar el
registro asociado a ese número, mediante la operación SELECT de MySQL.

Figura 17. Formulario consulta de productos (Noviembre 27, 2018). Elaboración propia.

Figura 18. Código del productos a consultar (Noviembre 27, 2018). Elaboración propia.
 Figura 19. Producto consultado en el sistema (Noviembre 27, 2018). Elaboración propia.

Figura 20. Código Formulario 1 - Consulta de todos los productos registrados (Noviembre 27, 2018).
Elaboración propia.
 Figura 21. Código Formulario 2 - Consulta por código (Noviembre 27, 2018). Elaboración propia.

Para la consulta de productos desde el aplicativo web, se utilizaron 2 formularios para esta
acción. El primer formulario muestra todos los productos registrados en el sistema, para
que el usuario pueda visualizar los respectivos códigos de todos los productos que se
encuentran registrados. En este primer formulario se pasó una sentencia select, la cual hace
la consulta de todos los productos registrados en la base de datos.

En el segundo formulario se realiza toda la lógica de la consulta del producto, el cual recibe
un código que se envió vía POST desde el formulario que contiene la caja de texto.

En este formulario se le pasan los parámetros de conexión en unas variables (Host,

Nombre, Contraseña y base de datos), se creó la conexión en la variable $conn, y se pasó la
consulta del select en una variable denominada $sql, en la cual se captura el código del
producto a filtrar, y se le pasa ese dato de la variable en la sentencia sql, con el fin de que
sólo filtre ese dato en especifico.

Posteriormente procedí a ejecutar la consulta con la función mysqli_query pasándole la

conexión y la sentencia ($sql), la cual contiene el campo del código que se requiere buscar,
y coloqué un mensaje de sweetalert donde se visualiza el mensaje en caso de que el código
que intenta buscar no se encuentra registrado en el sistema.
6. Dentro del menú de actualización de productos debe enlazar este formulario de
captura de datos diseñado en la fase anterior con la base de datos y permitir
actualizar la información de ese registro mediante la operación UPDATE de MySQL.

Figura 22. Formulario actualización de productos (Noviembre 27, 2018). Elaboración propia.

Figura 23. Código a actualizar (Noviembre 27, 2018). Elaboración propia.

Figura 24. Datos pre-cargados en los campos de texto (Noviembre 27, 2018). Elaboración propia.

Figura 25. Datos Modificados en formulario (Noviembre 27, 2018). Elaboración propia.

Figura 25. Mensaje de confirmación de modificación (Noviembre 27, 2018). Elaboración propia.
Figura 26. Validación de modificación en base de datos (Noviembre 27, 2018). Elaboración propia.

Figura 27. Validación de modificación en la web (Noviembre 27, 2018). Elaboración propia.
Figura 28. Código de formulario 1 (Noviembre 27, 2018). Elaboración propia.

Figura 29. Código de formulario 2 (Noviembre 27, 2018). Elaboración propia.

 Figura 30. Código de clase Actualizar (Noviembre 27, 2018). Elaboración propia.

Para la actualización de productos desde el aplicativo web, se utilizaron 3 formularios para

esta acción.

El primer formulario muestra todos los productos registrados en el sistema, para que el
usuario pueda visualizar los respectivos códigos de todos los productos que se encuentran
registrados. En este primer formulario se pasó una sentencia select, la cual hace la consulta
de todos los productos registrados en la base de datos.

En el segundo formulario se realiza una consulta Select, en la cual carga todos los datos del
producto del código consultado en los campos de texto para que el usuario pueda ver que
datos desea modificar del producto.

En el tercer formulario se le pasan los parámetros de conexión en unas variables (Host,

Nombre, Contraseña y base de datos), se creó la conexión en la variable $conn, y se pasó la
consulta del Update en una variable denominada $sql, en la cual se capturan todos los
datos de la caja de texto, y se procede a ejecutar la consulta con la función mysqli_query
pasándole la conexión y la sentencia ($sql), y se colocó un mensaje de sweetalert donde se
visualiza el mensaje que indica que la modificación se realizó satisfactoriamente.
7. Dentro del menú de Administrador debe crear un formulario que permita capturar
el código del producto y permitir eliminar ese producto de la base de datos, mediante
la operación DELETE de MySQL.

Figura 31. Opción Eliminar Producto (Noviembre 27, 2018). Elaboración propia.

Figura 32. Formulario Eliminar Producto (Noviembre 27, 2018). Elaboración propia.
Figura 33. Código del producto a eliminar (Noviembre 27, 2018). Elaboración propia.

Figura 34. Confirmación de eliminación (Noviembre 27, 2018). Elaboración propia.

Figura 35. Validación de eliminación en base de datos (Noviembre 27, 2018). Elaboración propia.

Figura 36. Validación de eliminación en Sistema (Noviembre 27, 2018). Elaboración propia.
Figura 37. Código Formulario 1 (Noviembre 27, 2018). Elaboración propia.
 Figura 38. Código Formulario 2 (Noviembre 27, 2018). Elaboración propia.

Para la eliminación de productos desde el aplicativo web, se utilizaron 2 formularios para

esta acción.

El primer formulario muestra todos los productos registrados en el sistema, para que el
usuario pueda visualizar los respectivos códigos de todos los productos que se encuentran
registrados. En este primer formulario se pasó una sentencia select, la cual hace la consulta
de todos los productos registrados en la base de datos.

En el segundo formulario se le pasan los parámetros de conexión en unas variables (Host,

Nombre, Contraseña y base de datos), se creó la conexión en la variable $conn, y se pasó la
consulta del delete en una variable denominada $sql, en la cual se pasa el código del
producto que se desea eliminar, y posteriormente se ejecuta el comando de mysqli_query
pasándole la conexión y la sentencia ($sql), y se colocó un mensaje de sweetalert donde se
visualiza el mensaje que indica que la eliminación se realizó satisfactoriamente.
8. Dentro del mismo menú de administrador debe permitir generar el backup de la
base de datos mediante el aplicativo Mysqldump incluido en la suite de Appserv.

Figura 39. Opción generar Backup (Noviembre 27, 2018). Elaboración propia.

Figura 40. Confirmación Backup generado (Noviembre 27, 2018). Elaboración propia.

Figura 41. Archivo Backup Generado (Noviembre 27, 2018). Elaboración propia.
Figura 42. Archivo Backup (Noviembre 27, 2018). Elaboración propia.
 Figura 43. Código generar Backup (Noviembre 27, 2018). Elaboración propia.

Para la generación del backup de la base de datos su utilizó una sola clase, a la cual se
puede acceder desde el formulario de administrador, mediante una opción "Generar backup
base de datos", la cual genera dicho backup en la carpeta Backup del proyecto.

En esta clase se definió una zona horaria, la cual se mapeó como América/Bogotá;
Igualmente se mapeó la variable donde se encuentra el ejecutable del mysqldump, el cual
permite generar estos backups de la base de datos.

Por medio de la variable $backup_file , indicaremos la ruta donde deseamos almacenar el

backup a generar, e igualmente el nombre que deseamos que contenga nuestro archivo
generado.

Por último por medio de la función system, le pasamos los datos de acceso al servidor,
junto con el nombre de la base de datos, y los datos de la ubicación del mysqldump y la ruta
donde se guardará el archivo ($backup_file).
9. Dentro del menú de reportes especiales, debe permitir generar un informe en PDF
de los productos registrados en la base de datos, mediante el uso de una librería,
puede ser mPDF, FPDF, DomPDF, etc.

Figura 44. Opción Generar Reporte PDF (Noviembre 27, 2018). Elaboración propia.

Figura 45. Reporte PDF Generado (Noviembre 27, 2018). Elaboración propia.
Figura 45. Código generador del pdf (Noviembre 27, 2018). Elaboración propia.
Para la generación del reporte en pdf de la los productos registrados en el sistema, se utilizó
una sola clase. Gracias a la descarga de la librería fpdf, y colocando sus archivos en una
carpeta en el proyecto, se accedió a esta por medio de la función required, donde
posteriormente se definieron los nombres de las columnas, y su respectiva fuente de letra
que llevarán estos.

Luego por medio de un ciclo while, se recorrió toda la base de datos, y en cada recorrido
vamos colocando los respectivos valores de las columnas del reporte pdf, por medio de una
consulta Select, la cual trae todos los datos de todos los productos registrados en el sistema.
 CONCLUSIONES

La temática abarcada durante la construcción de este trabajo me pareció de gran

importancia, ya que los principales sistemas de información abarcan todos sus datos
importantes en servidores de bases de datos, y gracias a esta práctica se logró profundizar
en el tema de inserción, eliminación, consulta y actualización de datos.

También me pareció muy importante la manera por la cual se pueden generar reportes o
informes utilizando las librerías expuestas para php.

Los recursos brindados y la web conferencia sirvieron mucho para comprender la temática
estudiada.
 BIBLIOGRAFÍA

Estructuras básicas de programación - María Elena de Lobos (2005). Aprende a Programar

Tomado de:
http://www.mailxmail.com/curso-aprende-programar/tipos-estructuras-programacion-
estructuras-basicas-secuencial

Didáctica y divulgación de la programación - Enrique González (2012): Aprende a

programar php. Tomado de:
https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&i
d=70&Itemid=193

PHP: MySQL y acceso a una base de datos- IdesWeb (2012): Bases de datos en php
Tomado de: http://idesweb.es/proyecto/proyecto-prac10-php-mysql-acceso-base-de-datos