PHP/Javascript/Jquery - Dynamic Website Diagram

Question

I want to have an application that displays all of my website's external links and outputs a diagram. Like for example www.example.com/articles/some-title.html is linked to my homepage.

Home
 - www.example.com/some-text  
 - www.another-site.com/my-title
 - www.example.com/articles/some-title.html Products
Products
 - www.buy-now.com/product-reviews/231/098989
 - www.sales.com/432/title-page.html Categories
 - www.ezinearticles.com/blah-blah-blah

Something like SlickMap, but not on CSS.

I have setup a table on my DB so this will be dynamic and more links to come. I'm using CakePHP in working on this. Any ideas/suggestions?

Thanks for your time.

Answer 1

You can use PHP to retrieve the results from the database and you can use jQuery's treeView to display them.

Also, raphaël.js might be of interest, especially its diagram plugin, its fully customizable and should be something to check out.

Answer 2

If I am understanding you correctly, you want to parse the contents of an entire web site (HTML, JS, etc...), and create an array that contains all of your links, as well as the pages that they can be found on. If that is correct, this code will get the job done:

<?php

$path = "./path_to_your_files/";

$result = array();

if ( $handle = opendir($path) ) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {

            $contents = file_get_contents($path . $file);

            preg_match_all("/a[\s]+[^>]*?href[\s]?=[\s\"\']+"."(.*?)[\"\']+.*?>"."([^<]+|.*?)?<\/a>/", $contents, $parts);

            foreach ( $parts[1] as $link ) {

                $result[$file][] = $link;

            }

        }
    }
    closedir($handle);
}

print_r($result);

?>

Answer 3

You can see slickmap, is a css implementation for site diagrams

http://astuteo.com/slickmap/