Developpement d Extensions 01

Developpement d'extensionsExtensionKey: Copyright2007,ChristianBELLET,,www.typo3journal.com

ThisdocumentispublishedundertheOpenContentLicense availablefromhttp://www.opencontent.org/opl.shtml

ThecontentofthisdocumentisrelatedtoTYPO3 aGNU/GPLCMS/Frameworkavailablefromwww.typo3.com

Table of Contents

Developpementd'extensions.....................1Introduction....................................................................1 Aquoiasert?..........................................................1 Utilisationdukickstarter...............................................1 Generalinfo................................................................2 Setuplanguages........................................................3 NewDatabaseTables................................................3 Loadpresetfields.......................................................5 Ecrituredesfichierssurleserveur.............................6 Dveloppementlocal.....................................................7 Crationd'enregistrements........................................7

Rcuprationdesfichiers...........................................8 ConfigurationduTCA.................................................8 Insertionduplugin....................................................10 ConstantesetSetupdel'extension..........................10 Utilisationd'untemplateHTMLpourlerendudansle frontend.....................................................................11 Fonctionsconnaitre...............................................11 Complterledveloppement......................................13 Configurationavecdutyposcript..............................13 Ajouterunliensuruneimagepourl'agrandir..........15 Changelog.....................................................................15

IntroductionA quoi a sert ?Cedidacticielpourobjectifdevousprsenterdemaniresimpleetconciselacrationd'extensionsousTYPO3 Nousallonsconstruireuneextensionassezsimplepourgrerunelistedecontacts.Cetteextensionutiliserauntemplate htmlcontenantdesmarqueurs.Pourchaquecontact,nousauronsunnom,unprnom,unnumrodetlphoneetune adresse.Nousallonsgalementajouteruneimagepourchaquecontactafindecompliquerunpeuleschoses:o) Pourvousaiderdanscetteapprentissage,vouspouveztlchargerl'extensiondfinitive,l'installerdansTYPO3afinde visualiserlecontenudesfichiersdudidacticiel.

Utilisation du kickstarterRendezvousdanslegestionnaired'extensions(ExtensionManagerouEM)pourdveloppervotre1reextension.

Developpementd'extensions1

Danslalistedroulante,choisissezMakenewextension.Sicetteoptionestabsente,c'estqueleKickstarter,l'outilpour creruneextension,n'estpasinstall.Jemodremespropossurl'utilitduKickstarter.LeKickstartern'estpasunditeur maisilvasimplementprparerlesfichiersncessairespourcodervotreextension.Iln'endemeurepasmoins indispensable.

Entrezensuiteunecld'extension.Cellecidoittreunique.Vouspouvezenregistrerofficiellementvotrecld'extension dansleTERencliquantsurlelienrouge,justeendessousdunom.Notezquedansmoncas,j'aichoisidenepasuploader cetteextensiontestsurlerepositorydetypo3.org.Pouruneextensionlocale,jevoussuggredoncdecommencervotrecl paruser_suividunom.Danslecascontraire,onvitedemettreununderscorecarcecaractreseratoutdemme supprimdanslesnomsdefonctionparexemple...cequipeutprterconfusion.

Onentreicilacld'extensionquijelerappelle,doittreunique.

Cliquezensuitesurupdatepourrechargerl'assistantDeveloppementd'extensions2

Nousdevonsaupralableremplirquelquesinformationssurlefontionnementdenotreextension.Commenonsparlui donnerunnometunedescriptionenanglais.CliquezsurlacroixsitueprsdeGeneralinfo.

General infoL'tatinitialestalphaetils'agitd'unpluginfrontend.

CliquezensuitesurleboutonUPDATE

Setup languagesNousallonsicidfinirleslanguespourlesquellesnouseffectueronsunetraduction.Slectionnezlalanguefranaisepuis surUpdate.

New Database TablesCetteoptionvanouspermettred'intgrerdestablesenrapportavecnosextensionsdanslabasededonnesTYPO3.Ne renseigneziciqueleschampsncessaires,TYPO3s'occupedureste!Ainsi,inutiledemettreunchampuniqueid.Voici quelqueschampsrservsparTYPO3:uid,pid,endtime,starttime,sorting,fe_group,hidden,deleted,cruser_id,crdate, tstamp,data,table,field,key,desc,all,and,asensitive,bigint,etc.Lalisteexhaustivedeschampsrservsfiguredansle Kickstarter. Vousremarquerezquenotretableestprfixeparlenomdel'extension,cecipourviterdecrerdestablesportantdes nomsidentiques.Deplus,cecipermetderprerplusfacilementuneextensionetsaousestablesdanslabasede donnesdeTYPO3.


Voiciquelquesoptionsbienpratiquesquevouspouvezcocheravantdecrerleschampsdansvotretable: AddDeletedfield:ajouteunstatutsupprimmaisconservel'enregistrementenbase AddHiddenflag:permetdecacherlesenregistrements AddAccessgroup:permetderendrevisibledesutilisateursfrontendlalistedesenregistrements Manualorderingofrecords:permetd'ordonnermanuellementlalistedesenregistrementsenmodelist Allowedonpages:permetdecrerdesenregistrementssurdespages,ladiffrencedesdossierssystmes AllowedinInsertRecordsfieldincontentelement:autoriselacrationdeliensdepuisleslmentsde contenu AddSaveandnewbuttoninforms:optionbienpratiquepourcrerdesenregistrementslasuitedesautres ajouteunboutonSaveandnew

Nousallonscrerleschampssuivants:firstname,lastname,street,postcode,cityetimage

CliquezensuitesurUpdatepourrechargerleformulaireetafficherplusd'options.Dsormais,letypetinytextapparait.Vous pouvezchangercechampenvarcharsibesoin.Vouspouvezvousinspirerdel'exemplecidessous.Lacrationdes autreschampsnedevraitpasvousposerdeproblme.

VoicicommentnousallonsdemanderauKickstarterd'insrerunchampimagedanslatabledenotreextension.


Commevouslevoyez,ils'agitd'unchampdetype'files'.Cliquezsur'Update'pourafficherdesoptionssupplmentaires.

Vousaveziciunexempledel'affichagedanslebackendlorsquevotreextensionserainstalle.Vouspouvezchoisiricile nombred'imagesparenregistrement.Nousn'avonsbesoinqued'uneseuleimagemaisnouspouvonsaugmenterlataille maximale1000ko.VouspouvezgalementcocherShowthumbnails. Notezquenousvouspouvezajouterd'autreschampsetchoisirunchampdetypeRTEpourenrichirunedescriptionavec desstylesparexemple.

Load preset fieldsLoadpresetfieldsrsumeleschampsrenseignspourvotreextensionetvouspermetd'encrerd'autres, automatiquement.Ilsuffitjustedeslectionnerletypedechoixquevoussouhaitezdupliqueretdecliquerensuitesur Update.C'estunpetitgaindetemps. C'estterminpourlatable.CliquezsurUpdatedanslemenugauchepuischoisissezensuitel'optionFrontendPlugins. CetteoptionsertmatrialisernotreplugindanslebackenddeTYPO3. Indiquezlenomdevotreplugintelqu'ildevraitapparaitre.


Nousconservonsl'optionsuivante:Addto'InsertPlugin'listinContentElements' Cliquezsurupdatepourmettrejourvotreextension.NousavonsbienttterminnotretravaildansleKickstarter. Cependant,ilseraitutiledeconfigurernotreextensionenTyposcriptpourlarendreplusdynamique.CliquezsurStatic TypoScriptcodeetinsrezdescommentairesdanslapartieConstantsetSetup.Evitezpourl'instantdemettreducode danscesdeuxchampscarcettemthodedefonctionnementestconsidreparcertainscommeobsolte.Quoiqu'ilen soit,leKickstartervagnrerdeuxfichiers:constants.txtetsetup.txt.Ensuite,vousaurezlechoixd'inclureounoncesdeux fichiersdansvotreconfiguration. Pourinformation,voicilasyntaxe://Addto:"IncludestaticfilefromExtension" t3lib_extMgm::addStaticFile($_EXTKEY,'static/example/','exampleTyposcriptConfigI');

