Conectar Un Formulario HTML A Una BD Con PHP
Conectar Un Formulario HTML A Una BD Con PHP
¿Has querido guardar los datos de un formulario hecho con HTML en una tabla de una BD y no sabes cómo?,
Aquí te enseñaremos cómo hacerlo con unos sencillos pasos.
1. Creación del formulario. Antes de pasar a la conexión y guardado de datos, necesitaras tener tu
formulario y para esto:
a) Comienza haciendo un archivo nuevo con el nombre que tendrá tu formulario seguido de la extensión
“.html”. Da clic derecho sobre tu archivo creado y elige “abrir con”, y dentro del menú que se
despliegue busca tu editor de código preferido (si no tienes alguno, puedes hacerlo desde el bloc de
notas).
b) Comienza tu código colocando las dos etiquetas que indicarán que es un documento html (<!DOCTYPE
html> y </html>). Dentro de estas colocarás otras etiquetas que indicarán el encabezado de tu página
(<head> y </head>). Dentro de nuestro encabezado introduciremos nuestro titulo de la página, que irá
dentro de las etiquetas <title> y </title>; también se coloca la referencia hacia nuestro documento
hecho con CSS para estilizar nuestra página, pero por ahora solo nos centraremos en el formulario y la
BD.
c) Después de nuestro encabezado, abriremos nuestro cuerpo de la página con las etiquetas <body> y
</body>, que es donde introduciremos nuestro código. Luego, abriremos las etiquetas para nuestro
formulario (<form> y </form>). Dentro de la etiqueta <form>, antes de “mayor qué” pero después de
form colocaremos los atributos action= ””, method= ”post” y name= ”formulario”.
d) Dentro de las etiquetas de nuestro formulario colocaremos nuestras preguntas, cada pregunta irá
dentro de otras etiquetas que indicarán un párrafo (<p> y </p>), seguido de cada pregunta en la misma
línea, irá lo siguiente “<input type=”(aquí irá el tipo de dato en ingles que se introducirá en la
respuesta. Ej: si la respuesta es una fecha, coloca date; si es un número, coloca number; si es un texto,
coloca text.)” name= ”(aquí irá un nombre para identificar a tu dato de la respuesta, tiene que ser uno
único para cada pregunta.)uede ser alguna palabra identificadora de la pregunta.)”>” .
e) Antes de cerrar tu formulario, colocaremos un botón con las etiquetas “<button>” y ”</button>”;
dentro de la primer etiqueta, después de “button” y antes de “mayor que” colocaremos los atributos
“type= “submit”” y “name=”enviar””.
f) Terminaste tu formulario, debería haberte quedado algo similar a esto:
2. Descarga e instalación del Servidor y BD. En este caso, usaremos Appserv, pero puedes usar el
software que prefieras mientras tenga soporte para PHP y la BD, que en este caso será de MySQL.
a) Empezaremos por entrar a la página oficial donde descargaremos nuestro software para
posteriormente descargarlo, en este caso, lo haremos con Appserv.
b) Luego de descargar el instalador, lo abriremos. En la primer ventana que aparecerá daremos clic en
Next para continuar;
c) En la siguiente ventana nos mostrará los términos y condiciones de uso, para aceptar daremos clic en I
Agree;
d) La siguiente ventana será de el lugar donde queremos instalar el programa. si no tienes alguna idea de
esto, puedes dejarlo así y solo cliquear Next;
e) La siguiente ventana que se nos mostrará será para elegir los servicios que se descargaran e instalaran
para usa, en este caso dejaremos todo palomeado para instalar;
f) La siguiente ventana nos pedirá información para nuestro servidor Apache. En el campo de correo
introduciremos un correo propio, los demás campos, si no se tiene conocimientos para manipularlos
podemos dejarlos así. Clic en Next;
g) Después, nos pedirá una contraseña que deberás introducir dos veces para confirmarla, esta
contraseña será para usar nuestra BD de MySQL, y al abrirla nos la pedirá así que apréndetela muy
bien, o usa alguna que sea fácil;
h) Una vez hecho, daremos clic en Install y esperaremos a que se instale todo.
i) Una vez finalizado, nos fijaremos que las opciones de iniciar Apache e iniciar MySQL estén activadas.
Hecho esto, damos clic en Finish.
NOTA. Para iniciar nuevamente o detener estos servicios, basta con ejecutar los programas llamados Apache
Start para iniciar Apache, Apache Stop para detenerlo, y MySQL Start para iniciar MySQL y MySQL Stop para
detenerlo.
3. Creación de la BD y su(s) tabla(s). Una vez prendidos los servicios de Apache y MySQL, entraremos
a nuestro navegador preferido.
a) En el navegador, en la barra de búsqueda escribiremos localhost/phpmyadmin y damos tecla enter
(intro);
b) Tendrá que abrirse una pestaña similar a la siguiente imagen, de lo contrario, comprueba que
Apache y MySQL estén activos volviendo a ejecutar los dos programas anteriormente
mencionados;
c) Dentro de esa interfaz, introduciremos root dentro del campo de usuario, y nuestra contraseña será
la que anteriormente se eligió durante la instalación. Llenaremos los campos y posteriormente
cliqueamos en Continuar;
d) Se abrirá una ventana similar a la siguiente. Una vez dentro de nuestro administrador de la base de
datos, daremos clic en donde dice Nueva en la esquina superior izquierda, esto para crear una base
de datos nueva para nuestro formulario;
e) Escribimos un nombre para nuestra base de datos en el campo donde lo pida y después damos clic
en Crear;
f) Se abrirá un menú para crear una tabla, pues nuestra BD es nueva. Dentro del campo de Nombre
escribiremos el nombre de nuestra tabla según el “de quien” introduciremos los datos (pueden ser
usuarios, personas, o alguna otra cosa. Aquí, escribiremos “usuarios” pues se guardarán datos para
registro.), después, en el campo de Número de columnas escribiremos según el número de
preguntas hayamos puesto en nuestro formulario (en este caso son 7) y damos clic en Continuar.
g) Se abrirá un menú para terminar de crear nuestra tabla, se llenará de la siguiente manera:
- Nombre: Escribiremos el nombre de la columna, es decir, el nombre el dato que se introducirá en esa
columna (Preferiblemente no uses espacios, usa un nombre corto).
- Tipo: Se seleccionará el tipo de dato que se guardará en esa columna; por ejemplo, si el dato es un número
telefónico, seleccionaremos INT; si es un nombre, VARCHAR o TEXT; si es un solo carácter el que se escribirá,
pondremos CHAR, si es una fecha, seleccionaremos DATE; y así con todos las columnas.
-Longitud/Valores: Escribiremos el numero de caracteres que tendrá nuestro dato (solo para varchar e int).
-Nulo: Se palomeará si el campo puede quedarse vacío, en caso contrario, no se selecciona.
-ÍNDICE: Primary, índica el dato principal con el que se identificará el registro completo; Unique, índica si el
campo puede repetirse en algún otro registro o no.
-A.I: Indica si el dato se incrementara numérica o alfabéticamente partiendo desde un primer registro.
h) Si necesitas más columnas porque añadirás más preguntas, se introduce el número de columnas a añadir en
el campo Añadir. Una vez terminado, daremos clic en Guardar para guardar nuestra tabla y, listo, ya tienes tu
tabla hecha.
a) Comenzaremos por abrir nuestras etiquetas para indicar que usaremos código php (<?php para
abrir y ?> para cerrar), dentro de estas dos escribiremos nuestro código.
b) Seguiremos declarando una variable con un nombre que queramos pero que sepamos que es el
que servirá para hacer la conexión a la BD, a esta variable le asignaremos el valor de la función
mysqli_connect(), seguido de un or die() que servirá para condicionar, que si no se le puede asignar
el anterior valor, se le asignará el siguiente que será un error que arrojará la página para indicar que
la conexión falló, este lo pondremos con la función mysqli_error($variable), esto irá dentro de los
paréntesis de die() y cerramos nuestra línea con su respectivo ;.
e) Ahora, ya teniendo los datos guardados en nuestra función, crearemos otra variable para enviarlos
a nuestra tabla de la BD. En este caso nuestra variable se llamará “consulta” y se le asignará el valor
de un código SQL puesto entre comillas dobles, la función SQL que usaremos será INSERT e INTO.
Quedaría algo así: $consulta = “INSERT INTO nombre_de_la_tabla()”; dentro de estos paréntesis,
pondremos de parámetros los nombres de las columnas donde se introducirán los datos, después,
se usará la función SQL VALUES() y dentro de esta, se usarán de parámetros las variables que declaramos
y asignamos valor anteriormente entre comillas simples. Iría quedando así:
f) Luego, enviaremos los datos llamando a las dos variables en la función mysqli_query(variable1,
variable2);
g) Para casi finalizar, cerraremos nuestra conexión para evitar algún error, eso lo haremos con la
función mysqli_close(variable_de_conexión);
h) Ahora sí, para finalizar, cerraremos nuestra función con su respectivo } y llamaremos nuestra
función al inicio del código, por debajo de la variable para hacer la conexión para que así esta se
ejecute. Nuestro código para conectar la BD y enviar los datos quedaría algo así:
i) Solo nos queda añadir nuestro archivo php a nuestro formulario para poder enviar los datos, esto
se hace colocando el nombre del archivo dentro del atributo action en la etiqueta <form>.
5. Listo, solo queda mover nuestros archivos. Moveremos nuestros dos archivos dentro siguiendo la
siguiente ruta (si moviste la ruta de instalación, inicia desde ahí): C: / Appserv / www dentro de esta
carpeta www crearemos una nueva que será donde meteremos nuestros archivos de código y estos puedan
funcionar. Recuerda que debes de tener prendidos los servicios de MySQL y Apache para que esto funcione.