PHP lấy phần tử HTML

Tạo khuôn mẫu làm cho trang web hoạt động. Tổng hợp dữ liệu và cấu trúc thành nội dung. Đó là siêu năng lực thú vị nhất của chúng tôi với tư cách là nhà phát triển — lấy một số dữ liệu, sau đó làm cho dữ liệu đó hoạt động cho chúng tôi, trong bất kỳ bản trình bày nào chúng tôi cần. Mảng đối tượng có thể trở thành bảng, danh sách thẻ, biểu đồ hoặc bất kỳ thứ gì chúng tôi cho là hữu ích nhất cho người dùng. Cho dù dữ liệu là các bài đăng trên blog của riêng chúng tôi trong các tệp Markdown hay tỷ giá hối đoái toàn cầu theo phút, đánh dấu và kết quả UX tùy thuộc vào chúng tôi với tư cách là nhà phát triển giao diện người dùng

PHP là một ngôn ngữ tuyệt vời để tạo khuôn mẫu, cung cấp nhiều cách để hợp nhất dữ liệu với đánh dấu. Hãy đi vào một ví dụ về việc sử dụng dữ liệu để tạo biểu mẫu HTML trong bài đăng này

Bạn muốn bẩn tay ngay lập tức?

Trong PHP, chúng ta có thể biến nội dòng thành chuỗi ký tự sử dụng dấu ngoặc kép, vì vậy nếu chúng ta có biến

$p = $dom->createElement('p');

$p = $dom->createElement('p');

$p = $dom->createElement('p');

$p = $dom->createElement('p');

Đối với học sinh cũ, có

$p = $dom->createElement('p');

$p = $dom->createElement('p');

$p = $dom->createElement('p');

Tất cả các tùy chọn này đều tuyệt vời, nhưng mọi thứ có thể trở nên lộn xộn khi cần nhiều logic nội tuyến. Nếu chúng ta cần xây dựng các chuỗi HTML phức hợp, chẳng hạn như một biểu mẫu hoặc điều hướng, độ phức tạp có thể là vô hạn, vì các phần tử HTML có thể lồng vào nhau

Những gì chúng tôi đang cố gắng tránh

Trước khi tiếp tục và làm điều mình muốn, bạn nên dành một phút để xem xét điều mình không muốn làm. Hãy xem xét đoạn văn rút gọn sau đây từ thánh thư của WordPress Core,

$p = $dom->createElement('p');

Để xây dựng một điều hướng

$p = $dom->createElement('p');

$p = $dom->createElement('p');

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

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

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

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

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

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

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

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

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

Rất dễ để kết thúc với mì spaghetti dạng chuỗi khi nối như thế này, điều này thật thú vị khi nói rằng thật khó để duy trì

Bản chất của vấn đề là khi chúng ta cố gắng suy luận về các phần tử HTML, chúng ta không nghĩ về các chuỗi. Nó chỉ xảy ra rằng các chuỗi là những gì trình duyệt sử dụng và các kết quả đầu ra của PHP. Nhưng mô hình tinh thần của chúng ta giống DOM hơn - các phần tử được sắp xếp thành một cây và mỗi nút có nhiều thuộc tính, thuộc tính và con tiềm năng

Sẽ không tuyệt sao nếu có một cách có cấu trúc, biểu cảm để xây dựng cái cây của chúng ta?

Đi vào…

Lớp $p->setAttribute('class', 'headline');9

PHP 5 đã thêm mô-đun

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

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

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

Chúng tôi bắt đầu bằng cách khởi tạo một

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

$dom = new DOMDocument();

Bây giờ chúng ta có thể thêm một

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

$p = $dom->createElement('p');

Chuỗi

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

Khi chúng ta có một phần tử, chúng ta có thể đặt các thuộc tính của nó

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

Chúng ta có thể thêm trẻ em vào nó

$span = $dom->createElement('span', 'This is a headline'); // The 2nd argument populates the element's textContent
$p->appendChild($span);

Và cuối cùng, lấy chuỗi HTML hoàn chỉnh trong một lần

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

