Este documento explica cómo conectar un formulario HTML a una base de datos MySQL. Primero, se crea una base de datos llamada "bd_formulario" y una tabla "Contacto". Luego, se crea un formulario HTML y archivos PHP para conectarlo y guardar los datos en la base de datos. Finalmente, se muestran los pasos para insertar, eliminar y actualizar registros en la base de datos a través del formulario.

1. Conexión de formulario HTML a la BD
MySQL
Unidad Académica de Pinos
Tecnologías de la Información y Comunicación
Universidad Tecnológica del Estado de
Zacatecas
AUTOR
BLANCA YESENIA ORTIZ DIAZ

2. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
En este documento se explicara la conexión de un formulario creado en el
lenguaje de programación HTML con base de datos MySQL.
1: Construcción de una base de datos:
Primero creamos una base de datos llamada bd_formulario
La cual será conectada con el formulario en HTML
dentro de esta base de datos crearemos una tabla con el nombre de
Contacto la cual deberá tener la siguiente estructura.
No olvides que siempre deberá llevar un campo con el ID que será la llave
PRIMARIA AUTO_ICREMENTABLE.
Es importante que le asignes los mismos nombres de tu sitio a tu base de
datos
Después de haber creado la base de datos, proseguimos a crear el
formulario y los códigos
PHP que nos ayudarán a conectar y guardar los datos del formulario en la
bd SQL.
Antes de continuar deberás tener instalado los siguientes programas:

3. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Creación de un sitio web:
Vamos a la barra menú y le das crear nuevo sitio
Para comenzar debemos crear un sitio donde se almacenarán todos los
Archivos que comenzaremos a crear desde este momento.
a) Vamos a la barra de menú y seleccionamos la opción Sitio

Nuevo Sitio
b) En seguida nos aparecerá la siguiente ventana donde no pedirá el
nombre del sitio y la
Carpeta donde se almacenarán todos los archivos de nuestro sitio web, en este
caso nuestro sitio se llamará
Bd_formulario y la carpeta llevará el mismo nombre
Le damos clic nuevo
Aquí le darás el nombre a tu sitio

4. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
El sitio debe ser creado dentro de la carpeta de C:xampphtdocs de XAMMP
SitioAdministrador de Sitios..-->selecionas tu sitio y presionas el botón
En el nombre de usuario deberes poner el mismo en la opción de “Conectar
usando”, debes seleccionar “Local/red” ya que será un
Servidor local

5. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Ya que le diste en local/red te aparecerá la ventana que debes llenar con los
mismos datos local/red/bdformulario.
 ya que estés en htdocs crea tu carpeta con el mismo nombre de tu sitio

6. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Ahora vamos a la pestaña de “Avanzadas”

Modelo de Servidor ahí seleccionamos la opción de PHP MySQL ya que
utilizaremos el lenguaje de programación PHP y MySQL para las bases de
datos
Una ves ya creado te aparecerá asi
v
v

7. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Le cambiaremos de remoto a de prueba
Solo para comprobar revisas que el sitio haya sido cargado en la ventana de
Archivos, recuerda que puedes tener varios sitios para navegar entre ellos solo
cámbialos donde señala la flecha de la imagen, solo ten cuidado de estar
trabajando en el Sitio Web correcto.

8. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Para la creación del formulario solo tienes que seleccionar el menú
página HTML y presionas el botón Crear.
Le daremos archivo/nuevoarchivio/crear.
Para crear un formulario se hace lo siguiente
c
c
c
c

9. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Después crearemos un documento que se llame “guardar_contacto” y ay
agregaremos este código.
Crear una conexión en base de datos:
Para hacer la conexión crearemos un nuevo documento llamado
“conexión.php”
Y agregaremos el siguiente código
Por último para comprobar que nuestra práctica funciona deberás hacer uso de
un explorador de Internet de tu preferencia y escribir lo siguiente en la barra de
buscador:
http://localhost/formulario_conexion_bd/contacto.html
Recuerda que en una conexión local el nombre de “localhost” siempre es el
mismo lo único que debe variar es el nombre del sitio o carpeta, en este caso
“formulario_conexion_bd”.

10. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Cuando hayas concluido con esta parte si estás bien te aparecerá la siguiente
pantalla.
COMO INSERTAR REGISTROS:
Vas a la barra de menú y te vas a datos de ay seleccionas insertar registro.
Te vas a asistente de formulario

11. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Este es donde le vas a proporcionar donde quieres que se guarde y el no mbre
del documento
Aquí le damos en el signo – para quitar el ID ya que eso no los da por defaul

12. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Le damos en la etiqueta el campo que deseamos modificar
-le ponemos casilla de verificación
- en estado de iniciar le ponemos activada
Cuando hemos terminado le damos aceptar
Después de esto te aparecerá tu registro.

13. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Aquí tenemos nuestro formulario que acabamos de insertar
Veremos si funciona, una vez terminado guardas cambios te vas a tu
navegador y te aparecerá así:
COMO ELIMINAR REGISTROS:
Tenemos que entrelazar los registros en la plantilla para poder borrar registros

14. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Tenemos que juntar cada registro que hemos colocado
Aquí le tenemos que dar en origen y en vinculo le pondremos eliminar.php

15. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Después de ponerle el vinculo le pondremos que es lo que queremos eliminar
Por lo tanto cuando pulsemos en este enlace iremos a la página eliminar.php
pasándole Id del registro a borrar
COMO ACTUALIZAR REGISTROS:
Creamos un archivo nuevo llamado actualizar.php

16. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
Nos vamos a código y modificamos
Y le modificamos o le ponemos
Después copiamos y pegamos el código que deseemos actualizar

17. TECNOLOGIAS DE LA INFORMACION Y COMUNICACIÓN BLANCA YESENIA ORTIZ DIAZ
De ay guardamos todo y verificamos
Aquí vemos que aparece el campo modificar
Espero y sea de su agrado
Att:Blanca Yesenia Ortiz Díaz