blog.swapnilsarwe.com

FB like Page details extractor from URL with PHP DOMDocument

swapnilsarwe — Fri, 13 Apr 2012 20:29:26 +0000

I like one feature about facebook while updating status is that whenever I paste a URL, it grabs the primary details about the page and shows immediately. Which increases the chances that person viewing the post will more likely will click on it since he/she gets the summary right away.

I thought of mimicking the similar functionality using PHP. Well so why not lets try it.

Level: Beginner

You should be aware of the DOMDocument Class of PHP. If not please have a look at DOMDocument on php.net. Manual is more than enough to learn DOMDocument.

We are going to use very basic functions of the DOMDocument viz:
1. loadHTMLFile
2. getElementsByTagName

We are going to create this in 3 very simple steps:

Get a URL for which we want to fetch the details
With the use of DOMDocument fetch the details
Print the essential details

We are going to create a class for the same, so that if required we can use it anywhere we want.

TO START WITH:
We will create a very simple HTML form where the user will enter the URL:



	
		Page Extractor

Also we will use the following class skeleton to write the feature

// its the very basic singleton class
class Extractor
{
	private static $instance;
	public $url;

	public function __construct()
	{
		if(!self::$instance)
		{
			self::$instance = $this;
		}
		return self::$instance;
	}

	private function getUrl()
	{
		// it will check for the url
	}

	private function extractDetails()
	{
		// it will actually extract the details using DOMDocument
	}

	private function printDetails()
	{
		// it will just organise the fetched/extracted details
	}

	public function getPageDetails()
	{
		// this is the only exposed function to public
	}

}

Lets move on to steps now:

Step 1: Get a URL for which we want to fetch the details

We will just check whether the user has entered the URL before submitting the form in the following way.

private function getUrl()
{
	// you should also add the validation of URL over here to check for valid url
	if(isset($_GET['url']) && $_GET['url'] != '')
	{
		return $_GET['url'];
	}
	else
	{
		return false;
	}
}

Step 2: With the use of DOMDocument fetch the details

We will use the loadHTMLFile to load the URL and then perform operations to get the details out of it.

We are basically looking for following things:

title of the page
images on the page
meta information about the page

private function extractPageDetails()
{
	$arrDetails =  null;
	$doc = new DOMDocument();
	// added @ to suppress the errors
	@$doc->loadHTMLFile($this->url);

	foreach($doc->getElementsByTagName('title') as $title)
	{
		$arrDetails['title'] = $title->nodeValue;
	}

	foreach($doc->getElementsByTagName('meta') as $meta)
	{
		// since there are lot of meta tags available with name:content
		// we will create a array of meta tags and lets see ahead what all we can use
		$arrDetails['meta'][$meta->getAttribute('name')] = $meta->getAttribute('content');
	}

	foreach($doc->getElementsByTagName('img') as $img)
	{
		// we will fetch all the images on the page and put it in array
		$arrDetails['images'][] = $img->getAttribute('src');
	}

	return $arrDetails;
}

Step 3: Print the essential details.

Well this is the just the function which will print the details fetched in Step 2

private function printDetails($pageDetails)
{
	$strHTML = '';

	$strHTML .= ''.$pageDetails['title'].'';
	$strHTML .= '';
		if(isset($pageDetails['images']))
		{
			$strHTML .= '';
		}
		if(isset($pageDetails['meta']['description']))
		{
			$strHTML .= '';
				$strHTML .= $pageDetails['meta']['description'];
			$strHTML .= '';
		}

	$strHTML .= '';

	return $strHTML;
}

Here how the complete program will look. Have added very basic CSS to it

url = $this->getUrl();
				self::$instance = $this;
			}
			return self::$instance;
		}

		private function getUrl()
		{
			if(isset($_GET['url']) && $_GET['url'] != '')
			{
				return $_GET['url'];
			}
			else
			{
				return false;
			}
		}

		private function extractPageDetails()
		{
			$arrDetails =  null;
			$doc = new DOMDocument();
			@$doc->loadHTMLFile($this->url);

			foreach($doc->getElementsByTagName('title') as $title)
			{
				$arrDetails['title'] = $title->nodeValue;
			}

			foreach($doc->getElementsByTagName('meta') as $meta)
			{

				$arrDetails['meta'][$meta->getAttribute('name')] = $meta->getAttribute('content');
			}

			foreach($doc->getElementsByTagName('img') as $img)
			{
				$arrDetails['images'][] = $img->getAttribute('src');
			}

			return $arrDetails;
		}

		private function printDetails($pageDetails)
		{
			$strHTML = '';

			$strHTML .= ''.$pageDetails['title'].'';
			$strHTML .= '';
				if(isset($pageDetails['images']))
				{
					$strHTML .= '';
				}
				if(isset($pageDetails['meta']['description']))
				{
					$strHTML .= '';
						$strHTML .= $pageDetails['meta']['description'];
					$strHTML .= '';
				}

			$strHTML .= '';

			return $strHTML;
		}

		public function getPageDetails()
		{
			if($this->url)
			{
				$pageDetails = $this->extractPageDetails();
				return $this->printDetails($pageDetails);
			}
			else
			{
				return '';
			}

		}
	}
	$ext = new Extractor;
?>


	
		Page Extractor
		
	

	
		
	
	
		url)
			{
				echo $ext->getPageDetails();
			}
		?>

Well thats it, this is for the beginners level. Its not even a tutorial but just the introduction to DOMDocument class and how it can be used.

Demo Page

Directory Listing with PHP file & dir functions

swapnilsarwe — Fri, 06 Jan 2012 06:30:06 +0000

I always had a habit of managing everything in different folders, be it the documents, photographs, programs or projects. So when I started web development, everyday I use to endup creating something new in the new folder.
But then more the folders, more difficult to manage and remember whats in it although I use to make sure to give it a intutive name.

Then one day I decided to make my www folder more manageable or basically more identifiable. So I wrote a small program to display all the folders in an HTML file neatly.
And dropped a README file into the folder with very short description which would displayed along with the folder name on the HTML page.

Level: Beginner

Requirements: What we require here are very basic directory & file operations in PHP. We will learns them while on the way. Classes in PHP.

So lets get started!!

Step 1:

We are going to write few independent functions.

A. Function getFolders():

We are going to open the directory with opendir() function.
The we are going to read each and every file and folder from the opened directory with readdir() and if its directory we are going to make a list of it.
And in the end we are going to close the directory using the closedir() function.

';
// we are providing '.' since it means the current directory.
print_r(getFolders('.'));
?>

This is how it will work. Click Here.

B. Function getReadMe():

This function will take the directory path as a parameter and then its going to check if README file exists under that folder by using the file_exists() function.
If the file exists then we are going to read the content of the file with file_get_content() function.
if the README file does not exists then we going to put a default message.

';
echo getReadMe('testfolder2');
?>

This is how it will work. Click Here.

Step 2:

Now we are going to use the above written function to complete out program. We are going to write a simple class to achive this.
Final script would be like this – with little loops of arrays and HTML and CSS.

dirtoread = $dir;
    }

    function getFolders($dir) {
        $arrFolder = null;
        if ($handle = opendir($dir)) {
            while (false !== ($file = readdir($handle))) {
                if ($file != "." && $file != ".." && is_dir($file) && strpos($file, '.') === false) {
                    $arrFolder[] = $file;
                }
            }
            closedir($handle);
        }
        return $arrFolder;
    }

    function getReadMe($dir) {
        $filepath = $dir . '/README';
        if (file_exists($filepath)) {
            return substr(file_get_contents($filepath), 0, 100);
        } else {
            return 'No README file found for this folder';
        }
    }

    function printList() {
        $strHTML = '';

        $arrFolderList = $this->getFolders($this->dirtoread);

        if (!empty($arrFolderList) && is_array($arrFolderList)) {
            if (count($arrFolderList) > 0) {
                foreach ($arrFolderList as $directory) {
                    $strHTML .= '' . $directory . '
' . $this->getReadMe($directory) . '';
                }
            } else {
                $strHTML .= 'no folder found';
            }
        }
        $strHTML .= '';
        return $strHTML;
    }

}

$dir = new DirList('.');
echo '


List of demos


' . $dir->printList() . '
';
?>

This is the final step. Click Here.

Conclusion:

I hope you liked very simple but kind of effective PHP snippet. Will like if you got any suggestions or comments to make.

Learning Regular Expressions – Resource

swapnilsarwe — Thu, 15 Dec 2011 18:36:51 +0000

Regular Expression is one the the powerful term in programming world. It has become the part of the daily programming world. Although it might be simple form validation in javascript or pattern matching while crawling the webpage and yes you can do it with Regular Expression.

