This simple tutorial will show you how to create a PhantomJS script that will scrape the state/population html table data from http://www.ipl.org/div/stateknow/popchart.html and output it in a PHP application. For those of you who don’t know about PhantomJS, it’s basically a headless WebKit scriptable with a JavaScript API.
Prerequisites:
- PhantomJS (for this tutorial we’ll be using Linux for this particular example) http://phantomjs.org/download.html
- PHP
1. Create the PhantomJS Script
The first step is to create a script that will be executed by PhantomJS. This script will do the following:
- Take in a JSON “configuration” object with the site URL and a CSS selector of the HTML element that contains the target data
- Load up the page based on the Site URL from the JSON configuration object
- Include jQuery on the page (so we can use it even if the target site doesn’t have it!)
- Use jQuery and CSS selector from configuration object to find and alert the html of the target element. You’ll notice on line 37 that we wrap the target element in a paragraph tag then traverse to it in order to pull the entire table html.
- We can save this file as ‘phantomJsBlogExample.js’
- One thing to note is that on line 24 below we set a timeout inside the evaluate function to allow for the page to fully load before we call the pullHtmlString function. To learn more about the ins and outs of PhantomJS functions read here http://phantomjs.org/documentation/
2. Create PHP function to run PhantomJS script and convert output into a SimpleXmlElement Object
Next, we want to create a PHP function that actually executes the above script and converts the html to a SimpleXmlElement object.
- On line 3 below you’ll construct a “configuration” object that we’ll pass into the PhantomJS script above that will contain the site url and CSS selector
- Next on line 10 we’ll actually read in the base PhantomJs Script we created in step 1. Notice that we actually make a copy of the script so that we leave the base script intact. This becomes important if you are executing this multiple times in production using different site urls each time.
- On line 20 we prepend the configuration object onto the copied version of the phantomJS script, make sure you json_encode this so it’s inserted as a proper json object.
- Next on line 29 we execute the phantomJs script using the PHP exec function and save the output into an $output array. Each time the PhantomJS script alerts a string, it’s added as an element in this array. Alerted html strings will split out as one line per element in the array. After we get the output from the script we can go ahead and delete the copied version of the script.
- Starting on line 38, we clean up the $output array a bit, for example when we initially inject jQuery in PhantomJS a line is alerted into the output array which we do not want as it doesn’t represent the actual html data we are scraping. Similarly, want to remove the last element of the $output array where we alert (‘EXIT’) to end the script.
- Now that it’s cleaned up, we have an array of individual html strings representing our target data. We’ll want to remove the whitespace and also join all the elements into one big html string to use for constructing a SimpleXmlElement on line 49.
3. Call the function and iterate through the SimpleXmlElement Object to get to the table data
- Call the function from step 2 making sure to pass in the target site url and CSS selector
- Now that we have the SimpleXmlObject on line 7 we’ll want to iterate through the rows of the table body and pull out the state name and population table cells. It may help to var_dump the entire SimpleXmlObject to get a sense for what the structure looks like.
- For purposes of this example we’ll just echo out the state name and population but you could really do anything you wanted with the data at this point (i.e., persist to database etc.)
4. Final Output
Finally, running the function from step 3 should result in something like this.