DomDocument를 사용하여 PHP에서 양식 구축-CSS 튜토리얼-php.cn

DomDocument를 사용하여 PHP에서 양식 구축

네트워크를 작동시키는 템플릿. 데이터 및 구조 합성 내용 . 개발자에게는 이것이 우리의 가장 멋진 초강대국입니다. 데이터를 얻은 다음 우리에게 효과가있게하여 필요한 형태로 렌더링하십시오. 객체 배열은 테이블, 카드 목록, 차트 또는 사용자에게 가장 유용하다고 생각되는 모든 것으로 바꿀 수 있습니다. 데이터가 자체 마크 다운 파일의 블로그 게시물이든 최신 글로벌 환율이든 마크 업 및 궁극적 인 사용자 경험은 미국 프론트 엔드 개발자에게 달려 있습니다.

PHP는 데이터를 태그와 병합하는 여러 가지 방법을 제공하는 템플릿을위한 강력한 언어입니다. 데이터를 사용하여 HTML 양식을 작성하는 예를 살펴 보겠습니다.

지금 시작하고 싶습니까? 구현 섹션으로 이동하십시오.

PHP에서는 이중 인용문을 사용하여 변수를 문자열 문자로 인라인 할 수 있으므로 변수 $name = 'world' 가 있으면 echo "Hello, {$name}" 쓸 수 있습니다. 더 복잡한 템플릿의 경우 echo "Hello, " . $name . "." .

오래된 프로그래머의 경우 printf("Hello, %s", $name) 도 있습니다. 멀티 라인 문자열의 경우 Heredoc을 사용할 수 있습니다 ( Hello, = $name ?> ). 이러한 모든 옵션은 훌륭하지만 많은 인라인 논리가 필요할 때 상황이 지저분해질 수 있습니다. 양식이나 탐색과 같은 복합 HTML 문자열을 구축 해야하는 경우 HTML 요소가 서로 중첩 될 수 있기 때문에 복잡성이 무한 할 수 있습니다.

우리가 피하려고하는 것

우리가하고 싶은 일을 계속하기 전에, 우리가하고 싶지 않은 일에 대해 생각하는 것은 1 분의 가치가 있습니다. WordPress Core Core class-walker-nav-menu.php 의 170-270 행의 발췌를 고려하십시오.

  php // class-walker-nav-menu.php
// ...
$ output. = $ 들여 쓰기.

로그인 후 복사

';; // ... $ item_output = $ args-> 이전; $ item_output. = ' '; $ item_output. = $ args-> intruct_before. $ item_output. = ' '; $ item_output. = $ args-> 이후; // ... $ output. = apply_filters ( 'walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args); // ... $ output. = "{$ n}";

내비게이션을 구축하기 위해이 함수에서 우리는 매우 긴 문자열 인 변수 $output 사용하며 컨텐츠를 계속 추가합니다. 이 유형의 코드는 매우 구체적이고 제한된 운영 순서가 있습니다. 우리가 원한다면<a></a> 실행되기 전에 $attributes 에 액세스 해야하는 속성을 추가하십시오. 우리가 원한다면<a></a> 선택적으로 하나를 중첩합니다<span></span> 또는 a<img alt="DomDocument를 사용하여 PHP에서 양식 구축" > , 우리는 새로운 코드 블록을 작성하여 Line 7의 중간 부분을 추가하려는 내용에 따라 약 4-10 개의 새로운 코드 라인으로 대체해야합니다. 이제 선택적으로 추가해야한다고 상상해보십시오<span></span> , 선택적으로 추가하십시오<img alt="DomDocument를 사용하여 PHP에서 양식 구축" > , 또는 내<span></span> 내부 또는 나중에 추가하십시오. 이것은 자체가 세 가지 IF 문으로 코드를 읽기 어렵게 만듭니다. 이와 같은 현을 연결할 때, 문자열 파스타로 끝나는 것은 쉽습니다.

문제의 본질은 우리가 HTML 요소를 추론하려고 할 때 문자열에 대해 생각하지 않는다는 것 입니다. 브라우저는 문자열을 소비하고 PHP는 문자열을 출력합니다. 그러나 우리의 정신 모델은 DOM과 비슷합니다. 요소는 나무와 같은 구조로 배열되며 각 노드에는 많은 잠재적 특성, 특성 및 하위 노드가 있습니다.

