phpQuery를 이용한 서버 측 HTML 처리 > php

일상적인 웹 개발 작업에서는 클라이언트 및 서버 측 코드로 작업해야합니다. PHP를 사용하여 비즈니스 로직을 작성하고 사용자 브라우저에 표시 할 HTML을 생성합니다. 그런 다음 jQuery 또는 Prototype과 같은 프레임 워크를 사용하여 클라이언트 측 상호 작용을 제공합니다.

이제 서버 측 PHP 코드를 사용하여 생성 된 HTML을 변경하고 조작하는 방법에 대해 생각해보십시오. phpQuery는 당신에게 떠오르는 최고의 솔루션입니다. phpQuery에 대해 들어 보지 못했다면, phpQuery에 대해 간략하게 소개하고 실제 프로젝트에서 어떻게 사용할 수 있는지 설명 할 것이므로이 기사에 관심이있을 것입니다.

phpQuery는 무엇입니까

phpQuery는 jQuery JavaScript Library를 기반으로하는 서버 측 체인 가능 CSS3 선택기 기반 DOM (Document Object Model) API입니다.

이것은 공식 phpQuery 프로젝트 페이지 에 주어진 정의 입니다. jQuery를 사용한 경우 DOM 조작이 필요한 많은 작업을 단순화 할 수있는 방법에 대한 아이디어가 있습니다. phpQuery는 서버 측 PHP 코드 내에서 사용되는 것과 동일한 기능을 제공합니다. echo 문과 유사한 방법을 사용하여 HTML 코드 생성을 어수선하게 할 수 있습니다.

phpQuery에서 jQuery가 제공하는 대부분의 기능에 액세스 할 수 있으며, 아래에서 언급 한 4 가지 작업으로 크게 나눌 수 있습니다.

• DOM 요소 생성
• 요소 선택 및 조작
• DOM을 통한 반복
• 브라우저로 출력 인쇄

"ported jQuery 섹션"으로 알려진 phpQuery에서 제공하는 기능을 사용하여 작업을 실행할 수 있습니다. 기능을 먼저 보자 :

• 선택기 – 주어진 조건에 따라 요소를 찾습니다.
• 속성 – DOM 요소의 속성으로 작업합니다.
• 순회 – 선택한 요소 목록을 탐색합니다.
• 조작 – 선택한 요소의 내용을 추가 및 제거합니다.
• Ajax – 서버 측 ajax 요청을 작성합니다.
• 이벤트 – 선택한 요소에서 DOM 이벤트를 바인딩합니다.
• 유틸리티 – 다른 기능을 지원하는 일반 기능.

code.google.com/p/phpquery 프로젝트 페이지에서 phpQuery 라이브러리를 다운로드 할 수 있습니다 . 폴더를 웹 서버에 복사하면 준비가되었습니다. 설치는 간단하므로 demo.php파일을 실행하여 시작할 수 있습니다.

phpQuery를 사용하는 방법

아래 이미지와 같이 홀수 및 짝수 행에 대해 머리글과 다른 행 색상으로 두 열의 순서가없는 목록을 만드는 방법을 보여 드리겠습니다.

먼저 phpQuery를 사용하여 HTML 문서를 만들어 봅시다 :

<?php
require("phpQuery/phpQuery.php");
$doc = phpQuery::newDocument("<div/>");

위의 코드는 div태그가 있는 기본 HTML 문서를 만듭니다 . 라이브러리는 문서를 작성하는 다양한 방법을 제공합니다. 가장 간단한 것을 사용했지만 demo.php문서 및 다른 사람을 찾을 수 있습니다 .

이제 정렬되지 않은 목록을 만들어 HTML 문서에 추가해야합니다.

<?php
...
$doc["div"]->append("<ul><li>Product Name</li><li>Price</li></ul>");
$products = array(
    array("Product 1","$30"),
    array("Product 2","$50"),
    array("Product 3","$20"));

foreach($products as $key=>$product) {
    $doc["div ul"]->append("<li>$product[0]</li><li>$product[1]</li>");
}
print $doc;

우리는 지금 비 순차 목록을 가지고 있음을 알 수 있습니다. 그러나 모든 요소는 단일 열에 있으며 이것이 기본값입니다. 리스트의 짝수 요소를 두 번째 열로 옮겨야합니다.

