1

Exercise “Content Management Systems”

1. CMS vs. Classic web publishing

1.1 Which main advantages and disadvantages does an explicit representation of content

components (CMS) have in comparison to an implicit representation

(e.g. classic web application)?

2. Introduction to TypoScript

• For configuration of TYPO3: TypoScript (TS)

– TypoScript is a declarative language

– Conversion of TypoScript into PHP by special parser (TYPO3 Frontend

Engine)

– Application area

• Designing + Integration of templates

(front-end – the website)

– Pure TS-Template

– HTML-Template + TS

• Configuration of the back-end (administration + content management

area)

– User/user group properties (User TSConfig) and

– Page properties (Page TSConfig)

The structure of a TYPO3 webpage

Page tree Templates

• Sub pages are automatically associated with templates of its main page

• A subpage may extend functionality of the main template or may have an own template

Template 1 (T1)

Template 2 (new)

Extention of T1

Succeed T1

Succeed T1

Template 3 (T3)

Succeed T3

Succeed T3

Template 4 (T4)

2

2.1 TypoScript syntax for creating a TS-Template:

# default page page = PAGE For creating of a template, at first an instance of a PAGE

object have to created

page.10 = TEXT page.10 defines a memory position for the page instance (the offset can be selected arbitrary, e.g. page.1, page.2. page.10), this position is allocated with the TEXT object

page.10.value = The TUD logo For display a text on a browser a value to the TEXT object have to be allocated

page.10.wrap = <h1>|</h1> wrap enables the creation of HTML-Tags, page.20 = COA page.20.wrap = <table border= "1" >|</table> page.20.10 = COA page.20.10.wrap = <tr>|</tr> page.20.10 { Better arranged syntax 10 = TEXT IMG object allows to link and represents an imagine 10.value = 266 x 77 10.wrap = <td>|</td>

20 = IMAGE 20.file = fileadmin/user_upload/tu-logo.gif 20.wrap = <td><div>|</div></td>

• Possibilities for setting the margin to zero: o page.bodyTagMargins = 0

• set the topmargin, leftmargin, marginwith and marginheight to zero

o using CSS: * { margin:0 }

• set the margin-left, margin-top, margin-right and margin-bottom to zero

topmargin

# default page page = PAGE page.10 = TEXT page.10.value = The TUD logo page.10.wrap = <h1>|</h1> page.20 = COA page.20.wrap = <table border= "1" >|</table> page.20.10 = COA page.20.10.wrap = <tr>|</tr> page.20.10 { Better arranged syntax 10 = TEXT 10.value = 266 x 77 10.wrap = <td>|</td>

20 = IMAGE 20.file = fileadmin/user_upload/tu-logo.gif 20.wrap = <td><div>|</div></td>

}

• # defines a commend row, this row is not interpreted

• To create a template, at first a PAGE object has to be

created

o The PAGE object is a Framework for

integration of “page objects”

• page.10 defines a memory position for the page (the

offset can be selected arbitrary, e.g. page.1, page.2.

page.10), this position is allocated with the TEXT

object (a page object)

• To display a text in a browser, the TEXT object has to

be allocated by a value

• wrap enables the integration of HTML-Tags

o | space holder for the value

•

• Better arranged syntax

• IMAGE object allows to display an image

3

Separation of structure, layout and raw data

• For displaying the CONTENT object on the browser, a special layout template is required.

By the introduction of back-end modules you can learn how to select a predefined TYPO3

layout template (standard layout for CONTENT objects).

[…] page.20.10 {

10 = CONTENT

10.table = tt_content table = tt_content : makes a SQL request to data base text table tt_content

10.select.orderBy = Sorting Sorting of the CONTENT object

Every generated CONTENT object in TYPO3 has an Id

10.wrap = <td>|</td> 20 = IMAGE 20.file = fileadmin/user_upload/tu-logo.gif 20.wrap = <td><div>|</div></td>

}

• CONTENT object is used for inserting raw data

into document content

• In this example the raw data only consists out

of text

• table = tt_content : creates a SQL request to data

base text table tt_content

• Sorting of the CONTENT object to ObjectIDs

o Every generated CONTENT object in

TYPO3 has an ID

4

