Navigate this blog from Frogans

I’ve added a feature to frogans*lab (the Frogans site companion to this web site). I call it the Launcher, but it’s just a slide that displays a list of every post on this blog, starting with the most recent.

It appears when you hit “Tips, Tricks and Trys” on the main menu slide of frogans*lab.

The list is displayed showing four entries at a time. It has three buttons for navigating the list. They are reminiscent of On the left is a button for seeing the four previous entries. On the right is a button for seeing the four most recent entries. If you are already at the four most recent entries, this button takes you back to show you the oldest ones. In the middle is a smaller button to the start of the list, i.e., the four most recent entries.

Oh, and the banner on the top left with the Frogans Lab logo takes you back to the menu slide of frogans*lab.

So where does this list come from? Essentially, it is taken from an RSS feed that can be generated by Worpress. frogans-lab.com is a Wordpress-powered site, and like any such site an RSS feed for the site is accessible via a simple URL, in this case being http://frogans-lab.com/feed.

If you look at the source of the RSS feed you will see that it is written in XML, meaning that it can be parsed in PHP using PHP’s DOMdocument class. For a quick tutorial of how that works, check out this from W3schools.com (https://www.w3schools.com/php/php_xml_dom.asp).

For the Launcher, I didn’t want to generate an RSS feed every time the slide loaded, so I wrote a script to write the feed to disk on the server.

// Look and see the local file
$filename = 'newfeed.xml';
$file_age=0; //declare the variable
if (file_exists($filename)) {
    $file_mod_date=date (filemtime($filename));
    $now_date=time();
    $file_age=$now_date-$file_mod_date; //see how old it is
}

if($file_age>86400){ //if the file is more than a day old...
    $feedurl = "http://frogans-lab.com/feed";
    $feedme = file_get_contents($feedurl);
    if($feedme):
      $fh = fopen('newfeed.xml', 'w+'); //create new file if none exists
      fwrite($fh, $feedme) or die("<!-- Failed to write contents to new file -->"); //write contents to new XML file
      fclose($fh) or die("<!-- failed to close stream resource -->"); //close resource stream
    else:
      die("<!-- Failed to read contents of feed at $feedurl -->");
    endif;
}

I wrote a PHP script to parse the RSS feed using the DOMdocument class and to then take the parts of the feed that I needed for the Launcher, such as the title of the posts, their URLs and their publication dates, and put them in an array.

$my_feed="newfeed.xml";
$rss->load($my_feed);
$feed = array();
foreach ($rss->getElementsByTagName('item') as $key => $node) {
    $media = $node->getElementsByTagNameNS('http://search.yahoo.com/mrss/', 'thumbnail');
    $item = array ( 
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
//        'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
        'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
        'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
);

    array_push($feed, $item);

}

Then I wrote a script that would choose four entries, depending on what ”page” we were on.

$feed_length = count($feed);
$pages=ceil($feed_length/4);
echo "
<!-- There are ".$feed_length." posts on this blog and $pages pages. -->
";
$last_page=$pages-1;

// $next_page and $prev_page will be used in data elements for the navigation buttons
$next_page=$page-1;
if ($next_page<0){
    $next_page=$pages-1;
}
$prev_page=$page+1;
if ($prev_page>$last_page){
    $prev_page=0;
}

$title_num_0=$page*4;
$title_num_1=$title_num_0+1;
$title_num_2=$title_num_1+1;
$title_num_3=$title_num_2+1;
$next_pgae_title_num=$title_num_3+1;

for($i=$title_num_0;$i<$next_pgae_title_num;$i++){
     // Eliminate the forbidden characters “1”,” –“, “<” and “>”
$feed[$i]['title'] = str_replace("&", "&", $feed[$i]['title']); 
$feed[$i]['title'] = str_replace("--", "-;", $feed[$i]['title']);
$feed[$i]['title'] = str_replace("<", "<", $feed[$i]['title']);
$feed[$i]['title'] = str_replace(">", ">", $feed[$i]['title']);
     // Must take into account the 7-hour difference between my server’s local time and that in the RSS feed
$feed[$i]['month'] = date('M', strtotime("+7 hours", strtotime($feed[$i]['date']))); //www.phpforkids.com/php/php-functions-date-time.php
$feed[$i]['day'] = date('j', strtotime("+7 hours", strtotime($feed[$i]['date']))); //www.phpforkids.com/php/php-functions-date-time.php
   echo "<!-- ".
   $feed[$i]['title']."
   ".
   $feed[$i]['month']." - ".$feed[$i]['day']." 
   link is ".$feed[$i]['link']."-->";           
}

So for the first entry I have a value for the title ($feed[$title_num_0]['title']), month ($feed[$title_num_0]['month']), day ($feed[$title_num_0]['day']) plus the URL for the post ($feed[$title_num_0]['link']). For the second entry, it’s the same, except that $title_num_0 is replaced by $title_num_1 and so on. For example:

<!-- 0  (entry 1) -->

<restext resid='date0_t_r' fontref='title_black_fnt' size='100,80'  orientation='h-ttb-ltr' talign='center' >
    <text><?php echo  $feed[$title_num_0]['month']; ?></text>
    <text><?php echo  $feed[$title_num_0]['day']; ?></text>
</restext>
<restext resid='title0_t_r' fontref='title_white_fnt' size='485,80'  orientation='h-ttb-ltr' >
    <text><?php echo  $feed[$title_num_0]['title']; ?></text>
</restext>

<button buttonid='0_b' goto='way-out' uri='<?php echo $feed[0]['link']; ?>' >
    <layer resref='behind_titles_r' layerid='behind_titles0_l'  align='left-top' pos='47,74' leapout='lead' combine='clip' visible='always' />
    <layer resref='behind_dates_r' layerid='behind_title0_b_l'  align='left-top' pos='46,112' leapout='lead' combine='clip' visible='not-selected' opacity='20'   />
    <layer resref='behind_title_b_r' layerid='behind_title0_b_o_l'  align='left-top' pos='105,74' leapout='lead' combine='clip' visible='selected' />
    <layer resref='date0_t_r' layerid='date0_t_l'  align='center-top' pos='73,116' leapout='lead' combine='add' angle='-4' visible='always' />
    <layer resref='title0_t_r' layerid='title0_t_l'  align='left-top' pos='119,114' leapout='lead' combine='add' angle='-4' visible='always' />
    <layer resref='title0_t_r' layerid='title0_t_o_l'  align='left-top' pos='119,114' leapout='lead' combine='clip' angle='-4' visible='not-selected' filterref='neg'  />
</button>

The navigation buttons at the bottom of the slide do nothing more than to send a previous, next or first page number as a data value to the server so that the next time the slide is opened up, a new set of four entries will be displayed.

Be the first to comment

Leave a Reply

Your email address will not be published.


*