나무를 짓는 구조적이고 표현적인 방법이 있다면 좋지 않습니까?

입력하다……

domdocument 클래스

PHP 5는 DOM 모듈을 유형적으로 타이핑하지 않은 라인업에 추가합니다. 주요 진입 점은 DomDocument 클래스이며 Web API의 JavaScript DOM과 유사합니다. document.createElement 사용한 적이 있거나 일부 연령대에 jQuery 's $(' 안녕하세요!

') 구문. 매우 친숙하다고 느낄 수 있습니다. 먼저 새 domdocument를 초기화합니다.

 $ dom = 새로운 domdocument ();

로그인 후 복사

이제 우리는 domelement를 추가 할 수 있습니다.

 $ p = $ dom-> CreateElement ( 'P');

로그인 후 복사

문자열 'p'는 우리가 원하는 요소 유형을 나타내므로 다른 유효한 문자열은 'div', 'img'등이 될 수 있습니다.

요소가 있으면 속성을 설정할 수 있습니다.

 $ p-> setAttribute ( 'class', 'Headline');

로그인 후 복사

자식 노드를 추가 할 수 있습니다.

 $ span = $ dom-> createElement ( 'span', '이것은 헤드 라인입니다');
$ p-> AppendChild ($ span);

로그인 후 복사

마지막으로 한 번에 완전한 HTML 문자열을 가져옵니다.

 $ dom-> AppendChild ($ P);
$ htmlstring = $ dom-> savehtml ();
echo $ htmlstring;

로그인 후 복사

이 코딩 스타일은 우리의 정신 모델에 따라 구성 할 수 있습니다. 문서에는 요소가 포함되어 있습니다. "HTML은 단지 문자열 일뿐"부분이 끝에 나타납니다. "문서"는 전체 문서를 나타내지 않아도되기 때문에 실제 DOM과 약간 다릅니다. 단지 HTML 블록이기 때문입니다. 실제로 두 가지 유사한 요소를 작성 해야하는 경우 saveHTML() 사용하여 HTML 문자열을 저장하고 DOM "문서"를 추가로 수정 한 다음 saveHTML() 다시 호출하여 새 HTML 문자열을 저장할 수 있습니다.

데이터를 얻고 구조를 설정하십시오

CRM 제공 업체의 데이터와 자체 태그를 사용하여 서버에서 양식을 작성해야한다고 가정 해 봅시다. CRM의 API 응답은 다음과 같습니다.

 {
  "제출 _button_label": "지금 제출!",
  "필드": [
    {
      "ID": "First-Name",
      "유형": "텍스트",
      "레이블": "이름",
      "필수": 사실,
      "validation_message": "이름이 필요합니다.",
      "max_length": 30
    },
    {
      "ID": "카테고리",
      "유형": "Multiple_choice",
      "레이블": "적용되는 모든 카테고리 선택",
      "필수": 거짓,
      "Field_metadata": {
        "multi_select": true,
        "가치": [
          { "value": "travel", "label": "Travel"},
          { "value": "마케팅", "레이블": "마케팅"}}
        ]]
      }
    }
  ]]
}

로그인 후 복사

이 예제는 특정 CRM의 정확한 데이터 구조를 사용하지 않지만 상당히 대표적입니다.

그리고 우리의 태그가 다음과 같이 보이기를 원한다고 가정합니다.

<label>
  <input type="text" placeholder=" " id="first-name" required maxlength="30">
  이름
  <em>이름이 필요합니다.</em>
</label>
<label>
  </label>
    <div>
      <input type="checkbox" value="travel" id="category-travel" name="category">
      <label for="category-travel">여행하다</label>
    </div>
    <div>
      <input type="checkbox" value="marketing" id="category-marketing" name="category">
      <label for="category-marketing">마케팅</label>
    </div>
  
  적용되는 모든 카테고리를 선택하십시오

로그인 후 복사