Creation of a navigation menu with the HMENU object

menue.css

page = PAGE page.10 = HMENU page.stylesheet = fileadmin/css/menue.css # main menu item of the page “Home” page.10.1 = TMENU page.10.1 {

expAll = 0 NO.allWrap = <div class=”text16” valign=”top”>|</div>

} # sub menu item of the page “Home” page.10.2 = TMENU page.10.2.NO.allWrap = <div class=”text10”> &nbsp;&nbsp;|</div>

• You see that the link to the page “Home” is not available

• To create this, you have to create a shortcut of the page “Home” as a sub item of the page

“Home”, for this have a look at the introduction to back-end modules.

page = PAGE page.10 = HMENU page.stylesheet = fileadmin/css/menue.css # main menu item of the page “Home” page.10.1 = TMENU page.10.1 { expAll = 0 NO.allWrap = <div class=”text16”>|</div> } # sub menu item of the page “Home” page.10.2 = TMENU page.10.2.NO.allWrap = <div class=”text10”> &nbsp;&nbsp;|</div>

.text10 {font-size:10pt ; font-weight:bold; font-family:arial} .text16 {font-size:14pt ; font-weight:bold; font-family:arial} a:link { color: #0000ff; text-decoration:none} a:active { color: #ff0000; text-decoration:none} a:visited { color: #0000ff; text-decoration:none} a:hover { color: #ff0000; text-decoration:none}

• HMENU Object is used for creating

menu structures

• TMENUE Object:

o Menu type text menu

• expAll = 0 – sub pages become visible

via a click on its main page

• A menu item can take specific states

(e.g. NO - normal state, RO - rollover

state, etc.)

• These specific states can be referred

explicitly with self defined properties

• allWrap – HTML-code around the

whole menu entry

5

3. Tutorial for installation of TYPO3 on ‘localhost’

• For using TYPO3 you need an Apache web server and a MySql database

(e.g available within XAMPP)

• First download the source WITH dummy site package from the TYPO3 website

o http://typo3.org/download/packages/

• Extract these two files to an arbitrary folder and copy it to the local host folder

o […]\APACHE_SERVER\htdocs\cms

o This folder may look like:

• Then create an empty database “typo3”

• Start the Apache web server

• Enable cookies

• The next steps deal with installation and configuration of TYPO3 via the TYPO3

Install Tool

o Access the installation folder of the TYPO3 on localhost via a web browser

• E.g. http://localhost:8080/cms

o The following message pops up

o This warning can be ignored:

• TYPO3 simply wants to access the database which is not created Warning: mysql_list_tables(): supplied argument is not a valid

MySQL-Link resource in /home/www/htdocs/url.de/ordner/t3lib/class.t3lib_db.php on line

968

6

o After clicking on “OK” the Install Tool appears - type in the username and the

password for the admin account of your MySQL database and click on

“Continue”

o The second installation step is displayed and the mentioned warning disappears

o Now select the database you have created before and click “Continue”

o The third installation step deals with creating the necessary database tables

7

o Now click on the link “Continue to configure TYPO3”

o At first set the new installation password

o After setting the new password you have to relogin with this password

o Move to the menue point “Basic Configuration” that is displayed at the top of

the page

8

o Now the possibility for write access to some directories is checked

• If you get warnings, update the access rights of the diretories that

caused warnings

o If no warnings are displayed, then scroll to the top and search for the parameter

“Site name”, enter the name of your website to the associated field and click

on “update localconf.php”

9

• Configuration via the back-end

o Now scroll to the end of the site and click on “Backend admin in new window”

• Back-end: http://localhost/cms/typo3

• Front-end: http://localhost/cms

o A login dialog is opened, to login as a administrator:

• username: “admin” and password: “password” o The backend is opened and you get two important notices in a yellow box

o To change the account data, click on the module user->setup on the left hand

side at first

o A “user setting” dialog is opened, type in the new password

o After saving this configuration click on the module Tools->DB check

o Then select the “Manage Reference Index”

o The “Reference Index Update” dialog is opened

10

o On the right hand side you see the to buttons “update now” and “check now”

o First click on “update now”

o The configuration and installation is completed

o Now you can begin with creating a website

4. Introduction to back-end modules

• Introduction is limited to basic modules that are needed for creating a webpage with

separation of structure, layout and raw data

• First create a page by using the module: Web->Page

o After clicking on Web->Page you see a blank page tree

o To create a page, click with the right mouse key to the root of the pages (the name

of the site specified before – “New TYPO3 site”)

• A context menu is opened

o Now click on “New”

• On the right hand side a “New record” dialog for creating new elements is

opened

o Beside creating of pages, creating other elements is supported as well

o Now click on “Click here for wizard!”

§ The position for the new page can be chosen, both options have the same

effect

11

o The “Page Property” dialog is displayed

o For this tutorial you only need the properties Pagetitle, Hide page and Type

o By default the created page is hidden, for publishing purpose you have to update

this setting

o After saving the document, a new page appears at the page tree

o After clicking to “Save and close document” the page wizard directly makes the

creation of a further page possible

o Now create a sub page or a new page in front or after the page “Home”

(right click on the page à menue point “new”)

12

• For editing the page you can use the “Edit” entry of the context menu or click with the

left key to the page identifier

o On the right hand side another dialog is opened, now click on “Edit page

properties”

• By using the dialog displayed above you can also create raw data elements, for this click

on “Create page content” or “New content”

o A “New content element” (raw data element) dialog is opened, for this tutorial you

only need the regular text element

• Regular text element only consists out of text

13

• For creating a shortcut that enables moving back to pages at higher levels

create a new page and select the shortcut page type in the property dialog of the page

o Now a target for the shortcut has to be selected

Exercises:

1. Create a main page and add 3 subpages to this main page

• Then create a shortcut of the main page and place it as a subpage

directly below the main page

2. Create a regular text element for every page

• Every page should have a header and a body text

14

• Creating a template

o After clicking on Web->View module you see the following error message

o The Web->Template module offers functionality to create structured templates

o When you click on one page in the Template module then the template tool dialog

regarding this page is opened

o You can choose between the options “Create template for a new site” and “Click

here to create an extension template”

o First click on the page “Home” and then on “Create template for a new site” to

create a new template

• After you clicking on Web->View then you see that the string “Hello

World!” is displayed

• Go back to Web->Template and click on “NEW SITE” – after this the

template information is displayed

• To set-up TypoScript, click on the pencil symbol beside “Setup”

15

• To update the template click on “Update” – after this you can see your

updated page on Web->View

• Move back to Web->Template

• To add a file to the template click on the pencil beside “Resource”

• Then you can upload or create a new file, to add a file in the TypoScript

“Setup” you don’t need to specify the file path

• E.g. page.30.file = head.jpg

• After uploading or creating a file a “Update Resource List” is displayed

• If you have uploaded or created a file which is editable then a

pencil icon is displayed on the row of this file

• After clicking on “Click here to edit whole template record”, it is possible

to edit all properties of this template at once

16

• After scrolling bottom-up the property “Include static” and “Include static

(from extension)” can be found, here pre-defined items (templates, CSS

etc.) can be added

• You only need to click on an item on the right hand side, then it is

added on the left hand side of this table

• For creating a regular text element one of the two layout templates

content(default) or CSS Styled Content is required o These templates save required layout information for special

TypoScript objects

• To update the properties you have to click on the save button on the top

or on the button of this dialog

o If you want to create an extension page, the following template information is

displayed

• With the extension template it is possible to overwrite all pre-

defined memory positions and to extend the predefined memory

position by a new memory position

• The Web->List module lists all the data base entries (templates, page content, user, user

groups, etc.) which were created by TYPO3

• Detailed information about the back-end functionality can be found on the documentation

website of TYPO3

o http://typo3.org/documentation/document-library/

17

4. Select the “CSS Styled Content” layout template for required layouting

5. Create a CSS-file for the font layout

o One unique font should be selected for the layout

o Use the following CSS expression to set the margin and the position of the

text

• *{ margin-top:0; vertical-align:top}

HEADER

(picture)

BODY

FOOT

Menu Regular text element

Exercises:

3. Create a template on your main page (Home) with the following structure

o The page header consists out of a picture

o The page body consists out of a menu and a regular text element

o A foot text and an Email address should be specified by TypoScript at the

bottom of the page