【Java】eclipseを使ってWebアプリを作る

今回の記事ではeclipseを使ってWebアプリケーションを作る方法を解説していきます。この記事を読むことでeclipseを使ってWebアプリを作る基礎の基礎がわかります。なおeclipseが既にインストールしてあることを前提に話を進めていきます。OSはmacOSを使っています。

Webアプリを作るためにはサーブレットとjspを作る必要があります。今回はrequest.jspとresponse.jspという二つのjsp、HelloServletというサーブレットを作ってどんな流れでWebアプリが作られるか解説します。

プロジェクトの作成

まずはeclipseでプロジェクトを作成します。eclipseを起動し、「ファイル」→「新規」→「その他」を選択します。

新しくタブが開くので「Web」の中にある動的Webプロジェクトを選択して「次へ」をクリックします。見つからない時はウィザードに「動的Webプロジェクト」入力すると見つかるはずです。

プロジェクト名を決めます。今回の例では「JavaWebApplicationSample」としましたが、ここは自由に決めてもらって大丈夫です。ターデット・ランタイムはTomcat8(Java8)を選択しました。「完了」をクリックするとパッケージ・エクスプローラーにプロジェクトが作成されます。

request.jsp

Webアプリは基本的にクライアントからサーバーに対してリクエストが送られ、サーバーで処理を行い、クライアントにレスポンスを返すという流れです。この流れを意識してjspやサーブレットを作っていきます。

まずはサーバーに対してリクエストを送るrequest.jspを作成します。プロジェクトを開き、WebContentの上で右クリック→「新規」→「その他」を選択します。

タブが表示されるのでウィザードに「jsp」と入力します。JSPファイルを選択して「次へ」をクリックします。

jspの名前を決めます。今回はrequest.jspとします。「完了」をクリックするとjspファイルファ生成されます。

中身を編集します。簡単に説明すると、フォームをサーブレットに送信します。textNameという名前でクライアントからサーバーにテキストデータを送信します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- ここから下を追加する -->
<!-- クライアントからサーバーにデータを送信する -->
<form method='get' action='HelloServlet'>
        <!-- textNameという名前でテキストをサーバーに送る -->
	<input type="text" name="textName">
        <!-- サーバーにデータを送るためのボタン -->
	<input type="submit" value="送信">
</form>
<!-- ここから上を追加する -->
</body>
</html>

 

サーブレットの作成

次にサーブレットを作成します。先ほど作ったjspから送られてきたデータを受信して加工してクライアントに返却する処理を行います。

サーブレットを作ります。「src」→「新規」→「その他」をクリックします。ウィザードにサーブレットと入力します。

出てきたタブのJavaパッケージに「sample」と入力します。クラス名は「HelloServlet」とします。入力が終わったら「完了」をクリックしてください。

HelloServletが作成されます。doGetメソッドとdePostメソッドがあると思います。今回はdoGetメソッドの中身を変更します。中の処理はrequest.jspから送られてきたテキストを取得し、送られてきたテキストに「world」を追加してresponse.jspをクライアントで表示します。

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // request.jspから送られてきたテキストを受け取りtextという変数に入れる
	String text = request.getParameter("textName");
        // 送られてきたテキストにworld!を追加する
	text += "world!";
        // response.jspで文字列を取得するための準備
	request.setAttribute("afterServlet", text);

        // request.jspを表示する
	request.getRequestDispatcher("response.jsp").forward(request, response);
}

response.jspの作成

response.jspを作成します。request.jspと同じ方法でjspを作成し、中身を以下のように編集します。処理内容としてはサーブレットから送られてきたテキストを取得して画面に表示しています。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- ここから追加1 -->
<%
// サーブレットから送られてきたテキストを受け取る
String afterText = (String)request.getAttribute("afterServlet");
%>
<!-- ここまで追加1 -->
<body>
<!-- ここから追加2 -->
<!-- 画面に表示する -->
<%=afterText %>
<!-- ここまで追加2 -->
</body>
</html>

 

実行してみる

request.jspを右クリック→実行→サーバーで実行をクリックします。

Tomcat8を選択して「完了」クリックするとサーバーが立ち上がります。Chrome等のブラウザで「http://localhost:8080/JavaWebApplicationSample/request.jsp」にアクセスするとテキスボックスが表示されます。

テキストボックスに文字を入力して送信ボタンを押してみましょう。今回の例では「hello」と入力してみました。すると画面遷移し、「helloworld!」と表示されます。

以上がeclipseを使ってWebアプリを作成する方法です。

私はプログラミング学習はUdemyで行うのが以下のような理由で圧倒的におすすめです。

  • 動画で好きなときに学べる
  • 一流のエンジニアから教えてもらえる
  • 好きな技術を体系的に学べる
  • 実際に手を動かしながら学ぶことができる
  • セール時であれば1500円〜2000円ほどで購入できる(大半の技術書より安い)
  • 講座自体がアップデートされていくので情報が古くなりにくい
  • UdemyにはJava x MySQLでWebアプリの作り方が学べる講座 もあるので興味がある方は一度チェックしてみてください!

    また無料でJavaのWebアプリ開発が学べるプログラミングスクールもあります!説明会も行っているので、一度参加してJavaを学んでみるのもオススメです!

    コメント

    タイトルとURLをコピーしました