AJAX in TYPO3 Extensions: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(18 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
== Übersicht ==
 
== Übersicht ==
 
=== Links ===
 
=== Links ===
 +
http://www.typo3-tutorials.org/tutorials/entwicklung/typo3-und-ajax-wie-geht-das.html
 +
 
http://prototypejs.org/learn/introduction-to-ajax
 
http://prototypejs.org/learn/introduction-to-ajax
 +
 +
http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/
 +
 +
http://www.typo3lexikon.de/typo3-tutorials/eid-und-ajax/eid-beispiele.html
  
 
=== Typo3 Skripte ohne Rendering ===
 
=== Typo3 Skripte ohne Rendering ===
Zeile 93: Zeile 99:
 
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.
 
Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.
  
−
== eid ajax Beispiel ==
+
=== Das TSFE Objekt in eID Skripten ===
 +
Ein eID Skript hat im ersten Moment keinen Zugriff auf die Funktionen und Daten des TypoScriptFrontEnd. Daher ist es schwierig '''FE-User Daten''' zu bekommen oder Links oder '''RTE Formatierungen''' mit den TypoScript Konfigurationen zu machen.
 +
 
 +
Für den Frontenduser gibt es seit ca. Version 4.4 die Funktion:
 +
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
 +
s.o.
 +
 
 +
Es gibt auch noch ein paar Andere Funktionen aber manche kann man nicht direkt nutzen, da sie private sind.
 +
 
 +
Es gibt aber auch andere Ansätze das TSFE zu holen:
 +
 
 +
Hier ein Beispiel mit den Userdaten (vgl. oben und Beispiele unten.
 +
<pre>
 +
<?
 +
$TSFE = t3lib_div::makeInstance('tslib_fe',  $TYPO3_CONF_VARS);
 +
$TSFE->connectToDB();
 +
$TSFE->initFEuser();
 +
if($GLOBALS['TSFE']->fe_user->user['username'] == '') {
 +
  echo 'Sie sind nicht angemeldet';
 +
}else {
 +
  echo 'Username: '.$GLOBALS['TSFE']->fe_user->user['username'];
 +
}
 +
?>
 +
</pre>
 +
 
 +
Wenn man der Instanz noch eine PageID mitgibt, bekommt man auch die TypoScript Konfiguration der Seite, allerdings erkauft man sich das natürlich wieder mit längerer Ladezeit.
 +
 
 +
== eID AJAX mit jQuery und JSON Beispiel ==
 +
Beispiel der Extension gbglossary
 +
=== eID Parameter registrieren ===
 +
'''ext_localconf.php'''
 +
// Register eid
 +
$TYPO3_CONF_VARS['FE']['eID_include']['gbglossaryeid'] = 'EXT:gbglossary/eid/class.gbglossary_eid.php';
 +
 
 +
Typo3 sucht nach der angegebenen Klasse wenn der Parameter
 +
eID=gbglossaryeid in der URL angegeben wird.
 +
 
 +
=== PHP Klasse erstellen ===
 +
Über die Klasse tx_gbglossary_eid holen wir uns alle Datensätze aus der Datenbank und geben Sie als JSON Objekt aus.
 +
 
 +
'''class.gbglossary_eid.php'''
 +
<pre>
 +
<?php
 +
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
 +
require_once(PATH_tslib . 'class.tslib_pibase.php');
 +
 
 +
class tx_gbglossary_eid extends tslib_pibase {
 +
var $prefixId      = 'tx_gbglossary_eid';// Same as class name
 +
var $scriptRelPath = 'eid/class.tx_gbglossary_eid.php'; // Path to this script relative to the extension dir.
 +
var $extKey        = 'gbglossary';// The extension key.
 +
 
 +
function eid_main() {
 +
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
 +
tslib_eidtools::connectDB();
 +
 +
// Create select
 +
$select = '';
 +
$dbFields = array(
 +
'tx_gbglossary_terms.uid AS terms_uid',
 +
'tx_gbglossary_terms.title AS terms_title'
 +
);
 +
foreach ($dbFields as $key => $value){
 +
$select.=$value.', ';
 +
}
 +
$select = rtrim(rtrim($select),',');
 +
// Create from (example for n:m JOIN)
 +
$from = '';
 +
$from = '
 +
(
 +
(
 +
tx_gbglossary_terms LEFT OUTER JOIN tx_gbglossary_terms_topic_mm
 +
ON tx_gbglossary_terms.uid = tx_gbglossary_terms_topic_mm.uid_local
 +
)
 +
LEFT OUTER JOIN tx_gbglossary_topic
 +
ON tx_gbglossary_terms_topic_mm.uid_foreign = tx_gbglossary_topic.uid
 +
)
 +
';
 +
// Create where
 +
$where = '';
 +
$where = "tx_gbglossary_terms.deleted=0 AND tx_gbglossary_terms.hidden=0";
 +
 +
$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
 +
$select,
 +
$from,
 +
$where,
 +
$groupBy='',
 +
$orderBy='',
 +
$limit=''
 +
);
 +
$arrJSON = array();
 +
while (($row = $GLOBALS["TYPO3_DB"]->sql_fetch_assoc($res))){
 +
$arrJSON[]=$row;
 +
}
 +
 
 +
 
 +
// Wir geben der Anfrage ein JSON Objekt-Literal zurück
 +
$ajax_return_data = json_encode($arrJSON);
 +
header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
 +
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
 +
header('Cache-Control: no-cache, must-revalidate');
 +
header('Pragma: no-cache');
 +
header('Content-Length: '.strlen($ajax_return_data));
 +
header('Content-Type: application/json; charset=UTF-8');
 +
echo $ajax_return_data;
 +
exit;
 +
}
 +
}
 +
 +
$extensionkey = t3lib_div::makeInstance('tx_gbglossary_eid');
 +
$extensionkey->eid_main();
 +
 
 +
?>
 +
</pre>
 +
 
 +
Der Test im Browser zeigt einen schönen JSON String mit den abgefragten Daten.
 +
 
 +
http://localhost/typo3_test/index.php?id=178&eID=gbglossaryeid
 +
 
 +
=== JSON Daten per jQuery AJAX holen und in der Webseite darstellen ===
 +
jQuery macht das Handling einfach.
 +
 
 +
In unserer HP können wir so etwas bauen:
 +
<pre>
 +
<input id="myButton" type="button" value="AJAX-Test" />
 +
<div id="myContainer"></div>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
$("#myButton").click(function(){
 +
        $.getJSON("index.php?eID=gbglossaryeid", function(data){
 +
$.each(data,function(key,obj){
 +
$("#myContainer").append('<div>' + key + ' ' + obj.terms_title + '</div>');
 +
});
 +
});
 +
});
 +
} );
 +
