Workshop: CRUD Java EE

Author(s): Hilmer Ch. @Hchona , Andres Calle @MrACalle

Description: Crear, Consultar, Actualizar y Eliminar (CRUD de las siglas en inglés Create-Read-Update, Delete) son las 4 funciones básicas que componen un software. Este taller enseña cómo crear un CRUD dentro de una aplicación web para gestionar los productos de una tienda.
Level: Básico
Time:
Tools: Netbeans 8.0.2 + Glassfish 4.1, Oracle database express edition

Nota: El siguiente Workshop sera realizado para trabajar con una base de datos Oracle. En el Workshop 2: Database for CRUD encontrara las instrucciones para instalar y configurar la base de datos.

Cuando ejecutemos nuestra aplicación del CRUD obtendremos un resultado como el de la siguiente imagen:

Paso 1: (Open netbeans)
File > New Project > Java EE > Enterprise Application
Next
Project  Name: demo1
Project Location: C:\demos
Project Folder:  C:\demos\demo1
Next
Server: GlassFish Server 4.1
Java EE version: Java EE7
Create EJB Module: demo-ejb
Create Web Application Module: demo-war
Finish

Paso 2:

Save the oracle driver (ojdbc_.jar)  on GLASSFISH_DIR\glassfish\domains\domain1\lib
Services > Servers > Rigth Click in GlassFish Server 4.1 > Start
On an internet browser go to URL http://localhost:4848
JDBC > JDBC Connection Pools > New…
Pool name: demos_java
Resource Type: javax.sql.DataSource
Database Driver Vendor: Oracle
Next
Additional properties >
Delete all properties except :
– User
– URL
– Password
Delete Properties
User: demos_java
URL: jdbc:oracle:thin:@localhost:1521:XE
Password: 123
Finish
 
Click in demos_java
Ping
Note: if you did right the steps, will display a message that say “Ping Succeeded”

Paso 3:
JDBC > JDBC Resources > New…
JNDI Name: jdbc/demos_java
Pool Name: demos_java
OK

Paso 4: In netbeans
Right click on demo-ejb > New > Entities Classes from Database
Database Source: New Data Source
JDNI Name: jdbc/demos_java
Database Connection: New Database Connection
Driver: Oracle Thin
Driver File(s): C:\demos\ojdbc7.jar
Next
Driver Name: Oracle Thin (Service ID (SID))
Host: localhost (if the database is installed on your computer,
Otherwise the computer/server name or IP)
Port: 1521
Service ID (SID): XE
User name: demos_java
Password: 123
Remember password: Yes
Note: Please Test Connection
JDBC URL: jdbc:oracle:thin:@localhost:1521:XE
Next
Select schema: DEMOS_JAVA
Next
JDNI Name: jdbc/demos_java
Database Connection: jdbc:oracle:thin:@localhost:14521:XE [demos_java on DEMO …]
OK
Data Source: java:module/jdbc/demos_java
Selected Tables: PRODUCTO
Next
Project: demo-ejb
Location: Source Packages
Package: entity
Generate Named Query Annotations for Persistent Fields: Yes
Generate JAXB Annotations: Yes
Generate MappedSuperclassess instead of Entities: No
Create Persistence Unit: Yes
Next
Use Column Names in Relationships: Yes
Finish

Paso 5:
Right click on demo-ejb > New > Session Bean For Entity Classes
Entity.Producto
Next
Package: entity
Finish

Paso 6:
Right click on demo-war > New > Other… > JavaServer Faces > JSF Managed Bean
Class name: ProductoManagedBean
Package: view
Scope: session
Finish
Replace the content with this code.

package view;
import entity.Producto;
import entity.ProductoFacade;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class ProductoManagedBean {
@EJB
ProductoFacade productoFacade;
private List productoss;
private Producto producto;
public ProductoManagedBean() {
}
public void findProductoss() {
this.productoss = this.productoFacade.findAll();
}
public String goProductoAction() {
return «producto.xhtml»;
}
public String goAddProductoAction() {
this.producto = new Producto();
return «productoAdd.xhtml»;
}
public String addProductoAction() {
this.productoFacade.create(this.producto);
return this.goMenuAction();
}
public String goUpdProductoAction() {
return «productoUpd.xhtml»;
}
public void updProductoAction() {
this.productoFacade.edit(this.producto);
}
public String goMenuAction() {
return «menu.xhtml»;
}
public Producto getProducto() {
return producto;
}
public void setProducto(Producto producto) {
this.producto = producto;
}
public ProductoFacade getProductoFacade() {
return productoFacade;
}
public void setProductoFacade(ProductoFacade productoFacade) {
this.productoFacade = productoFacade;
}
public List getProductoss() {
return productoss;
}
public void setProductoss(List productoss) {
this.productoss = productoss;
}
}

