web programming 12) typo3 a php cms
TRANSCRIPT
Web Programming12) Typo3 a PHP CMS
Emmanuel BenoistFall Term 2013-14
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1
A CMS called Typo3
3 parts
Author and administrator of a web site
How to implement a new template
Programming for typo3
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 2
Management of a Web Site
Old Web Site Content Management
DreamweverFrontpage... (emacs)
HTML FileFTP Transfert
Web Server
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3
What is a Content ManagementSystem (CMS)?
Web server
Admin−interface
Browser
Administrator
Browser
User
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 4
What is a Content ManagementSystem (CMS)?No More HTML
The look is centralized
We use “templates”
Redactor concentrates on his business
Redaction
Translation
Collection of data
Advantages
Web site easier to manage
Look centralized
Nobody cares about layout apart from the professionals
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5
Typo3
An Open Source CMSBased on Open source technologies
Unix or Windows
Apache
PHP
MySQL
Totally free
Doc online http://www.typo3.org
Mixed CMS
Used to maintain an arborescence of pages
Application can be developed to build a portal
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 6
The three columns of Typo3
First ColumnThe main modules
Page, View, List, Info, Access, Functions, Filelist, Images
Second ColumnThe main tree (or forest)
1 tree represents the “context portals”
The branches are the element of the menu
Click on the name of a node : the node is displayed in thethird column
Click on the icon : a local menu is displayed
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7
The three columns of Typo3 (Cont.)
Third ColumnThe Work Space
Depends on the module and the node in the tree
Contains some icons:
Disket : savePencil : editTrash : deleteX : close (without saving)X and disket : close and save...
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 8
Basis TasksEdit an existing page
Click on module “page”
Select your page
The content of the page appears in the work area
You can add, update or remove content
You may insert content in the “normal” part of the page
At any time, see a preview with the magnifying glass
Insert a new content element
Click on the “new record” icon
Choose a “typical page content”
Fill the content of the fields : header and text
Validate with the icon: save and quit (X and a disket)
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9
Basis Tasks (Cont.)
Upload an image
Rename your file (locally)
Select the “Images” module
Select your directory on the server
Click on the icon of the directory,
choose upload in the menu
Select your file
Insert an image in a page
Insert a new content element containing an image
(or change the content element type)
Select the already uploaded image in your directory
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 10
Basis Tasks (Cont.)Insert Elements in the news column
In the page module, select your page
In the “Right” column, insert your content
Insert a new element (select any type)
Change the type to “Insert records”
Once done, choose a name for the rubric (news for instance)
Select the news to display :In Items,Click on the folder iconIn the pop-up window, select “Aktuell” sysfolderChoose the news you are interested in.
The size of the main column will be adapted automatically.
Insert in the last column
Do the same in the “Border” part of the page
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11
Administration TasksCreate a new page
Select the page where you want to insert your new page
Click on the icon of the file
In the menu select “new”
Choose insert inside (as a child)
Or insert after (as a brother)
Unselect Hide, or you won’t be able to see it (this can bemade after the page has been finished).
Input Title (used in the menu)
Input subtitle (appears as a title inside the page)
Insert content elements in the columns.
Create a version in another language
Do the same as for a new page, but select “Alternative PageLanguage”
You can display all languages in one version of the page mode.
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 12
Back End user managementBack End Users
Autors
Login: http://www.yourSite.com/typo3/
Have a specific menu
Have a restricted set of fields
Admin creates users
In the list Menu, choose the root of your site (with theearth).
You see the list of back end users and back end groups.
One can create a new user.
Admin users have all the power (can see everything and doeverything)Other users belong to groups
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13
Back End user management (Cont.)
BE Users Groups
Contains the menu for the members
Contains the elements to be shown
The tree that has to be displayed
A file mount point
Users and groups
A user can be in more than one group
For instance menu items and root can be in two groups
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 14
RightsVery similar to Unix right management
Each page has one owner and one group
The rights can be set for the owner, the group and the restof the world.
Rights
represented by stars (* = OK) and times (× = NO).for instance
owner ***** adminGroup ***×* HTIEverybody *××××
Symbols correspond to:
Show page: Show/Copy page and content.Edit content: Change/Add/Delete/Move content.Edit page: Change/Move page, eg. change pagetitle etc.Delete page: Delete page and content.New pages: Create new pages under this page.
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15
Rights (Cont.)
The Access menu
Choose the page you want to see
Possible to access to all the pages in one subtree (using adepth parameter).
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 16
Insert Special Content
E-mail Form
In a page, insert a new content element (text for instance)
Change its type to plugin.
Select the sort of plugin: form
Configuration is a bit complicated
Should use the wizard
. . .
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17
Front End UsersFor restricted access
User needs to be identified to be allowed to see something
Username password
How To Create users
Create a page for the login (use the login content type)
Choose the page to go from there
Create a new page whose type is Sysfolder anywhere in thetree (usually near the root).
Click on the icon of the sysfolder and choose new, thenselect Website user or Website user group
Protect a page (or a branch)
Select the page, Click on Edit page header
Select the group for which this page is
Click on include subpages
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 18
Extensions
Categories of extensions
Backend Program started on the server
Backend Module Can be used as menu items on the left
Frontend Change the display of the web site
Frontend Plugins Can be inserted in any page by a BE user
Miscellaneous
Examples
Install an extension
Search online which extension is interresting
Select the desired package
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19
The Data Base that hides behindTypo3
Main tables
page contains all informations about pages
pages language overlay same informations for thealternative languages
tt content contains all the contents of the pages.
be users Back end users (authors)
be groups
fe users Front End users (visitors for pages with restrictedaccess)
fe groups
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 20
Conclusion (CMS)
A lot of different CMS’s on the marketWritten in PHP with a DBWritten in Java with a DBWritten in Java with XML filesWritten in C++ and proprietary solution. . .
PrinciplesContent can be edited by anyoneTemplate must be easy to integrateNew functionalities can be implemented using a given API
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 21
Conclusion (Web Prog.)
Principles:HTTP Request and ResponseSession / Cookies / FormsMulti-layers Architecture
PHP one of many technolgiesJava EE : JPA + JSF + TomcatMicrosoft : .NET +IIS + MS-SQL Serverother technologies: Ruby, Python, Perl, Groovy and Grails, . . .
Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 22