AWS10 Lectura

APLICACIONES W EB
Sesin 10 Integracin cliente/servidor
Objetivo
Desarrollar aplicaciones web que interacten de forma eficiente y eficaz en su desempeo en el modelo cliente/servidor.
En esta sesin
Figura 1. Mapa de la sesin
MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 1 DE 15
APLICACIONES W EB
Leccin 10.1 Validando formas en HTML y JavaSript

Introduccin
En esta sesin se analizar la validacin y creacin de objetos dinmicos, as como el trabajo con las tablas dinmicas a travs de consultas entre el cliente y el servidor. Como se ha estudiado en las sesiones anteriores, todas las peticiones que se hacen pueden estar atendidas por el navegador o por el servidor, pudiendo tener una interaccin entre ambos para generar una aplicacin web ms dinmica. A continuacin identificaremos algunas tcnicas de validacin en ambos lados (cliente/servidor) para crear objetos dinmicos.
Validacin en el servidor
La validacin de los datos en el servidor se efecta hasta que los datos son enviados a travs de un botn. Esta validacin se hace con el cdigo en PHP y es recomendable para una aplicacin con poco trfico y cuando los datos deban cotejarse con un alto volumen de informacin en el lado del servidor. Por ejemplo: Un formato determinado solicita el cdigo postal y colonia. Se desea validar que los datos proporcionados son los adecuados, por lo que se lleva a cabo la validacin en el servidor, debido a que las consultas especficas pueden hacerse ms rpido en el servidor y regresar a travs de un mensaje si los datos estn correctos.
Validacin en el cliente
Esta forma de validacin es ptima si tenemos que validar campos con cierto formato o bien, verificar que no estn vacos. Analicemos el ejemplo de un formulario completo:
APLICACIONES W EB
Las validaciones se hacen en el propio navegador antes de enviarlo. Si al llenar un formulario qued algn campo sin llenar o con informacin errnea, la validacin muestra el campo que est incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario fueron introducidos correctamente, se enva el formulario.
Ejemplo de formulario
El siguiente cdigo es el ejemplo de un formulario que consta de un campo de texto, un campo con validacin de mayora de edad y un campo de seleccin: <html> <head> <title>Formulario de prueba</title> <script language="javascript"> function validacion(){ //validar el nombre if (document.miforma.nombre.value.length==0){ alert("Escriba su nombre"); document.miforma.nombre.focus(); return 0; } //validar mayor de edad edad = document.miforma.edad.value; document.miforma.edad.value=edad; if (edad==""){ alert("Introduzca su edad."); document.miforma.edad.focus(); return 0; }else{ if (edad<18){ alert("Debe tener ms de 18 aos."); document.miforma.edad.focus(); return 0;
APLICACIONES W EB
} } //validar el taller if (document.miforma.taller.selectedIndex==0){ alert("Debe seleccionar un taller."); document.miforma.taller.focus(); return 0; } //se enva el formulario. alert("Agradecemos su preferencia."); document.miforma.submit(); } </script> </head> <body> <form name="miforma" action="" method="post"> <div>Introduzca los datos siguientes:</div> <table width=500> <tr> <td>Nombre: </td> <td><input type="text" maxlength="100"></td> </tr> <tr> <td>Edad: </td> <td><input type="text" name="edad" size="3" maxlength="2"></td> </tr> <tr> <td>Taller:</td> <td> <select name="taller"> <option value="Elegir">Elegir <option value="Manualidades">Manualidades <option value="Guitarra">Guitarra
name="nombre"
size="30"
APLICACIONES W EB
<option value="Cocina">Cocina </select> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Enviar" onclick="validacion()"></td> </tr> </table> </form> </body> </html>
Nombre del formulario

Algo que debemos cuidar es el nombre del formulario, que en este caso ser miforma. Con esta identificacin se puede hacer referencia al formulario y a cada uno de los elementos que lo componen.
Botn enviar
Tambin se debe poner atencin en el botn enviar, pues tiene una accin onclick que ejecuta una llamada al JavaScript. En este caso la funcin se llama validacion().
Funcin validacin
Dentro de la funcin validacin se identifican las validaciones de los campos del formulario. Para un mejor detalle analizaremos cada una de las secciones:
En la primera seccin, con el mtodo .value.length se puede comparar que el campo no est vaco. Si el campo es igual a 0 se enva la alerta y se coloca el cursor con la funcin .focus() en el campo correspondiente.
APLICACIONES W EB
La instruccin return 0 permite salir de la funcin sin validar los campos siguientes: //validar el nombre if (document.miforma.nombre.value.length==0){ alert("Escriba su nombre"); document.miforma.nombre.focus(); return 0; }
En la segunda seccin, donde se compara la mayora de edad, primero se asigna el valor del campo a la variable edad y se hace la comparacin para saber si el campo tiene informacin; si no la tiene se genera la alerta y se interrumpe la funcin. Si la tiene, se procede a la comparacin de la mayora de edad.
Por ltimo encontraremos la validacin del campo de seleccin que mediante el mtodo .selectedIndex permite comparar que el ndice no es un cero, si es as, significa que se est seleccionando la primera opcin, que en este caso es la instruccin elegir, por lo que sabramos que no hubo una seleccin.
Si todas las validaciones se cumplen, la informacin del formulario ser enviada.
Con el ejemplo anterior podemos darnos una idea de cmo hacer la validacin en el lado del cliente, que es de las ms comunes en las aplicaciones web.
APLICACIONES W EB
Leccin 10.2 Creando pginas con objetos dinmicos

Los eventos en JavaScript
Para crear pginas con objetos dinmicos es necesario comprender cmo se manejan los eventos en JavaScript, pues a partir de ellos se pueden generar acciones que llaman a funciones que producen una interactividad con el usuario de la aplicacin web. A continuacin revisaremos la lista de los manejadores de eventos en JavaScript, ofreciendo una pequea descripcin de cada uno:
onabort: se genera cuando el usuario detiene la carga de la pgina desde el navegador o cuando se va de la pgina sin terminar de cargarla. onblur: se genera cuando un elemento pierde el foco de la aplicacin, por ejemplo: el cursor puede estar dentro de un campo de texto y al cambiar de campo se produce el evento. onchange: se genera cuando en un formulario, un campo cambia su contenido. En ocasiones se genera hasta que el campo pierde el foco. onclick: se genera cuando se da un clic sobre un elemento de la pgina, generalmente un botn, una imagen o un enlace. ondragdrop: se genera cuando un usuario suelta algo que haba arrastrado sobre la pgina web. onerror: se genera cuando no se puede cargar un documento o una imagen. onfocus: es lo contrario a onblur. Al ser utilizado se activa el campo seleccionado. onkeydown: se genera cuando el usuario pulsa una tecla.
APLICACIONES W EB
onkeypress: se crea cuando la tecla permanece presionada, generndose despus del evento onkeydown. onkeyup: se genera cuando el usuario deja de presionar la tecla. onload: se genera cuando la pgina o las imgenes han terminado de cargarse. onmousedown: se genera cuando el usuario da un clic sobre un elemento de la pgina. Se produce en el momento de pulsar el botn, ya sea que se suelte o no. onmousemove: se genera cuando el cursor se mueve por la pgina. onmouseout: se genera cuando el cursor sale del rea ocupada por un elemento en la pgina. onmouseover: se genera cuando el cursor entra en el rea ocupada por un elemento en la pgina. onmouseup: se genera cuando el usuario suelta el botn del ratn que previamente haba presionado. onmove: se genera cuando se mueve la ventana del navegador o un frame. onresize: se genera cuando se redimensiona la ventana del navegador o el frame, en caso de que la pgina los tenga. onreset: se genera cuando se hace clic en el botn reset de un formulario. onselect: se genera cuando un usuario selecciona una opcin en un elemento de un formulario. onsubmit: ocurre cuando el visitante aprieta sobre el botn de enviar el formulario. Se ejecuta antes del envo propiamente dicho. onunload: se genera porque se pulsa sobre un enlace que nos enva a otra pgina o bien, por cerrar la ventana del navegador.
APLICACIONES W EB
Utilizacin de eventos
A continuacin se presenta un ejemplo de utilizacin de eventos y se muestra cmo validar la longitud de un textarea:
<html> <head> <script language="JavaScript"> function controlcaracteres(campo, cuentacampo, limite) { if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); else cuentacampo.value = limite - campo.value.length; } </script> </head> <body> <center> <form name="form1"> slo puedes entrar 125 caracteres. <textarea name="mimensaje" wrap=physical cols="28" rows="4" onKeyDown="controlcaracteres(this.form.mimensaje,this.form.cuantos,1 25);" onKeyUp="controlcaracteres(this.form.mimensaje,this.form.cuantos,125) ;"></textarea> <input type="text" name="cuantos" size="3" maxlength="3" value="125" readonly>te quedan todava </form> </center> </body> </htm>
APLICACIONES W EB
Leccin 10.3 Tablas dinmicas

