developpement d extensions 01
TRANSCRIPT
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.
Developpementd'extensions3
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.
Developpementd'extensions4
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.
Developpementd'extensions5
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.
Developpementd'extensions6
PuisWRITE.Installezvotreextensioncommevousleferiezpourn'importequelleautreextension.TYPO3nousdemande decrernotretableainsiqu'unrpertoire.
Voicinotreextensiondansl'EM:
Dveloppement localL'extensionatgnreparlekickstarter.Lesfichierssontactuellementsurleserveuretlaoulestablesonttcres enbasededonnes.
Developpementd'extensions7
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.
Developpementd'extensions8
"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:
Developpementd'extensions9
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:
Developpementd'extensions10
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:
Developpementd'extensions11
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:
Developpementd'extensions12
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:
Developpementd'extensions14
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
Developpementd'extensions15