DESARROLLO WEB EN ENTORNO SERVIDOR

Transcripción

1 DESARROLLO WEB EN ENTORNO SERVIDOR CAPÍTULO 8: Generación dinámica de páginas Web interactivas Marcos López Sanz Juan Manuel Vara Mesa Jenifer Verde Marín Diana Marcela Sánchez Fúquene Jesús Javier Jiménez Hernández Valeria de Castro Martínez

2 Página Web interactiva Es una página que permite variar el aspecto y comportamiento en función de decisiones que toma el usuario a través de la interfaz gráfica de la página. Se puede utilizar: o Código de script que se ejecuta en el navegador. o Enviar una petición al servidor. Se ejecuta el código en el servidor y genera una nueva página Web que envía al navegador. Al tratarse de una página Web dinámica, en función de los datos introducidos por el usuario, la página se verá modificada mostrando información definida en la programación. 2

3 Página Web interactiva Comunicación entre el cliente y el servidor: Se ejecuta código en: o Cliente navegador Web. o Servidor motor que interprete el código. 3

4 Página Web interactiva Tipos de código que se ejecutan en el cliente: o HTML: es la base de las páginas Web, este lenguaje describe la estructura y el contenido. La forma en que se interpreta el código por el navegador, es de principio a fin. o JavaScript: permite configurar la interactividad y el dinamismo de la página Web. A través de los eventos de la página, las acciones programadas en este lenguaje, modificaran el aspecto, estructura o visualización de la página. Es interpretado por el navegador y el orden en el que lo hace viene fijado por las llamadas a cada función del código. El código JavaScript, se ejecuta cada vez que ocurre un evento que tenga asociada una función JavaScript. 4

5 Página Web interactiva o CSS: es el encargado de definir la presentación de los datos que se indican en el código HTML. El navegador interpreta las características CSS. o XML: es un lenguaje de marcas extensible que permite definir la gramática. El navegador es el encargado de interpretar el código 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 código original. o Otros: applets de Java, VBScript, etc. 5

6 Página Web interactiva Tipos de código 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 programación interpretado. El código se ejecuta e interpreta directamente en el servidor. Este lenguaje permite realizar llamadas a otros subprogramas. 6

7 Página Web interactiva o ASP (Active Server Pages): es la tecnología que Microsoft ha creado para generar páginas Web dinámicas en el servidor. Este lenguaje se ha comercializado como un anexo al Internet Information Services (IIS). Para poder ejecutar el código ASP en el servidor, es necesario que este sea compatible con el lenguaje. El IIS soporta código ASP. El código se embebe entre las sentencias HTML. 7

8 Página Web interactiva o PHP: es un lenguaje de programación interpretado, que se ejecuta en el lado del servidor. Este lenguaje tiene las siguientes características: Tiene una licencia de software libre y de código abierto Es independiente de la plataforma. Cuenta con una gran liberaría de funciones y abundante documentación. Se embebe el código en el HTML. El código PHP se interpreta en el servidor y se envía al navegador en forma de HTML. 8

9 Página Web interactiva o JSP (Java Server Pages): lenguaje que permite crear páginas con programación Java. Java es un lenguaje multiplataforma, por tanto, estas aplicaciones se pueden ejecutar en todos los servidores que tengan la maquina virtual instalada. 9

10 Librerías Es un conjunto de subprogramas que sirven para programar una aplicación. Contienen código y datos que pueden ser llamados desde otro programa principal. Al incluir el código de librería, este pasa a formar parte del programa principal. 10

11 API Es un conjunto de funciones y procedimientos que proveen de bibliotecas (librerías) para ser utilizado por otro programa. La diferencia con la librería es que las funciones de una API acceden habitualmente a programas diferentes, permitiendo así generar transparencia al programador. 11

12 Framework Es un conjunto estándar de conceptos y tecnologías con un soporte definido. Se suelen emplear una serie de módulos concretos que facilitan la organización y desarrollo del nuevo software. La mayoría incluyen soporte para programas, bibliotecas y uno o más lenguajes que son interpretados por los programas base del framework para facilitar el desarrollo, agrupar y organizar los componentes del proyecto. 12

13 ASP ASP es capaz de: o Dinamizar, editar, cambiar, añadir, cualquier contenido de una página 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. 13

14 ASP o Personalizar las aplicaciones Web para que sean más útiles para usuarios individuales. o Es una tecnología veloz y sencilla. Además garantiza la seguridad, ya que el código no se ve en el navegador. Si se programa de una forma correcta minimiza el tráfico de la red. 14

