Comunidad de diseño web y desarrollo en internet online

Crear sitios y aplicaciones web en JSP con Java

Por danyrik el 19 de Junio de 2009 con 266,062 visitas

PHP, MySQL y Servidor Otros tutoriales por danyrik.

Volverte un Administrador de Servidores es una gran carrera profesional.

Hace un tiempo hice los artículos Introducción a Java para novatos y Instalar Eclipse y Tomcat para desarrollo con Java. Pues bien, ahora continúo esas partes.

En el ejemplo anterior apenas hicimos el "Hola mundo". En este caso vamos ampliar el tema de crear sitios con JSP. El JSP (Java Server Pages) es el lenguaje de Java y sus derivados para crear sitios dinámicos. Competencia directa con PHP y ASP. El JSP es, entonces, ni más ni menos que HTML mezclado con código Java (para definirlo rápidamente). Me voy a pasar por alto, por ahora, el tema de usar servlets pelados ya que esto es mas divertido :P .

Preparando el proyecto


Hay que comenzar un nuevo proyecto Tomcat en Eclipse, o Java Web/Web Application en NetBeans. Nombrarlo MiPrimerJSP.
En el siguiente paso vamos a crear una clase Java común y corriente muy sencilla para probar. Primero creamos un package llamado Objetos, clic con botón derecho del ratón sobre Web-inf en Eclipse o Source Packages en NetBeans y elegir New -->> Package (Java Package en Netbeans). Ahora clic con boton derecho del ratón en dicho package, elegir New -->> Class (Java Class en NetBeans) común y la nombran Persona. Escribimos la clase:

Código :

package Objetos;

public class Persona {
private String Nombre;
private String Ciudad;
private int id;

public String getCiudad() {
return Ciudad;
}

public void setCiudad(String Ciudad) {
this.Ciudad = Ciudad;
}

public String getNombre() {
return Nombre;
}

public void setNombre(String Nombre) {
this.Nombre = Nombre;
}

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}
}


NetBeans te crea por defecto el index.jsp. En Eclipse hay que crearlo a mano, en la carpeta Web-inf; pueden hacerlo a desde la carpeta del S.O. o bien New -->> File sobre dicha carpeta y nombrarlo index.jsp.

danyrik :

Pueden utilizar también Dreamweaver o similar para editar los archivos JSP si les parece más cómodo.


Por lo general en las últimas versiones del Eclipse/Tomcat/NetBeans viene todo bastante cocinado el tema de las librerías y las configuraciones para crear un sitio básico. Si te funcionó el tutorial anterior, éste te tiene que funcionar con lo mismo. Aún así, es un tema mucho más complejo que en otro artículo explicaré.

Escribiendo la página JSP


Lo primero que hay que indicarle a la página son una serie de parámetros o directivas, como por ejemplo qué clases importar:

Código :

<%@ page contentType="text/html; charset=utf-8" import="Objetos.Persona" errorPage=""%>


contentType: especifica el tipo de salida, en este caso text/html.
import: las clases o paquetes que vamos a utilizar en la página. Se puede separar por coma o usando varias veces import. En este caso Objetos.Persona (también pueden ser clases del entorno claro, como java.sql).
erroPage: simplemente la página de error en caso de que ocurra uno y no sea tomado por las excepsiones del código.
Hay otros parámetros más pero por ahora no viene al caso.

Abajo de esa primera línea (pueden copiarla tal cual), creen una página simple como:

Código :

<html>
<head>
<title>Mi primer sitio JSP</title>
</head>
<body>

<h1>Hola mundo</h1>

</body>
</html>


Escribiendo código java en la página


Hay varias formas de manipular la información de las clases en el código HTML, y yendo más lejos si se utilizan los frameworks cambia de nuevo según el mismo. Ahora vamos a ver dos formas básicas, código java pelado y los javaBeans. Se utilizan tags especiales para separlo del HTML común.

Para código java pelado se utiliza:

<%= expresión %>: para mostrar datos, es decir expresiones evaluadas para la salida (por ejemplo: persona.getNombre() en una tabla HTML).
<% código %>: algoritmos y cálculos comunes, tomar una variable, manipular clases (código java común y corriente). No se puede mostrar algo en el navegador, para eso de utiliza el tag anterior.
<%! código %>: se insertan en el cuerpo de la clase del servlet, fuera de cualquier método existente.

Por ahora con los los primeros tags nos alcanza.

Con esto ya se puede practicar algo, vamos a ver un ejemplo, tan fácil que casi no hacen falta comentarios:

Código :

<%@page contentType="text/html; charset=utf-8" import="Objetos.Persona"%>