Lưu ý cách mã hóa kiểu này giữ cho mã của chúng tôi được sắp xếp theo mô hình tinh thần của chúng tôi - một tài liệu có các phần tử; . Toàn bộ phần “HTML chỉ là một chuỗi” xuất hiện ở cuối, khi cấu trúc của chúng tôi đã sẵn sàng

“Tài liệu” ở đây hơi khác so với DOM thực tế, ở chỗ nó không cần đại diện cho toàn bộ tài liệu mà chỉ là một khối HTML. Trên thực tế, nếu bạn cần tạo hai phần tử giống nhau, bạn có thể lưu chuỗi HTML bằng cách sử dụng

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

Lấy dữ liệu và thiết lập cấu trúc

Giả sử chúng ta cần tạo một biểu mẫu trên máy chủ bằng cách sử dụng dữ liệu từ nhà cung cấp CRM và đánh dấu của riêng chúng ta. Phản hồi API từ CRM trông như thế này

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

Ví dụ này không sử dụng cấu trúc dữ liệu chính xác của bất kỳ CRM cụ thể nào, nhưng nó khá tiêu biểu

Và giả sử chúng ta muốn đánh dấu của mình trông như thế này

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

Cái gì là

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

Bây giờ chúng ta đã biết kết quả mong muốn của mình là gì, đây là kế hoạch trò chơi

1. Nhận định nghĩa trường và nội dung khác từ API
2. Khởi tạo một

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

   9
3. Lặp lại các trường và xây dựng từng trường theo yêu cầu
4. Nhận đầu ra HTML

Vì vậy, hãy bỏ qua quy trình của chúng tôi và tìm hiểu một số kỹ thuật

fields;

  // Start building the DOM
  $dom = new DOMDocument();
  $form = $dom->createElement('form');

  // Iterate over the fields and build each one
  foreach ($formFields as $field) {
    // TODO: Do something with the field data
  }

  // Get the HTML output
  $dom->appendChild($form);
  $htmlString = $dom->saveHTML();
  echo $htmlString;
}

Cho đến nay, chúng tôi đã nhận được dữ liệu và phân tích cú pháp, khởi tạo

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

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

Vì chúng tôi đang ở trong một vòng lặp và PHP không có các biến phạm vi trong các vòng lặp, chúng tôi đặt lại phần tử

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

Lưu ý rằng chúng tôi thiết lập các lớp bằng cách sử dụng phương thức

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

Đầu vào đơn

Vì chúng tôi biết rằng API sẽ chỉ trả về các loại trường cụ thể, nên chúng tôi có thể chuyển đổi loại và viết mã cụ thể cho từng loại

$dom = new DOMDocument();

Bây giờ, hãy xử lý các vùng văn bản, các hộp kiểm đơn lẻ và các trường ẩn

$dom = new DOMDocument();

Bạn có nhận thấy điều gì đó mới mà chúng tôi đang thực hiện đối với hộp kiểm và các trường hợp ẩn không? . Đối với một trường hộp kiểm duy nhất, chúng tôi muốn sửa đổi lớp của vùng chứa, vì vậy chúng tôi có thể căn chỉnh hộp kiểm và nhãn theo chiều ngang;

Bây giờ nếu chúng ta chỉ đơn thuần nối các chuỗi, thì sẽ không thể thay đổi vào thời điểm này. Chúng tôi sẽ phải thêm một loạt các câu lệnh

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

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

Và đây là vẻ đẹp thực sự của việc sử dụng một công cụ xây dựng như

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

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

Các phần tử vòng lặp lồng nhau

Hãy thêm logic cho các phần tử

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

$dom = new DOMDocument();

OK, có rất nhiều thứ đang diễn ra ở đây, nhưng logic cơ bản là giống nhau. Sau khi thiết lập

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

Chúng tôi cũng đang thực hiện một số mánh khóe dành riêng cho

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

Bây giờ, hãy xử lý

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

$dom = new DOMDocument();