15 Librerías y tecnologías ASP Crear páginas Web dinámicas: o Introduciendo código embebido con las etiquetas HTML. o Con controles de servidor que son objetos de las páginas Web que se ejecutan cuando el usuario solicita una página. Las características son las siguientes: Representan el formato en el navegador. Proporcionan elementos HTML y otros más 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 iteración del usuario. Debido a que estos eventos son manejados desde el servidor, es necesario acceder a las propiedades, métodos o eventos de los elementos en el código de servidor. 15

16 Librerías y tecnologías ASP Existen varios controles de servidor en ASP.Net: o o o o o HTML Server Controls: son los mismos que los de HTML pero a nivel de servidor. ASP.Net Web Forms Controls: son como los de HTML en el lado del servidor. Ejemplo: TextBox, Buttons, etc. ASP.Net List Controls: permite mostrar el contenido de las bases de datos. 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 móvil. ASP.Net Validation Controls: son los controles de validación. Permiten en el servidor, validar entradas a través de la iteración que el usuario tiene con la aplicación. 16

17 Librerías y tecnologías ASP Ejemplo Control Web Form: <html> <body> <form runat="server"> <asp:textbox id="tb1" Text="Name" runat="server" /> </form> </body> </html> 17

18 Librerías y tecnologías ASP Las librerías permiten reducir la redundancia de código y fomenta la reutilización de código. Para crear una librería se crea una página ASP con las funciones comunes. Para utilizar el código común, solo hay que llamar a la función correspondiente de la librería. 18

19 Librerías y tecnologías ASP Ejemplo página que llama a una librería: <html> <head><title>título de ASP</title></head> <body> <!-- #include file="libreria.asp" --> <% call CabeceraPagina %> <% call MenuPagina %> Contenido de la Página <% call PiePagina %> </body> </html> 19

20 Ejemplo librería: Librerías y tecnologías ASP <% sub CabeceraPagina %> <p>cabecera de la páginas</p><hr> <% end sub sub MenuPagina %> <p>menu de la página</p> <% end sub sub PiePagina %> <p>pie de la página</p> <% end sub %> 20

21 Librerías y tecnologías ASP Ejemplo: 21

22 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 fácil de aprender y se ejecuta de manera eficiente en el lado del servidor. 22

23 Librerías y tecnologías PHP Ejemplo página que llama a una librería: <?php include "funciones.php"; $cateto1 = 10; $cateto2 = 5; $hipotenusa = calculahipotenusa($cateto1, $cateto2); print"<p>la hipotenusa del triángulo es $hipotenusa </p>";?> 23

24 Librerías y tecnologías PHP Ejemplo librería: <?php?> function calculahipotenusa($arg1, $arg2){ $hipotenusa = sqrt($arg1*$arg1+$arg2*$arg2); return $hipotenusa; } 24

25 JSP y Servlets En Java existen dos tipos de fichero principales que se ejecutan en el servidor: o JSP: facilita la presentación 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 páginas Web. Provee de una mayor flexibilidad en la programación de la lógica de negocio. 25

26 JSP y Servlets Modelo vista controlador JSP y Servlet: 26

27 JSP Ejemplo código 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> 27

28 Servlet Ejemplo código 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>título Hola Mundo!</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>hola Mundo!</h1>"); out.println("</body>"); out.println("</html>"); } 28

29 Páginas interactivas Ejecutar scripts de navegador para solicitar otra página al servidor con un cuadro de diálogo es una de las tareas más comunes para establecer una comunicación con el usuario. La respuesta al evento capturado es la redirección a otra página. En la petición de la nueva página se puede enviar variables a través de la URL para controlar desde que evento o página viene el usuario. 29

30 Páginas interactivas ASP Ejemplo (cuadro de diálogo): <html> <head><title>título 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> 30

31 Páginas interactivas ASP Ejemplo (cuadro de diálogo): 31

32 Páginas interactivas ASP Ejemplo (Página destino donde muestra un valor distinto dependiendo del botón pulsado): <html> <head><title>título 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> 32

33 Páginas interactivas PHP Ejemplo (cuadro de diálogo): <html> <head><title>título origen PHP</title> <script languaje="javascript"> function envio(){ if(confirm(' Pulsa una opcion?')){ 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> 33

34 Páginas interactivas PHP Ejemplo (Página destino si pulsa aceptar): <html> <head><title>título destino uno PHP</title></head> <body> <?php $valor = $_GET["id"]; if ($valor == 1){ echo "Estas en el DESTINO 1, valor: ".$valor); }else{ echo "El parámetro id no es 1, es: ".$valor); }?> </body> </html> 34

