Tomcatが動作している場所の確認方法
「サーバー」ビューにある「Tomcat8サーバー」をダブルクリックする。
「サーバー・ロケーション」が、「サーバー・パス」に表示されているところが、サーバーが動作している場所。
Webアプリが動作しているのは、「サーバー・パス」内の「デプロイ・パス」。
Java/TDD/SpringMVC/Backlog/Gitを使ったWebアプリ開発
Tomcatが動作している場所の確認方法
「サーバー」ビューにある「Tomcat8サーバー」をダブルクリックする。
「サーバー・ロケーション」が、「サーバー・パス」に表示されているところが、サーバーが動作している場所。
Webアプリが動作しているのは、「サーバー・パス」内の「デプロイ・パス」。
アプリ内のリンク先URL
アプリ内のリンク先URLを記述しているところに「http://localhost:8080/アプリ名/…」と書いているところがあるが、ホスト名やポート番号は書かないこと。
実際にどこかのサーバーに配備した時に、そのリンクをクリックしたらユーザーのパソコンのWebサーバーにアクセスしようとするために、動作しなくなる。
<!-- よくない例 --> <a href="http://localhost:8080/appname/hoge...">リンク先タイトル</a> <!-- 望ましい書き方 --> <a href="/${request.contextPath}/hoge...">リンク先タイトル</a>
複数の画面で共通に表示したい内容がある場合
ヘッダーやフッターなど、複数の画面で共通に表示したい内容がある場合は、共通部分だけを記述したJSPファイルを作成し、そのファイルをインクルードするとよい。
<body> <jsp:include page="header.jsp" /> ページのコンテンツ <jsp:include page="footer.jsp" /> </body>
Eclipseが生成するJSPはHTML4なので、HTML5対応にするには、以下の部分を変更する。
変更前
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
変更後
<!DOCTYPE html>
EclipseからTomcatを起動しようとすると、「重大: 以前のエラーのためにコンテキストの起動が失敗しました」のような簡単なメッセージだけ表示して起動できないことがある。
Tomcatが起動しないときは、コンソールにエラーの内容を出力して原因を調べるのが良い。
コンソールにログを出力するには、以下の設定を行う。
プロジェクト・エクスプローラのServerにある「ローカルホストのTomcat8…」を右クリックし、[新規]-[ファイル]を選択する。
ファイル名を「logging.properties」とする。
作成した logging.properties ファイルをダブルクリックして編集する。
以下の内容を記述する。
handlers = java.util.logging.ConsoleHandler java.util.logging.ConsoleHandler.level = ALL java.util.logging.ConsoleHandler.formatter = java.util.logging.SimpleFormatter
「ローカルホストのTomcat8…」を右クリックし、[プロパティー]を選択する。
ロケーションが表示されているので全体をコピーする。(例: C:\Users\…Tomcat8-config)
「ローカルホストのTomcat8…」を右クリックし、[実行]-[実行の構成]を選択する。
「引数」タブを選択し、「VM引数」の最後に以下の内容を追加する。
-Djava.util.logging.manager=org.apache.juli.ClassLoaderLogManager -Djava.util.logging.config.file="(ロケーションに表示されていたパス)/logging.properties"
設定を「適用」してTomcatを再起動すれば、コンソールにエラーの内容が表示される。
まずCSSやJavaScriptを保存するためのフォルダをwebappの下に追加する。
外部ファイルを読み込むための設定を mvc-config.xml に追加する。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <context:component-scan base-package="jp.abc"/> <mvc:annotation-driven /> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <!-- Example: a logical view name of 'showMessage' is mapped to '/WEB-INF/jsp/showMessage.jsp' --> <property name="prefix" value="/WEB-INF/view/"/> <property name="suffix" value=".jsp"/> </bean> <mvc:resources mapping="/css/**" location="/css/" /> <mvc:resources mapping="/js/**" location="/js/" /> </beans>
JSPファイルから読み込むには以下のように記述する。
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <html> <head> <meta charset="utf-8"> <title>サンプルのWebアプリですよ</title> <link rel="stylesheet" type="text/css" href="/css/main.css" /> <script type="text/javascript" src="/js/sample.js"></script> </head> <body> <h1>サンプルのWebアプリですよ</h1> </body> </html>
サービスとリポジトリは便利ですが、使わなくてもWebアプリケーションを作れるので、今回はパスします。
興味がある人は自分でやってみてください。
MsgDataエンティティを作成する。
package jp.abc; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.ManyToOne; import javax.persistence.Table; import javax.validation.constraints.NotNull; import org.hibernate.validator.constraints.NotEmpty; @Entity @Table(name = "msgdata") public class MsgData { @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column @NotNull private long id; @Column private String title; @Column(nullable = false) @NotEmpty private String message; @ManyToOne private MyData mydata; public MsgData() { super(); mydata = new MyData(); } public long getId() { return id; } public void setId(long id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public MyData getMydata() { return mydata; } public void setMydata(MyData mydata) { this.mydata = mydata; } }
MyDataを修正する
MyDataに、MsgDataへの参照を追加する。
インスタンス変数を追加したら、Eclipseの[ソース]-[getterおよびsetterの生成]でアクセサメソッドを自動生成する。
package jp.abc; import java.util.List; import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.OneToMany; import javax.persistence.Table; @Entity @Table(name = "mydata") public class MyData { @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column private long id; @Column(length = 50, nullable = false) private String name; @Column(length = 200, nullable = true) private String mail; @Column(nullable = true) private Integer age; @Column(nullable = true) private String memo; @OneToMany(cascade = CascadeType.ALL) @Column(nullable = true) private List<MsgData> msgdatas; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getMail() { return mail; } public void setMail(String mail) { this.mail = mail; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getMemo() { return memo; } public void setMemo(String memo) { this.memo = memo; } public List<MsgData> getMsgdatas() { return msgdatas; } public void setMsgdatas(List<MsgData> msgdatas) { this.msgdatas = msgdatas; } }
MsgDataDaoの用意
MsgDataDaoインタフェースを作成する。
package jp.abc; import java.io.Serializable; import java.util.List; public interface MsgDataDao<T> extends Serializable { public List<T> getAll(); public T findById(long id); public void add(T data); public void update(T data); public void delete(T data); public void delete(long id); }
MsgDataDaoImplクラスを作成する。
テキストの通りに各メソッドに @Override アノテーションをつけるとコンパイルエラーになる。
これは、プロジェクトの設定で Javaコンパイラのバージョンが1.5になっているため。
1.6に変更すれば @Override アノテーションのコンパイルエラーは消える。
同時に、プロジェクト・ファセットの設定でバージョンを合わせる必要がある。
package jp.abc; import java.util.List; import javax.persistence.EntityManager; import javax.persistence.EntityManagerFactory; import javax.persistence.EntityTransaction; import javax.persistence.Persistence; import javax.persistence.Query; public class MsgDataDaoImpl implements MsgDataDao<MsgData> { private static EntityManagerFactory factory = Persistence.createEntityManagerFactory("persistenceUnit"); @Override public List<MsgData> getAll() { EntityManager manager = factory.createEntityManager(); List<MsgData> list = null; Query q = manager.createQuery("from MsgData"); list = q.getResultList(); manager.close(); return list; } @Override public MsgData findById(long id) { EntityManager manager = factory.createEntityManager(); Query q = manager.createQuery("from MsgData where id = " + id); return (MsgData)q.getSingleResult(); } @Override public void add(MsgData data) { EntityManager manager = factory.createEntityManager(); EntityTransaction tx = manager.getTransaction(); tx.begin(); manager.persist(data); tx.commit(); manager.close(); } @Override public void update(MsgData data) { EntityManager manager = factory.createEntityManager(); EntityTransaction tx = manager.getTransaction(); tx.begin(); manager.merge(data); tx.commit(); manager.close(); } @Override public void delete(MsgData data) { EntityManager manager = factory.createEntityManager(); EntityTransaction tx = manager.getTransaction(); tx.begin(); MsgData entity = manager.merge(data); manager.remove(entity); tx.commit(); manager.close(); } @Override public void delete(long id) { delete(findById(id)); } }
ビューテンプレートの用意
[新規]-[JSPファイル]でJSPファイルを作成する。
ファイル名はテキストの通り「showMsgData.jsp」とする。
<!DOCTYPE html> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>${title}</title> <style> h1 { font-size: 16pt; background-color: #ccccff; padding: 3px;} p { color: #000066; } </style> </head> <body> <h1>${title}</h1> <p>${message}</p> <table> <form:form modelAttribute="msgdata"> <tr> <td></td> <td><form:errors path="*" /></td> </tr> <tr> <td><form:label path="title">タイトル</form:label></td> <td><form:input path="title" size="20" /></td> </tr> <tr> <td><form:label path="message">メッセージ</form:label></td> <td><form:textarea path="message" cols="20" rows="5" /></td> </tr> <tr> <td><form:label path="mydata">MYDATA_ID</form:label></td> <td><form:input path="mydata" size="20" /></td> </tr> <tr> <td></td> <td><input type="submit" /></td> </tr> </form:form> </table> <hr /> <c:if test="${datalist != null}"> <table> <tr> <th>ID</th><th>投稿者</th><th>タイトル</th><th>メッセージ</th> </tr> <c:forEach var="obj" items="${datalist}" varStatus="status"> <tr> <td><c:out value="${obj.id}" /></td> <td><c:out value="${obj.mydata.name}" /></td> <td><c:out value="${obj.title}" /></td> <td><c:out value="${obj.message}" /></td> </tr> </c:forEach> </table> </c:if> </body> </html>
コントローラに新しいURL用のメソッドを追加する
@RequestMapping(value = "/msg", method = RequestMethod.GET) public String msg(Model model) { model.addAttribute("title", "Sample"); model.addAttribute("message", "MsgDataのサンプルです。"); MsgData msgdata = new MsgData(); model.addAttribute("msgdata", msgdata); MsgDataDao<MsgData> dao = new MsgDataDaoImpl(); List<MsgData> list = dao.getAll(); model.addAttribute("datalist", list); return "showMsgData"; } @RequestMapping(value = "/msg", method = RequestMethod.POST) public String msgform(@Valid @ModelAttribute MsgData msgdata, Errors result, Model model) { System.out.println("msgform: " + msgdata.getMydata()); if (result.hasErrors()) { model.addAttribute("title", "Sample [ERROR]"); model.addAttribute("message", "値を再チェックしてください。"); return "showMsgData"; } MsgDataDao<MsgData> dao = new MsgDataDaoImpl(); dao.add(msgdata); return "redirect:/msg"; }
POSTするとエラーが発生する。
フォームではMYDATA_IDは単なる文字としての値なので、これをMyDataのインスタンスに変換するための処理が必要になる。
そのために、PropertyEditor を継承するクラス MyDataPropertyEditor を用意する。
package jp.abc; import java.beans.PropertyEditorSupport; public class MyDataPropertyEditor extends PropertyEditorSupport { public String getAsText() { MyData value = (MyData)getValue(); System.out.println("getAsText: " + value); if (value == null) { return ""; } else { return "" + value.getId(); } } public void setAsText(String value) { MyDataDao<MyData> dao = new MyDataDaoImpl(); MyData mydata = (MyData)dao.findById(Long.parseLong(value)); System.out.println("setAsText: " + mydata); setValue(mydata); } }
作成した MyDataPropertyEditor を使用するためのコードをコントローラに追加する。
@Controller public class MyDataConroller { @InitBinder protected void initBinder(HttpServletRequest req, ServletRequestDataBinder binder) throws Exception { binder.registerCustomEditor(MyData.class, new MyDataPropertyEditor()); }
前回は、ServletとJSPを使用した簡単なWebアプリを作成した。
今回は、入力フォームを使用して、サーバー側にユーザーが入力したデータを渡せるようにする。
サーバー側では受け取ったデータをもとにしてデータを加工して応答する。
WebContentの下に form.jsp を作成する。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>入力フォーム</title> </head> <body> <form method="post" action="RequestServ"> //(1)method、actionの指定 <input type="text" name="name1"><br><br> <input type="checkbox" name="vehicle" value="車">車<br> <input type="checkbox" name="vehicle" value="バイク">バイク<br> <input type="checkbox" name="vehicle" value="飛行機">飛行機<br><br> <input type="submit" value="submit"> </form> </body> </html>
入力フォームで入力されたデータを受け取るためのRequestServlet.javaを用意する。
package jp.abc; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class RequestServlet */ @WebServlet("/RequestServlet") public class RequestServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { //(1)エンコード方式の指定 res.setContentType("text/html; charset=UTF-8"); //(2)パラメータのエンコード方式の指定 req.setCharacterEncoding("UTF-8"); //(3)PrintWriterオブジェクトの生成 PrintWriter out = res.getWriter(); out.println("<HTML>"); out.println("<BODY>"); //(4)name1パラメータの取得 out.println(req.getParameter("name1") + "<br>"); //(5)vehicleパラメータの取得 String vehicle[ ] = req.getParameterValues("vehicle"); for (int i = 0; i < vehicle.length; i++ ) { out.println(vehicle[i] + "<br>"); } out.println("</BODY>"); out.println("</HTML>"); } }
入力フォームにラジオボタンを追加する。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>入力フォーム</title> </head> <body> <form method="post" action="RequestServlet"> //(1)method、actionの指定 <input type="text" name="name1"><br><br> <input type="checkbox" name="vehicle" value="車">車<br> <input type="checkbox" name="vehicle" value="バイク">バイク<br> <input type="checkbox" name="vehicle" value="飛行機">飛行機<br><br> <input type="radio" name="性別" value="男" /> 男 <input type="radio" name="性別" value="女" /> 女 <br> <input type="submit" value="submit"> </form> </body> </html>
追加されたラジオボタンのデータをサーブレットで受け取る。
package jp.abc; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class RequestServlet */ @WebServlet("/RequestServlet") public class RequestServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { //(1)エンコード方式の指定 res.setContentType("text/html; charset=UTF-8"); //(2)パラメータのエンコード方式の指定 req.setCharacterEncoding("UTF-8"); //(3)PrintWriterオブジェクトの生成 PrintWriter out = res.getWriter(); out.println("<HTML>"); out.println("<BODY>"); //(4)name1パラメータの取得 out.println(req.getParameter("name1") + "<br>"); //(5)vehicleパラメータの取得 String vehicle[ ] = req.getParameterValues("vehicle"); for (int i = 0; i < vehicle.length; i++ ) { out.println(vehicle[i] + "<br>"); } String sex = req.getParameter("性別"); out.println(sex + "<br>"); out.println("</BODY>"); out.println("</HTML>"); } }
select要素によるメニューを追加する。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>入力フォーム</title> </head> <body> <form method="post" action="RequestServlet"> //(1)method、actionの指定 <input type="text" name="name1"><br><br> <input type="checkbox" name="vehicle" value="車">車<br> <input type="checkbox" name="vehicle" value="バイク">バイク<br> <input type="checkbox" name="vehicle" value="飛行機">飛行機<br> <br> <input type="radio" name="性別" value="男" /> 男 <input type="radio" name="性別" value="女" /> 女 <br> 好きな果物: <select name="好きな果物"> <option>りんご</option> <option>みかん</option> <option>バナナ</option> <option>パイナップル</option> </select> <br> <br> <input type="submit" value="submit"> </form> </body> </html>
追加されたSELECT要素のデータをサーブレットで受け取る。
package jp.abc; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class RequestServlet */ @WebServlet("/RequestServlet") public class RequestServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { //(1)エンコード方式の指定 res.setContentType("text/html; charset=UTF-8"); //(2)パラメータのエンコード方式の指定 req.setCharacterEncoding("UTF-8"); //(3)PrintWriterオブジェクトの生成 PrintWriter out = res.getWriter(); out.println("<HTML>"); out.println("<BODY>"); //(4)name1パラメータの取得 out.println(req.getParameter("name1") + "<br>"); //(5)vehicleパラメータの取得 String vehicle[ ] = req.getParameterValues("vehicle"); for (int i = 0; i < vehicle.length; i++ ) { out.println(vehicle[i] + "<br>"); } String sex = req.getParameter("性別"); out.println(sex + "<br>"); String fruit = req.getParameter("好きな果物"); out.println(fruit + "<br>"); out.println("</BODY>"); out.println("</HTML>"); } }
診断メーカーみたいなのを作ってみる。
まずは診断する名前を入力するJSPを作成する。
shindan.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>診断</title> </head> <body> <form method="post" action="ShindanServlet"> 診断したい名前を入れてください。<br> <input type="text" name="name"><br> <input type="submit" value="診断"> </form> </body> </html>
http://localhost:8080/tomcat/shindan.jsp にアクセスすると入力フォームが表示される。
診断を行うサーブレットを作成する。
ShindanServlet.java
package jp.abc; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class ShindanServlet */ @WebServlet("/ShindanServlet") public class ShindanServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
tomcat を再起動してshindan.jspの診断ボタンを押すと、ShindanServletに遷移する。
処理を記述してないので、画面は真っ白になる。
診断結果を表示するJSPを作成する。
kekka.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>診断結果</title> </head> <body> ここに診断結果を表示する予定 </body> </html>
ShindanServletからkekka.jspにフォワードする。
package jp.abc; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class ShindanServlet */ @WebServlet("/ShindanServlet") public class ShindanServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { RequestDispatcher rd = request.getRequestDispatcher("kekka.jsp"); rd.forward(request, response); } }
shindan.jsp で診断ボタンを押すと、kekka.jspの内容が表示される。
診断の内容を変更して、入力フィールドを追加する。
「○○さんの○○度は○○%です」
のような診断結果を出すようにする。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>診断</title> </head> <body> <form method="post" action="ShindanServlet"> <input type="text" name="name">さんの<br> <input type="text" name="type">度を診断します<br> <input type="submit" value="診断"> </form> </body> </html>
ShindanServletの中で0~100までのパーセント値を求められるようにする。
package jp.abc; import java.io.IOException; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class ShindanServlet */ @WebServlet("/ShindanServlet") public class ShindanServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html; charset=UTF-8"); request.setCharacterEncoding("UTF-8"); String name = request.getParameter("name"); request.setAttribute("name", name); String t = request.getParameter("type"); request.setAttribute("type", t); String s = name + t; int h = Math.abs(s.hashCode()); h = h % 101; request.setAttribute("percent", h); RequestDispatcher rd = request.getRequestDispatcher("kekka.jsp"); rd.forward(request, response); } }
kekka.jspを修正する。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>診断結果</title> </head> <body> ${name} さんの ${type} 度は、${percent}%です。<br> </body> </html>
WebアプリケーションとはどういうものなのかをPowerPointで説明。
Eclipseで[新規]-[プロジェクト]を選択
Webの下にある[動的Webプロジェクト]を選択
プロジェクト名: tomcat
ターゲットランタイム: Apache Tomcat v8.0
「次へ」→「次へ」→「完了」でプロジェクトを作成する
Eclipseで[新規]-[その他]-[サーブレット]を選択
パッケージ名は jp.abc とする
クラス名は HelloWorldServlet とする
Eclipseで[Java EE]パースペクティブを選択すると、画面の下に[サーバー]タブが表示される。
新規サーバーを作成する。
Tomcat8サーバーを作成し、tomcat プロジェクトを追加してサーバーを開始する。
ツールバーの[Webブラウザーを開く]をクリックし、以下のURLを入力する。
http://localhost:8080/tomcat/HelloWorldServlet
HelloWorldServletを変更してブラウザ上に日時を表示してみる。
package jp.abc; import java.io.IOException; import java.io.Writer; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class HelloWorldServlet */ @WebServlet("/HelloWorldServlet") public class HelloWorldServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public HelloWorldServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Writer w = response.getWriter(); w.append("<html>"); w.append("<body>"); w.append(new Date().toString()); w.append("<p>"); w.append("Served at: ").append(request.getContextPath()); w.append("<br />"); w.append("Hello World!"); w.append("</p>"); w.append("</body>"); w.append("</html>"); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
WebContent フォルダを右クリックし[新規]-[JSPファイル]を選択する。
ファイル名を hello.jsp とする。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>JSPはTomcatによって、自動的にServletに変換されます。</p> </body> </html>
以下のURLにアクセスするとJSPの内容が表示される。
http://localhost:8080/tomcat/hello.jsp
JSTLはJavaServerPages Standard Tag Libraryの略で、よく使われる便利なタグが用意されている。
\\kgakusei1\share\澤田\jstl\lib から Eclipseの WebContent – WEB-INF – lib フォルダにコピーする。
JSPの先頭にJSTLを使うためのコードを追加する。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello World</title>
スクリプトレットでデータを用意し、requestに設定して c:forEach ループで利用してみる。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page import="java.util.*" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>JSPはTomcatによって、自動的にServletに変換されます。</p> <%="TEST!!" %><BR> <%=(20+30)*10 %><BR> <%=new java.util.Date() %><BR> <%-- JSPコメント --%> <!-- HTMLコメント --> ${request.method} <%=request.getMethod() %> <br /> <% List<String> list = new ArrayList<>(); list.add("キリン"); list.add("サッポロ"); list.add("アサヒ"); request.setAttribute("data", list); %> <c:forEach var="s" items="${data}" varStatus="status"> ${status.index} : ${s} <br /> </c:forEach> </body> </html>
Servletで作成したデータをJSPで表示する。
DispatchServletを作成する。
package jp.abc; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class DispatchServlet */ @WebServlet("/DispatchServlet") public class DispatchServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public DispatchServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<String> list = new ArrayList<>(); list.add("ドラゴンクエスト"); list.add("ゼルダの伝説"); list.add("ファイナルファンタジー"); request.setAttribute("game", list); RequestDispatcher rd = request.getRequestDispatcher("hello.jsp"); rd.forward(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
hello.jsp 側で forEach を増やす。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page import="java.util.*" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>JSPはTomcatによって、自動的にServletに変換されます。</p> <%="TEST!!" %><BR> <%=(20+30)*10 %><BR> <%=new java.util.Date() %><BR> <%-- JSPコメント --%> <!-- HTMLコメント --> ${request.method} <%=request.getMethod() %> <br /> <% List<String> list = new ArrayList<>(); list.add("キリン"); list.add("サッポロ"); list.add("アサヒ"); request.setAttribute("data", list); %> <c:forEach var="s" items="${data}" varStatus="status"> ${status.index} : ${s} <br /> </c:forEach> <c:forEach var="s" items="${game}" varStatus="status"> ${status.index} : ${s} <br /> </c:forEach> </body> </html>