Bootstrap과 Simple_form 젬을 이용한 라디오버튼과 체크박스 레시피 (2)

오늘은 지난 글에 이어서 문자열 속성을 가지는 필드에 대해서 라디오버튼 그룹 또는 SELECT 태그를 적용하는 방법을 알아보자.

위의 동영상에서 보는 바와 같이 Post 모델에 category라는 문자열 필드를 추가하여 하나는 라디오버튼 그룹으로 표시하고 다른 하는 SELECT 태그문을 사용하여 표시하였다.

기존의 posts 테이블에 category라는 문자열 속성을 추가해 보자.

$ rails g migration add_category_to_posts category:string

위의 명령으로 생성된 마이그레이션 파일을 열고 디폴트 값(“”)을 지정한다.

class AddCategoryToPosts < ActiveRecord::Migration
  def change
    add_column :posts, :category, :string, default: ""
  end
end

그리고 app/views/posts/_form.html.erb 파일을 열고 아래와 같이 수정한다.

<%= simple_form_for(@post) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :category, as: :radio_buttons, item_wrapper_class: :with_label, collection: [['없음',''],['life','0'],['study','1'],['computer','2']], collection_wrapper_tag: :div, collection_wrapper_class: 'radio-group' %>
    <%= f.input :category, collection: [['life','0'],['study','1'],['computer','2']], prompt: '없음' %>
    <%= f.input :title %>
    <%= f.input :content, input_html: { rows: 10 } %>
    <%= f.input :published, as: :radio_buttons, collection_wrapper_tag: :div, collection_wrapper_class: 'radio-group' %>
  </div>
  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

rake의 db:migrate 태스크를 실행하여 테이블에 반영한 후 브라우저에서 http://localhost:3000/posts/new 로 연결해 보자. 아마도 위의 동영상 같이 보이게 될 것이다.

오늘을 여기까지 설명한다. 다음은 여러 개의 boolean형 속성을 하나의 라디오버튼 그룹처럼 보이도록 하는 것을 구현해 보기로 할 것이다.


소스코드 : https://github.com/hschoidr/radiobutton_and_checkboxes

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중