Capítulo 8 Servidor

DESARROLLO WEB
EN ENTORNO SERVIDOR
CAPTULO 8:
Generacin dinmica de pginas Web interactivas
Marcos Lpez Sanz
Juan Manuel Vara Mesa
Jenifer Verde Marn
Diana Marcela Snchez Fquene
Jess Javier Jimnez Hernndez
Valeria de Castro Martnez
Pgina Web interactiva
Es una pgina que permite variar el aspecto y

comportamiento en funcin de decisiones que toma
el usuario a travs de la interfaz grfica de la
pgina.
Se puede utilizar:
o Cdigo de script que se ejecuta en el navegador.
o Enviar una peticin al servidor. Se ejecuta el cdigo en el
servidor y genera una nueva pgina Web que enva al
navegador. Al tratarse de una pgina Web dinmica, en
funcin de los datos introducidos por el usuario, la pgina
se ver modificada mostrando informacin definida en la
programacin.
Desarrollo web en entorno servidor

M. Lpez, J. M. Vara, J. Verde, D. M. Snchez, J. J. Jimnez, V. de Castro
Captulo 8 Generacin dinmica de pginas Web interactivas 2
Comunicacin entre el cliente y el servidor:
Se ejecuta cdigo en:

o Cliente navegador Web.
o Servidor motor que interprete el cdigo.

Tipos de cdigo que se ejecutan en el cliente:

o HTML: es la base de las pginas Web, este lenguaje describe la
estructura y el contenido. La forma en que se interpreta el
cdigo por el navegador, es de principio a fin.
o JavaScript: permite configurar la interactividad y el dinamismo

de la pgina Web. A travs de los eventos de la pgina, las
acciones programadas en este lenguaje, modificaran el aspecto,
estructura o visualizacin de la pgina. Es interpretado por el
navegador y el orden en el que lo hace viene fijado por las
llamadas a cada funcin del cdigo. El cdigo JavaScript, se
ejecuta cada vez que ocurre un evento que tenga asociada una
funcin JavaScript.

o CSS: es el encargado de definir la presentacin de los

datos que se indican en el cdigo HTML. El navegador
interpreta las caractersticas CSS.
o XML: es un lenguaje de marcas extensible que permite

definir la gramtica. El navegador es el encargado de
interpretar el cdigo y la forma que tiene de hacerlo es
similar a HTML. Este lenguaje necesita de CSS para
mostrar los datos. En el caso de no utilizar estilos CSS, el
navegador muestra la estructura igual que el cdigo
original.
o Otros: applets de Java, VBScript, etc.

Tipos de cdigo que se ejecutan en el servidor:

o CGI: es un programa que se ejecuta en el servidor
para enviar datos al navegador.
o Perl: es un lenguaje de programacin interpretado. El

cdigo se ejecuta e interpreta directamente en el
servidor. Este lenguaje permite realizar llamadas a
otros subprogramas.

o ASP (Active Server Pages): es la tecnologa que

Microsoft ha creado para generar pginas Web
dinmicas en el servidor. Este lenguaje se ha
comercializado como un anexo al Internet Information
Services (IIS). Para poder ejecutar el cdigo ASP en
el servidor, es necesario que este sea compatible con
el lenguaje. El IIS soporta cdigo ASP. El cdigo se
embebe entre las sentencias HTML.

o PHP: es un lenguaje de programacin interpretado,

que se ejecuta en el lado del servidor. Este lenguaje
tiene las siguientes caractersticas:
Tiene una licencia de software libre y de cdigo abierto
Es independiente de la plataforma.
Cuenta con una gran liberara de funciones y abundante
documentacin.
Se embebe el cdigo en el HTML.
El cdigo PHP se interpreta en el servidor y se enva al
navegador en forma de HTML.

o JSP (Java Server Pages): lenguaje que permite crear

pginas con programacin Java. Java es un lenguaje
multiplataforma, por tanto, estas aplicaciones se
pueden ejecutar en todos los servidores que tengan
la maquina virtual instalada.

Libreras
Es un conjunto de subprogramas que sirven

para programar una aplicacin.
Contienen cdigo y datos que pueden ser

llamados desde otro programa principal.
Al incluir el cdigo de librera, este pasa a

formar parte del programa principal.

API
Es un conjunto de funciones y procedimientos

que proveen de bibliotecas (libreras) para ser
utilizado por otro programa.
La diferencia con la librera es que las funciones

