Ruby on Rails는 웹 애플리케이션 구축 방법을 변경했습니다. 초기에 프레임워크에는 강력한 애플리케이션을 시작하고 구축하는 데 도움이 되는 몇 가지 훌륭한 기능이 포함되어 있었습니다.
그러나 양식을 작성하고 처리하는 것은 여전히 까다로울 수 있습니다. Simple Form은 훌륭한 옵션입니다. Simple Form이 무엇인지, 왜 필요한지, 실제 사용 사례를 살펴보겠습니다.
Forms 및 Ruby on Rails
Ruby on Rails는 애플리케이션 구축을 정말 단순화합니다. 그러나 코드베이스를 간소화하고 일관되게 유지하려면 지속적인 주의가 필요합니다. 예를 들어 한 가지 전략은 추상화를 사용하여 코드를 작성하지 않는 것입니다. 실제 애플리케이션에 없는 코드는 관리할 필요가 없는 코드입니다. 그래서 우리는 추상화를 그토록 좋아하는 것입니다. 그렇죠? Simple Form은 웹페이지의 양식 작성을 단순화하는 추상화입니다.
Ruby on Rails를 사용하더라도 양식은 일반적으로 작성하기가 복잡합니다. 각 필드에서 올바른 유형을 정의하고 이를 올바른 속성에 연결하려면 주의가 필요합니다. Simple Form을 사용하면 각 필드에 필요한 정확한 유형을 찾을 필요가 없으므로 이러한 어려움이 줄어듭니다.
name을 사용하여 사용자 세부정보를 가져오는 양식을 살펴보겠습니다. , username 및 email 필드. User가 있다고 생각해 보세요. 유사한 관련 속성을 가진 모델. 단순 양식을 사용하면 속성을 채우는 양식은 다음과 같습니다:
각 필드의 유형을 지정하지는 않습니다. 단순 양식은 열 유형에 따라 각 필드에 대한 올바른 입력 유형을 선택합니다.
이를 통해 시간을 절약하고 코드를 읽기 쉽고 유지 관리하기 쉽게 유지할 수 있습니다.
간단한 양식 설치
프로젝트에 Simple Form을 설치하려면 simple_form를 추가하세요. gem을 Gemfile로 보냅니다. bundle install을 실행한 후 , 포함된 생성기를 사용하여 애플리케이션에 맞게 올바르게 설정할 수 있습니다.
Bootstrap 및 Zurb Foundation에 대한 참고사항: Simple Form에서는 Bootstrap과 Zurb Foundation 5가 모두 지원됩니다. 따라서 그 중 하나를 사용하는 경우 --bootstrap을 사용할 수 있습니다. 또는 --foundation 매개변수를 생성기와 함께 사용하여 설치 중에 추가 구성을 포함합니다. Bootstrap의 경우 다음과 같습니다:
단순형의 기본 사용법
앞서 지적했듯이 Simple Form은 주로 개체와 관련된 데이터를 기반으로 완전한 양식을 생성합니다. 그러나 Simple Form은 각 속성에 대해 적절한 필드를 생성할 뿐만 아니라 레이블을 제공하고 입력 필드 자체 위에 오류 힌트를 표시한다는 점을 이해하는 것도 중요합니다!
새로운 Ruby on Rails 7.x 애플리케이션을 고려해 보겠습니다. 사용자 모델을 생성하고 Simple Form을 사용하여 이에 대한 양식을 작성하겠습니다.
이제 new를 사용하여 컨트롤러를 생성할 수 있습니다. , create 및 index 행동. 목표는 형식에서 우리가 사용할 수 있는 것을 갖는 것입니다.
이러한 작업에는 관련 보기가 필요합니다. 다음은 사용자 가입 또는 추가를 처리하는 양식입니다.
이 경우 username에 대한 사용자 정의 레이블과 오류를 지정합니다. 입력. 그러한 사용자 정의가 전달되지 않으면 속성 이름을 기반으로 레이블이 무엇인지 추측하는 데 최선을 다할 것입니다.
password에 대한 사용자 정의 힌트를 설정했습니다. 필드 및 사용자 정의 placeholder email의 경우 필드. 또한 필드 위에 있는 레이블(양식의 일반적인 기본값) 대신 "인라인 레이블"을 지정하는 기능도 있습니다.
false를 전달하여 레이블, 힌트 및 오류를 비활성화할 수도 있습니다. 해당 속성의 값:<%= f.input :password_confirmation, label: false %> .
이를 사용 가능하게 하려면 뷰를 하나 더 추가하여 이를 보완해야 합니다.
그런 다음 rails s를 사용하여 애플리케이션을 시작할 수 있습니다. . localhost:3000/users/new로 가세요 양식을 보고 사용하려면 양식이 기존 Ruby on Rails 양식과 어떻게 다른지 집중적으로 살펴보겠습니다.
검증에 대한 참고사항 :간단한 양식은 기본적으로 필수 필드와 함께 작동할 수 있습니다. 예를 들어, 사용자 모델에 다음과 같은 존재 확인을 추가한다면:
이것은 Simple Form에서 username 옆에 작은 '*'를 추가하는 데 사용됩니다. 필드에 필수임을 지정합니다. 이는 오류를 자동으로 관리하지 않으므로 컨트롤러 작업에서 이를 처리해야 합니다. 오류가 있는 해당 필드로 돌아가 조치를 취하세요.
열 유형 및 양식 필드 정보
앞서 언급했듯이 각 필드에 대한 유형을 지정하지 않았습니다. Simple Form README에는 사용 가능한 모든 입력 유형의 전체 목록과 각 열 유형의 기본값이 있습니다. 가장 많이 사용되는 것은 다음과 같습니다:
부울
위 표에서 볼 수 있듯이 부울 속성은 기본적으로 확인란으로 표시됩니다. 많은 경우에, 그것이 우리가 원하는 것입니다. 하지만 그렇지 않은 경우 as를 사용하여 Simple Form에서 이를 사용자 정의하는 방법이 있습니다. 대신 라디오 버튼을 표시할지 드롭다운을 표시할지 지정할 수 있는 속성입니다.
대신 라디오 버튼을 지정하는 방법은 다음과 같습니다:
그러면 다음 HTML이 생성됩니다:
이렇게 작은 Ruby 코드 조각으로 완전한 HTML 조각을 얻을 수 있다는 것은 정말 인상적입니다!
HTML
이전 예에서 Simple Form이 각 필드에 대해 많은 HTML을 생성하는 방법을 확인할 수 있습니다. 여기에는 입력 필드의 HTML과 레이블 및 입력 필드 주위의 래퍼 div가 포함됩니다. input_html를 사용하여 사용자 정의 클래스와 ID를 지정하여 이를 사용자 정의할 수 있습니다. 및 wrapper_html 속성. 여기에 예가 있습니다.
이는 maxlength와 같은 관련 HTML의 속성을 설정하는 방법이기도 합니다. 또는 value . 사용자 양식에서 비밀번호 필드를 가져와 보겠습니다. maxlength를 사용하여 필드의 크기와 길이를 제한할 수 있습니다. 속성입니다.
맞춤 입력 및 추가 옵션
Simple Form은 HTML 노드를 준비하는 Ruby 라이브러리입니다. 전체 필드 세트가 함께 제공되지만 직접 추가할 수도 있습니다. 이렇게 하려면 Simple Form의 클래스를 상속하는 클래스를 생성하면 됩니다. 실제 필드 앞에 작은 '@' 접두어를 사용하여 사용자 정의 소셜 네트워크 입력 필드를 정의하는 것을 고려해 보겠습니다.
이제 다음과 같은 방법으로 사용할 수 있습니다:
사용자 모델에 network_handle가 없는 경우 주의하세요. 속성을 사용하려면 마이그레이션을 통해 추가하거나 attr_accessor를 사용하여 치트를 추가해야 합니다. 모델에서요.
i18n 지원
앞서 언급했듯이 형태를 구축하는 것이 종종 문제가 되는 경우가 있습니다. 그러나 여러 언어를 지원하는 웹사이트와 애플리케이션의 경우 상황은 더욱 어려워집니다. 다행히도 Simple Form은 Ruby on Rails 표준을 따릅니다. simple_form을 사용할 수 있습니다. 모든 라벨, 힌트, 플레이스홀더, 프롬프트 등에 대한 번역을 정의하려면 로컬 파일을 입력하세요.
다음은 간단한 예입니다:
값 개체
때로는 사용자 정의 비ActiveRecord 클래스를 사용하여 양식이 의존하는 기본 개체를 인스턴스화할 수도 있습니다. 이는 비즈니스 논리상의 이유로 여러 모델의 데이터를 합성 모델로 구성하거나 여러 속성을 단일 객체로 수집하기 위해 수행될 수 있습니다.
이유가 무엇이든 Simple Form을 사용하여 해당 종류의 개체에 대한 양식을 작성할 수 있습니다. 그렇게 하려면 객체 클래스가 세 가지 메서드(to_model)를 구현해야 합니다. 가장 좋은 경우는 다음과 같습니다. , to_key 및 persisted? .
to_model 메소드는 객체 자체를 가리킬 것입니다:
to_key 객체의 식별자 속성을 가리킬 수 있습니다. 일반적으로 이는 id를 의미합니다. 이름이 지정된 속성:
마지막으로 persisted? 객체가 직접 지속되는지 여부를 Simple Form에 알려주는 메소드가 있습니다.
해당 메소드가 없으면 f.submit 도우미를 사용할 수 없습니다.
하지만 ActiveModel::Model를 포함하여 더 빠른 방법이 있습니다. 클래스의 모듈:
그리고 이를 User 모델을 통해 사용해 보겠습니다.
그런 다음 사용자 양식 내에 회사 이름 필드를 추가할 수 있습니다:
물론 이 속성은 테이블에 저장되지 않습니다. 그러나 여러 모델에서 가져온 속성을 사용하여 값 개체를 구성하는 데에도 동일한 개념을 적용할 수 있습니다.
마무리
이 게시물에서 우리는 Simple Form이 Ruby on Rails 애플리케이션에 설치하고 통합하기 쉽다는 것을 확인했습니다. Simple Form은 양식의 각 필드 세부정보를 처리할 뿐만 아니라 복잡하고 완전한 HTML을 생성하여 양식의 스타일을 쉽게 지정하고 구성할 수 있습니다.
Simple Form의 문서를 자세히 살펴보고 이것이 얼마나 강력한지 확인하시기 바랍니다.
즐거운 코딩 되세요!
추신 Ruby Magic 게시물이 보도되는 즉시 읽으려면 Ruby Magic 뉴스레터를 구독하고 단 하나의 게시물도 놓치지 마세요!
토마스 리불레
객원 저자인 Thomas는 프랑스에 거주하는 백엔드 컨설턴트이자 클라우드 인프라 엔지니어입니다. 그는 13년 넘게 스타트업 및 회사와 협력하여 팀, 제품 및 인프라를 확장해 왔습니다. 그는 또한 프랑스의 GNU/Linux 잡지와 그의 블로그에 여러 차례 게재되었습니다.
Thomas Riboulet의 모든 기사