Differences

This shows you the differences between two versions of the page.

--- apuntes:servlets [2023/05/28 20:28] – Santiago Faci
+++ apuntes:servlets [2023/05/28 20:38] (current) – [Arquitectura cliente-servidor] Santiago Faci
@@ Line 1: / Line 1: @@
 ===== Introducción al desarrollo de aplicaciones web. Servlets y JSP =====
+==== Arquitectura cliente-servidor ====
 El modelo de desarrollo web se apoya, en una primera aproximación desde un punto de vista centrado en el hardware, en lo que se conoce como arquitectura cliente-servidor ((https://en.wikipedia.org/wiki/Client–server_model)) que define un patrón de arquitectura donde existen dos actores, cliente y servidor, de forma que el primero es quién se conecta con el segundo para solicitar algún servicio. En el caso que nos ocupa, el desarrollo web, los clientes solicitan que se les sirva una web para visualizarla, aunque también es posible solicitar información si hablamos del caso de los servicios web que también veremos más adelante. En cualquier caso, en ambos casos aparece el mismo escenario, donde un servidor se encuentra ejecutándose ininterrupidamente a la espera de que los diferentes clientes realicen una solicitud.
@@ Line 10: / Line 12: @@
 {{ cliente_servidor.jpg }}
 <caption>Arquitectura cliente-servidor</caption></figure>
+==== Protocolo HTTP ====
+El protocolo HTTP es un protocolo para la transferencia de páginas web (hipertexto) entre los clientes (navegadores web) y un servidor web. Cuando un usuario, a través del navegador, quiere un documento (página web), éste lo solicita mediante una petición HTTP al servidor. Éste le contestará con una respuesta HTTP y el documento, si dispone de él.
+Hay que tener en cuenta que, al contrario que el resto de protocolos que estamos viendo en esta parte, HTTP no tiene estado. Eso significa que un servidor web no almacena ninguna información sobre los clientes que se conectan a él. Así, cada petición/respuesta supone una conexión única y aislada. En cualquier caso, utilizando tecnologías en el lado servidor es posible escribir aplicaciones web que puedan establecer sesiones o cookies para almacenar ese estado y "recordar" de alguna manera a los clientes en sucesivas conexiones
+<figure>
+{{ http.png }}
+<caption>Protocolo HTTP</caption></figure>
+A continuación, a modo de ejemplo, podemos ver una petición HTTP que un navegador (//Firefox//) ha realizado a un sitio web (//misitio.com//), solicitando el documento //index.html//.
+<code bash>
+GET /index.html HTTP/1.1
+ Host: www.misitio.com
+ User-Agent: cliente
+ Referer: www.google.com
+ User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0
+ Connection: keep-alive
+ [Línea en blanco]
+</code>
+Y el servidor web le contesta con el contenido del documento para que el navegador que lo ha solicitado lo pueda renderizar para que el usuario lo visualice en su pantalla:
+<code bash>
+HTTP/1.1 200 OK
+Date: Fri, 31 Dec 2003 23:59:59 GMT
+Content-Type: text/html
+Content-Length: 1221
+<html lang="es">
+<head>
+<meta charset="utf-8">
+<title>Mi título</title>
+</head>
+<body>
+<h1>Bienvenido a mi sitio.com</h1>
+. . .
+. . .
+</body>
+</html>
+</code>
+==== Modelo en 3 capas ====
 Desde un punto de vista de desarrollo una aproximación más detallada para este modelo de ejecución es lo que se conoce como modelo en 3 capas ((https://en.wikipedia.org/wiki/Multitier_architecture)). Es un modelo donde se muestra más en detalle como se distribuye el software que participa en cualquier desarrollo web. Sigue estando presente la arquitectura cliente-servidor (todo se basa en ella) pero aparecen más detalles como el software utilizado en cada uno de los dos actores y como interactúan las diferentes tecnologías o aplicaciones.
@@ Line 35: / Line 83: @@
   * **MySQL/PostgreSQL**: Finalmente en la capa de datos podemos colocar cualquier SGBD, como pueden ser //MySQL// o //PostgreSQL//
-=== Front-end, Back-end, Full stack ===
+==== Front-end, Back-end, Full stack ====
 También teniendo en cuenta en que lado se ubican las tecnologías y para qué se utilizan éstas, actualmente se habla mucho de 3 perfiles diferenciados en el ámbito del desarrollo web:
@@ Line 49: / Line 97: @@
 Asi como las aplicaciones de escritorio se ejecutan directamente sobre el propio Sistema Operativo, las páginas y aplicaciones web necesitan de una herramienta adicional que permita desplegarlas para su puesta en marcha. Hablamos de servidores web ((https://en.wikipedia.org/wiki/Comparison_of_web_server_software)) y servidores de aplicaciones ((https://en.wikipedia.org/wiki/Comparison_of_application_servers)), respectivamente.
-=== ¿Qué es un servidor de aplicaciones ===
+==== ¿Qué es un servidor de aplicaciones ====
 Un servidor de aplicaciones es una aplicación que contiene una serie de servicios los cuales están accesibles a través de una API expuesta a través de Internet. Normalmente los servidores de aplicaciones proporcionan más servicios que los servidores web. Por ejemplo, en el caso de los servidores de aplicaciones para //Java// o //Python//, éstos proporcionan un acceso transparente a la Base de Datos para que el desarrollador se centre exclusivamente en implementar la capa de negocio. Además, pueden proporcionar también servicios como fail-over o balanceo de carga.
-=== Apache Tomcat ===
+==== Apache Tomcat ====
 {{ tomcat.png }}
 [[http://tomcat.apache.org|Apache Tomcat]] es un servidor de aplicaciones que funciona como contenedor de Servlets de Java. Actualmente es capaz de implementar varias especificaciones de Java EE como Servlets y JSP (Java Server Pages) y además proporciona un servidor web //puro// para que se use en combinación con el entorno Java.
+==== JSP / Servlets ====
+[[http://www.oracle.com/technetwork/java/jsp-138432.html|JavaServer Pages]] (también conocido como JSP) es una tecnología creada para la creación de páginas web dinámicas del lado servidor. Al igual que PHP, su código se escribe embebido junto con el HTML de la página web y es el servidor de aplicaciones, en este caso, quién debe procesarlo para generar la página web resultante, en HTML.
+Por otra parte, [[http://www.oracle.com/technetwork/java/index-jsp-135475.html|Java Servlets]] es una tecnología que también se puede utilizar para crear contenido web dinámico pero que además extiende su funcionalidad a la posibilidad de conectar esas webs dinámicas con otro contenido accesible a través de Internet. En ocasiones se utiliza junto con JSP para crear aplicaciones web más complejas.
+Ambas son tecnologías desarrolladas por //Sun Microsystems// y propiedad ahora de //Oracle//, tras adquirir esta última a la primera hace ya algunos años.
+<figure>
+{{ jsp.gif }}
+<caption>Arquitectura habitual JSP/Servlets</caption></figure>
+Ejemplo de página web dinámica creada con JSP:
+<code html>
+<div class="container">
+    <div class="page-header">
+        <h2>Teléfonos de Emergencia</h2>
+    </div>
+    <div class="col-md-12">
+        <table class="table table-striped">
+            <jsp:include page="includes/table_header.jsp">
+                <jsp:param name="1" value="Nombre"/>
+                <jsp:param name="2" value="Teléfono"/>
+            </jsp:include>
+            <tbody>
+            <%
+                Repository repo = new PhoneRepository();
+                List<Phone> phonesList = repo.findAll();
+                int count = 1;
+                for (Phone phone : phonesList) {
+            %>
+            <jsp:include page="includes/table_body.jsp">
+                <jsp:param name="id" value="<%=phone.getName()%>"/>
+                <jsp:param name="count" value="<%=count%>"/>
+                <jsp:param name="data" value="<%=phone.toString()%>"/>
+            </jsp:include>
+. . .
+. . .
+<div class="container" style="margin-left:0px;width:25%">
+        <form class="form-anadir" action="PhoneActions">
+            <label for="inputName" class="sr-only">Nombre</label>
+            <input type="text" name="name" id="inputName" class="form-control" placeholder="Nombre" required autofocus>
+            <label for="inputNumber" class="sr-only">Número</label>
+            <input type="text" name="number" id="inputNumber" class="form-control" placeholder="Número" required>
+            <!--<input type="file" id="inputFile" class="form-control" placeholder="Imagen">-->
+            <input type="hidden" name="action" value="insert"/>
+            <button class="btn btn-primary btn-block" type="submit">Añadir</button>
+        </form>
+    </div>
+. . .
+. . .
+</code>
+Ejemplo de Java Servlet, correspondiente al mismo proyecto que la página JSP anterior:
+<code java>
+@WebServlet(name = "PhoneActions")
+public class PhoneActions extends HttpServlet {
+    private final static Logger LOGGER =
+            Logger.getLogger(PhoneActions.class.getCanonicalName());
+    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
+        String action = request.getParameter("action");
+        Repository repo = new PhoneRepository();
+        switch(action) {
+            case "insert":
+                repo.insert(new Phone(request.getParameter("name"),
+                        Phone.IMAGE,
+                        request.getParameter("number")));
+                response.sendRedirect("phones.jsp");
+                break;
+            case "delete":
+                repo.delete(request.getParameter("name"));
+                response.sendRedirect(request.getHeader("referer"));
+                break;
+            default:
+                break;
+        }
+    }
+}
+</code>
+----
+(c) 2023 Santiago Faci