Обработка 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Сейчас только тот является менеджером, кто заставляет знания работать. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.