자리 표시 자 ""? "? 이것은 JavaScript를 사용하지 않고 CSS에서 필드가 비어 있는지 추적 할 수있는 작은 트릭입니다. 입력이 비어있는 한 input:placeholder-shown 하지만 사용자는 눈에 띄는 자리 표시 자 텍스트가 표시되지 않습니다. 이것은 마크 업을 제어 할 때 우리가 할 수있는 일입니다!

이제 우리가 달성하고 싶은 것을 알았으므로 여기 게임 계획이 있습니다.

API에서 필드 정의 및 기타 컨텐츠를 가져옵니다
DomDocument를 초기화합니다
필드를 반복하고 필요에 따라 각 필드를 구축하십시오.
HTML 출력을 얻으십시오

따라서 프로세스를 구축하고 몇 가지 기술적 인 문제를 해결해 봅시다.

  php function renderform ($ endpoint) {
  // API에서 데이터를 가져 와서 php 객체로 변환하십시오 $ formresult = file_get_contents ($ endpoint);
  $ formcontent = json_decode ($ formresult);
  $ formfields = $ FormContent-> 필드;

  // 돔 구축을 시작합니다
  $ dom = 새로운 domdocument ();
  $ form = $ dom-> createElement ( 'form');

  // 필드를 반복하고 각 필드를 구축하십시오.
    // TODO : 필드 데이터에서 일부 작업 수행}

  // html 출력을 가져옵니다 $ dom-> AppendChild ($ form);
  $ htmlstring = $ dom-> savehtml ();
  echo $ htmlstring;
}

로그인 후 복사

