apuntes:web
This is an old revision of the document!
Table of Contents
Creación de una aplicación web
Creación del proyecto
Estructura del proyecto
Dependencias
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.30</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.26</version> </dependency> <dependency> <groupId>org.jdbi</groupId> <artifactId>jdbi3-core</artifactId> <version>3.37.1</version> </dependency> <dependency> <groupId>org.jdbi</groupId> <artifactId>jdbi3-sqlobject</artifactId> <version>3.37.1</version> </dependency>
Creación de una página JSP
Creación de un Servlet
Crear un formulario para registrar información
Formulario JSP
<section class="py-5 container"> <h1>Registrar nueva Actividad</h1> <h1>Modificar Actividad</h1> <form class="row g-3 needs-validation" method="post" enctype="multipart/form-data" id="edit-form"> <div class="mb-3"> <label for="name" class="form-label">Nombre</label> <input type="text" name="name" class="form-control" id="name" placeholder="Ir a caminar" </div> <div class="mb-3"> <label for="description" class="form-label">Descripción</label> <textarea rows="4" name="description" cols="50" class="form-control" id="description" placeholder="Descripción de la actividad"></textarea> </div> <div class="col-md-4"> <label for="date" class="form-label">Fecha</label> <input type="date" name="date" class="form-control" id="date" placeholder="dd/mm/yyyy" </div> <div class="col-md-4"> <label for="price" class="form-label">Precio</label> <input type="text" name="price" class="form-control" id="price" placeholder="15,00" </div> <div class="col-md-4"> <label for="picture" class="form-label">Foto</label> <input type="file" name="picture" class="form-control" id="picture"> </div> <div class="col-12"> <input type="submit" value="Enviar" id="edit-button"/> </div> <input type="hidden" name="id" value="<%= id %>"/> </form> <br/> <div id="result"></div> </section>
Servlet para procesar la información
@WebServlet("/edit-activity") @MultipartConfig public class EditActivity extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); HttpSession currentSession = request.getSession(); if (currentSession.getAttribute("role") != null) { if (!currentSession.getAttribute("role").equals("admin")) { response.sendRedirect("/parque"); } } try { if (hasValidationErrors(request, response)) return; int id = 0; if (request.getParameter("id") != null) { id = Integer.parseInt(request.getParameter("id")); } String name = request.getParameter("name"); String description = request.getParameter("description"); Date date = DateUtils.parse(request.getParameter("date")); float price = CurrencyUtils.parse(request.getParameter("price")); Part picturePart = request.getPart("picture"); // Guardar la imagen en disco String imagePath = request.getServletContext().getInitParameter("image-path"); String filename = null; if (picturePart.getSize() == 0) { filename = "no-image.jpg"; } else { filename = UUID.randomUUID() + ".jpg"; InputStream fileStream = picturePart.getInputStream(); Files.copy(fileStream, Path.of(imagePath + File.separator + filename)); } Database.connect(); final String finalFilename = filename; if (id == 0) { int affectedRows = Database.jdbi.withExtension(ActivityDao.class, dao -> dao.addActivity(name, description, date, price, finalFilename)); sendMessage("Actividad registrada correctamente", response); } else { final int finalId = id; int affectedRows = Database.jdbi.withExtension(ActivityDao.class, dao -> dao.updateActivity(name, description, date, price, finalFilename, finalId)); sendMessage("Actividad modificada correctamente", response); } } catch (ParseException pe) { pe.printStackTrace(); sendError("El formato de fecha o precio no es correcto", response); } catch (ClassNotFoundException cnfe) { cnfe.printStackTrace(); sendError("Internal Server Error", response); } catch (SQLException sqle) { sqle.printStackTrace(); sendError("Error conectando con la base de datos", response); } } private boolean hasValidationErrors(HttpServletRequest request, HttpServletResponse response) throws IOException { boolean hasErrors = false; if (request.getParameter("name") == null) { sendError("El nombre es un campo obligatorio", response); hasErrors = true; } try { DateUtils.parse(request.getParameter("date")); } catch (ParseException pe) { sendError("Formato de fecha no válido", response); hasErrors = true; } try { float priceValue = CurrencyUtils.parse(request.getParameter("price")); } catch (ParseException pe) { sendError("Formato de precio no válido", response); hasErrors = true; } return hasErrors; } }
Envío asíncrono del formulario
<script> $(document).ready(function () { $("#edit-button").click(function (event) { event.preventDefault(); const form = $("#edit-form")[0]; const data = new FormData(form); $("#edit-button").prop("disabled", true); $.ajax({ type: "POST", enctype: "multipart/form-data", url: "edit-activity", data: data, processData: false, contentType: false, cache: false, timeout: 600000, success: function (data) { $("#result").html(data); $("#edit-button").prop("disabled", false); }, error: function (error) { $("#result").html(error.responseText); $("#edit-button").prop("disabled", false); } }); }); }); </script>
Crear una página JSP para mostrar información
JSTL: JavaServer Pages Standard Tag Library
<dependencies> . . . <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> . . . </dependencies>
. . . <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %> . . . <% . . . pageContext.setAttribute("nombreAtributo", "valorAtributo"); . . . %>
. . .
<c:out value="${nombreAtributo}"/>
. . .
. . . <c:if test="${nombreAtributo=='valorAtributo'}"> <c:out value="El atributo 'nombreAtributo' es igual a 'valorAtributo'"/> </c:if> . . .
Uso de sesiones. Login y área privada
© 2023-2024 Santiago Faci
apuntes/web.1711887402.txt.gz · Last modified: 2024/03/31 12:16 by Santiago Faci