Typo3 Extension jquery.dataTables.editable @deprecated

typo3

Achtung: basiert auf Klasse pibase @deprecated since typo3 V6.0 will be removed in V7.0 !!!! @new: Typo3 Flow; Typo3 Extension jquery.dataTables.editable

Ziel ist es in einer typo3 Extension eine Datenbanktabelle auszulesen und in der Oberfläche (frontend) dynamisch manipulierbar (add,edit,delete row) zumachen.

• Hierfür werden folgende Bibliotheken verwendet
  • jQuery ist eine freie, umfangreiche JavaScript-Bibliothek
  • DataTables table plug-in for jQuery
  • JQuery DataTables Data Manager plugin

• zur Info
  • Grundlagenwissen: Typo3 Extensions entwickeln @deprecated
  • Grundsätzlich bevor mensch sich wundert warum wieder was nicht funzt typo3-Cache löschen und im Zweifel mal unter Adminwerkzeuge > Protokoll schauen

mit kickstarter das Grundgerüst erstellen und installieren

im Backend im Erweiterungsmanager im dropdown create new extension auswählen

• Enter extension key: jquerydatatableseditable => update
• General info:
  • Title: jquery datatables editable
  • Description: jquery datatables editable Description
  • Category: Frontend
  • ....
  • => update
• New Database Tables
  • Tablename: tx_jquerydatatableseditable_table
  • Title of the table: jquery.datatables.editable table
  • Add "Deleted" field: bestätigen
  • Add "Hidden" flag: bestätigen
  • NEW FIELD:
    • Field name: jdet_col1
    • Field title: jquery datatables editable table column 1
    • Field type: string input
    • => update
  • NEW FIELD:
    • Field name: jdet_col2
    • Field title: jquery datatables editable table column 2
    • Field type: string input
    • => update
  • NEW FIELD:
    • Field name: jdet_col3
    • Field title: jquery datatables editable table column 3
    • Field type: string input
    • => update
• Frontend Plugins
  • Enter a title for the plugin: jquery datatables editable
  • Add to 'Insert Plugin' list in Content Elements': ausgewählt
  • Write a description for the entry (if any): jquery datatables editable description
  • => update

• links unter dem Enter extension key:
  • => update
  • => View result

README.txt					80	 View 	
ext_icon.gif					124	 	
ext_localconf.php				176	 View 	
ext_tables.php					1.0 K	 View 	
ext_tables.sql					509	 View 	
icon_tx_jquerydatatableseditable_table.gif	135	 	
locallang_db.xml				860	 View 	
tca.php						1.4 K	 View 	
doc/wizard_form.dat				2.2 K	 	
doc/wizard_form.html				61 K	 	
pi1/class.tx_jquerydatatableseditable_pi1.php	2.9 K	 View 	
pi1/locallang.xml				573	 View 	

mit WRITE bzw danach OK wird dann auch endlich was erstellt und importiert!

danach Erweiterung installieren

neue Extension einbinden

als nächstes muss die Extension auf unsere Seite eingebunden werden

WEB > List || Seite auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Allgemein
  • Typ: Standard
  • Seitentitel: jquery datatables editable
• Verhalten
  • Caching: Cache Deaktivieren
• Dokument speichern und schließen
• Seite aktivieren

WEB > List || jquerydatatableseditable Seite auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Plug-Ins > Allgemeines Plug-In

• Allgemein
  • Überschrift: jquerydatatableseditable
• Plugin
  • Ausgewähltes Plug-In: jquery datatables editable
• Dokument speichern und schließen

im Frontend aufrufen und ansehen

Schichten

Präsentationsschicht --- alles für den client

makeEditable.js

Hier findet der javascript Funktionsaufruf von der makeEditable Funktion statt.

Diese Funktion führt dazu das eine einfache html Tabelle dynamisch sortiert, editiert, Zeilen hin zu und gelöscht werden können.

Damit makeEditable weiß wohin die Formulardaten geschickt werden sollen, bekommt die Funktion als Parameter sUpdateURL, sAddURL und sDeleteURL übergeben. Das Skript #UpdateData.php welches die Formulardaten verarbeitet wird weiter unten beschrieben. Es wird über den eID Mechanismus indirekt aufgerufen, wie dies geschieht steht auch weiter unten in der #ext_localconf.php

Das #Einbinden der javascript Bibliotheken wird weiter unten beschrieben!

typo3conf/ext/jquerydatatableseditable/pi1/makeEditable.js