Preparing graphic workspace
Window > IDE Tools > Palette

Paso 7:
Right click web pages > JSF page…
File name: menu
Finish
Open the file menu.xhtml and and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:commandButton value=»Consultar productos» action=»#{productoManagedBean.goProductoAction()}»/>
<h:commandButton value=»Nuevo producto» action=»#{productoManagedBean.goAddProductoAction()}»/>
</h:form>
</f:view>

Paso 8:
Right click web pages > JSF page…
File name: producto
Finish
Open the file producto.xhtml and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:panelGrid columns=»2″>
<h:commandButton value=»BUSCAR PRODUCTOS» action=»#{productoManagedBean.findProductoss()}»/>
</h:panelGrid>
<h1>
<h:outputText value=»Productos»/>
</h1>
<h:dataTable value=»#{productoManagedBean.productoss}» var=»item» border=»1″>
<h:column>
<f:facet name=»header»>
<h:outputText value=»Id»/>
</f:facet>
<h:commandLink action=»#{productoManagedBean.goUpdProductoAction()}»>
<f:setPropertyActionListener value=»#{item}» target=»#{productoManagedBean.producto}»/>
<h:outputText value=»#{item.id}»/>
</h:commandLink>
</h:column>
<h:column>
<f:facet name=»header»>
<h:outputText value=»Nombre»/>
</f:facet>
<h:commandLink action=»#{productoManagedBean.goUpdProductoAction()}»>
<f:setPropertyActionListener value=»#{item}» target=»#{productoManagedBean.producto}»/>
<h:outputText value=»#{item.nombre}»/>
</h:commandLink>
</h:column>
<h:column>
<f:facet name=»header»>
<h:outputText value=»Valor»/>
</f:facet>
<h:commandLink action=»#{productoManagedBean.goUpdProductoAction()}»>
<f:setPropertyActionListener value=»#{item}» target=»#{productoManagedBean.producto}»/>
<h:outputText value=»#{item.valor}»/>
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</f:view>

Paso 9:
Right click web pages > JSF page…
File name: productoAdd
Finish
Open the file: productoAdd.xhtml and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:panelGrid columns=»2″>
<h:outputLabel value=»ID:»/>
<h:inputText value=»#{productoManagedBean.producto.id}» required=»true»/>
<h:outputLabel value=»NOMBRE:»/>
<h:inputText value=»#{productoManagedBean.producto.nombre}» required=»true»/>
<h:outputLabel value=»VALOR:»/>
<h:inputText value=»#{productoManagedBean.producto.valor}» required=»true»/>
</h:panelGrid>
<h:panelGrid columns=»2″>
<h:commandButton value=»INGRESAR» action=»#{productoManagedBean.addProductoAction()}» />
<h:commandButton value=»REGRESAR» action=»#{productoManagedBean.goMenuAction()}» immediate=»true»/>
</h:panelGrid>
</h:form>
</f:view>

Paso 10:
Right click web pages > JSF page…
File name: productoUpd
Finish
Open the file: productoUpd.xhtml and paste next to the tag <h:body> the code above

<f:view>
<h:form>
<h:panelGrid columns=»2″>
<h:outputLabel value=»ID:»/>
<h:outputLabel value=»#{productoManagedBean.producto.id}»/>
<h:outputLabel value=»NOMBRE:»/>
<h:inputText value=»#{productoManagedBean.producto.nombre}» required=»true»/>
<h:outputLabel value=»VALOR:»/>
<h:inputText value=»#{productoManagedBean.producto.valor}» required=»true»/>
</h:panelGrid> <h:panelGrid columns=»2″>
<h:commandButton value=»ACTUALIZAR» action=»#{productoManagedBean.updProductoAction()}» />
<h:commandButton value=»REGRESAR» action=»#{productoManagedBean.goMenuAction()}» immediate=»true» />
</h:panelGrid>
</h:form>
</f:view>

 

Nota: Finalizado este workshop puede continuar con la Parte 3