Vì vậy, trước tiên, chúng tôi xác định xem bộ trường có dành cho hộp kiểm hoặc nút radio hay không. Sau đó, chúng tôi đặt lớp vùng chứa cho phù hợp và xây dựng

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

{
  "submit_button_label": "Submit now!",
  "fields": [
    {
      "id": "first-name",
      "type": "text",
      "label": "First name",
      "required": true,
      "validation_message": "First name is required.",
      "max_length": 30
    },
    {
      "id": "category",
      "type": "multiple_choice",
      "label": "Choose all categories that apply",
      "required": false,
      "field_metadata": {
        "multi_select": true,
        "values": [
          { "value": "travel", "label": "Travel" },
          { "value": "marketing", "label": "Marketing" }
        ]
      }
    }
  ]
}

$dom->appendChild($p);
$htmlString = $dom->saveHTML();
echo $htmlString;

Lưu ý rằng chúng tôi sử dụng phép nội suy chuỗi PHP thông thường để đặt lớp vùng chứa trên dòng 21 và để tạo một ID duy nhất cho mỗi lựa chọn trên dòng 30

mảnh vỡ

Một loại cuối cùng mà chúng tôi phải thêm vào hơi phức tạp hơn vẻ ngoài của nó. Nhiều biểu mẫu bao gồm các trường hướng dẫn, không phải là đầu vào mà chỉ là một số HTML mà chúng tôi cần in giữa các trường khác

Chúng ta sẽ cần tiếp cận một phương pháp

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

fields;

  // Start building the DOM
  $dom = new DOMDocument();
  $form = $dom->createElement('form');

  // Iterate over the fields and build each one
  foreach ($formFields as $field) {
    // TODO: Do something with the field data
  }

  // Get the HTML output
  $dom->appendChild($form);
  $htmlString = $dom->saveHTML();
  echo $htmlString;
}

$dom = new DOMDocument();

Tại thời điểm này, bạn có thể tự hỏi làm thế nào chúng tôi tìm thấy chính mình với một đối tượng được gọi là

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

fields;

  // Start building the DOM
  $dom = new DOMDocument();
  $form = $dom->createElement('form');

  // Iterate over the fields and build each one
  foreach ($formFields as $field) {
    // TODO: Do something with the field data
  }

  // Get the HTML output
  $dom->appendChild($form);
  $htmlString = $dom->saveHTML();
  echo $htmlString;
}

fields;

  // Start building the DOM
  $dom = new DOMDocument();
  $form = $dom->createElement('form');

  // Iterate over the fields and build each one
  foreach ($formFields as $field) {
    // TODO: Do something with the field data
  }

  // Get the HTML output
  $dom->appendChild($form);
  $htmlString = $dom->saveHTML();
  echo $htmlString;
}

Thẩm định

API chúng tôi đang sử dụng vui lòng cung cấp thông báo xác thực riêng cho từng trường bắt buộc. Nếu có lỗi gửi, chúng tôi có thể hiển thị lỗi nội tuyến cùng với các trường, thay vì thông báo chung chung "rất tiếc, lỗi của bạn" ở dưới cùng

Hãy thêm văn bản xác thực vào từng phần tử

$dom = new DOMDocument();

Đó là tất cả những gì nó cần. Không cần phải loay hoay với logic loại trường — chỉ cần xây dựng một phần tử có điều kiện cho từng trường

Mang tất cả lại với nhau

Vậy điều gì sẽ xảy ra sau khi chúng ta xây dựng tất cả các phần tử trường? . Chúng ta cũng có thể tận dụng cơ hội để thêm các thuộc tính phổ biến, chẳng hạn như

fields;

  // Start building the DOM
  $dom = new DOMDocument();
  $form = $dom->createElement('form');

  // Iterate over the fields and build each one
  foreach ($formFields as $field) {
    // TODO: Do something with the field data
  }

  // Get the HTML output
  $dom->appendChild($form);
  $htmlString = $dom->saveHTML();
  echo $htmlString;
}

$dom = new DOMDocument();

Tại sao chúng tôi kiểm tra xem

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

Xin chào, một biểu mẫu HTML tùy chỉnh

Điểm thưởng. hàng và cột

