CREAR UNA PAGINA PARA LA CAPTURA DE DATOS.

OBJETIVO:

DISEÑAR UNA PAGINA QUE PERMITA CAPTURAR LOS DATOS DE NUMERO DE CONTROL Y NOMBRE DE ALUMNOS UTILIZANDO LOS RECURSOS DE TABLAS Y FORMULARIOS DE HTML.

1. Abrir la aplicación Dreamweaver MX y que en lo sucesivo la identificaremos como DW a lo largo de la práctica.

2. En DW presione las teclas Ctrl+O para seleccionar y abrir la página DISCLI_pbase.htm que se encuentra en la carpeta \ITC-DISCLI y que se concluyó en la práctica uno.

3. Presione las teclas Ctrl+Mayúsc+S para guardar la página base con otro nombre. Escriba el nombre nuevo_alumno.php para la nueva página de captura de datos de alumnos. Esta nueva página deberá quedar en la carpeta \ITC-DISCLI\Alumnos. Es importante hacer notar que la extensión del nombre ahora debe ser .php.

4. Asegúrese que está observando la página en el modo Código. Primera opción del menú Ver en la barra superior de menús en DW. NOTA : Dreamweaver MX Versión Educativa tiene un error en su módulo de edición pues en algunas ocasiones al cortar y pegar líneas de códigos inserta secuencias de caracteres extraños similares a los siguientes : ?????e????eA?Ð??????. Si esta realizando esta práctica y copia el código y lo pega en DW, debe revisar a conciencia cada línea pues estos caracteres extraños pueden afectar los resultados esperados. Con el código de la página en pantalla, ingrese el texto Nuevo Alumno entre las etiquetas <title> y </title>. Localice la capa <div id=”Modulo”...> . . . </div>. y reemplácela por el siguiente código : <div id="Modulo" style="position:absolute; left:483px; top:57px; width:234px; height:34px; z-index:2"> <font color="#FFFFFF" size="5" face="Arial Black"><em> <strong>Agregar <font color="#006600">Alumno</font></strong></em></font> </div> Lo anterior cambia el rótulo que indica la función del módulo. Ahora se observará Agregar Alumno. Presione Ctrl+S para guardar los cambios cada vez que ingrese algo nuevo.

5. En los siguientes pasos se agregarán elementos para cambiar esta página base en una página para captura de datos. Ahora incluya el siguiente código después del layer <div id=”Modulo” ...> . . . </div> : <div id="Regreso" style="position:absolute; left:616px; top:167px; width:143px; height:19px; z-index:8"> <a href="../DISCLI_menu.htm"> <img src="../Imagenes-Sitio/Regresar.jpg" width="120" height="16" border="0"> </a> </div> Este código incluye una capa con un recurso de imagen prediseñada que define un vínculo de regreso a la página anfitrión DISCLI_menu.htm. Presione Ctrl+S para guardar cambios y F12 si desea ver los resultados en el navegador.

6. En este paso agregará a la página un formulario para la captura de datos. Este formulario contendrá un layer o capa que en su interior definirá una tabla, dos cajas de texto y un botón para el registro de los datos capturados. Todos los elementos antes mencionados forman parte del lenguaje HTML y para su correcta comprensión se le recomienda realizar notas complementarias. Escriba el siguiente código debajo del layer <div id=”Regreso” ...> . . . </div> : <form name="frmCapAlumno" method="post" action="agrega_unalumno.php"> <div id="TablaCaptura" style="position:absolute; left:121px; top:227px; width:517px;

height:81px; z-index:7"> <table width="515" height="78" border="1" cellspacing="0" bordercolor="#FFFFFF"> <tr> <td width="105" bgcolor="#007800"> <div align="center"> <font color="#ccff66" size="2" face="Verdana, Arial, Helvetica, sans-serif"> &nbsp;No.Control</font> </div> </td> <td width="273" bgcolor="#ecf8c7"> <div align="left"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">&nbsp; <input name="noCtrl" type="text" id="noCtrl" tabindex="1" size="15" maxlength="10"> </font> </div> </td> <td width="123" rowspan="2" bgcolor="#007800"> <div align="center"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif"> <input type="submit" name="Submit" tabindex="3" value=" Registrar "> </font> </div> </td> </tr> <tr> <td bgcolor="#007800"> <div align="center"> <font color="#ccff66" size="2" face="Verdana, Arial, Helvetica, sans-serif">Nombre </font> </div> </td> <td bgcolor="#ecf8c7"> <div align="left"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">&nbsp; <input name="nombAlum" type="text" id="nombAlum" tabindex="2" size="35" maxlength="35"> </font> </div> </td> </tr> </table> </div> </form> El código anterior produce visualmente el siguiente formulario de captura : TIP : El código anterior define un formulario identificado por frmCapAlumno. También se indica a través de post que se enviarán los datos capturados dentro del mismo formulario hacia la página dinámica agrega_unalumno.php que será la encargada de realizar el proceso de registro en la base de datos. El formulario comienza con <form> y termina con </form>. Dentro del formulario hay una capa en la cual se define una tabla. Esta comienza con <table> y termina con </table> . En esta tabla se definen dos renglones y tres columnas. En dos de las definiciones de renglones, se incluyen cajas de texto para la captura del número de control y el nombre del alumno. En la última columna se define un botón para el proceso de envío y registro del formulario. La etiqueta <input> define los controles necesarios para la captura de datos a través de su atributo type.

