offizielle deutsche XAJAX Projektseite

Eine der beliebesten Kombinationen ist zweifellos die Kombination von Xajax und Smarty. Auf gecachten Seiten bietet es sich an dynamische Bestandteile wie zB mit Login geschütze Bereiche mit Xajax zu realisieren. Gleichzeitig kann man auch mit Smarty die Inhalte erstellen und über Xajax zurück an den Client senden.

Setup

Generell empfehle ich Xajax Webseiten in 3 separate Dateien aufzuteilen:

- index.php (Zeigt das Starttemplate an, inklusive Header/Footer und Javascript)
- index.common.php (enthält sämtliche includes die sowohl auf der Startseite, als auch bei den Xajax-Request benötigt werden)
- index.server.php (enthält die Xajax PHP Funktionen)

Für dieses Tutorial benötigt man lediglich Xajax 0.5 und Smarty.

index.php

// einbinden der Konfiguration
include("index.common.php");
// zuweisen des Xajax Javascripts zu der Smarty-Variable $xajax_javascript
$smarty->assign("xajax_javascript",$xajax->getJavascript('/xajax/'));
//anzeigen des Start-Templates
$smarty->display("index.tpl");

Die index.php ist in diesem Beispiel nur wenige Zeilen lang. Es wird lediglich das für Xajax notwendige JavaScript an Smarty übergeben und das Startseiten-Template darstellt.

index.common.php

//einbinden von Xajax
require_once ("xajax/xajax_core/xajax.inc.php");
//einbinden von Smarty
require_once("smarty/Smarty.class.php");
//Session für den Login
session_start();
 
//Instanziieren der Smarty-Klasse
$smarty = new Smarty;
 
// Konfiguration der Smarty-Pfade
$smarty->cache="/srv/www/htdocs/smarty/cache";
$smarty->compile_dir="/srv/www/htdocs/smarty/compile";
$smarty->template_dir="/srv/www/htdocs/smarty/templates";
 
// Templates werden immer kompiliert. Das Cache ist für dynamische Inhalte deaktiviert
$smarty->force_compile=1;
$smarty->caching=0;
 
// Instanziieren der Xajax-Klasse. Als Parameter wird das Serverscript angegeben, dass die Anfragen entgegen nimmt.
$xajax = new xajax("index.server.php");
$xajax->registerFunction("initLayout");
$xajax->registerFunction("login");

Die index.common.php enthält die gesamte Konfiguration für alle benötigten Klassen. Es werden die Smarty-Pfade gesetzt, die Xajax-Funktionen registriert und die Session initialisiert. Zusätzlich könnte man natürlich auch den Connect zur Datenbank hier eintragen.

index.server.php

 
include("index.common.php");
 
function login($aFormValues) {
	// Neue Xajax-Response
	$objResponse = new xajaxResponse();
 
	//Inhalt der Elemente löschen.
	$objResponse->assign("error_userpass","innerHTML"," ");
	$objResponse->assign("error_username","innerHTML"," ");
 
  //Überprüfen der Login-Daten
	if ($aFormValues['username'] == "test") {
		if ($aFormValues['userpass'] == "test") {
			$_SESSION['username'] = "tester";
			$_SESSION['user_id'] = 1;
			// Laden des Layouts
			$objResponse->loadcommands(initLayout(array()));
		} else {
			// falsches Passwort
			$objResponse->assign("error_userpass","innerHTML","invalid password");
		}
	} else {
		// unbekannter Benutzername
		$objResponse->assign("error_username","innerHTML","unknown user");
	}
 
  return $objResponse;
}
 
function initLayout($aFormValues){
		global $smarty;
 
		$objResponse = new xajaxResponse();
 
		// Anstelle von ->display() wird der Inhalt mit ->fetch() geholt
		$html = $smarty->fetch("layout.tpl");
		// zuweisen des HTML-Codes
		$objResponse->assign("layout","innerHTML",$html);
		return $objResponse;
}
 
$xajax->processRequest();
?>

Die index.server.php enthält die Xajax Response Funktionen. In der index.common.php haben wir als Konstruktur der Xajax Klasse die Datei angeben und damit die index.server.php als Standard-Script für die Xajax Requests definiert. Wenn der Login fehlschlägt werden per ->assign() die entsprechenden Fehlermeldungen an die Platzhalter im Template zugewiesen. Bei einem erfolgreichen Login wird mittels ->loadCommands() die Funktion initLayout() aufgerufen. InitLayout() ist eine eigenständige ResponseFunktion und könnte auch einzelnd über xajax_initLayout() aufgerufen werden. Um die Abfragen zwischen Server und Client möglichst gering zu halten, kann man mehrere Response-Funktionen mittels ->loadcommands() zusammenfüger zu einer XML-Response. Das spart Traffic und vor allem Wartezeit beim Client.

Die Smarty Templates

index.tpl

 
 
<meta http-equiv="Content-Type" loginwindow="text/html; charset=uf8" />
<style type="text/css"><!--
/* <![CDATA[ */	
{literal}
 
body {
  background-color: #e1ddd9;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
  color:#564b47;  
  padding:0px;
  margin:0px;
}
#loginwindow { 	
  position:absolute;
  height:200px; 
  width:400px;
  margin:-100px 0px 0px -200px;
  top: 50%; 
  left: 50%;
 
  text-align: left;
  padding: 0px;
  background-color: #f5f5f5;
  border: 1px solid  #666;
  overflow: auto;
}
p, h1 {
	margin: 0px; 
	padding: 10px; 
}
h1 {
	font-size: 13px;
	text-transform:uppercase;
	text-align: center;
	color: #564b47;
	background-color: #e0e0e0;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
}
 
a { 
	color: #ff66cc;
	font-size: 11px;
	background-color:transparent;
	text-decoration: none; 
}
 
.formlabel {
	margin-left:10px;
	float:left;
	width:80px;
	font-weight:bold;
 
}
.formfield {
	margin-left:10px;
	float:left;
	width:150px;
 
}
 
.formerror {
 color:red;
	float:left; 
}
 
 /* ]]> */	
--></style>
 
{/literal}
 
{$xajax_javascript}
<p id="layout">
{include file="login.tpl"}

login.tpl

 
<p id="loginwindow">&nbsp;
<p align="right">&nbsp;
<h1>Smarty &amp; XAJAX</h1>
 
<strong>Please login with test:test</strong>
<form id="loginform" onsubmit="xajax_login(xajax.getFormValues('loginform'));return false;">
<input type="hidden" name="phpMyAdmin" value="904dd537e052d384c5ca1e2801b3e7ae" />
<p class="formlabel">
					username:
<p class="formfield">
<input name="username" id="username" type="text" />
<p class="formerror" id="error_username">
 
<br style="clear: both" />
<p class="formlabel">
					password:
<p class="formfield" id="userpass">
<input name="userpass" id="userpass" type="text" />
<p class="formerror" id="error_userpass">
 
<br style="clear: both" />
<p class="formlabel">&nbsp;
<p class="formfield">
<input value="login" type="submit" />
 
<br style="clear: both" />
</form>
 

layout.tpl

 
<p style="border-right: 1px solid #000000; float: left; width: 300px">&nbsp;
<h1>Menu</h1>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<p style="overflow: auto; float: left; width: 500px; height: 100%">&nbsp;
<h1>Welcome {$smarty.session.username}</h1>
 

That's all you need for getting started :)