Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

TemplaVoila/VideoTutorial

From TYPO3Wiki
Jump to: navigation, search

notice - Note

This is a work in progress. This is not a tutorial, just common ground for a couple of people (Denyerec, Randomresult) to collude whilst planning an extended tutorial video. Eventually this page will accompany the video with notes, but that is quite some way away yet!)

Is the video-tutorial ready? (last change in april) Where is a link to it? --Daniel Brüßler 12:12, 28 August 2008 (CEST)

warning - Merge

This page should be merged with the page TemplaVoila

Quickstart Video

Denyerec proposes to record a series of videos to take a "newbie" from checking the server configuration through to installing TYPO3, installing TemplaVoila, writing a basic HTML skeleton and performing mappings. Finishing up with adding FCE's and an editor account.

This page will outline the rough storyboard for the movie and, when finished, will contain the notes and code samples required.

Issues requested for coverage

  • All places you can insert TypoScript to get things to run (Templates, extension templates etc) - nd
  • Multilanguage TV elements - Randomresult

Welcome

Welcome to a TYPO3 and TemplateVoila "quickstart" video, a tutorial that will, hopefully, take you right from downloading TYPO3 for the first time all the way to deploying your first basic website. Although it's called a "quickstart" it will by no means be particularly quick, there's a lot of material to cover!

Throughout this tutorial I will be making references to the Apache webserver, MySQL and the linux operating system. Although TYPO3 can be made to function on different operating systems and so forth, it is beyond the scope of this document to cover them. In all of the videos I use Ubuntu 7.10 server, installed on an Intel Pentium desktop.

No animals were harmed in the making of this production. This video is also suitable for Vegans, and people with nut allergies.


Basic setup

Basic Environment

Before we go anywhere near TYPO3 itself, we need to ensure that you are able to both install and configure your web environment. As this video is more oriented toward TYPO3 and not server management I am going to highlight the simplest approach I know of. First of all, you need to have a webhost or server that provides "Shell" access via SSH, along with either wget (A command you can run on the server to grab remote files) or FTP. I use Dreamhost for inexpensive site hosting, the performance isn't too great but they support all the features I need to run TYPO3 and a very affordable price. If you're looking for a host and need to know what to look for, the following checklist is a rough guide:

Required:

  • SSH/Shell access
  • FTP access
  • Apache based hosting
  • Image Magick
  • GD graphics library
  • cURL support
  • mod_rewrite support
  • .htaccess support

Recommended:

  • wget
  • nano / vi (These are text editors you can use whilst logged into a shell)
  • Ability to use symlinks

The ability to use symlinks on your host is not essential, but it is favorable. It allows you to run many TYPO3 sites from one installation of the source code, which can save time and space, as well as allowing for much easier upgrades. I'll expand on that in the installation section.

If you can tick the boxes on all of those then you're pretty much good to go, so long as your host also meets the minimum requirements for running TYPO3 (That is, PHP and MySql versions, etc) . If you are missing any essential components contact your hosting provider and see if you can get them installed.

notice - Note

Although installation without shell access is possible, it's really much easier to work with a host that allows you to use a shell, as well as a host that supports all the required features. It is often easier to find a compatible host than it is to waste time fighting with a poor server configuration!

Bear in mind you can make do with less, but you working around installation and configuration issues is not what this tutorial is about.

SSH & Putty config

First thing to do is connect to your host/server via SSH. I use PuTTY available here: http://www.chiark.greenend.org.uk/~sgtatham/putty/ Feel free to use your terminal client of choice, PuTTY just works for me! You should simply need to enter your hosts's www address or IP and hit connect. You'll then be prompted for a username and password, enter the details provided by your host / admin and you'll arrive at a shell prompt. Depending on your server configuration, you may well need to use the command 'sudo' before some of the commands that appear in later sections. This is usually required when using CHMOD or other commands that alter file permissions.

Once logged in at the shell prompt, type:

 wget

If you get an error "Command not found" then you're going to need to upload your typo files via FTP, or install wget. On Ubuntu to install wget you would use the following:

 sudo apt-get install wget

