TYPO3.CMS 6.2 Extension jquery.dataTables
- Typo3 Extension jquery.dataTables.editable @deprecated mit der alten pibase-Klasse entwickeln
Ziel ist es in einer typo3 Extension eine Datenbanktabelle auszulesen und in der Oberfläche (frontend) dynamisch darzustellen und manipulierbar (add,edit,delete row) zumachen. Unterschied zur Typo3 Extension jquery.dataTables.editable @deprecated Anleitung es wird nicht das JQuery-DataTables-Data Manager plugin verwendet, sondern darauf verzichtet die Tabelle innerhalb der Tabllenanzeige zu editieren
- Hierfür werden folgende Bibliotheken verwendet
- zur Info
- Grundlagenwissen: Typo3 kickstarter Extension, typo3 Extensions entwickeln
- Grundsätzlich bevor mensch sich wundert warum wieder was nicht funzt typo3-Cache löschen und im Zweifel mal unter Adminwerkzeuge > Protokoll schauen
Inhaltsverzeichnis
Verzeichnissstruktur
- typo3conf/ext/ncfluid - #ext_emconf.php #ext_localconf.php #ext_tables.sql ext_icon.gif #ext_tables.php tx_ncfluid_domain_model_table.gif
- typo3conf/ext/ncfluid/Classes
- typo3conf/ext/ncfluid/Classes/Controller/ - #TableController.php
- typo3conf/ext/ncfluid/Classes/Domain/
- typo3conf/ext/ncfluid/Classes/Domain/Model/ - #Table.php
- typo3conf/ext/ncfluid/Classes/Domain/Repository/ - #TableRepository.php
- typo3conf/ext/ncfluid/Configuration/
- typo3conf/ext/ncfluid/Configuration/TCA/ - #Table.php
- typo3conf/ext/ncfluid/Configuration/TypoScript/ - constants.txt #setup.txt
- typo3conf/ext/ncfluid/Resources/
- typo3conf/ext/ncfluid/Resources/Private/
- typo3conf/ext/ncfluid/Resources/Private/Language/ - #locallang.xml
- typo3conf/ext/ncfluid/Resources/Private/Layouts/ - #main.html
- typo3conf/ext/ncfluid/Resources/Private/Partials/ - #tablerowForm.html
- typo3conf/ext/ncfluid/Resources/Private/Templates/
- typo3conf/ext/ncfluid/Resources/Private/Templates/Table/ - #edit.html #index.html #new.html #show.html
- typo3conf/ext/ncfluid/Resources/Public/
- typo3conf/ext/ncfluid/Resources/Public/Stylesheets/ - #styles.css
- typo3conf/ext/ncfluid/Resources/Public/JavaScript/ - #UIHelper.js
- typo3conf/ext/ncfluid/Resources/Private/
- typo3conf/ext/ncfluid/Classes
Grundkonfiguration
Achtung: Am Ende dieser Dokumentation nach dem #MVC Kapitel befindet sich der #Konfiguration Nachtrag. Dieser steht in diesem Fall am Ende, da auf Dateien eingebunden werden, die laut Doku erst erstellt werden müssen
ext_emconf.php
hier wird ganz normal die Extension beschrieben, folgende Werte sind zu beachten
$EM_CONF[$_EXTKEY]['clearCacheOnLoad']
damit die Seite zwecks Datenbankanbindung auch immer schön neu geladen wird und nicht im Cache landet.
$EM_CONF[$_EXTKEY]['constraints']['depends']
damit klar dem System gesagt wird, das die Extension abhängig ist von anderen Extensions und diese erst installiert sein müssen
typo3conf/ext/ncfluid/ext_emconf.php
<?php
$EM_CONF[$_EXTKEY] = array(
'title' => 'ncfluid title',
'description' => 'ncfluid description',
'category' => 'fe',
'author' => 'frederick',
'author_email' => 'frederik@netz.coop',
'shy' => '',
'dependencies' => '',
'conflicts' => '',
'priority' => '',
'module' => '',
'state' => 'alpha',
'internal' => '',
'uploadfolder' => 0,
'createDirs' => '',
'modify_tables' => '',
'clearCacheOnLoad' => 1,
'lockType' => '',
'author_company' => '',
'version' => '0.0.1',
'constraints' => array(
'depends' => array(
/**
* wichtig da die extbase und fluid extension unbedingt vorhanden sein müssen!
*/
'php' => '5.2.0-0.0.0',
'typo3' => '4.3.dev-0.0.0',
'extbase'=> '1.0.1-0.0.0',
'fluid' => '1.0.1-0.0.0'
),
'conflicts' => array(
),
'suggests' => array(
),
),
);
?>
ext_localconf.php
hier wird definiert welche Klasse und Funktionen (bzw. Aktionen) nach dem Einbinden auf einer Seite aufgerufen werden, bzw zur Verfügung stehen
Die hier genutzte Klasse Table und die dazugehörigen Aktionen 'index,new,create,delete,show,edit,update' sind weiter unten beschrieben
siehe auch Tx_Extbase_Utility_Extension::configurePlugin()
typo3conf/ext/ncfluid/ext_localconf.php
<?php
if (!defined ('TYPO3_MODE')) die ('Access denied.');
Tx_Extbase_Utility_Extension::configurePlugin(
// string $extensionName -- Extensionname
$_EXTKEY,
// string $pluginName --
'Pi1',
// string $controllerActions -- hier werden die zur Verfügung stehenden Aktionen definiert
array(
// Klassenname => Funktionen/Aktionen, ...
'Table' => 'index,new,create,delete,show,edit,update'
),
// string $nonCacheableControllerActions -- Funktionen die nicht gecachet werden sollen
array(
'Table' => 'index,new,create,delete,show,edit,update'
)
);
?>
MVC
Datenmodell
ext_tables.sql
- "Die Felder uid, pid, tstamp, crdate und hidden werden von TYPO3 benötigt und vorausgesetzt."
- uid: eindeutiger Primärschlüssel
- pid: Page ID -- eindeutige Seiten ID
- crdate: unix timestamp wann der Datensatz erstellt worden ist
- tstamp: letzte Änderung
- weitere System-Felder
- deleted: wenn Datensatz gelöscht wird und deleted als Spalte existiert wird deleted auf ungleich 0 gesetzt und wird nicht mehr angezeigt ... ist aber sogesehen noch vorhanden, eine Art Mülleimer
- hidden: falls ungleich 0 wird der Datensatz im Frontend nicht mehr angezeigt
- unsere Spalten die wir explizit nutzen wollen
- coltext
- colint
- coldatetime
typo3conf/ext/ncfluid/ext_tables.sql
-- Achtung keine Unterstriche in Tabellenspaltennamen benutzen, führt zu Konflikten
CREATE TABLE tx_ncfluid_domain_model_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,
deleted tinyint(4) DEFAULT '0' NOT NULL,
hidden tinyint(4) DEFAULT '0' NOT NULL,
coltext tinytext,
colint int(11) DEFAULT '0' NOT NULL,
coldatetime int(11) DEFAULT '0' NOT NULL,
PRIMARY KEY (uid),
KEY parent (pid)
) ENGINE=InnoDB;
Table.php
typo3conf/ext/ncfluid/Configuration/TCA/Table.php
<?php
if (!defined ('TYPO3_MODE')) die ('Access denied.');
$TCA['tx_ncfluid_domain_model_table'] = array(
'ctrl' => $TCA['tx_ncfluid_domain_model_table']['ctrl'],
'interface' => array(
'showRecordFieldList' => 'coltext, colint, coldatetime'
),
'types' => array(
'1' => array('showitem' => 'coltext, colint, coldatetime')
),
'palettes' => array(
'1' => array('showitem' => '')
),
'columns' => array(
'coltext' => array(
'exclude' => 1,
'label' => 'LLL:EXT:ncfluid/Resources/Private/Language/locallang.xml:tx_ncfluid_domain_model_table.coltext',
'config' => array(
'type' => 'input',
'size' => 30,
'eval' => 'trim,required'
)
),
'colint' => array(
'exclude' => 1,
'label' => 'LLL:EXT:ncfluid/Resources/Private/Language/locallang.xml:tx_ncfluid_domain_model_table.colint',
'config' => array(
'type' => 'input',
'size' => 30,
'eval' => 'trim,required'
)
),
'coldatetime' => array(
'exclude' => 1,
'label' => 'LLL:EXT:ncfluid/Resources/Private/Language/locallang.xml:tx_ncfluid_domain_model_table.coldatetime',
'config' => array(
'type' => 'input',
'size' => 12,
'max' => 20,
'eval' => 'datetime,required',
'checkbox' => '0',
'default' => '0'
)
),
),
);
?>
Table.php
typo3conf/ext/ncfluid/Classes/Domain/Model/Table.php
<?php
/**
*
* Hier muss für JEDE Tabellenspalte die Variable deklariert werden
* als protected und dazu mindestens die dazugehörige get-Methode.
* Nach dem "get" wird der nächste Buchstabe IMMER großgeschrieben.
*
* Das nachfolgende kann mensch sich sparen, wenn mensch keine Unterstriche benutzt!!
* Solltet Ihr in Euren Spaltennamen Unterstriche verwendet haben,
* dann müssen diese in den get-Methoden entfernt werden und das
* erste Zeichen NACH dem Unterstrich auch wieder großgeschrieben
* werden. Beispiel: Spaltenname first_name wird zu getFirstName.
*/
class Tx_Ncfluid_Domain_Model_Table extends Tx_Extbase_DomainObject_AbstractValueObject {
// getUid() muss nicht mehr implementiert werden
/**
* text column
* @var string
* @validate NotEmpty
*/
protected $coltext;
/**
* Setter for text column
* @param string $coltext The text column
* @return void
*/
public function setColtext($coltext) {
$this->coltext = $coltext;
}
/**
* Getter for text column
* @return string The text column
*/
public function getColtext() {
return $this->coltext;
}
/**
* int column
* @var int
* @validate NotEmpty
*/
protected $colint;
/**
* Setter for int column
* @param int $colint The int column
* @return void
*/
public function setColint($colint) {
$this->colint = $colint;
}
/**
* Getter for int column
* @return int The int column
*/
public function getColint() {
return $this->colint;
}
/**
* datetime column
* @var DateTime
* @validate NotEmpty
*/
protected $coldatetime;
/**
* Setter for datetime column
* @param DateTime $coldatetime The datetime column
* @return void
*/
public function setColdatetime(DateTime $coldatetime) {
$this->coldatetime = $coldatetime;
}
/**
* Getter for datetime column
* @return DateTime The datetime column
*/
public function getColdatetime() {
return $this->coldatetime;
}
}
?>
TableRepository.php
typo3conf/ext/ncfluid/Classes/Domain/Repository/TableRepository.php
<?php
class Tx_Ncfluid_Domain_Repository_TableRepository extends Tx_Extbase_Persistence_Repository {
}
?>
View
locallang.xml
typo3conf/ext/ncfluid/Resources/Private/Language/locallang.xml
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<meta type="array">
<type>module</type>
<description>Language labels for fluid</description>
</meta>
<data type="array">
<!-- ENGLISH LANGUAGE DATA -->
<languageKey index="default" type="array">
<label index="tx_ncfluid_domain_model_table.coltext">text</label>
<label index="tx_ncfluid_domain_model_table.colint">int</label>
<label index="tx_ncfluid_domain_model_table.coldatetime">datetime</label>
</languageKey>
<!-- GERMAN LANGUAGE DATA -->
<languageKey index="de" type="array">
<label index="tx_ncfluid_domain_model_table.coltext">Text</label>
<label index="tx_ncfluid_domain_model_table.colint">ganze Zahl</label>
<label index="tx_ncfluid_domain_model_table.coldatetime">Datum-Zeit</label>
</languageKey>
</data>
</T3locallang>
index.html
typo3conf/ext/ncfluid/Resources/Private/Templates/Table/index.html
<f:layout name="main" />
<f:section name="title">index.html</f:section>
<f:section name="menu">
<ul>
<li><f:link.action controller="Table" action="index">index</f:link.action></li>
<li><f:link.action controller="Table" action="new">Neue Zeile</f:link.action></li>
</ul>
</f:section>
<f:section name="content">
<table id="dieTabelle" border="1">
<thead>
<tr>
<th><f:translate key="tx_ncfluid_domain_model_table.coltext" /></th>
<th><f:translate key="tx_ncfluid_domain_model_table.colint" /></th>
<th><f:translate key="tx_ncfluid_domain_model_table.coldatetime" /></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<f:if condition="{table}">
<f:then>
<f:for each="{table}" as="row">
<tr id="{row.uid}">
<td>{row.coltext}</td>
<td>{row.colint}</td>
<td><f:format.date format="d.m.Y, H:i">{row.coldatetime}</f:format.date></td>
<td><f:link.action controller="Table" action="show" arguments="{tablerow : row}">show</f:link.action></td>
<td><f:link.action controller="Table" action="edit" arguments="{tablerow : row}">edit</f:link.action></td>
<td><f:link.action controller="Table" action="delete" arguments="{tablerow : row}">delete</f:link.action></td>
</tr>
</f:for>
</f:then>
<f:else>
<tr>
<td>nodata</td>
<td>nodata</td>
<td>nodata</td>
<td></td>
<td></td>
<td></td>
</tr>
</f:else>
</f:if>
</tbody>
</table>
</f:section>
show.html
typo3conf/ext/ncfluid/Resources/Private/Templates/Table/show.html
<f:layout name="main" />
<f:section name="title">show.html</f:section>
<f:section name="menu">
<ul>
<li><f:link.action controller="Table" action="edit" arguments="{tablerow : tablerow}">edit</f:link.action></li>
<li><f:link.action controller="Table" action="delete" arguments="{tablerow : tablerow}">delete</f:link.action></li>
</ul>
</f:section>
<f:section name="content">
<table>
<tr>
<td><f:translate key="tx_ncfluid_domain_model_table.coltext" />:</td>
<td>{tablerow.coltext}</td>
</tr>
<tr>
<td><f:translate key="tx_ncfluid_domain_model_table.colint" />:</td>
<td>{tablerow.colint}</td>
</tr>
<tr>
<td><f:translate key="tx_ncfluid_domain_model_table.coldatetime" />:</td>
<td><f:format.date format="d.m.Y, H:i">{tablerow.coldatetime}</f:format.date></td>
</tr>
</table>
</f:section>
tablerowForm.html
typo3conf/ext/ncfluid/Resources/Private/Partials/tablerowForm.html
<p>partial="tablerowForm"</p>
<f:form action="{action}" object="{tablerow}" name="tablerow" >
<f:renderFlashMessages style="background-color: #dfd; padding: 12px;" />
<table>
<tr>
<td><f:translate key="tx_ncfluid_domain_model_table.coltext" />:</td>
<td><f:form.textfield property="coltext" /></td>
</tr>
<tr>
<td><f:translate key="tx_ncfluid_domain_model_table.colint" />:</td>
<td><f:form.textfield property="colint" /></td>
</tr>
<tr>
<td><f:translate key="tx_ncfluid_domain_model_table.coldatetime" />:</td>
<td><f:form.textfield property="coldatetime" id="datepicker" value="{f:format.date(date: '{tablerow.coldatetime}', format: 'd.m.Y, H:i')}" size="12" /></td>
</tr>
<tr>
<td></td>
<td><f:form.submit value="Speichern"/></td>
</tr>
</table>
</f:form>
new.html
typo3conf/ext/ncfluid/Resources/Private/Templates/Table/new.html
<f:layout name="main" />
<f:section name="title">new.html</f:section>
<f:section name="menu" />
<f:section name="content">
<f:render partial="tablerowForm" arguments="{action : 'create', tablerow : tablerow}" />
</f:section>
edit.html
typo3conf/ext/ncfluid/Resources/Private/Templates/Table/edit.html
<f:layout name="main" />
<f:section name="title">edit.html</f:section>
<f:section name="menu">
<ul>
<li><f:link.action controller="Table" action="delete" arguments="{tablerow : tablerow}">delete</f:link.action></li>
</ul>
</f:section>
<f:section name="content">
<f:render partial="tablerowForm" arguments="{action : 'update', tablerow : tablerow}" />
</f:section>
main.html
typo3conf/ext/ncfluid/Resources/Private/Layouts/main.html
<div id="ncfluid">
<h2 id="ncfluid-title">
<f:render section="title" />
</h2>
<div id="ncfluid-menu">
<f:render section="menu" />
</div>
<f:renderFlashMessages style="background-color: #dfd; padding: 12px;" />
<div id="ncfluid-content">
<f:render section="content" />
</div>
<div id="ncfluid-footer">by netz.coop eG</div>
</div>
styles.css
typo3conf/ext/ncfluid/Resources/Public/Stylesheets/styles.css
div#ncfluid {
border-left:1px solid #536054;
border-top:1px solid #536054;
padding: 10px;
}
UIHelper.js
typo3conf/ext/ncfluid/Resources/Public/JavaScript/UIHelper.js
$(document).ready(function(){
$('#dieTabelle').dataTable();
});
$(function() {
$( "#datepicker" ).datepicker();
});
setup.txt
ich hab die setup.txt in dieser Dokumentation mal unter $View einsortiert, weil in diesem setup.txt ausschließlich nur View Dateien verlinkt sind
typo3conf/ext/ncfluid/Configuration/TypoScript/setup.txt
# setup page.includeJSFooter.jquery.external=1 page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js page.includeJSFooter.jQueryUI.external = 1 page.includeJSFooter.jQueryUI = http://code.jquery.com/ui/1.10.1/jquery-ui.js page.includeJSFooter.dataTables.external = 1 page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js page.includeJSFooter.myjavascript=typo3conf/ext/ncfluid/Resources/Public/JavaScript/UIHelper.js page.includeCSS.mittwald_timetrack = EXT:ncfluid/Resources/Public/Stylesheets/styles.css # derzeit ausschließlich für den datepicker page.includeCSS.jQueryUIcss.external = 1 page.includeCSS.jQueryUIcss = http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css
Controller
TableController.php
typo3conf/ext/ncfluid/Classes/Controller/TableController.php
<?php
class Tx_Ncfluid_Controller_TableController
extends Tx_Extbase_MVC_Controller_ActionController {
/**
* @var Tx_Ncfluid_Domain_Repository_TableRepository
*/
protected $tableRepository;
/**
* ! Action's
*
* Per Konvention wird jede Aktion als öffentliche Methode implementiert, die
* dem Namensschema [Aktionsname]Action folgt.
*
* folgende exsitieren schon
* * Class Tx_Extbase_MVC_Controller_ActionController
* ** protected void initializeAction()
* ** protected string errorAction()
*/
/**
* List action for this controller. Displays all tablerows.
*/
public function indexAction() {
$rows = $this->tableRepository->findAll();
$this->view->assign('table', $rows);
}
/**
*
* The show action. Displays details for a specific tablerow.
*
* @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow that is to be displayed.
* @return void
*
*/
public function showAction (Tx_Ncfluid_Domain_Model_Table $tablerow ) {
$this->view->assign('tablerow', $tablerow);
}
/**
*
* @param Tx_Ncfluid_Domain_Model_Table $tablerow
* @dontvalidate $tablerow
*/
public function newAction(Tx_Ncfluid_Domain_Model_Table $tablerow=NULL) {
$this->view->assign('tablerow', $tablerow);
}
/**
*
* @param Tx_Ncfluid_Domain_Model_Table $tablerow
* @dontvalidate $tablerow
*/
public function createAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
$this->tableRepository->add($tablerow);
$this->flashMessageContainer->add('Your new row was created.');
$this->redirect('index');
}
/**
*
* The delete action. Deletes an existing row from the database.
*
* @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow that is to be deleted
* @return void
*
*/
public function deleteAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
$this->tableRepository->remove($tablerow);
$this->flashMessageContainer->add('Your tablerow was removed.');
$this->redirect('index');
}
/**
* Displays a form to edit an existing tablerow
*
* @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow to display
* @dontvalidate $tablerow
*/
public function editAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
$this->view->assign('tablerow', $tablerow);
}
/**
* Updates an existing tablerow and forwards to the index action.
*
* @param Tx_Ncfluid_Domain_Model_Table $tablerow The tablerow to display
*/
public function updateAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
$objectManager = t3lib_div::makeInstance('Tx_Extbase_Object_ObjectManager');
$tableRepository = $objectManager->get('Tx_Ncfluid_Domain_Repository_TableRepository');
$tableRepository->update($tablerow);
// $this->tableRepository->update($tablerow);
$this->flashMessageContainer->add('Your tablerow was updated.');
$this->redirect('index');
}
/**
*
* The initialization action. This methods creates instances of all required
* repositories.
*
* @return void
*
*/
protected Function initializeAction() {
$this->tableRepository =& t3lib_div::makeInstance('Tx_Ncfluid_Domain_Repository_TableRepository');
}
}
?>
Konfiguration Nachtrag
ext_tables.php
typo3conf/ext/ncfluid/ext_tables.php
<?php
if (!defined('TYPO3_MODE')) {
die ('Access denied.');
}
/**
* einbinden des TypoScript (unser Typoscript beinhaltet das Einbinden der Javascript Bibliotheken und unserer CSS Datei)
* (Das Einbinden muss hier in der ext_tables.php stattfinden)
*/
t3lib_extMgm::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'ncfluid include js libs');
$ePath = t3lib_extMgm::extPath($_EXTKEY);
$TCA['tx_ncfluid_domain_model_table'] = Array (
'ctrl' => array (
'title' => 'tx_ncfluid_domain_model_table',
'label' => 'table',
'tstamp' => 'tstamp',
'crdate' => 'crdate',
'delete' => 'deleted',
'enablecolumns' => Array( 'disabled' => 'hidden' ),
'dynamicConfigFile' => $ePath.'Configuration/TCA/Table.php',
'iconfile' => $ePath.'Resources/Public/Icons/tx_ncfluid_domain_model_table.png'
)
);
/**
* mit Hilfe von Extbase die Extension zur Auswahl als Frontendplugin registrieren
* paralell muss ext_localconf.php:Tx_Extbase_Utility_Extension::configurePlugin vorhanden sein
* (Das Einbinden muss hier in der ext_tables.php stattfinden)
*/
Tx_Extbase_Utility_Extension::registerPlugin(
// Name der Extension
$_EXTKEY,
// eindeutiger Name des Plugins
'Pi1',
// Text, der in der Selectbox erscheinen soll
'ncfluid datatables'
);
?>
Notizen
- statische template "Fluid - Default Ajax Configuration" einbinde wird u.a. jquery ins template eingebunden
Probleme
Fatal error: Call to a member function replaceObject() on a non-object in typo3/sysext/extbase/Classes/Persistence/Repository.php on line 222
folgendes löst das Problem, weiß aber nicht genau ob das nicht anders besser geht:
Tx_Ncfluid_Domain_Repository_TableRepository wird nicht über initializeAction() genutzt, sondern extra noch mal geladen
class Tx_Ncfluid_Controller_TableController
extends Tx_Extbase_MVC_Controller_ActionController {
// ....
public function updateAction(Tx_Ncfluid_Domain_Model_Table $tablerow) {
$objectManager = t3lib_div::makeInstance('Tx_Extbase_Object_ObjectManager');
$tableRepository = $objectManager->get('Tx_Ncfluid_Domain_Repository_TableRepository');
$tableRepository->update($tablerow);
// alter code führte zur Fehlermeldung;
// @see initializeAction -- $this->tableRepository =& t3lib_div::makeInstance('Tx_Ncfluid_Domain_Repository_TableRepository');
// $this->tableRepository->update($tablerow);
// $this->flashMessageContainer->add('Your tablerow was updated.');
$this->redirect('index');
}
// ....