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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/lWl2WWikWeQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Обработка HTML на серверной стороне с помощью phpQuery | | 2012-06-19 11:54:19 | | Статьи Web-мастеру | | При решении повседневных задач во время разработки проекта приходится работать и с клиентской и с серверной частью кода. Бизнес логика реализуется на PHP, HTML код генерируется для вывода данных в | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: