Home Notes Web development Dynamic portfolio

Dynamic portfolio E-mail
Saturday, 18 April 2009 22:38

I wanted to give visitors a third "plain-clothes" option for viewing my portfolio - plain-clothes being without JavaScript or Flash.  But at the same time I wanted the data to be dynamically populated, the way it is in the jQuery and Flash versions.

The task was pretty easy using PHP 5's built-in XML DOMDocument class.  I used the same XML files that carry the data for the other sites, and rendered it with the following PHP code:

$xmlDoc = new DOMDocument();
$xmlDoc->load("name of XML file");
 
    $sites = $xmlDoc->getElementsByTagName("site");
    foreach ($sites as $site){
     echo "<p 'style=color:#CD6620;'><strong>" . 
    $site->getElementsByTagName('site_title')->item(0)->nodeValue . "</strong></p>";
     
     if ($site->getElementsByTagName('imageURL2')->item(0)->nodeValue == ""){
 
        echo "<p><a target='_blank' title='Visit site' href='" . 
    $site->getElementsByTagName('siteURL')->item(0)->nodeValue . 
    "'><img title='" . $site->getElementsByTagName('site_title')->
    item(0)->nodeValue . "' alt='" . $site->getElementsByTagName('site_title')->
    item(0)->nodeValue . "' src='" . $site->getElementsByTagName('imageURL')->item(0)->
    nodeValue . "' /></a></p>";
         }

else{  
 
        echo "<p><a target='_blank' title='Visit site' href='" . 
    $site->getElementsByTagName('siteURL')->item(0)->nodeValue . 
    "'><img title='" . $site->getElementsByTagName('site_title')->
    item(0)->nodeValue . "' alt='" . $site->getElementsByTagName('site_title')->
    item(0)->nodeValue . "' src='" . $site->getElementsByTagName('imageURL')->item(0)->
    nodeValue . "' /></a>" . 
 
        "   <a target='_blank' title='Visit site' href='" . 
    $site->getElementsByTagName('siteURL2')->item(0)->nodeValue . 
    "'><img title='" . $site->getElementsByTagName('site_title')->
    item(0)->nodeValue . "' alt='" . $site->getElementsByTagName('site_title')->
    item(0)->nodeValue . "' src='" . $site->getElementsByTagName('imageURL2')->item(0)->
    nodeValue . "' /></a></p>";
 
    }

echo "<p>" . $site->getElementsByTagName('description')->item(0)->nodeValue . "</p>";
     
     if ($site->getElementsByTagName('site_details')->item(0)->nodeValue != ""){
      echo "<p>" . $site->getElementsByTagName('site_details')->item(0)->nodeValue . "</p>";
     }
     
     echo "<p><strong>Skills used</strong>" . $site->getElementsByTagName('skills_used')->
    item(0)->nodeValue . "</p><hr />";
}

echo "<p>" . $site->getElementsByTagName('description')->item(0)->nodeValue . "</p>";
     
     if ($site->getElementsByTagName('site_details')->item(0)->nodeValue != ""){
      echo "<p>" . $site->getElementsByTagName('site_details')->item(0)->nodeValue . "</p>";
     }
     
     echo "<p><strong>Skills used</strong>" . $site->getElementsByTagName('skills_used')->
    item(0)->nodeValue . "</p><hr />";
}

I used the DirectPHP plugin available for Joomla, and placed the code above inside PHP tags within the article content.

The result can be viewed here



Tags: XML  PHP  portfolio  DirectPHP  code