지금까지 우리는 데이터를 가져 와서 구문 분석하고 DomDocument를 초기화하고 출력을 반영했습니다. 우리는 각 분야에서 무엇을하고 싶습니까? 먼저, 컨테이너 요소를 만들어 봅시다.이 예에서는<label></label> 모든 필드 유형에 공통적 인 태그 :

  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오. $ label = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  if ($ field-> label) {
    $ label = $ dom-> createElement ( 'span', $ field-> label);
    $ label-> setAttribute ( 'class', 'label');
  }

  //`` <label>`</label> 에 태그를 추가하십시오<label>
  if ($ label) $ element-> AppendChild ($ label);
}</label></span></label><p> 우리는 루프에 있고 PHP는 루프의 범위 범위가 아니기 때문에 각 반복에 대해 <code>$label</code> 요소를 재설정합니다. 그런 다음 필드에 레이블이 있으면 요소를 만듭니다. 마지막으로 컨테이너 요소에 추가됩니다.</p><p> <code>setAttribute</code> 메소드를 사용하여 클래스를 설정합니다. 웹 API와 달리 불행히도 클래스 목록에 대한 특별한 대우는 없습니다. 그들은 단지 또 다른 속성입니다. 매우 복잡한 클래스 논리가있는 경우 PHP ™이기 때문에 배열을 생성하고 다음과 같이 할 수 있습니다. <code>$label->setAttribute('class', implode($labelClassList))</code> .</p><h3> 단일 입력</h3><p> API는 특정 필드 유형 만 반환한다는 것을 알고 있으므로 유형을 전환하고 각 유형에 대한 특정 코드를 작성할 수 있습니다.</p><pre class="brush:php;toolbar:false">  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오 $ input = null;
  $ label = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  // ...

  // 입력 요소 스위치 빌드 ($ field-> type) {
    사례 '텍스트':
    사례 '이메일':
    케이스 '전화':
      $ input = $ dom-> createElement ( 'input');
      $ input-> setAttribute ( '자리 표시 자', '');
      if ($ field-> type === 'email') $ input-> setattribute ( 'type', 'email');
      if ($ field-> type === '전화') $ input-> setattribute ( 'type', 'tel');
      부서지다;
  }
}</span></label><p> 이제 텍스트 영역, 단일 확인란 및 숨겨진 필드를 다루겠습니다.</p><pre class="brush:php;toolbar:false">  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오 $ input = null;
  $ label = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  // ...

  // 입력 요소 스위치 빌드 ($ field-> type) {
    // ...
    사례 'text_area':
      $ input = $ dom-> CreateElement ( 'TextArea');
      $ input-> setAttribute ( '자리 표시 자', '');
      if ($ rows = $ field-> field_metadata-> rows) $ input-> setattribute ( 'rows', $ rows);
      부서지다;

    CASE 'CheckBox':
      $ element-> setAttribute ( 'class', 'Field Single-Checkbox');
      $ input = $ dom-> createElement ( 'input');
      $ input-> setattribute ( 'type', 'checkbox');
      if ($ field-> field_metadata-> 처음 _checked === true) $ input-> setAttribute ( 'Checked', 'Checked');
      부서지다;

    사례 '숨겨진':
      $ input = $ dom-> createElement ( 'input');
      $ input-> setattribute ( 'type', 'hidden');
      $ input-> setattribute ( 'value', $ field-> field_metadata-> value);
      $ element-> setAttribute ( 'hidden', 'hidden');
      $ element-> setAttribute ( 'style', 'display : none;');
      $ label-> textContent = '';
      부서지다;
  }
}</span></label><p> 우리가 확인란과 숨겨진 상황으로 수행 한 몇 가지 새로운 작업에 주목하십니까? 우리는 창조했을뿐만 아니라<code><input></code> 우리는 여전히 <em>컨테이너를</em> 바꾸고 있습니다<code><label></label></code> 요소! 단일 확인란 필드의 경우 컨테이너 클래스를 수정하여 확인란과 레이블을 가로로 정렬 할 수 있습니다.<code><label></label></code> 컨테이너도 완전히 숨겨져 있어야합니다.</p><p> 이제 문자열을 연결하면이 시점에서 변경할 수 없습니다. 우리는 블록 상단에 요소 유형과 메타 데이터에 대한 if 문장을 추가해야합니다. 또는 더 나쁜 것은 아마도 이전에 전환을 시작하고 각 지점간에 많은 공개 코드를 복사합니다.</p><p> 그리고 이것이 DomDocument와 같은 건축업자를 사용하는 것의 진정한 이점입니다. 모든 것이 여전히 편집 가능하며 <code>saveHTML()</code> 클릭 할 때까지 모든 것이 여전히 구성됩니다.</p><h3> 중첩 루프 요소</h3><p> 추가하자<code><select></select></code> 요소의 논리 :</p><pre class="brush:php;toolbar:false">  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오 $ input = null;
  $ label = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  // ...

  // 입력 요소 스위치 빌드 ($ field-> type) {
    // ...
    CASE 'SELECT':
      $ element-> setAttribute ( 'class', 'field select');
      $ input = $ dom-> createElement ( 'select');
      $ input-> setattribute ( '필수', '필수');
      if ($ field-> field_metadata-> multi_select === true)
        $ input-> setattribute ( '배수', '다중');

      $ 옵션 = [];

      // 사전 선택된 옵션이 있는지 추적 $ 옵션 선거 = false;

      foreach ($ field-> field_metadata-> 값으로 $ value) {
        $ 옵션 = $ dom-> createElement ( '옵션', htmlspecialchars ($ value-> label));

        // 값이 없으면 (! $ value-> value) 계속;

        // ($ value-> selected === true) if 사이드 선정 옵션을 설정합니다.
          $ 옵션-> setAttribute ( 'selected', 'selected');
          $ 옵션 선택 = true;
        }
        $ 옵션-> setAttribute ( 'value', $ value-> value);
        $ 옵션 [] = $ 옵션;
      }

      // 사전 선택된 옵션이없는 경우 ($ 옵션 선정 === 거짓) {{event placeholder 옵션을 작성하십시오.
        $ emplyOption = $ dom-> createElement ( '옵션');

        // foreach ([hidden ','disabled ','selected '] as $ 속성)를 숨기고 비활성화하고 선택할 옵션 설정
          $ emplyOption-> setAttribute ($ attribute, $ attribute);
        $ input-> AppendChild ($ empalloption);
      }

      // 배열에` <select>`</select> 에 옵션을 추가하십시오<select>
      foreach ($ 옵션으로 $ 옵션) {
        $ input-> AppendChild ($ 옵션);
      }
      부서지다;
  }
}</select></span></label><p> 좋아, 여기에는 할 일이 많지만 근본적인 논리는 동일합니다. 외부 설정<code><label></label></code> 그 후, 우리는 a를 만듭니다<code><option></option></code> 배열, 그것을 추가하십시오.</p><p> 우리도 여기서도했습니다<code><select></select></code> 특별 트릭 : 사전 선택 옵션이 없으면 이미 선택한 빈 자리 표시 자 옵션을 추가하지만 사용자는 선택할 수 없습니다. 목표는 CSS를 사용하여 우리의 양도하는 것입니다<code><label></label></code> "자리 표시 자"로서이 기술은 다양한 설계에 사용될 수 있습니다. 다른 옵션을 추가하기 전에 <code>$input</code> 에 추가하여 태그의 첫 번째 옵션인지 확인합니다.</p><p> 지금 처리합시다<code><fieldset></fieldset></code> 라디오 버튼 및 확인란 :</p><pre class="brush:php;toolbar:false">  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오 $ input = null;
  $ label = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  // ...

  // 입력 요소 스위치 빌드 ($ field-> type) {
    // ...
    사례 'Multiple_choice':
      $ chiceType = $ field-> field_metadata-> multi_select === 'checkbox': 'Radio';
      $ element-> setAttribute ( 'class', "field {$ choicetype} -group");
      $ input = $ dom-> CreateElement ( 'FieldSet');

      // 필드 세트의 각 옵션에 대해 선택을 빌드하십시오.</span></label>
      foreach ($ field-> field_metadata-> 값으로 $ choiceValue) {
        $ choicefield = $ dom-> createElement ( 'div');
        $ choicefield-> setAttribute ( 'class', 'choice');

        // 필드 ID를 사용하여 ID를 선택하여 고유 한 ID를 설정합니다.
        $ choleId = "{$ field-> id}-{$ choiceValue-> value}";

        // 빌드<input> `요소 $ 선택 = $ dom-> createElement ( '입력');
        $ 선택-> setAttribute ( 'type', $ choiceType);
        $ 선택-> setAttribute ( 'value', $ choiceValue-> value);
        $ 선택-> setAttribute ( 'id', $ choiceId);
        $ 선택-> setAttribute ( 'name', $ field-> id);
        $ choicefield-> AppendChild ($ 선택);

        // 빌드`` <label>````````label '', $ choiceValue-> label);
        $ choicelabel-> setAttribute ( 'for', $ choiceId);
        $ choicefield-> AppendChild ($ Choicelabel);

        $ input-> AppendChild ($ choicefield);
      }
      부서지다;
  }
}</label><p> 따라서 먼저 필드 세트가 확인란인지 라디오 버튼인지 여부를 결정합니다. 그런 다음 그에 따라 컨테이너 클래스를 설정하고 빌드합니다<code><fieldset></fieldset></code> . 그 후, 우리는 사용 가능한 옵션을 반복하고 각 옵션마다 하나를 빌드합니다.<code><div> 하나가 포함되어 있습니다<code><input></code> 그리고 하나<code><label></label></code> . 일반 PHP 문자열 보간을 사용하여 21 행에 컨테이너 클래스를 설정하고 각 옵션에 대해 30 행에 고유 ID를 만듭니다.<h3> 파편</h3>
<p> 우리가 추가해야 할 마지막 유형은 보이는 것보다 조금 더 복잡합니다. 많은 양식에는 입력이 아닌 설명 필드가 포함되어 있지만 다른 필드 사이에 인쇄 해야하는 HTML 만 포함합니다.</p>
<p> 다른 domDocument 메소드를 사용하여 <code>createDocumentFragment()</code> 사용해야합니다. 이를 통해 DOM 구조를 사용하지 않고 임의의 HTML을 추가 할 수 있습니다.</p>
<pre class="brush:php;toolbar:false">  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오 $ input = null;
  $ label = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  // ...

  // 입력 요소 스위치 빌드 ($ field-> type) {
    // ...
    사례 '명령':
      $ element-> setAttribute ( 'class', 'field text');
      $ fragment = $ dom-> createCumentFragment ();
      $ fragment-> 부록 ($ field-> text);
      $ input = $ dom-> CreateElement ( 'P');
      $ input-> AppendChild ($ Fragment);
      부서지다;
  }
}</span></label><p> 이 시점에서 실제로 정적을 나타내는 <code>$input</code> 이라는 객체를 어떻게 얻는 지 궁금합니다.<code><p> 요소. 목표는 필드 루프의 각 반복에 대해 공통 변수 이름을 사용하는 것입니다. 결국 실제 필드 유형에 관계없이 <code>$element->appendChild($input)</code> 로 항상 추가 할 수 있습니다. 그렇습니다.</p>
<h3> 확인하다</h3>
<p> 우리가 사용하는 API는 각 필드 필드에 대해 별도의 검증 메시지를 제공합니다. 커밋 오류가 발생하면 바닥에 공통 "oops, 잘못된"메시지를 표시하는 대신 필드에 인라인 오류를 표시 할 수 있습니다.</p>
<p> 각 요소에 유효성 검사 텍스트를 추가하겠습니다.</p>
<pre class="brush:php;toolbar:false">  php // ...
// 필드를 반복하고 각 필드를 구축하십시오.
  // <label>컨테이너</label> 빌드``<label>
  $ 요소 = $ dom-> createElement ( 'label');
  $ element-> setAttribute ( 'class', 'field');

  // 입력 값을 재설정하십시오 $ input = null;
  $ label = null;
  $ validation = null;

  // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
  // ...

  // 확인 메시지가 설정되면``` <em>`를</em> 추가하십시오.<em>
  if (isset ($ field-> validation_message)) {
    $ validation = $ dom-> createElement ( 'em');
    $ fragment = $ dom-> createCumentFragment ();
    $ fragment-> 부록 ($ field-> validation_message);
    $ validation-> AppendChild ($ fragment);
    $ validation-> setAttribute ( 'class', 'validation-message');
    $ validation-> setAttribute ( 'hidden', 'hidden'); // 현장에 오류가 있으면 javaScript를 사용하지 않으면}.

  // 입력 요소 스위치 빌드 ($ field-> type) {
    // ...
  }
}</em></span></label><p> 그게 다야! 필드 유형 로직을 처리 할 필요가 없습니다. 각 필드마다 하나의 요소를 조건부로 구축하십시오.</p><h3> 모든 컨텐츠를 통합합니다</h3><p> 그렇다면 모든 필드 요소를 구축 한 후에는 어떻게됩니까? 우리는 구축중인 Dom 트리에 <code>$input</code> , <code>$label</code> 및 <code>$validation</code> 객체를 추가해야합니다. 우리는 또한이 기회를 활용하여 <code>required</code> 와 같은 공개 속성을 추가 할 수 있습니다. 그런 다음이 API의 필드와 별도로 제출 버튼을 추가합니다.</p><pre class="brush:php;toolbar:false">  php function renderform ($ endpoint) {
  // API에서 데이터를 가져 와서 PHP 객체로 변환 // ...

  // 돔 구축을 시작합니다
  $ dom = 새로운 domdocument ();
  $ form = $ dom-> createElement ( 'form');

  // 필드를 반복하고 각 필드를 구축하십시오.
    // <label>컨테이너</label> 빌드``<label>
    $ 요소 = $ dom-> createElement ( 'label');
    $ element-> setAttribute ( 'class', 'field');

    // 입력 값을 재설정하십시오 $ input = null;
    $ label = null;
    $ validation = null;

    // 태그가 설정되면`` <span>`를</span> 추가하십시오<span>
    // ...

    // 확인 메시지가 설정되면``` <em>`를</em> 추가하십시오.<em>
    // ...

    // 입력 요소 스위치 빌드 ($ field-> type) {
      // ...
    }

    // 입력 요소 추가 if ($ input) {
      $ input-> setattribute ( 'id', $ field-> id);
      if ($ field-> 필수)
        $ input-> setattribute ( '필수', '필수');
      if (isset ($ field-> max_length))
        $ input-> setattribute ( 'maxlength', $ field-> max_length);
      $ element-> AppendChild ($ 입력);

      if ($ label)
        $ element-> AppendChild ($ label);

      if ($ validation)
        $ element-> AppendChild ($ validation);

      $ form-> AppendChild ($ 요소);
    }
  }

  // 제출 버튼을 빌드 버튼을 빌드 $ doputtonLabel = $ formContent-> 제출 _BUTTON_LABEL;
  $ dopmentButtonfield = $ dom-> createElement ( 'div');
  $ dopmentButtonfield-> setAttribute ( 'class', 'Field Dubmit');
  $ dopmentButton = $ dom-> createElement ( 'button', $ dopmentButtonLabel);
  $ dopmentButtonfield-> AppendChild ($ dopmitbutton);
  $ form-> AppendChild ($ dopmitbuttonfield);

  // html 출력을 가져옵니다 $ dom-> AppendChild ($ form);
  $ htmlstring = $ dom-> savehtml ();
  echo $ htmlstring;
}</em></span></label><p> <code>$input</code> True인지 확인하는 이유는 무엇입니까? 루프 상단에서 NULL로 재설정하고 유형이 기대하는 스위치 케이스와 일치하는 경우에만 빌드하므로 실수로 코드가 올바르게 처리 할 수없는 예기치 않은 요소가 포함되지 않도록합니다.</p><p> 봐봐, 맞춤형 HTML 양식!</p><h3> 추가 내용 : 행 및 열</h3><p> 아시다시피, 많은 형태의 건축업자를 통해 저자는 필드의 행과 열을 설정할 수 있습니다. 예를 들어, 행에는 각각 별도의 50% 너비 열에있는 성 필드와 성 필드가 모두 포함될 수 있습니다. 그래서 당신은 어떻게 우리가 이것을 달성 할 수 있습니까? 물론, 예제를 제시함으로써 DomDocument의 루프 친화 성을 설명해 봅시다!</p><p> API 응답에는 다음과 같이 그리드 데이터가 포함됩니다.</p><pre class="brush:php;toolbar:false"> {
  "제출 _button_label": "지금 제출!",
  "필드": [
    {
      "ID": "First-Name",
      "유형": "텍스트",
      "레이블": "이름",
      "필수": 사실,
      "validation_message": "이름이 필요합니다.",
      "max_length": 30,
      "행": 1,
      "열": 1
    },
    {
      "ID": "카테고리",
      "유형": "Multiple_choice",
      "레이블": "적용되는 모든 카테고리 선택",
      "필수": 거짓,
      "Field_metadata": {
        "multi_select": true,
        "가치": [
          { "value": "travel", "label": "Travel"},
          { "value": "마케팅", "레이블": "마케팅"}}
        ]]
      },
      "행": 2,
      "열": 1
    }
  ]]
}

로그인 후 복사

우리는 data-column 속성을 추가하는 것이 너비를 설정하기에 충분하다고 가정하지만 각 행에는 자체 요소 (즉, CSS 그리드가 없음)가 필요합니다.

더 깊이 파고 들기 전에 행을 추가하는 데 필요한 것을 고려해 봅시다. 기본 논리는 다음과 같습니다.

발생한 최신 행을 추적하십시오.
현재 선이 더 크면, 즉 다음 줄로 점프하면 새 줄 요소를 만들고 이전 줄에 추가하는 대신 컨텐츠를 추가하기 시작하십시오.

이제 우리가 현을 연결하고 있다면 어떻게해야합니까? 아마도 새 줄에 도달 할 때마다 ' <div>'</div> 와 비슷한 문자열을 추가 할 것입니다. 이 "리버스 html 문자열"은 항상 나에게 매우 혼란스러워서 내 IDE가 어떤 느낌인지 상상할 수 있습니다. 가장 중요한 것은 브라우저가 오픈 태그를 자동으로 닫으므로 간단한 오타는 무수한 중첩으로 이어질 수 있습니다.<div> . 재미 있지만 반대입니다. 그렇다면이 문제를 다루는 구조화 된 접근법은 무엇입니까? 질문 해 주셔서 감사합니다. 먼저 루프 전에 행 흔적을 추가하고 추가 행 컨테이너 요소를 작성하겠습니다. 그런 다음 각 컨테이너 <code>$element $form 에 직접 추가하는 대신 $rowElement 에 추가해야합니다.

  php function renderform ($ endpoint) {
  // API에서 데이터를 가져 와서 PHP 객체로 변환 // ...

  // 돔 구축을 시작합니다
  $ dom = 새로운 domdocument ();
  $ form = $ dom-> createElement ( 'form');

  // 행 추적 $ row = 0;
  $ rowlement = $ dom-> createElement ( 'div');
  $ rowlement-> setAttribute ( 'class', 'field-row');

  // 필드를 반복하고 각 필드를 구축하십시오.
    // <label>컨테이너</label> 빌드``<label>
    $ 요소 = $ dom-> createElement ( 'label');
    $ element-> setAttribute ( 'class', 'field');
    $ element-> setAttribute ( 'data-row', $ field-> row);
    $ element-> setAttribute ( 'data-column', $ field-> 열);

    // line에 입력 요소를 추가 if ($ input) {
      // ...
      $ rowlement-> AppendChild ($ 요소);
      $ form-> AppendChild ($ rowlement);
    }
  }
  // ...
}</label><p> 지금까지 우리는 방금 현장 주변에 또 다른 추가를 추가했습니다<code><div> . 루프 내 각 행에 <em>새</em> 행 요소를 작성하겠습니다.<pre class="brush:php;toolbar:false">  php // ...
// 행 추적 $ row = 0;
$ rowlement = $ dom-> createElement ( 'div');
$ rowlement-> setAttribute ( 'class', 'field-row');