Ils'agiticidelamthodestatiqueaddStaticFiledelaclasset3lib_extMgm. Lepremierparamtreestlacldevotreextension.Lesecondparamtreindiquel'emplacementdesgabaritsinclure: include_static.txt,constants.txt,setup.txt,setup.txt,editorcfg.txtetinclude_static_file.txt.Selonladocumentation, include_static.txtcontientunelisted'identifiantsdelatablestatic_templates.Lefichierinclude_static_file.txtcorrespondau champIncludestatic(fromextensions)soitlechamp'include_static_file'delatable'sys_template'. Parexemple:EXT:css_styled_content/static/,EXT:da_newsletter_subscription/static/,EXT:cc_random_image/pi2/static/

Letroisimechampcorrespondl'intituldanslaboitedeslection. Toutcecipeutvoussemblercompliquer,doncjenem'attardepastropsurcepointpourralisernotreextension.Nous verronsplustardlecontenudufichierext_tables.phpquifaitusagedecettemthode.

Commevouspouvezleremarquercidessus,j'aiinsrdescommentairesdanslesdeuxsections... Vousavezsansdouteremarqulaboitesuivantedansl'outilKickstarter.Ellevouspermetdecrerplusrapidementdes champsendupliquantunchampdjcr.

Ecriture des fichiers sur le serveurIlnerestedoncplusqu'gnrerlesfichiersdenotreextensionpuisl'installer. Pourcefaire,cliquersurViewresultpuischoisissezlechemind'installation.


PuisWRITE.Installezvotreextensioncommevousleferiezpourn'importequelleautreextension.TYPO3nousdemande decrernotretableainsiqu'unrpertoire.

Voicinotreextensiondansl'EM:

Dveloppement localL'extensionatgnreparlekickstarter.Lesfichierssontactuellementsurleserveuretlaoulestablesonttcres enbasededonnes.


Cration d'enregistrementsNousallonscrerdeuxenregistrementssurunepagedenotresite.CrezunepageappeleContacts.

Passezensuiteenmodelistesurcettepageetcrezquelquesmembres.

Deuxpetitesremarquesaprsavoirenregistrdespersonnesdansnotrelistedecontactdepuisleformulairedesaisie: Lechamp"Codepostal"n'estpasassezlong(latailleestde4) Lesenregistrementssontclasss/affichsparuid,cequiesttoutsaufexplicite

Rcupration des fichiersNousallonstlchargerparFTPledossieruser_contactlistsitudans/typo3/typo3conf/ext/(extensionlocale)

Configuration du TCAEditezensuitelefichiertca.php.Cefichiercontientnotammentlaconfigurationdeschampsdanslebackend.Reprez l'entrepostcode(lenomduchampdanslabasededonnes)carc'estcellequinousintresse.


"postcode"=>Array( "exclude"=>1, "label"=> "LLL:EXT:user_contactlist/locallang_db.xml:user_contactlist_members.postcode", "config"=>Array( "type"=>"input", "size"=>"5", "max"=>"5", "eval"=>"int", "checkbox"=>"0", "range"=>Array( "upper"=>"1000", "lower"=>"10" ), "default"=>0 ) ),

