Easy 5 minute TYPO3 v4.

0 websites
The step by step guide for people coming to TYPO3 from CSS, HTML & PHP backgrounds. Copyright 2006, matthew@manderson.co.uk, <matthew@manderson.co.uk> 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 and written for v4.0.1 upwards - a GNU/GPL CMS/Framework available from www.typo3.com and www.typo3.org

Table of Contents
Easy 5 minute TYPO3 v4.0 websites....................1
Introduction....................................................................1 Part 1 The main configuration...................................1
1. Who is this document for?.................................................1 2. TYPO3 already installed?...................................................1 3. Resolving file permissions on shared host servers..............2 4. Build your HTML web page template with markers..............3 5. Build your default CSS file..................................................5 6. Add a root page for your new website.................................6 7. Add a root setup template to TYPO3..................................9 8. Add new pages with the create many pages function........12 9. Uploading files / images...................................................14

Part 2 Additional configuration...............................14

10. Add an extension - auto_alias.........................................14 11. View the front end with friendly page urls........................14 12. A short note on TYPO3 page caching.............................15 13. Add your own external PHP scripts to TYPO3................15 14. Create a front end user and password protected pages...17 15. Add a BE editor with permissions...................................18 16. Character encoding........................................................18 17. Web server folder browsing............................................19 18. Your first v4.0 extension? .............................................19 19. End Note.......................................................................19

Respect to.....................................................................20

Introduction
1. Who is this document for?
Newbies! Congratulations! I hope you have found this document early enough in your TYPO3 experience! TYPO3 is ridiculously easy to use to get a basic site up and running in minutes. I am talking the sort of basic site made by first time TYPO3 users. A simple menu and pages with nice URL's. The hardest part is installation and the next hardest part is getting to learn the key areas to help you get a TYPO3 site running quickly. For this document I expect you to have already installed TYPO3 and be wondering where to go next for concise information. Many newbies to TYPO3 come from a similar background. A background of HTML and some CSS. You may have the added advantage of some PHP scripting or general programming as well. This document will give you the raw nuts and bolts of a basic TYPO3 website using terminology like HTML and CSS while introducing you to the core areas of TYPO3 without expecting you to know it all from day one. This document does not tell you ALL the ways to build a TYPO3 website. It only illustrates what I consider to be a very concise and relevant way. I have titled this document Easy 5 minute TYPO3 v4.0 websites. The clock is ticking so let's get started!

Part 1 The main configuration

2. TYPO3 already installed?
To enjoy this document you are expected to have already installed TYPO3 v4.0.1 or higher and ideally be looking at the reassuring Error! No pages found on the rootlevel! message. Don't worry if you have already passed this stage you'll still find help with your subsequent steps in this document. Many newbies do get stuck with the TYPO3 installation stage and in my experience most of the problems are 1) Not TYPO3 related, 2) Caused by not reading the installation documents carefully enough and 3) A general lack of server related experience. So I'll leave installation for the other resources to help you.

Easy 5 minute TYPO3 v4.0 websites - 1

[Fig 1. Showing TYPO3 error message no pages found on the root level] When you first install TYPO3 on your server or shared web host server and view the web site where you think it should be you are typically faced with this error. In fact this is not really an error for a first time installation just a gentle reminder that TYPO3 requires you to do some more work to get a web site running. Please review the Additional install resources if you are having trouble getting to this stage.

Additional install resources:

If you need help finding documents on installing TYPO3 start by looking at the INSTALL.txt in the root folder of your installation. For the most up to date version look for INSTALL.txt on the http://wiki.typo3.org website. There is a main wiki page for http://wiki.typo3.org/index.php/TYPO3_Installation_Basics. There are various other install documents you can find at http://typo3.org/documentation/ and if you get a specific problem ask about on the install mailing lists at http://lists.netfielders.de/cgi-bin/mailman/listinfo Ideally you should use newsreader software for the best experience.

3. Resolving file permissions on shared host servers

TYPO3 was originally envisaged to run on dedicated web servers where the server administrator has more control. TYPO3 is great for big complex websites but more people are now using TYPO3 for ordinary websites. As TYPO3 gets installed on cheaper shared hosts the question of file permissions moves into a new realm of server specific idiosyncrasies. Shared hosting generally means you don't have root access and so you can't always set permissions exactly as they should be. You'll know if you have a permissions problem because you will be getting 'Permission denied' type messages whether in FTP, TYPO3 or the SSH. If you think your permissions are fine just move onto the next section. Permissions problems sometimes do not crop up until some later date so be prepared to come back to this section. Most permissions problems can be identified in the Basic Configuration section of the TYPO3 Install Tool.

[Fig 2. Showing TYPO3 Install Tool - Basic Configuration section] Remember you can always access your TYPO3 Install Tool in the /typo3/install/ folder of your website. http://www.yourwebdomain.com/typo3/install/ Typically two problems are faced: 1) If you uploaded and unpacked TYPO3 as your normal web account user eg by FTP, TYPO3 will have problems writing to certain files and folders. Remember that TYPO3 is a PHP script that runs as the web server. Because you uploaded as the web user and not as the web server TYPO3 scripts will not be able to write to your web user files and folders. To fix this you ideally need to ask your web host to grant the the web server user write permissions on the TYPO3 folders. You can sometimes get around this by
Easy 5 minute TYPO3 v4.0 websites - 2

