양식 활성화: Drupal의 양식 API로 사용자 경험 향상

게시 됨: 2023-04-11

"폼 피로"가 문제라는 것을 알고 계셨습니까?! 너무 많은 양식을 작성해야 할 때 피곤함을 느낍니다. 그러나 양식은 웹 사이트의 필수적인 부분이며 사이트 소유자는 양식 없이는 할 수 없습니다. 그렇다면 웹 사이트가 양식 피로를 줄이는 데 어떻게 도움이 되는지 확인할 수 있습니까? 쉬운! 간단하고 짧게 유지하고, 명확하고 간결한 지침을 제공하고, 긴 양식을 분할하고, 자동 완성을 사용하세요. 무엇보다도 가장 중요한 것은 이를 채울 수 있는 산뜻한 사용자 경험을 제공하고 있는지 확인하는 것입니다.

Drupal의 Form API는 어떤 웹사이트와도 잘 어울리는 쉽게 사용자 지정 및 테마 적용이 가능한 양식을 만드는 방법을 제공합니다. 개발자에게 Drupal에서 양식을 작성, 검증 및 처리할 수 있는 일련의 기능 및 API를 제공합니다. 놀라운 Drupal Form API에 대해 자세히 알아보고 다음 프로젝트에서 이를 구현하는 방법을 알아보세요.

드루팔 양식 API

양식 API를 사용해야 하는 이유

아시다시피 양식은 사용자가 데이터를 제출하여 양식과 상호 작용할 수 있도록 해주기 때문에 모든 웹 사이트에서 중요한 부분입니다. Drupal의 Form API를 사용하여 개발자는 연락처, 로그인 및 등록을 비롯한 다양한 목적을 위한 고유한 양식을 만들 수 있습니다. Form API를 고려해야 하는 몇 가지 이유:

  1. 사용하기 쉽고 많은 코딩 경험이 필요하지 않습니다. 간단하고 직관적인 기능을 사용하여 양식을 만들 수 있습니다.
  2. 양식 데이터를 쉽게 검증할 수 있는 내장 검증 기능을 제공합니다.
  3. XSS(교차 사이트 스크립팅) 및 CSRF(교차 사이트 요청 위조)와 같은 공격을 방지하는 데 도움이 되는 보안 기능이 내장되어 있습니다.
  4. 고도로 사용자 정의가 가능하며 여러 필드, 버튼 및 작업이 있는 복잡한 양식을 만드는 데 사용할 수 있습니다.
  5. 양식 API는 테마가 가능하므로 개발자는 CSS와 HTML을 변경하여 양식을 원하는 대로 만들 수 있습니다.
  6. 다른 Drupal API와 쉽게 통합할 수 있습니다.

양식을 작성하기 전에 알아야 할 사항

Drupal에서 자주 사용되는 다양한 형태가 있습니다. 각각은 자체 디자인의 고유한 모듈에서 확장할 수 있는 기본 클래스를 포함합니다.

먼저 작성해야 하는 양식 유형을 식별하십시오.

  • 일반적인 형식입니다. FormBase를 확장합니다.
  • 관리자가 모듈 설정을 업데이트할 수 있는 구성 양식입니다. ConfigFormBase를 확장합니다.

계층 구조에 FormBase가 있는 모든 양식은 FormBase가 FormInterface를 구현하므로 다음 메서드를 구현해야 합니다.

  • getFormId()
  • 빌드폼()
  • 제출양식()

Form API를 사용하여 일반 사용자 지정 양식을 만들려면 buildForm() 내부에 양식 요소 배열을 반환하는 함수를 정의해야 합니다. 각 요소의 키는 양식 요소의 이름이고 값은 요소를 정의하는 속성의 배열입니다. 예를 들어 텍스트 필드를 만들려면 다음과 같이 요소를 정의합니다.

 $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ];

유효성 검사 추가

양식 API는 또한 사용자 입력을 검증하는 방법을 제공합니다. 양식이 제출될 때 호출될 양식 정의에 유효성 검사 기능을 추가할 수 있습니다. 유효성 검사 기능이 오류 메시지를 반환하면 양식 제출이 금지되고 오류 메시지가 사용자에게 표시됩니다.

유효성 검사 기능을 추가하려면 validateForm() 을 구현해야 합니다.

양식 제출 처리