Generalidades
Las tablas dinmicas nos permiten modificar la informacin que es solicitada al servidor en tiempo real, por ejemplo cuando tenemos una consulta que arroja varios registros de 10 en 10 hasta terminar. El siguiente cdigo fue generado en Adobe Dreamweaver para demostrar este punto.
<?php require_once('Connections/capstendhal.php'); ?> <?php if (!function_exists("GetSQLValueString")) { function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") { if (PHP_VERSION < 6) { $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue; } $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) { case "text": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "long": case "int": $theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double": $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
APLICACIONES W EB
break; case "date": $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break; case "defined": $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue; break; } return $theValue; } } $currentPage = $_SERVER["PHP_SELF"]; $maxRows_usuarios = 10; $pageNum_usuarios = 0; if (isset($_GET['pageNum_usuarios'])) { $pageNum_usuarios = $_GET['pageNum_usuarios']; } $startRow_usuarios = $pageNum_usuarios * $maxRows_usuarios; mysql_select_db($database_capstendhal, $capstendhal); $query_usuarios = "SELECT idUsuario, nombre, aMaterno, aPaterno, usuario, cdula, password FROM usuarios"; /* las siguientes instrucciones permiten llamar al query con los registros especficos y generar la tabla dinmica */ $query_limit_usuarios = sprintf("%s LIMIT %d, %d", $query_usuarios, $startRow_usuarios, $maxRows_usuarios); $usuarios = mysql_query($query_limit_usuarios, $capstendhal) or die(mysql_error()); $row_usuarios = mysql_fetch_assoc($usuarios); if (isset($_GET['totalRows_usuarios'])) {
APLICACIONES W EB
$totalRows_usuarios = $_GET['totalRows_usuarios']; } else { $all_usuarios = mysql_query($query_usuarios); $totalRows_usuarios = mysql_num_rows($all_usuarios); } $totalPages_usuarios = ceil($totalRows_usuarios/$maxRows_usuarios)1; $queryString_usuarios = ""; if (!empty($_SERVER['QUERY_STRING'])) { $params = explode("&", $_SERVER['QUERY_STRING']); $newParams = array(); foreach ($params as $param) { if (stristr($param, "pageNum_usuarios") == false && stristr($param, "totalRows_usuarios") == false) { array_push($newParams, $param); } } if (count($newParams) != 0) { $queryString_usuarios = "&" . htmlentities(implode("&", $newParams)); } } $queryString_usuarios = sprintf("&totalRows_usuarios=%d%s", $totalRows_usuarios, $queryString_usuarios); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <p> <table border="0">
APLICACIONES W EB
<tr> <td><?php if ($pageNum_usuarios > 0) { // Se muestra si no es la primer hoja ?> <a href="<?php printf("%s?pageNum_usuarios=%d%s", $currentPage, 0, $queryString_usuarios); ?>">First</a> <?php } // Se muestra si no es la primer hoja ?></td> <td><?php if ($pageNum_usuarios > 0) { // Se muestra si no es la primer hoja?> <a href="<?php printf("%s?pageNum_usuarios=%d%s", $currentPage, max(0, $pageNum_usuarios - 1), $queryString_usuarios); ?>">Previous</a> <?php } // Se muestra si no es la primer hoja?></td> <td><?php if ($pageNum_usuarios < $totalPages_usuarios) { // Show if not last page ?> <a href="<?php printf("%s?pageNum_usuarios=%d%s", $currentPage, min($totalPages_usuarios, $pageNum_usuarios + 1), $queryString_usuarios); ?>">Next</a> <?php } // Se muestra si no es la ltima hoja ?></td> <td><?php if ($pageNum_usuarios < $totalPages_usuarios) { // Se muestra si no es la ltima hoja ?> <a href="<?php printf("%s?pageNum_usuarios=%d%s", $currentPage, $totalPages_usuarios, $queryString_usuarios); ?>">Last</a> <?php } // Se muestra si no es la ltima hoja?></td> </tr> </table> </p> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td>id Usuario</td> <td>Nombre</td> <td>Apellido Materno</td> <td>Apellido Paterno</td> <td>Usuario</td> <td>Cdula</td> <td>Password</td> </tr> <?php do { ?>
APLICACIONES W EB
<tr> <td><?php echo $row_usuarios['idUsuario']; ?></td> <td><?php echo $row_usuarios['nombre']; ?></td> <td><?php echo $row_usuarios['aMaterno']; ?></td> <td><?php echo $row_usuarios['aPaterno']; ?></td> <td><?php echo $row_usuarios['usuario']; ?></td> <td><?php echo $row_usuarios['cedula']; ?></td> <td><?php echo $row_usuarios['password']; ?></td> </tr> <?php } while ($row_usuarios = mysql_fetch_assoc($usuarios)); ?> </table> </body> </html> <?php mysql_free_result($usuarios); ?>
Este cdigo se puede utilizar para generar diversas tablas que presenten informacin de tablas muy grandes.
APLICACIONES W EB
Referencias consultadas
Bibliografa: Goodman, D. (2008). JavaScript y DHTML. Madrid: Anaya Multimedia. Ors, J. (2008). Diseo de pginas web con XHTML, JavaScript y CSS. Madrid: Alfaomega, Ra-Ma. Suehring, S. (2008). JavaScript paso a paso. Madrid: Anaya Multimedia.

AWS10 Lectura

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AWS10 Lectura

Uploaded by

Copyright:

Available Formats

APLICACIONES W EB

Sesin 10 Integracin cliente/servidor

Figura 1. Mapa de la sesin

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 1 DE 15

Leccin 10.1 Validando formas en HTML y JavaSript

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 2 DE 15

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 3 DE 15

Nombre del formulario

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 5 DE 15

Si todas las validaciones se cumplen, la informacin del formulario ser enviada.

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 6 DE 15

Leccin 10.2 Creando pginas con objetos dinmicos

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 7 DE 15

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 8 DE 15

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 9 DE 15

Leccin 10.3 Tablas dinmicas

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 11 DE 15

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 13 DE 15

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 14 DE 15

MAESTRA EN TECNOLOGAS DE LA INFORMACIN PGINA 15 DE 15

You might also like