RSS Feed Reader using Ajax and PHP Part 2

Written By: Jay

- 01 Aug 2006 -
















Description: This HOWTO will explain how to extend Building an Ajax & PHP RSS Reader using AjaxAgent Part 1 to include No-Refresh/No-Post-Back Form operations, database interaction as well as auto-complete functions that demonstrate some advanced Ajax/PHP operations. The end result will be an RSS Feed Reader that contains the typical Create, Read, Update and Delete database operations but using Ajax to perform these tasks.

Get a List of Feeds

Again this is a 3 part process of the HTML, PHP and Ajax but this is a hack of the code from Part 1 for getting the feeds.

Below the Add Feed Form add a DIV to store the list of Feeds (Name and URL):

HTML:

Now you'll need some PHP to get the feeds from the Database which I also covered in this article: Using Ajax Agent and PHP for Auto-Complete.

PHP:

function GetFeeds() {
          
          include("dbconn.inc.php");
          $strSQL = "SELECT * FROM Feeds";
                $db= mysql_connect($dbHost, $dbUser,$dbPwd);
                mysql_select_db($dbName,$db);
                $result = mysql_query($strSQL,$db);
                $num = mysql_num_rows($result);        
        
                $listArray = array();
                $i=0;
                while ($i<$num)
                {
                        $feedName = mysql_result($result,$i,"FeedName");
                        $feedUrl = mysql_result($result,$i,"FeedURL");
                        $feedID = mysql_result($result,$i,"FeedID");
 
                        $feed_array = array("FeedID" =>$feedID,"FeedName" =>$feedName,"FeedURL"=>urldecode($feedUrl));
                        $listArray[$i] = $feed_array; 
                        
                $i++;                      
                }                             
                asort( $listArray );
                mysql_close($db);
                return array_values($listArray); 
  }

This code gets all of the Feeds form the Feeds table, loops over the rows and populates and returns an array with the FeedName, FeedUrl and FeedID.

Lastly we need to add the Ajax code to populate the Feed list which is a little more complex but follows the same pattern as other Ajax code we have used.

Javascript:

  function GetFeeds() {              
          agent.call('','GetFeeds','GetFeeds_Callback');          
  }
  
  function GetFeeds_Callback(obj) {          
          var htmlOutput = document.getElementById("feedList");                   
          var html = [];                              
          for (var i = 0; i < obj.length; i++)
          {
                html[html.length] = '
  • \"
    • javascript:OnClick=ReadFeed(\''+ obj[i]["FeedURL"] +'\');\">' + obj[i]["FeedName"] + ' \"javascript:OnClick=EditFeed(\''+ obj[i]["FeedID"] +'\');\" >edit;'                     
          }           
          document.getElementById("feedList").innerHTML = '
      '
    +html.join('')+'';            
  }

    The first Ajax function GetFeeds() is very simple: invoke the agent call using the PHP function GetFeeds and the call back function GetFeeds_Callback defined but this time we do not have any parameters.

    The second Ajax function GetFeeds_Callback(obj) is a little more complex but it's nothing we haven't seen before. This function is looping over the array object returned form the PHP function GetFeeds and is pulling items out by index and name (obj[index]["FeedURL"]) and using that data to create a HTML List of links. Once the loop completes it stuff the HTML List inside

    . You'll notice that the link we created has an OnClick event defined with Ajax function ReadFeed. The ReadFeed uses the code from part 1 to get the RSS Data using a Feed URL and then populate another div with the Feed Items.