Typo3 Extensions entwickeln @deprecated

Typo3

Achtung: basiert auf Klasse pibase @deprecated since 6.0 will be removed in 7.0 !!!! @new: Typo3 Flow

• um sich das Grundgerüst einer Extension erstellen zu lassen bitte hier schauen Typo3 kickstarter Extension
• Umsetzung mit den neuen extensions fluid und extbase !!!
  • Typo3 Extension jquery.dataTables

Grundlagen

Klassifikation von Typo3 Extensions

• Front-End-Plug-In (pi1, pi2, ..)
• Backend-Modul (mod1, mod2, ..)
• XClass (passender Ordner)
  • "Nahezu jede Extension- und auch viele Core- Dateien bieten die Möglichkeit über XCLASS nicht die eigentlichen Skripte auszuführen sondern alternative Skripte – somit kann eine komplett andere Datei als die eigentlich vorbestimmte verwendet werden." (Alex Kellner)
• Service (sv1, sv2,..
• Hook (lib, o.ä.)
  • "Während man also über die XCLASS ganze Dateien ersetzen kann, ist ein Hook “nur” dazu gedacht, einen definierten Bereich zu manipulieren" (Alex Kellner)

• TSConfig (ext_typoscript_setup.txt)
• Fassaden zu anderen Projekten (nicht GPL)

• Quellen
  • Hook (Informatik)
  • Alles über Hooks

Beispiel mit template, css und Sprachdatei

Template mit html

pi1/templates/template.html

 <!-- ###SUBPART1### begin -->
 	<div ID="VAR1">###VAR1###</div> 
 	<div ID="SUBPART2_MARKER">###SUBPART2_MARKER###</div>
 	<div ID="VAR_CONF">###VAR_CONF###</div> 
 <!-- ###SUBPART1### end -->
 
 <!-- ###SUBPART2### begin -->
 	<div ID="VAR2">###VAR2###</div>
 <!-- ###SUBPART2### end -->

Design mit css

pi1/template.css

 div#VAR1 {
 	font-size: 12px;	color:red;
 }
 div#VAR2 {
 	font-size: 14px;	color:blue;
 }
 div#VAR_CONF{
 	font-size: 16px;	color:green;
 }

Lokalisierung mit xml

pi1/locallang.xml

 <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <T3locallang>
 	<meta type="array">
 		<type>module</type>
 		<description>Language labels for plugin &quot;tx_testit_pi1&quot;</description>
 	</meta>
 	<data type="array">
 		<languageKey index="default" type="array">
 			<label index="VAR1">text for var 1 in english</label>
 			<label index="VAR2">text for var 2 in english</label>
 		</languageKey>
 		<languageKey index="de" type="array">
 			<label index="VAR1">Text für var 1 in deutsch</label>
 			<label index="VAR2">Text für var 2 in deutsch</label>
 		</languageKey>
 	</data>
 </T3locallang>

Konfiguration mit Flexforms

veraltet besser hier schauen TYPO3.CMS 6.2 Extension entwickeln - Backend#Konfiguration im Backend_f.C3.BCr_ein_Frontend_Plugin_mit_flexform

pi/flexform_ds_pi1.xml

 <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <T3DataStructure>
    <sheets>
        <Konfigurationsformular>
            <ROOT>
                <TCEforms>
                    <sheetTitle>LLL:EXT:testit/locallang_db.xml:tt_content.list_type_pi1</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <VAR_CONF_Formular>
                        <TCEforms>
                            <label>LLL:EXT:testit/locallang_db.xml:VAR_CONF</label>
                            <config>
                                <type>input</type>
                                <size>100</size>
                            </config>
                        </TCEforms> 
                    </VAR_CONF_Formular>
                 </el>
             </ROOT>
         </Konfigurationsformular>
     </sheets>
 </T3DataStructure>

locallang_db.xml

 <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <T3locallang>
 	<meta type="array">
 		<type>database</type>
 		<description>Language labels for database tables/fields belonging to extension 'testit'</description>
 	</meta>
 	<data type="array">
 		<languageKey index="default" type="array">
 			<label index="tt_content.list_type_pi1">testit title</label>
 			<label index="VAR_CONF">please set a value for the frontend</label>
 		</languageKey>
 		<languageKey index="de" type="array">
 			<label index="tt_content.list_type_pi1">testit Title</label>
 			<label index="VAR_CONF">bitte einen Wert fürs Frontend setzen</label>
 		</languageKey>
 	</data>
 </T3locallang>

