SlideShare ist ein Scribd-Unternehmen logo
TypoScript
               von Anfang an
                Spaß an und mit TypoScript

                   Patrick Lobacher

                                         Inspiring people to
TypoScript - von Anfang an               share
Zitat Kaspar Skårhøj
           TypoScript was based on the clear whish
           from me, that TYPO3 had to be flexible
           enough for any website I could dream
           up.

           (Oktober 2007)



                                         Inspiring people to
TypoScript - von Anfang an               share
Vorurteile über TypoScript
           TypoScript ist kompliziert
           TypoScript ist unlogisch
           TypoScript brauche ich nicht wirklich
           TypoScript ist etwas für Programmierer
           TypoScript ist ein notwendiges Übel


                                           Inspiring people to
TypoScript - von Anfang an                 share
Vorurteile über TypoScript
                                            Stimmt ja gar
                                                nicht!!
           TypoScript ist kompliziert      (naja, zumindest
                                            nicht alles...)
           TypoScript ist unlogisch
           TypoScript brauche ich nicht wirklich
           TypoScript ist etwas für Programmierer
           TypoScript ist ein notwendiges Übel


                                           Inspiring people to
TypoScript - von Anfang an                 share
Die Wahrheit dagegen ist
           TypoScript ist extrem leistungsfähig
           TypoScript ist relativ einfach zu lernen
           Für TypoScript werden keinerlei
           Programmierkenntnisse vorausgesetzt
           TypoScript ist genau DER Unterschied zu anderen CMS
           wie Joomla oder Drupal
           TypoScript kann sogar Spaß machen


                                                      Inspiring people to
TypoScript - von Anfang an                            share
Wo wird TypoScript
    genau verwendet?
           Start einer gerade eben installierten
           TYPO3-Instanz:




           Es fehlen offensichtlich Seiten...


                                            Inspiring people to
TypoScript - von Anfang an                  share
Wo wird TypoScript
    genau verwendet?
           Nach dem Anlegen der Seiten:




           Missverständliche Meldung!
           Es gibt TypoScript-Templates und
           HTML-Templates

                                          Inspiring people to
TypoScript - von Anfang an                share
Wo wird TypoScript
    genau verwendet?
           Anlegen eines „Templates“ im Backend




                                        Inspiring people to
TypoScript - von Anfang an              share
Wo wird TypoScript
    genau verwendet?
           Template-Tools




                             Inspiring people to
TypoScript - von Anfang an   share
Wo wird TypoScript
    genau verwendet?
           Inhalt des Feldes „Setup“:
           # Default PAGE object:
           page = PAGE
           page.10 = TEXT
           page.10.value = HELLO WORLD!

           Ausgabe der Seite ist „HELLO WORLD!“

                                          Inspiring people to
TypoScript - von Anfang an                share
TypoScript-Templates
           Ein TypoScript-Template kann einer Seite
           zugeordnet werden und wird nach unten
           vererbt (kaskadieren)
           Eine weiteres TypoScript-Template kann
           ein anderes überschreiben
           Extensions können auch eigene
           TypoScript-Templates einbringen

                                         Inspiring people to
TypoScript - von Anfang an               share
Die Definition von TypoScript
           TypoScript bildet mithilfe von Plaintext
           und einer gegebenen Syntax
           hierarchische Informationen in ein
           multidimensionales assoziative PHP-
           Array ab.




                                           Inspiring people to
TypoScript - von Anfang an                 share
Die Definition von TypoScript
           TypoScript bildet mithilfe von Plaintext
           und einer gegebenen Syntax
           hierarchische Informationen in ein
           multidimensionales assoziatives PHP-
           Array ab.




                                           Inspiring people to
TypoScript - von Anfang an                 share
Allgemeine Syntax
           Eine Standard-Codezeile sieht wie folgt
           aus :

           objektpfad operator wert

           Ausnahme: Includes und Conditions


                                          Inspiring people to
TypoScript - von Anfang an                share
Allgemeine Syntax
           Im Objektpfad werden die einzelnen
           Bestandteile (sofern vorhanden) mittels
           Punkt getrennt. Dies stellt die Hierachie dar.
           Beispiele:
           objekt1 = wert1
           objekt2.eigenschaft2 = wert2
           objekt3.eigenschaft3.eigenschaft3 = wert3
           objekt4.eigenschaft4.objekt4 = wert4


                                                   Inspiring people to
TypoScript - von Anfang an                         share
Assoziatives Array?
      INHALT = CONTENT                              INHALT = CONTENT
      INHALT {                                      INHALT.table = tt_content
        table = tt_content                          INHALT.select.orderBy = sorting
        select.orderBy = sorting                    INHALT.select.where = colPos = 1
        select.where = colPos = 1                   INHALT.select.languageField = sys_language_uid
        select.languageField =
            sys_language_uid
      }


          $GLOBALS['TSFE'][‘INHALT‘] = ‘CONTENT‘;
          $GLOBALS['TSFE'][‘INHALT.‘][‘table‘] = tt_content;
          $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘orderBy‘] = ‘sorting‘;
          $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘] = ‘colPos = 1‘;
          $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘][‘languageField‘] = ‘sys_language_uid‘;


                                                                            Inspiring people to
TypoScript - von Anfang an                                                  share
Assoziative
    multidimensionale Variablen




                             Inspiring people to
TypoScript - von Anfang an   share
Was macht TYPO3 damit?
     $GLOBALS['TSFE'][‘INHALT‘] = ‘CONTENT‘;
     $GLOBALS['TSFE'][‘INHALT.‘][‘table‘] = tt_content;
     $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘orderBy‘] = ‘sorting‘;
     $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘] = ‘colPos = 1‘;
     $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘][‘languageField‘] = ‘sys_language_uid‘;




     function CONTENT($conf) {
       $originalRec = $GLOBALS['TSFE']->currentRecord;
       if ($conf['table']=='pages' || substr($conf['table'],0,3)=='tt_' ||
           substr($conf['table'],0,3)=='fe_' || substr($conf['table'],0,3)=='tx_' ||
           substr($conf['table'],0,4)=='ttx_' || substr($conf['table'],0,5)=='user_') {
       do {
          $res = $this->exec_getQuery($conf['table'],$conf['select.']);
          …

                                                                                  Inspiring people to
TypoScript - von Anfang an                                                        share
Konsequenzen
           TypoScript ist keine Sprache, es dient der
           Konfiguration
           Unbekannte TypoScript-Teile werden schlicht
           ignoriert => keine Fehlermeldung
           Durch TypoScript wird PHP-Code ausgeführt
           Der zuletzt gesetzte Wert ist gültig (manchmal
           schwierig herauszufinden)


                                                   Inspiring people to
TypoScript - von Anfang an                         share
Interne TypoScript-
    Speicherung
           Die Variable $GLOBALS[‘TSFE‘] enthält die
           komplette TypoScript-Konfiguration
           Ausgabe durch
           print_r($GLOBALS[‘TSFE‘] );
           Beschreiben ist ebenfalls möglich, z.B. :
           $GLOBALS['TSFE']->pSetup['bodyTagAdd'] =
           'onload="load()" onunload="GUnload()';



                                                  Inspiring people to
TypoScript - von Anfang an                        share
Verarbeitung von TypoScript


     TYPO3-Backend                    TYPO3-Frontend
                         TypoScript
        INHALTE                       DARSTELLUNG
                           TSFE
         „Was...“       „TypoScript      „Wie...“
                         FrontEnd“



                                          Inspiring people to
TypoScript - von Anfang an                share
Syntax - Operatoren
           objektpfad operator wert
              = Zuweisen     [page = PAGE]
              := Modifikation [page.10 := appendString(„Test“)]
              > Löschen      [page.10 >]
              < Kopieren     [ACT < .NO]
              =< Referenz


                                                   Inspiring people to
TypoScript - von Anfang an                         share
Syntax - Kommentare
           Es gibt mehrere Möglichkeiten, Kommentare
           in den Code zu bringen

           # Das ist ein Kommentar
           // Das ist auch ein Kommentar
           / Es ist sogar nur ein Slash notwenig
           /* Und mehrzeilige Kommentare
           sind auch möglich
           */

                                               Inspiring people to
TypoScript - von Anfang an                     share
Syntax - Ausklammern
             Verkürzt den Code, erhöht die
             Übersichtlichkeit
             Lediglich andere Schreibweise
                                                        INHALT = CONTENT
       INHALT = CONTENT                                 INHALT {
       INHALT.table = tt_content                          table = tt_content
       INHALT.select.orderBy = sorting                    select.orderBy = sorting
       INHALT.select.where = colPos = 1                   select.where = colPos = 1
       INHALT.select.languageField = sys_language_uid     select.languageField =
                                                              sys_language_uid
                                                        }

                                                          Inspiring people to
TypoScript - von Anfang an                                share
Syntax - Wraps |
           Ein Wrap legt sich wie eine Hülle um einen
           Wert

           page.10 = TEXT
           page.10.value = TYPO3camp
           page.10.wrap = <h3>|</h3>
           # Resultat ist nun
           # <h3>TYPO3camp</h3>

                                            Inspiring people to
TypoScript - von Anfang an                  share
Top Level Objekte (TLO)
           TLOs sind vordefiniert und werden von
           TypoScript zur Verfügung gestellt
           TLO übernehmen die Konfiguration
           Die bekanntesten TLOs sind:
              CONFIG (Konfiguration des TYPO3-Systems)
              PAGE (Konfiguration und Darstellung einer Seite)


                                                 Inspiring people to
TypoScript - von Anfang an                       share
TLO - PAGE
           Inhalt des Feldes „Setup“:
           # Default PAGE object:
           page = PAGE
           page.10 = TEXT
           page.10.value = HELLO WORLD!
           Die möglichen Eigenschaften des TLO
           PAGE müssen nachgesehen werden

                                          Inspiring people to
TypoScript - von Anfang an                share
Gibt es eine Übersicht?
           TypoScript
           Reference
           http://tsref.de
           Vorteil: Aktuell
           Nachteil: Englisch
           und teilweise etwas
           unübersichtlich

                                 Inspiring people to
TypoScript - von Anfang an       share
Gibt es eine Übersicht?
           TypoScript         ACHTUNG!
           Kurz&Gut          Unverschämte
                             Eigenwerbung :-)
           Vorteil: Deutsch,
           Übersichtlich, enthält TS der
           wichtigsten Extensions
           Nachteil: Naturgemäß
           weniger aktuell

                                                Inspiring people to
TypoScript - von Anfang an                      share
Eigenschaften des TLO PAGE




                             Inspiring people to
TypoScript - von Anfang an   share
cObject (cObj / Content Objekte)
           Bringen die Inhalte ins System
           Die bekanntesten cObjects sind:
              CARRAY (Content-Array, 1,2,3,4 bei PAGE-TLO)
              CONTENT (liest Inhalte aus der Datenbank)
              HTML / TEXT (Texte)
              FORM (Formulare)
              IMAGE / IMG_RESOURCE (Bilder)
              TEMPLATE (HTML-Templates)

                                                   Inspiring people to
TypoScript - von Anfang an                         share
cObject - TEXT
           Inhalt des Feldes „Setup“:
           # Default PAGE object:
           page = PAGE
           page.10 = TEXT
           page.10.value = HELLO WORLD!
           Die möglichen Eigenschaften des cObject
           TEXT müssen nachgesehen werden

                                          Inspiring people to
TypoScript - von Anfang an                share
Eigenschaften des cObjects TEXT




                             Inspiring people to
TypoScript - von Anfang an   share
Beispiel: Inhalte ausgeben
     page = PAGE
     page {
       typenum = 0
       10 = CONTENT
       10 {
          table = tt_content
          select.orderBy = sorting
          select.where = colPos = 0
          select.languageField = sys_language_uid
          wrap = <div id=“content>|</div>
        }
     }

                                                    Inspiring people to
TypoScript - von Anfang an                          share
Beispiel: Marker füllen
     page = PAGE
     page {
       typenum = 0
       meta.author = Patrick Lobacher
       stylesheet = fileadmin/typo3camp.css
       10 = TEMPLATE
       10.template = FILE
       10.template.file = fileadmin/typo3camp.html
       10.workOnSubpart = DOCUMENT
       10.marks {
         MENU < lib.mainmenu
       }
     }
                                                   Inspiring people to
TypoScript - von Anfang an                         share
Beispiel: Marker füllen - Template
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
     <head>
         <title>TYPO3camp</title>
     </head>
     <body>
     <!-- ###DOCUMENT### begin -->
     <div id="MENU">
         ###MAINMENU###
     </div>
     <!-- ###DOCUMENT### end -->
     </body>
     </html>


                                                      Inspiring people to
TypoScript - von Anfang an                            share
Beispiel: Menü
     lib.mainmenu = HMENU
     lib.mainmenu {
        1 = TMENU
        1.wrap = <ul class=“ebene1“>|</ul>
        1.NO.allWrap = <li>|</li>
        1.ACT = 1
        1.ACT.wrapItemAndSub = <li>|</li>
        2 < .1
        2.wrap = <ul class=“ebene2“>|</ul>
        3 < .2
        3.wrap = <ul class=“ebene3“>|</ul>
     }


                                             Inspiring people to
TypoScript - von Anfang an                   share
Beispiel: Menü -Ausgabe
     <ul class=“ebene1“>            Menüpunkt 1
       <li>Menüpunkt 1</li>         Menüpunkt 2
       <li>Menüpunkt 2               Menüpunkt 2-1
         <ul class=“ebene2“>         Menüpunkt 2-2
           <li>Menüpunkt 2-1</li>   Menüpunkt 3
           <li>Menüpunkt 2-2</li>
         </ul>
       <li>Menüpunkt 3</li>
     </ul>




                                          Inspiring people to
TypoScript - von Anfang an                share
Weitere Informationen:
           TypoScript Reference TSref
           http://www.tsref.de

           TypoScript in 45 Minuten (DocTeam)
           http://wiki.typo3.org/index.php/De:TSref/45MinutesTypoScript

           Übersetzung der TSref
           http://wiki.typo3.org/De:TSref

           TypoScript Videotraining (video2brain)

                                                         Inspiring people to
TypoScript - von Anfang an                               share
Vielen Dank!
                             Fragen???




                                         Inspiring people to
TypoScript - von Anfang an               share

Weitere ähnliche Inhalte

Mehr von die.agilen GmbH

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
die.agilen GmbH
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
die.agilen GmbH
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
die.agilen GmbH
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
die.agilen GmbH
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
die.agilen GmbH
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
die.agilen GmbH
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
die.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
die.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
die.agilen GmbH
 
WTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design ThinkingWTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design Thinking
die.agilen GmbH
 
Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015
die.agilen GmbH
 

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
 
WTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design ThinkingWTC15 - Innovationsmotor Design Thinking
WTC15 - Innovationsmotor Design Thinking
 
Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015Medienhaus pecha-kucha - T3CON 2015
Medienhaus pecha-kucha - T3CON 2015
 

TypoScript für Anfänger

  • 1. TypoScript von Anfang an Spaß an und mit TypoScript Patrick Lobacher Inspiring people to TypoScript - von Anfang an share
  • 2. Zitat Kaspar Skårhøj TypoScript was based on the clear whish from me, that TYPO3 had to be flexible enough for any website I could dream up. (Oktober 2007) Inspiring people to TypoScript - von Anfang an share
  • 3. Vorurteile über TypoScript TypoScript ist kompliziert TypoScript ist unlogisch TypoScript brauche ich nicht wirklich TypoScript ist etwas für Programmierer TypoScript ist ein notwendiges Übel Inspiring people to TypoScript - von Anfang an share
  • 4. Vorurteile über TypoScript Stimmt ja gar nicht!! TypoScript ist kompliziert (naja, zumindest nicht alles...) TypoScript ist unlogisch TypoScript brauche ich nicht wirklich TypoScript ist etwas für Programmierer TypoScript ist ein notwendiges Übel Inspiring people to TypoScript - von Anfang an share
  • 5. Die Wahrheit dagegen ist TypoScript ist extrem leistungsfähig TypoScript ist relativ einfach zu lernen Für TypoScript werden keinerlei Programmierkenntnisse vorausgesetzt TypoScript ist genau DER Unterschied zu anderen CMS wie Joomla oder Drupal TypoScript kann sogar Spaß machen Inspiring people to TypoScript - von Anfang an share
  • 6. Wo wird TypoScript genau verwendet? Start einer gerade eben installierten TYPO3-Instanz: Es fehlen offensichtlich Seiten... Inspiring people to TypoScript - von Anfang an share
  • 7. Wo wird TypoScript genau verwendet? Nach dem Anlegen der Seiten: Missverständliche Meldung! Es gibt TypoScript-Templates und HTML-Templates Inspiring people to TypoScript - von Anfang an share
  • 8. Wo wird TypoScript genau verwendet? Anlegen eines „Templates“ im Backend Inspiring people to TypoScript - von Anfang an share
  • 9. Wo wird TypoScript genau verwendet? Template-Tools Inspiring people to TypoScript - von Anfang an share
  • 10. Wo wird TypoScript genau verwendet? Inhalt des Feldes „Setup“: # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD! Ausgabe der Seite ist „HELLO WORLD!“ Inspiring people to TypoScript - von Anfang an share
  • 11. TypoScript-Templates Ein TypoScript-Template kann einer Seite zugeordnet werden und wird nach unten vererbt (kaskadieren) Eine weiteres TypoScript-Template kann ein anderes überschreiben Extensions können auch eigene TypoScript-Templates einbringen Inspiring people to TypoScript - von Anfang an share
  • 12. Die Definition von TypoScript TypoScript bildet mithilfe von Plaintext und einer gegebenen Syntax hierarchische Informationen in ein multidimensionales assoziative PHP- Array ab. Inspiring people to TypoScript - von Anfang an share
  • 13. Die Definition von TypoScript TypoScript bildet mithilfe von Plaintext und einer gegebenen Syntax hierarchische Informationen in ein multidimensionales assoziatives PHP- Array ab. Inspiring people to TypoScript - von Anfang an share
  • 14. Allgemeine Syntax Eine Standard-Codezeile sieht wie folgt aus : objektpfad operator wert Ausnahme: Includes und Conditions Inspiring people to TypoScript - von Anfang an share
  • 15. Allgemeine Syntax Im Objektpfad werden die einzelnen Bestandteile (sofern vorhanden) mittels Punkt getrennt. Dies stellt die Hierachie dar. Beispiele: objekt1 = wert1 objekt2.eigenschaft2 = wert2 objekt3.eigenschaft3.eigenschaft3 = wert3 objekt4.eigenschaft4.objekt4 = wert4 Inspiring people to TypoScript - von Anfang an share
  • 16. Assoziatives Array? INHALT = CONTENT INHALT = CONTENT INHALT { INHALT.table = tt_content table = tt_content INHALT.select.orderBy = sorting select.orderBy = sorting INHALT.select.where = colPos = 1 select.where = colPos = 1 INHALT.select.languageField = sys_language_uid select.languageField = sys_language_uid } $GLOBALS['TSFE'][‘INHALT‘] = ‘CONTENT‘; $GLOBALS['TSFE'][‘INHALT.‘][‘table‘] = tt_content; $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘orderBy‘] = ‘sorting‘; $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘] = ‘colPos = 1‘; $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘][‘languageField‘] = ‘sys_language_uid‘; Inspiring people to TypoScript - von Anfang an share
  • 17. Assoziative multidimensionale Variablen Inspiring people to TypoScript - von Anfang an share
  • 18. Was macht TYPO3 damit? $GLOBALS['TSFE'][‘INHALT‘] = ‘CONTENT‘; $GLOBALS['TSFE'][‘INHALT.‘][‘table‘] = tt_content; $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘orderBy‘] = ‘sorting‘; $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘] = ‘colPos = 1‘; $GLOBALS['TSFE'][‘INHALT.‘][‘select.‘][‘where‘][‘languageField‘] = ‘sys_language_uid‘; function CONTENT($conf) { $originalRec = $GLOBALS['TSFE']->currentRecord; if ($conf['table']=='pages' || substr($conf['table'],0,3)=='tt_' || substr($conf['table'],0,3)=='fe_' || substr($conf['table'],0,3)=='tx_' || substr($conf['table'],0,4)=='ttx_' || substr($conf['table'],0,5)=='user_') { do { $res = $this->exec_getQuery($conf['table'],$conf['select.']); … Inspiring people to TypoScript - von Anfang an share
  • 19. Konsequenzen TypoScript ist keine Sprache, es dient der Konfiguration Unbekannte TypoScript-Teile werden schlicht ignoriert => keine Fehlermeldung Durch TypoScript wird PHP-Code ausgeführt Der zuletzt gesetzte Wert ist gültig (manchmal schwierig herauszufinden) Inspiring people to TypoScript - von Anfang an share
  • 20. Interne TypoScript- Speicherung Die Variable $GLOBALS[‘TSFE‘] enthält die komplette TypoScript-Konfiguration Ausgabe durch print_r($GLOBALS[‘TSFE‘] ); Beschreiben ist ebenfalls möglich, z.B. : $GLOBALS['TSFE']->pSetup['bodyTagAdd'] = 'onload="load()" onunload="GUnload()'; Inspiring people to TypoScript - von Anfang an share
  • 21. Verarbeitung von TypoScript TYPO3-Backend TYPO3-Frontend TypoScript INHALTE DARSTELLUNG TSFE „Was...“ „TypoScript „Wie...“ FrontEnd“ Inspiring people to TypoScript - von Anfang an share
  • 22. Syntax - Operatoren objektpfad operator wert = Zuweisen [page = PAGE] := Modifikation [page.10 := appendString(„Test“)] > Löschen [page.10 >] < Kopieren [ACT < .NO] =< Referenz Inspiring people to TypoScript - von Anfang an share
  • 23. Syntax - Kommentare Es gibt mehrere Möglichkeiten, Kommentare in den Code zu bringen # Das ist ein Kommentar // Das ist auch ein Kommentar / Es ist sogar nur ein Slash notwenig /* Und mehrzeilige Kommentare sind auch möglich */ Inspiring people to TypoScript - von Anfang an share
  • 24. Syntax - Ausklammern Verkürzt den Code, erhöht die Übersichtlichkeit Lediglich andere Schreibweise INHALT = CONTENT INHALT = CONTENT INHALT { INHALT.table = tt_content table = tt_content INHALT.select.orderBy = sorting select.orderBy = sorting INHALT.select.where = colPos = 1 select.where = colPos = 1 INHALT.select.languageField = sys_language_uid select.languageField = sys_language_uid } Inspiring people to TypoScript - von Anfang an share
  • 25. Syntax - Wraps | Ein Wrap legt sich wie eine Hülle um einen Wert page.10 = TEXT page.10.value = TYPO3camp page.10.wrap = <h3>|</h3> # Resultat ist nun # <h3>TYPO3camp</h3> Inspiring people to TypoScript - von Anfang an share
  • 26. Top Level Objekte (TLO) TLOs sind vordefiniert und werden von TypoScript zur Verfügung gestellt TLO übernehmen die Konfiguration Die bekanntesten TLOs sind: CONFIG (Konfiguration des TYPO3-Systems) PAGE (Konfiguration und Darstellung einer Seite) Inspiring people to TypoScript - von Anfang an share
  • 27. TLO - PAGE Inhalt des Feldes „Setup“: # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD! Die möglichen Eigenschaften des TLO PAGE müssen nachgesehen werden Inspiring people to TypoScript - von Anfang an share
  • 28. Gibt es eine Übersicht? TypoScript Reference http://tsref.de Vorteil: Aktuell Nachteil: Englisch und teilweise etwas unübersichtlich Inspiring people to TypoScript - von Anfang an share
  • 29. Gibt es eine Übersicht? TypoScript ACHTUNG! Kurz&Gut Unverschämte Eigenwerbung :-) Vorteil: Deutsch, Übersichtlich, enthält TS der wichtigsten Extensions Nachteil: Naturgemäß weniger aktuell Inspiring people to TypoScript - von Anfang an share
  • 30. Eigenschaften des TLO PAGE Inspiring people to TypoScript - von Anfang an share
  • 31. cObject (cObj / Content Objekte) Bringen die Inhalte ins System Die bekanntesten cObjects sind: CARRAY (Content-Array, 1,2,3,4 bei PAGE-TLO) CONTENT (liest Inhalte aus der Datenbank) HTML / TEXT (Texte) FORM (Formulare) IMAGE / IMG_RESOURCE (Bilder) TEMPLATE (HTML-Templates) Inspiring people to TypoScript - von Anfang an share
  • 32. cObject - TEXT Inhalt des Feldes „Setup“: # Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD! Die möglichen Eigenschaften des cObject TEXT müssen nachgesehen werden Inspiring people to TypoScript - von Anfang an share
  • 33. Eigenschaften des cObjects TEXT Inspiring people to TypoScript - von Anfang an share
  • 34. Beispiel: Inhalte ausgeben page = PAGE page { typenum = 0 10 = CONTENT 10 { table = tt_content select.orderBy = sorting select.where = colPos = 0 select.languageField = sys_language_uid wrap = <div id=“content>|</div> } } Inspiring people to TypoScript - von Anfang an share
  • 35. Beispiel: Marker füllen page = PAGE page { typenum = 0 meta.author = Patrick Lobacher stylesheet = fileadmin/typo3camp.css 10 = TEMPLATE 10.template = FILE 10.template.file = fileadmin/typo3camp.html 10.workOnSubpart = DOCUMENT 10.marks { MENU < lib.mainmenu } } Inspiring people to TypoScript - von Anfang an share
  • 36. Beispiel: Marker füllen - Template <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>TYPO3camp</title> </head> <body> <!-- ###DOCUMENT### begin --> <div id="MENU"> ###MAINMENU### </div> <!-- ###DOCUMENT### end --> </body> </html> Inspiring people to TypoScript - von Anfang an share
  • 37. Beispiel: Menü lib.mainmenu = HMENU lib.mainmenu { 1 = TMENU 1.wrap = <ul class=“ebene1“>|</ul> 1.NO.allWrap = <li>|</li> 1.ACT = 1 1.ACT.wrapItemAndSub = <li>|</li> 2 < .1 2.wrap = <ul class=“ebene2“>|</ul> 3 < .2 3.wrap = <ul class=“ebene3“>|</ul> } Inspiring people to TypoScript - von Anfang an share
  • 38. Beispiel: Menü -Ausgabe <ul class=“ebene1“> Menüpunkt 1 <li>Menüpunkt 1</li> Menüpunkt 2 <li>Menüpunkt 2 Menüpunkt 2-1 <ul class=“ebene2“> Menüpunkt 2-2 <li>Menüpunkt 2-1</li> Menüpunkt 3 <li>Menüpunkt 2-2</li> </ul> <li>Menüpunkt 3</li> </ul> Inspiring people to TypoScript - von Anfang an share
  • 39. Weitere Informationen: TypoScript Reference TSref http://www.tsref.de TypoScript in 45 Minuten (DocTeam) http://wiki.typo3.org/index.php/De:TSref/45MinutesTypoScript Übersetzung der TSref http://wiki.typo3.org/De:TSref TypoScript Videotraining (video2brain) Inspiring people to TypoScript - von Anfang an share
  • 40. Vielen Dank! Fragen??? Inspiring people to TypoScript - von Anfang an share