AJAX w praktyce na phpBB

O tym, co to jest AJAX mo¿na przeczytaæ na:
http://pl.wikipedia.org/wiki/AJAX
Mo¿na te¿ przeczytaæ artyku³ (w jêzyku angielskim), który jako jeden z pierwszych poruszy³ tê kwestiê:
http://www.adaptivepath.com/publications/essays/archives/000385.php

W tym tek¶cie postaram siê w miarê przystêpnie opisaæ proces instalacji AJAXa na forum phpBB. Zadaniem tej prostej aplikacji bêdzie powiadamianie forumowiczów o nowych postach bez potrzeby prze³adowywania samego forum.

Na wstêpie pragne zaznaczyæ, ¿e jest to bardzo prosta wersja, która ma raczej rzuciæ ¶wiat³o na zastosowanie AJAXa i pos³u¿yæ jako podstawa do budowania bardziej rozbudowanych aplikacji.

Aby wprowadziæ prosty mechanizm powiadamiania o nowych postach na forum phpBB potrzebujemy zrobiæ kilka rzeczy:
– napisaæ skrypt w javaskrypcie stanowi±cy serce ca³ej aplikacji
– zmodyfikowaæ jeden plik szablonu forum phpBB
– zmodyfikowaæ jeden plik silnika forum phpBB
– napisaæ ma³y skrypt zewnêtrzny operuj±cy na bazie forum phpBB

Idea dzia³ania jest taka:
– u¿ytkownik wchodzi na (pod)forum (wchodz±c zarazem uruchamia skrypt wykonywuj±cy siê co zadany okres czasu)
– pobierany jest czas wej¶cia na forum
– pobierany jest numer identyfikacyjny forum
– na podstawie czasu wej¶cia na forum oraz numeru forum jest odpytywana baza danych, czy aby czasem nie pojawi³y siê od wej¶cia na tym forum nowe posty
– otrzymujemy odpowied¼ z bazy danych czy s± nowe posty
– je¶li s± nowe posty, pokazujemy stosowny komunikat, je¶li nie, pokazujemy nie mniej stosowny komunikat ;)

A teraz do rzeczy.

Dla u³atwienia ca³y skrypt w javaskrypcie umie¶ci³em w oddzielnym pliki, który zapisa³em pod nazw± nowe.js i umie¶ci³em w g³ównym katalogu, w którym znajduje siê forum.

Zawarto¶æ pliku forum/nowe.js:

var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
var qReply = root_node.firstChild.data;
if(qReply != 0)
{
// mamy qReply nowych postow, mozna te informacje wykorzystac
nowe.innerHTML = "Nowe posty na forum (" + qReply + ")";
}
else
{
// brak nowych postow, mozemy nic nie robic
nowe.innerHTML = "Brak nowych postow na forum";
}
} else {
alert('There was a problem with the request.');
}
}

}

function checker(tstamp, fid) {
makeRequest("q.php?t=" + tstamp + "&f=" + fid);
}


Plik ten jest pod³±czony do forum poprzez dodanie poni¿szej linii do pliku forum/templates/subSilver/overall_header.tpl tu¿ przed zamkniêciem sekcji nag³ówkowej (czyli linijke przed tekstem ):

<script language="javascript" type="text/javascript" src="nowe.js"></script>


Równie¿ w tym samym pliku (forum/templates/subSilver/overall_header.tpl) w tagu umie¶ci³em instrukcjê, która uruchamia ca³y mechanizm:

onLoad='setInterval("checker({TSTAMP},{FORUM_ID})", 10000);'


oznacza ona tyle, i¿ w momencie za³adowania strony ma zostaæ uruchomiona funkcja odpowiedzialna za okresowe wykonywanie instukcji – setInterval() z dwoma parametrami:
– nazw± funkcji wraz z jej dwoma parametrami (znacznik czasu oraz numer forum) – checker({TSTAMP},{FORUM_ID})
– oraz interwa³em (trudne s³owo ;P) czyli odstêpem czasowym wyra¿onym w milisekundach 1000 milisekund = 1 sekunda

Ostatnia modyfikacja pliku forum/templates/subSilver/overall_header.tpl to dodanie na samym jego koñcu:

<div id="nowe"></div>


czyli na razie puste miejsce na wy¶wietlanie informacji o nowych postach, które bêdziemy mogli dynamicznie uzupe³niaæ za pomoc± javaskryptu.

W nastêpnej kolejno¶ci wypada³oby nadaæ zmiennym szablonowym z pliku overall_header.tpl warto¶ci.
Jak widaæ wy¿ej do funckji checker({TSTAMP},{FORUM_ID}) nale¿y przekazaæ dwa parametry:
– TSTAMP – czyli znacznik czasowy (unix timestamp, wiadomo)
– FORUM_ID – numer id forum
Mo¿emy to osi±gn±æ (na przyk³ad, poniwa¿ osoby bardziej do¶wiadczone mog± wpa¶æ na inne rozwi±zanie) poprzez dodanie poni¿szego kodu PHP:


$fid = intval($_GET['f']);
if(!$fid) { $fid=0; }
$tstamp = time();
$template->assign_vars(array(
'FORUM_ID' => $fid,
'TSTAMP' => $tstamp)
);


do pliku forum/includes/page_header.php na samym jego koñcu tu¿ przed:


$template->pparse('overall_header');


Tworzymy plik q.php w g³ównym katalogu forum o poni¿szej zawarto¶ci, nie zapominaj±c o wpisaniu w³a¶ciwych danych potrzebnych do po³±czenia z baz± danych:


<?php
// ustawiamy zmienne potrzebne do po³±czenia z baz± danych
// które mo¿na wyci±gn±æ z pliku config.php
$DBhost = 'localhost';
$DBuser = 'uzytkownik';
$DBpassword = 'haslo';
$DBname = 'baza_forum';

// pobieramy zmienne
$tstamp = intval($_GET['t']);
$fid = intval($_GET['f']);

// nawi±zujemy po³±czenie
$mysql_link = @mysql_connect($DBhost, $DBuser, $DBpassword);
// wybieramy baze danych
@mysql_select_db($DBname, $mysql_link);

if($fid != 0) {
// zapytanie dla konkretnego forum_id
$sql = "SELECT count(*) FROM phpbb_posts WHERE forum_id = " . $fid . " AND post_time > " . $tstamp;
} else {
// zapytanie dla ca³ego forum
$sql = "SELECT count(*) FROM phpbb_posts WHERE post_time > " . $tstamp;
}
$res = mysql_query($sql);
$w = mysql_fetch_row($res);
$postow = $w[0];

// ustawiamy nag³ówki
header('Content-Type: text/xml');

// wy¶wietlamy XMLa
echo '<?xml version="1.0" ?>';
echo '<root>';
if( $postow > 0 ) {
echo $postow;
} else {
echo '0';
}
echo '</root>';
?>


I to wszystko, teraz po wej¶ciu na forum i odczekaniu minimum 10 sekund od napisania pierwszego nowego posta powinien pojawiæ siê tekst z informacj±.

Powy¿sze dzia³aj±ce rozwi±zanie mo¿ecie przetestowaæ jak siê sprawdza w praktyce na forum rotfl.pl.

wersja 1.00

22 września, 2005