Características y práctica de JSP

Clase 10 de 38 • Curso de Hibernate y Java Spring 2018

Resumen

Las JSP (JavaServer Page) son componentes del lado del servidor que nos permiten desarrollar páginas web con soporte para contenido dinámico gracias a la inclusión de código Java en código html utilizando los Tags (una sintaxis especial que podemos utilizar en cualquier momento para añadir contenido dinámico: <% for(1=0; i<10: i++) %>).

El desafío de esta clase es crear una página con JSP para visualizar la información de los usuarios que se registran.

Ramón José París González

student•

En el minuto 11:49 se agregó un punto en la ruta del server ./abc123. Esto es debido a las rutas en los directorios. Las rutas pueden ser:

Absolutas. Es la ruta completa del directorio. Incluyendo el disco en el que está almacenado. Ejemplo: C:/Program Files/Java
Relativas. Rutas que parten desde cierto directorio y sus relativos. Es decir, sus directorios padres, hijos o hermanos

En este caso, se utilizan rutas relativas y se pueden utilizar de la siguiente manera:

./ Hace referencia al directorio en el que se está posicionado actualmente
../ Hace referencia al directorio padre de donde se esté posicionado

En caso de que creemos un directorio “users” y guardemos todos los JSP de usuarios en este, cuando queramos acceder a los servlets, deberemos utilizar ../rutaServlet

De todas formas, esta no es la mejor práctica debido a que si tenemos muchas carpetas o queremos mover el directorio, se podría complicar mover las rutas nuevamente. Recomiendo utilizar: <%=request.getContextPath() %>/rutaServlet. Este código arrojará siempre la ruta al directorio en donde se encuentran los servlets. Como pueden ver, es un código en java utilizando los scriptlets que se habló en la clase.

Para más información sobre las rutas, acá lo explican bien

Jair Israel Avilés Eusebio

student•

Excelente aporte, gracias por compartir :D

Cesar David Ramírez Dimaté

student•

Excelente aporte. Es importante enseñar desde el inicio las buenas prácticas.

Nahuel Matias Regueira

student•

Si vuelvo a escuchar "el tema" una vez más creo que voy a gritar

Rodrigo Vargas Solano

student•

no es para tanto...

Digo el curso esta interesante, si te enfoncas en poner atención en las definiciones de conceptos, y seguir al paso en la practica, ni notas la palabra. En lo personal, ni noto la palabra "Tema", te recomiendo que tomes un descanso, te despejes la mente y regreses, dado que tu atención esta enfoncada mas en la palabra que en la definición. Saludos! :)

Esteban López Salas

student•

Imposible no notarlo, pienso lo mismo.

Gerald Zamora

student•

las etiquetas son:
comentario:

<%--un comentario--%>

expresiones:

<%=  una linea de código  %>

Scriptlets

<% varias lineas de código %>

Declaraciones

<%! declaración de variables o métodos %>

importar archivos java

<%@ page import = "java.lang.Math, com.gerald.otraClase"  %>

Buenas practicas: mantener el mínimo código posible en las JSP. Separar el código java en clases (Modular). referirse a los archivos usando <%=request.getContextPath() %>/abc123

Cristhian Franco

student•

Muy buena información.

Carlos Morán

student•

Usando Bootstrap para que se vea mejor :D

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
	integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
	crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<%
			int i = 0;
		%>
		<form action="./ServletLogin">
			<div class="form-group">
				<label for="email">Email Address</label> <input type="email"
					class="form-control" id="email" name="email"
					aria-describedby="emailHelp" placeholder="Enter email"> <small
					id="emailHelp" class="form-text text-muted">We'll never
					share your email with anyone else.</small>
			</div>
			<div class="form-group">
				<label for="company">Company</label> <input type="text" id="company"
					name="company" class="form-control" placeholder="Company">
			</div>
			<div class="form-group">
				<label for="password">Password</label> <input type="password"
					id="password" name="password" class="form-control"
					placeholder="Password">
			</div>
			<button type="submit" class="btn btn-primary">Login</button>
		</form>
	</div>
	<div>
	<%
		for (i = 0; i < 10; i++) {
	%>
	<label>Hola <%=i%></label>
	<%
		}
	%>
	</div>
</body>

Cristobal Vega

student•

Me estoy dando cuenta de que los JSP son lo equivalente a los RazorPages de C# o EJS en NodeJS. :nerd_face:

