Desarrollo de Aplicaciones Web en
Java
APSV - Máster Universitario en Ingeniería de
Telecomunicación
1
Contenidos
● Aplicaciones Web
● Cliente Web
● Servlets: soporte Java a HTTP
● Servidor: capa de presentación
● Gestión de usuarios
2
Aplicación Web
•
•
•
•
•
•
•
•
•
•
•
3
Desarrollo de Webapps
Pila de ejecución
CRIS: Arquitectura
Arquitectura c-s 3 capas
• Presentación
• Manejo de las peticiones del usuario y sesión
• Creación de la respuesta
• Patrón MVC: flujos de navegación y sesiones
• Lógica del servicio
• Operaciones específicas del servicio -métodos de los objetos
• Manejo de información específica de la aplicación
• Mantenimiento de relaciones entre elementos del servicio
• Persistencia
• Patrón DAO para aislar fuentes de datos
• Correspondencia automática ORM (mapeo objeto-relacional)
• Soporte a consultas JPA
Arquitectura lógica
8
Diseño de aplicaciones Web
• Para cada actor:
• Indicar a qué información puede acceder
• Indicar qué información puede añadir o cambiar
• Convertir cada acceso (consulta o dar-info) en
módulo MVC:
• Ruta que acepta la servlet controladora
• Controladora: comprueba la autorización, obtiene
información y la pone en el Modelo, selecciona vista
• Vista: accede al Modelo, genera página, incluye ruta a
siguientes módulos MVC
Diseño aplicaciones Web
Estrategia CRUD (create, read, update, delete)
Definir operaciones CRUD para cada elemento relevante del modelo de datos
–Researcher, Publication
No Function Admin Researcher Public
1 Create profile X
2 Update profile X X
3 Delete profile X
4 Create publication X X
5 Update publication X X
6 View profile X X X
7 List researchers X X X
8 Search for profile X X X
9 Search for publication X X X
10 Generate CV X X
Flujo de navegación
Contenidos
● Aplicaciones Web
● Cliente Web
● Servlets: soporte Java a HTTP
● Servidor: capa de presentación
● Gestión de usuarios
13
Capa cliente
• App, funciones básicas:
■ Implementar la presentación de la aplicación: páginas, eventos
■ Implementar la lógica de la aplicación
■ Enviar peticiones HTTP a URL
■ Recibir respuesta HTTP y usar los datos asociados
• Navegador, funciones básicas:
■ Recoger URL del usuario o enlace en la página previa
■ Enviar una petición HTTP a la URL
■ Recibir respuesta HTTP y extraer los datos asociados (HTML)
■ Crear un árbol DOM en la memoria a partir del HTML
■ Presentar el HTML almacenado en el árbol DOM
■ Ejecutar funciones de JavaScript asociadas al eventos DOM: interacción
de usuario
• Navegador, funciones adicionales:
■ Gestionar historial, listas de marcas, navegación en varias solapas,
formularios, completar nombres, contraseñas, favoritos, extensiones, etc
14
HTML
• HTML: lenguaje de texto para la estructura y presentación de info
■ Claves estructura: <html></html>, <head></head>, <title></title>,
<body></body>
■ Básicas: <h1></h1> … <h6></h6>, <p></p>
■ Enlaces: <a href=“enlace”>texto</a>
■ Secciones: <div class=“a”></div>, <p></p>, <br>, <hr>
■ Texto: <b></b>,<i></i>, <u></u>, <center></center>, <strong></strong>
■ Listas: <ul></ul>, <ol></ol>, <li></li>
■ Tablas: <table></table>, <tr></tr>, <th></th>,<td></td>
■ Imagen: <img src=“url”>, atributos alt, width, height, border, align, vspace, hspace
■ Formularios: <form></form> atributos name action method; <input></input>
atributos: name, type (text, password, checkbox, radio, file, hidden), value, size,
maxlength, checked; <button></button> atributos: name, type (submit, reset),
value, size
• Eventos para reacción ante cambios:
■ Media (<img>, <video>): onpause, onplay, onprogress
■ Window (<body>): onhasachange, onmessage, onpageshow
■ Mouse: onscroll, ondrag, ondrop
■ Form: oninput
15
CSS, Javascript
• Cascade Style Sheets: definen color, tamaño, posición de claves HTML
y de sus claves anidadas
■ En HTML: <head> <link rel="stylesheet" type="text/css" href="style.css"
title="style"> </head>
■ body {background-color: beige; color: #000080; } h1 { color: red; }
• Javascript: lenguaje interpretado en el navegador
■ Lenguaje sencillo basado en la definición de funciones que se activan al acceder al
DOM
■ El navegador coloca el código JS en el árbol DOM
■ Inicialmente para presentación y validación de formularios HTML
■ También para aplicaciones completas (con lógica en el cliente) usando bibliotecas
(jQuery, bootstrap, react, vue, D3)
• La respuesta HTTP envía el contenido de un fichero .html con sus
ficheros css y js
16
HTML ejemplo
<!DOCTYPE html>
<html lang="es-ES">
<head><meta charset="UTF-8">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="CRISAppScript.js"></script>
<title>CRISApp</title>
</head>
<body>
<div class="container">
<table id="userTable" border="1" >
<thead>
<tr>
<th width="10%">Id</th>
<th width="20%">Name</th>
<th width="20%">Last name</th>
<th width="30%">Email</th>
<th width="20%">ScopusURL</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
17
JS-jQuery
$(document).ready(function(){
$.ajax({
url: '/CRISSERVICE/rest/Researchers',
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var lastname = response[i].lastname;
var name = response[i].name;
var email = response[i].email;
var scopusURL = response[i].scopusURL;
var tr_str = "<tr>" +
"<td align='center'>" + id + "</td>" +
"<td align='center'>" + name + "</td>" +
"<td align='center'>" + lastname + "</td>" +
"<td align='center'>" + email + "</td>" +
"<td align='center'><a href='" + scopusURL
+ "'>Scopus URL</a></td>" +
"</tr>";
$("#userTable tbody").append(tr_str);
} } }); });
18
Contenidos
● Aplicaciones Web
● Cliente Web
● Servlets: soporte Java a HTTP
● Servidor: capa de presentación
● Gestión de usuarios
19
Formulario HTML, Servlet y ruta
http://localhost:8080/application/Hello
form.html
<html>
<head> <title>Greetings form</title></head>
<body>
<form method="get" action=”/application/Hello">
Write our name
<input type="text" name="username"
size=“30">
<input type="submit" value=Submit name">
</form>
</body> Hello.java
</html> @WebServlet(urlPatterns={“/Hello”})
public class HelloServlet extends HttpServlet {
public void doGet (HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html");
PrintWriter out = resp.getWriter();
out.println("<html>");
out.println("<head><title>Greetings!</title></head>");
out.println("<body><h1>Hello, ”
+req.getParameter("username”) +"!</h1>");
out.println("</body></html>");
out.close();
}
}
20
HttpServlet Request, Response
• Parámetro: nombre-valor, Strings que se generan en el cliente (form)
• getParameter (String name) devuelve el valor
• getParameterNames devuelve una Enumeration de nombres
• getParameterValues devuelve un array de valores
• getReader, getInputStream para lectura de flujos de subida (ficheros)
• getHeader, getHeaderNames datos opcionales de cabeceras
• Respuesta: mensaje
• Estado: versión protocolo, código (setStatus), mensaje
• Cabeceras de respuesta: setContentType, setContentLength, addCookie
• Línea en blanco, y documento
• Respuesta sendRedirect responde al cliente y provoca una nueva petición a otra servlet
• O mensaje de error
• Acceso a un recurso inexistente, o formulario mal rellenado
resp.sendError(HttpServletResponse.SC_NOT_FOUND, “No lo encuentro”);
• Cuando la operación de servlet no es correcta ServletException, UnavailableException
• Dejar trazas en el fichero log (String s), log (String s, Thowable t)
21
Contextos
• Almacenes transitorios de atributos (pares de String
nombre-valor)
• Organizados como tablas o mapas (setAttribute, getAttribute)
• Cookies: mapa almacenado en el cliente
• Petición: mapa con parámetros de formulario
• Sesión: mapa, e información de una serie de
peticiones-respuestas con el mismo usuario en un período corto
• Servlet: enlaces a recursos (getResource), mapa,
requestDispatcher para llamadas entre servlets de la aplicación
• Forward: pasa la petición completa al segundo y se olvida
getServletContext().getRequestDispatcher(“/s2”).forward(req, res);
• Include: pregunta al segundo, espera su respuesta, el primero responde
getServletContext().getRequestDispatcher(“/s2”).include(req, res);
Contextos: mapas con atributos
Contexto Petición Cookie Sesión Servlet
Información Map(String key, Cookie[](String key, HttpSession ServletContext
almacenada String value) String value, String (Map:String key, (Map:String key,
domain, String Object value) Object value)
maxAge)
Modo de acceso HttpRequest. HttpRequest. HttpRequest. getServletContext()
getParameter() getCookies() getSession()
Almacenado por Petición HTTP Cliente Servidor Servidor
Usos frecuentes Parámetros de la Log-in automático Carrito de la Información
petición al servlet Preferencias de compra persistente entre
Comunicación usuario sesiones (ej: stock
entre servlets de un producto).
(include, forward) Conexión entre
Envío de datos de servlets
un formulario
23
Login servlet (I)
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
final String ADMIN = "root";
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
getServletContext().getRequestDispatcher("/LoginView.jsp").forward(req, resp);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String email = request.getParameter("email");
String password = request.getParameter("password");
Researcher researcher = null;
if (ADMIN.equals(email) && ADMIN.equals(password)) {
researcher = new Researcher();
researcher.setId("root");
request.getSession().setAttribute("user", researcher);
response.sendRedirect(request.getContextPath() + "/AdminServlet");
return;
}
/...
if (null != researcher) {
request.getSession().setAttribute("user", researcher);
response.sendRedirect(request.getContextPath() + "/ResearcherServlet"
+ "?id=" + researcher.getId());
}
else {
request.getSession().invalidate();
request.setAttribute("message", "Invalid user or password");
getServletContext().getRequestDispatcher("/LoginView.jsp").forward(request, response);
}
}
Login servlet (II)
try {
Client client = ClientBuilder.newClient(new ClientConfig());
Response resp = client.register(JsonProcessingFeature.class)
.target("https://moodle.upm.es/titulaciones/oficiales/"+"login/token.php"+
"?username="+URLEncoder.encode(email,"UTF-8")+
"&password="+URLEncoder.encode(password,"UTF-8")+
"&service=moodle_mobile_app").request()
.post(Entity.entity(researcher, MediaType.APPLICATION_JSON),
Response.class);
String token = resp.readEntity(JsonObject.class).get("token").toString();
// id-password authentication:
target("http://localhost:8080/CRISSERVICE/rest/Researchers/password/").queryParam("password",password)
if ((token != null) && (token.length() > 0)) {
researcher =
client.target("http://localhost:8080/CRISSERVICE/rest/Researchers/email/").queryParam("email", email).request()
.accept(MediaType.APPLICATION_JSON).get(Researcher.c
lass);
}
} catch(Exception e) {}
Contenidos
● Aplicaciones Web
● Cliente Web
● Servlets: soporte Java a HTTP
● Servidor: capa de presentación
● Gestión de usuarios
26
•
•
•
•
•
•
27
Elementos del patrón MVC
• Controlador-servlet
• Recibe peticiones, procesa las rutas y comprueba condiciones
• Comprueba condiciones, llama a métodos de otras clases
• Guarda los resultados en el modelo y lo conecta a un contexto
• Transfiere el control a la vista para presentar los resultados
• Modelo: clase Java
• Guarda los resultados de las operaciones del controlador-de la capa de lógica
• Clase Java normal con get/set públicos y atributos privados
• Puede estar enganchada en la sesión o en la petición
• Vista: presentación gráfica de resultados (JSP)
• Recibe el control del controlador
• Toma el modelo del contexto
• Arma la respuesta formateada HTML
28
Capa de presentación
Java Server Pages JSP
• Fichero HTML con caracteres especiales para llamadas Java
• Servlet especializada en presentación–mucho HTML, accede a objetos y contextos
<%@ page language="java" contentType="text/html; charset=ISO-8859-1” pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Researchers List</title>
</head>
<body>
<%@ include file = "Header.jsp" %>
<table>
<tr>
<th>Id</th><th>Name</th><th>Last name</th>
</tr>
<c:forEach items="${researcherslist}" var="ri">
<tr><td> <a href="ResearcherServlet?id=${ri.id}"> ${ri.id}</a></td>
<td>${ri.name}</td>
<td>${ri.lastname}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
30
JSP: procesado de claves
• Se procesa al acceder a la JSP por primera vez:
• se crea una servlet automática
• se publica directamente el código HTML
• claves <@ se traducen a código del servlet
• claves <jsp: incluyen código Java directo en la
servlet
• EL se traduce a llamadas a accesores de objetos
Java disponibles
• claves JSTL incluyen código de bibliotecas para
generar código HTML
• Se compila (sólo la primera vez)
• Se ejecuta la servlet y genera la página HTML
completa
JSP: elementos Java
• Comentarios
• <%-- Esto es un comentario --%>
• Declaraciones de variables
• <jsp:declaration> int h = Calendar.getInstance().get(Calendar.AM_PM);</jsp:declaration>
• Expresiones que dan resultados
• <jsp:expression> clock.getDayOfMonth() </jsp:expression>
• Scriptlets
• <% if (clock== Calendar.AM) { %>
• Good morning!
• <% } %>
• Operación include
• <jsp:include page="includedPage" />
• Operación forward
• <jsp:forward page="/main.jsp" />
32
Expression Language EL
• Parte de JSP para acceder a datos en objetos Java sin órdenes Java
• ${expression} se sustituye por su valor o 0 si no existe, es el nombre de cualquier dato en
algún contexto
• ${name}, ${users}
• Operador . para acceder a los atributos
• ${user.name}, ${param.city}
• Operador [] para acceder a listas, mapas o arrays
• ${user[“name”]} ${param[“city”]} ${elements[0]}, ${list[“3”]}
<form action="mostrarPedido.jsp"> Parámetro nombre vale: ${param.nombre} <br>
Name: <input type="text" name="nombre"> Parámetro numPedido vale: ${param.numPedido} <br>
Numero de Pedido: <input type="text" name="numPedido"> Parámetro plato vale: ${param.plato} <br>
Primer plato: <input type="text" name="plato"> Primer valor de parámetro plato: ${paramValues.plato[0]} <br>
Segundo plato: <input type="text" name="plato"> Segundo valor de parámetro plato: ${paramValues.plato[1]} <br>
Postre: <input type="text" name="plato"> Tercer valor de parámetro plato: ${paramValues.plato[2]} <br>
<input type="submit"> Primer valor de parámetro nombre: ${paramValues.nombre[0]}
</form>
33
JSP Standard Tag Library JSTL
• Claves para que el compilador JSP genere HTML sin Java: formatos,
operaciones, bucles
• http://tomcat.apache.org/taglibs/standard/
• Contenidos en los ficheros standard.jar, jstl.jar
• En WEB-INF/lib
Biblioteca URI Prefijo
Core http://java.sun.com/jsp/jstl/core c
Internationalization I18N http://java.sun.com/jsp/jstl/fmt fmt
formateo
SQL/DB support http://java.sun.com/jsp/jstl/sql sql
Procesamiento XML http://java.sun.com/jsp/jstl/xml x
Funciones http://java.sun.com/jsp/jstl/functions fn
34
Header.jsp
<c:if test="${not (empty user)}">
<p>You are authenticated as ${user.id}</p>
<p><a href="LogoutServlet">Logout</a>
</p>
</c:if>
<c:if test="${empty user}">
<a href="LoginServlet">Login</a>
</c:if>
<p style="color: red;">${message}</p>
<h3>
<a href="ResearcherListServlet">Researchers list</a>
</h3>
<hr>
PublicationView.jsp
<body>
<%@ include file="Header.jsp"%>
<c:if test="${user.id == 'root'}">
<h2>Update publications of researcher</h2>
<a href="UpdateCitationsAPIServlet?id=${pub.id}"> ${pub.id}</a>
</c:if>
<table>
<tr>
<th>Id</th><th>Title</th><th>Publication name</th><th>Date</th><th>Authors</th><th>Cite count</th>
</tr>
<tr><td>${pub.id}</td>
<td>${pub.title}</td>
<td>${pub.publicationName}</td>
<td>${pub.publicationDate}</td>
<td>${pub.authors}</td>
<td>${pub.citeCount}</td>
</tr>
</table>
</body>
ResearchersListView.jsp
<body>
<%@ include file = "Header.jsp" %>
<table>
<tr>
<th>Id</th><th>Name</th><th>Last name</th>
</tr>
<c:forEach items="${researcherslist}" var="ri">
<tr><td> <a href="ResearcherServlet?id=${ri.id}"> ${ri.id}</a></td>
<td>${ri.name}</td>
<td>${ri.lastname}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
Contenidos
● Aplicaciones Web
● Cliente Web
● Servlets: soporte Java a HTTP
● Servidor: capa de presentación
● Gestión de usuarios
38
Autenticación de usuarios
• Comprobación de la identidad
• Contenedor: tablas de credenciales manejadas
directamente por tomcat
• Aplicación: tablas de credenciales en la bd de la
Webapp (campo en la entidad, método DAO
comprobación, acceso al servicio)
• Servidor externo (moodle.upm): comprobación de
credenciales en servidor externo devuelve un token
Client client = ClientBuilder.newClient(new ClientConfig());
Response resp = client.register(JsonProcessingFeature.class)
.target("https://moodle.upm.es/titulaciones/oficiales/"+"login/token.php"+
"?username="+URLEncoder.encode(email,"UTF-8")+
"&password="+URLEncoder.encode(password,"UTF-8")+
"&service=moodle_mobile_app").request()
.post(Entity.entity(researcher, MediaType.APPLICATION_JSON), Response.class);
String token = resp.readEntity(JsonObject.class).get("token").toString();
39
Autorización de usuarios
• Autorización: acceso restringido a recursos
• El protocolo HTTP puede guardar info
■ Sesión info autenticación en el servidor
■ Cookies info autenticación en el cliente
• Aplicación web: guardar usuario autenticado en la
sesión y comprobar en cada llamada
• Servicio REST: envío y comprobación valor del token
(apikey o JWT) en cada llamada
40
