【JSP+Servlet入門】ちょっと遊んでみた♬

全くの初心者なのでいい加減なこと書くかもしれませんが、ご容赦ください。
今回はちょっとJSP+Servletというのをやってみようと思ってやったので、簡単なうちに分かったことをまとめておこうと思います。
ほぼ参考のとおり作成してそこからの話を書きます。
【参考】
①[JSP & Servlet 入門](https://qiita.com/Kazunori-Kimura/items/a15a011485ac92074d6f)
###やったこと
・eclipseのインストール
・簡単なのを作る
・日本語入力対応
・画像表示
・コードを追加
###・eclipseのインストール
最近のバージョンもありますが、参考の[https://ftp.jaist.ac.jp/pub/mergedoc/pleiades/4.6/pleiades-4.6.3-java-win-64bit-jre_20170422.zip](https://mergedoc.osdn.jp/index.html#/pleiades_distros4.6.html)を解説のとおり、Windows10にインストールしました。（以下〇番号は上記参考から引用です）
①　C:¥app などのフォルダを作成
②　ダウンロードしたzipファイルを移動
③　ファイル名を pleiades-4.6.3.zip に変更
④　ZIPファイルを展開
⑤　展開したフォルダ内の pleiades を C:¥app に移動
・\app\pleiades\eclipse配下のディレクトリでeclipse.exeをダブルクリックすると起動する。起動時workspaceはデフォルトでOK
・タスクバーにピン止めする。右クリックして「タスクバーにピン止めする」をクリック
【参考】
・[Eclipseの超基本的な使い方](https://qiita.com/Kazunori-Kimura/items/aad2366531502a1da618)
###・簡単なのを作る
上記の参考①の一番簡単なものを作ってみます。
これでディレクトリ構造や動かし方が分かります。
①eclipseを起動すると、パッケージ・エックスプローラーが左上にあります
　この領域（四角の中）で右クリックすると...()内の順に遷移して、
・動的Webプロジェクトを作成します（右クリックー新規ーその他ー動的Webプロジェクトー次へ）
・プロジェクト名；sampleWeb
・ターゲットランタイム；Tomcat8(Java8)
と入力するとsampleWebプロジェクトが作成できます。
②今度はsrcを右クリックして、（新規ーその他ーサーブレットー次へ）
・Javaパッケージ；sample.controller
・クラス名；HelloSample.java
と入力すると、servlet;sample.controllerが作成できます。
これで一番簡単なservletが出来たようです。
####起動してみます
sampleWebを右クリックー実行ー1サーバーで実行をクリックすると．．．
URL;http://localhost:8080/sampleWeb/HelloSample
で以下が実行されているのが分かります。
普通のブラウザで、上記のURLを代入してリターンしても動きました。

```
Served at: /sampleWeb
```
コードは以下のとおり
スケルトンだけど、これで動きました。
※初心者なので解説できないが、一応コード見ていきます
最初はpackage名を宣言して、Lib；こんなの使うんですね。
なんとなく名前から分かる気がします。

```HelloSample.py

package sample.controller;

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;
```
次に、@WebServlet("/HelloSample")だよというアノテーションがあります。
コメントと同時に、WebServlet("/HelloSample")のマッピングをシステムに知らせているそうです。
参考②から引用です。
「アノテーションとは、プログラムの一部ではないけれど、プログラムについての情報を提供するものである。サーブレットのプログラミングでは、アノテーションによってURLパスとサーブレットとのマッピング情報を宣言することができる。
Java EEの最新のバージョンでは、マッピングのためにweb.xmlを使わなくてもアノテーションを使うことができる。web.xmlを使うか、アノテーションを使うかは選択できる。」
※詳細は以下の参考参照

【参考】
②[【Java & Tomcat】Webアプリケーションの設定（アノテーション）※サンプルプログラム付き](https://eng-entrance.com/servlet-web-annotation)

```py
/**
 * Servlet implementation class HelloSample
 */
@WebServlet("/HelloSample")
public class HelloSample extends HttpServlet {
	private static final long serialVersionUID = 1L;
```
そして、コンストラクターで、起動したときこれが最初に実行されるんでしょうね。何もしていないようです。

```py
    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloSample() {
        super();
        // TODO Auto-generated constructor stub
    }
```
次に、doGetですね。これが(request, response)で何かとやりとりするんですね。

```py
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}
```
次に、doPostがありました。これも(request, response)で何かとやり取りするんですね。同じじゃん？？
記述されている関数がdoGet()のみで、この関数を呼び出して（実行して）います。

```py
	/**
	 * @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);
	}
}
```
つまり、このサーブレットは起動して、doGetが動いて、

```py
response.getWriter().append("Served at: ").append(request.getContextPath());
```
が動いたんですね。
####・Jsp-Servletを作ってみる
やはり、Jsp作らないと題名に反するので、作ります。
これもすべて上記の参考①のとおりです。
・index.jspを作成する（WebContentを右クリックー新規ーその他ーjspファイル
ファイル名；index.jsp
と入力して完了
これでindex.jspがWebContentの直下に作成できました。
コードは以下のとおり
bodyに時刻を表示する<%= new java.util.Date() %>を追加しています。
また、TitleをHello, Worldとしています。

```.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>
    <%= new java.util.Date() %>
</body>
</html>
```
これで先ほどと同じように動かしてみます。
以下が、
http://localhost:8080/sampleWeb/
に出力されました。

```
Wed Apr 22 21:55:03 JST 2020 
```
ディレクトリ構成は以下のとおりになっています。
![package_exp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/55af6771-d2e5-08a7-8100-659b5f0b585d.jpeg)
どうやって動いているか今一つ理解できませんが、
．．．
どうやらそれぞれ勝手に動ていて、http://localhost:8080/sampleWeb/
index.jspが呼ばれて時刻表示したようです。
一方、http://localhost:8080/sampleWeb/HelloSampleでは、Served at: /sampleWeb　が表示しています。
お互いやり取りしないと題名にはならないようです。
###・日本語入力対応
まず、jsp-servelet間のやり取りをするために、外から見えないようにindex.jspをWEB-INF配下に移動させます。
・WEB-INFの配下にviewフォルダを作成（WEB-INFを右クリックー新規ーフォルダー次へでviewと入力-完了）して、そこへindex.jspをドラッグし、ドロップすると移動します。
####・HelloSampleからJSPに情報を渡す
「クライアント (ブラウザ) から HelloSample にリクエストがあると、 doGet メソッドが実行されます。」
ということで、HelloSample.javaのdoGetに以下を記述します。

```py
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    String view = "/WEB-INF/view/index.jsp";
	    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
	    dispatcher.forward(request, response);
	}
```
これでHelloSample.javaを書き換えたので、サーバー再起動を行います。前出の参考①はウィンドウから。。という説明ですが、ここではsampleWebを右クリックー実行ー1サーバーで実行ー完了とすることにより、再実行が出来ます。
これで、以下の表示が出ますが、これで再起動成功です。
実際、http://localhost:8080/sampleWeb/HelloSample
をurlに入れてリターンすると前回の時刻が表示され、index.jspが呼び出されて表示されたことが分かります。

```
HTTPステータス 404 - /sampleWeb/
type ステータスレポート
メッセージ /sampleWeb/
説明 The requested resource is not available.
Apache Tomcat/8.0.43
```
####次に適当な文字列をHelloSample.javaから、index.jspに渡してそれを表示する。
上記のdoGetに以下のコードを追記する。

```py
	    // JSPに適当な文字列を渡す
	    request.setAttribute("foo", "bar");
```
そして、index.jspは以下のように受け取る。

```.jsp
	<%= request.getAttribute("foo") %>
```
この結果、上記と同じようにサーバー再起動して、
http://localhost:8080/sampleWeb/HelloSample
をブラウザで見ると、以下が表示されるのが分かる。
Thu Apr 23 17:35:06 JST 2020 bar
つまり、後ろに配置したので、時刻の後ろにbarが表示されている。

####もう少し、複雑な渡し方をする
まず、受け取る側index.jspを以下のように記載する。
`<body>`を記載すると以下のとおり、
これまでの追加をそのまま残しています。

```.jsp
<body>
	<%= new java.util.Date() %>
	<%= request.getAttribute("foo") %>
	<form method="post" action="./HelloSample">
        何か入力して: <input type="text" name="hoge">
        <button type="submit">送信</button>
    </form>
</body>
```
次に、受け取る側は、今度はHelloSample.javaのdoPostで受け取る。
request.getPasrameter("hoge"); 
で値をゲットしてvalueに代入し、それを標準出力に出力している。

```py
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    // formから値を取得
	    String value = request.getParameter("hoge");
	    System.out.println(value);
       	doGet(request, response);
	}
```

####次は、JSP-Servlet-JSPという連携アプリは以下のとおり
出来るだけ今までのコードは消さずに書くと、

```.jsp
<body>
	<%= new java.util.Date() %>
	<%= request.getAttribute("foo") %><br/>
	<%= request.getAttribute("userName") %>
	<form method="post" action="./HelloSample">
        何か入力して: <input type="text" name="name">
        <button type="submit">送信</button>
    </form>
</body>
```

Servlet側、HelloSample.javaのdoPostは以下のように書き換える

```py
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    // 文字コードの指定
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    request.setAttribute("userName", name);

	    System.out.println(name);
        doGet(request, response);
	}
```
さらに、doGetは以下のとおり

```py
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    // JSPに適当な文字列を渡す
		request.setAttribute("foo", "bar");
	    String name = (String) request.getAttribute("userName");
		if (name == null || "".equals(name)) {
	        request.setAttribute("userName", "Guest");
	    }

	    String view = "/WEB-INF/view/index.jsp";
	    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
	    dispatcher.forward(request, response);
	}
```
まず、Servlet;HelloSample.javaを１サーバーで動かす。
そして、以下のurlをブラウザで見ると
http://localhost:8080/sampleWeb/

```
HTTPステータス 404 - /sampleWeb/
type ステータスレポート
メッセージ /sampleWeb/
説明 The requested resource is not available.
Apache Tomcat/8.0.43
```
そして、
http://localhost:8080/sampleWeb/HelloSample
以下のイメージが表れます。

```
Thu Apr 23 21:35:55 JST 2020 bar
Guest
何か入力して:　　　　　　 送信
```
以下のように入力して送信を押すと、

```
Thu Apr 23 21:35:55 JST 2020 bar
Guest
何か入力して:MuAuan　　　 送信
```
以下のようにGuestがMuAuanに変化して、

```
Thu Apr 23 21:35:55 JST 2020 bar
MuAuan
何か入力して:　　　　　　 送信
```
標準出力にMuAuanが出力されます。
ということで、JSP-Servlet-JSPとMuAuanが渡されたことが分かります。
####一方、上のコードの場合、日本語もちゃんと表示してくれています。
むーうわんも無事に表示されました。
これは、以下のコードで文字コード指定しているからです。
これを外してみると、文字化けが発生します。

```py
        // 文字コードの指定
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    request.setAttribute("userName", name);
```
また、以下のコードでも文字化け解消できます。
しかし、参考によれば、今は上記のコードでできるので以下は推奨されない古いコードのようです。
【参考】
・[JSP/Servletのパラメータの受け渡しが文字化けしてうまくいきません。](https://oshiete.goo.ne.jp/qa/4412385.html)

```py
	    String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");
	    request.setAttribute("userName", name);
```
###・画像表示
次は、味気ないので画像を表示したいと思います。
しかし、割と例がないんですね。ということでどうにかできましたが…
参考をまるまる読んでどうにかです。
【参考】
・[Insert image into jsp page](https://stackoverflow.com/questions/44288844/insert-image-into-jsp-page)
####画像ファイルのプロジェクトへの追加
・WebContentを右クリックー新規－フォルダーフォルダ名；mediaで完了でmediaという画像格納フォルダを追加
・このフォルダに表示したい画像ファイルを追加していきます
　mediaを右クリックー新規－ファイルー拡張－ファイルシステム内のファイルにリンクのチェックー参照ー画像ファイルをクリックー開くー完了
とすると、一個の画像ファイルがフォルダに追加されます。
####JSPに表示する
最後に
`<img src="${pageContext.request.contextPath}/media/image.png" alt="Tokyo">`
を記載すると、画像ファイルが表示された。

```
<body>
	<%= new java.util.Date() %>
	<%= request.getAttribute("foo") %><br/>
	<%= request.getAttribute("userName") %>
	<form method="post" action="./HelloSample">
        何か入力して: <input type="text" name="name">
        <button type="submit">送信</button>
    </form>
	<br/>
    <img src="${pageContext.request.contextPath}/media/image.png" alt="Tokyo">
</body>
```
![image_draw_in_jsp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/da3df376-48dd-10c4-b238-c4763cc704bc.jpeg)
これであとは画像渡しとかやりたいけど、。。。まだまだ力不足でした。
###まとめ
・JSP+Servletで遊んでみた
・日本語と画像表示までできた

・画像を自由に。。。物体運動描画をやってみたい
###コードは以下に置いた
・[JSP-Servlet/HelloSample.java](https://github.com/MuAuan/JSP-Servlet/blob/master/HelloSample.java)
・[JSP-Servlet/index.jsp](https://github.com/MuAuan/JSP-Servlet/blob/master/index.jsp)