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.

Creating the Feed

First well create the form elements to add a feed.

HTML:

  type="hidden"  name="txtFeedID" id="txtFeedID"  >

         type="text" value="Feed Name" name="txtFeedName" id="txtFeedName" size="50">

         type="text" value="Feed URL" name="txtFeedURL" id="txtFeedURL" size="50"/>

         href="javascript:OnClick=AddFeed();" id="linkEditAction">Save Feed   
         href="#" id="linkDelete" style="visibility:hidden;">Delete Feed

What we have is a place to store the FeedID (which we'll need when we update and delete), a textbox for the Feed Name, a textbox for the Feed URL and 2 links that will Add/Update and Delete a feed. The item to note here is Save Feed which will trigger the Ajax function AddFeed that we'll create later on.

Next we need some PHP to insert the Feed Name and Feed URL into the database:

PHP:

  function AddFeed($feed , $url)  {          
                
                if($feed != "" && $url != "")
                {
                        include("dbconn.inc.php");
                        $ecnURL = urlencode($url);             
                        
                        $strSQL = "INSERT INTO Feeds(FeedName,FeedURL,FeedcatID) VALUES('$feed','$ecnURL','')";
                
                        $db= mysql_connect($dbHost, $dbUser,$dbPwd);
                        mysql_select_db($dbName,$db);
                        $result = mysql_query($strSQL,$db)OR die(mysql_error());                    
                }
   }

This is pretty straight forward code:

  1. Check to see that we have a feed data
  2. Get the DB connection parameters
  3. Encode the Feed URL so it is DB friendly
  4. Create the SQL Insert string
  5. Connect to the DB and execute

Lastly is the Ajax part which is also very simple and is a pretty standard code snippet.

Javascript:

 function AddFeed() {    
                var feedName = document.getElementById("txtFeedName").value;
                var feedURL = document.getElementById("txtFeedURL").value;           
                agent.call('','AddFeed','AddFeed_Callback',feedName,feedURL);     
        }
  
        function AddFeed_Callback() {               
                GetFeeds();           
        }

First we create the function AddFeed and get the Feed Name and Feed URL from the form.

Next we invoke the ajaxagent call. The first parameter is blank because we are using PHP code on the same page as the agent code. Then we declare that we are using the PHP function AddFeed and we are using the JavaScript CallBack function AddFeed_Callback. And lastly we pass in the Feed data in a comma separated format.

Once this code is run and it calls AddFeed_Callback() which in-turn calls another Ajax function GetFeeds() which I will explain in the next section.