Whiteship's Note


rails로 생성한 scaffold 코드 살펴보기 - View

RUBY/on Rails : 2007.05.27 10:31


View는 세 가지 구성요소로 이루어져 있습니다. Layout, Template, Partial 이 세가지 입니다. 각각의 관계를 그림으로 나타내면 다음과 같습니다.
사용자 삽입 이미지
Layout 은 각각의 Template 앞 뒤에 해당하는 HTML 을 넣을 수 있습니다.
Template 은 각각의 페이지에 해당하며
Partial 은 각각의 페이지 구성요소 중에 여러 페이지에서 사용할 부분을 따로 빼낸 부분입니다.
사용자 삽입 이미지
위 표에 각각의 default name이 적혀있으며 파일이 위치 할 폴더를 보여주고 있습니다.

Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Categories: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body>
<h1><%=@heading %></h1>
<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>

스케폴드에서 만들어준 레이아웃 코드입니다.
스타일 시트는 따옴표 사이에 이름을 주면 rails의 웹 기본 폴더인 public의 하위 디렉토리 stylesheets 밑에 위치한 파일을 찾게 됩니다.
사용자 삽입 이미지
파란색 부분의 코드는 임의로 넣어준 것입니다. 각각의 페이지에서 @heading 변수의 값을 바꿔주면 여기서 출력해줄 값도 변하게 됩니다.

Template
<% @heading = "Edit Category" %>
<% form_tag :action => 'update', :id => @category do %>
    <%= render :partial => 'form' %>
    <%= submit_tag 'Edit' %>
<% end %>

<%= link_to 'Show', :action => 'show', :id => @category %>
|
<%= link_to 'Back', :action => 'list' %>

@heading 변수에 Edit Category 라는 값을 주고 있습니다. 따라서 레이아웃에서 이 값을 받아서 화면에 출력하게 될 것입니다. 그리고 여기서 주목할 부분은 빨간색 부분인 render :partial 입니다. 저 코드가 위치한 자리에 form이라는 partial을 사용하라는 의미 인 것 같습니다. 그럼 _form.rhtml을 찾아서 저 위치에 포함시켜 줍니다.

Partial
<%= error_messages_for 'category' %>

<!--[form:category]-->
<p><label for="category_category">Category</label><br/>
<%= text_field 'category', 'category', "size"=>20, "maxlength"=>20  %></p>

<p><label for="category_created_on">Created on</label><br/>
<%= datetime_select 'category', 'created_on'  %></p>

<p><label for="category_updated_on">Updated on</label><br/>
<%= datetime_select 'category', 'updated_on'  %></p>
<!--[eoform:category]-->

_form.rhtml 파일입니다.
맨 윗 부분은 이전 글에서 예상했던 것 처럼 에러 메시지를 출력하는 부분이 맞습니다.
파란색 부분은 별도로 추가해준 부분입니다.
여기서 살펴볼 코드는 빨간색 부분입니다. text_field 는 보여줄 <input /> 의 타입을 지정해 주는 것으로 예상이 되며 첫 번째 인자 'category'는 테이블이고 두 번째 인자 'category'는 테이블의 컬럼 이름입니다.
top

TAG ,

Write a comment.