Download - Tutorial Php 2
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.