TUTORIAL DE CREACIÓN DE SCRIPTS PARA ACTUALIZACIÓN, CONSULTA Y

ELIMINACIÓN DE DATOS CON PHP Y MYSQL.

Juan Carlos Oliveros

Especialización Ingeniería de Software

Este es el segundo tutorial donde se darán instrucciones para la creación de grillas de

consulta de datos y además permitir su utilización para la eliminación y actualización de

datos.

Herramientas a utilizar:

Macromedia Dreamweaver 8 o Adobe Dreamweaver CS2 o superior; esto como

herramienta de desarrollo.

Conocer Javascript para realizar tareas de forma asíncrona.

Un navegador de internet (Internet Explorer se está usando en estos ejercicios)

Un servidor compatible con PHP y MySQL (Wamp Server, Easy PHP, Xampp)

Una base de datos con información.

Diseño de grilla de datos para consulta

En toda aplicación es importante mostrar los resultados de una consulta y la manera

más cómoda y práctica es mediante una grilla de datos, que no es más que una tabla

que contiene los datos que se desean mostrar.

Existen muchas maneras de usar las grillas, pero lo importante es aprender a crear a

partir de PHP de forma básica para entender su funcionamiento.

En este ejercicio se utilizará una base de datos llamada Anubis, la cual tiene una tabla

de estudiantes que se ajusta al diseño de la consulta.

Para realizar la consulta se precisará de un formulario que pida los datos que desea

consultar el usuario; en nuestro caso será una consulta de estudiantes por facultad;

donde el usuario seleccionará la facultad a la que le desea ver sus estudiantes.

Como se mostrarán los datos de los estudiantes, se debe diseñar una tabla que

contenga su información y esa será la grilla; pero lo más importante es hacer que esta

grilla sea útil para que el usuario seleccione un registro y pueda actualizarlo o

eliminarlo.

Bien comencemos entonces por crear la grilla de datos. Recuerden que pueden

ponerle estilo a la misma para que su presentación sea mucho más atractiva para el

usuario.

En dreamweaver crearemos un nuevo documento PHP al cual le insertaremos las

instrucciones para crear el formulario que le pide la facultad al usuario.

En primer lugar, debemos establecer el estilo de la página y eso cada uno lo decide,

puede hacerlo directamente en el documento o bien llamando un archivo css que ya

tengan prediseñado.

Bien, teniendo el estilo definido, no es sino maquetar la página de acuerdo a cómo se

desea mostrar la página. Es importante insertar un formulario para colocar el selector

para que el usuario seleccione el dato que desea consultar.

El código debe quedar de la siguiente manera:

Llamado a un archivo CSS

Esto hace que el formulario al verlo en vista diseño adquiriría una apariencia similar a la

que se presenta en el siguiente gráfico:

Ahora se procede a llenar el select del formulario de manera que se muestren los

nombres de las facultades pero que su consulta la realice por código.

Es importante anotar que las facultades se traen de la tabla tblfaculties, para poder

mostrar el nombre de la facultad; para el usuario es más fácil identificar las cosas por

nombre y no por código.

En la línea 26, en el option value se coloca el IdFacultie ya que el select llamará a la

facultad por código ya que es así como está almacenada en la tabla de estudiantes y

entre <option> y </option> se coloca lo que el usuario ve, que en este caso es el

nombre de la facultad.

Bajo el código del formulario, se hará una capa para alojar los resultados allí una vez

se seleccione la facultad. En este caso la capa se llamará GetData.

El formulario presentará la siguiente apariencia una vez se ejecuta en el servidor

Llama funciones de conexión y

conecta

Instrucción SQL que llama a las

facultades

Ejecuta la instrucción

Llena el Select

Bien; ahora crearemos un nuevo documento de PHP para elaborar la grilla resultante

de este formulario. Que si detallan no tiene ningún botón; lo que quiere decir que la

idea es que muestre los resultados cuando seleccione la facultad.

Lo primero que se hará en el documento será ingresar el código que trae los datos del

formulario que acabamos de hacer para almacenarlos en variables y poder mostrar los

resultados; este código lo insertaremos en la parte superior del documento.

El código es como sigue:

La variable $fac, trae un dato que viene del formulario anterior, pero no es traído por

