rails로 퀴즈어플 만들어보기(CRUD편)

Posted by negabaro kim on Friday, April 13, 2018 Tags: rails handson   7 minute read

rails quiz어플을 만들어보자. 이 포스트에서는 CRUD(퀴즈등록,수정,삭제,일람,상세)기능을 만들어 보기로한다.

route설정추가

config/routes.rb에resources :writing_quizzes를 추가

Rails.application.routes.draw do
  resources :writing_quizzes
end

rake routes결과 확인

           Prefix Verb   URI Pattern                         Controller#Action
      rake_routes GET    /rake/routes(.:format)              rake#routes
  writing_quizzes GET    /writing_quizzes(.:format)          writing_quizzes#index
                  POST   /writing_quizzes(.:format)          writing_quizzes#create
 new_writing_quiz GET    /writing_quizzes/new(.:format)      writing_quizzes#new
edit_writing_quiz GET    /writing_quizzes/:id/edit(.:format) writing_quizzes#edit
     writing_quiz GET    /writing_quizzes/:id(.:format)      writing_quizzes#show
                  PATCH  /writing_quizzes/:id(.:format)      writing_quizzes#update
                  PUT    /writing_quizzes/:id(.:format)      writing_quizzes#update
                  DELETE /writing_quizzes/:id(.:format)      writing_quizzes#destroy

루트 설정을 먼저 만들어놓고 rake routes의 결과를 보면서 controller,view를 만들어주는게 초보자인 나에게는 나침반같아서 편했다.

모델생성

rails g model writing_quiz question:string answer:string description:text

문제,정답,설명 컬럼을 추가

컨트롤러 생성

rails g controller writing_quizzes

처음에 이런식으로 단수형으로 적었다가 나중에 꼬여서..위와 같이 controller명은 복수형으로 적어준다.

rails g controller writing_quiz

DB설정

rails config/database.yml설정과 direnv를 이용한 환경변수관리을 참고해서 DB설정을 해준다.

DB생성

rails db:create

테이블 생성

rails db:migrate

여기까지 설정에 대한 동작확인

controller에new메소드 추가

#vim app/controllers/writing_quizzes_controller.rb
class WritingQuizController < ApplicationController
  def new
     @wquiz =WritingQuiz.new
  end
end

rails console기동

rails c

이하와 같이 나오면 성공

@wqiz = WritingQuiz.new

   (11.3ms)  SET NAMES utf8mb4,  @@SESSION.sql_mode = CONCAT(CONCAT(@@sql_mode, ',STRICT_ALL_TABLES'), ',NO_AUTO_VALUE_ON_ZERO'),  @@SESSION.sql_auto_is_null = 0, @@SESSION.wait_timeout = 2147483
=> #<WritingQuiz id: nil, question: nil, answer: nil, description: nil, created_at: nil, updated_at: nil>

view동작확인

다음으로는 view동작확인을 해보자

new.html.erb에 동작확인용 텍스트를 입력

#vim app/views/writing_quizzes/new.html.erb
Hello Word.

rails기동

rails s
#port,host지정시 rails s -b 0.0.0.0 -p 3002
http://localhost/writing_quizzes/new

URL에서 악세스해서 Hello Word. 표시된다면 성공

등록페이지 작성

동작확인이 끝났으니 실제로 퀴즈를 등록하는 페이지를 만들어보자 이하와 같은 파일 을 추가

#vim app/views/writing_quizzes/new.html.erb
<%= form_for @wquiz do |w| %>

<div class=question>
<%= w.label :question, "질문" %>
<%= w.text_field :question %>
</div>

<div class="answer">
<%= w.label :answer, "정답" %>
<%= w.text_field :answer %>
</div>


<div class="submit">
<%= w.submit "등록" %>
</div>

<% end %>

등록페이지 post설정

뷰에서 등록버튼을 누르면 DB에 저장할 수 있게끔 설정을 해보자 이하와 같이 create메소드를 만든다.

