[Ruby on Rails] Review...

들어가면서...

 현재까지 해본 것을 복습하고, Scaffold로 생성하지 않은 곳에서 데이터베이스를 참조하는 법을 본다. 현재까지 서점에 대해서 만들고 있는데, 지금 가능한 기능은 책의 리스트를 작성하고 수정하고 삭제하는 행동이다. 이것은 관리자 또는 판매자가 해야할 일이라고도 볼 수 있다.

 현재까지 사용해본 기능을 통해서 사용자가 책리스트를 보면서 장바구니를 사용할 수 있는 인터페이스를 만들어보자. 장바구니는 이 다음에 다룰 것이고, 지금은 단지 장바구니 버튼만 있는 페이지가 될 것이다.

 

 대략적으로 목표하는 화면은 다음과 같다.

컨트롤러 생성

 사용자가 쇼핑을 할 수 있는 공간을 위한 컨트롤러를 생성한다. 이를 위해서 컨트롤러 market 을 생성하자.

> rails generate controller market index

 

 컨트롤러 market을 생성한다. market은 index라는 행동(Action)을 가지고 있게 된다. 서버를 키고 한번 위치로 가서 확인을 해보자. 주소는 localhost:3000/market/index 가 될 것이다.

데이터베이스에 접근  및 보여주기

 이제 새로 생긴 페이지에 보여줄 데이터를 가져오는 작업을 하면된다. Scaffold에 의해 생성된 클래스를 직접적으로 컨트롤러에서 가져오면된다. 일단, 컨트롤러 파일을 열어보도록 하자.

> vi app/controller/market_controller.rb

 이제 index 메소드에 데이터를 가져오는 소스코드를 추가해보자. 

class MarketController < ApplicationController
  def index
      @books = Book.order(:review_count)
  end 
end

 책 정보를 가져오는데 order명령을 이용하여 리뷰수가 많은 순서대로 가져오도록 설정하였다. 다음으로 이젠 뷰페이지에서 가져온 정보를 토대로 리스트를 보여주면 된다. 일단, 뷰 파일을 열어보도록 하자.

> vi app/views/market/index.html.erb

 컨트롤러에서 가져온 데이터를 순환하면서 화면에 보여준다.

<h1>Catalog</h1>

<% @books.each do |book| %>
<div class="item">
	<%= image_tag(book.image_url, class: 'book_cover') %>
	<div class="description">
		<h3><%= book.name %></h3>
		<p><%= book.description %></p>
		<p class="price">Price <%= book.price %> KRW</p> 
		<div class="add_cart">
			Add Cart
		</div>
	</div>
</div>
<% end %>

 위에서 열어둔 페이지를 새로고침하면 책의 리스트가 나오는 것을 볼 수 있다. 여기서 이제 SCSS파일을 수정하여 원하는 모습으로 변경을 해보자. scss파일을 열어보자.

> vi app/assets/stylesheet/market.css.scss

// Place all the styles related to the market controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.market{

	h1{
		margin: 10px 0 10px 0;
		padding-bottom: 20px;
		font-size: 40px;
		color: #708090;
		border-bottom: 3px solid #123;
	}
	
	.item{
			border-bottom: 2px solid #123;

			.book_cover{
				width: 120px;
				height: 160px;
				position: absolute;
			}

			.description{
				margin-left: 130px;
				margin-bottom: 10px;
				min-height: 200px;
			}

			.price{
				float:right;
			}

			.add_cart{
				width:120px;
				padding:5px 0px;
				background: #888;
				border: 1px solid #123;
				text-align: center;
				vertical-align: middle;
				color:#eee;
		}
	}
}

아마도 원하는 모습의 페이지가 출력될 것이다.

마무리

 다음에는 네비게이션 구성 및 메인페이지 변경을 시도하도록 하겠다.