Win10上でJavaとmysqlのWebシステム構築手順

#Overview

今回は一般的な開発環境を作ります。

本番のシステムの場合は適切なセキュリティ対策を行うする必要があります。

##概要

- Mysql
  - ダウンロード
  - インストール
  - 設定
- Java
  - Download
  - 展開するフォルダー
- Tomcat
  - ダウンロード
  - 展開するフォルダー
- IDE
  - ダウンロード
  - インストール 
  - 設定など
- テスト
  - サーバーにデプロイ
  - DBと接続

# MYSQL

###ダウンロード

https://dev.mysql.com/downloads/installer/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/d1dd52e4-13da-03cb-dfd8-c80614a0f464.png)

次の画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/f66b3db9-c446-67d0-4d7b-bebb58516e87.png)


ダウンロードしたものをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/30c300fa-a2f8-bf37-15c8-a2d39b2511e7.png)

###インストール手順
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/61fffd07-e5e6-a162-48e6-87a1285d0060.png)
 
そのまま次

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/6225855b-5055-4394-ee6f-2b6b4076cad6.png)

次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/493c350b-ee8d-f7dc-432c-190f4d47e389.png)
 
次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/eda614e1-e7a5-a8dd-1f1a-7d74318a3571.png)

次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/2d6e7bc2-36b9-8413-829e-66164c50647e.png)

次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/ecf2444e-f623-2fe1-257e-2ed39e318247.png)

ルートパスワードを設定、次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/3af5b95c-81c5-7bfe-b9d9-0a52da294e15.png)

次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/1def6946-9993-5495-4eca-74a42c3f3223.png)

Execute ! 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/ff24f133-bc69-333a-2e13-91f0ccba2a4f.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/1588d43e-ddb4-6e45-17bd-132767493fd8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/eca2d8f8-c362-b5b3-7272-0f4804739ced.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/3ce3d33a-66c8-f914-8e38-4139f481fd70.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/871bc581-4719-b9c5-41a2-b48356519b9a.png)

事前に設定されたパスワードを入力し、チェックをクリック。次へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/71a40e65-396a-24fd-76d0-d0adf3dad45b.png)

Executeをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/cf3fd32c-702f-71f3-4013-5657c6fe6959.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/3a0cba0c-2c67-1f8d-172f-f6686a7bba67.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/4179eb5b-8aa2-34b2-0aef-863e6dc26226.png)

完了


# Java

###ダウンロード

https://jdk.java.net/java-se-ri/11

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/7c20cdf7-d029-2736-289a-629675578d59.png)

ダウンロードしたファイル展開して「ドキュメント」フォルダに移動

#Tomcat
###ダウンロード
https://ftp.yz.yamagata-u.ac.jp/pub/network/apache/tomcat/tomcat-9/v9.0.33/bin/apache-tomcat-9.0.33-windows-x64.zip

展開して、JDKと同じように「ドキュメント」フォルダに移動し、完了。

#IDE

##Eclipse

###ダウンロード

https://www.eclipse.org/downloads/download.php?file=/oomph/epp/2020-03/R/eclipse-inst-win64.exe

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/aa67c67e-eb5b-ec5e-be90-dd8615ce1453.png)

###インストール手順

今回WEB系なのでEnterprise Javaを使う必要になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/f4396b47-0242-23af-e2fe-f548e85f2bdd.png)

###JDKの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/94bb5847-f8f0-2006-fb15-66bd514a3e72.png)
先移動したフォルダーを設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/f11b8bfd-2a95-4e0c-ef6b-ccadf873091e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/a45aadd0-dc08-4d5d-d5e6-def9d0d7d72c.png)

インストールをクリックして、終わったら以下の画面出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/30391a7d-c73e-6b5a-6e21-6c9aa90ed55c.png)

「ドキュメント」フォルダの中に「new_workspace」フォルダを作成し、設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/5a57f26d-8b0f-1748-5134-f29f7b5308bc.png)
LAUNCHをクリックして以下の画面が現れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/d8c9dac8-daea-1b6b-c72a-acf14c00d09c.png)
##-「Maven Project」を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/1254ad05-df62-5ebf-d7dc-5bb741406b1e.png)
###設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/e4b7adc8-93b0-6101-66c7-bddf104d3320.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/23621e6e-cf9c-9797-2064-979fff4a6985.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/93124996-a29b-8b2f-a102-b05032e46f0d.png)

それでWeb用なMavenプロジェクトを作成完了。

###サーバー環境の設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/bba39241-02c1-3ba6-38c9-fc1044d7c157.png)
左にあるメニューから「Server」選んで「Runtime Environment」と「Add...」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/cd5cfad6-4015-b0b7-7922-1b7a5f0bbbb7.png)
先インストールしたTomcatはバージョン９です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/41d7526c-8f7d-bad9-bfbd-bebb6bb6273e.png)

インストールされたフォルダを選んで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/c1e7cb21-f6b6-46f8-3962-3ca4deaa5677.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/37a42771-0b3e-4822-4b40-c7637c119702.png)

jdkを確認して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/8c6f76fd-e55c-4907-8884-e7c9701a9cf9.png)
先「ドキュメント」フォルダに移動したJDKが設定されているかどうか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/4d3edbf8-6203-4097-4a9a-393f8ae0af46.png)
じゃなかったら設定し、悶えなければ「Finish」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/cd590c66-0725-f70f-fcf7-c574888ec099.png)

「Apply and Close」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/d17603dd-c251-ad1c-45b1-38bf9ff8b014.png)
完了。

#テスト

##Tomcat&Java
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/515982ec-1502-fcac-f6f7-ac5b97f8e061.png)

「Run on Server」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/8335be55-1422-7eb3-3d47-217efcc298d5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/0e3b99c0-74de-1087-bd77-2d1fce5a7c1c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/06de73ba-57de-73f3-8dcf-12b673438998.png)

##Java&Mysql

###接続するための追加

https://mvnrepository.com/artifact/mysql/mysql-connector-java/8.0.19
上のリンク以下のページへ、赤いまるの情報をコーピします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/33ad9e4a-45c7-07ab-44b6-f91f602320db.png)

pom.xmlに追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/77cc3680-3979-8023-a4c7-e692a3c7c7dc.png)

保存するとMavenがダウロードしてくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/5fa6147b-de3c-6baa-ab0b-69f4841e9aa2.png)

以下のコードも追加してください。

> &lt;dependency&gt;
        &lt;groupId&gt;javax.servlet&lt;/groupId&gt;
        &lt;artifactId&gt;javax.servlet-api</artifactId&gt;
        &lt;version&gt;3.0.1</version&gt;
        &lt;scope&gt;provided</scope&gt;
    &lt;/dependency&gt;
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/4289f9b0-6477-c7a1-d96c-fafc08ed30e0.png)

###接続コード
これからindex.htmlに追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/9236d1be-8c8d-a7a9-73ca-e733f14dfc97.png)
一番上の列には以下のコードを追加してください。
> <%@ page import="java.sql.*" %>

「&lt;body&gt;」タグの中に以下のコードをコーピ。password のところだけ、事前に設定されたパスワードを変えてください。

> <%
Class.forName("com.mysql.cj.jdbc.Driver");
    try (Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mysql?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC", "root", "password");) {
    	System.out.println("connect success");
    	}catch (Exception e)
    	{
    		System.out.println(e);
    	}%>

そして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546056/d74d17f4-7e31-cf0e-6674-e529c331ded5.png)

データベースに接続完了。