<?php
...
$doc["div ul"]->attr("style", "width:420px;");
$doc["div ul"]->find("li:even")->attr("style","width:200px; float:left; padding:5px; list-style:none;");
$doc["div ul"]->find("li:odd")->attr("style","width:200px; float:left; padding:5px; list-style:none;");

여기에 예제에 필요한 CSS 스타일을 정의하기 위해 style 속성을 사용하고 있지만 실제로 필요한 경우가 아니라면 인라인 스타일을 사용하지 않는 것이 좋습니다. 항상 CSS 클래스를 사용하여 스타일을 추가하십시오.

이제 phpQuery 메소드를 사용하여 헤더와 짝수 행을 강조하겠습니다.

<?php
...
$doc["div ul"]->find("li:nth-child(4n)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
$doc["div ul"]->find("li:nth-child(4n-1)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; list-style:none;");
$doc["div ul"]->find("li:lt(1)")->attr("style","background:#CFCFCF; width:200px; float:left; padding:5px; list-style:none;");

간단한 예제를 마쳤으므로 이제 phpQuery를 사용하여 HTML 생성 서버 측을 단순화하는 방법에 대한 아이디어가 있어야합니다. 우리가 한 모든 것은 $doc객체 에 대해 모든 작업을 수행 한 것을 제외하고는 jQuery로 수행하는 것과 거의 동일 합니다.

phpQuery의 중요성

phpQuery의 기능을 설명했지만 클라이언트쪽에 jQuery가있을 때 왜 라이브러리가 필요한지 궁금합니다. 실제 시나리오를 사용하여 phpQuery의 중요성을 보여 드리겠습니다.

다음 상황을 고려하십시오. 인터뷰에 참여한 웹 개발자에 대한 모든 정보가있는 다음과 같은 테이블이 있다고 가정하십시오.

다음은이 시나리오에서 개발해야 할 요구 사항 목록입니다.

• 시험에 60 점 이상을받은 지원자는 파란색으로 강조 표시해야합니다.
• 3 년 이상의 경력을 가진 지원자는 앞에“Apply for Senior Software Engineer”라는 레이블이 붙어 있고 다른 지원자는“Apply for Software Engineer”가 있어야합니다.
• 회사는 경험을 바탕으로 급여 구조가 있습니다 :
  • 1 년 – $ 5,000
  • 2 년 – $ 10,000
  • 3 년 – $ 20,000
  • 3 년 이상 – $ 50,000

  기준과 일치하는 지원자는 급여 열을 녹색으로 강조 표시해야합니다.

출력 결과는 다음과 같습니다.

개발자는 순수 PHP 코드를 사용하여 요구 사항을 충족하기 위해 다음 솔루션을 제공 할 수 있습니다.

<?php
// retrieve applicants from database
//...

echo <<<ENDHTML
<div id="main">
 <div class="row_head">
  <div>Name</div>
  <div>Marks</div>
  <div>Experience</div>
  <div>Position</div>
  <div>Expected Salary</div>
 </div>
ENDHTML;
foreach ($applicants as $applicant) {
    echo '<div class="row">';
    echo "<div>" . $applicant["name"] . "</div>";
    echo '<div class="' . marksClass($applicant["marks"]) . '">' . $applicant["marks"] . "</div>";
    echo "<div>" . $applicant["experience"] . "</div>";
    echo "<div>" . positionLink($applicant["experience"]) . "</div>";
    echo '<div class="' . salaryClass($applicant["experience"], $applicant["salary"]) . '">' . $applicant["salary"] . "</div>";
    echo "</div>";
}
echo "</div>";

function marksClass($info) {
    return ($info > 60) ? "pass" : "fail";
}

function positionLink($experience) {
    return ($experience > 3)
        ? '<a href="#">Apply for Senior Software Engineer</a>'
        : '<a href="#">Apply for Software Engineer</a>';
}

function salaryClass($experience, $salary) {
    switch ($experience) {
        case 1:
            return ($salary < 5000) ? "accept" : "reject";
        case 2:
            return ($salary < 10000) ? "accept" : "reject";
        case 3:
            return ($salary < 20000) ? "accept" : "reject";
        default:
            return ($salary < 50000) ? "accept" : "reject";
    }
}

이제 phpQuery를 사용하여 코드와 장점을 비교해 봅시다.

<?php
require("phpQuery/phpQuery.php");
$doc = phpQuery::newDocument('<div id="main"></div>');
phpQuery::selectDocument($doc);

// retrieve applicants from database
//...

$doc["#main"]->append('
<div id="main">
 <div class="row_head">
  <div>Name</div>
  <div>Marks</div>
  <div>Experience</div>
  <div>Position</div>
  <div>Expected Salary</div>
 </div>');

foreach ($applicants as $key => $applicant) {
    $doc["#main"]->append('<div class="row" id="app_' . $key . '"></div>');
    foreach ($applicant as $field => $info) {
        $doc["#main"]->find("#app_" . $key)->append('<div class="_' . $field . '">' . $info . "</div>");
        if ($field == "experience") {
            $doc["#main"]->find("#app_" . $key)->append('<div style="width:400px" class="_position">-</div>');
        }
    }
}

addMarksClass($doc);
addSalaryClass($doc);
addPositionLink($doc);

print $doc;

function addMarksClass(&$doc) {
    $marks = pq("._marks");
    foreach ($marks as $appMark) {
        if (pq($appMark)->html() > 60) {
            pq($appMark)->addClass("pass");
        }
        else {
            pq($appMark)->addClass("fail");
        }
    }
}

function addSalaryClass(&$doc) {
    $marks = pq("._salary");
    foreach ($marks as $appMark) {
        $experience = pq($appMark)->parent()->find("._experience" )->html();
        $salary = pq($appMark)->html();

        switch ($experience) {
            case 1:
                pq($appMark)->addClass(
                    ($salary < 5000) ? "accept" : "reject"
                );
                break;
            case 2:
                pq($appMark)->addClass(
                    ($salary < 10000) ? "accept" : "reject"
                );
                break;
            case 3:
                pq($appMark)->addClass(
                    ($salary < 20000) ? "accept" : "reject"
                );
                break;
            default:
                pq($appMark)->addClass(
                    ($salary < 50000) ? "accept" : "reject"
                );
        }
    }
}

function addPositionLink(&$doc) {
    $experience = pq("._experience");
    foreach ($experiece as $appExp) {
        if (pq($appExp)->html() > 3) {
            pq($appExp)->parent()->find("._position")->html('<a href="#">Apply for Senior Software Engineer</a>');
        }
        else{
            pq($appExp)->parent()->find("._position")->html('<a href="#">Apply for Software Engineer</a>');
        }
    }
}

phpQuery는 이미 jQuery 작업에 대한 지식이 있다면 쉽습니다. 위 코드의 대부분은 자명하다. 나는 그것이 pq()현재 문서 를 언급하고 있지만 언급하고 싶습니다 . 다른 모든 것은 jQuery 함수입니다.

그리고 둘 다 비슷해 보이지만 phpQuery를 사용하는 코드는 더 나은 품질과 확장 성을 제공합니다. 나중에 추가 기능을 추가해야하는 경우 원래 코드가 얼마나 취약한 지 생각해보십시오. 작업 경험을 바탕으로 마크에 대한 추가 검증을 추가한다고 가정 해 봅시다. 이 시나리오에서는 다른 메소드를 추가하고 foreach루프 내에서 리턴 된 결과를 지정해야 합니다. 즉, 공개 코드를 위반하여 이미 작성된 코드를 변경해야합니다 .

소프트웨어 엔터티 (클래스, 모듈, 함수 등)는 확장을 위해 열려 있지만 수정을 위해 닫아야합니다.

phpQuery를 사용하는 두 번째 예제에서는 코드가 먼저 검증없이 생성 된 다음 테이블을 각 함수에 전달하고 변경 사항을 원래 테이블에 배치합니다. 각 함수는 다른 함수에 영향을 미치지 않으므로 새로운 요구 사항에 대한 새 함수를 작성하고 다른 함수와 함께 루프 외부에서 사용할 수 있습니다. 우리는 기존 코드를 수정하지 않습니다. 이것을 장식 이라고합니다 :

데코레이터 패턴은 기존 객체에 동작을 동적으로 추가 할 수있는 디자인 패턴입니다.

요약

우리는 phpQuery 기능과 그 중요성을 소개함으로써이 튜토리얼을 시작했습니다. 간단한 예제를 사용하여 phpQuery를 사용하는 방법을 배운 후, 우리는 코드의 품질을 향상시키는 데 훨씬 중요한 실용적인 예제로 옮겼습니다. phpQuery는 서버 측에서 HTML 작업에 대한 새로운 관점을 제공했으며, phpQuery를 다른 방식으로 사용하고 아래 의견에 개인적인 경험을 공유하기를 바랍니다.