Pablo David Vallejos

student•

razor pages al dia de la fecha esta muy maduro! y se pueden hacer proyectos muy serios! creo que jsp no ! o por lo menos jamas en mi existencia vi se siga usando. lo mas comun en el mundo java es backend java y framework como angular en el front.

Cristobal Vega

student•

Interesante afirmación @pablovass, gracias por el dato. :raised_hands:

erik baltazar

student•

seguimos el curso. Hasta el momento todo bien.

Pablo Cervantes Bohórquez

student•

++IMPORTANTE:++ Hasta ahora, en todos los tutoriales (no sólo de Platzi) que he podido ver se trabaja con servidores de modo local, no he visto ninguno que "muestre" cómo trabajar con un servidor de modo remoto, desde mi muy personal punto de vista, queda un sesgo vacío.

Jhon Jairo Castiblanco Mojica

student•

Pienso que igual lo va a brindar más adelante, pero para responder tu pregunta en el curso de java EE 2017 lo muestran en los últimos vídeos, la verdad solo es un repositorio en un entorno de cloud que te brinda una url, pero el desarrollo no va a cambiar nada de como lo trabajas de forma local

Camilo Torres

student•

cuanto cambia con respecto a JSF?

Fernanda Aragon

student•

Hola! JSP era el framework para la generación de páginas web transpilando el archivo .jspa un Servlet. JSF es el framework para la generación de páginas web dentro de una aplicación web que sigue la filosofía MVC, usando Facelets que son Componentes en XML.

Marco Antonio Toscano Freire

teacher•

JSF es una especificaciòn de Java enfocada netamente al tema visual (construcciòn y manipulaciòn de formularios), en este curso se podrìa utilizarla como complemento.

Ricardo Lugo Recillas

student•

JSP = (java services page) componentes del lado servidor patra el desarrollo de paginas web, usando tags de JSPS para html

Erich J. Hauser

student•

Java Server Pages*

Edith Hernández Navarrete

student•

Excelente!!. Esto ya lo he usado pero es muy bueno repasar!!

Cesar David Ramírez Dimaté

student•

JSP:

Java Server Pages 'Páginas del Servidor Java'
Son componentes del lado del servidor para desarrollar páginas web que soportan contenido dinámico gracias a la inclusión de código java en código html mediante el uso de tags JSP.
Esto evita el uso de PrintWriter (resp.getWriter()) para escribir código html, lo cuál hacía más complicado detectar los errores en código.
<% %> : Scriptlet. Se utiliza para escribir código de java (incluir archivos, definir atributos, dependencias, páginas de error, etc).
- <%-- --%> : Comentarios.
- <%! %> : Declaración. Declara variables o métodos que puede usar código java más adelante en la página JSP.
- <%= %> : Expresión. Expresión de lenguaje script (java), que se evalua, se convierte en una cadena (string) y se inserta en el JSP.
- <%@ %> : Directiva. Afecta la estructura general de la clase servlet. ++page:++ Define atributos dependientes de la página, como el lenguaje de secuencias de comandos, la página de error y los requisitos de almacenamiento en búfer. ++include:++ Incluye un archivo durante la fase de traducción. ++taglib:++ Declara una biblioteca de etiquetas, que contiene acciones personalizadas, utilizadas en la página.

Fernando Gómez O.

student•