de una API acceden habitualmente a programas
diferentes, permitiendo as generar
transparencia al programador.

Framework
Es un conjunto estndar de conceptos y tecnologas con

un soporte definido.
Se suelen emplear una serie de mdulos concretos que

facilitan la organizacin y desarrollo del nuevo software.
La mayora incluyen soporte para programas, bibliotecas

y uno o ms lenguajes que son interpretados por los
programas base del framework para facilitar el
desarrollo, agrupar y organizar los componentes del
proyecto.

ASP
ASP es capaz de:

o Dinamizar, editar, cambiar, aadir, cualquier
contenido de una pgina Web.
o Responder a las consultas de los usuarios y a los

datos de los formularios HTML que se han enviado.
o Acceder a datos y a bases de datos, devolviendo

resultados al navegador.

ASP
o Personalizar las aplicaciones Web para que sean

ms tiles para usuarios individuales.
o Es una tecnologa veloz y sencilla. Adems garantiza

la seguridad, ya que el cdigo no se ve en el
navegador. Si se programa de una forma correcta
minimiza el trfico de la red.

Libreras y tecnologas ASP
Crear pginas Web dinmicas:

o Introduciendo cdigo embebido con las etiquetas HTML.
o Con controles de servidor que son objetos de las pginas Web
que se ejecutan cuando el usuario solicita una pgina. Las
caractersticas son las siguientes:
Representan el formato en el navegador.
Proporcionan elementos HTML y otros ms complejos, como
calendarios, o conexiones a bases de datos.
El framework que Microsoft ha facilitado para hacer uso de estos
controles es ASP.NET.
Permiten manejar eventos en el servidor dependiendo de la iteracin
del usuario. Debido a que estos eventos son manejados desde el
servidor, es necesario acceder a las propiedades, mtodos o eventos
de los elementos en el cdigo de servidor.

Existen varios controles de servidor en ASP.Net:
o HTML Server Controls: son los mismos que los de HTML pero a nivel de servidor.
o ASP.Net Web Forms Controls: son como los de HTML en el lado del servidor.
Ejemplo: TextBox, Buttons, etc.
o ASP.Net List Controls: permite mostrar el contenido de las bases de datos.
o ASP.Net Mobile Controls: tienen la misma funcionalidad que dos anteriores. La

diferencia reside en que se aplican a los dispositivos cliente, como por ejemplo un
dispositivo mvil.
o ASP.Net Validation Controls: son los controles de validacin. Permiten en el servidor,

validar entradas a travs de la iteracin que el usuario tiene con la aplicacin.

Ejemplo Control Web Form:
<html>
<body>
<form runat="server">
<asp:TextBox id="tb1" Text="Name" runat="server" />
</form>
</body>
</html>

Las libreras permiten reducir la redundancia de

cdigo y fomenta la reutilizacin de cdigo.
Para crear una librera se crea una pgina ASP

con las funciones comunes.
Para utilizar el cdigo comn, solo hay que

llamar a la funcin correspondiente de la
librera.

Ejemplo pgina que llama a una librera:
<html>
<head><title>Ttulo de ASP</title></head>
<body>

<% call CabeceraPagina %>
<% call MenuPagina %>
Contenido de la Pgina
<% call PiePagina %>
</body>
</html>

Ejemplo librera:
<%
sub CabeceraPagina
%>
<p>Cabecera de la pginas</p><hr>
<%
end sub
sub MenuPagina
%>
<p>Menu de la pgina</p>
<%
end sub
sub PiePagina
%>
<p>Pie de la pgina</p>
<%
end sub
%>

Ejemplo:

PHP
Funciona en diferentes plataformas (Windows,

Linux, Unix, etc.).
Es compatible con casi todos los servidores que se

utilizan en la actualidad (Apache, IIS, etc.).
Se puede descargar gratis desde los recursos

oficiales de PHP.
Es fcil de aprender y se ejecuta de manera

eficiente en el lado del servidor.
Libreras y tecnologas PHP
Ejemplo pgina que llama a una librera:
<?php
include "funciones.php";
$cateto1 = 10;
$cateto2 = 5;
$hipotenusa = calculaHipotenusa($cateto1, $cateto2);
print"<p>La hipotenusa del tringulo es $hipotenusa </p>";

?>

Libreras y tecnologas PHP
Ejemplo librera:
<?php
function calculaHipotenusa($arg1, $arg2){
$hipotenusa = sqrt($arg1*$arg1+$arg2*$arg2);
return $hipotenusa;
}
?>

