Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@MuAuan(ムー ウワン)

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

Last updated at Posted at 2020-04-23

全くの初心者なのでいい加減なこと書くかもしれませんが、ご容赦ください。
今回はちょっとJSP+Servletというのをやってみようと思ってやったので、簡単なうちに分かったことをまとめておこうと思います。
ほぼ参考のとおり作成してそこからの話を書きます。
【参考】
①JSP & Servlet 入門
###やったこと
・eclipseのインストール
・簡単なのを作る
・日本語入力対応
・画像表示
・コードを追加
###・eclipseのインストール
最近のバージョンもありますが、参考のhttps://ftp.jaist.ac.jp/pub/mergedoc/pleiades/4.6/pleiades-4.6.3-java-win-64bit-jre_20170422.zipを解説のとおり、Windows10にインストールしました。（以下〇番号は上記参考から引用です）
①　C:¥app などのフォルダを作成
②　ダウンロードしたzipファイルを移動
③　ファイル名を pleiades-4.6.3.zip に変更
④　ZIPファイルを展開
⑤　展開したフォルダ内の pleiades を C:¥app に移動
・\app\pleiades\eclipse配下のディレクトリでeclipse.exeをダブルクリックすると起動する。起動時workspaceはデフォルトでOK
・タスクバーにピン止めする。右クリックして「タスクバーにピン止めする」をクリック
【参考】
・Eclipseの超基本的な使い方
###・簡単なのを作る
上記の参考①の一番簡単なものを作ってみます。
これでディレクトリ構造や動かし方が分かります。
①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アプリケーションの設定（アノテーション）※サンプルプログラム付き

/**
 * Servlet implementation class HelloSample
 */
@WebServlet("/HelloSample")
public class HelloSample extends HttpServlet {
	private static final long serialVersionUID = 1L;

そして、コンストラクターで、起動したときこれが最初に実行されるんでしょうね。何もしていないようです。

    /**
     * @see HttpServlet#HttpServlet()
     */
    public HelloSample() {
        super();
        // TODO Auto-generated constructor stub
    }

次に、doGetですね。これが(request, response)で何かとやりとりするんですね。

	/**
	 * @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()のみで、この関数を呼び出して（実行して）います。

	/**
	 * @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が動いて、

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
どうやって動いているか今一つ理解できませんが、
．．．
どうやらそれぞれ勝手に動ていて、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に以下を記述します。

	/**
	 * @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に以下のコードを追記する。

	    // 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に代入し、それを標準出力に出力している。

	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は以下のように書き換える

	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は以下のとおり

	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が渡されたことが分かります。
####一方、上のコードの場合、日本語もちゃんと表示してくれています。
むーうわんも無事に表示されました。
これは、以下のコードで文字コード指定しているからです。
これを外してみると、文字化けが発生します。

        // 文字コードの指定
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    request.setAttribute("userName", name);

また、以下のコードでも文字化け解消できます。
しかし、参考によれば、今は上記のコードでできるので以下は推奨されない古いコードのようです。
【参考】
・JSP/Servletのパラメータの受け渡しが文字化けしてうまくいきません。

	    String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");
	    request.setAttribute("userName", name);

###・画像表示
次は、味気ないので画像を表示したいと思います。
しかし、割と例がないんですね。ということでどうにかできましたが…
参考をまるまる読んでどうにかです。
【参考】
・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
これであとは画像渡しとかやりたいけど、。。。まだまだ力不足でした。
###まとめ
・JSP+Servletで遊んでみた
・日本語と画像表示までできた

・画像を自由に。。。物体運動描画をやってみたい
###コードは以下に置いた
・JSP-Servlet/HelloSample.java
・JSP-Servlet/index.jsp

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?