Pasos de la práctica Insertar datos desde formulario web usando PHP y MySQL (con PDO)

1. Insertar datos desde
formulario web usando
PHP y MySQL (con PDO)
Licenciatura en Tecnologías de la Información
Programación Web
Estudiante: Oscar Andres Alba Padron
Código: 220779802
Fecha: 22/03/2023

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

3. Archivo
alta_vehículo_Oscar_Alba.php

4. 2.- En el archivo alta_vehículo introduje el titulo, añadí
un icono para la pagina web y el php con los archivos
css y javascript como se ve a continuación:

5. 3.- En el cuerpo del archivo añadi varios div con las id
wrapper, caja 1, caja 2, caja 3, caja 4 y texto 1, además
añadí una imagen alusiva a mi base de datos en la caja 4

6. 4.- Dentro del div con id “texto1” cree un fieldset donde
a su vez cree un formulario donde agregue la funcion
ValidarFormulario para asegurar que se introduzcan
datos validos

7. 5.- Ya en el formulario solicité la entrada de datos
referentes a la tabla vehiculo de la base de datos
asignandoles una id a cada dato capturado

8. 6.- Añadí un boton de tipo submit en el formulario
y tambien inclui un link para acceder a los
registros de vehiculos dela base de datos

9. Archivo
grabar_vehículos_Oscar_Alba.php

10. 7.- Ya en el archivo grabar_vehiculo inserte el codigo
para conectarme a la base de datos y recupere los
datos ingresados en el formulario con la funcion
$_POST, tambien hice la consulta tomando todos los
campos de la tabla vehiculo

11. 8.- Añadi un if para mandar a imprimir los datos
introducidos en el formulario y enviarlos a la base de
datos. En casos de repetirse el num_serie con uno que
ya este en la base de datos se imprime lo que esta en
else

12. 9.- Ya en el apartado html añadí el titulo de la
pagina web, un icono para la misma y enlace el
archivo css

13. 10.- Igual que en el anterior añadi varios divs con
los correspondientes id para su diseño con css y
añadí una imagen referente a la tabla de vehiculos

14. 11.- Mande a imprimir los
datos recuperados con
$_POST incluyendo un if
en el combobox para que
al imprimir los datos
ingresados imprima
“Manual” o “Automático”
en vez de 1 o 2 en el
campo de Transmisión

15. 12.- Añadí dos link al final para volver a insertar
otro vehiculo o para ver el registro de la base de
datos y cerre conexión con la base de datos

16. Archivo
detalle_registro_vehículo.php

17. 13.- Establecí la conexión con la base de datos y
mande a llamar todos los datos de la tabla
vehiculos en la consulta SQL

18. 14.- Añadí el título de la página web, un icono y lo
enlace con el archivo css

19. 15.- Creé una tabla con las columnas de la tabla
vehiculos y el asigne la id “tabla1”

20. 16.- Introduje la información de la base de dato en
la tabla en las filas de la tabla

21. 17.- Añadí filas vacias a la tabla y en una de ellas
inclui un link hacia una de las tareas anteriores

22. 18.- Añadí otro link para
ir al archivo alta_vehiculo
y cerre conexión con la
base de datos

23. Archivo
css_tarea9.css

24. 19.- Esta fue la
configuración que
puse en el archivo css:

25. 20.- Esta fue la
configuración que
puse en el archivo css:

26. 21.- Esta fue la configuración que puse en el
archivo css:

27. Archivo
validaciones_alta_vehiculo.js

28. 22.- Primero recupere los id de todos los campos
del formulario en distintas variables

29. 23.- Validé todos los campos del formulario por medio de
un if tomando en cuenta campos numericos y combo box

30. 24.- Subí todos los acrhivos al hosting

31. 25.- Subí todos los acrhivos al hosting

32. 26.- Subí todos los acrhivos al hosting

33. 27.- Práctica en funcionamiento

34. 28.- Práctica en funcionamiento

35. 29.- Práctica en funcionamiento

36. Link de la práctica:
http://oscaralbaproyectophp2023a.ats
pace.cc/paginas/alta_vehiculo_Oscar_
Alba.php