ext_tables.php folgende Zeilen hinzufügen

<?
 // ....
 $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform';
 t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/pi1/flexform_ds_pi1.xml');
?>

Software mit php

pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)

<?php
 class tx_testit_pi1 extends tslib_pibase {
 	// ....
 	public function main($content, array $conf) {
 		// speichern der Konfiguration 
 		$this->conf = $conf;
 		// POST GET wird geladen
 		$this->pi_setPiVarDefaults();
 		// Sprachdaten werden geladen
 		$this->pi_loadLL(); 	
 			
 		// Aufruf des Beispiels  
 		$content .= $this->example_Template_Css_Lang(); 
 		
 		return $this->pi_wrapInBaseClass($content);
 	}
 	public function example_Template_Css_Lang() {
 		// css wird included 
 		$GLOBALS['TSFE']->pSetup['includeCSS.'][$this->extKey] = 'EXT:' . $this->extKey . '/pi1/css/template.css';
  
 		// Template wird included
 		$this->template = $this->cObj->fileResource('EXT:' . $this->extKey . '/pi1/templates/template.html');
 
 		// Subparts werden extrahiert
 		$tmpl_SUBPART1 = $this->cObj->getSubpart($this->template, '###SUBPART1###');
 		$tmpl_SUBPART2 = $this->cObj->getSubpart($this->template, '###SUBPART2###');
 
 		//   Flexform laden
 		$this->pi_initPIflexForm();
 
 		// Werte werden für die Marker gesetzt
 		$array_markers = array(
 			'###VAR1###' => $this->pi_getLL('VAR1'),
 			'###VAR2###' => $this->pi_getLL('VAR2'),
 			'###VAR_CONF###' => $this->pi_getFFvalue($this->cObj->data['pi_flexform'], "VAR_CONF_Formular", "Konfigurationsformular"),
 		);
 
 		// der Subpart 2 wird ins SUBPART2_MARKER gesetzt
 		$array_markers['###SUBPART2_MARKER###'] = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART2, $array_markers);
 
 		// 
 		$content = $this->cObj->substituteMarkerArrayCached($tmpl_SUBPART1, $array_markers);
 
 		return $content;
 	}
 	// ....
 }
?>

Dokumentation

offizielle Typo3-Extension-Dokumentations-Vorlage runterladen und manual.swx ins doc Verzeichniss

jquery

3 Wege jquery einzubinden

• über die extension t3jquery
• download der jquery Bibliothek
• direkte Einbindung über code.jquery.com (Beispiel: #Einbindung der jquery Bibliothek inklusive kleines jquery Beispiel)

Einbindung der jquery Bibliothek inklusive kleines jquery Beispiel

Das Beispiel führt dazu das h1 html-Tags nicht angezeigt werden!

Einbinden der Bibliothek über code.jquery.com im typoscript template setup

Seiten template:setup

# einbinden der jquery Bibliothek
page.includeJSFooter.jquery.external=1
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example.js

fileadmin/example.js

 jQuery(document).ready(function($){
 	$('h1').hide();
 })

dataTables

• datatables.net

Seiten template:setup

# einbinden der jquery Bibliothek
page.includeJSFooter.jquery.external=1
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js

# einbinden der dataTables Bibliothek
page.includeJSFooter.dataTables.external = 1
page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example.js

fileadmin/example.js

$(document).ready(function() {
    $('#dieTabelle').dataTable();
} );

pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse)

<?php
 class tx_testit_pi1 extends tslib_pibase {
 	// ....
 	public function main($content, array $conf) {
 		// speichern der Konfiguration 
 		$this->conf = $conf;
 		// POST GET wird geladen
 		$this->pi_setPiVarDefaults();
 		// Sprachdaten werden geladen
 		$this->pi_loadLL(); 	
 			
 		// Aufruf des Beispiels  
 		$content .= $this->example_Datatables(); 
 		
 		return $this->pi_wrapInBaseClass($content);
 	}
 	public function example_Datatables() {
		$content = '
			<table id="dieTabelle" border="1">
				<thead>
					<tr>
						<th>Spalte 1</th>
						<th>Spalte 2</th>
						<th>Spalte 3</th>
					</tr>
				</thead>
				<tbody>
					<tr id="7">
						<td>Zeile 1 Spalte 1</td>
						<td>Zeile 1 Spalte 2</td>
						<td>Zeile 1 Spalte 3</td>
					</tr>
					<tr id="8">
						<td>Zeile 2 Spalte 1</td>
						<td>Zeile 2 Spalte 2</td>
						<td>Zeile 2 Spalte 3</td>
					</tr>
					<tr id="9">
						<td>Zeile 3 Spalte 1</td>
						<td>Zeile 3 Spalte 2</td>
						<td>Zeile 3 Spalte 3</td>
					</tr>
					<tr id="1">
						<td>Zeile 4 Spalte 1</td>
						<td>Zeile 4 Spalte 2</td>
						<td>Zeile 4 Spalte 3</td>
					</tr>
				</tbody>
		   </table>		
		';
		return $content;
 	}
 	// ....
 }
?>

jquery-datatables-editable

cd fileadmin
svn checkout http://jquery-datatables-editable.googlecode.com/svn/trunk/ jquery-datatables-editable

im jquery-datatables-editable-read-only Ordner befindet sich ausführliche Beispiele in der index.html

# einbinden der jquery Bibliothek
page.includeJSFooter.jquery.external=1
page.includeJSFooter.jquery=http://code.jquery.com/jquery-1.9.1.min.js

# einbinden der dataTables Bibliothek
page.includeJSFooter.dataTables.external = 1
page.includeJSFooter.dataTables = http://www.datatables.net/download/build/jquery.dataTables.js

# Achtung es muß wohl noch mehr eingezogen werden, ansonsten funktionert hinzufügen und löschen von reihen nicht!
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

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example_datatables_editable.js

oder

# Achtung Reihenfolge ist wichtig
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

# einbinden des Beispielskripts
page.includeJSFooter.myjavascript=fileadmin/example_datatables_editable.js

typo3conf/ext/testit/pi1/UpdateData.php

<?php
	//print_r(array('$_GET' => $_GET, '$_POST' => $_POST));
	$editedValue = $_POST['value'];
	// hier käme dann eigentlich das Datenbank update hin
	echo $editedValue;
?>

fileadmin/example_datatables_editable.js

$(document).ready( function () {
	$('#dieTabelle').dataTable().makeEditable({
		sUpdateURL: "typo3conf/ext/testit/pi1/UpdateData.php"
	});
});

pi1/class.tx_testit_pi1.php (bzw. die Hauptklasse) eins zu eins wie Typo3_Extensions_entwickeln#Software_mit_php

jqueryUI

• jqueryui.com
• wikipedia Artikel

http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css

page.includeJSFooter.jQueryUI = http://code.jquery.com/ui/1.10.1/jquery-ui.js
page.includeJSFooter.jQueryUI.external = 1

Quellen

• Artikelserie: Typo3: Extension selbst erstellen
  • Kickstarter, Grundlagen & Hallo Welt – Typo3: Extension selbst erstellen
  • Formulare, Parameter und Eingaben - Typo3: Extension selbst erstellen
  • Templates, CSS und TypoScript - Typo3: Extension selbst erstellen
  • Lokalisierung und FlexForms - Typo3: Extension selbst erstellen
  • Planung, Dokumentation und Veröffentlichung – Typo3: Extension selbst erstellen
• jQuery in Typo3 benutzen
• Datenbankabfragen in Extensions
• eID Mechanismus
• Typo3 Extension Programmierung

Probleme

Core: Error handler (FE): PHP Warning: mysql_real_escape_string()

Core: Error handler (FE): PHP Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in typo3_src/t3lib/class.t3lib_db.php line 730

manchmal hat mensch einfach nur vergessen die Datenbank zu connecten, einfach vor der Datenbankaktion folgende Zeile

$GLOBALS['TYPO3_DB']->connectDB();