양식이 제출되면 Drupal은 사용자가 정의한 제출 함수를 호출합니다. 제출 기능은 양식 데이터를 데이터베이스에 저장하는 등 양식 데이터의 필요한 처리를 수행할 수 있습니다.

제출 기능을 정의하려면 submitForm()을 구현해야 합니다.

요청에 양식 통합

이 양식을 Drupal 사이트의 URI 구조에 통합하려면 다음과 같은 경로를 사용하십시오.

 example.form: path: '/example-form' defaults: _title: 'Example form' _form: '\Drupal\example\Form\ExampleForm' requirements: _permission: 'access content'

_form 키는 제공된 클래스 이름이 인스턴스화되고 양식으로 처리될 양식 클래스임을 라우팅 시스템에 알립니다.

Drupal Form API로 사용자 정의 양식 만들기

Drupal의 양식 API를 사용하여 사용자 지정 양식을 만드는 프로세스를 시작하려면 다음 단계를 따르십시오.

  1. 사용자 지정 모듈 내에 .info.yml 을 만듭니다. ( 사용자 지정 양식을 위한 별도의 모듈을 생성하므로 기존 모듈에 양식을 추가하는 데 이 단계가 필요하지 않습니다 .)
  2. 양식 배열을 반환하기 위한 양식 클래스를 만듭니다. (custom_module/src/Form/Registration.php )
  3. .routing.yml 파일 생성
  4. .module 과 hook_form_alter() 및/또는 hook_form_FORM_ID_alter()를 생성하여 양식을 변경합니다( 필요한 경우 ).

다음은 직원 등록 양식의 전체 예입니다.

폴더 구조:

직원 등록

1. 직원_등록.info.yml

 name: Employee Registration Form type: module description: Custom module for implementing custom employee registration form. core_version_requirement: ^9 || ^10 package: Custom

2. src/양식/Registration.php

 <?php namespace Drupal\employee_registration\Form; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; /** * Implements a custom form. */ class Registration extends FormBase { /** * {@inheritdoc} */ public function getFormId() { return 'employee_registration_form'; } /** * {@inheritdoc} */ public function buildForm(array $form, FormStateInterface $form_state) { $form['emp_name'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Name'), '#required' => TRUE, ]; $form['emp_no'] = [ '#type' => 'textfield', '#title' => $this->t('Enter Employee Number'), '#required' => TRUE, ]; $form['emp_mail'] = [ '#type' => 'email', '#title' => $this->t('Enter Email ID'), '#required' => TRUE, ]; $form['emp_phone'] = [ '#type' => 'tel', '#title' => $this->t('Enter Contact Number'), ]; $form['emp_dob'] = [ '#type' => 'date', '#title' => $this->t('Enter DOB'), '#required' => TRUE, ]; $form['emp_gender'] = [ '#type' => 'select', '#title' => $this->t('Select Gender'), '#options' => [ 'Male' => $this->t('Male'), 'Female' => $this->t('Female'), 'Other' => $this->t('Other'), ], ]; $form['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save'), '#button_type' => 'primary', ]; return $form; } /** * {@inheritdoc} */ public function validateForm(array &$form, FormStateInterface $form_state) { if (strlen($form_state->getValue('emp_phone')) < 10) { $form_state->setErrorByName('emp_phone', $this->t('The phone number is too short. Please enter a full phone number.')); } } /** * {@inheritdoc} */ public function submitForm(array &$form, FormStateInterface $form_state) { // Processing form data. $this->messenger()->addMessage($this->t("Employee Registration Done!!")); foreach ($form_state->getValues() as $key => $value) { $this->messenger()->addMessage($key . ': ' . $value); } } }

3. 직원_등록.routing.yml

 employee_registration.form: path: '/registration-form' defaults: _title: 'Employee Registration' _form: '\Drupal\employee_registration\Form\Registration' requirements: _permission: 'access content'

결과:

직원 등록 양식

emp reg 결과 페이지

마지막 생각들

Form API를 사용하면 Drupal의 유효성 검사 및 처리 기능을 사용하여 복잡한 맞춤형 양식을 만들 수 있습니다. Form API를 사용하면 양식이 일관되고 사용자가 사용하기 쉽다는 것을 확신할 수 있습니다. 청중을 위한 사용자 친화적인 경험을 구축하는 데 도움을 줄 Drupal 에이전시를 찾고 계십니까? 오늘 Drupal 전문가와 상담하십시오!