</script>
 +
</pre>
 +
 
 +
Zuerst wird auf dem Button myButton ein Click Handler angelegt, der wiederum löst eine JSON Anfrage an unsere PHP Datei aus. Diese gibt den JSON String zurück. Der String wird in einer each Schleife durchlaufen und alle Titel werden in das Div myContainer geschrieben.
 +
 
 +
== eid ajax mit Prototype Beispiel ==
 
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.
 
Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.
  
Zeile 148: Zeile 294:
 
Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).
 
Möchte man in diesem Skript nun auf '''Funktionen (z.B. Datenbank) aus dem TYPO3-Framework''' zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei ''typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php'' findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).
  
 +
=== ext_localconf.php ===
 
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:
 
Die '''Datei muß noch dem System bekannt gemacht werden'''. Dies tun wir in der '''ext_localconf.php''' indem wir folgende Zeile hinzufügen:
  
−
  $TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/myExtKey_eid.php';
+
  $TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';
  
 
Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.
 
Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.
Zeile 204: Zeile 351:
 
</pre>
 
</pre>
  
−
=== andere Frameworks ===
+
== Weitere Beispiele ==
−
Todo
+
=== RTE Inhalte Rendern ===
 +
 
 +
Hier gibt es einige Probleme zu lösen:
 +
 
 +
* Es gibt kein TSFE Objekt und damit keine TS Konfiguration für das Rendern. Es gibt ja auch keine Seite auf die sich das Skript bezieht.
 +
* Es gibt kein CObjekt und damit nicht die damit zusammenhängenden Parse Funktionen
 +
* Wir brauchen ein paar Libs von Typo3
 +
 
 +
==== Wichtige Libs ====
 +
Im Header haben wir ein paar requires:
 +
<pre>
 +
require_once(PATH_tslib . 'class.tslib_pibase.php');//für die FE Plugin Funktionen
 +
require_once(t3lib_extMgm::extPath('gbglossary').'lib/class.tx_gbglossary_helper.php');
 +
require_once(PATH_t3lib.'class.t3lib_parsehtml_proc.php');// Für die Content Objekt Parsing Funktionen
 +
</pre>
 +
 
 +
==== TSFE holen ====
 +
<pre>
 +
// 2 is the id of the rootpage
 +
$GLOBALS['TSFE'] = t3lib_div::makeInstance('tslib_fe', $GLOBALS['TYPO3_CONF_VARS'], 178, 0);// Todo where to get id
 +
// Connect to database:
 +
$GLOBALS['TSFE']->connectToDB();
 +
// Initialize FE user object:
 +
