Google phpQuery – how to use PHP like jQuery

Google phpQuery – how to use PHP like jQuery

Google developers create the server-side API for working with DOM in PHP like jQuery. The awesomeness of phpQuery API is in it syntax, which is a very similar to jQuery – we had no nothing like this when changing DOM using PHP DOM methods. phpQuery motto it’s real “write less do more” and when I replace my codes on phpQuery I say “Why this code is so short?”.

Where do we can get phpQuery

Here are many ways to get this API, but the best for me it’s this GitHub repository. Here is no Wiki on GitHub, but you can find more interesting info and Docs on Google Code page. But if you want to discuss – visit phpQuery G+ group – here you can ask some questions.

All what we now real need contains inside the phpQuery folder: it’s phpQuery.php – the main API file, inside on which you can find includes of all components of the API. Let’s start doing some changes inside of our DOM.

Init of API and load DOM into phpQuery

First: we need to require API into our PHP code. After it we can pass HTML or XML to pq() method, which is PHP alternative of jQuery $(). It’s like select of all page content inside $dom variable:


include_once 'phpQuery/phpQuery.php';
$dom = phpQuery::newDocument(file_get_contents( 'page.html' ));

Here is the code of page.html:


<p>As you can see, this site uses Highlight.js too and you can check how will looks our result. To get lib code, you can visit <a rel="nofollow" href="https://github.com/SashaDesigN/highlight.js">GitHub repo</a>. Or you can download customized version of lib on it <a href="https://highlightjs.org/download/">website</a>.</p>

<img data-after="images/1444298151.png">

<p>The code above do the injection of Highlight.js and init of it class, which do code more beautiful. Let's looking more deeper: this code highlights lib has more than 30 different styles, which you can find in <code>highlight/styles</code> a folder.</p>

Now $dom contains page.html DOM and we can change it as we need. But here is one painful moment, when you work with non-latin symbols. To get it away let’s do this simple trick:


$dom = phpQuery::newDocument(
  mb_convert_encoding(
    file_get_contents('page.html'), 'HTML-ENTITIES', "UTF-8"
  )
);

Basic examples: add rel=”nofollow” to external links

Show all tricks of phpQuery in this post it’s unreal task, but I want to demonstrate how it’s easy to work with this API on a few examples of code. First: let’s add rel=”nofollow” to all external links.


foreach(pq('a') as $a){
  if(pq($a)->attr('href') && strpos(pq($a)->attr('href'),'http')!==false){
    pq($a)->attr('rel','nofollow');
  }
}

In this example, foreach(pq('a') as $a) it’s an alternative of the jQuery $.each loop. pq($a) it’s like a jQuery $(this) As you can see, here is nothing hard if you familiar with jQuery and have basic knowledges of PHP.

Change style of the first image

Here is another example: let’s stretch the first image in post.html on full display width by using CSS rules.


pq('img')->filter(':first')->attr('style','width:100%; height:auto; display:block;');

And more – in this post you can see share buttons after image. Let’s make the similar share panel after the first image using phpQuery:


# create container
pq('img')->filter(':first')->append('<div id="share-panel"></div>');
# add items inside of it
pq('#share-panel')->append('<a href="https://facebook.com"><i class="icon-facebook"></i></a>')
pq('#share-panel')->append('<a href="https://twitter.com"><i class="icon-twitter"></i></a>')
pq('#share-panel')->append('<a href="https://plus.google.com"><i class="icon-google-plus"></i></a>')

So, after all changes we must save them. To do this, let’s check next part of this post.

Save our changes in phpQuery

Here are many ways to do this. But here is no any “save” – phpQuery return changed data and after we can save it, for example in our page.html:

file_put_contents( 'page.html', $dom );

Even we can save only the part of page, for example, our #share-panel box:


file_put_contents( 'page.html',  pq('#share-panel')->getDocument() );

But if you want to display DOM – it’s not so hard as you think:

print $dom;

At this moment, I complete my introduction to phpQuery, but I very hope that you will learn more about this API. Here are my ideas about that, where we can use phpQuery in real-life tasks:

  • Create PHP parser
  • Validate user-inputted HTML (from CKEditor or WYSIWYG for ex.)
  • Visualize structured data on the fly
  • Learn more about phpQuery webDriver and make some unit tests or bots

Each from us can do new interesting ideas with phpQuery. Thanks for reading – will see in the next post.