Javascript, PHP, MySQL, Python…. list does not end…. regular expression is an in built part of it. And if not then surely it has some library to support it in some way or the other.

Those who know it, can create magic on the go, and those who don’t know it are afraid like hell. My suggestion go visit the hell and you will never regret a thing about it.

Following are the the few resource from the site www.webtechtuts.com

All Regular Expression articles on Webtechtuts.com
Regex Category on Webtechtuts.com

Regular Expression:

All the best. Rule Regular Expression.

Javascript – Traversing the HTML DOM recursively

swapnilsarwe — Thu, 24 Nov 2011 19:22:30 +0000

This post will give idea about HTML DOM Objects and way we can use its methods and attributes to navigate or traverse through it.

Introduction:
How to traverse the complete HTML BODY covering each HTML element recursively and forming a tree You need to be aware of very basic Javscript DOM methods. W3schools is the wonderful resource to learn this basics. Go through all the functions but what we need for this exercise is getElementById() and getElementsByTagName()

Eg: HTML


  
    
      Javascript - HTML Tree Parser
    
  
  
    
      Javascript - HTML Tree Parser
    
    
      one
      two

Step I:
We are going to write a javascript function – lets call it htmlTree

Step II:
We will need to first get the body element, we can do it with the help of getElementsByTagName(‘body’), which will return you the body tag. But since the function itself is plural it will always return you an array even if it has only one single element. Since body is the present only once we will refer to the 0th element of an array.

Step III:
Now we will check if the body tag has any children – we can do that by using hasChildNodes() method, if yes then we will first refer to the first child, we can do that with the attribute “firstChild”. Also we can get the name of the tag with an attribute “tagName”. After reading the first child we will go to the next child, with use of an attribute “nextSibling”

But this wont meet our purpose, we dont know the length of the tree and we also dont know how deep each branch is going to be, so we will make this function recursive to perform these similar step for eavery branch till it reaches it leaves.

Step IV:
We will print the name of the tag identified and check if it has children if yes then we will recursively call the function again which will print its name and check if it has child – it will happen till it reaches element with no child

When you execute this, you get first alert as BODY but very next alert as undefined – where in it should have been DIV. This is because between BODY and the DIV tag there is the white space which is considered to be an empty text – well we need to avoid such occurrences

Step V:
Go through nodeType on W3schools. Since here we are looking for an HTML elements, we will check for nodeType = 1. If it is 1 then we will recursively call the function if not we will move onto its sibling

Step VI:
These alerts are quiet annoying, so lets make some subtle changes so that this function returns us complete tree. I personally like “ul li ul li” to represent a tree. Here is the modified function

Step VII:
Since at the very beginning we were talking about just HTML elements, we will get rid of all the javascript inside HTML. We can achieve that by simply adding a simple check in the condition where we check the nodeType.

// Change
if (child.nodeType === 1)
// to
if (child.nodeType === 1 && child.nodeName != 'SCRIPT')

Demo:
Javascript – HTML Tree Parser

dovalidate-js – Javascript Form Validation Library

swapnilsarwe — Mon, 10 Oct 2011 19:23:19 +0000

I have been working on the javascript library to meet my everyday basic needs. dovalidate-js is the result of it.

Client side validation of form submission is very crucial and important. This is an attempt to create a dynamic library which will do the basic validation with some amount of configuration available to the user using it as per the requirement.

The main goal behind building the validator is to avoid playing with html form and let javascript do the validation and css highlight it.

So that it can be applicable to the already created form without touching it but by just configuring it through javascript and css.

Steps to use it:
Step 1:
Include a javscript file

Step 2:
Create the instance of validator

var dovalidate = new SWAPJS.doValidate();

Step 3:
Call the validator init function with appropriate parameters.
The parameters foremost consists of the id of the HTML form which you want to validate. Second the set of ids of the elements which you want to validate with the type of validation you want to have on it.

dovalidate.init('form_id', {
   name: ['empty'], // Comment 1
   email: ['empty', 'email'], // Comment 2
   webpage: ['url'] // Comment 3
});

Comment 1: ‘name’ is the id of an element. ‘empty’ is the type of validation
‘empty’ is in other words required field, if ‘name’ field is empty form would not submit
Comment 2: ‘email’ is the id of an element. ‘empty’ and ‘email’ are the type of validations
if more than one type validation specified. then both the validation should pass so that form can be submitted
Comment 3: ‘webpage’ is the id of an element. ‘url’ is the type of validation
no ‘empty’ specified means, the field is not mandatory, but if it has some content it has to be of the specified type or else it wont submit

