DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Browser Tutorial Basics (en)

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed by:Dirk Wildt
Changed:2013-09-19T21:38:18
Classification:browser_tut_basics_en
Description:This is the Tutorial with the Basics for the Extension Browser - TYPO3 without PHP.
Keywords:forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced, browser, tutorial, basics
Author:Dirk Wildt, Die Netzmacher
Email:http://wildt.at.die-netzmacher.de
Website:http://die-netzmacher.de
Language:en

img-1 img-2 extKey: browser_tut_basics_en img-3

Browser Tutorial Basics (en)

This is the Tutorial with the Basics for the Extension Browser - TYPO3 without PHP.

img-4

Version: 4.6.2, 2013-09-19 - Version is corresponding with the version of the Browser.

Extension Key: browser_tut_basics_en - Tutorial for the extension Browser (extkey: browser)

Language: en

Keywords: forAdmins, forDevelopers, forBeginners, forIntermediates, forAdvanced, browser, tutorial, basics

Copyright 2009-2013, Dirk Wildt, Die Netzmacher, <http://wildt.at.die- netzmacher.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

Browser Tutorial Basics (en) 1

Beforehand 3

Tutorial in PDF 3

Manual of the Browser 3

Tutorials Overview 3

Demo Websites Overview 6

Installation 7

Extension Manager 7

Constant Editor 7

Include Static Template 7

Tutorial Requirements 8

Where are the TypoScript snippets? 8

Why do we use tt_news? 8

Convention 8

Tutorial I: Quickstart 9

One Table with one Relation 9

Tutorial II: The Local Table 10

Intention 10

Step 1: We change the order of the fields 10

Step 2: Configuring the local table 12

Step 3: Configuring the local table only for one view (local) 13

Tutorial III: Labeling and Field Properties 15

Labeling 15

Marker 15

Tutorial IV: Configuring Images 16

Tutorial V: Wrapping Fields 17

Example with wrap, crop and strftime 17

###MARKERS### in TypoScript 17

piVars in TypoScript 18

general_stdWrap and the Rich Text Editor 18

Tutorial VI: 1:N Relations 20

Single View 20

Tutorial VII: SEO - Search Engine Optimization 22

Please take a look at 22

Tutorial VIII: Page Browser and Index-Browser 23

Tutorial IX: Search and Filter 24

Search and Filter 24

Select Box for Ordering 24

Tutorial X: SQL Relation Building 25

Tutorial XI: SQL Functions 26

Tutorial XII: HTML Templating 27

Tutorial 27

Tutorial XIII: Constant Markers 28

Marker 28

Tutorial XIV: Real URL 29

Tutorial XV: Localization 30

Tutorial XVI: Data query 31

Enable Editors to select defined filters 31

Tutorial 31

TT_CONTAINER 32

Reference 33

Helpful suggestions 34

To-Do List 35

Change Log 36

Illustration Index 37

Beforehand

img-5 Illustration 1: Tutorial in PDF format

This is the basic tutorial for the extension Browser (extkey: browser). Tutorial in PDF ^^^^^^^^^^^^^^^

You find this tutorial as PDF file at

Manual of the Browser

If you are interested in the manual and the reference respectively, please take a look in the manual of the Browser.

Tutorials Overview

This tutorial isn't the only one. There are more tutorials. Link to the tutorials overview:

http://typo3-browser.de/browser-tutorials/

Or visit

CSV file, RSS feed and XML

Export and publish your data independent of any format - like a CSV file or RSS feed.

Database

Configuring relations between tables. Build your own relation. Using functions, which are provided by the Browser.

Development

Develop the Browser! Use the SVN repository on forge.typo3.org.

Downloads

Manage your downloads with the Browser! The Browser takes care of user access rights. It is counting hits and visits for downloaded files. See Tutorial Statistics below.

Hooks

Use hooks for your data. Handle data of any extension in your extension.

Javascript and AJAX

The Browser - TYPO3 without PHP - supports the using of ready JSS scripts and the integration of JavaScript frameworks like jquery. This tutorials has some examples for AJAX, own Designs with jQuery and t3jquery in principle.

Marker

Database marker, constant marker, browser system marker, piVars marker, TYPO3 GLOBALS Marker.

SEO – Search Engine Optimization

SEO – Search Engine Optimization – for the Browser

Statistics

Manage your statistics data with the Browser! The Browser collects hits and vistis for records and files. The statistics data is the basis for displaying the most frequented records or files. A good example are top 10 lists for news, products and records of your own database.

TCA

Configure the TCA Browser properties. Use ready methods for TCA backend form (itemsProcFunc)

