Ruby #2_ 영화검색 사이트 만들기(2)

지난 포스팅에 이어서 계속 진행합니다!

영화를 검색하기 위해 영화제목 입력창과 버튼을 추가합니다.

bootstrap에서 CSS->우측 Forms에 들어가서 처음보이는 code를 복사해 필요한 부분만 남겨두고 지워버리겠습니다.

위의 그림에 보이는 code를 복사하여 index.html.erb 파일의 상단에 붙여놓고 필요한 부분만 남기고 지우겠습니다.

지금까지 작성한 code로 run하면 아래와 같이 화면이 구성됩니다.

이제 model 개념을 사용합니다.

bash 창에 아래와 같은 명령어를 입력합니다.

rails g model list

그리고 

rake db:migrate

( ':' 양쪽에 공백이 있으면 안돼요!)
두 명령어를 입력하면 아래 사진과 같이 db/migrate 에 새로운 파일이 생깁니다. 해당 파일의 코드를 확인할게요

해당 파일에서 t.timestamps null: false 코드 위에 아래 코드를 입력합니다.

t.string :title

지금까지 한건, 사용자가 영화제목을 입력해서 검색한 것을

db에 저장해서 정보를 갖고 있도록 하기위해 db구축(?)을 한 과정입니다.

이제 이렇게 db에서 갖고있는 정보를 화면에 띄우도록 할게요.
먼저, 버튼을 눌렀을때 새로운 영화정보가 추가된 페이지가 되도록 routes.rb 파일의 코드를 수정하겠습니다.

이렇게 
get 'new_movie' => 'movie#new_movie' 를 추가하고 이제 movie_controller.rb 파일로 넘어갑니다.
movie_controller.rb 파일에서 new_movie라는 함수를 설정해서

사용자가 영화제목을 입력하고 버튼을 눌렀을때 입력한 text를 통해 json정보를 받습니다.

그리고 해당 영화의 정보가 존재하는지 Response 값을 확인한뒤 True인 경우 db에 저장하도록 합니다.

코드를 확인하면 아래와 같고 추가적으로 index함수내에서도 바뀐 부분을 확인해야 합니다.

26번줄과 31번줄의 코드가 변경되었습니다.

그리고 이제 버튼을 눌렀을때 controller에서 새롭게 설정한 함수가 실행되도록 해야하는데

이것은 index.html.erb 파일에서 코드를 수정합니다.

위의 사진에서 2번줄을 보시면 action 구문이 추가되었습니다.

어떠한 함수를 실행할지 설정해주었구요,

5번줄에 name="title"이란 코드도 추가되어 사용자가 input에 입력한 text의 이름을 설정해주었습니다.

이렇게 까지하시면 page를 run 하셨을때 어떤 영화의 정보도 존재하지 않지만,

적절한 영화의 제목을 입력하고 추가하면 영화의 정보가 새로 생깁니다.

하지만 입력한 text에 대한 영화정보가 없다면 영화정보가 추가되지 않습니다.
마지막으로 보기좋게끔 css등의 파일의 코드를 수정하고,

영화에 대한 보다 많은 정보를 받을 수 있게끔하며, 

youtube 주소를 이용해서 해당 영화에 대한 관련 영상을 볼 수 있는 링크를 걸게 하였습니다.
먼저 최종 결과화면은, 

이렇게 나왔습니다.

각 코드들은 아래와 같습니다.

routes.rb

application.html.erb

movie_controller.rb

index.html.erb

movie.css

db/migrate/~lists 파일

코드는 위에 나온 사진들 외에는 따로 수정한 파일 없습니다.
이렇게해서 오늘 LIKELION에서 학습한 내용 한번 쭉 복습했네요.
저도 많이부족해서 제대로 설명이 되지 않았거나 잘못 된 부분들도 많을텐데

전문가분들께서 보시고 피드백주시면 정말 감사하겠습니다^^

다음번에 더 공부해서 더 좋은 내용으로 포스팅할게요~