Обработка HTML на серверной стороне с помощью phpQuery

При решении повседневных задач во время разработки проекта приходится работать и с клиентской и с серверной частью кода. Бизнес логика реализуется на PHP, HTML код генерируется для вывода данных в браузере пользователя.  Затем используются библиотеки, такие как jQuery или Prototype, для формирования интерактивной клиентской части.

Стоит задуматься  от том, как изменять и манипулировать сгенерированной структурой HTML с помощью кода PHP серверной части приложения. phpQuery является отличным решением для такой задачи. Данный урок представляет собой краткое введение в phpQuery и объясняет, как можно использовать его в реальных проектах.

Что такое phpQuery

phpQuery - серверный, цепочный, управляемая селекторами CSS3 API DOM, основанный на использовании библиотеки jQuery.

Такое определение дается на официальной странице проекта phpQuery. Если вы использовали jQuery, то, скорее всего, у вас будут идеи, как можно упростить множество задач по манипулированию DOM. phpQuery обеспечивает такой же функционал для использования в кодt PHP серверной части приложения. Можно попрощаться с неопрятной генерацией HTML кода с помощью функции echo и аналогичных методов.

С phpQuery вы получаете доступ к большинству функций, реализованных в jQuery. Их можно разделить на 4 больших группы:

• Создание элементов DOM
• Выделение и манипулирование элементами
• Перемещение по структуре DOM
• Вывод информации в браузере

Вы можете решать задачи с помощью функций phpQuery, которые известны как “раздел портированных функций jQuery”.  Список доступного функционала:

• Селекторы – поиск элементов по заданным условиям.
• Атрибуты – работа с атрибутами элементов DOM.
• Перемещение – переходы по списку выбранных элементов.
• Манипулирование – добавление и удаление выбранных элементов.
• AJAX – серверная часть запросов AJAX.
• События – привязывание событий DOM к выделенным элементам.
• Утилиты– универсальные функции.

Загрузить библиотеку phpQuery можно со страницы проекта code.google.com/p/phpquery. Скопируйте папку на свой веб сервер и все готово к использованию. Установка закончена и можно запускать файл demo.php.

Как использовать phpQuery

Для примера сделаем неупорядоченный список с двумя колонками, заголовками и различными цветами для четных и нечетных строк, как на изображении ниже:

Сначала создаем HTML документ с помощью phpQuery:

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

Выше приведенный код генерирует основу HTML документа с тегом div. В библиотеке есть несколько методов для создания документа. Мы используем самый простой. Остальные методы можно найти в файле 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; liststyle:none;");
$doc["div ul"]->find("li:odd")->attr("style","width:200px; float:left; padding:5px; liststyle:none;");

Используем атрибуты style для определения стилей CSS для нашего примера (не стоит пользоваться встроенными стилями, если нет особенной нужды). Для стилей лучше использовать классы CSS.

Теперь выделим заголовок и четные строки с числами, используя методы phpQuery:

<?php
...
$doc["div ul"]->find("li:nthchild(4n)")->attr("style","background:#EEE; width:200px; float:left; padding:5px; liststyle: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; liststyle:none;");

Простой пример завершен и вы теперь имеет представление как phpQuery может упростить генерацию HTML на серверной стороне. Все действия очень похожи на действия с jQuery? за исключение того, что мы работали с объектом $doc.

Важность phpQuery

Хотя функциональность phpQuery уже представлена, у вас все еще может остаться вопрос о том, зачем нужна еще одна библиотека, когда есть jQuery на клиентской стороне. Рассмотрим ответ с помощью практического сценария.

Предположим, что сложилась следующая ситуация: у нас есть таблица. подобная ниже приведенной, в которой содержится информация о веб разработчиках, приходивших на интервью.

У нас есть несколько критериев для разработки сценария.

• Кандидаты, которые получили за тест более 60 баллов, должны быть выделены голубым цветом.
• Кандидаты с опытом работы более 3 лет должны иметь ссылку “Apply for Senior Software Engineer”, а остальные должны иметь ссылку “Apply for Software Engineer”.
• Политика компании в отношении зарплат основана на опыте работы:
  • 1 год – $5,000
  • 2 года – $10,000
  • 3 года – $20,000
  • более трех лет – $50,000

  Столбец зарплаты кандидата, которая соответствует критерию, должна выделяться зеленым цветом.

Вот как должна выглядеть таблица:

На чистом PHP коде решение может иметь следующий вид:

<?php
// Получаем данные из базы
//...

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);

// Получаем данные из базы
//...

$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, код сначала генерируется без проверок. А затем таблица передается в каждую функцию, и изменения помещаются в оригинальную таблицу. Каждая функция не влияет на остальные  функции. Мы можем писать новые функции для любых новых требований и  использовать их вне цикла с другими функциями. 

• Комментарии