Basic  5. Spring Boot でCompanyのページを作ってみよう、RESTful API説明、MVC説明

# 1. 今日は
設計の仕方を説明します。
会社を作成したり、会社の情報を編集したり、一覧で会社情報を見たりできるような機能を作成します。

## キーワードは下記
RESTful
MVC
今日のキーワードは上の２つです。来週説明してもらうので覚えて帰ってください。

## RESTful APIとは
RESTful => REpresentational State Transfer ful

昔作った
http://localhost:3000/ideas
というURLを開いてください。

・表を見ながら説明します。

|HTTP Request|	URL|	アクション|	用途|
|-----------|------------|------------|------------|
|GET|	/ideas |	index|	あるアイデアの一覧ページ|
|GET|	/ideas/:id |	show|	id=:idのアイデアの詳細ページ|
|GET|	/ideas/new |	new|	あるアイデアの新規作成ページ|
|POST|	/ideas |	create|	アイデアを作成するアクション|
|GET|	/ideas/:id/edit	|edit|	id=:idのアイデアの編集ページ|
|PATCH|	/ideas/:id	|update|	id=:idのアイデアの更新アクション|
|DELETE|	/ideas/:id |	destroy|	id=:idのアイデアの削除アクション|

- RESTとは上の7つのURLの組み立て方のこと
- 設計のときは上の7つのURLを考えることから始める
- WEBのアプリはすべて上の7つの操作で作ることができる
- :idは、1,2,3などの数字のIDのこと。
- GETはURLを開く操作のこと、POST, PATCH, DELETEは、フォームに入力してボタンをクリックする操作のこと


**Coachより** 各pathについて説明してください。pathの組み立て方は来週

## MVCとは
Model => データベースを操作する
View => Controllerから送られたデータを元にhtmlを作成する
Controller => URLの操作とModelを操作する
図で説明

![mvc.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53443/f4f2454e-79ef-7a7a-42c5-86cceeaa3cbb.jpeg)


- 過去の例では
- app/models/idea.rb
- app/controllers/ideas_controller.rb
- app/views/ideas/index.html.erb

# 2. 会社情報を管理する機能を作成しよう、会社のページを作ってみる

# RESTfulは?
下記操作に対応するURLを上から順に考えてみましょう。
GET 一覧
GET 新規作成
POST 保存
GET 詳細
GET 編集
PATCH 更新
DELETE 削除

# MVCは? 
app/models/company.rb 
app/controllers/companies_controller.rb
app/views/companies/index.html.erb
config/routes.rb


# 3. まずは会社の一覧を作成してみよう。
![スクリーンショット (52).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/e64634e1-f6bf-cb66-47c2-ed0d10713631.png)


## M: モデルを作成します。
Command + Shift + O

schema.sqlとdata.sql
```
```

```company.java
@Entity
public class Company {
	@Id
        @GeneratedValue(strategy = GenerationType.AUTO)
	private long id;
	private String name;
	private String description;
}
```

CompanyRepository.java

```
@Repository
public interface CompanyRepository extends JpaRepository<Company, Long> {
	
}

```


## C: Controllerを作成してください。

CompanyController.java
```
@Controller
@RequestMapping("/companies")
public class CompanyController {
	
	@Autowired
	private CompanyRepository companyRepository;
	
	@GetMapping
	public String index(Model model) {
		List<Company> companies = companyRepository.findAll();
	    companyRepository.save(new Company("会社3", "説明2"));
	    companyRepository.save(new Company("会社4", "説明2"));

		
		model.addAttribute("companies", companies);
		model.addAttribute("title", "Company Index");
		return "company/index";
	}
}
```

```
rails generate controller companies
```

> app/controllers/companies_controller.rb

```rb:app/controllers/companies_controller.rb
def index
  @companies = Company.all
end
```


## V: Viewを追加してください。
下記のファイルをSublime Textを使って追加します。
app/views/companies/index.html.erb

Sublime Text の app/views/companies 上で右クリックをして、New File から新規ファイルを作成します。その新規ファイルを index.html.erb として保存することで追加することができます。
![スクリーンショット (51).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/681cf6a9-d553-75bf-284c-57c718b6774c.png)


```erb:app/views/companies/index.html.erb
<h1>会社の一覧</h1>
<% @companies.each do |company| %>
  <p><%= company.name %></p>
  <p><%= company.description %></p>
<% end %>
```


# 最後にRoutingを追加します。
config/routes.rbを開き最後のendの1行上に

```rb:config/routes.rb
get 'companies', to: 'companies#index'
```

Coach: RouteErrorが出るときは?

ブラウザを更新して会社の一覧ページが表示されるか確認してください。


# 4. 会社の作成ページとPOSTを作成し、会社を作成してみよう。
![スクリーンショット (53).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/72844163-fd72-3b06-96d2-0738a11df0a7.png)

