Tag Archives: PHP

My darling web scripting language.

Making a Live Score Board – Client

Here comes the cool part now. The client! using the famous XMLHttpRequest

The basic logic of creating the client is this

  • Make asynchronous calls to the server to fetch the match data
  • Parse the XML data
  • Using DOM update the content of the Score board
  • And obviously add a timer to refresh the asynchronous HTTP calls


It should look something like this.
Score card screenshot

The first time you load the page (most probably it should be a small pop-up window) you can write the basic HTML…
and the main HTML would be something like this.

<div id="scoreboard">

<p style='font-weight:bold;'>
<span id="matchsex">Womens</span> <span id="matchround">Semifinal</span>: 
<span id="player1">Hingis</span> vs <span id="player1">Sharapova</span> 
(<span id="elapsedtime">1.5h</span>)</span> 
</p>

<table style="border-collapse:collapse;" border="1" bordercolor="#888888" 
cellspacing="0" cellpadding="5">
	<tr>
		<td align="left" > </td>
		<td colspan="3" align="left" >Sets</td>
		<td align="left" >Game</td>
	</tr>
	<tr>
		<td align="left" id="matchplayer1">Hingis </td>
		<td align="center" id="setplay1">6</td>
		<td align="center" id="setplay2">3</td>
		<td align="center" id="setplay3">4</td>
		<td align="center" id="gamepoints1">30</td>
	</tr>
	<tr>
		<td align="left" id="matchplayer2">Sharapova</td>
		<td align="center" id="setplay1">4</td>
		<td align="center" id="setplay2">6</td>
		<td align="center" id="setplay3">2</td>
		<td align="center" id="gamepoints2">15</td>
	</tr>
</table>

</div>

Let us consider some important IDs (the id attributes) that we’ve used

  • matchsex: To set the type of match women’s, men’s, etc.
  • matchround: Quarter final, semi final, etc
  • player1, player2: Player’s names id
  • elapsedtime: Elapsed Time
  • matchplayer1, matchplayer2: Score Board’s Player’s name
  • serving: If the player is serving
  • setplay1, setplayx: Playerx’s set
  • gamepoints1, gamepoints2: Player1 and 2’s gamepoints

Creating a Live Score Board

Many a times you may have come across a fancy “Live Score Board”, recently (as of writing) you may have seen the “Java Applet”ized score board. If you want to have a similar such app, but don’t want to get into Java and applets. You may wonder.

But there is a solution, Asynchronous Javascript HTTP Request calls, you may commonly now it AJAX, or famous as XMLHttpRequest

… and make something like
Score board screenshot

You can find working example here, Live Score Board

For your live Score Board App, you need following .

  • A Score Server, which gives scores in a specific format, ideally XML
  • A Client that requests the Server, and displays the parsed XML

We need a Server or a web Service, that will give us the requested data. We’ll use XML to output the response of the server.
We’ll structure the XML as follows

<?xml version="1.0"?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>30</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>15</gamepoints>
	</player>
</match>
</scores>

Assume that we have a database, which is fed continuously. Say we access the above data using the URL as.. http://www.ruturaj.net/tennis/score_server.php?round=semifinal&category=singles&sex=women&player=hingis

Here is a test score_server.php script for testing.

<?php

$array_points = array(15, 30 , 40);
$gamepoints1 = array_rand($array_points, 1);
$gamepoints2 = array_rand($array_points, 1);
$xml = '<?xml version="1.0" ?>
<scores xmlns="http://www.ruturaj.net/tutorials/php">
<match elapsedtime="1.5h" round="semifinal" category="singles" sex="women">
	<player name="Hingis" serving="1">
		<set no="1">6</set>
		<set no="2">3</set>
		<set no="3">4</set>
		<gamepoints>'.$array_points[$gamepoints1].'</gamepoints>
	</player>
	<player name="Sharapova">
		<set no="1">4</set>
		<set no="2">6</set>
		<set no="3">2</set>
		<gamepoints>'.$array_points[$gamepoints2].'</gamepoints>
	</player>
</match>
</scores>
';

header("Content-Type: text/xml");
echo ($xml);
?>

Building a Tag Cloud (logic)

Once we have the data we want, we can build the logic to make the cloud.
Here the logic is extremely simple (no wonder I’ve made a tutorial about it).

The idea is to assign a minimum font-size in “pt” to the least occured tag. In our case we have taken 8pt. Since this 8pt size is applicable to the XML tag (our example), whose tag count is 3. We need to find a multiplying factor for all the tags, that will give us their respective font sizes.

The multiplying factor should take into account, the tags count, and the total of the tag count, which in turn is the percentage of occurance for that tag. So if the factor is x, tag count is 3, tag count sum is 58 and font size is 8, the equation would be

(3 / 58) * x = 8
which gives us x as 
x = (58 / 3) * 8

Now this x has to be multiplied to the % factor of that tag,
to get it's font size value

tag[http] = (10 / 58) * ( (58 / 3) * 8 )

so lets go with PHP,

$min_val = min($tags);
$font_multiplier = ($tag_sum / $min_val) * 8;

// assign the the font sizes
foreach($tags as $key => $value) {
  $tags[$key] = ($value / $tag_sum) * $font_multiplier;
}

Now is the time to display the tags, and link it to what ever, The spacing for each tag word would be fixed I’ll keep it 15pt. Its upto your design to change it!

foreach($tags as $key=>$value) {
  echo "<span style='font-size: {$value}pt; font-family: 
        tahoma;'>$key</span><span style='font-size: 15pt; font-family: 
        tahoma;'>  </span>";
}

Building a Tag Cloud

You may have come across Del.icio.us Tags, which is commonly referered as a “Tag cloud”
tag cloud

It is extremely easy to build such a cloud, all you need to have is to have tags associated with your posts, comments, blogs, etc.

Consider you have a table of posts called POSTS, and another one of TAGS, something like below.

posts
* post_id
* tag_id
* post_content

tags
* tag_id
* tag_name

We need to get the count of tags, and the no. of times that tag has been associated. The query would be.

select a.tag_name, count(b.post_id) tag_count
from tags a, posts b
where a.tag_id = b.tag_id
group by b.tag_id
order by a.tag_name

This will give us a result like this

AJAX, 15
HTTP, 10
Web, 30
XML, 3

Let us decide a minimum font size for the tag, let us take the value of 8pt as the smallest font possible, All that remains is to calculate the font sizes.

We’ll grab the result set first and get the sum of tag count.

$tags = array();
$tag_sum = 0;
while ($row = mysql_fetch_object($res)) {
  $tags[$row->tag_name] = $row->tag_count;
  $tag_sum = $tag_sum + $row->tag_count;
}

// just make a copy of the tags array
$tags_copy = $tags;