$GLOBALS['TSFE']->initFEuser();
 +
$GLOBALS['TSFE']->determineId();
 +
// init ->tmpl for use e.g. ->tmpl->setup['plugin.']
 +
$GLOBALS['TSFE']->initTemplate();
 +
// fills ->config with infos
 +
$GLOBALS['TSFE']->getConfigArray();
 +
$this->conf = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_gbglossary.'];
 +
 
 +
//debug($GLOBALS['TSFE'],"tsfe");
 +
</pre>
 +
 
 +
Hier sieht man auch eine Variante für die eid-Funktionen für die FE-Userdaten und die Datenbankverbindung
 +
 
 +
==== cObj Instanz ====
 +
if (!$this->cObj) $this->cObj = t3lib_div::makeInstance('tslib_cObj');
 +
 
 +
==== Parsen ====
 +
<pre>
 +
    function parseRTE($content){
 +
        $parseObj = t3lib_div::makeInstance('t3lib_parsehtml_proc');
 +
        $content = $parseObj->TS_links_rte($content);
 +
        $myRTEconf = $GLOBALS['TSFE']->tmpl->setup['lib.']['parseFunc_RTE.']; //siehe oben
 +
        $content = $this->cObj->parseFunc($content, $myRTEconf);// siehe oben
 +
        //debug($parseObj,"parseObj");
 +
        return $content;
 +
    }
 +
</pre>
 +
 
 +
 
 +
 
 +
==== Beispiel Typolinks rendern ====
 +
 
 +
$parseObj = t3lib_div::makeInstance('t3lib_parsehtml_proc');
 +
$content = $parseObj->TS_links_rte($content);
 +
 
 +
 
 +
=== Cash leeren ===
 +