$(document).ready( function () {
	$('#dieTabelle').dataTable().makeEditable({
		sUpdateURL: "index.php?eID=UpdateData",
		sAddURL:	"index.php?eID=AddData",
		sDeleteURL: "index.php?eID=DeleteData"
	});
});

class.jquerydatatableseditable_ui.php

Diese Klasse beinhaltet den html code und wird von der #class.tx_jquerydatatableseditable_pi1.php Klasse benötigt!

typo3conf/ext/jquerydatatableseditable/pi1/lib/class.jquerydatatableseditable_ui.php

<?php

/**
 * Klassenfunktionen geben html code zurück für die Anzeige
 */
class jquerydatatableseditable_ui {
	/**
	 * fnc gibt ein Formularstring zurück den die jquery datatable Bibliothek 
	 * zum hinzufügen einer Tabellenreihe nutzt
	 * 
	 * @param type $param_tablename
	 * @param array $param_tablehead -- die Spaltennamen für den Tabellenkopf
	 * @return string
	 */
	public static function getAddFormular(array $param_tablehead) {
		$return = '
			<!-- Place holder where add and delete buttons will be generated -->
			<div class="add_delete_toolbar" />
			
			<!-- altervativ zu add_delete_toolbar
			 <button id="btnAddNewRow">Add</button> -->

			<!-- Custom form for adding new records -->
			<form id="formAddNewRow" action="#" title="Add new record">
		';
		$i=0;
		foreach($param_tablehead as $columnname) {
			$return .= '
				<label for="'.$columnname.'" class="label">'.$columnname.'</label></br>
				<input type="text" name="'.$columnname.'" id="'.$columnname.'" rel="'.$i.'" class="input"/></br>
			';
			$i++;
		}
		$return .= '</form>';
		return $return;
	}
	
	/**
	 * transformiert eine Tabelle in eine html-table Tabelle um, 
	 * damit die jquery datatable Bibliothek sie nutzen kann
	 * 
	 * @param array $param_array -- Rückgabe array von getTableValues
	 * @param type $param_tableid -- tabelletag id
	 * @param array $param_tablehead -- die Spaltennamen für den Tabellenkopf
	 * @return boolean|string
	 */
	public static function arrayToJqueryDatatable(array $param_array, $param_tableid, array $param_tablehead=null) {
		$table_start = '<table id="'.$param_tableid.'" border="1">';
		
		$table_body = '<tbody>';
		$table_stop = '</table>';

		if(is_null($param_tablehead)) {
			$generate_tablehead = true;
		} else {
			$generate_tablehead = false;
		}
		
		foreach($param_array as $id => $row) {
			$table_row = $table_row_start = $table_row_content = '';
			foreach($row as $key => $value) {
				if($key == 'uid') {
					$table_row_start = '<tr id="'.$value.'">';
				} else {
					$table_row_content .= '<td>'.$value.'</td>';
					if($generate_tablehead) {
						$param_tablehead[] = $key;
					}					
				}
			}
			if($table_row_start) {
				$generate_tablehead = false;
				$table_row = $table_row_start.$table_row_content.'</tr>';
			} else {
				return false;
			}
			$table_body .= $table_row;
		}
		$table_body .= '</tbody>';
		
		$table_head = '<thead><tr>';
		foreach($param_tablehead as $headline) {
			$table_head .= '<th>'.$headline.'</th>';
		}
		$table_head .= '</tr></thead>';
		
		$return = $table_start.$table_head.$table_body.$table_stop;
		return $return;
	}

}
?>

Datenhaltungsschicht --- alles für die Datenbank

die Datenbanktabelle wird in folgenden Dateien beschrieben

• #ext_tables.sql
• #tca.php

class.jquerydatatableseditable_db.php

Diese Klasse beinhaltet die Datenbankaufrufe und wird von der #class.tx_jquerydatatableseditable_pi1.php Klasse und von #UpdateData.php benötigt!

typo3conf/ext/jquerydatatableseditable/pi1/lib/class.jquerydatatableseditable_db.php

<?php
/**
 * Klassenfunktionen regeln den Zugriff auf die Datenbanktabelle
 */
class jquerydatatableseditable_db {

	private static $tablename = 'tx_jquerydatatableseditable_table';
	public static $tablehead_array = array('jdet_col1', 'jdet_col2', 'jdet_col3');
	private static $tablehead_string = 'jdet_col1, jdet_col2, jdet_col3';	
	
