新規プロジェクト立ち上げ~接続確認

今回はJSP、Servletを使ってWebアプリケーションの制作をしていきます。
動的Webプロジェクト(JSP、Servlet)の作成方法と、接続確認について説明します。

接続確認がなぜ必要かというと…
アプリケーションの制作に本格的に入っていく前に、接続を確認し、しっかり動くか確かめるためです。

接続確認対象は以下の通りです。

接続確認対象

• JSPからServlet呼び出し(データ渡し)
• CSS（適応されるか確認）
• JS（コンソールログに出力されるか確認）
• MySQL接続確認

プロジェクト立ち上げの後に1つ1つ見ていきましょう。

Eclipseで動的Webプロジェクトを作成

まず、動的Webプロジェクトの作成をします。

ファイルメニュー→「新規」→「動的Webプロジェクト」を選択します。

※「動的Webプロジェクト」が表示されない場合は、パースペクティブが「Java EE」が選択されていない可能性があります。

プロジェクト名をつけて、完了します。

プロジェクトができたのを確認出来たら動的Webプロジェクトをサーバーに追加し実行できるようにします。

※サーバービューにサーバーがない場合は、先にアプリケーションサーバー追加する必要があります。

使用可能のところから先ほど作成したプロジェクトを選択し→「追加」します。
構成済みの方に入れ、完了します。

追加した動的Webプロジェクトを有効にするため、サーバーを起動します。

サーバービューのサーバーを選択→「右クリック」→「開始」を選択します（既に起動している場合は「再開」を選択して再起動を行います）。

これで動的Webプロジェクトは完成です。次にJSP、Servletの作成に入ります。

JSP,Servletの作成

JSPとServletを作成していきます。

JSPの作成方法と詳細については以下を参照
JSPって何？〜JSPの基礎を知ろう!!〜

Servletの作成方法
ファイルメニュー→「新規」→「サーブレット」を選択します。

Javaパッケージとクラス名を決めたら完了します。

今回のサーブレット名はMainservletにしました。

Webアノテーションについて

＠WebServlet("/URLパターン")
http://<サーバー名>/<アプリケーション名>/

WebServletアノテーションの中身の文字列がURLの最後に追加される。

例（上記のプロジェクトの場合）

@WebServlet("/Mainservlet")

http://localhost:8090/ConnectSample/Mainservlet

URLパターンの中の文字列は自由に設定できる。

@WebServlet("/")

例えば上のようにアノテーションの中身を変えるとそのサーブレットがエントリーポイントになる。

接続確認

JSPからServlet呼び出し(データ渡し)

index.jspのリンクからSecondservletを呼び出す

Secondservlet

サーバーで実行

リンクを押すと…
以下のような結果が出たのでJSPからServlet呼び出し完了です。

CSS（適応されるか確認）

Webcontentの中にcssフォルダとexam.cssファイルを作成

index.jspに以下のリンクを貼り、cssファイルを読み込む

exam.css

結果h1の色を変えることができました。

JS（コンソールログに出力されるか確認）

Webcontentの中にJSフォルダとexam.jsファイルを作成

index.jspにJSを読み込むリンクを入れます。

exam.js

結果を確認。右クリック検証を選びましょう。

ConsoleのところにConsole.logに入力したものがあれば確認OK

MySQL接続確認

最後にDB接続確認です。
MySQL接続に関してはこちらの記事を参照してください
【Java】MySQLを絶対に接続させたい!!!～JDBCドライバの取得とJARファイル位置について～

これで確認は完了です。