## model
3で作成済み。

## controllerを作成しよう

```rb:app/controllers/companies_controller.rb
  def new
    @company = Company.new
  end

  def create
    @company = Company.new(company_params)

    if @company.save
      redirect_to companies_path
    end
  end

  def company_params
    params.require(:company).permit(:name, :description)
  end
```

## routing 

```rb:config/routes.rb
get 'companies/new', to: 'companies#new', as: 'new_company'
post 'companies', to: 'companies#create'
```

## view

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:text="${title}">Insert title here</title>
</head>
<body>
<div th:replace="~{block/header::headerA}"></div>
<h1 th:text="${title}">仮のタイトル</h1>
<table>
	<tr>
		<th>id</th><th>name</th><th>description</th>
	</tr>
	<tr th:each="company: ${companies}" th:object="${company}">
		<td th:text="*{id}">1</td>
		<td th:text="*{name}"></td>
		<td th:text="*{description}"></td>
	</tr>
</table>
</body>
</html>
```



```erb:app/views/companies/new.html.erb
<h1>会社を登録する</h1>

<%= form_with(model: @company, local: true) do |form| %>
<!-- name -->
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :company_name %>
  </div>
<!-- description -->
  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description, id: :company_description %>
  </div>
  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>
```

会社情報データを追加して、一覧ページに表示されるか確認しよう

# 5. 詳細ページを作成してみよう。
![スクリーンショット (55).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/2174df3d-db1f-3f1d-fc16-82ec24d2ccf8.png)



## controllerを作成

```rb:app/controllers/companies_controller.rb
def show
  @company = Company.find(params[:id])
end
```

## routingを追加
下記から選ぼう

```rb:config/routes.rb
get 'companies', to: 'companies#index'
get 'companies/new', to: 'companies#new', as: 'new_company'
get 'companies/:id/edit', to: 'companies#edit', as: 'edit_company'
get 'companies/:id', to: 'companies#show', as: 'company'
patch 'companies/:id', to: 'companies#update'
post 'companies', to: 'companies#create'
delete 'companies/:id', to: 'companies#destroy'
```


## viewを追加

```erb:app/views/companies/show.html.erb
<h1>会社詳細ページ</h1>
<p><%= @company.name %></p>
<p><%= @company.description %></p>
```

# 6. 会社の編集ページと更新を作成してみよう。
![スクリーンショット (57).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/63ff5bd9-ef79-e88a-6a13-bf50cbc467f0.png)


## controllerを作成

```rb:app/controllers/companies_controller.rb
  def edit
    @company = Company.find(params[:id])
  end

  def update
    @company = Company.find(params[:id])
    @company = @company.update(company_params)
    redirect_to companies_path
  end
```

## routingを追加
下記から選ぼう

```rb:config/routes.rb
get 'companies', to: 'companies#index'
get 'companies/new', to: 'companies#new', as: 'new_company'
get 'companies/:id/edit', to: 'companies#edit', as: 'edit_company'
get 'companies/:id', to: 'companies#show', as: 'company'
patch 'companies/:id', to: 'companies#update'
post 'companies', to: 'companies#create'
delete 'companies/:id', to: 'companies#destroy'
```


## viewを追加

```erb:app/views/companies/edit.html.erb
<h1>会社を編集する</h1>

<%= form_with(model: @company, local: true) do |form| %>
<!-- name -->
  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :company_name %>
  </div>
<!-- description -->
  <div class="field">
    <%= form.label :description %>
    <%= form.text_area :description, id: :company_description %>
  </div>
  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>
```

# 7. 削除機能を作成してみよう。
![スクリーンショット (56).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496885/e6a46a76-7dff-3a41-d273-0370bb8b8cf7.png)


## controllerを作成

```rb:app/controllers/companies_controller.rb
  def destroy
    @company = Company.find(params[:id])
    @company.destroy
    redirect_to companies_path
  end
```

## viewを追加

```app/views/companies/show.html.erb
<p><%= link_to 'Delete', company_path(@company), method: :delete, data: { confirm: '削除してもよろしいですか？' } %></p>
```


# 2の答え、routingは下記から選んで追加してみよう

GET 一覧/companies
GET サクセイ/companies/new
POST 保存/companies
GET 詳細/companies/:id
GET 編集/companies/:id/edit
POST 更新/companies/:id
POST 削除/companies/:id

```rb:config/routes.rb
get 'companies', to: 'companies#index'
get 'companies/new', to: 'companies#new', as: 'new_company'
get 'companies/:id/edit', to: 'companies#edit', as: 'edit_company'
get 'companies/:id', to: 'companies#show', as: 'company'
patch 'companies/:id', to: 'companies#update'
post 'companies', to: 'companies#create'
delete 'companies/:id', to: 'companies#destroy'
```