As you know from the installation TYPO3 is divided into two areas - the backend and the frontend. While the frontend is for everyone out there on the web - it is the website TYPO3 produces - only you and your content contributers are allowed access to the backend - the administration of the website. A username and password is always required.

Backend modules

In the backend there are a lot of modules in the menu to the left. When you want to edit and create pages, select the "Page" module:

Each module has it's own content to display. Since you are the administrator you have access to all modules. But there are other "normal" users - they have access only to the modules you have selected for them!

Try to click the various modules in the menu and see how the content frame changes.

The header "Web" in the menu is called a "main module" and all the modules listed under it are "sub modules". All modules under the "Web" main module will show a dual view in the content frame - the page tree (left #1) and the module content in relation to a page from the page tree (right #2).

The page tree can be expanded by clicking the plus/minus icons (#3). This works exactly like folders on your own computer. Actually you can think about the page tree as a directory structure where web pages are organized in a hierarchy with main pages, sub pages and sub-sub pages etc.

Clicking titles and icons

The next important thing to know about the page tree is that you can click both the page icon and the page title - and that it makes a difference!

If you click the page title you will see the current module display some content in the right frame:

In this case the "Page" module is the active one and then you will see the content on the page shown in the right frame. From here you can edit it etc. We will soon discuss that.

If you click the page icon instead of the title a little context sensitive menu appears. This is sometimes referred to as a click menu:

Notice: If you use older browsers the menu will not appear close to the icon but in the top frame of the backend instead. Further, be patient - the menu might take a few seconds to appear!

In the context menu you can select options that are related to this page! For most of them it is obvious what they do - try to play around with them if you like. For this example I have selected "Show" which means I will have another browser window opened and see this specific page shown in the frontend:

Notice how this page was shown in the new window by calling the script ".../quickstart/index.php?id=13" (#1). In TYPO3 every page is stored in the database (in a table called "pages") and each of these page-"records" has a unique number (uid). Here the parameter called "id" was set to the value "13" - and apparently that must have been the uid-number of the page called "This week" in the page tree!

Further you can see the page content (#2) is the same as you saw (if you noticed) in the left frame of the Page module when you clicked the title! We will return to that.

Then notice the page header (#3) - here the title of the page we viewed is shown ("This week") but the parent page in the page tree - "Results" - is shown as well. This communicates the logic of the page tree - that the "This week" page is a sub page (child) to the "Results" page (parent).

The final thing to notice is the menu in the left frame. This clearly reflects the hierarchy we also saw in the page tree:

The technical implementation of parents and children

This is for people who wants to understand how the tree structure works technically in the database:

Technically the relationship between a page and sub pages is established by the field called "pid" (parent id/page id) in the pages table in the database - the "pid" field of "This week" page will contain the "uid" value of the page called "Results".

By holding the mouse over the page icon of the "Results" page for a second you will see this title-text appear:

This tells us that the page "Results" has the uid-number "4". We know that the "This week" page had the uid "13" (and the pages "Last week" and "Report results" have uids 12 and 11).

If we go to the module "phpMyAdmin" and browse the "pages" table (which contain all the page header records) we should be able to see this relationship quite easily:

Clearly the three subpages to "Results" has their "pid" field values set to "4" - as we would expect.

Now you have learned that

Maybe you noticed that some pages from the page tree was not shown in the menu of the website? Well, the pages were these:

Not in menu

The "Log in" page (#1) was not shown because the page type was set to "Not in menu". This is useful if you want to create a page which should not appear as a menu item. Still you can access the page by creating a link to it manually - or just type in its id-number in the URL directly!

Setting the "Not in menu" mode for a page is done by editing the page header:

Access restricted page

The "Team pages" page (#2) is not visible because it has been access restricted. This means it will only be shown when a frontend user has logged in. This is covered later in this tutorial. But the short story is that you edit the page header and select the user group you want to allow access for:

sysFolders - what is that?

Finally the two so-called "sysFolders" are not displayed (#3). You create a sysFolder like you created the "Not in menu" page - simply select "sysFolder" as the page type (see previously).

But what is it? Well, by default pages created in TYPO3 are meant to contain web page content. They appear in the menu and can have a title. 95% of all pages are used like that. But pages can also serve as simple containers of database elements that are not meant to be content on a visible web page. This is what sysFolders are for! Use them just like you use folders on your computer's file system to store different files in an organized manner! In the same way sysFolders are "folders" that nicely organize database elements inside TYPO3!

In this specific case the sysFolder "Users" contains the website users that can log in to the website (more about that later on). You can view the content of the sysFolder by using the "List" module (that is the "Explorer" inside of TYPO3...):

Shortcuts

Apart from the page types that did not show up in the menu there are also two mysterious pages with a "shortcut icon":

A shortcut is a neat feature if you have a page (empty, without content on) that should simply jump to another page directly! That is very convenient if you still want the link to appear in the menu for instance!

In our case the "Home" page jumps to the frontpage and the "Results" page to "This week". Try it yourself!

You create shortcuts by editing the page type. For the "Home" page it looks like this:

You use the Element Browser to select a page to refer to. The Element Browser is used to create relations between records and files in TYPO3's editing forms. You can read more details on the Element Browser here.

For the page "Results" the shortcut is a little more fancy - it simply jumps to the first sub page it finds! That is in our case the "This week" page:

The "Shortcut mode" is a so called secondary option to the "Shortcut to page" field - that means the field is only shown (in the palette / top frame) when you click the "More options..." icon (see picture above).

Help at your fingertips!

Now, what might all the other interesting page types do? Well you can find out directly if you just click the little "?" icon close to the field:

Then a window like this pops up:

This is called Context Sensitive Help and can be found for almost all elements in TYPO3 where you need some information about it's function! Use it! It's easy and it's right at your fingertips when you work inside the system!

Now we have looked at the page tree, seen how the page tree is reflected in the website menu hierarchy and how pages can be viewed etc.

The next question is - how is content on a page organized? Let’s take a look at the "This week" page again:

The page content on that page is made up of three page content elements - here numbered 1-3. And because each content element can have a different type you can create pages with very flexible structures! In this case the page consists of a "Text" type content element, then two "Table" type content elements.

Side note: TYPO3 - an element based CMS

This method of constructing pages is a very foundational concept in most websites made by TYPO3. The method of putting together pages of content elements is also known from other CMSs today. This makes TYPO3 an "element-based" CMS. It gives a lot of flexibility but yet it makes the pages consistently designed - as it is one of the objectives of a CMS! The alternative method is a more fixed approach where a page has a fixed number of content areas - one for header, bodytext and image for instance. TYPO3 can do that as well (it can allow for anything you like!) but most likely you don't want that in the end. If you have some questions to professional implementation techniques for template-designs, content elements etc. please look in the tutorials called "Modern Template Building", Part 1 and Part2+3. For now, please note that these documents are on a far higher level than this one and you should take one step at a time if you are a beginner to TYPO3.

Order of content elements

Well, back to the content elements on the webpage; take a look at them in the backend:

Make a comparison of the frontend and backend views now. Can you see how the elements from the backend are clearly the same as those in the frontend?

Try to rearrange a backend element by moving it up in the order:

This will yield this order from the top:

... and on the webpage it looks like:

Parent page of content elements

This is for people who want to understand the technical side of content elements and pages:

Remember how the page records had a field, "pid", which pointed to their parent page? Well, page content elements (records) - and any other database record configured for the TYPO3 backend - have that as well. Looking in the phpMyAdmin module again we see that the page content elements (table: "tt_content") with uids 18-20 all point to the page uid "13" - the uid of the "This week" page:

It's that logical!