Quelltext der Seite Typo3 Extension jquery.dataTables.editable @deprecated

[[typo3]]
----
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
** [http://jquery.com/ jQuery ist eine freie, umfangreiche JavaScript-Bibliothek]
** [http://datatables.net DataTables table plug-in for jQuery]
** [https://code.google.com/p/jquery-datatables-editable/ JQuery DataTables Data Manager plugin]

* zur Info
** Grundlagenwissen: [[Typo3 kickstarter Extension]], [[typo3 Extensions entwickeln]]
** Insgesamt ist die hier vorgestellte Struktur stark Verbesserungswürdig, z.B. könnten die Datenbankfunktionen in eine eigene Klasse, ....
** 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


== 3 Schichten == 
=== Präsentationsschicht --- alles für den client ===
==== makeEditable.js ====
'''typo3conf/ext/jquerydatatableseditable/pi1/makeEditable.js'''
<source lang="javascript">
$(document).ready( function () {
	$('#dieTabelle').dataTable().makeEditable({
		sUpdateURL: "index.php?eID=UpdateData",
		sAddURL:	"index.php?eID=AddData",
		sDeleteURL: "index.php?eID=DeleteData"
	});
});
</source>

==== class.jquerydatatableseditable_ui.php ====
'''typo3conf/ext/jquerydatatableseditable/pi1/lib/class.jquerydatatableseditable_ui.php'''
<source lang="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;
	}

}
?>
</source>

=== Logikschicht --- die logik ===
== php Schicht ==
* Dateien die modifiziert werden müssen
** typo3conf/ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php
* Dateien die frisch erstellt werden müssen
** typo3conf/ext/jquerydatatableseditable/pi1/UpdateData.php

=== modifizierte Dateien ===

'''typo3conf/ext/jquerydatatableseditable/pi1/class.tx_jquerydatatableseditable_pi1.php'''
<source lang="php">
</source>


'''typo3conf/ext/jquerydatatableseditable/ext_localconf.php'''
<source lang="php">
</source>

=== neue Dateien ===
typo3conf/ext/jquerydatatableseditable/pi1/UpdateData.php
<source lang="php">
<?php

if(array_key_exists('eID', $_GET)) {
	require_once('class.tx_jquerydatatableseditable_pi1.php');
 
	$GLOBALS['TYPO3_DB']->connectDB();
	if($_GET['eID']=='UpdateData') {
		$result = tx_jquerydatatableseditable_pi1::updateDBCell($_POST['id'], $_POST['columnName'], $_POST['value']);;
		echo $result;
	} else if($_GET['eID']=='AddData') {
		tx_jquerydatatableseditable_pi1::insertDBRow($_POST);
	} else if($_GET['eID']=='DeleteData') {
		tx_jquerydatatableseditable_pi1::deleteDBRow($_POST['id']);
	} else {
		echo "Fehler";
		return false;
	}
}
?>
</source>

== typoscript Schicht: statisches typoscript template für die Extension ==
=== Dateien===
'''typo3conf/ext/jquerydatatableseditable/ext_tables.php'''
<source lang="php">

</source>


'''static/ts_template/constants.txt'''


'''static/ts_template/setup.txt'''


=== 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'''
** [https://code.google.com/p/jquery-datatables-editable/wiki/AddingNewRecords Adding New Records]
** [https://code.google.com/p/jquery-datatables-editable/wiki/EditCell Edit Cell]
** [https://code.google.com/p/jquery-datatables-editable/wiki/DeleteRecord Delete Record]
* '''Zwischen client und database'''
** [http://www.typo3-tutorials.org/tutorials/extensions/eid-mechanismus.html eID Mechanismus]
* '''Typo3 Datenbankmanipulation'''
** [http://www.typo3-lisardo.de/home/blog-post/2010/09/01/datenbankabfragen-in-extensions.html Datenbankabfragen in Extensions]
** [http://www.typo3-nürnberg.de/entwickler/code-snippets/datenbanken/ Verwendung von Datenbanken]