CODEWITHSUNDEEP
phpjquerymysqlajaxfeed
Kevin Oluseun Karimu
Kevin Oluseun Karimu

Reputation: 545

How to Create a Newsfeed (AJAX Newsfeed)

I have an information system, more specifically an information system that is a ticketing system. The info system will contain accounts that will have an infinite or 'n' amount of users. I want users to be able to see other users actions or changes to content in a newsfeed. (Just like Facebook). I will be using PHP, MySQL, and AJAX (or jQuery) to implement the newsfeed. I will know how to setup the tables and queries.

How do I use PHP and AJAX or jQuery to pull the content and display it in the newsfeed (in Facebook newsfeed style with either the fade or scroll effect?).

I have been searching for a good tutorial and have not found one. I would like to preferably code this from scratch if possible.

I'm still having a few issues: Here is what I have:

ajax.php

<?php require_once('../../Connections/f12_database_connect.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

mysql_select_db($database_f12_database_connect, $f12_database_connect);
$query_newsfeed_a = "SELECT * FROM newsfeed";
$newsfeed_a = mysql_query($query_newsfeed_a, $f12_database_connect) or die(mysql_error());


while($row_newsfeed_a = mysql_fetch_assoc($newsfeed_a))
{
        echo("<div class='feedItem'>");
    echo("<div class='title'>" . $feedItem['title'] . "</div>");
    echo("<div class='body'>" . $feedItem['body'] . "</div>");
    echo("</div>");



}
$totalRows_newsfeed_a = mysql_num_rows($newsfeed_a);
?>

<?php
mysql_free_result($newsfeed_a);
?>

feed.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<script>
    function refreshNews()
    {
        $("#news").load("ajax.php")
    }
</script>
</head>

<body>





<div id="news"></div>
</body>
</html>

What am I doing wrong?

Upvotes: 3

Views: 15906

Answers (2)

sanukcm
sanukcm

Reputation: 177

Chris' answer gives a good high level overview of the concept, but it will not provide real time updates.

We use Ajax Push Engine for our real time applications at work.

If you are dead set on using PHP and Jquery, You could use something similar to what Chris recommended on the server side, and on the client side hack together a timer that fires an ajax request every so often.

This is just an idea, not working code that I've tested but something similar to: 

setInterval ( 
    function(){
        $.get("yourScriptName.php", { userID: 555},
            function(data){
                //update your news feed with data received via ajax request here.
            });
    }, 30000 );

See w3c's setInterval() documentation and Jquery's $.get() documentation for more details.

Upvotes: 1

CLo
CLo

Reputation: 3730

If you want to code it from scratch the basic process is to create a PHP script that gathers the data and sends it back to the AJAX request. Usually I create a separate PHP file that handles whatever operation I need.

Anything that your PHP script would normally output is sent back to the AJAX request. So any HTML tags, any echo / print statements. Things like header() create output as well, just a warning.

Depending on the design of the page, you can create the HTML in PHP and then use jQuery to put that html into the page as needed. Another option is to use PHP's json_encode() and send all the data back as JSON and build the HTML structure client side.

If each feed item is going to have the same basic structure, then it's probably easiest to create the HTML server side in the PHP like you would for any regular page. You only need the HTML code snippet that is the feed.

The simplest method would be jQuery.load() http://api.jquery.com/load/

Inside the HTML Page:

<script>
    function refreshNews()
    {
        $("#news").load("path/to/ajax.php")
    }
</script>

<div id="news"></div>

In PHP:

$sql = "SQL TO GET NEWS FEED";

$result = mysql_query($sql);

while($feedItem = mysql_fetch_assoc($result))
{
    echo("<div class='feedItem'>");
    echo("<div class='title'>" . $feedItem['title'] . "</div>");
    echo("<div class='body'>" . $feedItem['body'] . "</div>");
    echo("</div>");
}

Then you can call refreshNews() from another event (refresh button, timed event, etc.).

Obviously your html and data structure may be different. Just make sure this is the only thing this PHP file outputs. This includes anything outside the tags.

There are more efficient ways of doing this, this script would essentially reload the entire list of news items on each call to refreshNews(). For now this is one of the easiest ways to get it working, so try it out and if need be there are more efficient ways.

Upvotes: 3

Related Questions