JSP y Servlets
En Java existen dos tipos de fichero principales

que se ejecutan en el servidor:
o JSP: facilita la presentacin de los documentos. Su
objetivo es estructurar la interfaz de usuario, de una
forma clara y ordenada.
o Servlet: son programas que se ejecutan en el lado del

servidor para generar pginas Web. Provee de una
mayor flexibilidad en la programacin de la lgica de
negocio.

JSP y Servlets
Modelo vista controlador JSP y Servlet:

JSP
Ejemplo cdigo JSP:

<%@ page language='java' contentType="text/html" %>
<%! int count=0; %>
<html>
<head><title>Ejemplo JSP</title></head>
<body>
Ha entrado
<%= count++ %>
<% if (count == 1) { %>
vez
<% } else { %>
veces
<% } %>
</body>
</html>

Servlet
Ejemplo cdigo servlet:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class HolaMundo extends HttpServlet {
public void doGet(HttpServletRequest request,

HttpServletResponse response) throws IOException,
ServletException{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("<title>Ttulo Hola Mundo!</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Hola Mundo!</h1>");
out.println("</body>");
out.println("</html>");
}
}

Pginas interactivas
Ejecutar scripts de navegador para solicitar otra

pgina al servidor con un cuadro de dilogo es una
de las tareas ms comunes para establecer una
comunicacin con el usuario.
La respuesta al evento capturado es la redireccin a

otra pgina.
En la peticin de la nueva pgina se puede enviar

variables a travs de la URL para controlar desde
que evento o pgina viene el usuario.

Pginas interactivas ASP
Ejemplo (cuadro de dilogo):

<html>
<head><title>Ttulo origen ASP</title>
<script languaje="JavaScript">
function envio(){
if(confirm('Pulsa una opcion?')){
location.href='pagina.asp?id=1';
}else{
location.href='pagina.asp?id=2';
}
}
</script>
</head>
<body>
<p onclick="envio()">Pagina nueva</p>
</body>
</html>


Ejemplo (Pgina destino donde muestra un valor

distinto dependiendo del botn pulsado):
<html>
<head><title>Ttulo destino ASP</title></head>
<body>
<%
valor = Request.QueryString("id")
if valor=1 then
response.write("Has pulsado si, valor: " & valor)
else
response.write("Has pulsado no, valor: " & valor)
end if
%>
</body>
</html>

Pginas interactivas PHP

<html>
<head><title>Ttulo origen PHP</title>
function envio(){
location.href='destinoUNO.php?id=1';
}else{
location.href='destinoDOS.php?id=2';
}
}
</script>
</head>
<body>
<p onclick="envio()">Destino Pagina nueva</p>
</body>
</html>

Pginas interactivas PHP
Ejemplo (Pgina destino si pulsa aceptar):
<html>
<head><title>Ttulo destino uno PHP</title></head>
<body>
<?php
$valor = $_GET["id"];
if ($valor == 1){
echo "Estas en el DESTINO 1, valor: ".$valor);
}else{
echo "El parmetro id no es 1, es: ".$valor);
}
?>
</body>
</html>

Pginas interactivas JSP

<html>
<head><title>JSP Page</title>
function envio(){
location.href='/capitulo/intermediario?id=1';
}else{
location.href='/capitulo/intermediario?id=2';
}
}
</script>
</head>
<body>
<p onclick="envio()">Destino pagina nueva</p>
</body>
</html>

Ejemplo (servlet intermedio que redirige segn

los parmetros recibidos):
package es.serv.paquete;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "intermediario", urlPatterns =

{"/intermediario"})

public class intermediario extends HttpServlet {
protected void processRequest(HttpServletRequest request,

HttpServletResponse response)throws ServletException,
IOException {
String idServlet = request.getParameter("id");

response.setContentType("text/html;charset=UTF-8");
if("1".equals(idServlet)){
response.sendRedirect("destinoUNO.jsp");
}else{
response.sendRedirect("destinoDOS.jsp");
}
}
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response)throws ServletException,
IOException {
processRequest(request, response);
}
}

Ejemplo (Pgina destino si pulsa aceptar):

<html>
<head><title>JSP Page</title></head>
<body>
<h1>Pulso ACEPTAR. Llega al destino UNO</h1>
</body>
</html>

Esquema del ejemplo:

Obtencin remota de informacin
Para recuperar campos en el servidor, se utilizan los

