apuntes:web
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
apuntes:web [2024/03/31 12:18] – [Creación del proyecto] Santiago Faci | apuntes:web [2024/03/31 13:01] (current) – [Envío asíncrono del formulario] Santiago Faci | ||
---|---|---|---|
Line 11: | Line 11: | ||
=== Dependencias === | === Dependencias === | ||
- | <code xml> | + | <file xml pom.xml> |
- | < | + | . . . |
+ | < | ||
+ | < | ||
< | < | ||
< | < | ||
< | < | ||
< | < | ||
- | </ | + | |
- | < | + | |
< | < | ||
< | < | ||
< | < | ||
- | </ | + | |
- | < | + | |
< | < | ||
< | < | ||
< | < | ||
- | </ | + | |
- | < | + | |
< | < | ||
< | < | ||
< | < | ||
- | </ | + | |
- | < | + | |
< | < | ||
< | < | ||
< | < | ||
- | </ | + | |
- | </code> | + | </dependencies> |
+ | . . . | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <!-- | ||
+ | mvn tomcat7: | ||
+ | mvn tomcat7: | ||
+ | mvn tomcat7: | ||
+ | --> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | . . . | ||
+ | </file> | ||
=== Ficheros de configuración del proyecto === | === Ficheros de configuración del proyecto === | ||
- | <file context.xml xml> | + | < |
<?xml version=" | <?xml version=" | ||
<Context path="/ | <Context path="/ | ||
</ | </ | ||
- | <file web.xml xml> | + | < |
<?xml version=" | <?xml version=" | ||
Line 58: | Line 94: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | === Base de datos === | ||
+ | |||
+ | <code sql> | ||
+ | CREATE TABLE activities ( | ||
+ | id INT PRIMARY KEY AUTO_INCREMENT, | ||
+ | name VARCHAR(50) UNIQUE NOT NULL, | ||
+ | description VARCHAR(250), | ||
+ | datetime DATETIME, | ||
+ | price FLOAT, | ||
+ | picture VARCHAR(50) | ||
+ | ); | ||
+ | |||
+ | CREATE TABLE users ( | ||
+ | id INT PRIMARY KEY AUTO_INCREMENT, | ||
+ | name VARCHAR(50) NOT NULL DEFAULT ' | ||
+ | username VARCHAR(50) UNIQUE NOT NULL, | ||
+ | password VARCHAR(40) NOT NULL, | ||
+ | role VARCHAR(50) DEFAULT ' | ||
+ | ); | ||
+ | </ | ||
===== Creación de una página JSP ===== | ===== Creación de una página JSP ===== | ||
Line 229: | Line 286: | ||
</ | </ | ||
+ | Como se puede ver en el código, utilizamos la capa '' | ||
+ | < | ||
+ | {{ form-ok.png }} | ||
+ | < | ||
+ | |||
+ | < | ||
+ | {{ form-error.png }} | ||
+ | < | ||
+ | |||
+ | ==== Soporte para envío de imágenes en el formulario ==== | ||
+ | |||
+ | Podemos dejar fijada en el fichero '' | ||
+ | |||
+ | <file xml web.xml> | ||
+ | <?xml version=" | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Hay que tener en cuenta que tendremos que definir nuestro formulario con '' | ||
+ | |||
+ | <code html> | ||
+ | . . . | ||
+ | <form class=" | ||
+ | . . . | ||
+ | </ | ||
+ | |||
+ | En nuestro caso estamos aprendiendo a procesar los formularios de forma asíncrona utilizando Ajax. Un poco más arriba, en https:// | ||
+ | |||
+ | 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 '' | ||
+ | |||
+ | <code java> | ||
+ | . . . | ||
+ | // Recoge la imagen adjuntada en el formulario a través de un ' | ||
+ | Part picturePart = request.getPart(" | ||
+ | |||
+ | // Ruta base para las imágenes. Coge el valor que hay fijado en ' | ||
+ | String imagePath = request.getServletContext().getInitParameter(" | ||
+ | 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 = " | ||
+ | } else { | ||
+ | // El usuario adjunta foto al formulario. Generamos nombre aleatorio y la movemos a la ruta destino que hemos configurado en ' | ||
+ | filename = UUID.randomUUID() + " | ||
+ | InputStream fileStream = picturePart.getInputStream(); | ||
+ | Files.copy(fileStream, | ||
+ | } | ||
+ | . . . | ||
+ | </ | ||
===== Crear una página JSP para mostrar información ===== | ===== Crear una página JSP para mostrar información ===== | ||
Line 275: | Line 391: | ||
===== Uso de sesiones. Login y área privada ===== | ===== Uso de sesiones. Login y área privada ===== | ||
+ | ==== Inicio de sesión. Login ==== | ||
+ | |||
+ | <file javascript login.jsp> | ||
+ | . . . | ||
+ | <script type=" | ||
+ | $(document).ready(function() { | ||
+ | $(" | ||
+ | event.preventDefault(); | ||
+ | const formValue = $(this).serialize(); | ||
+ | $.ajax(" | ||
+ | type: " | ||
+ | data: formValue, | ||
+ | statusCode: { | ||
+ | 200: function(response) { | ||
+ | if (response === " | ||
+ | window.location.href = "/ | ||
+ | } else { | ||
+ | $("# | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | . . . | ||
+ | </ | ||
+ | |||
+ | <file html login.jsp> | ||
+ | <main class=" | ||
+ | < | ||
+ | <h1 class=" | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | <label for=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | <input type=" | ||
+ | <label for=" | ||
+ | </ | ||
+ | |||
+ | <button class=" | ||
+ | </ | ||
+ | <br/> | ||
+ | <div id=" | ||
+ | </ | ||
+ | . . . | ||
+ | </ | ||
+ | |||
+ | <file java LoginServlet.java> | ||
+ | @WebServlet("/ | ||
+ | public class LoginServlet extends HttpServlet { | ||
+ | |||
+ | @Override | ||
+ | protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, | ||
+ | response.setContentType(" | ||
+ | response.setCharacterEncoding(" | ||
+ | |||
+ | String username = request.getParameter(" | ||
+ | String password = request.getParameter(" | ||
+ | |||
+ | try { | ||
+ | Database.connect(); | ||
+ | User user = Database.jdbi.withExtension(UserDao.class, | ||
+ | dao -> dao.getUser(username, | ||
+ | if (user != null) { | ||
+ | HttpSession session = request.getSession(); | ||
+ | session.setAttribute(" | ||
+ | session.setAttribute(" | ||
+ | response.getWriter().print(" | ||
+ | } else { | ||
+ | sendError(" | ||
+ | } | ||
+ | } catch (ClassNotFoundException cnfe) { | ||
+ | cnfe.printStackTrace(); | ||
+ | sendError(" | ||
+ | } catch (SQLException sqle) { | ||
+ | sqle.printStackTrace(); | ||
+ | sendError(" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== Mantenimiento de la sesión ==== | ||
---- | ---- | ||
(c) 2023-2024 Santiago Faci | (c) 2023-2024 Santiago Faci |
apuntes/web.1711887523.txt.gz · Last modified: 2024/03/31 12:18 by Santiago Faci