35 Páginas interactivas JSP Ejemplo (cuadro de diálogo): <html> <head><title>jsp Page</title> <script languaje="javascript"> function envio(){ if(confirm(' Pulsa una opcion?')){ 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> 35

36 Páginas interactivas JSP Ejemplo (servlet intermedio que redirige según los parámetros 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 = "intermediario", urlpatterns = {"/intermediario"}) 36

37 Páginas interactivas JSP 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"); } protected void doget(httpservletrequest request, HttpServletResponse response)throws ServletException, IOException { processrequest(request, response); } 37

38 Páginas interactivas JSP Ejemplo (Página destino si pulsa aceptar): <html> <head><title>jsp Page</title></head> <body> <h1>pulso ACEPTAR. Llega al destino UNO</h1> </body> </html> 38

39 Páginas interactivas JSP Esquema del ejemplo: 39

40 Obtención remota de información 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. SOLUCIÓN: deben comprobarse previamente los valores que llegan desde el navegador. 40

41 Obtención remota de información 41

42 Validación con ASP Para validar campos ASP puede utilizar: o Código ASP embebido en el HTML. o Controles de validación 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 validación, se muestra un mensaje de error al usuario. Ejemplo: <asp:control_name id="some_id" runat="server" /> 42

43 Validación con ASP Tipos de controles de validación: Nombre del Control CompareValidator CustomValidator RangeValidator RegularExpressionValidator RequiredFieldValidator ValidationSummary Descripción del Control Compara el valor de un control de entrada al valor de otro control de entrada o de un valor fijo. Permite escribir un método para controlar la validación de un valor introducido. Comprueba que el usuario introduce un valor que esté entre dos valores. Asegura que el valor de un control de entrada coincide con un patrón determinado. Hace que el control de un campo de entrada sea obligatorio. Muestra un informe de todos los errores de validación que se produjeron en una página Web. 43

44 Validación con ASP Ejemplo (control de validación): <script runat="server"> Sub submit(sender As Object, e As EventArgs) If Page.IsValid Then lbl1.text="la página es válida." Else lbl1.text="la página no es válida!!" End If End Sub </script> 44

45 Validación con ASP Ejemplo (control de validación): <html> <body> <form runat="server"> Introduzca un teléfono móvil 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=" " MaximumValue=" " Type="Integer" EnableClientScript="false" Text="El teléfono introducido no es válido!" runat="server" /> </form> </body> </html> 45

46 Validación con PHP Para validar campos PHP utiliza filtros. Tipos de filtros: Nombre del Filtro Descripción del Filtro filter_has_var() Comprueba si existe una variable de un tipo concreto. filter_var() filter_var_array() filter_input() filter_input_array() Filtra una variable con un filtro específico. Filtra varias variables con el mismo o diferente filtro. Obtiene un campo de entrada y un filtro para este. Obtiene varios campos de entrada y filtros con el mismo o diferente filtro. 46

47 Validación con PHP Ejemplo (filtro de validación): <html> <head><title>validar </title><head> <body> <form method="get" action="valida .php"> <p>introduce un a validar <input type="text" name=" " size="30"></p> 47

48 Validación con PHP Ejemplo (filtro de validación): <?php if(!filter_has_var(input_get, " ")){ echo("aun no has introduce un "); }else{ if (!filter_input(input_get, " ", FILTER_VALIDATE_ )){ echo "El no es válido"; }else{ echo "El es válido"; } }?> <p><input type="submit" value="validar" name="enviar"></p> </form> </body> <html> 48

49 Validación 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 validación. 49

50 Validación con JSP El usuario enviara y recibirá los datos a través de un formulario generado en un JSP. Las peticiones en cambio se enviaran a un servlet que será el encargado de validarlos. 50

51 Validación con JSP Ejemplo (página 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"); 51

52 Validación con JSP Ejemplo (página 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> 52

53 Validación 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 = "validar", urlpatterns = {"/validar"}) public class validar extends HttpServlet { 53

54 Validación 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"); } 54

55 Validación con JSP Ejemplo protected void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { processrequest(request, response); } } 55

56 Modificación de la estructura de la página Web Con la estructura de árbol DOM que propone la organización estandarizadora W3C, es posible modificar la estructura de una página Web sin que el código tenga que salir del propio navegador. Ventaja: o La flexibilidad que supone a la hora de generar páginas interactivas tanto a nivel visual como funcional. Inconveniente: o Al ejecutarse el código en el navegador del cliente, la fiabilidad de que ciertos procesos se realizan de una forma correcta es nula. 56