	/**
	 * Datenbankfunktion: liest komplette Datenbank Tabelle aus
	 * 
	 * @param string $param_select
	 * @return array
	 */
	public static function getTableValues() {
		$select='uid, '.self::$tablehead_string;
		$Resource = $GLOBALS['TYPO3_DB']->exec_SELECTquery(
			  $select,
			  self::$tablename,
			  $where_clause,
			  $groupBy='',
			  $orderBy='',
			  $limit=''
		);
		$return = array();
		while($row = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($Resource)) {
			$return[] = $row;
		}  
		
		return $return;
	}

	/**
	 * Datenbankfunktion: löscht eine Zeile
	 * 
	 * @param type $param_uid
	 */
	public static function deleteDBRow($param_uid) {
		$GLOBALS['TYPO3_DB']->exec_DELETEquery(self::$tablename,'uid='.$param_uid) ;
	}
	
	/**
	 * Datenbankfunktion: fügt eine Zeile hinzu
	 * 
	 * @param type $param_fields_values
	 */
	public static function insertDBRow($param_fields_values) {
		$GLOBALS['TYPO3_DB']->exec_INSERTquery(self::$tablename,$param_fields_values,$no_quote_fields=FALSE); 		
	}
	
	/**
	 * Datenbankfunktion: editiert eine Zelle
	 * 
	 * @param type $param_uid
	 * @param type $param_col
	 * @param type $param_value
	 * @return string
	 */
	public static function updateDBCell($param_uid, $param_col, $param_value) {
		if($param_col) {
			$result = $GLOBALS['TYPO3_DB']->exec_UPDATEquery(self::$tablename,'uid='.$param_uid,array($param_col => $param_value)) ;
			if($result) {
				return $param_value;
			} else {
				return 'ERROR no good result: '.$result;
			}			
		} else {
			return 'ERROR no column name';
		}
	}	
}
?>

Logik- bzw. Steuerungsschicht

hier ist weniger Logik sondern derzeit mehr die Steuerung der oben beschriebenen Funktionen aus den Dateien

• #class.jquerydatatableseditable_db.php
• #class.jquerydatatableseditable_ui.php

class.tx_jquerydatatableseditable_pi1.php

die Funktion main(...) wird von der index.php aufgerufen, bzw ist die Haupt-Extensions Funktion

typo3conf/ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php

<?php

require_once(t3lib_extMgm::extPath('jquerydatatableseditable') . 'pi1/lib/class.jquerydatatableseditable_db.php');
require_once(t3lib_extMgm::extPath('jquerydatatableseditable') . 'pi1/lib/class.jquerydatatableseditable_ui.php');

/**
 * Plugin 'jquery datatables editable' for the 'jquerydatatableseditable' extension.
 *
 * @author	fdm 
 * @package	TYPO3
 * @subpackage	tx_jquerydatatableseditable
 */
class tx_jquerydatatableseditable_pi1 extends tslib_pibase {
	public $prefixId      = 'tx_jquerydatatableseditable_pi1';		// Same as class name
	public $scriptRelPath = 'pi1/class.tx_jquerydatatableseditable_pi1.php';	// Path to this script relative to the extension dir.
	public $extKey        = 'jquerydatatableseditable';	// The extension key.
	public $pi_checkCHash = TRUE;
	
	/**
	 * The main method of the Plugin.
	 *
	 * @param string $content The Plugin content
	 * @param array $conf The Plugin configuration
	 * @return string The content that is displayed on the website
	 */
	public function main($content, array $conf) {
		$this->conf = $conf;
		$this->pi_setPiVarDefaults();
		$this->pi_loadLL();
  
		$tablevalues = jquerydatatableseditable_db::getTableValues();
		$html_table = jquerydatatableseditable_ui::arrayToJqueryDatatable($tablevalues, 'dieTabelle', jquerydatatableseditable_db::$tablehead_array);
		$html_AddFormular = jquerydatatableseditable_ui::getAddFormular(jquerydatatableseditable_db::$tablehead_array);

		$content .= $html_table.$html_AddFormular;	

		return $this->pi_wrapInBaseClass($content);
	}
}

if (defined('TYPO3_MODE') && isset($GLOBALS['TYPO3_CONF_VARS'][TYPO3_MODE]['XCLASS']['ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php'])) {
	include_once($GLOBALS['TYPO3_CONF_VARS'][TYPO3_MODE]['XCLASS']['ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php']);
}

?>

UpdateData.php

Das UpdateData.php Script wird über die index.php durch den eID Mechnismus aufgerufen und verarbeitet die Formulardaten!

typo3conf/ext/jquerydatatableseditable/pi1/UpdateData.php

<?php


$eID =t3lib_div::_GET('eID');
if($eID) {

	require_once(t3lib_extMgm::extPath('jquerydatatableseditable') . 'pi1/lib/class.jquerydatatableseditable_db.php');
	$GLOBALS['TYPO3_DB']->connectDB();

	if($eID=='UpdateData') {
		$result = jquerydatatableseditable_db::updateDBCell(t3lib_div::_POST('id'), t3lib_div::_POST('columnName'), t3lib_div::_POST('value'));;
		echo $result;
	} else if($eID=='AddData') {
		jquerydatatableseditable_db::insertDBRow(t3lib_div::_POST());
	} else if($eID=='DeleteData') {
		jquerydatatableseditable_db::deleteDBRow(t3lib_div::_POST('id'));
	} else {
		echo "Fehler";
		return false;
	}
}
?>

Konfiguration der Schichten

ext_localconf.php

hier wird der eID Mechanismus konfiguriert. wenn die index.php mit dem Parameter eID= aufgerufen wird, wird hier nach gesehen, ob im

$TYPO3_CONF_VARS['FE']['eID_include']

Array dafür ein Schlüssel vorhanden und ein Pfad gesetzt zu einem Skript (hier #UpdateData.php) ist. Wenn dies der Fall ist, wird das Haupt-Skript an dieser Stelle abgebrochen und das hier hinterlegte Skript aufgerufen. In unserem Fall findet das für die Verarbeitung der Formulardaten statt.

typo3conf/ext/jquerydatatableseditable/ext_localconf.php

<?php
// durch kickstarter generiert
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}


/**
 * eID -- damit die Formulardaten weiter an UpdateData.php weitergeleitet und verarbeitet werden
 * @see http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html
 */
{
	$TYPO3_CONF_VARS['FE']['eID_include']['UpdateData'] = 'EXT:'.$_EXTKEY.'/pi1/UpdateData.php';
	$TYPO3_CONF_VARS['FE']['eID_include']['AddData'] = 'EXT:'.$_EXTKEY.'/pi1/UpdateData.php';
	$TYPO3_CONF_VARS['FE']['eID_include']['DeleteData'] = 'EXT:'.$_EXTKEY.'/pi1/UpdateData.php';
}



// durch kickstarter generiert
t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_jquerydatatableseditable_pi1.php', '_pi1', 'list_type', 1);
?>

Einbinden der javascript Bibliotheken

Achtung hab gerade keine Lust mehr ;( .... die javascript Bibliotheken müssen natürlich vorhanden sein, hier sei derzeit auf Typo3_Extensions_entwickeln#jquery-datatables-editable verwiesen. Sprich ich setzte gerade vorraus das die jquery-datatables-editable Bibliothek im fileadmin Ordner liegt. Das ist natürlich unschön, da sie ja mit der Extension zusammen hängt. Aber egal kommt Zeit, kommt Rat, kommt Attentat.

setup.txt

typo3conf/ext/jquerydatatableseditable/static/ts_template/setup.txt

page.includeJSFooter.complete=fileadmin/jquery-datatables-editable/media/js/complete.js
page.includeJSFooter.jquery=fileadmin/jquery-datatables-editable/media/js/jquery.min.js
page.includeJSFooter.dataTables=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.min.js
page.includeJSFooter.editable=fileadmin/jquery-datatables-editable/media/js/jquery.dataTables.editable.js
page.includeJSFooter.jeditable=fileadmin/jquery-datatables-editable/media/js/jquery.jeditable.js
page.includeJSFooter.jqueryui=fileadmin/jquery-datatables-editable/media/js/jquery-ui.js
page.includeJSFooter.validate=fileadmin/jquery-datatables-editable/media/js/jquery.validate.js

page.includeJSFooter.myjavascript=typo3conf/ext/jquerydatatableseditable/pi1/makeEditable.js

ext_tables.php

typo3conf/ext/jquerydatatableseditable/ext_tables.php

<?php
// durch kickstarter generiert
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}

/**
 * statisches typoscript template einbinden
 */
{
	t3lib_extMgm::addStaticFile($_EXTKEY,'static/ts_template/', 'ts template');
}



// durch kickstarter generiert
$TCA['tx_jquerydatatableseditable_table'] = array(
	'ctrl' => array(
		'title'     => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table',		
		'label'     => 'uid',	
		'tstamp'    => 'tstamp',
		'crdate'    => 'crdate',
		'cruser_id' => 'cruser_id',
		'default_sortby' => 'ORDER BY crdate',	
		'delete' => 'deleted',	
		'enablecolumns' => array(		
			'disabled' => 'hidden',
		),
		'dynamicConfigFile' => t3lib_extMgm::extPath($_EXTKEY) . 'tca.php',
		'iconfile'          => t3lib_extMgm::extRelPath($_EXTKEY) . 'icon_tx_jquerydatatableseditable_table.gif',
	),
);


t3lib_div::loadTCA('tt_content');
$TCA['tt_content']['types']['list']['subtypes_excludelist'][$_EXTKEY.'_pi1'] = 'layout,select_key,pages';


t3lib_extMgm::addPlugin(array(
	'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tt_content.list_type_pi1',
	$_EXTKEY . '_pi1',
	t3lib_extMgm::extRelPath($_EXTKEY) . 'ext_icon.gif'
),'list_type');
?>

Backend Konfiguration

WEB > List || jquerydatatableseditable Seite auswählen || Neuen Datensatz erstellen > Systemdatensätze > Template

• Allgemein
  • Template-Titel:
• Enthält
  • Statische Templates einschließen (aus Erweiterungen):
    • ts template (jquerydatatableseditable)

Quellen

• jquery-datatables-editable
  • Adding New Records
  • Edit Cell
  • Delete Record
• Zwischen client und database
  • eID Mechanismus
• Typo3 Datenbankmanipulation
  • Datenbankabfragen in Extensions
  • Verwendung von Datenbanken

Anhang: Dateien die ausschließlich von kickstarter generiert wurden

ext_tables.sql

typo3conf/ext/jquerydatatableseditable/ext_tables.sql

#
# Table structure for table 'tx_jquerydatatableseditable_table'
#

CREATE TABLE tx_jquerydatatableseditable_table (
	uid int(11) NOT NULL auto_increment,
	pid int(11) DEFAULT '0' NOT NULL,
	tstamp int(11) DEFAULT '0' NOT NULL,
	crdate int(11) DEFAULT '0' NOT NULL,
	cruser_id int(11) DEFAULT '0' NOT NULL,
	deleted tinyint(4) DEFAULT '0' NOT NULL,
	hidden tinyint(4) DEFAULT '0' NOT NULL,
	jdet_col1 tinytext,
	jdet_col2 tinytext,
	jdet_col3 tinytext,
	
	PRIMARY KEY (uid),
	KEY parent (pid)
) ENGINE=InnoDB;

tca.php

typo3conf/ext/jquerydatatableseditable/tca.php

<?php
if (!defined('TYPO3_MODE')) {
	die ('Access denied.');
}

$TCA['tx_jquerydatatableseditable_table'] = array(
	'ctrl' => $TCA['tx_jquerydatatableseditable_table']['ctrl'],
	'interface' => array(
		'showRecordFieldList' => 'hidden,jdet_col1,jdet_col2,jdet_col3'
	),
	'feInterface' => $TCA['tx_jquerydatatableseditable_table']['feInterface'],
	'columns' => array(
		'hidden' => array(		
			'exclude' => 1,
			'label'   => 'LLL:EXT:lang/locallang_general.xml:LGL.hidden',
			'config'  => array(
				'type'    => 'check',
				'default' => '0'
			)
		),
		'jdet_col1' => array(		
			'exclude' => 0,		
			'label' => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table.jdet_col1',		
			'config' => array(
				'type' => 'input',	
				'size' => '30',
			)
		),
		'jdet_col2' => array(		
			'exclude' => 0,		
			'label' => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table.jdet_col2',		
			'config' => array(
				'type' => 'input',	
				'size' => '30',
			)
		),
		'jdet_col3' => array(		
			'exclude' => 0,		
			'label' => 'LLL:EXT:jquerydatatableseditable/locallang_db.xml:tx_jquerydatatableseditable_table.jdet_col3',		
			'config' => array(
				'type' => 'input',	
				'size' => '30',
			)
		),
	),
	'types' => array(
		'0' => array('showitem' => 'hidden;;1;;1-1-1, jdet_col1, jdet_col2, jdet_col3')
	),
	'palettes' => array(
		'1' => array('showitem' => '')
	)
);
?>