tt_news Sample

Test the Browser out of the box with tt_news and than with your own data.

Userfunc

The Browser provides some user defined functions (userFunc). The tutorial is a overwiew with the reference.

Demo Websites Overview

grüne-autos.org

Database with the browser extension in three hours? The case story demonstrates the work flow.

http://grüne-autos.org/

Job Market

Offer jobs online with less effort.

http://typo3-job-market.de/

Organiser

TYPO3 for the lobby and organisers. Install it with one click!

http://typo3-organiser.de/

Quick Shop

Quick Shop - the fastest shop in the history of TYPO3. Install the shop with one mouse click!

http://typo3-quick-shop.de/

Route

Publish your routes with Google Maps or OpenStreetMap

http://typo3-route.de/

img-6 Illustration 2: Extension Manager

Installation This section is from the section "Installation" from the Browser manual.

Extension Manager

Open the extension manager, download the extension Browser (extkey: browser) and install it.

Constant Editor

You can control some TypoScript properties with the Constant Editor.

Modul Web > Template > Your Page > Constant Editor

Frame2

Include Static Template

Include the static template in the pages, in which you want to use the Browser .

Frame2

Tutorial Requirements

Where are the TypoScript snippets?

You find the snippets in the path res/tutorial of this extension.

  • Module Tools > Extension Manager
  • Extension: Browser Tutorial Basics (en). Click on the name of the extension.
  • Option: Edit Files
  • Click on the Link [Edit file] of the file, you want to use.

Frame2

Why do we use tt_news?

We use fields from the extension News (extkey: tt_news), because

  • this extension is very popular and a part of your TYPO3 installation probably,
  • the tables tt_news and tt_news_cat are connected by a M-M relation.

In principal the tutorial has to work with every other extension, if tables are connected with a M-M relation.

Convention

TypoScript

If we have lines, that haven't enough space in one line in this manual, we marked it up with a backslash ''.

Example:

plugin.tx_browser_pi1.views.single.3.select = tt_news.title, tt_news.bodytext, tt_news.image, **** tt_news.imagecaption, tt_news.imagealttext, **** tt_news.imagetitletext

If you copy this code in your TypoScript, please delete the backslash '' and put all lines in one line.

plugin.tx_browser_pi1.views.single.3.select = tt_news.title, tt_news.bodytext, tt_news.image, ...

Tutorial I: Quickstart

One Table with one Relation

Please see the section "Tutorial: Quickstart" in the Browser manual.

Tutorial II: The Local Table

Intention

The tutorial describes the context between local and foreign tables.

It is important to understand it, especially in case of strange results in the frontend.

TypoScript

You find the whole TypoScript code for this tutorial in the folder res/tutorial_01.

Step 1: We change the order of the fields

Exercise

We change the order of the both fields in the view list 1:

tt_news_cat.title is the first field now

tt_news.title is the second field now

TypoScript

You find the TypoScript code for this step in res/tutorial_01/step_01.txt.

Insert these lines in your TypoScript:

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news_cat.title, tt_news.title

}

}

}

}

Result

The result is an error. Why?

Frame2 Frame2

The reason should be easy to understand:

  • The Browser Tutorial Basics (en) takes the table of the first field as the local table.

  • tt_news_cat hasn't any connection back to the table tt_news (it would be useless):

    tt_news_cat > tt_news_cat_mm > tt_news

  • The Browser Tutorial Basics (en) can't built a relation

If you want to investigate what's happen, take a look in the devlog:

Frame2

The Browser Tutorial Basics (en) builts a wrong query because of a missing relation: table tt_news isn't known.

Result in case of a FULL JOIN

You can use the Browser Tutorial Basics (en) in a FULL JOIN mode. The Browser Tutorial Basics (en) builds in this mode FULL JOINS instead of LEFT JOINS.

Frame2

You will get another result but it is wrong too:

You see a lot of records (in this example 318 instead of 41)

Frame2 Frame2

Solution

If you need your own field ordering independent of the automatic SQL relation building it doesn't any matter. You have to tell the Browser Tutorial Basics (en) only, which is the local table (see next step).

Step 2: Configuring the local table

TypoScript

The TypoScript coded based on the code from the last step.

You find the TypoScript code for this step inres/tutorial_01/step_02.txt.

Exercise

We configure the local table.

  • We inspect the TypoScript code with the TypoScript Object Browser
  • We add the name of the local table.

Frame2

Frame2

Edit the property "localTable", click on it.

Module Web >Template , Page "tutorial", TypoScript Object Browser, plugin.tx_browser_pi1.localTable

Set the value to your local table: tt_news