#vim app/controllers/writing_quizzes_controller.rb
def create
      
      @wquiz = WritingQuiz.new(wquiz_params)
      if @wquiz.save
      else
          render 'new'
      end      
  end
  
  private
  
  def wquiz_params
     params.require(:writing_quiz).permit(:question,:answer)
     
  end
http://localhost/writing_quizzes/new

에서 폼을 입력후 등록버튼을 누른후 db에 데이터가 추가되는 것을 확인 (리다이렉트 설정을 안해줬기 때문에 화면에서는 아무런 변화가 없음)

인덱스페이지 작성

등록한 퀴즈들의 일람을 표시하는 페이지를 만들어보자

#vim app/controllers/writing_quizzes_controller.rb
  def index
      @wquizzes = WritingQuiz.all
  end
<% @wquizzes.each do |w| %>
#vim app/views/writing_quizzes/new.html.erb
<div class="">
문제: <%= w.question %>
</div>
<div class="">
정답: <%= w.answer %>
</div>
<% end %>

퀴즈등록후 리다이렉트 설정

퀴즈를 등록후 index페이지로 리다이렉트 하는 설정을 추가해보자.

#vim app/controllers/writing_quizzes_controller.rb
if @wquiz.save
 redirect_to action: 'index' 
else
end

처음에는 이런식으로 redirect설정을 했는데 redirect_to @wquiz

show페이지가 아직 존재하지므로 에러가남.

수정기능 추가

퀴즈를 수정할 수 있게해보자

#vim app/controllers/writing_quizzes_controller.rb

before_action :set_quizzes, only: [:show,:edit, :update]

  def set_quizzes
    @wquiz = WritingQuiz.find(params[:id])
  end

def edit
end

def update
 @wquiz.assign_attributes(wquiz_params)
 if @wquiz.valid?
   @wquiz.save?
   flash[:success] = "success updated!!"
   redirect_to action: 'index'
 else
 end
  
end

수정페이지에서 사용하는 view는 new에서 만든 설정과 동일하게 사용가능하다. 즉 컨트롤러에서 해당 존재하는 값을 넘겨주면edit 안넘겨주고 선언만하면 new인것이다.

여기서는 다루지 않지만 new와edit의view는 중복이므로

이럴땐 layout으로 만들어서 _form.html.erb이란걸 만들어서

new,edit에서 참조하는 형태로 만드는게 좋다.

동작확인

http://localhost/writing_quizzes/2/edit

에 들어가서 정상적으로 수정되는지 확인

상세페이지 추가

다음은 상세페이지를 만들어보자

상세페이지안에는 해당quiz를 수정 할 수 있는 버튼을 넣어보자

#vim app/controllers/writing_quizzes_controller.rb
before_action :set_quizzes, only: [:show,:edit, :update]

  def show
  end

show.html.erb

문제:<%= @wquiz.question %>
<br>
정답:<%= @wquiz.answer %>

<br>
<%= link_to '수정', edit_writing_quiz_path %>

동작확인

http:/localhost/writing_quizzes/2

에 들어가서 상세페이지가 표시되는것을 확인

삭제로직 추가

마지막으로 삭제로직을 만들어보자

위에서 만든 상세페이지에서 삭제버튼을 추가하자

#vim app/views/writing_quizzes/show.html.erb
<%= link_to '삭제', writing_quiz_path, method: :delete %>

그 다음엔 컨트롤러에 destroy로직을 추가

#vim app/controllers/writing_quizzes_controller.rb
  def destroy
    if @wquiz.destroy!
      redirect_to action: 'index'
    else
    end
    
  end

동작확인

http://localhost/writing_quizzes/2

에들어가서 삭제버튼을 누르고 해당 컬럼이 삭제되는것을 확인

여기까지 퀴즈등록,수정,삭제,일람,상세 페이지를 만들어봤다.