Si se trata de una caja de texto se utilizará --text-- o si es un botón de envío, en type se definrá --submit--. Cuando los datos son ingresados en las cajas de texto y se presiona el botón Registrar, éstos son transferidos a la página agregar_unalumno.php que se encargará de su validación y registro.

7. Presione Ctrl+S para guardar los cambios a la página nuevo_alumno.php.

8. Presione F12 para observar el formulario en la página. Puede ingresar datos en las cajas de texto y presionar Registrar. El navegador le indicará que la página no existe pues esta será diseñada en la próxima práctica.

RESUMEN :

Al concluir esta práctica se obtendrá una página de captura de información para su posterior registro en la base de datos. Si las prácticas anteriores se realizaron correctamente puede probar el vínculo de regreso a la página anfitrión y de ésta a la de Alta de Alumnos.

El código completo de cómo debe quedar esta página se muestra a continuación. Observe que el código en color es el que aporta esta práctica.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Nuevo Alumno</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="Cabecera" style="position:absolute; left:0px; top:0px; width:190px; height:94px; z-index:1"><img src="../Imagenes-Sitio/DISCLI-Cabecera.gif" width="775" height="149"> </div>

<div id="Modulo" style="position:absolute; left:483px; top:57px; width:234px; height:34px; z-index:2"><font color="#FFFFFF" size="5" face="Arial Black"><em><strong>Agregar <font color="#006600">Alumno</font></strong></em></font> </div> <div id="Regreso" style="position:absolute; left:616px; top:167px; width:143px; height:19px; z-index:8"><a href="../DISCLI_menu.htm"><img src="../Imagenes-Sitio/Regresar.jpg" width="120" height="16" border="0"></a> </div>

<div id="Banner" style="position:absolute; left:3px; top:127px; width:400px; height:22px; z-index:0"> <marquee bgcolor="#FFFFFF" scrolldelay="150" border="0" style="font-size: 8 pt; font- family:Arial, Helvetica, sans-serif" width="400" height="15"> <font color="#ff0000">Catedrático&nbsp;&nbsp;&nbsp;::&nbsp;&nbsp;&nbsp;Ing. Ricardo González González</font> </marquee> </div>

<div id="Derechos" style="position:absolute; left:391px; top:373px; width:354px; height:15px; z-index:4"> <p align="center" style="font-size: 8pt; font-family: Arial, Helvetica, sans-serif"> <font color="#006600">Instituto Tecnológico de Celaya :: © 2005 Todos los derechos reservados</font> </p> </div>

<div id="BarraDigital" style="position:absolute; left:0px; top:394px; width:398px; height:13px; z-index:6"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=6,0,2

9,0" width="775" height="31"> <param name="movie" value="../Imagenes-Sitio/BarraDigital.swf"> <param name="quality" value="high"><param name="SCALE" value="exactfit"> <embed src="../Imagenes-Sitio/BarraDigital.swf" width="775" height="31" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x- shockwave-flash" scale="exactfit"></embed> </object> </div>

<form name="frmCapAlumno" method="post" action="agrega_unalumno.php"> <div id="TablaCaptura" style="position:absolute; left:121px; top:227px; width:517px; height:81px; z-index:7"> <table width="515" height="78" border="1" cellspacing="0" bordercolor="#FFFFFF"> <tr> <td width="105" bgcolor="#007800"> <div align="center"> <font color="#ccff66" size="2" face="Verdana, Arial, Helvetica, sans-serif"> &nbsp;No.Control</font> </div> </td> <td width="273" bgcolor="#ecf8c7"> <div align="left"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">&nbsp; <input name="noCtrl" type="text" id="noCtrl" tabindex="1" size="15" maxlength="10"> </font> </div> </td> <td width="123" rowspan="2" bgcolor="#007800"> <div align="center"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif"> <input type="submit" name="Submit" tabindex="3" value=" Registrar "> </font> </div> </td> </tr> <tr> <td bgcolor="#007800"> <div align="center"> <font color="#ccff66" size="2" face="Verdana, Arial, Helvetica, sans-serif">Nombre </font> </div> </td> <td bgcolor="#ecf8c7"> <div align="left"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif">&nbsp; <input name="nombAlum" type="text" id="nombAlum" tabindex="2" size="35" maxlength="35"> </font> </div> </td> </tr> </table> </div> </form> </body> </html>