TUTORIAL DE CREACIN DE SCRIPTS PARA ACTUALIZACIN, CONSULTA Y ELIMINACIN DE DATOS CON PHP Y MYSQL.

Juan Carlos Oliveros Especializacin Ingeniera de Software Este es el segundo tutorial donde se darn instrucciones para la creacin de grillas de consulta de datos y adems permitir su utilizacin para la eliminacin y actualizacin 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 asncrona. 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 informacin.

Diseo de grilla de datos para consulta En toda aplicacin es importante mostrar los resultados de una consulta y la manera ms cmoda y prctica es mediante una grilla de datos, que no es ms 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 bsica 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 diseo 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 mostrarn los datos de los estudiantes, se debe disear una tabla que contenga su informacin y esa ser la grilla; pero lo ms 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 presentacin sea mucho ms 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 pgina y eso cada uno lo decide, puede hacerlo directamente en el documento o bien llamando un archivo css que ya tengan prediseado.
Llamado a un archivo CSS

Bien, teniendo el estilo definido, no es sino maquetar la pgina de acuerdo a cmo se desea mostrar la pgina. Es importante insertar un formulario para colocar el selector para que el usuario seleccione el dato que desea consultar. El cdigo debe quedar de la siguiente manera:

Esto hace que el formulario al verlo en vista diseo adquirira una apariencia similar a la que se presenta en el siguiente grfico:

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 cdigo.

Instruccin SQL que llama a las facultades

Llama funciones de conexin y conecta

Ejecuta la instruccin

Llena el Select

Es importante anotar que las facultades se traen de la tabla tblfaculties, para poder mostrar el nombre de la facultad; para el usuario es ms fcil identificar las cosas por nombre y no por cdigo. En la lnea 26, en el option value se coloca el IdFacultie ya que el select llamar a la facultad por cdigo 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 cdigo 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

Bien; ahora crearemos un nuevo documento de PHP para elaborar la grilla resultante de este formulario. Que si detallan no tiene ningn botn; 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 cdigo que trae los datos del formulario que acabamos de hacer para almacenarlos en variables y poder mostrar los resultados; este cdigo lo insertaremos en la parte superior del documento. El cdigo es como sigue:

La variable $fac, trae un dato que viene del formulario anterior, pero no es trado por control como lo vimos en el tutorial anterior sino por Javascript que se explicar ms adelante.

Ahora, se define el css que manejar la apariencia de la grilla, en este caso se estn usando dos hojas de estilos, una que maneja fuentes y colores y otra que maneja la grilla como tal.
Archivos que definen la apariencia de la pgina

Como se ve; el archivo GridStyle.css ser el que defina la apariencia de la grilla de datos. Una vez definido eso, procedemos a disear 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 actualizacin en caso de que el usuario quiera actualizar algn registro. La grilla se colocar dentro de otra capa que es la que muestra el resultado.

Como la tabla de estudiantes es tan grande, debemos mostrar solamente los datos ms relevantes. Observamos la estructura de la tabla ya que lo primero que armamos en la grilla son las columnas de los ttulos de los campos. Empezando quedar un cdigo similar a este:

Ttulos de las columnas de los campos que se mostrarn

Como se ve, no se ha cerrado la tabla, por lo tanto se debe continuar con el cdigo que llenar la tabla y mostrar los datos que el usuario desea; para ello, se debe realizar la conexin a la base de datos y proceder a ejecutar una instruccin SQL que traiga esos datos. Los cuales deben corresponder a la columna de ttulo. Para poder llenar la grilla con datos de una base de datos, es necesario combinar el cdigo HTML con el de PHP y elaborar un script de PHP que debe quedar como sigue:

Instruccin SQL que trae los datos

De la lnea 32 a la 38, se ingresan los campos de acuerdo a los ttulos de las columnas.

Si observan, en la fila donde estn los ttulos de las columnas, hay dos columnas que estn vacas; estas se usarn 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 diseado podra quedar algo parecido a esto:

La diferencia en el cdigo 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 cdigo quedara 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 cdigo quedara de la siguiente manera:

Bien, ahora se procede a elaborar el documento que elimina los registros que el usuario seleccione. La filosofa del archivo es casi igual slo que en la variable que se trae no es de un formulario sino de Javascript y no es con el mtodo POST sino con el mtodo GET El cdigo puede quedar de la siguiente manera:

Esto es lo que ira 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 informacin.

Seleccionan este tipo de archivo y presionan sobre el botn crear

En el Javascript slo se puede escribir cdigo y es una herramienta que permite realizar cambios en la pgina sin recargarla ya que manipule todo del lado cliente para luego enviarlo al servidor. Lo primero que debemos hacer es escribir un cdigo 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 ejecucin. Este cdigo es requerido para poder usar los otros cdigos que realizarn las tareas de cargar el formulario de datos, de actualizar y de eliminar registros. Las capas se disean precisamente para alojar all los archivos que procesan la informacin. El cdigo queda de la siguiente manera:

Este cdigo evala el navegador e inicializa la variable que procesa la informacin en los siguientes cdigos; 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 diseada y agregamos unas lneas en la parte final del while:

Cdigo a insertar

Este cdigo lo que hace es llamar dos funciones que se definirn en el archivo de Javascript enseguida. Si observan, hay dos dibujos de tipo png en ese cdigo, estos son los conos que representan las tareas de actualizar y de eliminar. Es importante que estas imgenes existan en su carpeta de Images y deben tener una resolucin de 16x16 pixeles. Ahora se procede a crear la funcin que llama la grilla de datos para que el usuario consulte y de paso pueda seleccionar registros para actualizar y eliminar.

Bien, procederemos a crear la funcin que llamar los datos que el usuario seleccione para que los pueda actualizar. Esta funcin se basa en el registro que seleccione el usuario en la grilla y pueda abrir el formulario que permita actualizar los datos. El cdigo quedar de la siguiente manera:

Si se mira el cdigo, en la lnea 21, se establece el lugar donde quiero que aparezca el formulario de actualizacin; en la lnea 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 informacin que est vinculada al formulario que actualiza la informacin; eso es en la lnea 37. Ahora se procede a vincular los archivos; como anteriormente observamos, se insert un cdigo a la grilla de datos, en la parte donde se nombra la funcin GetStudent estamos vinculando el archivo de la grilla con la funcin. Ahora se procede a crear el cdigo que actualiza la informacin que el usuario ingres en el formulario de datos. Este cdigo lo que hace es procesar la informacin para que sea actualizada en la base de datos. El cdigo quedar de la siguiente manera:

Una vez creado el Javascript se debe vincular con todos los archivos colocando el nombre de la librera en el encabezado de todos los archivos.

Ahora vinculamos el formulario con esta funcin para que cuando el usuario presione el botn guardar, se realice el proceso de actualizacin. Para ello insertamos una instruccin en el formulario que llama la funcin updateStudent en el evento onSubmit.

Ahora se procede a elaborar la funcin que elimina los registros que el usuario seleccione. El cdigo queda de la siguiente manera:

Se procede ahora vincular el archivo que selecciona las facultades con la funcin que trae la grilla.

En teora, reuniendo la informacin de los dos tutoriales la estructura de las carpetas quedara as:

Esta es la raz del sitio. La carpeta css tendr lo siguiente:

La carpeta Images tendr lo siguiente:

La carpeta Includes cuenta con lo siguiente:

La carpeta js slo 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
Se da click en Wamp Server. En el men de incio en todos los programas si se tiene Windows 7

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 abre el archivo QueryStudents

Seleccionaremos la facultad de anlisis y diseo 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 pgina que iniciamos:

Seleccionaremos un estudiante para actualizarlo, para ello presionamos sobre el lpiz que es el que abre el formulario que permite actualizar la informacin

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 procedera a guardar:

Cuando se guarde la informacin aparece lo siguiente:

Aqu tiene dos posibilidades: Una seleccionar otra facultad o la otra es regresarse, es decir, que se mostrar slo 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 eliminacin; le saldr un mensaje de confirmacin antes de proceder a eliminar:

Le damos OK para que aparezca lo siguiente:

De esta manera, hemos visto cmo 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 inclyanlo en su proyecto.