Press the button [Update]

TypoScript

The TypoScript Object Browser wrote the following code in the last line of our TypoScript Setup:

plugin.tx_browser_pi1.localTable = tt_news

Result

Frame2

We have a proper result.

Step 3: Configuring the local table only for one view (local)

The Browser Tutorial Basics (en) has a lot of properties, which can be used "local". Local means: You can copy the global property to every view. This enables the differently configuration for every view.

We edit the TypoScript code.

  • We copy the global array to the view. Then the view has a local array .
  • We configure the property localTable in the local array.
TypoScript

You find the TypoScript code for this step in res/tutorial_01/step_03.txt.

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news_cat.title, tt_news.title

}

}

}

}

plugin.tx_browser_pi1.views.list.1 {

localTable < plugin.tx_browser_pi1.localTable

localTable = tt_news

}

TypoScript Object Browser

Frame2

Tutorial III: Labeling and Field Properties

Marker

Design your own layout. Have access to hundreds of TYPO3 values at runtime.

Tutorial IV: Configuring Images

Please take a look in the Browser Tutorial Images.

Tutorial V: Wrapping Fields

The tutorial describes, how to wrap any table field.

Example with wrap, crop and strftime

Every table in TYPO3 has the field tstamp. But tstamp isn't configured in the TCA. Because of this, the Browser Tutorial Basics (en) hasn't any chance to detect this field as a time stamp and can't format it in a human readable format.

Exercise
  • We add to the list view the tstamp field.
  • We wrap it as a date.
  • We wrap it as a header.
  • We want to truncate it after 14 characters.
TypoScript

You find the TypoScript code for this step in res/tutorial_05/step_01.txt.

plugin.tx_browser_pi1 {

views {

list {

1 {

select = tt_news.title, tt_news.tstamp, tt_news.image

tt_news.tstamp {

strftime = %c

wrap = <h1>|</h1>

crop = 14 | ...

}

}

}

}

}

Result

Frame2 Frame2

The time stamp values are formatted as a human readable date, wrapped with an HTML <h1>-tag and are truncated.

###MARKERS### in TypoScript

Please take a look in the Browser Tutorial Marker.

general_stdWrap and the Rich Text Editor

Every field will be wrapped with the properties of the general_stdWrap array.

The general_stdWrap has the properties of lib.parseFunc_RTE by default but without wrapping non wrapped lines with the <p>-Tag.

Global Configuration

If you want to change the wrapping please configure

plugin.tx_browser_pi1 {

general_stdWrap {

parseFunc < lib.parseFunc_RTE

parseFunc {

nonTypoTagStdWrap {

encapsLines {

nonWrappedTag >

}

}

}

}

Local Configuration

If you want to use the RTE functionality only for one field only, add the parseFunc propertiy to this fieldchange the wrapping please configure

plugin.tx_browser_pi1 {

views {

...

single {

1 {

...

tx_bzdstaffdirectory_persons {

opinion {

parseFunc < lib.parseFunc_RTE

}

}

}

}

}

}

You will have a full qualified parseFunc_RTE array and you can edit it in the TypoScript Object Browser (see the illustration below) fot the used field especially.

Frame2

Frame2 Frame2

Handle as Text

Fields, which should handled as Text like in this TypoScript

plugin.tx_browser_pi1 {

views {

single {

1 {

select = tx_juridat_pi1.issue, tx_juridat_pi1.headnote

handleAs {

text = tx_juridat_pi1.headnote

}

}

}

}

}

will be wrapped with the displayList.content_stdWrap or displaySingle.content_stdWrap properties.

content_stdWrap will wrap lines without tags with a <p class="bodytext">|</p> by default.

If there isn't any local nor global displayList.content_stdWrap or displaySingle.content_stdWrap array, the Browser will wrap the field with the general_stdWrap property.

Tutorial VI: 1:N Relations

The Browser process 1:n relations as 1:n relations automatically.

There is only one requirement:

You have to select the uid of the children records in your SELECT statement.

The Browser extends the TypoScript stdWrap property for this cae with a special array:

  • You can wrap all items
  • You can prepend a header
  • If there isn't any child, you can configure, that nothing will displayed.

Single View

Example
  • We have a main table tx_bzdstaffdirectory_persons (local table).
  • There is a relation to a table tx_bzdstaffdirectory_functions (foreign table).

Frame2 Frame2

HTML-Template

There is nothing to do but to replace your table.field as a marker at your position of your HTML template.Code (cutout):

<!-- ###TEMPLATE_SINGLE_STAFF_IN_DETAIL### begin -->

...

<!-- ###SINGLEVIEW### begin -->

<div class="###VIEW###view ###VIEW###view-###MODE###">

...

<h1 class="staff_h1>

###TX_BZDSTAFFDIRECTORY_PERSONS.LAST_NAME###

</h1>

...

###TX_BZDSTAFFDIRECTORY_PERSONS.OPINION###

...

</div><!-- ###SINGLEVIEW### end -->

<!-- ###TEMPLATE_SINGLE_STAFF_IN_DETAIL### end -->

TypoScript

We use in this example a manually configured MM relation (from line 6 to 12).We added the uid to the SELECT statement in line 17.

plugin.tx_browser_pi1 {

views {

...

single {

1 {

relations {

mm {

tx_bzdstaffdirectory_persons {

tx_bzdstaffdirectory_persons_functions_mm = tx_bzdstaffdirectory_functions

}

}

}

select (

tx_bzdstaffdirectory_persons.last_name,

tx_bzdstaffdirectory_persons.first_name,

...

tx_bzdstaffdirectory_functions.uid,

tx_bzdstaffdirectory_functions.title

)

...

}

}

}

}

The code (cutout) for wrapping the children records:

We defined the table.field in line 7. and 8

The table.field is a TypoScipt TEXT object. (line 8)

We wrap any item as a list item (line 10)

The item should only wrapped, if it has a value (line 12)

All items will be wrapped as a unordered list (line 25)

The wrapped items will get a header (line 17).

plugin.tx_browser_pi1 {

views {

...

single {

1 {

...

tx_bzdstaffdirectory_functions {

title = TEXT

title {

wrap = <li>|</li>

if {

isTrue = ###TX_BZDSTAFFDIRECTORY_FUNCTIONS.TITLE###

}

extensions {

browser {

wrapAll {

header {

value = Domains:

lang {

de = Arbeitsbereiche:

}

wrap = <p class="staff_functions"><strong>|</strong></p>

}

stdWrap {

wrap = <ul>|</ul>

}

}

}

}

}

}

...

}

}

}

}

Tutorial VIII: Page Browser and Index-Browser

Please take a look in the Browser Tutorial Navigation.

Tutorial IX: Search and Filter

Select Box for Ordering

See the Tutorial Marker:

Marker

Design your own layout. Have access to hundreds of TYPO3 values at runtime.

Tutorial X: SQL Relation Building

Please take a look in the Browser Tutorial Database.

Tutorial XI: SQL Functions

Please take a look in the Browser Tutorial Database.

Tutorial XIII: Constant Markers

Marker

Marker enables to design individual designs. Please take a look in the Browser Tutorial Marker.

Tutorial XVI: Data query

Enable Editors to select defined filters

You can enable editors to select filters by the plugin/flexform.

Example:

  • An editor select a template with news, which is displaying all news.
  • If it is configured, an editor can select a data query like "Politician" or "Society".The view will display news with the category politician or society in the frontend.

TT_CONTAINER

Sorry, but TT_CONTAINER is deprecated.

Helpful suggestions

If you have helpful suggestions, feel free to contact me: http://wildt.at.die-netzmacher.de .

To-Do List

Nothing to do.

Change Log

4.6.2 New Features - Update the manual 4

3.0.5 New Feature - Browser Tutorial Marker (en)

3.0.1 Initial release

Illustration Index

Illustration 1: Tutorial in PDF format 3

Illustration 2: Extension Manager 7

Illustration 3: Constant Editor 7

Illustration 4: Include static template from extension 7

Illustration 6: Without the DRS - Development Reporting System 10

Illustration 7: With the DRS10

Illustration 8: Entries in the logging report 11

Illustration 9: The Browser Tutorial Basics (en) in FULL JOIN mode - relations.left_join is 0 (FALSE) 11

Illustration 10: Result with a wrong relation in a FULL JOIN mode. 12

Illustration 11: For comparison the proper result. 12

Illustration 12: The global localTable array 12

Illustration 13: Allocating localTable with your own local table 13

Illustration 14: Proper result with a manually configured local table. 13

Illustration 15: Configuration in the TypoScript Object Browser 14

Illustration 16: The time stamp isn't wrapped 17

Illustration 17: The wrapped time stamp. 17

Illustration 18: parseFunc in the Typoscript Object Browser 19

Illustration 19: RTE field in the backend 19

Illustration 20: RTE field in the frontend 19

Illustration 21: 1:n relation in the frontend 20

Illustration 22: 1:n relation in the backend 20

Illustration 23: List view 24

Illustration 24: Result with six search words 24

Illustration 25: Searchform with three filters 24

37