Latihan - Membuat aplikasi web JavaServer Faces di Tomcat
Anda telah diminta untuk membuat aplikasi web JavaServer Faces (JSF) yang dapat menangani pengiriman Formulir. Anda akan membangun aplikasi web dan menyebarkannya secara lokal ke server Tomcat.
Membuat aplikasi web JSF sederhana di Tomcat
Dalam latihan ini, kita akan membuat proyek Maven untuk aplikasi web Java Anda. Setelah membuat proyek, Anda harus mengonfigurasi tiga konfigurasi. Yang pertama adalah menambahkan pustaka dependensi ke file pom.xml. Yang kedua adalah membuat file konfigurasi CDI sebagai beans.xml dengan menggunakan Contexts and Dependency Injection (CDI). Yang ketiga adalah mengonfigurasi JSF pada file web.xml. Setelah konfigurasi, kita dapat membuat halaman web JSF dan membuat kacang cadangan untuk operasi back-end sisi server. Terakhir, kami akan mengevaluasinya di lingkungan Tomcat lokal.
Membuat proyek Maven
Jalankan perintah arketipe Maven berikut. Perintah ini akan membuat proyek Maven untuk aplikasi web Java Anda.
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
Anda akan melihat output berikut:
[INFO] Parameter: package, Value: com.microsoft.azure.samples
[INFO] Parameter: groupId, Value: com.microsoft.azure.samples
[INFO] Parameter: artifactId, Value: azure-javaweb-app
[INFO] Parameter: packageName, Value: com.microsoft.azure.samples
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] project created from Old (1.x) Archetype in dir: /private/tmp/TMP/azure-javaweb-app
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 5.416 s
[INFO] Finished at: 2020-11-02T11:12:58+09:00
[INFO] ------------------------------------------------------------------------
File dan direktori berikut sekarang tersedia.
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
Mengubah file pom.xml Maven
Untuk menggunakan pustaka JSF, kita perlu menambahkan pustaka dependensi berikut ke dalam pom.xml.
Ganti isi pom.xml dengan kode berikut:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.microsoft.azure.samples</groupId>
<artifactId>azure-javaweb-app</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>azure-javaweb-app Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<failOnMissingWebXml>false</failOnMissingWebXml>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.4.0</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>8.0</version>
</dependency>
<dependency>
<groupId>org.jboss.weld.servlet</groupId>
<artifactId>weld-servlet</artifactId>
<version>2.4.8.Final</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mockito</groupId>
<artifactId>mockito-core</artifactId>
<version>2.23.0</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>azure-javaweb-app</finalName>
</build>
</project>
Jika Anda ingin menggunakan Java SE 11 alih-alih Java 8, ubah entri pom.xml berikut:
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
Aktifkan Konteks dan Injeksi Dependensi
Selanjutnya, buat CDI tersedia untuk aplikasi web Anda. Buat file beans.xml di bawah direktori src/main/WEB-INF, dan jelaskan konten berikut:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"
bean-discovery-mode="all">
</beans>
Aktifkan JSF
Selanjutnya, untuk mengenali semua file dengan ekstensi xhtml sebagai JSF Facelets, buat perubahan berikut ke web.xml di bawah direktori WEB-INF.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>nova-light</param-value>
</context-param>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Mengubah nama index.jsp
Sekarang setelah pengaturan lingkungan untuk menjalankan JSF telah selesai, saatnya untuk membuat halaman JSF. Halaman web JSF ditulis dalam format file XHTML alih-alih JSP, seperti yang diatur dalam contoh web.xml sebelumnya. Jadi, ubah nama file index.jsp yang dihasilkan secara otomatis saat proyek dibuat menjadi index.xhtml.
mv index.jsp index.xhtml
Membuat halaman web dasar untuk JSF
Hapus semua konten yang dijelaskan dalam index.xhtml dan salin kode berikut:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Input Value Counter Sample</title>
</h:head>
<h:body>
<h:form>
<p:outputLabel value="Basic" /><br />
<p:inputText value="#{indexcontroller.inputValue}" /><br />
<p:commandButton update="ajaxUpdateText" value="Submit" action="#{indexcontroller.submitButtonAction()}" />
<br />
<p:outputLabel id="ajaxUpdateText" value="Input Value: #{indexcontroller.inputValue}" /><br />
</h:form>
</h:body>
</html>
Membuat bean cadangan JSF
Selanjutnya, buat bean backing untuk mengimplementasikan pemrosesan back-end sisi server. Buat direktori baru untuk paket Java Anda, yang akan Anda gunakan untuk membuat kacang cadangan di src/main bawah direktori.
mkdir src/main/java
mkdir src/main/java/com
mkdir src/main/java/com/microsoft
mkdir src/main/java/com/microsoft/azure
mkdir src/main/java/com/microsoft/azure/samples
Kemudian buat file IndexController.java, dan salin dan tempel kode kacang cadangan JSF yang mengikuti:
package com.microsoft.azure.samples;
import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable{
private static final long serialVersionUID = 8485377386286855408L;
@Setter @Getter
private String inputValue;
private int counter;
public void submitButtonAction(){
inputValue = inputValue + " : " + counter;
counter++;
}
}
Tindakan terakhir ini menyelesaikan program Anda. Struktur direktori setelah mengimplementasikan program adalah sebagai berikut:
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
Jalankan di lingkungan Tomcat lokal
Jika Anda menginstal Tomcat 9.0.x di lingkungan lokal Anda, lanjutkan ke langkah berikutnya. Jika tidak, lanjutkan ke bagian berikutnya.
Kompilasi kode sumber dan jalankan di lingkungan Tomcat yang diinstal secara lokal. Jalankan perintah berikut.
Kompilasi dan paket proyek Java
Jalankan perintah berikut untuk mengkompilasi kode:
mvn clean package
Salin artefak ke direktori penyebaran di Tomcat
Salin file perang artefak ke direktori di Tomcat"
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
Memulai server Tomcat
Memulai server Tomcat.
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
Setelah memulai Tomcat, telusuri http://localhost:8080/azure-javaweb-app/ dan Anda akan melihat layar berikut:
Anda berhasil menjalankan aplikasi web JSF di lingkungan Tomcat lokal Anda.