control como lo vimos en el tutorial anterior sino por Javascript que se explicará más

adelante.

Ahora, se define el css que manejará la apariencia de la grilla, en este caso se están

usando dos hojas de estilos, una que maneja fuentes y colores y otra que maneja la

grilla como tal.

Como se ve; el archivo GridStyle.css será el que defina la apariencia de la grilla de

datos.

Una vez definido eso, procedemos a diseñar la tabla; como primera medida, debemos

definir qué datos mostrar en la grilla y para ello, observamos la estructura de la tabla y

extractamos qué campos queremos ver.

Se creará una capa para mostrar el formulario de actualización en caso de que el

usuario quiera actualizar algún registro. La grilla se colocará dentro de otra capa que es

la que muestra el resultado.

Archivos que definen la apariencia de la página

Como la tabla de estudiantes es tan grande, debemos mostrar solamente los datos

más relevantes. Observamos la estructura de la tabla ya que lo primero que armamos

en la grilla son las columnas de los títulos de los campos.

Empezando quedará un código similar a este:

Como se ve, no se ha cerrado la tabla, por lo tanto se debe continuar con el código que

llenará la tabla y mostrará los datos que el usuario desea; para ello, se debe realizar la

conexión a la base de datos y proceder a ejecutar una instrucción SQL que traiga esos

datos. Los cuales deben corresponder a la columna de título.

Para poder llenar la grilla con datos de una base de datos, es necesario combinar el

código HTML con el de PHP y elaborar un script de PHP que debe quedar como sigue:

Títulos de las columnas de los

campos que se mostrarán

Si observan, en la fila donde están los títulos de las columnas, hay dos columnas que

están vacías; estas se usarán posteriormente para usar las herramientas de actualizar

y eliminar registros.

Ahora, se procede a crear un archivo php nuevo que contendrá el formulario de

estudiantes para que el usuario pueda actualizar sus datos. Este apartado se explicó

en el tutorial pasado, sin embargo el formulario diseñado podría quedar algo parecido a

esto:

Instrucción SQL que trae los datos

De la línea 32 a la 38, se ingresan los

campos de acuerdo a los títulos de las

columnas.

La diferencia en el código del formulario de actualizar es la variable que trae; ya no trae

el nombre de un control de formulario, trae una variable que se envió desde Javascript.

En la parte Php del código quedaría así:

Ahora hacemos el formulario que guarda los datos, es de la misma forma como se vió

en el tutorial anterior pero la diferencia es que los datos que trae no son controles de

formulario sino variables de Javascript.

El código quedaría de la siguiente manera:

Bien, ahora se procede a elaborar el documento que elimina los registros que el

usuario seleccione. La filosofía del archivo es casi igual sólo que en la variable que se

trae no es de un formulario sino de Javascript y no es con el método POST sino con el

método GET El código puede quedar de la siguiente manera:

Esto es lo que iría entre <body>y </body>

Ahora, se procede a elaborar un documento nuevo, pero este es Javascript con el fin

de elaborar las funciones que vinculan los archivos y que procesan la información.

En el Javascript sólo se puede escribir código y es una herramienta que permite

realizar cambios en la página sin recargarla ya que manipule todo del lado cliente para

luego enviarlo al servidor.

Lo primero que debemos hacer es escribir un código que sea capaz de evaluar qué

navegador de internet tiene el usuario para así mismo poder realizar la tarea que sea

asignada en tiempo de ejecución.

Este código es requerido para poder usar los otros códigos que realizarán las tareas de

cargar el formulario de datos, de actualizar y de eliminar registros. Las capas se

diseñan precisamente para alojar allí los archivos que procesan la información.

El código queda de la siguiente manera:

Seleccionan este tipo de archivo y presionan

sobre el botón crear

Este código evalúa el navegador e inicializa la variable que procesa la información en

los siguientes códigos; la variable es xmlhttp.

Bien ahora procederemos a crear el procedimiento que llama al formulario de actualizar

el registro que el usuario seleccione.

Primero que todo, nos vamos al archivo que tiene la grilla de datos diseñada y

agregamos unas líneas en la parte final del while:

Este código lo que hace es llamar dos funciones que se definirán en el archivo de

Javascript enseguida. Si observan, hay dos dibujos de tipo png en ese código, estos

son los íconos que representan las tareas de actualizar y de eliminar. Es importante

que estas imágenes existan en su carpeta de Images y deben tener una resolución de

16x16 pixeles.

Ahora se procede a crear la función que llama la grilla de datos para que el usuario

consulte y de paso pueda seleccionar registros para actualizar y eliminar.

Código a insertar

Bien, procederemos a crear la función que llamará los datos que el usuario seleccione

para que los pueda actualizar. Esta función se basa en el registro que seleccione el

usuario en la grilla y pueda abrir el formulario que permita actualizar los datos.

El código quedará de la siguiente manera:

Si se mira el código, en la línea 21, se establece el lugar donde quiero que aparezca el

formulario de actualización; en la línea 26, se llama el formulario para que se ancle en

la capa definida en la 21. La variable se inicializa con esos datos y se procede a enviar

la información que está vinculada al formulario que actualiza la información; eso es en

la línea 37.

Ahora se procede a vincular los archivos; como anteriormente observamos, se insertó

un código a la grilla de datos, en la parte donde se nombra la función GetStudent

estamos vinculando el archivo de la grilla con la función.

Ahora se procede a crear el código que actualiza la información que el usuario ingresó

en el formulario de datos. Este código lo que hace es procesar la información para que

sea actualizada en la base de datos.

El código quedará de la siguiente manera:

Una vez creado el Javascript se debe vincular con todos los archivos colocando el

nombre de la librería en el encabezado de todos los archivos.

Ahora vinculamos el formulario con esta función para que cuando el usuario presione el

botón guardar, se realice el proceso de actualización.

Para ello insertamos una instrucción en el formulario que llama la función

updateStudent en el evento onSubmit.

Ahora se procede a elaborar la función que elimina los registros que el usuario

seleccione. El código queda de la siguiente manera:

Se procede ahora vincular el archivo que selecciona las facultades con la función que

trae la grilla.

En teoría, reuniendo la información de los dos tutoriales la estructura de las carpetas

quedaría así:

Esta es la raíz del sitio.

La carpeta css tendrá lo siguiente:

La carpeta Images tendrá lo siguiente:

La carpeta Includes cuenta con lo siguiente:

La carpeta js sólo tendrá el archivo que tiene las funciones que acabamos de hacer.

Bien; ahora abriremos el sitio para probar que funcione lo que acabamos de hacer,

primero, abrimos el servidor web

Una vez conectados, se procede a abrir el sitio; si el servidor no abre cuando le damos

localhost, entonces deben escribir en la barra de direcciones 127.0.0.1.

Quedará una pantalla parecida a esto:

Se da click en Wamp Server. En el menú de

incio en todos los programas si se tiene

Windows 7

.Se abre el archivo QueryStudents

Seleccionaremos la facultad de análisis y diseño de software para ver sus estudiantes

Se mostrará la siguiente pantalla:

Como se ve, se muestra la grilla de datos y queda de paso el select con la facultad que

seleccionó; si observa la barra de direcciones se encontrará que estamos en la misma

página que iniciamos:

Seleccionaremos un estudiante para actualizarlo, para ello presionamos sobre el lápiz

que es el que abre el formulario que permite actualizar la información

En este caso se selecciona a Arriola Villadiego Esvaldo, el nombre está mal registrado

lo que corregiremos cuando actualicemos el registro; Una vez se selecciona el registro

que se quiere actualizar, se muestra el formulario sobre la grilla

Se corrige el nombre y se procedería a guardar:

Cuando se guarde la información aparece lo siguiente:

Aquí tiene dos posibilidades: Una seleccionar otra facultad o la otra es regresarse, es

decir, que se mostrará sólo el select pidiendo que seleccione una facultad.

Ahora vamos a seleccionar un registro para eliminarlo

En este caso, se presiona sobre la x roja para proceder a la eliminación; le saldrá un

mensaje de confirmación antes de proceder a eliminar:

Le damos OK para que aparezca lo siguiente:

De esta manera, hemos visto cómo hacer las mismas operaciones de actualizar y

eliminar mediante Javascript.

Si se desea se pueden paginar los resultados de la grilla pero eso es tema para que lo

investiguen y si pueden inclúyanlo en su proyecto.