Estructura:
[1] El formulario tiene 4 campos: Documento de identidad, nombres, apellidos y dirección de correo electrónico que corresponden 1:1 con los campos de la tabla usuario de la base de datos.
[2] En la parte superior hay un espacio para los mensajes de error.
[3] En la parte inferior hay un espacio para mostrar la tabla de registros.
[4] A continuación del campo: documento de identidad, hay un botón Buscar que permite indagar sobre la existencia de un registro con dicho documento.
[5] En la parte inferior está el botón Agregar que permite insertar la información del usuario ubicada en el formulario a la base de datos.
[6] También se encuentra un botón Registros que permite mostrar u ocultar la tabla de registros con la información almacenada hasta el momento en la base de datos.
Flujo:
Si se presiona [4] se consulta la base de datos en busca del documento especificado. En caso de encontrarse una coincidencia, su información se muestra en [1], en caso contrario se muestra el mensaje de error en [2].
Si se presiona [5] se intenta realizar la inserción de la información en la tabla usuario de la base de datos. En caso de tener éxito o fracaso durante la transacción, se muestra un mensaje adecuado en [2].
Si se presiona [6] se muestran los registros contenidos en la base de datos en [3]. En caso de no existir registros se muestra un mensaje de error apropiado en [2].
Implementación:
Teniendo esto claro se procedió con la implementación del formulario en HTML en el archivo form.html.
Se contó con 4 áreas. Una para la inclusión de los archivos JavaScript: prototype.js requerido por el framework de Prototype y form.js que contiene las funciones a definirse próximamente.
<script language=”javascript” src=”lib/prototype/prototype.js“></script>
<script language=”javascript” src=”form.js“></script>
La segunda sección representa el espacio reservado para los mensajes de error.
<div id=”mensaje_error“></div>
La tercer sección define el formulario (myForm) como tal. Las longitudes de los campos de texto (maxlength) deberán coincidir con los tamaños de los campos definidos en la base de datos.
<form name=”myForm“>
<table>
<tr>
<td>
<b>Documento</b>
</td>
<td>
<input type=”text” id=”t_documento” value=”" size=”30″
maxlength=”10″ />
</td>
<td>
<input type=”button” id=”b_buscar” value=”Buscar”
onClick=”buscar(document.myForm.t_documento.value)” />
</td>
</tr>
<tr>
<td>
<b>Nombres</b>
</td>
<td colspan=”2″>
<input type=”text” id=”t_nombres” value=”" size=”30″
maxlength=”60″ />
</td>
</tr>
<tr>
<td>
<b>Apellidos</b>
</td>
<td colspan=”2″>
<input type=”text” id=”t_apellidos” value=”" size=”30″
maxlength=”60″ />
</td>
</tr>
<tr>
<td>
<b>Dirección de Correo</b>
</td>
<td colspan=”2″>
<input type=”text” id=”t_email” value=”" size=”30″
maxlength=”128″ />
</td>
</tr>
</table><input type=”button” id=”b_agregar” value=”Agregar”
onClick=”agregar(document.myForm) “/><input type=”button” id=”b_listar” value=”Registros”
onClick=”listar() “/>
</form>
Nótese que el evento onClick de los botones Buscar, Agregar y Registros es manejado por las funciones JavaScript buscar(documento), agregar(forma) y listar() respectivamente, las cuales se definirán próximamente.
La cuarta y última sección de la interfaz de usuario representa el espacio reservado para desplegar la tabla de registros.
<div id=”listado_registros“></div>
El siguiente paso corresponde al implementar las funciones JavaScript almacenadas en el archivo form.js que produzcan los resultados esperados en la presión de los botones de la forma. La implementación de estas funciones estará basada en la librería de Prototype.
Artículos relacionados:
