Development

Documentation/ko_KR/book/forms/1_1/01-Form-Creation

You must first sign up to be able to contribute.

Version 14 (modified by withrain, 9 years ago)
--

폼은 히든 인풋, 텍스트 인풋, 셀렉트 박스, 체크 박스 등으로 이루어져 있다. 이 챕터는 심포니 폼 프레임워크를 이용해 폼을 생성하고 폼 필드를 관리하는 것을 소개한다.

이 책의 내용은 심포니 1.1 에만 해당된다. 또한 빈 프로젝트와 프로트엔드용 어플리케이션을 생성해야 한다. 자세한 프로젝트 생성 방법은 심포니 소개 문서를 참조하도록 한다.

시작하기 전에

빈 어플리케이션에 연락처 폼을 하나 추가하는 것으로 시작한다.

그림 1-1 은 메세지를 보내기 원하는 사용자에게 보여질 연락처 폼이다.

그림 1-1 - 연락처 폼

http://www.symfony-project.org/images/forms_book/en/01_01.png

이 폼의 세개의 필드인 사용자 이름, 이메일과 사용자가 보내고자 하는 메세지에 해당하는 필드를 만들 것이다. 그리고 예제인 만큼 그림 1-2 처럼 입력된 값을 단순히 디스플레이하도록 할 것이다.

그림 1-2 - 땡큐 페이지

http://www.symfony-project.org/images/forms_book/en/01_02.png

그림 1-3 - 사용자와 어플리케이션 간의 상호작용

http://www.symfony-project.org/images/forms_book/en/01_03.png

위젯

sfForm 과 sfWidget 클래스

사용자는 폼의 구성요소인 필드에 값을 입력하는데 심포니에서 폼은 sfForm 클래스로 부터 상속받은 오브젝트이다. 예제에서는 sfForm 클래스를 상속받은 ContactForm? 클래스를 만들 것이다.

* sfForm 은 모든 폼의 베이스 클래스로 폼의 생성/소멸등 폼의 라이프 사이클을 관리하고 환경 설정을 쉽게 할 수 있도록 도와준다.

configure() 메소드에 위젯을 추가하는 것으로 폼의 설정을 시작하자.

위젯은 폼 필드를 표현한다. 이 예제에서 세개의 필드, name, email, message 를 나타내기 위해 세개의 위젯이 필요하다. 아래 Listing 1-1 은 이 ContactForm? 클래스의 첫번째 버전이다.

리스팅 1-1 - 세개의 필드를 가진 ContractForm? 클래스

// lib/form/ContactForm.class.php
class ContactForm extends sfForm
{
  public function configure()
  {
    $this->setWidgets(array(
      'name'    => new sfWidgetFormInput(),
      'email'   => new sfWidgetFormInput(),
      'message' => new sfWidgetFormTextarea(),
    ));
  }
}

위젯들은 configure() 메소드 안에 정의되어 있으며 이 configure 메소드는 sfForm 클래스 생성자가 자동으로 호출한다.
(역주: sfForm 클래스는 심포니 소스의 lib/form/sfForm.class.php 안에 정의되어 있습니다)

setWidgets 메소드는 폼에서 사용할 위젯들을 정의하는데 사용한다. 이 setWidgets 메소드는 키가 필드 이름이고 값이 해당 위젯인 연관(associative)배열을 인자로 받는다. 각 위젯은 sfWidget 클래스로 부터 상속된다. 예제에서는 두 종류의 위젯이 사용되었다.
(역주: sfWidget 클래스는 심포니 소스의 lib/widget/sfWidget.class.php 안에 정의되어 있습니다)
sfWidgetFormInput : input 필드 위젯
sfWidgetFormTextarea : textarea 필드 위젯

* 심포니의 관례대로 폼 클래스는 lib/form 디렉토리에 저장한다. 심포니가 자동 로딩하는 디렉토리라면 어느 곳에나 폼 클래스를 저장할 수 있지만 심포니는 모델로 부터 폼을 생성하는 곳으로 lib/form 디렉토리를 이용한다.
(역주: 프로펠 폼생성, symfony propel:build-forms)