In the next section we will look at the Apache configuration which may require you to use apt-get (Or your distribution's equivalent) to install things such as ImageMagick. If are unable to install these tools contact your host and see if they will provide them for you.

Apache and PHP configuration - expand on owner & why this is important

Log in to your server via SSH. you will need to navigate to the web root, the location your webserver looks for to start serving pages. In many cases this is /var/www/ and in this tutorial you'll see /home/www/sozu.local/htdocs/ being used as that's where I have setup the test environment.

Once you're there, load up your text editor as we're going to create a test file to check out some details. I use nano on my system, so instructions will be relevant to that.

   nano phpinfo.php

Once there, enter the following:

PHP script:
<?php
  phpinfo();
?>

Hit ctrl+X to exit and save, then visit your website in your web browser. This will give you a readout on your server configuration. Search the page for:

  • GD
  • cURL
  • ImageMagick
  • safe_mode
  • safe_mode_exec_dir
  • memory_limit
  • mod_rewrite.

Ideally you want safe_mode to be off, but if it's turned on most of the time you can work around the problems it throws up. Memory_limit should also be 64M or greater. If it's set to any value less than this you can run into difficulties further down the line. Once again, reconfigure this yourself if necessary or ask your host to do it.

The specifics of server management and safe_mode workarounds are beyond the scope of this quickstart, so it's best to overcome these issues using IRC or Google if they crop up, and then return to this guide.

If you're missing any components you'll have to install them or ask your hosting provider to install them for you. Installing on ubuntu is usually a question of using:

 apt-cache search <name>

 for example:
 apt-cache search imagick  (Which will return php5-imagick)

Followed by:

 apt-get install <name>
 for example:
 apt-get install php5-imagick

Back at the shell prompt type:

   ls -al

Check out the owner and group of the file you created, along with the owner and group of the directory (Which will appear at the top of the list next to .. ) This is important to note, because we will need to make sure Typo3 has "write" access to some folders. It's possible that your login and Apache run with different permissions.

Using Nano or another editor, create another file as follows called testfile.php:

PHP script:
<?php
  $ourFileName = "testFile.txt";
  $ourFileHandle = fopen($ourFileName, 'w') or die("can't open file");
  fclose($ourFileHandle);
?>

Visit the script in your browser. This should create a file called "testFile.txt" in the same folder as the script. List the directory contents again and look at the owner and group of the file. Note them down, as you may need them later. You can delete the testfile.php script now, it is no longer needed.

Finally, just check for imagemagick using:

 find / -name composite 2>/dev/null

or

 find / -name combine 2>/dev/null

You'll get a result for one, or the other. Only one of these will be necessary, as you will have either composite OR combine. Composite is the more recent. Note which one it is as you'll need that to configure ImageMagick later. Next do:

 composite -version

(or combine -version) This will show you which IM version you're using. Note it down also. (Obviously only one of these will be necessary, as you will have either composite OR combine.)

Preflight Summary

Should should by now have confirmed that your server is suitable and you have all the required tools to perform an installation of Typo3. You should also have confirmed the user/group that Typo3 will use for read/write access, and the location and version of your imageMagick installation.

Installation

TYPO3_Installation_Basics

  • installation & CHMOD on relevant folders
    • PHP Errors in ext manager if any - enable cURL, explain memory limit.
    • Set language to UTF-8 (not required in 4.2?) Make setDBInit to: SET NAMES utf8;
    • Set font DPI and graphics options
    • Run image tests to check GD and IM setup
  • Review frontpage and explain error (No pages found on rootlevel or such)

Templating Overview

  • Explain how TV hooks into a HTML skeleton
  • Write a basic HTML skeleton, explaining good practice w/CSS
    • Template to contain areas for: Header, Left Menu, Breadcrumb, Content, Ad block, Footer w/copyright span, Footer Menu.
  • Expand on the use of ID's and classes WRT TV
  • No need for meta but toss it in anyway so the page stands alone if necessary (Client review etc)
    • Make sure 2 column FCE code exists in template to allow expansion on FCE's later
  • Upload template files to /fileadmin/template


Find the needed files here : templavoila-videotutorial-files

Installing TV

  • Create page tree with function tool. ~ 10 pages, some sublevels to demo menu
  • Create root template - explain WTH this is
  • Install TV and dependencies - watch for CSC static!
  • Install Quixplorer
  • Populate root template with bare essentials to get visible progress on frontend (TV basics)
  • Create DS/TO from template file
  • Explain and create base mapping (Content area only)

Expanding on Mapping

  • Explain a basic TEXT element
  • Explain how to map other elements (Header etc)
  • Explain TSOPS and map TEXT element to TSOP
  • Explain different mapping modes, not sections yet!
  • Map remaining template elements to TSOPs

Basic TS

  • Return to the TypoScript Template and explain constants and setup and static templates
  • Link CSS in with headerdata - explain why use headerData and not page.includeCSS (Conditional comments)
  • Add meta to headerdata as an example. Add in basic config rules.
  • Explain a basic HMENU/TMENU and set one up
  • Bind menu to TSOP, show in frontend
  • Create a custom menu of 3 hand picked items / demonstrate folder full of shortcuts.

FCE

  • Explain what an FCE is
  • Create one using the main template file
  • Create a FCE creating an image with text on it templavoilavideotutorial-overviewimage-withtext
  • SHow it in action
  • Explain the plugin that allows a table layout to control the fields in the backend what is this called?

Extension Templates

  • Demonstrate using an extension template to include a different CSS file, or unmap a footer or such.

RealURL

RealURL

  • Basic setup using aeUrlTool
  • Watch for "archive" and reserved words!

Localisation

  • Check with Randomresult / Uschi about best approach

notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info