Para que el if vaya a "Usuario incorrecto" hay que crear String password y colocarlo dentro del if, además con null no me funciona, pero con "" sí, así:

		String usuario = request.getParameter("usuario");
		String password = request.getParameter("password");
		String empresa = request.getParameter("empresa");
		PrintWriter escritor = response.getWriter();

		if (usuario !="" && password !="" && empresa !="") {
			if (empresa.equals("Platzi")) {
				escritor.println("Bienvenido a Platzi");
			} else {
				escritor.println("Bienvenido");
			}
		} else {
			escritor.println("Usuario incorrecto!!");
		}
		escritor.close();```

Sergio Armando Medina Chaparro

student•

Está bueno tu aporte y es buena idea poner password. Aunque yo creo que sale incorrecto porque es posible que los names en el JSP estén diferentes a los names del servlet.

En mi caso tenía "Usuario" con la "u" mayúscula en JSP mientras que en el servlet lo tenía todo en minúscula "usuario". Lo arregle y me funcionó sin poner String password.

Cesar David Ramírez Dimaté

student•

¿Pero es usuario o password incorrecto?

Cesar David Ramírez Dimaté

student•

No es buena práctica manejar tablas ya que están mandadas a recoger. Se deben utilizar <div>.

Quedaría de la siguiente manera:

<%--
  Created by IntelliJ IDEA.
  User: cesardramirez
  Date: 12/26/19
  Time: 5:53 PM
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%! int i = 0; %>
<html>
    <head>
        <title>Login Form</title>
        <link rel="stylesheet" type="text/css" href="css/platziweb.css">
    </head>
    <body>
        <form action="./login" method="post">
            <div class="table">
                <div class="row">
                    <div class="cell"><label>Usuario:</label></div>
                    <div class="cell"><input type="text" name="usuario"></div>
                    <div class="cell"><label>Clave:</label></div>
                    <div class="cell"><input type="password" name="clave"></div>
                    <div class="cell"><label>Empresa:</label></div>
                    <div class="cell"><input type="text" name="empresa"></div>
                </div>
                <div class="row">
                    <div class="cell"><input type="submit" value="Enviar"></div>
                </div>
            </div>
            <% for (i = 0; i < 10; i++) { %>
            <label>Hola <%= i %></label><br>
            <% } %>
        </form>
    </body>
</html>

platziweb.css

.table {
    display: table;
    margin-bottom: 10px;
}

.headboard {
    display: table-row;
    font-weight: bold;
    text-align: center;
}

.row {
    display: table-row;
    border-top: 5px;
}

.cell {
    display: table-cell;
    /*border: thin solid;*/
    padding: 0 5px;
}

Mario Alexis Silva Escalera

student•

Hola Cesar, cuando creas un archivo css en que carpeta se debería guardar?

Andres Annicchiarico

student•

Entendí como funciona y la nomenclatura, pero hay algo que no entiendo conceptualmente. El formulario que creamos con JSP es lo que en un futuro va a estar asignado al frontend verdad?

Diego Joel Requejo Torero

student•

Es correcto, JSP es como una HTML pero con esteroides de java, es una tecnología, que se utilizó mucho, antes de que salgan los frameworks frontends de javascript como Angular, React, etc.

Solo como dato, en el ciclo de vida de un JSP, este, se convierte en un archivo java en el momento de ejecución, solo lo comento como cultura general, pero no es necesario profundizaar hoy en día :smile:

Joan Federico Marin Ruiz

student•

buenas. me sale el error http 404, al ejecutar el ejercicio. el servidor esta corriendo al dar localhost:8080 abre la pagina de tomcat. pero al darle la ruta de la applicacion me sale el error. localhost:8080/platziweb/login.jsp que puedo revisar?

Erik Elyager

student•

El error 404 significa que no encuentra la página, prueba:

Crear la página login.jsp con el wizard y sigue los pasos de la clase.
Tomcat está corriendo porque te regresa el error 404 pero puedes intentar reiniciar.
Revisa que la ruta es la correcta localhost:8080/platziweb/login.jsp.

Diego Joel Requejo Torero

student•

Hola, asegurate de que login.jspeste dentro de WebContent como la imagen de abajo, y de reiniciar tu servidor-

Santiago Cabrera Marin

student•

A m no me funciona, cuando le doi a enviar después del cambio del punto no me redirecciona a /abc123

Alex Camacho

teacher•

Igual y si muestras tu código sería más fácil ayudarte ;)

Jorge Luis Paiva Huamán

student•

Para tecnología JAVA el controller siempre siempre será un ServLet o hay otro tipo de componente (conversado o hasta esta sesión de clase) que pueda cumplir ese rol?

Oscar Gonzalez Bonifacio

student•

como es que creas el contexto solo con el punto? porque ami no me dirreciona con el otro archivo

Oscar Gonzalez Bonifacio

student•

ya me fije me salte el cambio de urlPatterns

Rubén Hernan Barrera Chavez

student•

en el examen me marca mal la respuesta cuando pongo que el tag es <% %> no entiendo

Juan Castro

teacher•

¡Hola! Hice el examen, contesté esa pregunta con la respuesta <%%> y me la marcó como correcta. Puedes probar de nuevo y ver que no haya problemas. :relieved:

JESUS ALMIRCAR CASTELLANOS

student•

📌Ir a repositorio
📌Ir a repositorio