<html>
<head>
<title>Mi primer sitio JSP</title>
</head>
<body>
<%
Persona persona = new Persona();
persona.setNombre("Daniel");
persona.setCiudad("Santa Rosa");
persona.setId(12);
%>
<h1>Datos de la persona:</h1>
<p>Nombre: <%=persona.getNombre()%></p>
<p>Ciudad: <%=persona.getCiudad()%></p>
<p>Numero de identificacion: <%=persona.getId()%></p>
</body>
</html>


Abajo del cuerpo utilizo el tag <% %> para setearle los datos al objeto, y en el párrafo muestro esos datos con la etiqueta <%= %>.

Para tomar un parámetro que viene por POST o GET, pueden tomarlo con request.getParameter().
Por ejemplo para llevar un parámetro "nombre" a una variable, dentro del tag que corresponda poner: String variable = request.getParameter("nombre"). Recuerden que llega como string, si es un número deben convertirlo a número con código Java.

Veamos el mismo caso utilizando javaBeans. Básicamente un Bean hace referencia a una clase fácilmente reutilizable y "sencilla" por así decirlo. La clase Persona que creamos sería una especie de Bean. Para que funcione debe tener los setters y getters que ya los hemos puesto.
Es muy fácil de entender:

Código :

<%@page contentType="text/html; charset=utf-8" import="Objetos.Persona"%>

<html>
<head>
<title>Mi primer sitio JSP</title>
</head>
<body>

<jsp:useBean id="persona" scope="page" class="Objetos.Persona" />
<jsp:setProperty name="persona" property="nombre" value="Daniel" />
<jsp:setProperty name="persona" property="ciudad" value="Santa Rosa" />
<jsp:setProperty name="persona" property="id" value="12" />

<h1>Datos de la persona:</h1>
<p>Nombre: <jsp:getProperty name="persona" property="nombre" /></p>
<p>Ciudad: <jsp:getProperty name="persona" property="ciudad" /></p>
<p>Numero de identificacion: <jsp:getProperty name="persona" property="id" /></p>

</body>
</html>


El código lo dice todo:

<jsp:useBean id="algo" scope="page" class="package.class" />: para declarar un Bean. Hay que indicarle cuál paquete y clase. Fijense que le damos el id "persona" en el ejemplo, por lo que a partir de ahora usamos ese id. El scope no viene al caso por ahora.
<jsp:setProperty name="algo" property="nombre" value="Daniel" />: para setearle un valor al Bean creado, usando el id que le hemos dado al crearlo.
<jsp:getProperty name="persona" property="nombre" />: para mostrar los valores del Bean.

danyrik :

Si utilizan plugins gráficos en Eclipse o NetBeans, pueden insertar los Beans extremadamente rápido y fácil.


Probando la página



Para probar la página, tiene que estar iniciado el Tomcat en los respectivos IDE. En NetBeans clic con el botón derecho del ratón sobre el proyecto (el panel de la izquierda) y elegir "Run"; los llevará automáticamente al navegador por defecto.
En Eclipse pueden entrar desde el navegador siguiendo este formato (por lo general): http://localhost:8080/MiPrimerJSP/index.jsp o donde hayan puesto la página.


Vista general del proyecto en Eclipse



Vista general del proyecto en NetBeans


Finalizando


Con lo que hemos visto hoy ya pueden hacer prácticamente cualquier cosa, y más si saben usar DB. Un ejercicio que pueden probar por ejemplo es el siguiente: crear otra página, pongamosle "datos.jsp" y con "index.jsp" pasarle los parámetros por GET desde un link común (o POST desde un formulario), tomarlos y hacer cálculos o mostrarlos.

danyrik :

Si no saben cómo pasar un parámetro por GET o POST, ¿qué hacen en este tutorial? xD


La idea de este artículo es solamente comenzar a jugar con Java y páginas webs en la parte básica. Para hacer un sitio profesionalmente se utilizan otros mecanismos y hay miles de alternativas.
Con paciencia, buscando, preguntando, probando se puede ir entendiendo la onda. Suerte y responderé las dudas lo mejor posible, si se me escapó algun detalle me lo hacen saber.
Nos vemos en próximo artículo, donde veremos más cosas para renegar divertirse.

danyrik :

Ultimo tip: si quieren usar imágenes, Flash, CSS o JavaScript en la página no hay ningún problema. Pongan el material en alguna carpeta e indiquenle la ruta en el HTML como siempre, ya sea dinámicamente o estáticamente. Si yo tengo una carpeta "paginas" con "index.jsp" y dentro de la misma tengo otra llamda "css" con el archivo, la ruta del css sería css/algo.css

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (53)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate