Schwierigkeitsstufe: Mittel

In diesem Tutorial werden wir ein einfaches Gästebuch erstellen, in dem Shopbesucher und Kunden Vorschläge für neue Produkte machen können. Das Gästebuch wird über eine Backend-Verwaltung verfügen.

• Erfahrungen im Umgang mit PHP und MySQL
• FTP- und Datenbank-Zugriff
• Installiertes PHPMyAdmin

(Sollte nicht in Live-Systemen durchgeführt werden)

Bitte öffnen Sie PHPMyAdmin und klicken Sie den Reiter "SQL" an. Fügen Sie dort die nachfolgenden Anweisungen ein und bestätigen Sie jeweils mit "OK".

 
CREATE TABLE `my_guestbook` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`datum` DATETIME NOT NULL ,
`name` VARCHAR( 255 ) NOT NULL ,
`article` VARCHAR( 255 ) NOT NULL ,
`text` TEXT NOT NULL,
`active` INT NOT NULL
) ENGINE = MYISAM ;
 

 
INSERT INTO `s_core_viewports` ( `id` , `viewport` , `viewport_file` , `description` )
VALUES (
NULL , 'guestbook', 's_guestbook.php', 'Artikel vorschlagen'
);
 

 
INSERT INTO `s_core_menu` ( `id` , `parent` , `hyperlink` , `name` , `onclick` , `style` , `class` , `position` , `active` , `ul_properties` )
VALUES (
NULL , '7', '', 'Gästebuch', 'loadSkeleton(''guestbook'');', 'background-position: 5px 5px;', 'ico2 layers', '0', '1', ''
);
 

• parent: Gibt die ID des Elternelements an - im Adminbereich hat der Hauptpunkt Inhalte die ID 7 - das Gästebuch ist also später über Inhalte > Gästebuch erreichbar
• name: Bezeichnung des Menüpunkts
• onclick: onClick Javascript Event: loadSkeleton lädt das angegebene Modul - dazu später mehr

In der Datenbank haben wir festgelegt, das der Viewport "guestbook" auf die Datei "s_guestbook.php" zugreifen soll. Legen Sie bitte eine leere Datei mit dem Namen s_guestbook.php im Ordner /engine/core/class/viewports/ an.

Bitte fügen Sie den nachfolgenden Code ein

 
<?
 
class sViewportGuestbook{
 
var $sSYSTEM;
 
function sRender(){
 return array("templates"=>$templates,"variables"=>$variables); 
}
 
}
 

Der Klassenname des Viewports muss folgendem Aufbau entsprechen sViewport'NAMEDESVIEWPORTS' var $sSYSTEM stellt einen Zugriff auf alle Shopware Core Funktionen bereit

function sRender() ist die Funktion, die durch den Shopware Renderer aufgerufen wird

Die Funktion gibt die Arrays templates[] und variables[] zurück - in variables stehen alle Variablen auf die im Template zugegriffen wird, templates definiert die zu ladenenen Templates

Bitte wechseln Sie in Ihr Template-Verzeichnis

bsw. /templates/0/de/html/

Legen Sie dort bitte einen neuen Ordner "mytemplates" an.

Erstellen Sie anschließend eine neue, leere Datei mit dem Namen "guestbook.tpl"

Fügen Sie den nachfolgenden Code ein:

 
{if $showError}
<p style="color:#F00">
Bitte füllen Sie alle benötigten Felder aus!
</p>
{/if}
 
<h1>Schlagen Sie uns neue Artikel vor</h1>
<p>Falls wir Ihrem Vorschlag nachkommen, belohnen wir Sie mit einem Gutschein</p>
<form action="#" method="POST">
<input type="hidden" name="sSubmit" value="1">
 
<label>Ihr Name:</label><input type="text" name="sName">
 
<label>Ihr Artikel-Vorschlag:</label><input type="text" name="sArticle">
 
<label>Kommentar:</label><textarea name="sComment"></textarea>
 
<input type="submit" value="Absenden">
 
</form>
 
 
 
{if $sEntries}
<h1>Artikel die wir in Kürze aufnehmen oder aufgenommen haben</h1>
 
<table width="100%">
<tr>
<td>Datum</td><td>Artikel</td><td>Vorschlag von</td>
</tr>
{foreach from=$sEntries item=sEntry}
<tr>
<td>{$sEntry.datumText}</td><td>{$sEntry.article}</td><td>{$sEntry.name}</td>
</tr>
{/foreach}
</table>
{/if}
 

Erklärung:

• {if $showError} - Falls nicht alle benötigten Felder ausgefüllt werden, Fehler einblenden
• {if $sEntries} - Wenn Einträge vorhanden sind
• {foreach from=$sEntries item=sEntry} - Für jeden vorhandenen Eintrag den nachfolgenden Code ausführen

Bitte ändern Sie die Funktion sRender() im Viewport guestbook wie folgt

 
function sRender(){
		if ($this->sSYSTEM->_POST["sSubmit"]){
			// Formular wurde abgeschickt
			// Prüfen ob alle erforderlichen Daten übermittelt wurden
 
			if ($this->sSYSTEM->_POST["sName"] && $this->sSYSTEM->_POST["sArticle"] && $this->sSYSTEM->_POST["sComment"]){
				// Alle benötigten Felder ausgefüllt
				// Einfügen des Vorschlags in die Datenbank
				$this->sSYSTEM->sDB_CONNECTION->Execute("
				INSERT INTO my_guestbook (`datum`,`name`,`article`,`text`,`active`)
				VALUES (
				now(),
				'".$this->sSYSTEM->_POST["sName"]."',
				'".$this->sSYSTEM->_POST["sArticle"]."',
				'".$this->sSYSTEM->_POST["sComment"]."',
				0
				)
				");
			}else {
				// Nicht alle Felder wurden ausgefüllt > Hinweis an den Benutzer
				$variables["showError"] = true;
			}
		}
 
		// Bestehende Einträge auslesen
		$variables["sEntries"] = $this->sSYSTEM->sDB_CONNECTION->GetAll("
		SELECT DATE_FORMAT(datum,'%d.%m.%Y %H:%i:%s') AS datumText, name, article, text FROM my_guestbook
		WHERE active = 1 ORDER BY datum DESC
		");
		$templates = array("sContainer"=>"/mytemplates/guestbook.tpl","sContainerRight"=>"");
		return array("templates"=>$templates,"variables"=>$variables);
	}
 

• if ($this->sSYSTEM->_POST["sSubmit"]){ - falls das Formular abgeschickt wurde, den nachfolgenden Code ausführen
• $this->sSYSTEM->_POST - Hier sind alle per POST übermittelten Daten abrufbar. Die Daten werden durch Shopware maskiert und abgesichert, d.h ein zusätzliches escape ist nicht notwendig. Parallel zu _POST existiert ein _GET Array über das alle GET-Variablen abgefragt werden können
• if ($this->sSYSTEM->_POST["sName"] && $this->sSYSTEM->_POST["sArticle"] && $this->sSYSTEM->_POST["sComment"]){ - wurden alle Felder ausgefüllt?

 
$this->sSYSTEM->sDB_CONNECTION->Execute("
				INSERT INTO my_guestbook (`datum`,`name`,`article`,`text`,`active`)
				VALUES (
				now(),
				'".$this->sSYSTEM->_POST["sName"]."',
				'".$this->sSYSTEM->_POST["sArticle"]."',
				'".$this->sSYSTEM->_POST["sComment"]."',
				0
				)
				");
 

• Einfügen des Datensatzes - active=0 damit der Eintrag erst nach Freischaltung sichtbar wird

 
else {
				// Nicht alle Felder wurden ausgefüllt > Hinweis an den Benutzer
				$variables["showError"] = true;
			}
 

• Falls nicht alle benötigten Felder ausgefüllt wurden, wird die Variable showError gesetzt - diese ist anschließend über $showError im Template verfügbar

 
$variables["sEntries"] = $this->sSYSTEM->sDB_CONNECTION->GetAll("
		SELECT DATE_FORMAT(datum,'%d.%m.%Y %H:%i:%s') AS datumText, name, article, text FROM my_guestbook
		WHERE active = 1 ORDER BY datum DESC
		");
 

• Alle bestehenden und freigeschalteten Einträge aus der Datenbank auslesen und der Smarty-Variable sEntries zuweisen

Sie können den Viewport in der Storefront über folgende Adresse aufrufen

http://www.ihrshop.tld/shopware.php/sViewport,guestbook

Der Parameter sViewport,X steuert also, welcher Viewport aktuell angezeigt werden soll

Bitte fügen Sie nun Einträge hinzu - diese werden erst nach Freischaltung aktiv - siehe nächstes Kapitel

Als wir die Datenbank-Struktur definiert haben, haben wir bereits den Menü-Eintrag für unser Gästebuch hinzugefügt

 
INSERT INTO `s_core_menu` ( `id` , `parent` , `hyperlink` , `name` , `onclick` , `style` , `class` , `position` , `active` , `ul_properties` )
VALUES (
NULL , '7', '', 'Gästebuch', 'loadSkeleton(''guestbook'');', 'background-position: 5px 5px;', 'ico2 layers', '0', '1', ''
);
 

Das unter loadSkeleton() definierte Modul, muss nun im Dateisystem hinzugefügt werden - führen Sie dazu die folgenden Schritte aus

• Wechseln Sie in den Ordner /engine/modules
• Legen Sie einen neuen Ordner guestbook an (Ordername = Modulname)
• Legen Sie zwei neue Dateien in diesem Ordner an
  • skeleton.php
  • guestbook.php
• Öffnen Sie die Datei skeleton.php
• Fügen Sie den nachfolgenden Code ein

 
{
	"init": {
		"title": "Gästebuch",
		"minwidth": "700",
		"minheight": "580",
		"loader": "iframe",
		"url": "guestbook.php"
	}
 
}
 

• title: Fenster-Titel
• minwidth: Mindestbreite des Fensters
• minheight: Mindesthöhe des Fensters
• loader: Wie soll der Content ins Fenster eingebunden werden? (default = iframe - Einbinden als iFrame / Sandbox)
• url: Datei die eingebunden werden soll

Als nächstes wird das eigentliche Backend-Modul entwickelt

• Öffnen Sie die Datei guestbook.php
• Fügen Sie den nachfolgenden Code ein

 
<?
define('sAuthFile', 'sGUI');
define('sConfigPath',"../../../");
include("../../core/php/check.php");
$result = new checkLogin();
$result = $result->checkUser();
if ($result!="SUCCESS"){
echo "
	<title>Time-Out</title>
	<script language="javascript">
	parent.location.reload();
	</script>
	Bitte loggen Sie sich neu ein!
	";
	die();
}
// *****************
?>
<?
 
if ($_GET["delete"]){
	$delete = mysql_query("
	DELETE FROM my_guestbook WHERE id={$_GET["delete"]}
	");
 
	if ($delete){
		$sInform = "Eintrag wurde gelöscht";
	}else {
		$sError = "Eintrag konnte nicht gelöscht werden";
	}
}
 
if ($_GET["activate"]){
	$activate = mysql_query("
	UPDATE my_guestbook SET active=1 WHERE id={$_GET["activate"]}
	");
 
	if ($activate){
		$sInform = "Eintrag wurde aktiviert";
	}else {
		$sError = "Eintrag konnte nicht aktiviert werden";
	}
}
?>
 
 
 
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="../../core/js/mootools.js"></script>
<link href="../../core/css/modules.css" rel="stylesheet" type="text/css" />
<link href="../../core/css/icons.css" rel="stylesheet" type="text/css" />
 
 
<body >
<script>
// Shopware - 2  JS-Wrapper-Code -
function sWrapper(sFunction, sId){
	switch (sFunction){
		case "deleteEntry":
			// Redirect
			window.location.href = "<?= $_SERVER["PHP_SELF"] ?>?delete="+sId;
			break;
	}
}
 
function confirmDelete(ev,text){
		parent.parent.sConfirmationObj.show('Soll <?= $valueName ?> "'+text+'" wirklich gel&ouml;scht werden?',window,'deleteEntry',ev);
	}
window.onload = function(){
	<?
		if ($sInform){
			echo "parent.parent.Growl('$sInform');";
		}
		if ($sError){
			echo "parent.parent.Growl('$sError');";
			echo "parent.parent.sWindows.focus.shake(50);";
		}
	?>
};
</script>
<fieldset class="col2_cat2">
<legend>Artikelvorschläge:</legend>
<table cellpadding="0" cellspacing="0" class="listing">
   <tbody>
   		 <?	
			// Query Related-Articles
			$sql = "
			SELECT * FROM my_guestbook ORDER BY datum DESC
			";
			$getEntries = mysql_query($sql);
			while ($entry = mysql_fetch_array($getEntries)){
				$delete = "<a style="cursor:pointer" class="ico delete" onclick="confirmDelete({$entry["id"]},'{$entry["article"]}')"></a>";			
			?>
 
			     <tr class="rowcolor2">
			       <th class="first-child"><img src="../../core/img/default/icons/group.png" style="margin:0 15px 0 0;" /><?= $entry["article"]?> <?= strip_tags($entry["text"]) ?>(von <?= $entry["name"]?>)</th>
			       <td class="last-child"><?= $delete ?> <?= !$entry["active"] ? "<a href="{$_SERVER["PHP_SELF"]}?activate={$entry["id"]}">| Freischalten</a>" : "" ?></td>
			     </tr>
		 	<?
				}
			?>
   </tbody>
</table>
</fieldset>
 
 
 

 
<?
define('sAuthFile', 'sGUI');
define('sConfigPath',"../../../");
include("../../core/php/check.php");
$result = new checkLogin();
$result = $result->checkUser();
if ($result!="SUCCESS"){
echo "
	<title>Time-Out</title>
	<script language="javascript">
	parent.location.reload();
	</script>
	Bitte loggen Sie sich neu ein!
	";
	die();
}
// *****************
?>
 

• Dieser Code-Block lädt die Datenbank-Verbindung und stellt Services wie die Datenbank-Verbindung zur Verfügung
• $result = $result->checkUser(); - Prüft ob der Benutzer eingeloggt und authentifiziert ist - andernfalls wird der Script-Aufruf blockiert

 
if ($_GET["delete"]){
	$delete = mysql_query("
	DELETE FROM my_guestbook WHERE id={$_GET["delete"]}
	");
 
	if ($delete){
		$sInform = "Eintrag wurde gelöscht";
	}else {
		$sError = "Eintrag konnte nicht gelöscht werden";
	}
}
 

• Löschen eines Eintrags
• $sInform = Der Shopware Core visualisiert das der Eintrag gelöscht werden konnte

 
if ($_GET["activate"]){
	$activate = mysql_query("
	UPDATE my_guestbook SET active=1 WHERE id={$_GET["activate"]}
	");
 
	if ($activate){
		$sInform = "Eintrag wurde aktiviert";
	}else {
		$sError = "Eintrag konnte nicht aktiviert werden";
	}
}
 

• Aktivieren / Freischalten eines Eintrags

 
<script type="text/javascript" src="../../core/js/mootools.js"></script>
<link href="../../core/css/modules.css" rel="stylesheet" type="text/css" />
<link href="../../core/css/icons.css" rel="stylesheet" type="text/css" />
 

• Einbinden der Standard-Javascript-Bibliotheken und CSS-Stylesheets

 
 
<script>
// Shopware - 2  JS-Wrapper-Code -
function sWrapper(sFunction, sId){
	switch (sFunction){
		case "deleteEntry":
			// Redirect
			window.location.href = "<?= $_SERVER["PHP_SELF"] ?>?delete="+sId;
			break;
	}
}
 
function confirmDelete(ev,text){
		parent.parent.sConfirmationObj.show('Soll <?= $valueName ?> "'+text+'" wirklich gel&ouml;scht werden?',window,'deleteEntry',ev);
	}
window.onload = function(){
	<?
		if ($sInform){
			echo "parent.parent.Growl('$sInform');";
		}
		if ($sError){
			echo "parent.parent.Growl('$sError');";
			echo "parent.parent.sWindows.focus.shake(50);";
		}
	?>
};
</script>
 

• function sWrapper - wird durch den Core aufgerufen, nachdem die Bestätigung (confirmDelete) durch den Benutzer ausgelöst wurde
• parent.parent.sConfirmationObj.show( - Zeigt eine Bestätigungsaufforderung (Confirm-Box) an
• parent.parent.Growl( - Zeigt eine Status-Meldung an (Apple-Style)
• parent.parent.sWindows.focus.shake(50) - "Schüttelt" das aktuelle Fenster um Fehler zu signalisieren

 
 <?	
			// Query Related-Articles
			$sql = "
			SELECT * FROM my_guestbook ORDER BY datum DESC
			";
			$getEntries = mysql_query($sql);
			while ($entry = mysql_fetch_array($getEntries)){
				$delete = "<a style="cursor:pointer" class="ico delete" onclick="confirmDelete({$entry["id"]},'{$entry["article"]}')"></a>";			
			?>
 
			     <tr class="rowcolor2">
			       <th class="first-child"><img src="../../core/img/default/icons/group.png" style="margin:0 15px 0 0;" /><?= $entry["article"]?> <?= strip_tags($entry["text"]) ?>(von <?= $entry["name"]?>)</th>
			       <td class="last-child"><?= $delete ?> <?= !$entry["active"] ? "<a href="{$_SERVER["PHP_SELF"]}?activate={$entry["id"]}">| Freischalten</a>" : "" ?></td>
			     </tr>
		 	<?
				}
			?>
 

• Alle Einträge werden in einer Tabelle ausgegeben - in der Tabelle können diese freigeschaltet und gelöscht werden
• onclick="confirmDelete({$entry["id"]},'{$entry["article"]}')" - ruft die Bestätigungsaufforderung (Javascript) zum Löschen eines Eintrags auf

Das Modul lässt sich nun über Inhalte > Gästebuch in Ihrem Backend aufrufen

Damit Ihre Kunden die Artikelvorschlags-Funktion nutzen können, muss diese in der Storefront verlinkt werden. Öffnen Sie hierzu das Template /index/index.tpl (oder ein beliebiges anderes, in das Sie den Link einfügen möchten)

• Fügen Sie an Ihrer Wunschposition folgenden Code hinzu

 
<a href="{$sBasefile}?sViewport=guestbook" title="Artikel vorschlagen">Artikel vorschlagen und Gutschein kassieren</a>
 

• Der Link wird zur Script-Laufzeit automatisch umgeschrieben (Rewrite)