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 |
extKey: browser_tut_basics_en
Browser Tutorial Basics (en)¶
This is the Tutorial with the Basics for the Extension Browser - TYPO3 without PHP.
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
Where are the TypoScript snippets? 8
Tutorial II: The Local Table 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
Tutorial IV: Configuring Images 16
Tutorial V: Wrapping Fields 17
Example with wrap, crop and strftime 17
###MARKERS### in TypoScript 17
general_stdWrap and the Rich Text Editor 18
Tutorial VII: SEO - Search Engine Optimization 22
Tutorial VIII: Page Browser and Index-Browser 23
Tutorial IX: Search and Filter 24
Tutorial X: SQL Relation Building 25
Tutorial XII: HTML Templating 27
Tutorial XIII: Constant Markers 28
Beforehand¶
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
- http://typo3.org/extensions/repository/
- and look for "browser_tut"
Backend-Filter¶
Extend the TYPO3 backend list view with filters.
BrowserMaps¶
Publish your data with Google Maps or OpenStreetMap.
Calendar¶
Extend the TYPO3 backend list view with filters.
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.
Images¶
Configuring images and galeries.
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.
Labeling¶
Labeling and field properties.
Localization¶
Proper localisation design for your database.
Marker¶
Database marker, constant marker, browser system marker, piVars marker, TYPO3 GLOBALS Marker.
RealURL¶
Configuring RealURL
Search and Filter¶
Configuring the search and the filter
SEO – Search Engine Optimization¶
SEO – Search Engine Optimization – for the Browser
Several Plugins¶
Use the Browser plugin several times on the same page.
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)
Templating¶
Create your own template and your own view.
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.
Organiser¶
TYPO3 for the lobby and organisers. Install it with one click!
Quick Shop¶
Quick Shop - the fastest shop in the history of TYPO3. Install the shop with one mouse click!
Route¶
Publish your routes with Google Maps or OpenStreetMap
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
Include Static Template¶
Include the static template in the pages, in which you want to use the Browser .
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.
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?
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:
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.
You will get another result but it is wrong too:
You see a lot of records (in this example 318 instead of 41)
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.
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¶
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¶
Tutorial III: Labeling and Field Properties¶
Labeling¶
Please take a look in the Browser Tutorial Labeling.
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¶
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.
piVars 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.
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).
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 VII: SEO - Search Engine Optimization¶
Please take a look at
Tutorial VIII: Page Browser and Index-Browser¶
Please take a look in the Browser Tutorial Navigation.
Tutorial IX: Search and Filter¶
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 XIV: Real URL¶
Please take a look in the Browser Tutorial RealURL.
Tutorial XV: Localization¶
Please take a look in the Browser Tutorial Localization.
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.
Tutorial¶
Please take a look in the Browser Tutorial Templating.
TT_CONTAINER¶
Sorry, but TT_CONTAINER is deprecated.
Reference¶
See the section Reference in the Browsers manual.
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 5: Get the TypoScript snippet? Click the link [Edit file] 8
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
Social Media¶
Use social bookmarks. Publish your data on facebook.com.