formularios de HTML.
Se enviar el formulario desde el cliente al servidor.
PROBLEMA: al recupera los valores no se puede

garantizar que el tipo de dato coincida con el que se
espera obtener.
SOLUCIN: deben comprobarse previamente los

valores que llegan desde el navegador.

Obtencin remota de informacin

Validacin con ASP
Para validar campos ASP puede utilizar:

o Cdigo ASP embebido en el HTML.
o Controles de validacin de ASP.NET. que se utilizan

para validar los datos de entrada del usuario. En el
caso de que el control de entrada no pase la
validacin, se muestra un mensaje de error al
usuario.
Ejemplo: <asp:control_name id="some_id" runat="server" />

Validacin con ASP
Tipos de controles de validacin:

Nombre del Control Descripcin del Control
Compara el valor de un control de entrada al valor de otro control de

CompareValidator
entrada o de un valor fijo.
Permite escribir un mtodo para controlar la validacin de un valor

CustomValidator
introducido.
Comprueba que el usuario introduce un valor que est entre dos
RangeValidator
valores.
Asegura que el valor de un control de entrada coincide con un patrn
RegularExpressionValidator
determinado.
RequiredFieldValidator Hace que el control de un campo de entrada sea obligatorio.
Muestra un informe de todos los errores de validacin que se

ValidationSummary
produjeron en una pgina Web.

Validacin con ASP
Ejemplo (control de validacin):
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
If Page.IsValid Then
lbl1.Text="La pgina es vlida."
Else
lbl1.Text="La pgina no es vlida!!"
End If
End Sub
</script>

Validacin con ASP
Ejemplo (control de validacin):

<html>
<body>
<form runat="server">
Introduzca un telfono mvil valido:
<asp:TextBox id="tbox1" runat="server" />
<br /><br />
<asp:Button Text="Submit" OnClick="submit"
runat="server" />
<br /><br />
<asp:Label id="lbl1" runat="server" />
<br />
<asp:RangeValidator ControlToValidate="tbox1"
MinimumValue="600000000" MaximumValue="699999999"
Type="Integer" EnableClientScript="false"
Text="El telfono introducido no es vlido!"
runat="server" />
</form>
</body>
</html>

Validacin con PHP
Para validar campos PHP utiliza filtros.

Tipos de filtros:
Nombre del Filtro Descripcin del Filtro
filter_has_var() Comprueba si existe una variable de un tipo concreto.
filter_var() Filtra una variable con un filtro especfico.
filter_var_array() Filtra varias variables con el mismo o diferente filtro.
filter_input() Obtiene un campo de entrada y un filtro para este.
filter_input_array()
Obtiene varios campos de entrada y filtros con el mismo
o diferente filtro.

Validacin con PHP
Ejemplo (filtro de validacin):

<html>
<head><Title>Validar e-mail</Title><head>
<body>
<form method="GET" action="validaEmail.php">
<p>Introduce un e-mail a validar <input type="text"
name="email" size="30"></p>

Validacin con PHP
Ejemplo (filtro de validacin):

<?php
if(!filter_has_var(INPUT_GET, "email")){
echo("Aun no has introduce un e-mail");
}else{
if (!filter_input(INPUT_GET, "email",
FILTER_VALIDATE_EMAIL)){
echo "El e-mail no es vlido";
}else{
echo "El e-mail es vlido";
}
}
?>
<p><input type="submit" value="Validar"
name="enviar"></p>
</form>
</body>
<html>

Validacin con JSP
Para validar campos JSP cuenta con:

o Clases que permiten comprobar si una variable
cumple con una serie de condiciones.
o Beans que son componentes de software

reutilizables.
o JSF o Struts que implementan el modelo vista

controlador y facilitan las labores de validacin.

Validacin con JSP
El usuario enviara y recibir los datos a travs

de un formulario generado en un JSP. Las
peticiones en cambio se enviaran a un servlet
que ser el encargado de validarlos.

Validacin con JSP
Ejemplo (pgina JSP):

<html>
<head><title>JSP Page</title></head>
<body>
<%
String nombre = "";
if(request.getParameter("nombre")!=null){
nombre = request.getParameter("nombre");
}
String error1 = request.getParameter("error1");
%>

Validacin con JSP
Ejemplo (pgina JSP):

<form method="GET" action="/capitulo/validar">
<p>Introduce nombre<input type="text" name="nombre"
value="<%=nombre%>" size="30"></p>
<%
if("1".equals(error1)){
out.println("Es necesario rellenar el nombre");
}else{
if("2".equals(error1)){
out.println("Nombre validado");
}
}
%>
<p><input type="submit" value="Validar"
name="enviar"></p>
</form>
</body>
</html>