TCAsignifieTableConfigurationArray.Vousneserezdoncpassurprisderetrouveruneconfigurationsousformede tableau!Modifiezsizeetmaxvotreconvenance,sachantquelogiquement,lavaleurdesizeestinfrieurelavaleur demax. Voustrouvezd'autresinformationssurleTCAsurcettepage:http://typo3.org/documentation/documentlibrary/core documentation/doc_core_api/4.0.0/view/4/2/ Ecraserensuitelefichiersurleserveuraveccettenouvelleversion. Lefichierext_tables.phpestcomplmentairedetca.php.Onretrouvedanscedernier,ladfinitiondetousleschamps tandisqueext_tables.phpcontientleurreprsentation. Nousavonsicilaconfigurationquigrel'affichagedesdonnesdanslebackend.Lavaleur'label'indiquelechamputilis enpriorit;ils'agiticide'uid'.Nousdevonsafficherleprnometlenomafinquecesoitplusexplicitepourl'utilisateur.Nous allonsdoncmodifier'label'etremplacer'uid'par'firstname'pourleprnometajouter'label_alt'pourleschampsalternatifs, savoir'lastname'.Normalement,'label_alt'contientdesvaleursquiserontaffichessi'label',icifirstname,n'estpas renseign.Nousallonsdoncforcerl'affichageavec'label_alt_force'=>'1' Voicilecode:$TCA["user_contactlist_members"]=array( "ctrl"=>array( 'title'=>'LLL:EXT:user_contactlist/locallang_db.xml:user_contactlist_members', 'label'=>'firstname', 'label_alt'=>'lastname', 'label_alt_force'=>'1', 'tstamp'=>'tstamp', 'crdate'=>'crdate', 'cruser_id'=>'cruser_id', 'sortby'=>'sorting', 'delete'=>'deleted', 'enablecolumns'=>array( 'disabled'=>'hidden', 'fe_group'=>'fe_group', ), 'dynamicConfigFile'=>t3lib_extMgm::extPath($_EXTKEY).'tca.php', 'iconfile'=> t3lib_extMgm::extRelPath($_EXTKEY).'icon_user_contactlist_members.gif', ), "feInterface"=>array( "fe_admin_fieldList"=>"hidden,fe_group,firstname,lastname,street,postcode,city, image", ) );

TYPO3gardelaconfigurationencache.Jevousrecommandedoncdeviderlecacheaprschaquemodification.Vous pouvezgalementdsactiverlecachedeTYPO3lorsquevousdveloppezdesextensions.Modifiezlavaleurdansl'outil d'installationdeTYPO3:[EXT][extCache]=0

Voicinanmoinscequevousdevriezretrouveraprscesdeuxmodifications:


Lacrationdefichierstemporairesdans/typo3/typo3confseradsactive.

InsertiondupluginInsrezensuiteunpluginsurlapageContacts.

L'affichagedesdonnesdanslefrontendestgerparuneclasse.Celleciportelenomdevotreextensionetellesesitue dansledossierpi1/.Dansnotreexemple,ils'agitdufichierclass.user_contactlist_pi1.php.Ouvrezlefichieravecvotre diteurfavori.Onremarquequeuser_contactlist_pi1estuneextensiondelaclassetslib_pibase.Cettedernirecontient unemultitudedefonctions!Cependant,lefonctionnementdenotreextensionestpluttsimpledoncn'ayezaucunecrainte. Lamthodemain()n'estqu'unexemple.Vouspouvezdonclacommenterousupprimersoncontenu.

Constantes et Setup de l'extensionNousdisposonsdedeuxmthodespourconfigurernotreextension. 1soitenrenseignantconstantesetsetupdepuislegabaritracinedenotresite.Ilfaudrasimplementcomplterleschamps "Contants"et"Setup" 2soitenprocdantuneinclusiondetemplatestatique.Ils'agitduchamp"Includestatic(fromextensions)" La1remthodeestefficaceetprouve.Cependant,jevaisvousmontrercommentintgrerdesconstantesetunsetup depuislechamp"Includestatic"voqudanslasecondemthode. Lesconstantessontplacesdanslefichierpi1/static/default_contactlist/constants.txtetlesetupestplacdanslemme rpertoire,fichiersetup.txt.NousavonsvoqulamthodedeclasseaddStaticFile.Celleciestappeledanslefichier ext_tables.php.Voicilasyntaxe: t3lib_extMgm::addStaticFile($_EXTKEY,"pi1/static/","ContactList"); o$_EXTKEYestlacldel'extension,lesecondargumentreprsentelecheminverslesfichiersetletroisimeargument faitofficedelgendedanslebackend.Ainsi,vousretrouverezcetteinformationdanslapartie"Includestatic"commele montrel'imagecidessous:


Aveclalignesuivante,jechangelalgende:t3lib_extMgm::addStaticFile($_EXTKEY,'static/default_contactlist/','Defaultsetup');

Utilisation d'un template HTML pour le rendu dans le frontendNousallonsutiliseruntemplateHTMLcomposdemarqueurspourafficherlesinformationsdenotrebasededonnesen frontend.Cefichiers'appelerauser_contactlist_template.html Lefichieruser_contactlist_template.htmlcontientunelistedesmarqueursetdesubparts: ###TEMPLATE###estunsubpartpouridentifierlegabaritutilisparnotreextension. ###ITEM###estgalementunsubpartpouridentifierunenregistrementdanslabasededonnes. Nousavonsensuitedesmarqueursremplacerparleschampsdansnotrebasededonnes: ###FIRSTNAME###,###LASTNAME###,###STREET###,etc.

Nousallonsconfigurerlesetupdenotregabaritpourluiindiquerosesituecetemplatehtml.//Monextension plugin.user_contactlist_pi1{ templateFile=EXT:user_contactlist/pi1/user_contactlist_template.html }

Laclassemodifierestsituedanslefichierpi1/class.user_contactlist_pi1.php.Danscetteclasse,onretrouvecomme danstouteextension,unemthodecharged'afficherlesinformationenfrontend:main($content,$conf)o$contentestle contenuaffichertandisque$confcontientlesinformationsindiquesdanslesetupdevotregabaritroot. Parexemple,$conf['templateFile]contientlecheminversnotregabaritHTML.Nousallonsprogressivementrestreindre notrechampd'actionauxmarqueurs.Ceuxciserontremplacsparleschampsdenotrebasededonnes.Larequteen baseestexecuteaveclafonctionexec_SELECTquery

Fonctions connaitreLesautresmthodesconnatre: fileResource()oucObj>FILEquivalirelecontenudenotretemplateHTMLcommeleferaitunfreadavecphp getSubpart()rcuprelecontenuentredeuxsubparts substituteMarkerArrayCached()s'occupeduchercherremplacerpourlesmarqueurs/subpartsetlecontenu rcuprenbase pi_wrapInBaseClassestunesimplemthodequiretournelecontenuentourparuneclasseportantlenomde notreextension. Exemple:$content

VoicicequevouspouvezfairesimplementavecquelquesconnaissancesenPHP,unelgrelecturedel'APIpourles principalesfonctionsetdelapratique:


CodePHP

