Aplicación web que inserta y consulta datos de con PHP y MySQL

En este post se mostrará el ejemplo para crear una aplicación web sencilla que simule una agenda telefónica, la cual almacenará:

• Nombre del contacto.
• Apellido paterno.
• Apellido materno.
• Número de teléfono. 
• Correo electrónico.
• Dirección. 

Esta aplicación web estará compuesta por 3 secciones:

1. Portada con los datos del alumno, una foto y dos hipervínculos. 
2. Formulario para capturar y almacenar los datos.
3. Consulta de todos los registros almacenados en la tabla de la BD.

Al igual que en anteriores ejemplos, el desarrollo de esta aplicación debe ser modular: es decir, se debe separar su desarrollo en diferentes partes o pasos, hasta conseguir el resultado deseado. Estos son los pasos a seguir:

1. Crear una base de datos y una tabla.
2. Crear un usuario administrador para esa base de datos.
3. Crear la portada de la aplicación.
4. Crear el formulario de captura y el correspondiente programa PHP que los inserte en la tabla.
5. Crear un programa PHP que consulte todos los datos almacenados en la tabla.

1.- CREAR UNA BASE DE DATOS Y UNA TABLA

Empezamos con la logica necesaria para crear la agenda. Necesitaremos una base de datos llamada "alumno_nombre" y dentro de ella crear una tabla llamada "agenda_nombre" en donde "nombre" deberá reemplazarse según corresponda a cada alumno (juan, silvia, carlos, etc.).

Arrancar los servicios Apache y MySQL.

Teclear "localhost" para acceder a la página de inicio de Apache y posteriormente hacer clic en phpMyAdmin

Hacer clic sobre la opcion "Nueva":

A continuación escribir el nombre de la base de datos y haz clic en "Crear". En mi caso, la BD se llamará alumno_gilberto (tu deberás escribir tu propio nombre).

Una vez creada la BD, se procederá a crear la tabla, la cual tendrá la siguiente estructura:

Al escribir la instrucción anterior en el panel SQL, deberá mostrar la siguiente confirmación: 

2.- CREAR EL USUARIO ADMINISTRADOR PARA LA BASE DE DATOS

Seleccionar la base de datos y escribir la siguiente instrucción en el panel SQL:

Como se ha explicado en ocasiones anteriores, el significado de estas instrucciones es lo siguiente: 

• grant = Conceder
• all = Todos los permisos (select, insert, update, delete)
• on alumno_gilberto = La base de datos
• * = El asterisco en la mayoría de lenguajes de programación significa "todo", es decir, se traduce como "todo lo que esté dentro de esa base de datos".
• gilberto = El usuario administrador de la base de datos
• localhost = El nombre del servidor en donde esta instalado MySQL
• identified by '123' = Este es el password que tendrá el usuario. Se puso uno sencillo para ejemplo didáctico, pero en la vida real es necesario que todas las contraseñas tengan la suficiente complejidad para no ser vulnerables. 

Si no hubo errores de sintaxis, se mostrará la siguiente confirmación:

3.- CREAR UNA PORTADA PARA LA APLICACION

La imagen que se presenta a continuación solo es un ejemplo, y los estudiantes son libres de cambiar  los elementos y de incluir los estilos CSS de su preferencia. El único requisito es incluir 2 enlaces primordiales en esta portada: 

• Formulario para capturar datos de la agenda.
• Archivo que consulta los datos de la tabla y los muestra al usuario.

PORTADA (index.htm)

Visualización:

Código fuente:

4.- CREAR EL FORMULARIO DE CAPTURA Y EL PROGRAMA QUE INSERTA LOS DATOS A LA TABLA

El formulario no tiene ningún elemento fuera de lo ordinario, así que simplemente se muestra su visualización en el navegador y su correspondiente código html.

Alta de datos (captura.htm)

Visualización:

Código fuente:

Una vez que el usuario ha presionado el botón "Guardar datos", las variables se enviarán al siguiente programa que guarda los datos en la tabla, el cual cuenta con comentarios acerca de su funcionamiento:

inserta-datos.php

Visualización:

Código fuente:

   

5.- CREAR UN PROGRAMA PHP QUE CONSULTE TODOS LOS DATOS ALMACENADOS EN LA TABLA

La consulta de los datos puede realizarse con diferentes métodos. A continuación propongo uno de los que considero mas sencillos de comprender. Para realizarla, se utilizará la función mysqli_fetch_array(), el cual almacena el contenido de una consulta en un arreglo de datos "un registro a la vez", y como extrae un registro a la vez, se combinará con un ciclo while para extraer todos los datos que contenga una tabla. La utilidad de utilizar while es que no necesitamos conocer previamente el numero de repeticiones totales, es decir, no sabemos si se repetirá 2, 10 o 300 veces y en cuanto se terminen los registros de la tabla, el while dejará de ejecutarse.

Si no entendiste muy bien esta explicación medio rara, aquí va el procedimiento paso a paso:

Definir las variables de la base de datos y ejecutar la conexión:

Si llegase a ocurrir algún error en la conexión, siempre es útil "cachar" el error para mostrarlo al usuario o al programador (quien mas lo necesite...jeje...).

Almacenar en una variable la instrucción SQL que deseamos ejecutar. En este caso será un SELECT:

Ejecutar la conexión y asociarla a la consulta SQL:

Ahora, la función que mencionaba antes mysqli_fetch_array() deberá recibir como parámetro la variable anterior:

Como se mencionó previamente, esta función permite extraer un registro completo de la tabla y almacena esos datos en formato de arreglo asociativo (es decir, la forma de acceder a un elemento no dependerá de su posición dentro del arreglo sino del título de su columna), algo muy parecido a una tabla de base de datos: 

Una vez que se ha obtenido el registro completo mediante esta función, se deberá almacenar en una variable para poder extraer cada dato que deseamos, en este caso se ha elegido el nombre $row para la variable:

Visto gráficamente sería como ponerle "titulo" al arreglo:

Bien, hasta aquí queda claro que la función citada extrae un único registro de la tabla en formato de arreglo asociativo y al asignar ese arreglo a una variable obtenemos la posibilidad de acceder a esos elementos del arreglo. Entonces, para acceder a los datos mostrados en el ejemplo, nuestro código debería verse así:

Para facilitar el manejo de estos datos, siempre es conveniente asignar estos contenidos del arreglo a una variable independiente (esto no es necesario, simplemente es un consejo para la vida):

Ahora solo falta repetir esa operación tantas veces como sea necesario hasta obtener todos los registros almacenados en una tabla. 

Simplemente debemos repetir toda esta instrucción con un ciclo while. Después de extraer los datos y guardarlos en nuevas variables se deberán mostrar en pantalla antes de cerrar el ciclo :

Como último paso, ya solo queda cerrar la conexión a la base de datos para evitar que algun nuevo programa hago uso por accidente a este enlace.

Para terminar, aquí se muestra todo el código de este programa que consulta los datos:

Con el programa terminado, al hacer clic en "Consulta los datos almacenados", deberían mostrarse los datos que se capturaron previamente en el formulario y que están siendo extraídos de la tabla (he capturado mas registros para este ejemplo):

Ya únicamente falta aplicarle un poco de formato CSS para que se vea bonito, pero eso ya es a gusto de cada quien, por ejemplo a mi me gustaría algo así: