MANUAL DE CREACION DE FORMULARIOS PARTE 1. Este manual tiene como finalidad explicar como se pueden crear los formularios sencillos de un proyecto.

Transcripción

1 MANUAL DE CREACION DE FORMULARIOS PARTE 1 Este manual tiene como finalidad explicar como se pueden crear los formularios sencillos de un proyecto. Para esto crearemos un proyecto llamado ejemplo (c:/appserv/www/ejemplo/) allí pondremos todas nuestras carpetas y archivos. Archivo con clase de conexión <?php class fmysql{ private $conexion; private $total_consultas; public function construct(){ if(!isset($this->conexion)){ $this->conexion = (mysql_connect("localhost","root","")) or die(mysql_error()); mysql_select_db("ejemplo",$this->conexion) or die(mysql_error()); public function ejecucion($consulta){ $this->total_consultas++; $resultado = mysql_query($consulta,$this->conexion); if(!$resultado){ echo 'MySQL Error: '. mysql_error(); exit; return $resultado; public function crear_arreglo($consulta){ return mysql_fetch_array($consulta); public function num_filas($consulta){ return mysql_num_rows($consulta); public function gettotalconsultas(){ return $this->total_consultas; function Este archivo lo puedo guardar en una carpeta dentro de mi proyecto llamada conexión en un archivo llamado conex.php. Ahora teniendo las tablas de mi base de datos bien relacionadas y creadas en MySQL, procedo a crear mis pantallas. Para este ejercicio usaremos inicialmente una BD (Base de Datos) donde tendremos tablas sencillas. No olvidemos que las tablas de nuestra BD deben ser tipo InnoDB, para respetar la integridad referencial

2 El designer de ejemplo que daría así. Este es el script de creación de tablas: CREATE TABLE municipio ( municodi INTEGER(3) UNSIGNED NOT NULL AUTO_INCREMENT, muninomb VARCHAR(50) NOT NULL, PRIMARY KEY(municodi) ) TYPE=InnoDB; CREATE TABLE cliente ( cliecodi INTEGER(10) UNSIGNED NOT NULL AUTO_INCREMENT, cliemuni INTEGER(3) UNSIGNED NOT NULL, clienomb VARCHAR(100) NULL, cliedire VARCHAR(100) NULL, clietele VARCHAR(12) NULL, cli VARCHAR(150) NULL, PRIMARY KEY(cliecodi), INDEX cliente_fkindex1(cliemuni), FOREIGN KEY(cliemuni) REFERENCES municipio(municodi) ON DELETE RESTRICT ON UPDATE CASCADE ) TYPE=InnoDB; CREATE TABLE factura ( factcodi INTEGER(6) UNSIGNED NOT NULL AUTO_INCREMENT, factclie INTEGER(10) UNSIGNED NOT NULL, factfech DATE NULL, PRIMARY KEY(factcodi), INDEX factura_fkindex1(factclie), FOREIGN KEY(factclie) REFERENCES cliente(cliecodi)

3 ON DELETE CASCADE ON UPDATE CASCADE ) TYPE=InnoDB; CREATE TABLE factdetalle ( fadecodi INTEGER(6) UNSIGNED NOT NULL AUTO_INCREMENT, fadefact INTEGER(6) UNSIGNED NOT NULL, fadecant INTEGER(10) UNSIGNED NOT NULL, fadeiva INTEGER(2) UNSIGNED NOT NULL, PRIMARY KEY(fadecodi), INDEX factdetalle_fkindex1(fadefact), FOREIGN KEY(fadefact) REFERENCES factura(factcodi) ON DELETE CASCADE ON UPDATE CASCADE ) TYPE=InnoDB; Creamos nuestra BD en php my admin. Asi Luego importamos nuestro script de creación de tablas:

4 Teniendo ya nuestra BD y el archivo de conexión procederemos a crear los formularios o pantallas de entrada. Empezaremos por la mas sencilla, la de agregar municipio. AGREGAR MUNICIPIOS Para estas pantallas usaremos una herramienta de interfaz grafica conocida como Dreamweaver

5 Seleccionamos Crear nuevo PHP. Si lo tenemos predeterminado en Diseñador abrirá la siguiente pantalla Cuyo código predeterminado inicial es:

6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>agregar Municipio</title> <style type="text/css">  </style> </head> <body> <form action="" method="post" name="f_municipio"> <p align="center" class="estilo2">agregar MUNICIPIO </p> <table width="460" height="113" border="1" align="center"> <tr> <td width="238"><div align="right"><span class="estilo1">municipio</span>:</div></td> <td width="346"> <input type="text" name="muninomb" size="50" /> </td> </tr> <tr> <td colspan="2"><div align="center"> <input type="submit" name="b_agrega" value="agregar" /> <input type="submit" name="b_salir" value="salir" onclick="this.form.action='municipio.php'" /> </div></td> </tr> </table> </form> <?php //incluimos el archivo de conexion include("conexion/conex.php"); //instanciamos nuestro objeto, para trabajar los metodos correspondientes $obj=new fmysql; //usamos un condicional para asegurar que se hizo click en el boton b_agrega if(isset($b_agrega)){ //con nuestro objeto llamamos el metodo ejecucion, para usar la sentencia INSERT de MySQL $obj->ejecucion("insert INTO municipio(muninomb) VALUES('$muninomb');");?> </body> </html>

7 La parte verde son estilos para tipos de letra y otras cosas que crea automáticamente DW cuando cambio tamaño, tipo de letra y más cosillas en mi código de formulario. La parte azul es el código del html, para el formulario con su tabla cuadro de texto y su botón submit, para enviar la información a la Base de Datos, nótese que trabajamos el nombre del cuadro de texto igual que el del campo, pero esto es opcional, podríamos llamarles diferentes, y segaría funcionando igual, solo hay que tener en cuenta donde llamamos el text box. Lo guardamos en un archivo llamado muniagr.php Por pantalla muerta algo así LISTAR MUNICIPIOS Ahora haremos el formulario de Listar Municipios Aquí vamos a listar los municipios y a la vez vamos a usar esta pantalla de plataforma para llamar la de modificar y la de eliminar los mismos. Para ello usaremos unas imágenes que nos indiquen que vamos a Modificar o Eliminar, estas imágenes iran en una carpeta dentro de nuestro proyecto llamada imágenes (recuérdese que cada programador dara sus propios nombres a las carpetas y archivos usados, solo debe tener en cuenta como los llama), a la vez usaremos checkbox para permitir seleccionar varios municipios a la vez; los cuales que serán eliminados al mismo tiempo. Usando el DW el código quedaría asi: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>listar Municipio</title>

8 <style type="text/css">  </style> </head> <body> <form action="" method="post" name="f_lismuni"> <p align="center" class="estilo2">listar MUNICIPIOS </p> <table width="447" height="29" border="1" align="center"> <tr> <td width="314" height="23"><div align="center"><span class="estilo1">municipio</span></div></td> <td width="33"><div align="center"> <label> <input type="checkbox" name="checkbox" value="checkbox" checked="checked" disabled="disabled" title="seleccionar para eliminar" /> </label> </div></td> <td width="36"><div align="center"><img src="imagenes/editar.gif" width="12" height="13" title="modificar" /></div></td> <td width="36"><div align="center"><img src="imagenes/eliminar.gif" width="11" height="13" title="eliminar" /></div></td> </tr> <?php //Como debemos incluir la informacion de Municipios dentro de la tabla insertamos aqui el codigo PHP //incluimos el archivo de conexion include("conexion/conex.php"); //instanciamos nuestro objeto $obj=new fmysql; /*crearemos el codigo, para cuando hagamos click en el boton Eliminar Seleccionados, lo vamos a colocar inicialmente ya que cuando damos click en el boton se ejecuta el codigo, cuando recarga la pagina, asi que es mejor que elimine primero si se le dio click al boton Eliminar Seleccionados para luego pintar la tabla con los datos de los que quedan*/ if(isset($b_elimsel)){ //primero usamos el metodo ejecucion de nuestro objeto para hacer un select donde guardaremos la info de la tabla municipio $resultado=$obj->ejecucion("select * FROM municipio"); /*ahora con un ciclo while recorro el arreglo que tambien crearemos, para compararlo con los codigos de municipio que quedan gaurdados al seleccionar el checkbox.

9 Estos codigos de municipio se guardan en un vector, ya que le dimos como name al checkbox generado elimmu[] que como podemos darnos cuenta es como se nombra un vector en PHP*/ while($fila=$obj->crear_arreglo($resultado)){ $codimuni=$fila['municodi']; //con la funcion count a veriguamos cuantos datos tiene nuestro vector elimmu[], este se va llenando con los datos a los que le hemos puesto el Chulito $numv=count($elimmu); //recorremos este vector, comparandolo con los datos de la tabla municipio y si llega a encontrar uguales pues los eliminará for($i=0; $i<$numv; $i++){ if($elimmu[$i]==$codimuni){ //usamos el metodo ejecucion para realizar la eliminacion $obj->ejecucion("delete FROM municipio WHERE municodi=$codimuni;"); //cierre del IF // cierre del cilo FOR //Cierre del ciclo WHILE //Cierre del IF del Boton de Eliminar Seleccionados //usamos el metodo ejecucion, para el SELECT con el que traemos los datos de la tabla municipio y eso lo guardamos en una variable llamada $resultado $resultado=$obj->ejecucion("select * FROM municipio ORDER BY muninomb ASC;"); /*con el metodo crear_arreglo pasamos la informacion obtenida en el SELECT y guardada en la variable $resultado en una matriz asociativa llamada $fila donde la clave es el nombre del campo y el valor el dato guardado en dicho campo Con un ciclo while recorremos dicha matriz y creamos filas y celdas para agregar la informacion obtenida, de la siguiente forma*/ while($fila=$obj->crear_arreglo($resultado)){ $codimuni=$fila['municodi']; //aqui guardamos en la variable $codimuni, el dato del campo municodi $nombmuni=$fila['muninomb']; //guardamos en la variable $nombmuni, el dato del campo muninomb $form_edit="this.form.action='muniedi.php'"; //variable para luego redireccionar a la pantalla muniedi.php y llevar datos por el metodo post de este formulario. $form_elim="this.form.action='munieli.php'"; //variable para luego redireccionar a la pantalla munieli.php y llevar datos por el metodo post de este formulario. //procedemos a crear el codigo de creacion de las filas necesarias en la tabla //recordemos que por ser html este codigo lo llamamos con echo echo "<tr><td><input type='hidden' name='codigo' value=$codimuni />$nombmuni</td><td align='center'><input type='checkbox' name='elimmu[]' value='$codimuni' title='seleccionar para eliminar'/></td><td align='center'><button type='submit' name='codiedit' title='modificar' onclick=$form_edit><img src='imagenes/editar.gif' width='12' height='13' /></button></td><td align='center'><button type='submit' name='codielim' title='eliminar' onclick=$form_elim><img src='imagenes/eliminar.gif' width='12' height='13' /></button></td></tr>"; /*Notese que aqui en lugar de usar un <INPUT TYPE="SUBMIT"...> usamos <BUTTON...> donde agregamos una imagen con <img src=...> y con el atributo onclick=... enviamos la informacion al formulartio que deseamos. Aqui hemos hecho uan correccion, en el primer <td> (celda), agregamos un campo tipo hidden (invisible) para poder enviar la informacion cuando trabajamos en IEXPLORER ya que no la pasa de otra forma. Para editar usamos la variable $form_edit que nos ejecuta "this.form.action='muniedi.php'", que nos envia al archivo muniedi.php Igual para eliminar munieli.php*/?>

10 </table> <div align="center"> <p> <input type="submit" name="b_elimsel" value="eliminar Seleccionados" /> <input type="submit" name="b_salir" value="salir" onclick="this.form.action='municipio.php'" /> </p> </div> <p> </p> </form> </body> </html> Aquí hicimos una corrección, ya que en IEXPLORER, usar el <BUTTON TYPE=SUBMIT.> no pasa correctamente el dato del código del municipio, agregamos un campo tipo hidden (invisible) desde donde enviaremos ese dato (código del municipio) a los formularios de Editar y Eliminar. La pantalla mostrará algo similar a esto: Usando los check box de esta pantalla podremos eliminar los municipios que deseemos, debemos seleccionar bien los que queremos eliminar

11 Luego de seleccionados damos click en el botón Eliminar Seleccionados y eliminara los que fueron seleccionados de la lista. Para eliminar un municipio en particular, usamos el botón de eliminar (Imagen de Basurero) Vamos ahora a crear la pantalla de eliminar donde trabajaremos con la información enviada desde el formulario de LISTAR MUNICIPIOS (munilis.php) ELIMINAR MUNICIPIO Con DW el código quedaría asi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " />

12 <title>eliminar Municipio</title> <style type="text/css">  </style> </head> <body> <?php $codimuni=$_post['codielim']; //en esta variable guardamos el dato traido con la variable $codielim, que es el nombre del boton eliminar del archivo munielim.php //ahora incluimos nuestra clase de conexion include("conexion/conex.php"); //ahora instanciamos nuestro objeto $obj=new fmysql; //ahora con el metodo ejecucion traemos los datos del municipio cuyo codigo es igual a $codimuni y creamos el arreglo con crear_arreglo $resultado=$obj->ejecucion("select * FROM municipio WHERE municodi='$codimuni';"); // como sabemos de antemano que solo va a ser un municipio no necesitamos el ciclo while para conservar los datos //lo hacemos directamente asi $fila=$obj->crear_arreglo($resultado); //ahora guardamos los datos del municipio a eliminar en variables $codmun=$fila['municodi']; $nommun=$fila['muninomb'];?> <form action="" method="post" name="f_municipio"> <p align="center" class="estilo2">eliminar MUNICIPIO </p> <p align="center" class="estilo1">va a eliminar el municipio <?php echo $nommun;?> y con el eliminara todos los datos relacionados, esta seguro de realizar este proceso????? </p> <p align="center" class="estilo1"> <input type="hidden" name="municod" value="<?php echo "$codmun";?>" /> <input type="submit" name="b_si" value="si" /> <input type="submit" name="b_no" value="no" /> </p> </form> <?php // el input type="hidden"... usado en el form es un campo de texto INVISIBLE, donde guardaremos el dato del codigo del municipio //Creamos el codigo a ejecutar si damos click en el boton Si if(isset($b_si)){ //nuevamente usamos el metodo ejecucion, pero esta vez para realizar la eliminacion del municipio trayendo el dato guardado en el campo de texto INVISIBLE $obj->ejecucion("delete FROM municipio WHERE municodi='$municod';");

13 //ahora usamos una sentencia especial de PHP para ir al formulario munilis.php nuevamente echo "<META HTTP-EQUIV='Refresh' CONTENT='0; url=munilis.php'>"; //ahora el codigo si damos click en el boton No if(isset($b_no)){ //usamos la sentencia especial de PHP para ir al formulario munilis.php nuevamente echo "<META HTTP-EQUIV='Refresh' CONTENT='0; url=munilis.php'>";?> </body> </html> En este código podemos ver como se puede abrir y cerra PHP para ser utilizado de acuerdo a nuestras necesidades en diferentes partes dentro del código de HTML. El proceso para eliminación entonces seria el siguiente: Damos click en el botón eliminar (el de la imagen de caneca de basura) del municipio que deseamos borrar (en este caso Barrancabermeja) Se abrirá el formulario de eliminación así:

14 Al dar click en No se devuelve a listar Municipio sin eliminar nada, pero si damos click en Si eliminara el municipio (Barrancabermeja). MODIFICAR UN MUNICIPIO En esta pantalla también llamaremos información desde la pantalla de Listar Municipios (munilis.php) Con DW el código quedaría así: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>

15 <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>agregar Municipio</title> <style type="text/css">  </style> </head> <body> <?php //traemos la informacion del codigo del archivo munilis.php $codimuni=$_post['codiedit']; //incluimos el archivo de conexion include("conexion/conex.php"); //instanciamos nuestro objeto, para trabajar los metodos correspondientes $obj=new fmysql; //usamos el metodo ejecucion, para llamar el dato que vamos a modificar de acuerdo a la variable ya importada desde munilis.php $resultado=$obj->ejecucion("select * FROM municipio WHERE municodi='$codimuni';"); //Guardamos los datos en $fila con el metodo crear_arreglo, para luego llamarlos y tenerr bien la informacion $fila=$obj->crear_arreglo($resultado); $codmun=$fila['municodi']; $nommun=$fila['muninomb'];?> <form action="" method="post" name="f_municipio"> <p align="center" class="estilo2">modificar MUNICIPIO </p> <table width="460" height="113" border="1" align="center"> <tr> <td width="238"><div align="right"><span class="estilo1">municipio</span>:</div></td> <td width="346"> <input type="hidden" name="municodi" size="50" value="<?php echo "$codmun";?>" /> <input type="text" name="muninomb" size="50" value="<?php echo "$nommun";?>" /> </td> </tr> <tr> <td colspan="2"><div align="center"> <input type="submit" name="b_modifica" value="modificar" /> </div></td> </tr> </table> </form> <?php // en el campo text tenemos un atributo llamado value para que nos muestre por pantalla el nombre del municipio, alli le haremos las modificaciones para luego guardarlo

16 //luego de modificar el campo de texto, procedo con un if y el metodo ejecucion a realizar el script de modificacion del dato; si damos click en Modificar if(isset($b_modifica)){ $obj->ejecucion("update municipio SET muninomb='$muninomb' WHERE municodi='$municodi';");//el nombre de los campos hidden y text coinciden con los nombres de los campos //Ahora regresamos al formulario Listar, para ver la modificacion realizada echo "<META HTTP-EQUIV='Refresh' CONTENT='0; url=munilis.php'>";?> </body> </html> Al seleccionar un municipio de la lista para modificar y haciendo click en el botón de modificar (imagen de hoja y lápiz) Abrirá la pantalla de Modificacion Hacemos la modificación

17 Hacemos click en modificar y nos regresara a la Lista de Municipios, modificando el dato correspondiente Para finalizar esta primera parte de este manual, crearemos un formulario, que guardaremos en un archivo llamado municipio.php, que será desde donde llamaremos al de agregar y al de listar El DW quedará así:

18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>agregar Municipio</title> <style type="text/css">  </style> </head> <body> <p align="center" class="estilo2">municipio</p> <form action="muniagr.php" method="post" name="f_agmuni"> <div align="center"> <input type="submit" name="agregar" value="agregar"/> </div> </form> <form action="munilis.php" method="post" name="f_lismuni"> <div align="center"> <input type="submit" name="listar" value="listar"/> </div> </form> <form action="" method="post" name="f_lismuni"> <div align="center"> <input type="submit" name="salir" value="salir"/> </div> </form> </body> La pantalla será

19 En la segunda parte de este manual veremos como trabajar con formualrios para una tabal que teien una llave foránea y por lo cual usaremos otro tipo de coampo conocido como <select> es decir un combobox. Hasta la próxima. Espero que esto les sirva para su desarrollo como constructores de software y también personal El que Constructor de Software es un investigador nato RUBEN DARIO JIMENEZ RAMIREZ Tecnólogo en Sistemas TECNOLOGICA FITEC Profesor CONVENIO ALCALDIA UNIVERSIDAD DEL PUEBLO