전회( 【Rails 입문】Ajax를 도입한다 )보다 실천적인 내용이 되고 있습니다.

ajax를 사용하여 입력 양식을 구현하는 방법

0. 어떤 것을 구현하는지 확인

· 초기 화면


・버튼을 누르면 포스트용의 폼이 나타난다.
· 값을 입력하고 전송하면 데이터가 동적으로 업데이트됩니다.
・포스트용의 폼은 사라진다.

1. Model 만들기

우선 데이터를 저장하기 위해 Model을 작성한다.

$ rails g model Apple name:string
$ rake db:migrate

모델을 만들고 마이그레이션 파일을 실행합니다.

이름 열이있는 Apple 모델을 만들 수있었습니다.

2. Controller 만들기

$ rails g controller apples

3. Route 추가

app/config/routes

resources :apples

리소스를 나누기 때문에 위의 코드를 추가합니다.
이제 RESTful 리소스를 나눌 수 있습니다.

RESTful 자원의 배분에 대한 팁 : 【Rails 입문】 최초의 Web 앱 개발이라면 scaffold가 최단!

4. 우선은 Controller로부터 작성한다

다음 코드를 추가합니다.

app/controller/apples_controller.rb

class ApplesController < ApplicationController

  def index
    @apples = Apple.all
  end

  def new
    @apples = Apple.new
    # respond_toメソッド => 結果をどのフォーマットで返すかを指定している
    respond_to do |format|
      # turbolinkが有効でないとき
      format.html
      # turbolinkが有効なとき
      format.js
    end
  end

  def create
    @apples = Apple.all
    @apple = Apple.new(apple_params)
    # respond_toメソッド => 結果をどのフォーマットで返すかを指定している
    respond_to do |format|
      if @apple.save
        # turbolinkが有効でないとき
        format.html
        # turbolinkが有効なとき
        format.js
      else
        # turbolinkが有効なとき
        format.js {render :new}
      end
    end
  end

  def apple_params
    params.require(:apple).permit(:name)
  end
end

4. View 만들기

app/views/apples/index.html.erb

<h1>Appleモデル一覧</h1>
<table class="table" id="apples">
  <!-- パーシャル -->
  <%= render @apples %>
</table>
<!-- :remote => trueの部分で、turbolinkを有効にする -->
<!--  => 自動的にajaxの処理にする -->
<!-- "データを追加する”のボタンを押すと、applesのnewアクションが実行される -->
<%= link_to "データを追加する", new_apple_path, remote: true %>
<div id="apple-form"></div>

<%= render @apples %> 의 부분에 파셜을 넣고 있으므로, 적절한 파셜을 작성할 필요가 있습니다.

5. View에서 해당 부분 만들기

app/views/apples/_apple.html.erb 를 작성한다.
( @apples 와 같이 작성하면 자동으로 _apple.html.erb를 검색합니다.)

app/views/apples/_apple.html.erb

<tr>
  <td>
    <%= apple.name %>
  </td>
</tr>

=> 이제 컨트롤러에서 설정한 변수로부터 값을 출력할 수 있다.

색인 작업 내용

def index
  @apples = Apple.all
end

=> "데이터 추가"버튼을 누르면 애플의 새로운 액션이 실행됩니다.

새로운 액션 내용

def new
  @apples = Apple.new
  respond_to do |format|
    format.html
    format.js
  end
end

ajax에서 실행하고 있기 때문에 format.js에 해당하는 new.js.erb를 반환합니다.

6. View에서 해당 부분 만들기 2

app/views/apples/new.js.erb

<script>
  // renderでformを指定している => _form.html.erbを作成して入力フォーム用のコードを入力する必要がある
  $('#apple-form').html("<%= j (render 'form') %>");
  $('#apple-form').fadeIn(800);
</script>

7. View에서 해당 부분 만들기 3

app/views/apples/_form.html.erb

<%= simple_form_for @apples, remote: true do |f| %>
  <%= f.input :name %>
  <%= f.button :submit ,"追加" %>
<% end %>

여기서는 simpel_form 라는 form을 간소화해주는 gem을 사용하고 있다. 그러므로

gem 'simple_form'

추가 후,

$ bundle install

하고 Gem을 활성화합니다.

또한 simple_form의 초기 설정을 위해 명령 프롬프트에 다음 코드를 입력합니다.

$ rails generate simple_form:install

이제 simple_form을 사용할 수 있습니다.

1-7에서 ・ボタンを押すとポスト用のフォームが現れる。까지 완료되었다.

나머지는
· 값을 입력하고 전송하면 데이터가 동적으로 업데이트됩니다.
・포스트용의 폼은 사라진다.　　입니다.

이 후에는 폼에 값을 입력하여 포스트 한 후의 동작을 구현한다.

값이 게시되면 컨트롤러에서 설정한 create 작업이 호출됩니다.

create 액션 내용

def create
  @apples = Apple.all
  @apple = Apple.new(apple_params)
  respond_to do |format|
    if @apple.save
      format.html
      format.js
    else
      format.js {render :new}
    end
  end
end

값을 받고 save에 성공하면 format.js에 해당하는 create.js.erb가 실행된다.
app/views/apples/create.js.erb를 만들어 다음 코드를 만듭니다.

8. View에서 해당 부분 만들기 4

app/views/apples/create.js.erb

<script>
$('#apples').html("<%= j (render 'index') %>");
$('#apple-form').fadeOut(600);
</script>

render ‘index’ 부분에서 index의 부분을 출력하고, 또한 fadeOut에서 폼을 보이지 않게 하고 있다.

그러면 부분 내용을 입력합니다.

9. View에서 해당 부분 만들기 5

app/views/apples/_index.html.erb를 작성하고 다음 코드를 입력하십시오.

app/views/apples/_index.html.erb

<%= render @apples %>

이제 자동으로 _apple.html.erb에 액세스하여 값을 업데이트합니다.

10. 정리

이것으로 ajax 설정이 완료되었습니다. 만든 view는

· _apple.html.erb
· _form.html.erb
· _index.html.erb
· create.js.erb
· index.htlm.erb
· new.js.erb

6개입니다.
http://localhost:3000/apples 를 열고 확인합시다!