Differences

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

--- apuntes:web [2024/03/31 12:25] – [Uso de sesiones. Login y área privada] Santiago Faci
+++ apuntes:web [2024/03/31 13:01] (current) – [Envío asíncrono del formulario] Santiago Faci
@@ Line 11: / Line 11: @@
 === Dependencias ===
-<code xml>
+<file xml pom.xml>
-<dependency>
+. . .
+<dependencies>
+  <dependency>
     <groupId>javax.servlet</groupId>
     <artifactId>javax.servlet-api</artifactId>
     <version>4.0.1</version>
     <scope>provided</scope>
-</dependency>
+  </dependency>
-<dependency>
+  <dependency>
     <groupId>mysql</groupId>
     <artifactId>mysql-connector-java</artifactId>
     <version>8.0.30</version>
-</dependency>
+  </dependency>
-<dependency>
+  <dependency>
     <groupId>org.projectlombok</groupId>
     <artifactId>lombok</artifactId>
     <version>1.18.26</version>
-</dependency>
+  </dependency>
-<dependency>
+  <dependency>
     <groupId>org.jdbi</groupId>
     <artifactId>jdbi3-core</artifactId>
     <version>3.37.1</version>
-</dependency>
+  </dependency>
-<dependency>
+  <dependency>
     <groupId>org.jdbi</groupId>
     <artifactId>jdbi3-sqlobject</artifactId>
     <version>3.37.1</version>
-</dependency>
+  </dependency>
-</code>
+</dependencies>
+. . .
+<build>
+  <finalName>ParqueNaturalApp</finalName>
+  <pluginManagement>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-war-plugin</artifactId>
+        <version>3.2.2</version>
+      </plugin>
+      <plugin>
+        <!--
+        mvn tomcat7:deploy para desplegar
+        mvn tomcat7:undeploy para replegar
+        mvn tomcat7:redeploy para redesplegar
+        -->
+        <groupId>org.apache.tomcat.maven</groupId>
+        <artifactId>tomcat7-maven-plugin</artifactId>
+        <version>2.2</version>
+        <configuration>
+          <url>http://localhost:8082/manager/text</url>
+          <server>tomcat9</server>
+          <path>/parque</path>
+          <username>tomcat</username>
+          <password>tomcat</password>
+        </configuration>
+      </plugin>
+    </plugins>
+  </pluginManagement>
+</build>
+. . .
+</file>
 === Ficheros de configuración del proyecto ===
@@ Line 250: / Line 286: @@
 </code>
+Como se puede ver en el código, utilizamos la capa ''result'' para mostrar el resultado de procesar el formulario, tanto para caso de error como para cuando todo va bien. El Servlet nos enviará un pequeño fragmento html con el código para mostrar un ''alert'' siguiendo el diseño que proporciona Bootstrap. Al procesarlo de forma asíncrona, no es necesario que se recargue la web en ninguno de los casos.
+<figure>
+{{ form-ok.png }}
+<caption>Formulario procesado correctamente</caption></figure>
+<figure>
+{{ form-error.png }}
+<caption>Formulario con errores</caption></figure>
+==== Soporte para envío de imágenes en el formulario ====
+Podemos dejar fijada en el fichero ''web.xml'' la ruta donde queremos que se almacenen las imágenes (o cualquier tipo de fichero) que queramos que los usuarios adjunten a través de un formulario.
+<file xml web.xml>
+<?xml version="1.0" encoding="UTF-8" ?>
+<web-app>
+  <display-name>Parques Naturales</display-name>
+  <context-param>
+    <description>Ruta donde guardar las imagenes</description>
+    <param-name>image-path</param-name>
+    <param-value>/home/santi/apache-tomcat-9.0.86/webapps/parque_pictures</param-value>
+  </context-param>
+</web-app>
+</file>
+Hay que tener en cuenta que tendremos que definir nuestro formulario con ''enctype'' igual a ''multipart/from-data'' para que éste sea capaz de enviar ficheros (de cualquier tipo, incluidas las imágenes):
+<code html>
+. . .
+<form class="row g-3 needs-validation" method="post" enctype="multipart/form-data" id="edit-form">
+. . .
+</code>
+En nuestro caso estamos aprendiendo a procesar los formularios de forma asíncrona utilizando Ajax. Un poco más arriba, en https://java.codeandcoke.com/apuntes:web#envio_asincrono_del_formulario, se puede encontrar un ejemplo de script Ajax para procesar formularios que incluyen algún tipo de fichero.
+A la hora de procesar el formulario, en el Servlet que se encargue de él, podemos adjuntar un código como el siguiente para recoger la imagen enviada y copiarla a esa carpeta. Más adelante, podemos guardar el nombre del fichero en base de datos junto con el objeto que estemos registrando con el formulario. De esa manera podremos recuperarla más adelante para mostrarla en la web.
+También podemos disponer de una imagen por defecto, en nuestro caso llamada ''no-image.jpg'', para los casos en los que los usuarios no adjunten ninguna. Asi, les añadiremos una genérica que siempre será mejor que no disponer de ninguna.
+<code java>
+. . .
+// Recoge la imagen adjuntada en el formulario a través de un 'input' de tipo 'file' con el nombre 'picture'
+Part picturePart = request.getPart("picture");
+// Ruta base para las imágenes. Coge el valor que hay fijado en 'web.xml' con ese nombre
+String imagePath = request.getServletContext().getInitParameter("image-path");
+String filename = null;
+if (picturePart.getSize() == 0) {
+  // El usuario no adjunta foto al formulario. Se le asigna una que ya tenemos preparada por defecto
+  filename = "no-image.jpg";
+} else {
+  // El usuario adjunta foto al formulario. Generamos nombre aleatorio y la movemos a la ruta destino que hemos configurado en 'web.xml'
+  filename = UUID.randomUUID() + ".jpg";
+  InputStream fileStream = picturePart.getInputStream();
+  Files.copy(fileStream, Path.of(imagePath + File.separator + filename));
+}
+. . .
+</code>
 ===== Crear una página JSP para mostrar información =====
@@ Line 298: / Line 393: @@
 ==== Inicio de sesión. Login ====
-<file login.jsp html>
+<file javascript login.jsp>
 . . .
 <script type="text/javascript">
@@ Line 322: / Line 417: @@
 </script>
 . . .
+</file>
+<file html login.jsp>
 <main class="form-signin w-100 m-auto">
   <form>
@@ Line 342: / Line 440: @@
 </file>
-<file LoginServlet java>
+<file java LoginServlet.java>
 @WebServlet("/login")
 public class LoginServlet extends HttpServlet {