functionmain($content,$conf) { $this>conf=$conf; $this>pi_setPiVarDefaults(); $this>pi_loadLL(); ##Debug //t3lib_div::debug($this>conf['templateFile']); ##Autredebug //t3lib_div::debug($this>cObj>fileResource($this>conf["templateFile"])); #PageID //$GLOBALS['TSFE']>id #Getthetemplatecode $this>templateCode=$this>cObj>fileResource($this>conf["templateFile"]); $template=array(); #Getthetotaltemplate $template['total']=$this>cObj>getSubpart($this>templateCode,'###TEMPLATE###'); #Getarow $template['item']=$this>cObj>getSubpart($template['total'],'###ITEM###'); #ConstructtheDBquery $this>orderby='lastname,sorting'; $res=$GLOBALS['TYPO3_DB']>exec_SELECTquery('*','user_contactlist_members','pidIN('. intval($GLOBALS['TSFE']>id).')',''.$this>orderby.'','',''); #Loop $markerArray=array(); while($row=$GLOBALS['TYPO3_DB']>sql_fetch_assoc($res)){ #Fillthemarkersineachitem $markerArray['###FIRSTNAME###']=$row['firstname'];//getfirstname $markerArray['###LASTNAME###']=$row['lastname'];//getlastname $markerArray['###STREET###']=$row['street'];//getstreet $markerArray['###POSTCODE###']=$row['postcode'];//getpostcode $markerArray['###CITY###']=$row['city'];//getcity $markerArray['###IMAGE###']=$row['image'];//getpicture //Fillthetemporaryitem $contentItem.=$this>cObj>substituteMarkerArrayCached($template['item'],$markerArray); } //Fillthecontentwithitemsin$contentItem $subpartArray['###CONTENT###']=$contentItem; //FilltheTEMPLATEsubpart $content=$this>cObj>substituteMarkerArrayCached($template['total'],array(), $subpartArray); //return$content; //$this>pi_getPageLink($GLOBALS['TSFE']>id) //$this>pi_linkToPage('gettothispageagain',$GLOBALS['TSFE']>id) } //$content=''; //Returncontent return$this>pi_wrapInBaseClass($content);

Lesfonctionnalitsdel'extensionsontassezsimplesilestvrai!

Voicilersultatenfrontend:


Pasmalmaislerendudesimageslaissedsirer.Forcment,nousavonsrcuprlechampl'tatbrut.

Complter le dveloppementNousrcupronsenfrontendlesdonnesstockesenbasededonnes.L'affichageestcorrectmaisnouspouvonsrajouter despropritsentyposcriptpouramliorerlerendu.

Configuration avec du typoscriptLesextensionsenvoyesdepuisnotrebackendsontstockesautomatiquementdanslerpertoire uploads/tx_usercontactlist NouspourrionscoderdirectementlabaliseimagedanslecodePHPmaiscen'estpaspropre.Nousallonsdoncutiliserun cObjectdetypeIMAGE.L'intrtdecettemthode?IlserapossibledepasserdesparamtresenTyposcriptdirectement depuisleSetupdenotregabaritpourcontrolerdynamiquementl'affichagedesimages.Ilenseraitdemmepourd'autres typesd'objetbienvidemment. LafonctiongetImage(fonctionmaison)seraajoutenotreclasseuser_contactlist_pi1

//FunctionforFEimagerendering functiongetImage($imageName){ //getimageconfigurationinthetemplateSetupfield $confImage=$this>conf['image.']; //buildtheimagepath $confImage['file']="uploads/tx_usercontactlist/".$imageName; //returnIMAGEcontentobject return$this>cObj>IMAGE($confImage); }

Modifionsensuitelamthodemain():

//$markerArray['###IMAGE###']=$row['image'];//getpicture $markerArray['###IMAGE###']=$this>getImage($row['image']);

VouspouvezgalementmodifierleSetupdevotregabaritaveclecodesuivant://Monextensionperso plugin.user_contactlist_pi1{ templateFile=EXT:user_contactlist/pi1/user_contactlist_template.html #cObjIMAGE image=IMAGE } Developpementd'extensions13

Voicilersultatenfrontend:

Vouspouvezpasserd'autresparamtresentyposcriptcommeparexempleunebordureautourdel'image(border),une largeur(width)...

//Monextensionperso plugin.user_contactlist_pi1{ templateFile=EXT:user_contactlist/pi1/user_contactlist_template.html #cObjIMAGE image=IMAGE image{ border=1 file.width=80 }

Voicilerendu:


Ajouter un lien sur une image pour l'agrandirVouspouvezgalementcrerunliensurchaqueimagepourl'agrandirdansunpopup.//Monextensionperso plugin.user_contactlist_pi1{ templateFile=EXT:user_contactlist/pi1/user_contactlist_template.html #cObjIMAGE image=IMAGE #IMAGEproperties image{ border=2 file.width=80 imageLinkWrap=1 imageLinkWrap{ bodyTag= wrap=| width=130 height=130 JSwindow=1 JSwindows.expand=0,0 enable=1 } } }

Unenouvellecapturepourvousmontrerlersultat:

ChangelogVersion0.0.1 1reversiondeladocumentationetdel'extensiondetest


Developpement d Extensions 01

Documents

Transcript of Developpement d Extensions 01