2007.10.21.

Budapest
Hotel Flandria

Szűcs Viktor

Ajax és Joomla!
Hogyan integrálhatunk ajaxos
megoldásokat Joomlába?
Miről is lesz szó?

 Mi az az Ajax?

 Miből áll?

 A Prototype.js, mint segédeszköz

 Ajax pro és kontra

 Az Ajax integrálása a Joomlába

Az Ajax és a Joomla! ???
A Joomla és az Ajax
Az Ajaxról

 Ajax = Asynchronous Javascript and

XML (Aszinkron Javascript és XML)
 Nem egyetlen technológia, hanem
több, már meglévő technológia
együttes alkalmazása
 Lényege: aszinkron
adatkommunikáció, azaz adatok
cseréje a böngészőben, annak
újratöltése nélkül
Az Ajax tartalmazza…

 (X)HTML és CSS szabványokat, amelyek a

tartalom megjelenítésére és formázására
szolgálnak.
 Document Object Modell-t (DOM), amely a
dinamikus megjelenítésért és az
interaktivitásért felelős.
 XML-t és XSLT-t az adattovábbításra, de más
formátum is megfelel.
 XMLHttpRequest (XHR) objektumot, amely
az aszinkron adatcserét végzi a szerver és a
kliens között.
 Javascriptet, ami az egészet összefogja.
Az ajaxos kommunikáció modellje
A Prototype.js

A Prototype.js egy Javascript

keretrendszer, amely megkönnyíti a
dinamikus web alkalmazások
fejlesztését.
 Léteznek más JS keretrendszerek is:
mootools, Dojo, Rico
 Egyszerűsített szintaktika:pl. $() a
getElementById() helyett.
 Könnyen használható Ajax Library.
Pl.: Ajax.Request(url[, options])
 A lényeg

var url='modules/mod_ajaxmenu2/ajaxresponse.php';

var params = 'a=' + this.id + '&b=' + this.value;

var ajax = new Ajax.Request (

url, {
method: 'get',
parameters: params,
onLoading: load,
onComplete: showResponse,
onFailure: CheckDiv
});
Ajax pro és kontra

Pro:
 „Desktop” érzés
 Gyors
 Folyamatos kapcsolat

Kontra:
 Vissza gomb (Back button)
 Kikapcsolt javascript mellett nem
működik
 Kereső motorok nem tudják indexelni
 Egy ajaxos menükezelő modul felépítése

mod_ajaxmenu.php, ami tartalmazza prototype.js, amely megkönnyíti

a paramétereket, és belinkeli a a kódírást és átláthatóbbá teszi a
javascript fájlokat forrást
<li id=‘catid_45‘ value=‘11' >

Ajaxos
ajaxresponse.php, ajaxmenu.js, amely az
amely a kapott paraméterek menümodul ajaxos lekérdezésért felel
alapján elvégzi az adatbázis
lekérdezést és megjeleníti
a lekért adatokat

scriptaculous.js és XML fájl, amely tartalmazza

display.js, amelyek a a modul paramétereit
különleges effekteket
végzik
Lássuk a medvét
Mi történik ekkor a háttérben?

 Az onclick eseménykezelő meghív

egy függvényt, amely:
 elvégzi az XHR-t, azaz
 Létrehoz egy új Ajax.Request objektumot
 Átadja a megfelelő paramétereket az
 url változóban megadott fájlnak
 amely a megadott paraméterek
segítségével elvégzi az adatbázis
lekérdezést
 majd a kimenetre írja az eredményt.
Ami szükséges

 Az alábbi fájlok importálása, hogy a

Joomla! beépített objektumait
elérjük.
 globals.php
 configuration.php
 includes/joomla.php
 Hely a sablonban, ahol az ajaxos
lekérdezés eredménye megjelenik.
Pl.: <div id=‘result’></div>
És amire vigyázni kell

 include_once(), vagy require_once()

függvényeknél az elérési útvonalat ne
változóba tegyük, hanem állandóba,
pl. define(‘PATH’,
dirname(__FILE__) );
 A beérkező adatok ellenőrzése az SQL
injection miatt.
 Közvetlen fájl hozzáférés
megakadályozása
 Csak mértékkel. 
 2007.10.21.
Budapest
Hotel Flandria

Click to edit company slogan .