폼 디스플레이

폼을 사용할 준비가 되었으니 폼을 디스플레이할 모듈을 생성한다.

$ cd ~/PATH/TO/THE/PROJECT
$ php symfony generate:module frontend contact

contract 모듈에서 리스팅 1-2에서와 같이 폼 인스턴스를 템플릿으로 전달할 수 있도록 index 액션을 수정한다.

리스팅 1-2 - contract 모듈의 Actions 클래스

// apps/frontend/modules/contact/actions/actions.class.php
class contactActions extends sfActions
{
  public function executeIndex()
  {
    $this->form = new ContactForm();
  }
}

폼을 생성하면 위에서 언급된 configure() 메소드가 자동으로 호출된다.

우리는 리스팅 1-3 에서와 같이 폼을 나타내기 위한 템플릿을 생성하여야 한다.

리스팅 1-3 - 폼 디스플레이 템플릿

// apps/frontend/modules/contact/templates/indexSuccess.php
<form action="<?php echo url_for('contact/submit') ?>" method="POST">
  <table>
    <?php echo $form ?>
    <tr>
      <td colspan="2">
        <input type="submit" />
      </td>
    </tr>
  </table>
</form>

심포니 폼은 유저에게 정보를 전달하기 위해 위젯들을 관리한다. indexSuccess 템플릿에서 <?php echo $form ?> 라인은 세개의 폼 필드를 디스플레이한다. <form> 태그나 submit 버튼등은 개발자가 추가해 주어야 한다. 처음에는 이것이 어색할 수 있으나 나중에 이것이 유용하며 특히 임베디드 폼을 쉽게 해주는 것을 보게 될 것이다.

프로토타입 폼을 만들때 <?php echo $form ?> 은 매우 유용하다. 개발자가 비주얼 측면면을 고민하지 않고 비즈니스 로직에 집중하게 해주기 때문이다. 챕터 3 에서 어떻게 폼과 템플릿을 커스터마이징 하는지 설명한다.

* <?php echo $form ?> 을 사용해서 오브젝트를 나타낼 때 PHP 는 실제로 $form 의 텍스트 표현을 나타낸다. 오브젝트를 스트링으로 변환하기 위해 PHP 는 매직 메소드인 __toString() 를 호출한다. 각 위젯은 오브젝트를 HTML 코드로 변환하기 위해 이 매직 메소드를 구현해야 한다. 즉 <?php echo $form ?> 는 <?php echo $form->__toString() ?>와 동일하다.

이제 브라우저에서 폼을 볼수 있다(그림 1-4) contract/index 액션의 주소(/frontend_dev.php/contact)를 입력해서 결과를 확인한다.

그림 1-4 - 생성된 contract 폼 http://www.symfony-project.org/images/forms_book/en/01_04.png

리스팅 1-4 는 템플릿에 의해 생성된 HTML 코드를 보여 준다.

<form action="/frontend_dev.php/contact/submit" method="POST">
  <table>
 
    <!-- Beginning of generated code by <?php echo $form ?>
 -->
    <tr>
      <th><label for="name">Name</label></th>
      <td><input type="text" name="name" id="name" /></td>
    </tr>
    <tr>
      <th><label for="email">Email</label></th>
      <td><input type="text" name="email" id="email" /></td>
    </tr>
    <tr>
      <th><label for="message">Message</label></th>
      <td><textarea rows="4" cols="30" name="message" id="message"></textarea></td>
    </tr>
    <!-- End of generated code by <?php echo $form ?>
 -->
 
    <tr>
      <td colspan="2">
        <input type="submit" />
      </td>
    </tr>
  </table>
</form>

HTML 테이블의 세개의 tr 라인으로 표현된 폼을 볼수 있다. 이 때문에 <table> 태그로 감쌌던 것이다. 각 tr 라인은 하나의 <label> 태그와 하나의 폼 태그(<input> 또는 <textarea>)로 이루어져 있다.

Labels