// 필드를 반복하고 각 필드를 구축하십시오.
  // ...
  // 새 행에 도달하면 새 $ rowlement를 만듭니다.
  if ($ field-> row> $ row) {
    $ row = $ field-> 행;
    $ rowlement = $ dom-> createElement ( 'div');
    $ rowlement-> setAttribute ( 'class', 'field-row');
  }

  // 입력 요소 스위치 빌드 ($ field-> type) {
    // ...
    // line에 입력 요소를 추가 if ($ input) {
      // ...
      $ rowlement-> AppendChild ($ 요소);

      // 자동으로 $ form-> AppendChild ($ rowlement);
    }
  }
}

로그인 후 복사

PHP가 새로운 고유 한 개체로 취급하는 $rowElement 객체를 새로운 DOM 요소로 덮어 써야합니다. 따라서 각 루프가 끝나면 현재 $rowElement 추가됩니다. 이전 반복과 동일한 요소 인 경우 양식이 새로운 요소라면 끝까지 추가됩니다.

다음 단계

양식은 객체 지향 템플릿의 훌륭한 사용 사례입니다. WordPress Core 코드의 스 니펫을 감안할 때 중첩 메뉴도 좋은 사용 사례라고 생각할 수 있습니다. 복잡한 논리를 따르는 모든 작업은이 접근법의 좋은 후보입니다. DomDocument는 모든 XML을 출력 할 수 있으므로 게시물 데이터에서 RSS 피드를 구축하는 데 사용할 수도 있습니다.

다음은 우리 양식의 전체 코드 스 니펫입니다. 작업중인 모든 양식 API로 자유롭게 조정하십시오. 이것은 공식 문서이며 사용 가능한 API를 이해하는 것이 도움이됩니다.

우리는 DomDocument가 기존 HTML 및 XML을 구문 분석 할 수 있다고 언급하지 않았습니다. 그런 다음 XPath API를 사용하여 document.querySelector 또는 Node.js의 Cheerio와 다소 유사한 요소를 찾을 수 있습니다. 학습 곡선은 약간 가파르지만 외부 콘텐츠를 처리하기위한 매우 강력한 API입니다.

재미있는 사실 : X로 끝나는 Microsoft Office 파일 (예 : .xlsx)은 XML 파일입니다. 마케팅 부서에 말하지 말고 서버에서 문서를 구문 분석하고 HTML을 출력 할 수 있습니다.

가장 중요한 것은 템플릿이 초강대국이라는 것을 기억하는 것입니다. 올바른 상황에 적합한 마크 업을 구축 할 수 있다는 것은 훌륭한 사용자 경험을 얻는 열쇠가 될 수 있습니다.