Este documento describe los pasos realizados por un estudiante para crear una página web dinámica que actualice registros en una base de datos. El estudiante creó archivos PHP para mostrar datos, editar registros, validar campos, y actualizar la base de datos. También incluyó diseño con CSS y enlaces entre páginas. Finalmente, publicó la práctica en un hosting y proporcionó el enlace.

1. Actualizar registros de la
base de datos desde
página web dinámica
Licenciatura en Tecnologías de la Información
Programación Web
Estudiante: Oscar Andres Alba Padron
Código: 220779802
Fecha: 26/04/2023

2. 1.- Para empezar, creé los archivos necesarios para
la tarea

3. Archivo:
reporte_editar_vehículos_Oscar_
Alba.php

4. 2.- Para este primer archivo recuperamos todos
los datos de la tabla catalogo para mostrarlos en
una tabla como en actividades pasadas

5. 3.- En el head del archivo añadi el titulo de la
pagina, un icono y lo vincule con el archivo css

6. 4.- En el cuerpo del archivo incluí el diseño del
proyecto final, empezando con la barra de
navegación

7. 5.- Barra de navegación

8. 6.- Barra de navegación

9. 7.- Lo siguiente fue el menú de navegación

10. 8.- Menú de navegación

11. 9.- Menú de navegación

12. 4.- Dentro del div “texto1” empece creado las
columnas del reporte

13. 10.- En el cuerpo de la tabla introduje los datos de la
Base de datos con un foreach y añadí dos columnas
para elegir cual registro queremos editar o eliminar en
base al id (num_serie).

14. 11.- En el cuerpo de la tabla introduje los datos de la
Base de datos con un foreach y añadí dos columnas
para elegir cual registro queremos editar o eliminar.

15. 12.- Cerré la conexión con la base de datos y añadí
partes del diseño

16. Archivo
editar_vehículos_Oscar_Alba.php

17. 13.- Aquí seleccionamos todos los datos en base a
la id recuperada en la variable $idVehiculo con un
$_GET

18. 14.- En el head del archivo también añadí un titulo, el
icono y lo vincule al archivo css y js. En el body añadí la
barra de navegación y el menú de opciones como se
vio en el archivo anterior

19. 15.- En el div “texto1” cree un formulario que recuperara
los datos del vehículo que queramos editar evitando
que el usuario pueda editar el campo num_serie

20. 16.- Estos fueron los siguientes datos que mande a
llamar por medio del value

21. 17.- Para el combo box ingrese el dato recuperado
de la base de datos como primer valor y como
texto

22. 18.- Para el siguiente combo box hice lo mismo
que en el anterior e incluí un botón tipo submit

23. 19.- Cerré la conexión con la base de datos y
vincule el archivo con el archivo menú.js

24. Archivo:
validaciones_editar.js

25. 20.- Primero recupere los id de todos los campos del
formulario en distintas variables a excepción de los
combo box ya que es posible que el usuario quiera
mantener el mismo valor que ya tiene

26. 21.- Con varios if else añadí las validaciones para los
campos de texto y numeros respectivamente

27. Archivo:
actualizar_vehículos_Oscar_Alba.p
hp

28. 22.- Para empezar con este archivo, me conecte a la
base de datos y recuperé los datos introducidos por el
usuario en el formulario anterior con el método $_POST

29. 23.- Cree un ciclo if que transforma los valores
string a números (en caso de que el usuario no
seleccione un nuevo valor en el combobox)

30. 24.- Cree otro ciclo if igual que el anterior para el
combo box de transmisión

31. 25.- Escribí la consulta para actualizar el registro
seleccionado en la base de datos

32. 26.- En el html añadí el título, el icono y lo vincule con el
archivo css. En el body añadi la barra de navegación y el
menú de opciones como se ve en el primer archivo

33. 27.- Mandé a imprimir los datos enviados en el
anterior formulario

34. 28.- En el combo box cree in ciclo if para mandar a
imprimir el tipo de vehiculo seleccionado por el
usuario

35. 29.- Hice lo mismo que en el anterior paso para el
combo box de transmisión y añadí 2 links para
volver al reporte_editar o al reporte_vehiculo

36. 30.- Cerré la conexión con la base de datos, añadí el
pie de página y vinculé el archivo para el
funcionamiento del menú de opciones

37. Práctica en el hosting

38. 31.-

39. 32.-

40. 33.-

41. Práctica en funcionamiento

42. 33.-

43. 33.-

44. 33.-

45. 33.-

46. Link de la práctica:
http://oscaralbaproyectophp2023a.ats
pace.cc/paginas/reporte_editar_vehic
ulos_Oscar_Alba.php