News Ticker for PhpWebSite

In this post, we will combine the two scripts described in the last two entries, namely, A Javascript News Ticker and Extending phpWebSite for mobile access, into a single script that will display in a news ticker the most recent articles of your (phpWebSite) PWS-based website. The functions defined in these two articles will be reused here with minimal modifications. So if you have not yet read these articles, this is the right time to do so. Simply click the link provided above and return here afterwards.

To incorporate the new script into phpWebSite, we will use theme.php and theme.tpl included in every phpWebSite theme. theme.tpl defines the overall layout or template of your site, while theme.php facilitates the inclusion of php files into phpWebSite. We will be manipulating these two files in order to include the php script for our news ticker. But before this, we will first describe the script itself.

The basic idea is to use the javascript described in the news ticker article for the news ticker part. But instead of hard-coding the title and link arrays, as we did before, we will use the script in Extending phpWebSite for mobile access article to extract the titles and links of the most recent articles in your PWS-based website. We then output everything into a <script> html tag and insert this into phpWebSite using theme.tpl.

To simplify the structure of the php script, we will divide the script into three functions: 1) get_ticker_source() function, which will output the javascript source code for the news ticker, 2) get_current_entries() function, which will retrieve the titles and links of recent entries from the phpWebSite’s database, and 3) print_ticker_script() function that will combine the outputs of the two previous functions into a single javascript source.

Without further ado, here is the code for the first function.

function get_ticker_source() { 
    $js_source = " 
        var tkrCtr = 0; 
        var tkrCurr = ''; 
        var tkrPtr= 0; 

        var tkrTitle = new Array(); 
        var tkrLink = new Array(); 

        function newsticker() { 

        if (tkrPtr < tkrTitle[tkrCtr].length) { 
            tkrPtr++; 
            tkrCurr = tkrTitle[tkrCtr].substring(0,tkrPtr) + '_'; 
            myTicker.innerHTML 
                = "<a href='"+tkrLink[tkrCtr]+ 
                   "' style='text-decoration:none;'>"+tkrCurr+ 
                   "</a>"; 
            setTimeout('newsticker()',100); 
            return; 
        } 
        tkrPtr= 0; 
        if (tkrCtr < tkrTitle.length-1) { 
            tkrCtr++; 
        } else { 
            tkrCtr=0; 
        } 
        setTimeout('newsticker()',5000); 
    } 
    "; 

    return $js_source; 
}

This function basically returns the javascript discussed in the news ticker article except for the values of the tkrTitle and tkrLink variables, which were hard-coded into the javascript in the earlier article. In here, we will assign into these variables the latest entries, which will be extracted from the phpWebSite database. This will be handled by the get_current_entries() function defined below.

function get_current_entries() { 
    $ctr = 0; 
    $entries = ''; 

    $pws = get_pwspath(); 

    // load config file 
    $config = $pws . "/conf/config.php"; 
    file_exists($config) or die("Error loading page!"); 
    require($config); 

    // connect to db 
    $conn = "$dbversion://$dbuser:$dbpass@$dbhost/$dbname"; 
    require_once('DB.php'); 
    $db = DB::connect($conn); 

    $sql = "SELECT id, title, updated_date FROM ". $table_prefix; 
    $sql .= "mod_article ORDER BY updated_date DESC LIMIT 10"; 

    $res = $db->query($sql); 
    while($data = $res->fetchRow(DB_FETCHMODE_ASSOC)) { 
        $id = $data['id']; 
	$title = $data['title']; 
	$entries .= "tkrTitle[$ctr] = "$title";"; 
	$entries .= "tkrLink[$ctr] = "http://${source_http}index.php? 
                                    module=article&view=$id";"; 
	$ctr = $ctr+1; 
    } 
    $db->disconnect(); 

    return $entries; 
}

This function first loads the config.php file to get the relevant information for the database connection. Again, you need to define the function get_pwspath(), which should return the full path of your phpWebSite installation. The function then connects to the database and extracts the most recent 10 entries. The entries id and title are retrieved within the while loop. These are collected into the string variable $entries, which basically assigns the titles into the tkrTitle variable and the links into the tkrLink variable. After retrieving the entries, the script disconnects from the database and the $entries variable is returned. Note that in the above code, only the entries from the article module are extracted.

The last function, print_ticker_script(), will combine the outputs of the two functions into a single javascript code and is given below:

1.  function print_ticker_script() { 
2.      $tkr = "<div id="myTicker">Ticker inactive.</div>"; 
3.      $tkr .= "<script language="JavaScript" type="text/JavaScript">"; 
4.      $tkr .= get_ticker_source(); 
5.      $tkr .= get_current_entries(); 
6.      $tkr .= "newsticker();"; 
7.      $tkr .= "</script>"; 
8.      return $tkr; 
9.  }

Line 2 defines the html element, in this case a <div> element with id myTicker, that will contain the news ticker. The content of this element will be replaced by the title of the entries contained in tkrTitle array. If javascript is not enabled, the displayed text will default to “Ticker inactive.” Lines 3 to 7 is our javascript source. The opening tag of the script <script> is defined in line 3. The source is then added in line 4 for the script variables and newsticker function by calling the get_ticker_source() function. The arrays tkrTitle and tkrLink are populated in line 5 using the function get_current_entries(). Finally, the newsticker() function is called in line 6 to initiate or start the script. Line 7 closes the script tag and the $tkr string variable is returned in line 8. The output of this function is therefore the entire source of the news ticker script with a dynamic definition of the titles and links depending on the most recent articles available in you PWS-based website. Before proceeding, save these three functions into a file called, say for example, pwsticker.php.

To integrate this into your phpWebSite, open the theme.php file located in the themes/yourcurrenttheme/ directory. For instance, if you are using the Default theme, this file is located in themes/Default/ directory. In this file, add the following php code:

include('pwsticker.php'); 
$THEME['NEWSTICKER'] = print_ticker_script();

assuming pwsticker.php is saved in the root directory of your phpWebSite installation. Otherwise, enter the appropriate path for pwsticker.php in the include statement. When this is done, open the theme.tpl file, also located in the same directory as the theme.php file. In this tpl file, insert ‘{NEWSTICKER}’, without the enclosing quotation marks, wherever you want your news ticker to appear.

And that’s it! You now have a working news ticker in your PWS-driven website. If ever you change your theme, don’t forget to update the theme.php and theme.tpl files in the new theme to keep your news ticker running after the change. Click here to download the full script and here for a working example.