「先生ー、Springでログイン機能を実装したいでーす」①HelloWorld

#　導入
1,HelloWorld
2,ログインフォーム
3,データ保存
4,ログイン

## ダウンロード
[STSのダウンロード](https://spring.io/tools3/sts/all)
迷ったら
[WindowsにSpring Tool Suiteを導入する　-Qiita](https://qiita.com/segur/items/4cd283d9763a1953f336)

## プロジェクトの作成
1,File⇒New⇒Spring Starter Project
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/b1b314fa-0beb-9b0b-520f-64a67fa86abe.jpeg)
1,「Name」＝「HelloWorld」
2,「Package」=「com.login」
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/d805200b-73f1-fcef-a46b-4cd0ba194138.jpeg)
1,Web⇒Spring Web
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/3ff437a3-01df-2333-43e2-85376e2f768b.jpeg)

## クラス作成
1,「com.login」上で、右クリック。New⇒Class
![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/9677ab30-7d56-453b-a2af-29c4278dffcc.jpeg)
1、「Name」＝「HomeController」
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/c4159d1a-ce80-ff3e-543f-487044eaf275.jpeg)

1,作成したクラスに下記を上書き

```java:HomeController
package com.login;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
	@GetMapping("/hello")
	public String home(Model model) {
		model.addAttribute("hello","Hello World!");
		return "hello";
	}
}
```


1,pom.xmlに下記を追加

```java:pom.xml
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
```
![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/dfcf2134-a314-48e9-7c6c-92af4ac08fcf.jpeg)

## HTMLファイルを作成
1、src/main/resourcesの
「templates」上で右クリック。New⇒Other
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/686df287-997f-712e-ee43-3283d096edf1.jpeg)
1、「html」入力。
2、「HTMLFile」選択。
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/67d2d8f2-8faf-a233-e353-f0b909971b21.jpeg)
1、「File name」=「hello.html」
![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/1a85202e-1e83-574e-c475-730632dfc5d5.jpeg)

1、作成した「hello.html」に下記を上書き。

```HTML:hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 th:text="${hello}"></h1>
</body>
</html>
```
## 実行
プロジェクト「HelloWorld」上で右クリック。「Run As」⇒「Spring Boot App」
![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/1cfc12b5-834a-bfa7-49c9-21a14d784f82.jpeg)
1,ブラウザ上で入力⇒「localhost:8080/hello」
![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464203/0f7f7f6a-5041-d667-927a-0fb6b4e9ea11.jpeg)


## 所感

先生：（結果はhtml拡張子のファイルに「HelloWorld」を書いたものと変わらんが、サーバーサイドをかますことで、可能性の素晴らしさに気づくだろう）
たかし：先生ー、これってhtml拡張子のファイルに「HelloWorld」書いたのと同じじゃね？
先生：・・・
サーバーをかますことで、300億でも何でも、1から順番に数を表示してくれるし、
人間の脳みそじゃ理解に時間がかかる暗号を作ったり、読み解いたりできる。
しかも、３の倍数と３がつく数字の時に「AHO」になるための練習文だって表示できるんだぞ！

```java:CreateAho

@GetMapping("/hello")
    public String home(Model model) {
    	List<String> aho=new ArrayList<String>();
    	int a,b,c;
    	for(int i=1;i<=1000;i++) {
    		a=i/10;
    		b=i/100;
    		c=i/1000;
    		if(i%3==0 || i%10==3 || a%10==3|| b%10==3||c%10==3) {
    			aho.add("AHO");
    			continue;
    		}
       		aho.add(String.valueOf(i));
    	}
    	model.addAttribute("hello", aho);
        return "hello";
    }
```

## したことの確認
①Javaプロジェクトの作成(Spring)
②Controllerクラスの作成（Mappingを行う）
③Htmlファイルの作成（サーバーサイドの機能を使用）
④プロジェクトの設定ファイルを編集（Mavenのxml）
⑤Webサーバソフトウェアを用いたWebページの表示(apache)