Như bạn có thể biết, nhiều trình tạo biểu mẫu cho phép tác giả đặt hàng và cột cho các trường. Ví dụ: một hàng có thể chứa cả trường tên và họ, mỗi trường trong một cột có chiều rộng 50%. Vì vậy, làm thế nào chúng ta sẽ thực hiện điều này, bạn yêu cầu?

Phản hồi API của chúng tôi bao gồm dữ liệu lưới như thế này

$dom = new DOMDocument();

Chúng tôi giả định rằng việc thêm thuộc tính

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

Trước khi chúng tôi đi sâu vào, hãy nghĩ về những gì chúng tôi cần để thêm hàng. Logic cơ bản diễn ra như thế này

1. Theo dõi hàng mới nhất gặp phải
2. Nếu hàng hiện tại lớn hơn, tôi. e. chúng tôi đã chuyển sang hàng tiếp theo, tạo một thành phần hàng mới và bắt đầu thêm vào hàng đó thay vì hàng trước đó

Bây giờ, chúng ta sẽ làm điều này như thế nào nếu chúng ta nối các chuỗi? . Loại “chuỗi HTML đảo ngược” này luôn khiến tôi rất khó hiểu, vì vậy tôi chỉ có thể tưởng tượng IDE của mình cảm thấy thế nào. Và điều tuyệt vời nhất là nhờ có các thẻ mở tự động đóng của trình duyệt, một lỗi đánh máy duy nhất sẽ dẫn đến hàng triệu

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

Vì vậy, cách có cấu trúc để xử lý việc này là gì? . Trước tiên, hãy thêm theo dõi hàng trước vòng lặp của chúng ta và xây dựng một phần tử vùng chứa hàng bổ sung. Sau đó, chúng tôi sẽ đảm bảo nối từng vùng chứa

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

$dom = new DOMDocument();

Cho đến nay, chúng tôi vừa thêm một

  
    
    First name
    
  
  
    

      

        
        Travel
      
      

        
        Marketing
      
    
    Choose all categories that apply
  

$dom = new DOMDocument();

Tất cả những gì chúng ta cần làm là ghi đè lên đối tượng

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

`
  $element = $dom->createElement('label');
  $element->setAttribute('class', 'field');

  // Reset input values
  $label = null;

  // Add a `` for the label if it is set
  if ($field->label) {
    $label = $dom->createElement('span', $field->label);
    $label->setAttribute('class', 'label');
  }

  // Add the label to the ``
  if ($label) $element->appendChild($label);
}

Chúng ta sẽ đi đâu từ đây?

Các biểu mẫu là một trường hợp sử dụng tuyệt vời cho việc tạo khuôn mẫu hướng đối tượng. Và khi nghĩ về đoạn mã đó từ WordPress Core, một lập luận có thể được đưa ra rằng các menu lồng nhau cũng là một trường hợp sử dụng tốt. Bất kỳ tác vụ nào mà việc đánh dấu tuân theo logic phức tạp đều là ứng cử viên sáng giá cho phương pháp này.

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

Đây là toàn bộ đoạn mã cho biểu mẫu của chúng tôi. Vui lòng điều chỉnh nó với bất kỳ API biểu mẫu nào mà bạn thấy mình đang xử lý. Đây là tài liệu chính thức, rất hữu ích để hiểu về API có sẵn

Chúng tôi thậm chí còn chưa đề cập đến việc

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

$dom = new DOMDocument();

$dom = new DOMDocument();

Sự thật thú vị. Các tệp Microsoft Office kết thúc bằng

$dom = new DOMDocument();

$dom = new DOMDocument();

Điều quan trọng nhất là hãy nhớ rằng tạo khuôn mẫu là một siêu năng lực. Có thể xây dựng đánh dấu phù hợp cho tình huống phù hợp có thể là chìa khóa cho một UX tuyệt vời

Làm cách nào để lấy ID phần tử HTML trong PHP?

Làm cách nào để hiển thị nội dung HTML trong PHP?

PHP có thể tích hợp với các phần tử HTML không?