Da die deaktivierung des Cache nicht empfehlenswert ist folgende Lösung mit generatePage_preProcessing() (Quelle: http://www.typo3lexikon.de/typo3-tutorials/eid-und-ajax/eid-beispiele.html Zugriff: 2012-11)
 +
 
 +
<pre>
 +
<?php
 +
$TSFE = t3lib_div::makeInstance('tslib_fe',  $TYPO3_CONF_VARS);
 +
$TSFE->connectToDB();
 +
$TYPO3_DB->exec_insertQuery(blablabla);
 +
$TSFE->generatePage_preProcessing();
 +
echo 'Ihre Daten wurden erfolgreich gespeichert und der Cache dieser Seite neu aufgebaut.';
 +
?>
 +
</pre>
 +
=== Flash Authorisierung ===
 +
Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen.
 +
 
 +
<pre>
 +
<?php
 +
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
 +
require_once(PATH_tslib . 'class.tslib_pibase.php');
 +
 
 +
class tx_gbflashauth_eid extends tslib_pibase {
 +
var $prefixId      = 'tx_gbflashauth_eid';// Same as class name
 +
var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php'; // Path to this script relative to the extension dir.
 +
var $extKey        = 'gbflashauth';// The extension key.
 +
 
 +
function eid_main() {
 +
$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
 +
tslib_eidtools::connectDB();
 +
 
 +
// Hier beginnt unser Code
 +
 +
if(!empty($GLOBALS['TSFE']->fe_user->user)){
 +
$uid = $GLOBALS['TSFE']->fe_user->user[uid];
 +
$name = $GLOBALS['TSFE']->fe_user->user[name];
 +
$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
 +
$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
 +
$email= $GLOBALS['TSFE']->fe_user->user[email];
 +
$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;
 +
}else{
 +
$res = 'login=0';
 +
}
 +
 
 +
//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
 +
header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
 +
header('Cache-Control: no-cache, must-revalidate');
 +
header('Pragma: no-cache');
 +
header('Content-Length: '.strlen($res));
 +
//header('Content-Type: text/plain');
 +
//echo $ajax_return_data;
 +
echo $res;
 +
exit;
 +
}
 +
}
 +
 +
$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
 +
$extensionkey->eid_main();
 +
 
 +
?>
 +
 
 +
</pre>
 +
 
 +
 
 +
=== FrontendPlugin Settings in eID Skript nutzen ===
 +
<pre>
 +
// 2 is the id of the rootpage
 +
$GLOBALS['TSFE'] = t3lib_div::makeInstance('tslib_fe', $GLOBALS['TYPO3_CONF_VARS'], 2, 0);
 +
// Connect to database:
 +
$GLOBALS['TSFE']->connectToDB();
 +
// Initialize FE user object:
 +
$GLOBALS['TSFE']->initFEuser();
 +
$GLOBALS['TSFE']->determineId();
 +
// init ->tmpl for use e.g. ->tmpl->setup['plugin.']
 +
$GLOBALS['TSFE']->initTemplate();
 +
// fills ->config with infos
 +
$GLOBALS['TSFE']->getConfigArray();
 +
$this->conf = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_myext.'];
 +
</pre>
 +
 
 +
=== Typolink Rendern ===
  
−
== Probleme mit cc_debug und JASON Objekten ==
+
== Probleme mit cc_debug und JSON Objekten ==
  
 
von Tim Lochmüller im Adventskalender 2008
 
von Tim Lochmüller im Adventskalender 2008
Zeile 216: Zeile 500:
 
  die(json_encode($result));
 
  die(json_encode($result));
  
−
Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal</pre>
+
Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

Aktuelle Version vom 27. November 2012, 12:13 Uhr

Übersicht[Bearbeiten]

Links[Bearbeiten]

http://www.typo3-tutorials.org/tutorials/entwicklung/typo3-und-ajax-wie-geht-das.html

http://prototypejs.org/learn/introduction-to-ajax

http://www.interaktionsdesigner.de/2009/01/04/asynchrone-datenubertragung-zwischen-typo3-und-jquery/

http://www.typo3lexikon.de/typo3-tutorials/eid-und-ajax/eid-beispiele.html

Typo3 Skripte ohne Rendering[Bearbeiten]

Ein Ajax Request wird in den meisten Fällen über ein JavaScript abgesetzt von einem Serverskript (PHP) verarbeitet und die Antwort als xml oder JSON Objekt zurückgegeben.

Um das PHP-Skript zu nutzen und zugleich die ganzen Rendering und Caching-Mechanismen von Typo3 zu vermeiden könnte man irgend ein php Skript nutzen. Andererseits wollen wir die Typo3 Funktionalitäten wie dbal Datenbankabfrage etc. nutzen. Deshalb stellt Typo3 den eid Mechanismus zur Verfügung (siehe unten). Mit diesem wird das Seitenrendering frühzeitig abgebrochen und der Request direkt an ein Skript weitergegeben.

Eine weitere Möglichkeit außer dem eid Mechanismus findest du unter Typo3 - alternatives Rendering

Schnelle Antwort[Bearbeiten]

Dieses Skript kann sich nun ausschließlich um die Anfrage kümmern und das Ergebnis direkt zurückgeben, welches wiederum die Daten in die Seite einhängt.

Der eid Mechanismus und AJAX[Bearbeiten]

Quellen: http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html (10.3.2010 Artikel von 2007)

http://www.blogix.net/2009/02/08/typo3-eid-oder-daten-mit-ajax-anfordern/

eID steht für Extension ID Der eID Mechanismus ist der seit der Version 4.x dabei und kann als alternative Rendering Engine betrachtet werden.

Angesprochen wird er über einen GET oder POST Parameter. Sobald eID als Parameter in der URL vorhanden ist (zB. www.domain.de/?eID=schuesselwort) wird der normaler Rendering Prozess sehr früh abgebrochen und auf ein Script weitergeleitet was wir selber programmieren müssen. Da der normale Rendering Prozess so früh abgebrochen wird kommt es auch noch zu keiner Ausgabe. Es wird nichts gecachet und kein HeaderCode ect generiert. Der eID Mechanismus kann also super im Zusammenhang mit AJAX verwendet werden.

Wollen wir uns einmal die index_ts.php (typo3/sysext/cms/tslib/) Zeile 127 bis 136 ansehen. 

<?php
// *********************
// Look for extension ID which will launch alternative output engine
// *********************
if ($temp_extId = t3lib_div::_GP('eID'))    {
    if ($classPath = t3lib_div::getFileAbsFileName($TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]))    {
        require_once(PATH_tslib.'class.tslib_eidtools.php');
        require($classPath);
    }
    exit;
}
?>

Hier wird überprüft ob der Schlüssel eID als Get/Post Variable vorhanden ist und falls ja, wird der normale Renderingprozess abgebrochen und auf unser Script verwiesen. Doch woher weiss TYPO3 jetzt wo unser Script liegt ?

Das sagen wir Ihm über $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId]. Wir müssten entweder in die localconf.php oder in eine ext_localconf.php einer Extension folgendes Eintragen 

<?php 
// Zugriff nur von Typo3 aus:
if (!defined ('TYPO3_MODE')) {
 	die ('Access denied.');
}
// Registrierung der eid Scripts
$TYPO3_CONF_VARS['FE']['eID_include']['schluesselwort'] = 'EXT:myExtKey/eid/meinScript.php'; ?>
?>

Steht jetzt also in der Adresse www.domain.de/?eID=schluesselwort geht er in die erste if Abfrage und sieht das $TYPO3_CONF_VARS['FE']['eID_include'][$temp_extId] vorhanden ist und speichert 'EXT:myExtKey/meinScript.php' in die Variable $classPath. Danach includiert er die Klasse eidtools und unsere eigene.

Da unser Script noch leer ist bekommen wir eine weisse Seite angezeigt in der auch der komplette Quelltext leer ist.

Um in unserem Script nun ein FEUSER Objekt zu haben und eine aktive DB Verbindung schreiben wir 

<?php 
$feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object
tslib_eidtools::connectDB(); //Connect to database 
// ...
?>

Die erste Zeile initialisert den FrontentUser und gibt uns diesen als Objekt zurück.

Die zweite Zeile stellt eine Verbindung zur Datenbank her.

Im Weiteren können wir ganz normal auch TYPO3 Funktionalitäten benutzen und unseren eigenen Renderingablauf schreiben.

Um auch zB auf alle piBase Funktionen zurückzugreifen können wir uns ganz einfach eine Klasse erstellen die von dieser Erbt 

<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class unsereKlasse extends tslib_pibase {
  function main(){
    $feUserObj = tslib_eidtools::initFeUser(); // Initialize FE user object        
    tslib_eidtools::connectDB(); //Connect to database
    echo("hallo welt");
  }
}

$output = t3lib_div::makeInstance('unsereKlasse');
$output->main();
?>
</php>

Das war es soweit, wenn Ihr noch fragen dazu habt stellt Sie einfach über die Kommentarfunktion.

Das TSFE Objekt in eID Skripten[Bearbeiten]

Ein eID Skript hat im ersten Moment keinen Zugriff auf die Funktionen und Daten des TypoScriptFrontEnd. Daher ist es schwierig FE-User Daten zu bekommen oder Links oder RTE Formatierungen mit den TypoScript Konfigurationen zu machen.

Für den Frontenduser gibt es seit ca. Version 4.4 die Funktion: 

$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();

s.o.

Es gibt auch noch ein paar Andere Funktionen aber manche kann man nicht direkt nutzen, da sie private sind.

Es gibt aber auch andere Ansätze das TSFE zu holen:

Hier ein Beispiel mit den Userdaten (vgl. oben und Beispiele unten. 

<?
$TSFE = t3lib_div::makeInstance('tslib_fe',  $TYPO3_CONF_VARS);
$TSFE->connectToDB();
$TSFE->initFEuser();
if($GLOBALS['TSFE']->fe_user->user['username'] == '') {
  echo 'Sie sind nicht angemeldet';
}else {
  echo 'Username: '.$GLOBALS['TSFE']->fe_user->user['username'];
}
?>

Wenn man der Instanz noch eine PageID mitgibt, bekommt man auch die TypoScript Konfiguration der Seite, allerdings erkauft man sich das natürlich wieder mit längerer Ladezeit.

eID AJAX mit jQuery und JSON Beispiel[Bearbeiten]

Beispiel der Extension gbglossary

eID Parameter registrieren[Bearbeiten]

ext_localconf.php 

// Register eid
$TYPO3_CONF_VARS['FE']['eID_include']['gbglossaryeid'] = 'EXT:gbglossary/eid/class.gbglossary_eid.php';

Typo3 sucht nach der angegebenen Klasse wenn der Parameter 

eID=gbglossaryeid in der URL angegeben wird.

PHP Klasse erstellen[Bearbeiten]

Über die Klasse tx_gbglossary_eid holen wir uns alle Datensätze aus der Datenbank und geben Sie als JSON Objekt aus.

class.gbglossary_eid.php 

<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbglossary_eid extends tslib_pibase {
	var $prefixId      = 'tx_gbglossary_eid';// Same as class name
	var $scriptRelPath = 'eid/class.tx_gbglossary_eid.php';	// Path to this script relative to the extension dir.
	var $extKey        = 'gbglossary';// The extension key.

	function eid_main() {
		$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
		tslib_eidtools::connectDB();
		
		// Create select
		$select = '';
		$dbFields = array(
			'tx_gbglossary_terms.uid AS terms_uid',
			'tx_gbglossary_terms.title AS terms_title'
		);
		foreach ($dbFields as $key => $value){
			$select.=$value.', ';
		}
		$select = rtrim(rtrim($select),',');
		// Create from (example for n:m JOIN)
		$from = '';
		$from = '
			(	
				( 
						tx_gbglossary_terms LEFT OUTER JOIN tx_gbglossary_terms_topic_mm 
						ON tx_gbglossary_terms.uid = tx_gbglossary_terms_topic_mm.uid_local
				)
				LEFT OUTER JOIN tx_gbglossary_topic 
				ON tx_gbglossary_terms_topic_mm.uid_foreign = tx_gbglossary_topic.uid
				)
		';
		// Create where
		$where = '';
		$where = "tx_gbglossary_terms.deleted=0 AND tx_gbglossary_terms.hidden=0";
		
		$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
		 	$select,
		 	$from,
		 	$where,
			$groupBy='',
			$orderBy='',
		 	$limit=''
		);
		$arrJSON = array();
		while (($row = $GLOBALS["TYPO3_DB"]->sql_fetch_assoc($res))){
			$arrJSON[]=$row;
		}


		// Wir geben der Anfrage ein JSON Objekt-Literal zurück
		$ajax_return_data = json_encode($arrJSON);
		header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
		header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
		header('Cache-Control: no-cache, must-revalidate');
		header('Pragma: no-cache');
		header('Content-Length: '.strlen($ajax_return_data));
		header('Content-Type: application/json; charset=UTF-8');
		echo $ajax_return_data;
		exit;
	}
}
 
$extensionkey = t3lib_div::makeInstance('tx_gbglossary_eid');
$extensionkey->eid_main();

?>

Der Test im Browser zeigt einen schönen JSON String mit den abgefragten Daten. 

http://localhost/typo3_test/index.php?id=178&eID=gbglossaryeid

JSON Daten per jQuery AJAX holen und in der Webseite darstellen[Bearbeiten]

jQuery macht das Handling einfach.

In unserer HP können wir so etwas bauen: 

<input id="myButton" type="button" value="AJAX-Test" />
<div id="myContainer"></div>
<script type="text/javascript">
	$(document).ready(function() {
		$("#myButton").click(function(){
        	$.getJSON("index.php?eID=gbglossaryeid", function(data){
				$.each(data,function(key,obj){
					$("#myContainer").append('<div>' + key + ' ' + obj.terms_title + '</div>');
				});
			});
		});
	} );
</script>

Zuerst wird auf dem Button myButton ein Click Handler angelegt, der wiederum löst eine JSON Anfrage an unsere PHP Datei aus. Diese gibt den JSON String zurück. Der String wird in einer each Schleife durchlaufen und alle Titel werden in das Div myContainer geschrieben.

eid ajax mit Prototype Beispiel[Bearbeiten]

Bei diesem Beispiel gehen wir von einem normalen Frontend Plugin aus das z.B. mit dem Kickstarter erzeugt wird. Wir legen eine PHP-Klasse für die Bearbeitung der AJAX Anfrage an und eine JavaScript Datei mit den passenden Funktionen. Die PHP Datei wird in localconf registriert. Das Handling des AJAX Request überlassen wir der Prototype JavaScript Lib die in Typo3 schon dabei ist.

Diese Dateien bearbeiten wir: 

typo3conf/ext/myExtKey/
 - ext_localconf.php
typo3conf/ext/myExtKey/eid/
 - ajax.js
 - class.myExtKey_eid.php
typo3conf/ext/myExtKey/pi1/
 - class.myExtKey_pi1.php

eID Datei[Bearbeiten]

class.myExtkey_eid.php 

<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_myExtKey_eid extends tslib_pibase {
	var $prefixId      = 'tx_myExtKey_eid';// Same as class name
	var $scriptRelPath = 'eid/class.tx_myExtKey_eid.php';	// Path to this script relative to the extension dir.
	var $extKey        = 'myExtKey';// The extension key.

	function eid_main() {
		$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
		tslib_eidtools::connectDB();

		// Hier beginnt unser Code
		$res = 'Hallo Welt';
		// Hier endet unser Code

		// Wir geben der Anfrage ein XML Objekt zurück
		$ajax_return_data = t3lib_div::array2xml(array('data'=>$res));
		header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
		header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
		header('Cache-Control: no-cache, must-revalidate');
		header('Pragma: no-cache');
		header('Content-Length: '.strlen($ajax_return_data));
		header('Content-Type: text/xml');
		echo $ajax_return_data;
		exit;
	}
}
 
$extensionkey = t3lib_div::makeInstance('tx_myExtKey_eid');
$extensionkey->eid_main();

?>

Möchte man in diesem Skript nun auf Funktionen (z.B. Datenbank) aus dem TYPO3-Framework zurückgreifen, so muss man für die Instantiierung selbst sorge tragen. In der Datei typo3_src/typo3/sysext/cms/tslib/class.tslib_eidtools.php findet man vorgefertigte Methoden um auf die Daten eines FE-Users oder die Datenbank zugreifen zu können (Verwendung siehe im Code oben).

ext_localconf.php[Bearbeiten]

Die Datei muß noch dem System bekannt gemacht werden. Dies tun wir in der ext_localconf.php indem wir folgende Zeile hinzufügen: 

$TYPO3_CONF_VARS['FE']['eID_include']['myExtKeyeid'] = 'EXT:myExtKey/eid/class.myExtKey_eid.php';

Hiermit sagen wir dem System das wir gerne die Datei myExtKey_eid.php ausführen würden wenn der Parameter eID=myExtKeyeid übergeben wird.

Das Frontend Plugin[Bearbeiten]

In unserem Frontent Plugin erzeugen wir einen div container mit der id ac (ajaxcontainer) diesen wollen wir später mit der Ausgabe des Ajax Scriptes füllen. Außerdem noch einen Knopf mit dem wir die Anfrage starten können.

class.myExtKey_pi1.php 

...
$content .= '
<div id="ac">ajaxcontainer</div>
<input onclick="getData()" id="myButton" type="button" value="AJAX" />
';
...

Anmerkung: Statt dem onclick im Button, kann man auch Prototypes observe Funktion nehmen, dan kann man den Code komplett in der .js Datei verwalten.

JavaScript[Bearbeiten]

Jetzt benötigen wir noch etwas JavaScript um die Anfrage vom FrontendPlugin auszuführen:

JavaScript (ajax.js) 


function anfrage()
{
	var myAjax = new Ajax.Request(
	'index.php', // the Request goes to index.php
	{
		method: 'get', //get or post
		parameters: 'eID=gbeventseid',
		onComplete: show // after loading use the anzeige function
	});
}

function show(orgRequest)
//
{
	var xmldoc = orgRequest.responseXML; //use XML Object as answer
	var result = xmldoc.getElementsByTagName("data")[0].firstChild.data;//datapart
	$('ac').innerHTML = result;//drop the stuff in the div with id "ac"
}

Eine Prise TypoScript[Bearbeiten]

Wir benutzen wie gesagt das Prototype Lib. Unsere JavaScript Dateien müssen wir natürlich auch in das Frontend Plugin einbinden. Das machen wir z.B. ganz einfach über TypoScript

TypoScript 

page.includeJS.proto = typo3/contrib/prototype/prototype.js
page.includeJS.gbevents3 = EXT:gb_events/eid/ajax.js

Weitere Beispiele[Bearbeiten]

RTE Inhalte Rendern[Bearbeiten]

Hier gibt es einige Probleme zu lösen:

  • Es gibt kein TSFE Objekt und damit keine TS Konfiguration für das Rendern. Es gibt ja auch keine Seite auf die sich das Skript bezieht.
  • Es gibt kein CObjekt und damit nicht die damit zusammenhängenden Parse Funktionen
  • Wir brauchen ein paar Libs von Typo3

Wichtige Libs[Bearbeiten]

Im Header haben wir ein paar requires: 

require_once(PATH_tslib . 'class.tslib_pibase.php');//für die FE Plugin Funktionen
require_once(t3lib_extMgm::extPath('gbglossary').'lib/class.tx_gbglossary_helper.php');
require_once(PATH_t3lib.'class.t3lib_parsehtml_proc.php');// Für die Content Objekt Parsing Funktionen

TSFE holen[Bearbeiten]

// 2 is the id of the rootpage
$GLOBALS['TSFE'] = t3lib_div::makeInstance('tslib_fe', $GLOBALS['TYPO3_CONF_VARS'], 178, 0);// Todo where to get id
// Connect to database:
$GLOBALS['TSFE']->connectToDB();
// Initialize FE user object:
$GLOBALS['TSFE']->initFEuser();
$GLOBALS['TSFE']->determineId();
 // init ->tmpl for use e.g. ->tmpl->setup['plugin.']
$GLOBALS['TSFE']->initTemplate();
// fills ->config with infos
$GLOBALS['TSFE']->getConfigArray();
 $this->conf = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_gbglossary.'];

//debug($GLOBALS['TSFE'],"tsfe");

Hier sieht man auch eine Variante für die eid-Funktionen für die FE-Userdaten und die Datenbankverbindung

cObj Instanz[Bearbeiten]

if (!$this->cObj) $this->cObj = t3lib_div::makeInstance('tslib_cObj');

Parsen[Bearbeiten]

    function parseRTE($content){
        $parseObj = t3lib_div::makeInstance('t3lib_parsehtml_proc');
        $content = $parseObj->TS_links_rte($content);
        $myRTEconf = $GLOBALS['TSFE']->tmpl->setup['lib.']['parseFunc_RTE.']; //siehe oben
        $content = $this->cObj->parseFunc($content, $myRTEconf);// siehe oben
        //debug($parseObj,"parseObj");
        return $content;
    }


Beispiel Typolinks rendern[Bearbeiten]

$parseObj = t3lib_div::makeInstance('t3lib_parsehtml_proc'); $content = $parseObj->TS_links_rte($content);


Cash leeren[Bearbeiten]

Da die deaktivierung des Cache nicht empfehlenswert ist folgende Lösung mit generatePage_preProcessing() (Quelle: http://www.typo3lexikon.de/typo3-tutorials/eid-und-ajax/eid-beispiele.html Zugriff: 2012-11) 

<?php
$TSFE = t3lib_div::makeInstance('tslib_fe',  $TYPO3_CONF_VARS);
$TSFE->connectToDB();
$TYPO3_DB->exec_insertQuery(blablabla);
$TSFE->generatePage_preProcessing();
echo 'Ihre Daten wurden erfolgreich gespeichert und der Cache dieser Seite neu aufgebaut.';
?>

Flash Authorisierung[Bearbeiten]

Angewendet in der kleinen Extension gbflashauth. Über einen Flash Movie wird die url aufgerufen und zurückgegeben ob der User eingeloggt ist und mit welchem Namen. 

<?php
if (!defined ('PATH_typo3conf')) die ('Access denied: eID only.');
require_once(PATH_tslib . 'class.tslib_pibase.php');

class tx_gbflashauth_eid extends tslib_pibase {
	var $prefixId      = 'tx_gbflashauth_eid';// Same as class name
	var $scriptRelPath = 'eid/class.tx_gbflashauth_eid.php';	// Path to this script relative to the extension dir.
	var $extKey        = 'gbflashauth';// The extension key.

	function eid_main() {
		$GLOBALS['TSFE']->fe_user = tslib_eidtools::initFeUser();
		tslib_eidtools::connectDB();

		// Hier beginnt unser Code
		
		if(!empty($GLOBALS['TSFE']->fe_user->user)){
			$uid = $GLOBALS['TSFE']->fe_user->user[uid];
			$name = $GLOBALS['TSFE']->fe_user->user[name];
			$firstname = $GLOBALS['TSFE']->fe_user->user[first_name];
			$lastname = $GLOBALS['TSFE']->fe_user->user[last_name];
			$email= $GLOBALS['TSFE']->fe_user->user[email];
			$res="login=1"."&uid=".$uid."&firstname=".$firstname."&lastname=".$lastname;		
		}else{
			$res = 'login=0';
		}

		//header('Expires: Mon, 26 Jul 2000 03:00:00 GMT');
		header('Last-Modified: ' . gmdate( "D, d M Y H:i:s" ) . 'GMT');
		header('Cache-Control: no-cache, must-revalidate');
		header('Pragma: no-cache');
		header('Content-Length: '.strlen($res));
		//header('Content-Type: text/plain');
		//echo $ajax_return_data;
		echo $res;
		exit;
	}
}
 
$extensionkey = t3lib_div::makeInstance('tx_gbflashauth_eid');
$extensionkey->eid_main();

?>


FrontendPlugin Settings in eID Skript nutzen[Bearbeiten]

// 2 is the id of the rootpage
$GLOBALS['TSFE'] = t3lib_div::makeInstance('tslib_fe', $GLOBALS['TYPO3_CONF_VARS'], 2, 0);
// Connect to database:
$GLOBALS['TSFE']->connectToDB();
// Initialize FE user object:
$GLOBALS['TSFE']->initFEuser();
$GLOBALS['TSFE']->determineId();
 // init ->tmpl for use e.g. ->tmpl->setup['plugin.']
$GLOBALS['TSFE']->initTemplate();
// fills ->config with infos
$GLOBALS['TSFE']->getConfigArray();
 $this->conf = $GLOBALS['TSFE']->tmpl->setup['plugin.']['tx_myext.'];

Typolink Rendern[Bearbeiten]

Probleme mit cc_debug und JSON Objekten[Bearbeiten]

von Tim Lochmüller im Adventskalender 2008

In letzter Zeit habe ich sehr oft mit AJAX und JSON gearbeitet. Leider gibt es dabei immer ein Problem mit cc_debug, weil sich dieser immer hinter die Ausgabe des JSON Codes klemmt und damit ein kaputtes JSON erzeugt. Nachdem ich heute mit meinem Kollegen Michael zusammen gesessen habe um dieses Problem zu lösen, sind wir auf eine sehr einfache Lösung gestoßen: 

$GLOBALS['errorList']->clear();
die(json_encode($result));

Die Zeile 1 direkt vor der Ausgabe des JSON Codes eingebaut, verhindert, dass cc_debug noch seinen JavaScript-Code hinter her ausgibt. Und wer jetzt sagt: naje, ein die() oder exit() sollte es auch tun, der irrt sich. Versucht es gerne selber mal.

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=AJAX_in_TYPO3_Extensions&oldid=19440“