Validacin con JSP
Ejemplo (servlet):
package es.serv.capitulo2;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name = "validar", urlPatterns = {"/validar"})

public class validar extends HttpServlet {

Validacin con JSP
Ejemplo (servlet):
protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String nombre = request.getParameter("nombre");
if("".equals(nombre)){
response.sendRedirect("
formulario.jsp?nombre=&error1=1");
}else{
response.sendRedirect("
formulario.jsp?nombre="+nombre+"&error1=2");
}
}

Validacin con JSP
Ejemplo (servlet):
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
processRequest(request, response);
}
}

Modificacin de la estructura de la pgina
Web
Con la estructura de rbol DOM que propone la organizacin
estandarizadora W3C, es posible modificar la estructura de
una pgina Web sin que el cdigo tenga que salir del propio
navegador.
Ventaja:
o La flexibilidad que supone a la hora de generar pginas interactivas
tanto a nivel visual como funcional.
Inconveniente:
o Al ejecutarse el cdigo en el navegador del cliente, la fiabilidad de
que ciertos procesos se realizan de una forma correcta es nula.

Capítulo 8 Servidor

Uploaded by

Document Information

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

Capítulo 8 Servidor

Uploaded by

Copyright:

Available Formats

DESARROLLO WEB

Es una pgina que permite variar el aspecto y

Desarrollo web en entorno servidor

Comunicacin entre el cliente y el servidor:

Se ejecuta cdigo en:

Desarrollo web en entorno servidor

Tipos de cdigo que se ejecutan en el cliente:

o JavaScript: permite configurar la interactividad y el dinamismo

Desarrollo web en entorno servidor

o CSS: es el encargado de definir la presentacin de los

o XML: es un lenguaje de marcas extensible que permite

o Otros: applets de Java, VBScript, etc.

Desarrollo web en entorno servidor

Tipos de cdigo que se ejecutan en el servidor:

o Perl: es un lenguaje de programacin interpretado. El

Desarrollo web en entorno servidor

o ASP (Active Server Pages): es la tecnologa que

Desarrollo web en entorno servidor

o PHP: es un lenguaje de programacin interpretado,

Desarrollo web en entorno servidor

o JSP (Java Server Pages): lenguaje que permite crear

Desarrollo web en entorno servidor

Es un conjunto de subprogramas que sirven

Contienen cdigo y datos que pueden ser

Al incluir el cdigo de librera, este pasa a

Desarrollo web en entorno servidor

Es un conjunto de funciones y procedimientos

La diferencia con la librera es que las funciones

Desarrollo web en entorno servidor

Es un conjunto estndar de conceptos y tecnologas con

Se suelen emplear una serie de mdulos concretos que

La mayora incluyen soporte para programas, bibliotecas

Desarrollo web en entorno servidor

ASP es capaz de:

o Responder a las consultas de los usuarios y a los

o Acceder a datos y a bases de datos, devolviendo

Desarrollo web en entorno servidor

o Personalizar las aplicaciones Web para que sean

o Es una tecnologa veloz y sencilla. Adems garantiza

Desarrollo web en entorno servidor

Crear pginas Web dinmicas:

Desarrollo web en entorno servidor

Existen varios controles de servidor en ASP.Net:

o ASP.Net List Controls: permite mostrar el contenido de las bases de datos.

o ASP.Net Mobile Controls: tienen la misma funcionalidad que dos anteriores. La

o ASP.Net Validation Controls: son los controles de validacin. Permiten en el servidor,

Desarrollo web en entorno servidor

Ejemplo Control Web Form:

Desarrollo web en entorno servidor

Las libreras permiten reducir la redundancia de

Para crear una librera se crea una pgina ASP

Para utilizar el cdigo comn, solo hay que

Desarrollo web en entorno servidor

Ejemplo pgina que llama a una librera:

Desarrollo web en entorno servidor

Desarrollo web en entorno servidor

Desarrollo web en entorno servidor

Funciona en diferentes plataformas (Windows,

Es compatible con casi todos los servidores que se

Se puede descargar gratis desde los recursos

Es fcil de aprender y se ejecuta de manera

Ejemplo pgina que llama a una librera:

print"<p>La hipotenusa del tringulo es $hipotenusa </p>";

Desarrollo web en entorno servidor