.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ========== Green Cars ========== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed: 2010-02-18T20:36:28 :Classification: green_cars :Description: Green Cars is both: A database for cars with environment advantages and a case study for the TYPO3 frontend engine browser :Keywords: forAdmins, forDevelopers, forBeginners, forAdvanced, browser :Author: Dirk Wildt, Die Netzmacher :Email: wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| extKey: green\_cars |img-3| .. _Green-Cars: Green Cars ========== Green Cars is both: A database for cars with environment advantages and a case study for the TYPO3 frontend engine browser |img-4| Version: 0.0.3, 2010-02-18 Extension Key: green\_cars Language: en Keywords: forAdmins, forDevelopers, forBeginners, forAdvanced, browser Copyright 2010, Dirk Wildt, Die Netzmacher, 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: Table of Contents ----------------- `Green Cars 1 <#1.Green%20Cars|outline>`_ `Screen Shots 3 <#1.1.Screen%20Shots|outline>`_ `Frontend 3 <#1.1.1.Frontend|outline>`_ `Backend 3 <#1.1.2.Backend|outline>`_ `Case Story – Step-by-Step Development 4 <#1.1.3.Case%20Story%20%E2%80%93%20Step-by- Step%20Development|outline>`_ `Introduction 5 <#1.2.Introduction|outline>`_ `What does it do? 5 <#1.2.1.What%20does%20it%20do_|outline>`_ `Case Study in German Language 5 <#1.2.2.Case%20Study%20in%20German%20Language|outline>`_ `The case study Green Cars is in German language only. 5 <#6.The%20cas e%20study%20Green%20Cars%20is%20in%20German%20language%20only.|outline >`_ `Documentation online 5 <#1.2.3.Documentation%20online|outline>`_ `This Manual in PDF format 5 <#1.2.3.1.This%20Manual%20in%20PDF%20format|outline>`_ `Case Study – Step-by-Step Tutorial 5 <#1.2.3.2.Case%20Study%20%E2%80%93%20Step-by- Step%20Tutorial|outline>`_ `Further Information 5 <#1.2.4.Further%20Information|outline>`_ `Browser Manual and Browser Tutorial Basics 5 <#1.2.4.1.Browser%20Manu al%20and%20Browser%20Tutorial%20Basics|outline>`_ `Installation 6 <#1.3.Installation|outline>`_ `Extension Manager 6 <#1.3.1.Extension%20Manager|outline>`_ `Page Tree 6 <#1.3.2.Page%20Tree|outline>`_ `Extension Template 6 <#1.3.3.Extension%20Template|outline>`_ `Plugin 7 <#1.3.4.Plugin|outline>`_ `Reference 8 <#1.4.Reference|outline>`_ `Functional Schematic 8 <#1.4.1.Functional%20Schematic|outline>`_ `Green Cars is a Teamwork with the Browser 8 <#1.4.1.1.Green%20Cars%20 is%20a%20Teamwork%20with%20the%20Browser|outline>`_ `plugin.tx\_browser\_pi1 8 <#1.4.2.plugin.tx_browser_pi1|outline>`_ `Investigate the Configuration of Green Cars 8 <#1.4.2.1.Investigate%2 0the%20Configuration%20of%20Green%20Cars|outline>`_ `TypoScript Object Browser 9 <#1.4.2.2.TypoScript%20Object%20Browser|outline>`_ `TypoScript 10 <#1.4.2.3.TypoScript|outline>`_ `Helpful suggestions 11 <#1.5.Helpful%20suggestions|outline>`_ `Further Information 12 <#1.6.Further%20Information|outline>`_ `About the plugin icon 12 <#1.6.1.About%20the%20plugin%20icon|outline>`_ `Other extensions published by Die Netzmacher 12 <#1.6.2.Other%20exten sions%20published%20by%20Die%20Netzmacher|outline>`_ `To-Do List 13 <#1.7.To-Do%20List|outline>`_ `Change Log 14 <#1.8.Change%20Log|outline>`_ .. _Screen-Shots: Screen Shots ------------ .. _Frontend: Frontend ^^^^^^^^ |img-5| |img-5| Online: `http://gruene-autos.org `_ .. _Backend: Backend ^^^^^^^ |img-5| |img-5| .. _Case-Story-Step-by-Step-Development: Case Story – Step-by-Step Development ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ We documented the development of the extension Green Cars as the case study. The screenshots showing some of the steps. VCD `:sup:`0` <#sdfootnote1sym>`_ is the German Traffic Club. |img-5| |img-5| |img-5| |img-5| |img-5| |img-5| .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ - |img-6| Illustration 11:Case Study – Step-by-Step Tutorial Green Cars is a database for cars with environment advantages. - Green Cars is a case study for the TYPO3 frontend engine browser too. - It explains how to develop, program and publish a TYPO3 extension supported by the TYPO3 frontend engine Browser - Both Green Cars and Browser are out of the box. - You have to create your own CSS only. .. _Case-Study-in-German-Language: Case Study in German Language ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The case study Green Cars is in German language only. .. _Documentation-online: Documentation online ^^^^^^^^^^^^^^^^^^^^ .. _This-Manual-in-PDF-format: This Manual in PDF format """"""""""""""""""""""""" You find this manual as PDF file at - doc/manual.pdf - `http://typo3.org/extensions/repository/view/green\_cars/current/info/ ?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Case-Study-Step-by-Step-Tutorial: Case Study – Step-by-Step Tutorial """""""""""""""""""""""""""""""""" You find the step-by-step tutorial (German language) at - doc/fall\_studie.pdf - `http://typo3.org/extensions/repository/view/green\_cars/current/info/ ?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Ffall\_studie.pdf `_ .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _Browser-Manual-and-Browser-Tutorial-Basics: Browser Manual and Browser Tutorial Basics """""""""""""""""""""""""""""""""""""""""" Manual: The Browser has it's own manual (with the reference of course). - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser/current/info /?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ Tutorial Basics: A lot of step-by-step introductions. - HTML: `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_basics\_en/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser\_tut\_basics \_en/current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Installation: Installation ------------ .. _Extension-Manager: Extension Manager ^^^^^^^^^^^^^^^^^ - Install this extension |img-3| (green\_cars). - Green Cars will suggest to install the extension |img-7| Browser – the frontend machine (extKey: browser). Please install it. |img-5| .. _Page-Tree: Page Tree ^^^^^^^^^ - Insert the page "gruene-autos.org" (in our example below it has the ID 2957). - Insert a sysfolder "Grüne Autos" (in our example below it has the ID 2958). |img-5| .. _Extension-Template: Extension Template ^^^^^^^^^^^^^^^^^^ - Add an extension template to your page "gruene-autos.org" (2957) - We recommend to use for the name of the template this syntax: - +type\_page\_templateID - We call it: +page\_grueneautos\_979 - Include the static templates from extensions: - Browser (browser) - Browser (green\_cars) |img-5| .. _Plugin: Plugin ^^^^^^ - Insert an extension template. Include static from extensions: Browser (green\_cars). - Insert the plugin "Browser" and choose as the startingpoint the sysfolder "Green Cars (Data)". |img-5| .. _Reference: Reference --------- This extension is a teamwork with the Browser. It hasn't any own TypoScript. .. _Functional-Schematic: Functional Schematic ^^^^^^^^^^^^^^^^^^^^ .. _Green-Cars-is-a-Teamwork-with-the-Browser: Green Cars is a Teamwork with the Browser """"""""""""""""""""""""""""""""""""""""" The illustration below is a illustration out of the Browser manual: `http://typo3.org/extensions/repository/view/browser/current/ `_ |img-5| |img-5| The common way of TYPO3 extension development: - Extensions have there own frontend plugin. - Extensions have own PHP code for the frontend rendering. TYPO3 extension development with the Browser: - Green Cars hasn't any own frontend plugin. - Green Cars has a TypoScript template for the Browser extension only. We developed the Green Cars extension in teamwork with the Browser like in the illustration above on the right hand, because we could save a lot of development costs. And it is a good idea for the future too. We will be able to extend the database in the backend and the rendering in the frontend very flexible and cost-effective. If you want to change the design or some functionality in the frontend you have to change the TypoScript of the extension Browser. .. _plugin-tx-browser-pi1: plugin.tx\_browser\_pi1 ^^^^^^^^^^^^^^^^^^^^^^^ .. _Investigate-the-Configuration-of-Green-Cars: Investigate the Configuration of Green Cars """"""""""""""""""""""""""""""""""""""""""" If you want to investigate the Green Cars TypoScript template, take a look in - the TypoScript Object Browser or in - static/setup.txt (below you find a cutout). There are three good reasons to investigate the TypoScript: - You want to change a view in the frontend. - You want to add new fields in the Green Cars database. - You want to use the Browser for your own database. If you understand the snippet below, you should be able to change a lot of functionality in the frontend and to use the Browser as the frontend plugin for your database with a minimum of costs. Please respect that this manual is the Green Cars manual and not the Browser manual. If you like an in-depth analysis take a look in the Browser manual. `http://typo3.org/extensions/repository/view/browser/current/ `_ .. _TypoScript-Object-Browser: TypoScript Object Browser """"""""""""""""""""""""" |img-5| Be aware: - There is no plugin: tx\_greencars\_pi1 - There is a plugin: tx\_browser\_pi1 If you want to add or delete a view or add or delete a table field in a view please open the array tx\_browser\_pi1.views .. _TypoScript: TypoScript """""""""" Cutout of static/browser/setup.txt. plugin.tx\_browser\_pi1 { template { file = EXT:green\_cars/res/default.tmpl } ... views { list { 1 { select ( tx\_greencars\_main.co2, tx\_greencars\_main.image, tx\_greencars\_manufacturer.title, tx\_greencars\_main.title, tx\_greencars\_main.consumption\_average ) ... } } single { 1 { select ( tx\_greencars\_main.image, tx\_greencars\_main.imagealttext, tx\_greencars\_main.imagetitletext, tx\_greencars\_manufacturer.title, tx\_greencars\_main.title, tx\_greencars\_main.speed, tx\_greencars\_main.co2, tx\_greencars\_main.consumption\_in\_town, tx\_greencars\_main.consumption\_outof\_town, tx\_greencars\_main.consumption\_average, tx\_greencars\_main.price, tx\_greencars\_engine.title, tx\_greencars\_type.title ) } } } } .. _Helpful-suggestions: Helpful suggestions ------------------- If you have helpful suggestions, feel free to contact me: wildt.at .die-netzmacher.de. .. _Further-Information: Further Information ------------------- .. _About-the-plugin-icon: About the plugin icon ^^^^^^^^^^^^^^^^^^^^^ |img-4| The concept of the icon: - The green car should symbolize the focus on environmental aspekts.. - The color yellow is the color of `Die Netzmacher `_ , the company which created the Green Cars. .. _Other-extensions-published-by-Die-Netzmacher: Other extensions published by Die Netzmacher ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ |img-8| Browser - The Frontend Engine. It displays content from related tables. You need one line typoscript for a result list with a search form, a record browser and an a-z browser. Images are wrapped self-acting. SEO, Search Engine Optimisation is integrated. DRS - Development Supporting System - supports Bugfixing and Development. `http://typo3.org/extensions/repository/view/browser/current/ `_ |img-9| Browser for BZD Staff Directory. List view and single view for the extension BZD Staff Directory. It is out of the box. You can edit the views by TypoScript. You can add fields and whole views. `http://t ypo3.org/extensions/repository/view/browser\_bzdstaffdirectory/current / `_ |img-10| Browser for Virtual Civil Services - List views and single views for the extension Virtual Civil Services (civserv) . It supersedes smarty and enables SEO - search engine optimisation -, Real URL and the TYPO3 cache management. It is out of the box. It You can edit the views by TypoScript. You can add fields and whole views. `http://typo3.org/extensions/repository/view/browser\_civserv/current/ `_ |img-11| Juridat - Database for Juridical Data. Juridat provides a juridical data base with backend functionality. Juridat is out of the box. It is a teamwork with the Browser. `http://typo3.org/extensions/repository/view/juridat/current/ `_ |img-12| logical\_form: A frontend plugin for evaluating forms. I.e you can evaluate mail addresses. `http://typo3.org/extensions/repository/view/logical\_form/current/ `_ - |img-13| Majordomo: For subcribing to and unsubscribing from a majordomo mailing list. `http://typo3.org/extensions/repository/view/majordomo/current/ `_ - |img-14| rm\_staticfile: Improve your performance! This extension enables the delete of static files, which where generated by nc\_staticfilecache. It is a team play with the TYPO3 cache management, ttnews, ttnewscache, sg\_newsplus and sg\_zfelib. `http:// typo3.org/extensions/repository/view/delete\_staticfile\_by\_3party/cu rrent/ `_ - |img-15| seo\_dynamic\_tag: Search Engine Optimisation. You can generate values dynamically with this extension especially for the -tag, for the <meta>-tag description and the <meta>-tag keywords. `http://typo3.org/extensions/repository/view/seo\_dynamic\_t ag/current/ <http://typo3.org/extensions/repository/view/seo_dynamic_t ag/current/>`_ - |img-16| tt\_news Marker (extkey: ttnews\_marker) enables to add any marker to a tt\_news HTML template including links. Any marker has the std\_wrap property. `http://typo3.org/extensions/repository/view/ttnews\_marker/current/ <http://typo3.org/extensions/repository/view/ttnews_marker/current/>`_ - |img-17| tt\_news select configuration (extkey: ttnews\_selectconf) enables to select tt\_news by any SQL clause. The extension adds an andWhere clause to the SQL query of the tt\_news plugin. I. e. it is possible to display tt\_news items in dependence on the ownership of a fe\_user. `http://typo3.org/extensions/repository/view/ttnews\_selectc onf/current/ <http://typo3.org/extensions/repository/view/ttnews_selec tconf/current/>`_ .. _To-Do-List: To-Do List ---------- Nothing to do. .. _Change-Log: Change Log ---------- 0.0.3 Bugfix: Wrong Link in the manual 0.0.2 Publishing Initial release `0 <#sdfootnote1anc>`_ Verkehrsclub Deutschland. `http://www.vcd.org <http://www.vcd.org/>`_ 14 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 27 .. :hspace: 4 .. :id: Grafik2 .. :name: Grafik2 .. :width: 98 .. |img-3| image:: img-3.png .. :border: 0 .. :height: 31 .. :id: Grafik19 .. :name: Grafik19 .. :width: 35 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 335 .. :id: Grafik1 .. :name: Grafik1 .. :width: 378 .. |img-5| image:: data: :alt: Frame4 .. :align: bottom .. :id: Frame4 .. :name: Frame4 .. |img-6| image:: img-6.jpeg .. :align: right .. :border: 0 .. :height: 286 .. :id: graphics2 .. :name: graphics2 .. :width: 227 .. |img-7| image:: img-7.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics9 .. :name: graphics9 .. :width: 18 .. |img-8| image:: img-8.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics36 .. :name: graphics36 .. :width: 18 .. |img-9| image:: img-9.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics42 .. :name: graphics42 .. :width: 18 .. |img-10| image:: img-10.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics43 .. :name: graphics43 .. :width: 18 .. |img-11| image:: img-11.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics12 .. :name: graphics12 .. :width: 18 .. |img-12| image:: img-12.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics38 .. :name: graphics38 .. :width: 18 .. |img-13| image:: img-13.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics18 .. :name: graphics18 .. :width: 18 .. |img-14| image:: img-14.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics13 .. :name: graphics13 .. :width: 18 .. |img-15| image:: img-15.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics37 .. :name: graphics37 .. :width: 18 .. |img-16| image:: img-16.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics51 .. :name: graphics51 .. :width: 18 .. |img-17| image:: img-17.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics50 .. :name: graphics50 .. :width: 18