AJAX w praktyce na phpBB

22 września, 2005

Ajax w praktyce na phpBBO 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

Tagi: ajax,phpbb,software


Kalendarz

Lipiec 2017
P W Ś C P S N
« Lut    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Najnowsze wpisy