Example:

dovalidate-js:
dovalidate-js demo
dovalidate-js download

Wondering n’ Finding the reason

swapnilsarwe — Thu, 03 Jun 2010 12:28:05 +0000

I saw her walking down the street,
She didn’t let our eyes to meet.
Something was going in her mind,
My eyes were trying to find.

But she didn’t let it happen,
I don’t know why was she feeling shy.
We didn’t have any relation,
But my heart gave out a cry.

Hey girl, why you let this happen,
Why the feeling in your heart is denied.
Why don’t you let our love to sharpen,
Baby, I’m one of the kind.

Why the hell !!!

swapnilsarwe — Sun, 28 Feb 2010 12:27:03 +0000

Why the hell can’t I get you out of my mind,
Why the hell you are just one of the kind,
Why the hell you are such an inspiration,
The hells in this phrase seems to me like a heaven…,
Why the hell…!!!

20 years of Sachin Tendulkar

swapnilsarwe — Tue, 24 Nov 2009 12:24:47 +0000

When Sachin Tendulkar travelled to Pakistan to face one of the finest bowling attacks ever assembled in cricket,

Michael Schumacher was yet to race a F1 car,
Lance Armstrong had never been to the Tour de France,
Diego Maradona was still the captain of a world champion Argentina team,
Pete Sampras had never won a Grand Slam.

When Tendulkar embarked on a glorious career taming Imran and company,
Roger Federer was a name unheard of;
Lionel Messi was in his nappies,
Usain Bolt was an unknown kid in the Jamaican backwaters.

The Berlin Wall was still intact,
USSR was one big, big country,
Dr Manmohan Singh was yet to “open” the Nehruvian economy.

It seems while Father Time was having his toll on every individual on the face of this planet,
he excused one man.

Time stands frozen in front of our Sachin.

We have had champions, we have had legends, but we have never had a Sachin Tendulkar and we never will.

Text Area Auto Xpander v1.0

swapnilsarwe — Mon, 28 Sep 2009 12:22:30 +0000

Text Area Auto Xpander 1.0 has couple of new features which were promised in the last post :

Features Added:

The ability to give the Xpander functionality to the selected textareas.
on load expansion of the textareas if the text is more than the textarea.

Options

animation – true or false will have the text area ‘expand with ease’ or ‘expand directly’.
xtraSpace - The extra space or height in pixels by which the textarea should expand.
delay - The delay in milliseconds in ease for the expansion of the textarea.
callBack - The callback function which executes eveytime the text area expands.
ids - List of textarea ids to which Xpander has to be applied.

Example:

Xpander with specific textarea ids

Xpander for all textarea (no ids mentioned)

Xpander 1.0

If you find any bug, or have something which will improve this plug in just let me know in the comment section.

Text Area Auto Xpander 0.9

swapnilsarwe — Sun, 05 Jul 2009 12:20:11 +0000

Text Area Auto Xpander 0.2 had few issues and very limited options. But there is a good news, Xpander 0.2 has grown up to Xpander 0.9 and now there are fewer issues and couple of more options:

Issues Fixed:

The previous version used negative marginLeft to hide the cloned textarea which used to make the other element following the textarea to be not visible on the page. Now textarea are absolutely positioned them as in jquery-plugin-autoresize of James Padolsey to fix the issue.
Also the tab index of -1 has ben added to avoid the focus being taken to the hidden textareas.
The animation has been given as option rather than having two different JS files (one for easing effect and one without it), you can now just turn on or turn off the animation for expanding the textarea.

Options

animation – true or false will have the text area ‘expand with ease’ or ‘expand directly’.
xtraSpace - The extra space or height in pixels by which the textarea should expand.
delay - The delay in milliseconds in ease for the expansion of the textarea.
callBack - The callback function which executes eveytime the text area expands.

Possible future changes/options:

In this 0.9 version too, by default all textarea gets this Xpansion functionality. Because I think its must for all textareas and not for just selected texareas. Still having an option to do it either way would be nice to have.
Also if textarea at the beginning itself has more text that the specific height of the texarea, in that case the change in the texarea is necessary to trigger the expand in textarea as per the content. Thats the tough one since I am not that good in events. Still would like to fix this issue to soon.

Example:

Xpander

Xpander 0.9

If you find any bug, or have something which will improve this plug in just let me know in the comment section.