Platinum sponsors
Tutorials
This tutorial only is an introduction on how to create a basic extension with content output on the front end. This example should only give an idea on how the extension kickstarter works and what needs to give a frontend output.
In this tutorial an extension should be written for a soccer club where editors should be able to fill in a player profile. The profile should show a player' picture, name and if needed some more detail fields.
With the extension kickstarter wizard the framework for the extension can be built very easily. With the kickstarter no frontend output will be possible some further coding will be necessary.
First of all login to the backend and click on Extension Manager in the Tools module. Choose Make new extension from the drop-down menu and enter a good extension key – for this example it should be named player_profile.
Enter some general information
about the extension like Title (Player Profile), description (Display profile of soccer player), category (Frontend Plugins), State (alpha), Dependencies (cms), Author Name, Author email.
|
|
New Database Tables
Tablename: tx_playerprofile_listTitle of the table: Display player profile, Add 'Deleted' field: 
, Add 'Hidden' flag: , Add 'Access group' , Manual ordering of records: Allowed on pages: Allowed in 'Insert Records' field in content elements: Add 'Save and new' button in forms: Setup languages
In order to get the extension with a second language (or more) mark German in this case. From now on you can add the appropriate German translation for your fields.
|
|
NEW FIELD: imageEnter field name, field title, field type, Is Exclude-field press update and specify the imagefile properties. Max number of files (1), Max filesize allowed (1000 kb), Size of selector box (1), Show thumbnails.
FIELD: first_nameEnter field name (first_name), field title (First name), field type (string input), Is Exclude-field press update and specify the field properties. Field width (30), Max characters (50), Required
, Create VARCHAR, not TINYTEXT field.
In the backend it should be able to select the extension as a frontend plugin. Therefore Frontend plugin needs to be added in the kickstarter. The title for the plugin will be Player profile (English) and the German translation Spielerprofil. The radio button Add to 'Insert Plugin' list in Content Elements keep checked. The rest can be ignored for this example.
|
|
Later we will add some nice code to specify the width and height of the image. So, add some dummy text (#Constants go here) in the Setup (#Setup goes here) field at Static TypoScript code.
First of all press View result
after the page has reloaded select Local from the Write to location drop-down menu and press OK on the dialog box.
The page will refresh again and a statement will be shown that the Extension got copied successfully to the server.
|
|
|
The framework with the kickstarter is finished now, so the extension Player Profile can be installed
Make the updates and everything is set - so far.
|
|
Go to your page tree structure and create a new page (Our players)
where your player profile should be displayed - later on.Create a new page content element – for instance a regular text element.
Change the type to insert plugin.
From the drop-down menu choose Player profile and save.
Now click on the page icon of Our players and make a New record.
Choose Display player profile
and make some entries for the player profile. For this example Franz as first name and an image.
Save
The framework is done now with the kickstarter. An output on the frontend is not possible yet. In order to make this work some lines of code need to be added.
Being able to edit the current files created through the kickstarter, first of all go back to the extension manager, choose loaded extension from the drop-down menu and click on the text of the new Player Profile extension
.In the extension manager select Edit files from the upper right drop-down menu.
Edit the file pi1/class.tx_playerprofile_p1.php for the player profile output on the frontend. For this example here you can copy and past the code listed here below. In case you check the code you will notice that one line of code for the last name is commented out. This is done to show you later how to extend the extension by the last name field. But for the moment just go for this now.
In order to get a pop-up image with height and width defined edit the file ext_typoscript_setup.txt and also just copy and past the piece of code below.
Save
pi1/class.tx_playerprofile_pi1.php
Complete code with comments
<?php
/***************************************************************
* Copyright notice
*
* (c) 2003 Oliver Hofmann (marketing@viv-it.de)
* All rights reserved
*
* This script is part of the Typo3 project. The Typo3 project is
* free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* The GNU General Public License can be found at
* http://www.gnu.org/copyleft/gpl.html.
*
* This script is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
/**
* Plugin 'Player profile' for the 'player_profile' extension.
*
* @author Oliver Hofmann <marketing@viv-it.de>, Michael Dengler <info@diacc.de>, Andreas Schwarzkopf <info@meinsystem.de>
*/
require_once(PATH_tslib."class.tslib_pibase.php");
class tx_playerprofile_pi1 extends tslib_pibase {var $prefixId = "tx_playerprofile_pi1";// Same as class name – no _ allowed
var $scriptRelPath = "pi1/class.tx_playerprofile_pi1.php";// Path to this script relative to the extension dir.
var $extKey = "player_profile"; // The extension key.
var $conf;
/**
* [Output for image, first name and last name]
*/
function main($content,$conf){$this->conf = $conf;
$content="";
$rows=$this->getItems();
while(list($c,$row)=each($rows)){$this->conf["image."]["file"] = "/uploads/tx_playerprofile/".($row["image"]); //The image field name
$theImgCode=$this->cObj->IMAGE($this->conf["image."]);
$content.=$theImgCode."<br>";
$content.=($row["first_name"])." "; //This outputs the first name
// $content.=($row["last_name"])."<br><br>"; //This is the additional field
//next, the output displayed in a table
$content.="<table border=1><tr><td>".($row["first_name"])."</td></tr>";
$content.="<tr><td>".($row["last_name"])."</td></tr></table>";
}
#t3lib_div::debug($conf);
#t3lib_div::debug($this->getItems());
return $content;
}
/**
* function.
*/
function getItems(){// pid_list is the pid/list of pids from where to fetch the guest items.
$config["pid_list"] = trim($this->cObj->stdWrap($this->conf["pid_list"],$this->conf["pid_list."]));
$config["pid_list"] = $config["pid_list"] ? implode(t3lib_div::intExplode(",",$config["pid_list"]),",") : $GLOBALS["TSFE"]->id;list($pid) = explode(",",$config["pid_list"]);$query = "SELECT * FROM tx_playerprofile_list WHERE pid IN (".$pid.") ORDER BY sorting";$res = mysql(TYPO3_db,$query);
$out=array();
while($row = mysql_fetch_assoc($res)){$out[]=$row;
}
return $out;
}
}
if (defined("TYPO3_MODE") && $TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["ext/player_profile/pi1/class.tx_playerprofile_pi1.php"]){include_once($TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["ext/player_profile/pi1/class.tx_playerprofile_pi1.php"]);
}
?>
ext_typoscript_setup.txt
For resource check also Typo Script reference page 49.
plugin.tx_playerprofile_pi1 {image { file.maxW = {$plugin.player_profile.maxW_single} imageLinkWrap = {$plugin.player_profile.clickEnlarge} imageLinkWrap {enable = 1
bodyTag = <BODY bgColor=white>
wrap = <A href="javascript:close();"> | </A>
width = 400m
height = 400
JSwindow = 1
JSwindow.newWindow = 1
JSwindow.expand = 17,20
}
}
}
ext_typoscript_constants.txt
Here the image size of the thumbnail is defined with 70 pixels.
file.maxW = {$plugin.player_profile.maxW_single} = 70pi1/class.tx_playerprofilebasic_pi1.php
Example code for extension named player_profile_basic
typoscript_setup.txt and typoscript.constants.txt need also to be modified accordingly!
<?php
/***************************************************************
* Copyright notice
*
* (c) 2003 Oliver Hofmann (marketing@viv-it.de)
* All rights reserved
*
* This script is part of the Typo3 project. The Typo3 project is
* free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* The GNU General Public License can be found at
* http://www.gnu.org/copyleft/gpl.html.
*
* This script is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
/**
* Plugin 'Player profile' for the 'player_profile_basic' extension.
*
* @author Oliver Hofmann <marketing@viv-it.de>, Michael Dengler <info@diacc.de>, Andreas Schwarzkopf <info@meinsystem.de>
*/
require_once(PATH_tslib."class.tslib_pibase.php");
class tx_playerprofilebasic_pi1 extends tslib_pibase {var $prefixId = "tx_playerprofilebasic_pi1";// Same as class name – no _ allowed
var $scriptRelPath = "pi1/class.tx_playerprofilebasic_pi1.php";// Path to this script relative to the extension dir.
var $extKey = "player_profile"; // The extension key.
var $conf;
/**
* [Output for image, first name and last name]
*/
function main($content,$conf){$this->conf = $conf;
$content="";
$rows=$this->getItems();
while(list($c,$row)=each($rows)){$this->conf["image."]["file"] = "/uploads/tx_playerprofilebasic/".($row["image"]); //The image field name
$theImgCode=$this->cObj->IMAGE($this->conf["image."]);
$content.=$theImgCode."<br>";
$content.=($row["first_name"])." "; //This outputs the first name
// $content.=($row["last_name"])."<br><br>"; //This is the additional field
//next, the output displayed in a table
$content.="<table border=1><tr><td>".($row["first_name"])."</td></tr>";
$content.="<tr><td>".($row["last_name"])."</td></tr></table>";
}
#t3lib_div::debug($conf);
#t3lib_div::debug($this->getItems());
return $content;
}
/**
* function.
*/
function getItems(){// pid_list is the pid/list of pids from where to fetch the guest items.
$config["pid_list"] = trim($this->cObj->stdWrap($this->conf["pid_list"],$this->conf["pid_list."]));
$config["pid_list"] = $config["pid_list"] ? implode(t3lib_div::intExplode(",",$config["pid_list"]),",") : $GLOBALS["TSFE"]->id;list($pid) = explode(",",$config["pid_list"]);$query = "SELECT * FROM tx_playerprofilebasic_list WHERE pid IN (".$pid.") ORDER BY sorting";$res = mysql(TYPO3_db,$query);
$out=array();
while($row = mysql_fetch_assoc($res)){$out[]=$row;
}
return $out;
}
}
if (defined("TYPO3_MODE") && $TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["ext/player_profile_basic/pi1/class.tx_playerprofilebasic_pi1.php"]){include_once($TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["ext/player_profile_basic/pi1/class.tx_playerprofilebasic_pi1.php"]);
}
?>
Not only the picture and first name of a player should be displayed further more also the last name for instance. The framework is done now with the kickstarter and the files for frontend output got edited. To extend the current extension now by the last name an additional field needs to be added and defined in the class file.
First of all go back to the extension manager, loaded extension and click on the text of the new Player Profile extension
to being able to edit the current files created through the kickstarter.In the extension manager select Backup/Delete from the upper right drop-down menu and click on start new.
To add the last name field to the database table click Display player profile.
Simply add the new field name (last_name) and field title (Last name), field type (string input), Is Exclude-field press update and specify the field properties. Field width (30), Max characters (50), Required
, Create VARCHAR, not TINYTEXT field.ATTENTION! The extension manager will overwrite all files after you press update and view result! Save the code of the files pi1/class.tx_playerprofile_pi1.php and ext_typoscript_setup.txt
Update
View result
Go to the extension manager and choose edit files from the drop-down menu of the Player Profile extension.
Click on Edit file of the pi1/class.tx_playerprofile_pi1.php and add the additional code to output the last_name database field which is already inserted and commented out in the pi1/class.tx_playerprofile_pi1.php
$content.=$row["last_name"].";
If you want to create your own extension based on this example code here, build your own framework with the kickstarter and follow the instructions mentioned here. In the class file search and replace playerprofile with the original extension name player_profile_basic. Take care, that you leave the underscore _ away in case your extension name contains one. For example your new created extension is named my_gallery, this should be mygallery.
Instead of using php class you can also use TypoScript for an extension e.g. player_profile_2 in the template setup field to get a frontend output. This example is a little bit different regarding the functionality. First of all you should see the player image and its for instance last name, by click on player overview list you will get detail.
page.10.subparts.CONTENT > // overwrites statements in the root template
page.10.subparts.CONTENT = CONTENT
page.10.subparts.CONTENT {table = tx_playerprofile_2_listextended // takes the table created with the kickstarter
select.pidInList = this // the current pid where the plugin is installed – could be also an uid
wrap = <table>|<tr><td><a href="javascript:history.back()">back to list</a><td></tr></table> // link back to player overview list
renderObj = COA
renderObj.10 = IMAGE // definitions for the image start here
renderObj.10.file.import = uploads/tx_playerprofile_2/ // the upload folder for the images
renderObj.10.file.import.field = image // defines that the image field should be taken
renderObj.10.file.import.listNum = 0
renderObj.10.stdWrap.typolink.parameter.data = TSFE:id
renderObj.10.stdWrap.typolink.additionalParams.dataWrap = &playeruid={field:uid}renderObj.10.stdWrap.wrap = <tr><td>|</td></tr> // image put in first table row
renderObj.10.stdWrap.typolink.no_cache = 1
renderObj.20 = TEXT
renderObj.20.field = first_name
renderObj.20.wrap = <tr><td>|</td></tr> // first name field displayed in second table row
renderObj.30 = TEXT
renderObj.30.field = last_name
renderObj.30.wrap = <tr><td>|</td></tr> // last name field displayed in third table row
}
// Start of conditions for the above typoscript code, similar to if / else statement
[globalVar = GP:playeruid > 0]
page.10.subparts.CONTENT.select.where = 1=1
page.10.subparts.CONTENT.select.andWhere.dataWrap = uid={GPvar:playeruid}[else]
page.10.subparts.CONTENT.wrap = <table>|</table>
# page.10.subparts.CONTENT.renderObj.20 > // the first name will be shown on the overview list because here it is commented out
page.10.subparts.CONTENT.renderObj.30 > // the last name is taken out from being displayed
[global]
// Conditions end here
The code for the extended verions of player_profile is different from the basic verison in the following points:
List view available
Single view available
<?php
/***************************************************************
* Copyright notice
*
* (c) 2003 Oliver Hofmann (marketing@viv-it.de)
* All rights reserved
*
* This script is part of the Typo3 project. The Typo3 project is
* free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* The GNU General Public License can be found at
* http://www.gnu.org/copyleft/gpl.html.
*
* This script is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
/**
* Plugin 'Player profile' for the 'player_profile' extension.
*
* @authorOliver Hofmann <marketing@viv-it.de>, Michael Dengler <info@diacc.de>, Andreas Schwarzkopf <info@meinsystem.de>
*/
require_once(PATH_tslib."class.tslib_pibase.php");
class tx_playerprofile_pi1 extends tslib_pibase {var $prefixId = "tx_playerprofile_pi1";// Same as class name
var $scriptRelPath = "pi1/class.tx_playerprofile_pi1.php";// Path to this script relative to the extension dir.
var $extKey = "player_profile"; // The extension key.
var $conf;
/**
* [Put your description here]
*/
function main($content,$conf){$this->conf = $conf;
$content="";
$GLOBALS["TSFE"]->set_no_cache();
if(t3lib_div::GPvar("player")){ $row = $this->getSingle(t3lib_div::GPvar("player"));$this->conf["image."]["file"] = "/uploads/tx_playerprofile/".$row["image"];
$theImgCode=$this->cObj->IMAGE($this->conf["image."]);
$content.="<table border=0><tr><td></td><td>".$theImgCode."</td></tr>";
$content.="<tr><td>Name:</td><td>".$row["last_name"]." ".$row["first_name"]."</td></tr>";
$content.="<tr><td>Year:</td><td>".$row["year"]."</td></tr>";
$content.="<tr><td valign=top>Nationality:</td><td>".$row["nationality"]."</td></tr>";
$content.="<tr><td>Position:</td><td>".$row["position"]."</td></tr>";
$content.="<tr><td valign=top>Former clubs:</td><td>".nl2br($row["club"])."</td></tr>";
$content.="<tr><td>Favorite clubs:</td><td>".$row["favorite_club"]."</td></tr>";
$content.="<tr><td valign=top>Hobbies:</td><td>".$row["hobbies"]."</td></tr>";
$content.="<tr><td valign=top> Favorite meal:</td><td>".$row["food"]."</td></tr>";
$content.="<tr><td valign=top>Music:</td><td>".$row["music"]."</td></tr>";
$content.="<tr><td valign=top>Profession/studies:</td><td>".$row["profession"]."</td></tr>";
$content.="<tr><td valign=top>Message to the fans:</td><td>".$row["message"]."</td></tr>";
$content.="<tr><td colspan=2><a href=index.php?id=".$GLOBALS["TSFE"]->id.">back</a></td></tr></table>";
}
else {$rows=$this->getItems();
while(list($c,$row)=each($rows)){$this->conf["image."]["file"] = "/uploads/tx_playerprofile/".$row["image"];
$theImgCode=$this->cObj->IMAGE($this->conf["image."]);
$content.="<table border=0><tr><td></td><td>".$theImgCode."</td></tr>";
$content.="<tr><td>Details -->:</td><td align=center><a href=index.php?id=".$GLOBALS["TSFE"]->id."&player=".$row["uid"].">".$row["last_name"]."</a></td></tr></table>";
}
}
#t3lib_div::debug($conf);
#t3lib_div::debug($this->getItems());
return $content;
}
/**
* function.
*/
function getItems(){// pid_list is the pid/list of pids from where to fetch the guest items.
$config["pid_list"] = trim($this->cObj->stdWrap($this->conf["pid_list"],$this->conf["pid_list."]));
$config["pid_list"] = $config["pid_list"] ? implode(t3lib_div::intExplode(",",$config["pid_list"]),",") : $GLOBALS["TSFE"]->id;list($pid) = explode(",",$config["pid_list"]);$query = "SELECT * FROM tx_playerprofile_list WHERE pid IN (".$pid.") ORDER BY sorting";$res = mysql(TYPO3_db,$query);
$out=array();
while($row = mysql_fetch_assoc($res)){$out[]=$row;
}
return $out;
}
/**
* function.
*/
function getSingle($uid){// pid_list is the pid/list of pids from where to fetch the guest items.
$config["pid_list"] = trim($this->cObj->stdWrap($this->conf["pid_list"],$this->conf["pid_list."]));
$config["pid_list"] = $config["pid_list"] ? implode(t3lib_div::intExplode(",",$config["pid_list"]),",") : $GLOBALS["TSFE"]->id;list($pid) = explode(",",$config["pid_list"]);$query = "SELECT * FROM tx_playerprofile_list WHERE pid IN (".$pid.") AND uid = ".$uid." ORDER BY sorting";$res = mysql(TYPO3_db,$query);
$row = array();
$row = mysql_fetch_assoc($res);
return $row;
}
}
if (defined("TYPO3_MODE") && $TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["ext/player_profile/pi1/class.tx_playerprofile_pi1.php"]){include_once($TYPO3_CONF_VARS[TYPO3_MODE]["XCLASS"]["ext/player_profile/pi1/class.tx_playerprofile_pi1.php"]);
}
?>