enabling the group to write. Generally the web server user will be in the web users group so this allows the web server to write as needed. 2) If you uploaded TYPO3 as root to your web server your normal web user account will not be able to write to files and folders. To fix this scenario you need to grant the web user write permissions on the TYPO3 folders. Both these situations are not TYPO3 specific but just general Linux webserver issues. Bad permissions will reduce the usability of TYPO3 (unless intended) and so you need to resolve this for normal usage of TYPO3. By fixing these permissions problems you allow yourself as the web user to upload files via ftp etc. and you allow TYPO3 to upload files from inside the TYPO3 Administration Backend. The TYPO3 Backend or BE for short is where you administer TYPO3 from. You can access this typically at http://www.yourwebdomain.com/typo3/ More on this later.

Additional permissions resources:

I have not found a good guide about file permissions so if you are able to include anything here please do. In the meantime refer to the INSTALL.TXT file of your package. There is a useful section in the document Typo3 Installation and Upgrading about safe_mode and open_basedir you should read this section if you have problems. Here is a link: http://typo3.org/documentation/document-library/installation/doc_inst_upgr/current/view/5/1/

4. Build your HTML web page template with markers

This section is where we really start to get into building your new website. The HTML web page template file is the starting point for typical websites. This is exactly the sort of template you will be used to writing in notepad or VIM for example. If you used FrontPage or Dreamweaver, not to worry, we only need the final HTML output. Making major developemnt changes to HTML templates inside TYPO3 i.e. on the web server is a little time consuming while you edit / save / upload / save / view / download / edit / save / upload etc. so better to get yourself a working html file locally on your own computer before trying to let TYPO3 loose on it. I always suggest you validate this file with W3C before integrating it into TYPO3. I currently use HTML 4.01 Strict. This seems to be the most stable standard. However TYPO3 currently requires a bit of tweaking to get this so you may prefer to use the TYPO3 default of HTML 4.01 Transitional. For the purpose of this document and to keep to the 5 minutes I have drafted a simple HTML layout for you. Copy this copy and save it as www_template.html Example: [Simply copy this HTML into a new file and save it as www_template.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta name="description" content="description"/> <meta name="keywords" content="keywords"/> <meta name="author" content="Author"/> <link rel="stylesheet" type="text/css" href="default.css" media="screen"/> <title>Transparentia</title> </head> <body> ###DOCUMENT_BODY### <!-- This template taken from http://www.openwebdesign.org/viewdesign.phtml?id=3089&referer=%2Fmost_popular.phtml -->

<div class="container"> <div class="main"> <div class="header"> </div> <div class="content"> <div class="item"> <h1>###pageTitle###Transparentia###pageTitle###</h1> ###normal### <h1>Porttitor posuere</h1> <div class="descr">Jun 13, 2006 by Vulputate</div> <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p> <cite>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</cite> Easy 5 minute TYPO3 v4.0 websites - 3

###normal### </div> <div class="item"> ###border###Border content###border### </div> <div class="item"> ###right###Right content###right### </div> </div> <div class="sidenav"> ###mainNav### <h1>Something</h1> <ul> <li><a href="index.html">pellentesque</a></li> <li><a href="index.html">sem justo</a></li> <li><a href="index.html">sociis natoque</a></li> <li><a href="index.html">convallis</a></li> </ul> ###mainNav### ###left### <h1>Search</h1> <form action="index.html"> <div> <input type="text" name="search" class="styled" /> <input type="submit" value="" class="button" /> </div> </form> ###left### </div> <div class="clearer"><span></span></div> </div> <div class="footer">&copy; 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. Template design by <a href="http://arcsin.se">Arcsin</a> </div> </div> ###DOCUMENT_BODY### </body> </html>

4.1 Special ###left### style markers...

In the HTML web page template I listed above you will see I have included some special markers like ###normal###. If you haven't guessed these are where TYPO3 replaces your static content with the dynamic content. Wonderful - more on this later! For the time being you can add as many or as few of these as you envisage you'll need for your project. TYPO3 has what I call system markers. These are the default markers that the four main columns Left, Right, Normal & Border will go into. For ease of future reference consider these names as reserved for these columns, ###left### ###right### ###normal### ###border### The extra marker I inserted into the HTML above called ###pageTitle## is a custom marker I created to insert the page title into this location. Page title is an important factor in Search Engine Optimisation so I like to separate this and force it into <h1>tags. Remember all markers need to surround the text to be replaced. If you don't type something it can't be replaced. Feature? Bug? who knows! Always use this format: Example:
###markerName###You MUST type dummy content here so it will be replaced by TYPO3###markerName###

4.2 Images & the fileadmin folder...

If you browse around your TYPO3 installation you'll see you have a /fileadmin folder. If you haven't found it yet just browse about in your TYPO3 root installation. This is where TYPO3 by default starts to look for files like images etc. For user access reasons you'll discover later on that it is better not to store files direct in this folder but create a new subfolder inside. If you left click on the fileadmin/ globe icon you'll bring up a TYPO3 context menu where you can choose New.

Easy 5 minute TYPO3 v4.0 websites - 4

[Fig 3. The TYPO3 fileadmin folders] Use this New to create your sub folder. I tend to use something like /fileadmin/www_files/ and then fileadmin/www_files/images/ ../scripts ../fonts etc. For this document we'll just work now we'll work with fileadmin/www_files/ So when you reference your files in your html web page template try to use src=fileadmin/www_files/image.jpg etc... If you have not done so already it is time to upload the www_template.html file you created into fileadmin/www_files/www_template.html in preparation for the steps ahead.

Additional resources:
Free HTML templates are available on the Internet just use a search engine to find them. Identify the the content areas you want to be controlled by TYPO3 and include your markers there.

5. Build your default CSS file

Generally, you should put all your styles into external stylesheets. This reduces the download size for each page because the css file will be cached by the browser so it only gets downloaded once. When I develop my initial HTML template for a website I usually leave the style in the head tags as it makes it easier to make the development changes. Once I am happy and the design is more stable I'll move the CSS out to a separate file. In TYPO3 you will need to include a special instruction to tell TYPO3 where this external css file is but more on that later. For the time being simply use my file contents below and save it as screen.css to your fileadmin/www_files/screen.css location. Example: [Just copy this css and save it as the file screen.css]
/*############################################################# Name: Transparentia Date: 2006-08-20 Description: Simple, lightweight and slightly blue. Author: Viktor Persson URL: http://templates.arcsin.se Feel free to use and modify but please provide credits. #############################################################*/ /* standard elements */ * {margin: 0; padding: 0;} a {color: #36C;} a:hover {color: #06F;} body {background: #EEE url(img/bg.gif); color: #444; font: normal 62.5% "Lucida Sans Unicode",sans-serif; margin: 0;} input {color: #555; font: normal 1.1em "Lucida Sans Unicode",sans-serif;} p,cite,code,ul {font-size: 1.2em; padding-bottom: 1.2em;} h1 {font-size: 1.2em;margin-bottom: 4px;} code {background: url(img/bgcode.gif);border: 1px solid #F0F0F0;border-left: 6px solid #39F;color: #555;display: block;font: normal 1.1em "Lucida Sans Unicode",serif;margin-bottom: 12px;padding: 8px 10px;white-space: pre;} cite {background: url(img/quote.gif) no-repeat;color: #666;display: block;font: normal 1.3em "Lucida Sans Unicode",serif;padding-left: 28px;} h1,h2,h3 {color: #367EA6;padding-top: 6px;} /* misc */ .clearer {clear: both;} /* structure */ .container {background: url(img/bgcontainer.gif) repeat-y;margin: 0 auto;padding-bottom: 6px;width: 767px;} .header {background: url(img/header.gif) repeat-x;} /* title */ Easy 5 minute TYPO3 v4.0 websites - 5

.title h1 {color: #FFF;font: normal 2em Verdana,sans-serif;height: 150px;line-height: 150px;marginbottom: 8px;text-align: center;} /* navigation */ .navigation {margin-bottom: 4px;} .navigation a {background-color: #4A91C3;color: #FFF;float: left;font: bold 1.2em "Trebuchet MS",sansserif;padding: 8px 0;width: 19%;border-right: 1px solid #FFF;text-align: center;text-decoration: none;} .navigation a:hover {background-color: #000;color: #FFF;} /* main */ .main {clear: both;padding: 8px 18px;} /* main left */ .sidenav h1,.sidenav ul {padding-left: 12px}; .sidenav {background: #EEE;border: 1px solid #E5E5E5;float: left;width: 200px;} .sidenav h1 {color: #666;font-size: 1.2em;height: 20px;margin-top: 1.2em;} .sidenav ul {border-top: 1px solid #FAFAFA;background: url(img/bgul.gif) repeat-x;margin: 0;padding: 0;} .sidenav li {border: 1px solid #FAFAFA;border-top: none;list-style: none;margin: 0;} .sidenav li a {color: #777;display: block;font-size: 0.9em;padding: 3px 6px 3px 14px;text-decoration: none;} .sidenav li a:hover {color: #111;} /* content */ .content {float: right;width: 520px;} .content .item {padding: 6px 12px;border: 1px solid #EEE;background: #FFF;margin-bottom: 8px;} .content .descr {color: #333;margin-bottom: 6px;} .content li {list-style: url(img/li.gif);margin-left: 18px;} /* search form */ form {padding: 0 0 6px 8px;} .styled {border: 1px solid #DDD;padding: 4px;} .button {background: url(img/search.gif) no-repeat left bottom;border: none;height: 27px;width: 27px;} /* footer */ .footer {background: #FFF;border: 1px solid #EEE;color: #666;font-size: 1.1em;margin: 0 auto;text-align: center;padding: 6px;width: 720px;} .footer a {color: #36C;text-decoration: none;} .footer a:hover {color: #06F;text-decoration: underline;}

You should now have two files in your /fileadmin/www_files/ folder?

[Fig 4. Image showing the new new websites files in www_files]

6. Add a root page for your new website

This is where things start to get a little bit more unfamiliar. You now need to login to the Back End (BE) of TYPO3 to start piecing things together. Visit your website url like this: http://www.yourwebdomain.com/typo3/ This /typo3 sub folder will direct you to the login screen for the Back End,

Easy 5 minute TYPO3 v4.0 websites - 6

[Fig 5. Image showing the BE login screen] Once you are logged in navigate to the main globe by clicking on the Page module: BE > Web > Page

[Fig 6. Look for the small round Globe icon in the page tree frame. Use your mouse to left click on this icon to bring up the special TYPO3 context menu.]

[Fig 7. This context menu is used a lot in the TYPO3 back end and provides handy shortcuts. Choose the New option to start the New record wizard]

Easy 5 minute TYPO3 v4.0 websites - 7

[Fig 8. This New record wizard allows you to create new records. Click the first one called Page (inside)] [Fig 9. You'll be taken straight to the properties section of this new page.] Take your time to look at some of the options but don't be concerned about them all yet. The only part we are interested in now is the Page Title section and the Is root of website parts.

Top Tip:
Staying in this page properties view scroll to the foot of the frame and look for this section below and check the check boxes as shown. This makes it a bit easier to see what is going on on the page. You can always re-enable them later when you know what they are for.

You now need to type in your Pagetitle: and the Alias: and scroll down to check the Is root of website: Now click Save and close document.

Easy 5 minute TYPO3 v4.0 websites - 8

Congratulations you have just created your first page in TYPO3 called 'www'. This page acts as the 'root' page for your website. Right now you can't view this page so let's get straight on with the next step.

Additional resources:
There is an old but good tutorial to give you greater detail about the TYPO3 back end in general. Download and read the Getting Started documentation from typo3.org

7. Add a root setup template to TYPO3

TYPO3 has a special configuration file referred to by several names but here we'll call it the TypoScript setup template. You can add many of these setup templates around your website to help configure different parts of the website. For now we only need one main one we'll call your root setup template. Start by using that special TYPO3 context menu you used before to left click on your new page and select new again. This time you need to select the item Template from the list.

In this new screen you are editing the TypoScript template. Give the template a new name. It does not matter what you put in here just choose something unique from other templates to help you recognise this template later. This is your main template so call it 'main root' or similar.

This setup template will eventually contain special configuration code called TypoScript. This code is extremely powerful
Easy 5 minute TYPO3 v4.0 websites - 9

and is the core feature that makes TYPO3 such a powerful and dynamic tool. TYPO3 allows you to build and configure any form of website you can possibly imagine. The trick is not 'if' TYPO3 can but you learning 'how' to configure TYPO3 to do what you want. At this stage you can't expect to learn TypoScript so I'll help you out and give you the basic code to get your website running. Later on I'll show you places to learn more about this powerful thing called TypoScript!

Look for the section titled Setup: and paste this following code into that field: Example:
# STARTS FILE ############################################ # 1 - STATIC SIMULATE #RewriteRule .* /sub_folder/index.php ############################################ config.simulateStaticDocuments = 1 config.absRefPrefix = http://www.yourwebdomain.com/ config.simulateStaticDocuments_noTypeIfNoTitle = 1 ############################################ # Default PAGE object: ############################################ page = PAGE page.typeNum = 0 page.10 = TEMPLATE page.10.template = FILE page.10.template.file = fileadmin/www_files/www_template.html page.10.workOnSubpart = DOCUMENT_BODY page.10.subparts.normal < styles.content.get page.10.subparts.left < styles.content.getLeft page.10.subparts.right < styles.content.getRight page.10.subparts.border < styles.content.getBorder page.10.subparts.crumbs < temp.crumbs ################################################ # CONFIG ################################################ page.config.admPanel = 1 ################################## # HEAD tags ################################## # needed to get HTML STRICT page.config.doctype = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> page.config.xhtmlDoctype = xhtml_strict page.config.doctypeHTML = 1 page.config.xmlprologue = none page.config.htmlTag_setParams = none page.config.inlineStyle2TempFile = 1 page.meta.description = page.meta.keywords = page.headerData.200 = TEXT page.headerData.200.value = <link rel="stylesheet" type="text/css" href="/fileadmin/www_files/screen.css"> #page.stylesheet = fileadmin/www_files/screen.css #page.shortcutIcon = fileadmin/www_files/favicon.ico page.bodyTag = <body>

Easy 5 minute TYPO3 v4.0 websites - 10

################################## # PUT <Title> INTO MARKER ################################## page.10.subparts.pageTitle = TEXT page.10.subparts.pageTitle.field = title page.10.subparts.pageTitle.field.debugData = 1 ############################################ # Main navigation ############################################ page.10.subparts.mainNav = HMENU page.10.subparts.mainNav = HMENU page.10.subparts.mainNav.wrap = <h1>Main Menu</h1><ul>|</ul> page.10.subparts.mainNav.1 = TMENU page.10.subparts.mainNav.1 { target > NO.allWrap = <li>|</li> } ############################################ # Footer navigation ############################################ page.10.subparts.footMenu = HMENU page.10.subparts.footMenu.special = list page.10.subparts.footMenu.special.value = 1,2,23,24 page.10.subparts.footMenu.1 = TMENU page.10.subparts.footMenu.1.NO { target > noBlur = 1 #pipe &#124; #dot &#183; #linkWrap = |*| | &#124;&nbsp; |*| | linkWrap = |*| | &#183;&nbsp; |*| | } ################################################ # SPECIAL TWEAKS ################################################ #Edit this file to control the SYS header output #typo3_src/typo3/sysext/cms/tslib/class.tslib_pagegen.php # config.pageTitleFirst=1 # Javascript config.removeDefaultJS = external #config.removeDefaultJS = 1 config.inlineStyle2TempFile = 1 tt_content.menu.20.default.1.noBlur = 1 tt_content.menu.20.default.1.target = tt_content.menu.20.1.1.noBlur = 1 tt_content.menu.20.1.1.target = tt_content.menu.20.2.1.noBlur = 1 tt_content.menu.20.4.1.noBlur = 1 tt_content.menu.20.5.1.noBlur = 1 tt_content.menu.20.6.1.noBlur = 1 tt_content.menu.20.7.1.noBlur = 1 tt_content.menu.20.1.1.NO.noBlur = 1 tt_content.menu.20.2.1.NO.noBlur = 1 tt_content.menu.20.default.1.NO.noBlur = 1 tt_content.menu.20.4.1.NO.noBlur = 1 tt_content.menu.20.5.1.NO.noBlur = 1 tt_content.menu.20.6.1.NO.noBlur = 1 tt_content.menu.20.7.1.NO.noBlur = 1 lib.stdheader.stdWrap.dataWrap > lib.stdheader.stdWrap.prefixComment > lib.stdheader.10.1.fontTag = <h1>|</h1> lib.stdheader.10.2.fontTag = <h2>|</h2> lib.stdheader.10.3.fontTag = <h3>|</h3> lib.stdheader.10.4.fontTag = <h4>|</h4> lib.stdheader.10.5.fontTag = <h5>|</h5> lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class > tt_content.stdWrap.dataWrap > tt_content.stdWrap.prefixComment > tt_content.header.20.dataWrap > tt_content.header.20.prefixComment > tt_content.text.stdWrap.prefixComment > tt_content.text.20.prefixComment > tt_content.textpic.20.stdWrap.prefixComment > tt_content.menu.20.stdWrap.prefixComment > #tt_content.menu.20.default.1.NO.allWrap = |<br> Easy 5 minute TYPO3 v4.0 websites - 11

tt_content.menu.20.default.1.NO.allWrap = | tt_content.html.prefixComment > tt_content.list.20.stdWrap.prefixComment > tt_content.image.20.stdWrap.prefixComment > tt_content.table.20.stdWrap.prefixComment > ################################################ # Special cObject wraps ################################################ tt_content.stdWrap.dataWrap = |<div style="height:5px;clear:both;"></div> # ENDS SETUP CODE

Scrolling down, you need to check the check box Is root of website: as this is your root template for your new website.

Keep scrolling and look for the section titled Include static (from extensions): and select the CSS Styled Content

Click save and close to store your changes

8. Add new pages with the create many pages function

This is a really interesting section because here is where you suddenly create many pages at once. This is a great tool to remove repetitive BE work and satisfying as you quickly build the structure of your new website. Navigate: BE > Web > Functions and click the name of the new page you created earlier in the page tree as your first page. This tells TYPO3 to use the Function on the www page. By default new pages will be created inside this selected page. In the main frame make sure you select Create Many Pages from the drop down list.

Easy 5 minute TYPO3 v4.0 websites - 12

When you click the Create pages button your new pages will be created and it is time to view them in the web browser.

Open up a new web browser and navigate to your website. You should see something similar to this:

You can see that the new pages are now showing up in the left menu and that your page titles is showing up in a nice blue font. Let's not stop here there is plenty more to get on with.

8.1 The page tree...

Looking back at the TYPO3 back end you'll see your new pages in this great feature called a page tree that visually shows the structure of your website. Now you have created your first few pages you can see how they relate to each other. It is easy to move pages in this page tree. Just click on the page icon and drag it to the new location. You can also use the left click on the page icon to access the special TYPO3 context menu.

Go ahead and create all the new pages you need.

Easy 5 minute TYPO3 v4.0 websites - 13

Additional resources:
To be finished....

9. Uploading files / images...

When you work with TYPO3 you'll find several ways to do most things. Uploading files is no different. However, for now you need to learn one way to get your files into TYPO3. If you already have your normal FTP client set up just upload with that. I want to introduce you to the Filelist tool which allows you to upload from inside TYPO3. Navigate to: BE > File > Filelist and you'll see the page tree shows folders. These folders mirror the folder structure on your web server. Check this by logging in with your FTP account to see the same folder structure. Folders you create here or by FTP are reflected in either. You can create new folders by left clicking on the folder icon and selecting new from the list. To upload files just click the folder name and you'll see the upload form. [MM insert filelist] [file tree] [context menu] [upload form]

10. Add an extension - auto_alias

TYPO3 does a lot of wonderful things 'out of the box' to help you build powerful websites. However, some wonderful people in the TYPO3 community have contributed extras that we like to call Extensions. These Extensions expand the normal functionality of TYPO3 to help you do even more special things with your website. The general rule seems to be, if everyone probably needs the feature, include it as default, if not just leave it as an Extension that you can each download and install just for your particular website needs. For an idea of all the current wonderful extensions available have a look around the Extensions section at http://typo3.org/extensions/ In this document I am going to help you install a very simple but really useful extension to save you time when you create your pages. This extension will automatically create an alias of each new page you create. I use it a lot because I rely on this alias field a lot but I keep forgetting to manually add it in! You won't really appreciate this until later in the document so for now, just watch and learn how to install your first Extension! To be finished....

Additional resources:

Part 2 Additional configuration

11. View the front end with friendly page urls
In this section you get to view your website ready to go live. Remind yourself of this code and your first extension auto_alias Example: [simulate static code]
####################################################### Easy 5 minute TYPO3 v4.0 websites - 14

# 1 - STATIC SIMULATE # If TYPO3 is in a folder change this line in .htaccess # RewriteRule .* /folder/index.php ####################################################### config.simulateStaticDocuments = 1 config.absRefPrefix = http://www.domain.com/folder/ config.simulateStaticDocuments_noTypeIfNoTitle = 1 #these two last lines, use if you like them! #config.simulateStaticDocuments_pEnc = md5 #config.simulateStaticDocuments_pEnc_onlyP = tx_indexedsearch[type],tx_indexedsearch[sword],type,tx_spdirectory_pi1[valuecat],tx_spdirectory_pi1[value city],tx_srfeuserregister_pi1[cmd],tx_srfeuserregister_pi1[sword],tx_srfeuserregister_pi1[sort],tx_srfeus erregister_pi1[pointer],tx_srfeuserregister_pi1[mode],tx_t3consultancies_pi1[pointer],tx_t3consultancies_ pi1[showUid],tx_t3consultancies_pi1[editAdd],cmd,tx_t3references_pi1[editAdd],tx_t3references_pi1[em],tx_ t3references_pi1[status],tx_t3references_pi1[showUid],tx_studienfuehrer_pi1[id],tx_studienfuehrer_pi1[mod e],layout,style,display,tx_calendar_pi1[category],tx_calendar_pi1[f4],tx_calendar_pi1[f3],tx_calendar_pi1 [f2],tx_calendar_pi1[f1],tx_ttnews[pointer],tx_ttnews[tt_news],tx_ttnews[backPid],tx_ttnews[pS],tx_ttnews [pL],tx_ttnews[arc],tx_srsendcard_pi1[selection_image_width],tx_srsendcard_pi1[selection_image_height],tx _srsendcard_pi1[selection_image],tx_calendar_pi1[viewtime],tx_calendar_pi1[view],tx_calendar_pi1[showUid] ,tx_eeblog[categoryId],tx_eeblog[pointer],tx_eeblog[showUid],tx_newloginbox_pi3[showUid],tx_indexedsearch [ext],tx_newloginbox_pi1[forgot],page,encryptionKey,arc,pL,pS,backPid,backPID,tt_news,cHash,author,thread _uid,conf_uid,view,cat_uid,single_uid,no_cache,L,MP,tx_srsendcard_pi1[cardid],tx_srsendcard_pi1[cmd],tx_s rsendcard_pi1[card_image_path],tx_srsendcard_pi1[image_height],tx_srsendcard_pi1[image_width],tx_srsendca rd_pi1[card_caption],tx_srsendcard_pi1[card_image],tx_spdirectory_pi1[pointer],tx_spdirectory_pi1[value], tx_spdirectory_pi1[modifier],tx_spdirectory_pi1[mode],print, tx_ttnews[backPid], tx_ttnews[tt_news], tx_ttnews[pS], tx_ttnews[pL], tx_ttnews[arc], tx_ttnews[cat], tx_ttnews[pointer], tx_ttnews[swords]

The TYPO3 feature config.simulateStaticDocuments allows your pages to have friendly names like start.html The 'start' part of the url comes from the alias field of your pages. You can change these aliases by editing the page header/properties [image] and changing the page type to advanced. If you followed the steps above to add the auto_alias extension then you will see that your alias fields are already being completed for you automatically based on the page title. To be finished....especially enabling the .htaccess file by renaming it .htaccess instead of _.htaccess

Additional resources:
For more details about the TYPO3 feature simulateStaticDocuments read the core reference in the documentation TSref which is currently located online at typo3.org http://typo3.org/documentation/document-library/references/doc_core_tsref/current/ Look for the section 7.3 CONFIG for simulateStaticDocuments.

12. A short note on TYPO3 page caching

TYPO3 has built in page caching which can confuse newbies. By default TYPO3 caches the changes to pages so if you make certain configuration changes the page displayed in your browser may not show this recent change. To make sure the TYPO3 uses your latest version just clear the cache!

Clearing the cache in typo3conf/ allows any changes you have made to your TYPO3 setup template to be recognised. Clearing the FE cache will allow your TYPO3 generated web pages to be regenerated at the next request. Generally while you are developing the site you will clear both regularly.

Additional resources:
TYPO3 caching is advanced can get complex. There are many discussions about advanced caching so here are a few of the current resources. To be finished....

13. Add your own external PHP scripts to TYPO3

I always think of TYPO3 very simply as a PHP script that links together my plain HTML/CSS/IMAGE files with a Database usually MYSQL. Very often I need to insert my own widgets coded in PHP. Not coming from a programming background I
Easy 5 minute TYPO3 v4.0 websites - 15

find I struggle with creating full extensions in the TYPO3 way although I am close to cracking that now so a topic for another v4 document. So at present I have found that by using the USER and USER_INT TYPO3 content objects cObject I can build complex PHP applications and plug them directly into TYPO3. The trick to this is to extend the main TYPO3 class class.tslib_pibase.php to add my functions/methods in an external .inc or .php file.

13.1 Create your .inc file

Example: [insert the raw .inc file save this file as fileadmin/www-files/scripts/phpscript.inc]
<?php // include the TYPO3 pibase require_once(PATH_tslib.'class.tslib_pibase.php'); /* ** main class to extend TYPO3 tslib_pibase and ** be a parent class to the rest in this file ** */ class user_phpScriptGlobal extends tslib_pibase { /* ** This class acts as a parent class to the ** rest of the class functions in this file */ /* ** This function demonstrates how to get ** TypoScript data from the TYPO3 setup ** template so it can be used in this php ** file. */ function user_setVariable($content,$conf) { /* ** 1) The root template contains a user_func to set the variable of the current language ** 2) This user_setLanguage() funct sets this to session. ** 3) Sample TypoScript: ** #SET TYPO3 DATA TO PHP SCRIPT ** page.10.subparts.phpscript.userFunc = user_phpScriptGlobal->user_setVariable ** page.10.subparts.phpscript.language = EN */ //Set value in PHP from the TYPO3 page template! $setLanguage = $conf[language]; }//ends user_setVariable() function user_showAllSettings() { // DEBUG LOOP THROUGH VARIABLES $content="<table style=\"text-align:left;\" align=left>"; foreach($_SESSION as $sesName => $sesValue) { $content.= "<tr><td>Session : $sesName</td><td>$sesValue</td></tr>"; }//ends for $content.="</table>"; return $content; }//ends function user_showAllSettings }//ends class user_phpScriptGlobal ?>

You are free to add your own functions here and using this approach of extending the main TYPO3 class tslib_pibase allows you to use built in TYPO3 functions and arrays. For example connecting your database is as easy as:
$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery(...);

This is moving into developer level TYPO3 and beyond the scope of this newbie document! For full reference on these topics refer to the Additional resources section further below. At this stage simply output the result of your script into the $content variable.

13.2 Add your USER to the TYPO3 setup template

By adding these following lines to your TYPO3 setup template you tell TYPO3 where to look for your external script and you tell it what function/method to run and whether the script result should be cached. Example:
####################################################### # EXTERNAL PHP Easy 5 minute TYPO3 v4.0 websites - 16

####################################################### includeLibs.phpscript = fileadmin/www_files/scripts/phpscript.inc page.10.subparts.phpscript = USER page.10.subparts.phpscript.userFunc = user_phpscript->showSessions

The phpscript part of this line needs to be unique for each external file you include. The path simply defines the location of your file.
includeLibs.phpscript = fileadmin/...

This following line simply inserts the result of this script into the HTML page marker ###phpscript### so you can see how this can be changed to suit your purpose. The USER part tells TYPO3 it can safely cache the result. If instead you used USER_INT TYPO3 would NOT cache the result so the function will run each time the page is loaded.
page.10.subparts.phpscript = USER

This next line is the line that calls the function/method showSessions. Always prefix your class user_phpscript with the user_ prefix.
page.10.subparts.phpscript.userFunc = user_phpscript->showSessions

The approach I have used here is extremely simple to implement and allows ordinary non TYPO3 php programmers to write php scripts that can easily be implemented into your web pages and further manipulated with the wonderful TypoScript. For more advanced techniques you need to start referring to the core and reference documentation on typo3.org.

13.3 Add your HTML marker

You will have noticed the reference to page.10.subparts.phpscript in the code above. Remember this allows you to insert dynamic TYPO3 content into your plain HTML template file. So make sure that you have added the following code to your HTML template where you want the output of your script to be displayed.
###phpscript###This to be replaced by TYPO3###phpscript###

Additional resources:
You need to refer to the documentation TSref for a fuller analysis of the available cOjects you can use. If you plan to build a full TYPO3 extension highly recommended. To be finished....

14. Create a front end user and password protected pages

One of the many reasons why you might turn to TYPO3 is because you need advanced website features such as access control. TYPO3 has a sophisticated access control allowing you to configure member only pages easily. However for newbies many of you need to create member only pages and it can be confusing. There are several steps to achieve what you want and so I will now introduce how to do it in a simple way. TYPO3 often uses something called a sys_folder. This sys_folder allows you to store data records in various places of the page tree. They are used for many purposes but today you will need to create one of these sys_folders to hold the data records for all your front end users that can login into the website. Note how the term is frontend user as opposed to backend user. In TYPO3 this is an important distinction because the two types of user are handled separately. Many newbies get confused by this. In this section we are only interested in creating logins for normal web visitors to access a private part of your website and these are the frontend users.

14.1 Create a sys_folder called users

Your first job is to create a place to store all your new user logins. Create a sys folder in your page tree as shown. It does not matter what you call it. [image of sysfolder]

14.2 Create a group called members

Left click on this new folder to bring up the context menu and select New. From the available options select Website usergroup and give this group a Grouptitle: of 'Members'. You don't need any other changes so just click the save and close icon. [image of usergroup creation]

Easy 5 minute TYPO3 v4.0 websites - 17

14.3 Create your first user called matthew'

Left click again on this sys_folder to bring up the context menu and select New. From the available options select Website user and give this new user a name and password of 'matthew', 'matthew'. This keeps it simple while you test and you can always change it later. You need to make this front end website user a member of the new group you created. Look for the Groups: section and select the name of your usergroup you called Members. When you are finished click the save and close icon to exit. [image of new user creation]

14.4 Edit constants to set the storage pid:

This is the most important part of the process. You need to tell TYPO3 where you have just stored your website users so BE > Template > and edit the constants of the template. You need to add this line of code and remember to set the pid number to the actual pid number of your sysfolder. You can see the pid number when you hover your mouse over the folder icon.
#add to constants template plugin.feadmin.fe_users.pid = 37

[MM to enter image of template constants]

14.5 Create a login page and a protected page tree

Start by creating two new pages, call the first page 'Login' and the second page 'Member only'. I suggest you create the Login page and then put the Member page inside this page. [image of the two pages]

14.6 Login page

Edit the page and add a login form content element in the normal column. If you want the member to be directed immediately to the member page when they login then browse and click your member only page. [image of the content element login]

14.7 Private Member page

This is the private page so edit the page header and set the access to your Members group. In the same header section look for the & subpages and check this. This means that all pages inside this page will be protected pages. Add also some dummy text in the normal column to let you know when you have reached this page. [image of member only content] View your member page and you will see you get directed to your login page. When you login in you'll see that TYPO3 lets you view the member pages! [image of front end login form] MM to include a way to put the login form into the marker and how to show member/non member content on the same page. To be finished....

Additional resources:
There are many extensions that help you increase this basic functionality if you need it. Search the Extensions Repository to find them.

15. Add a BE editor with permissions

mod.SHARED.colPos_list = 1,2 # Owner be_users UID for new pages: TCEMAIN.permissions.userid = 2 # Owner be_groups UID for new pages: TCEMAIN.permissions.groupid = 3

To be finished....

16. Character encoding

TYPO3 supports character encoding. This simply means that if you want your characters to display consistently you need to define a suitable character encoding and stick to it. Windows machines typically default to windows-1252 or similar but utf-8
Easy 5 minute TYPO3 v4.0 websites - 18

is generally considered more universal and extremely widespread. Only you can decide the best character set for your situation but for this example I'll use utf-8 which is my preferred choice. If you don't set your character coding consistently you'll end up with unusual characters in your pages and database etc. If you set your character after you have already started entering data into TYPO3 you'll find that the data is probably stored incorrectly and you see funny characters showing in your web pages that looked okay when you first entered them. Sorry, but you'll need to re-type them in. That is why it is best to define your character set from the outset. Here's how to do it. Example:
// Add this line to the bottom of your /typo3conf/localconf.php file // This setting can also be configured in the TYPO3 Install Tool $TYPO3_CONF_VARS['BE']['forceCharset'] = 'utf-8';

TYPO3 will now add a special <meta> tag to your web pages instructing browsers that your encoding is utf-8 like this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

If you use an external php script to send email that relies on data from your TYPO3 website remember to set the email header character encoding so the email recipient mail client can decode the email properly
$headers.= "Content-type: text/html; charset=utf-8\r\n";

The general rule is to set the Character set wherever you are able to set the content type. NB: I could do with some help from a database expert to advise if there is anything special in TYPO3 that would require the chosen database to have a specific character set defined?

Additional resources:
http://www.w3.org/TR/html4/charset.html There are quite a few references to encoding and character sets in TYPO3 so refer to TSref and specific extension documentation if you experience problems.

17. Web server folder browsing

Remember that by default many webservers seem to allow folder browsing. This is a problem as people will easily be able to see your plain text files and folder structure. I tend to use two methods to prevent this. 1. 2. Add this to your .htaccess file IndexIgnore */* Add an empty index.html file to each folder

18. Your first v4.0 extension?

Well 5 minutes is certainly not enough time to show you how to build your first TYPO3 extension however, as a starting point I'll point you in the right direction. I have found that for non PHP programmers extension development is a struggle mainly to understand your t3lib_div::_POST() from your class user_phpScript extends tslib_pibase. Before you can venture into the world of TYPO3 extension programming you need to learn to code your PHP scripts the TYPO3 way. Once you crack this you'll find it no problem. TYPO3 development needs to adhere to many programming standards that normal PHP scripting lets you avoid. Let's start learning how to clean up your code. The core document for this is TYPO3 Coding Guidelines you should read this and start coding the TYPO3 way. this will help you code consistently and help you when you need to read core TYPO3 scripts. http://typo3.org/documentation/document-library/core-documentation/doc_core_cgl/current/

19. End Note

It is important for me that this document has identified the audience correctly and communicates these TYPO3 concepts effectively. When you use this document consider any difficulties or omissions I may have made and tell me how I could
Easy 5 minute TYPO3 v4.0 websites - 19

have improved it. I am happy to accept revisions so if you re draft sections please send them to me for insertion. I see a lot of conversation on the mailing lists that TYPO3 does not have enough documentations. I disagree. You in places the documents are bit but messy to locate and my be considered out of date. However TYPO3 remains backwards compatible. I am still happy to go back to very old documents and I find the principles remain the same. TYPO3 has improved yes but it has not changed the fundamentals. I think part of the problems newbies face is 1) They do not appreciate how big and complex TYPO3 is! 2) It really is not possible to write a single tutorial about TYPO3. The only TYPO3 book that was published illustrates this clearly. So if you want to learn TYPO3 in depth you need to slowly work your way through all the documentation you can find. Yes that will take many many hours and don't expect to remember or learn it all in one go. Keep going back over the same documents. 1-3 months is still the minimum and at this stage you are really only just getting into the meat of TYPO3 as an application. Enjoy TYPO3!

Additional resources:
TYPO3 has a large community you are recommended to download and newsreader and subscribe to the mailing lists. Generally I find that the search engines do a great job of indexing TYPO3 related materials so use them. remember to always prefix your search query with TYPO3 so that only TYPO3 related results come back. As many results may be in German or French etc. use the translation feature of the search engine to give you a reasonable translation. Your main references will be: TYPO3 documentation Search engines Newsgroups Videos

Respect to...
A few people have volunteered their support to contribute and review this document. They may not have actually done this yet but I am assured they will. If you read this in years to come and I have done a runner I am sure these people will be able to help with your query! Patrick Gaumond Patrick.Gaumond@dap.ulaval.ca Tyler Kraft headhunterxiii@yahoo.ca Kees van der Hall KvdHall@xs4all.nl An eternal thanks always go to Kasper Skaarhoj and the entire TYPO3 community of contributors and developers.

Easy 5 minute TYPO3 v4.0 websites - 20