【JSP、Servlet】新規プロジェクトを立ち上げ、接続確認をする!!

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

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

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

**接続確認対象**

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

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

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

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/517c7434-06d8-198b-9e67-bfc07292e689.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/0d73b785-a32f-3e18-58e0-539ffcfa067a.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c92f6bd1-49dc-4d79-4c7d-525143dc23bf.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/276cd4c3-bab5-75ad-f311-93316c063233.png)

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

サーバービューのサーバーを選択→「右クリック」→「開始」を選択します（既に起動している場合は「再開」を選択して再起動を行います）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/ae7c9a0c-0d35-4c2a-3ccd-4d1f03c2823f.png)

これで動的Webプロジェクトは完成です。次にJSP、Servletの作成に入ります。
#JSP,Servletの作成
JSPとServletを作成していきます。

JSPの作成方法と詳細については以下を参照:point_down_tone2:
[JSPって何？〜JSPの基礎を知ろう!!〜](https://qiita.com/Yuriko-Y/items/06a16dde3d85ec83342b)

**Servletの作成方法**
ファイルメニュー→「新規」→「サーブレット」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/0cb80219-6602-0342-a29c-52472fd0c8b5.png)

Javaパッケージとクラス名を決めたら完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/a7012540-d093-ba6d-f69f-f893a3ceaf48.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/3b66fed8-d176-d108-4471-ef36d137c037.png)

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


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

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

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

```java
@WebServlet("/Mainservlet")

```

```java
http://localhost:8090/ConnectSample/Mainservlet

```

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

```java
@WebServlet("/")

```

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





#接続確認

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/575fad65-f6ad-4c13-9818-e5c0d434a15c.png)

Secondservlet

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/a6193423-de41-eeea-fd78-0628dea9b24f.png)


サーバーで実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/80d00e9e-03f9-d719-2496-df0629d5a523.png)
リンクを押すと…
以下のような結果が出たのでJSPからServlet呼び出し完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/cfab5a83-70d2-e9d4-b922-3205682910f8.png)


###CSS（適応されるか確認）

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/1448bc02-e913-4c49-8906-1724dbb43861.png)

index.jspに以下のリンクを貼り、cssファイルを読み込む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/7489e028-6c5d-c063-aecf-3516bd73193f.png)

exam.css
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/5aa56273-887d-3606-3605-1cbd61e6aa43.png)

結果h1の色を変えることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/951e46f8-f656-89a7-4eb2-99f6c4639752.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/f87c7dcf-062e-a7c7-b291-48f5433624b8.png)

index.jspにJSを読み込むリンクを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/fcfd8d15-f473-be0a-bb87-17947cc29303.png)


exam.js
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/62d2fd6e-8c5c-69a0-52bf-8615e9c9dd51.png)

結果を確認。右クリック検証を選びましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/2417f2ba-cf1b-b467-1790-5a35e72bb01a.png)


ConsoleのところにConsole.logに入力したものがあれば確認OK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/02ea11dc-177f-2bcc-e51d-823d0421c566.png)



###MySQL接続確認

最後にDB接続確認です。
MySQL接続に関してはこちらの記事を参照してください:point_down_tone2:
[【Java】MySQLを絶対に接続させたい!!!～JDBCドライバの取得とJARファイル位置について～](https://qiita.com/Yuriko-Y/items/d4c5cb29780ce0347375)



これで確認は完了です。