Torsdag, 16 maj 2013 00:00

Sådan bygger du et modul til Joomla fra bunden - del 2

Skrevet af 

I sidste indlæg lærte du hvordan du bygger dit eget simple modul. I dette indlæg vil vi udbygge det med flere parametre og finde et formål til modulet.

Download

0: Vi laver kaffen

Vi skal have defineres hvad modulet skal bruges til. Jeg har i denne sammenhæng valgt at bygge et modul, som skal vise 3 sponsorere. Modulet vil have følgende funktionaliteter:

  • Mulighed for 3 billedere
  • En blur funktion når musen er over billedet
  • Vise en kort beskrivelse af sponsoren når musen er over. 
  • Vælge om linket skal åbne i en ny fane eller vindue. 
Skal lige gøre opmærksom på at dette IKKE vil virke med Joomla 2.5, da jeg bruger Twitter Boostrap, som først blev integreret i Joomla 3.0. Du kan dog fjerne linjen hvor bootstrap indgår, så virker det fint i Joomla 2.5. Det eneste som ikke virker er Tooltip. (Det kan man jo leve uden)

1: Vi fortsætter med at kode

Hvis du bruger SublimeText, så "Drag'n drop" mappen "mod_hejverden" til SublimeText vinduet. Mappens indhold vil nu blive listet i venstre side. Jeg synes at overskueligheden forøges.

Åben "mod_hejverden.xml"

I denne fil skal vi have tilføjet en række parametre til vores modul, som er: 

  • Billed Upload
  • Link
  • Tekst
  • Hvordan linket skal åbnes

Disse parametre skal vi have gange 3, da vi gerne vil have mulighed for at liste 3 forskellige sponsorere (eller det er jo bare billedere med link). 

Billed Upload

Ved at indsætte det nedenstående xml kode efter det sidste <field>, vil der blive vist en knap til at vælge et billed. For at give en lille forklaring på opbygningen.

  • name angiver hvilket navn vi gemmer feltet som. Der må ikke være to felter som har det samme name!
  • type er hvilkens slags felt det er. I denne sammenhæng er det "media". Joomla har lavet en række forskellige felter, som du kan benytte.
  • Label er den tekst (navnet) som bliver vist ved siden af feltet
  • description er den tekst som bliver vist i en tooltip, når du fører musen over navnet på feltet.
  • default angiver hvad standard værdien er, hvis der ikke findes en gemt variabel. 


Navn

Det her er feltet hvor du kan skrive sponsorens navn. Den har samme opbygning som "Billed upload" ovenfor. Her skal vi bare ændre type til "text".



Tekst område

Her kan du skrive en kort beskrivelse om sponsoren. Dette har den samme opbygning som de andre, du skal bare ændre type til "textarea".



Dropdown

Vi skal bruge en dropdown til at vælge metoden linket skal åbnes på. Denne gang er det dog ikke opbygget på helt samme måde som de andre. Vi starter ud med et åbnings tag <field>, hvori vi definere hvilket felt vi har med at gøre. Det er fx label, name osv. Det er lidt ligesom dem ovenfor. Derefter afslutter vi med et et afslutnings tag </field>. Inden for disse to tags skal vi definere vores valgmuligheder til vores dropdown.

Eftersom at Joomla valgte at ændre deres backend design i 3.0 bruger jeg ikke den samme opsætning i Joomla 3.0 som i Joomla 2.5. Dette handler kun om design, og har intet med funktionaliteten at gøre.







Tilføj parametrene til xml filen

Nu har du fået en kort introduktion til hvordan du opbygger dine parametre (indstillinger) til dit modul. Nu skal du vide hvor de skal indsættes i din xml file. Meget kort fortalt skal de være listet imellem de to <config> tags. Derudover skal du også være listet imellem et <fields> og et <fieldset>. Jeg tror derfor at det er meget nemmere, hvis du kigger på mit eksempel nedenfor. (Husk at jeg har lavet tre af hver, for vi skal jo tilføje tre forskellige sponsorere)


Hej verden
Martin Kollerup
April 2013
Copyright (C) 2013 Joomlatutorials.dk
GNU/GPL v.2.0 or newer
{{din_email}}
http://joomlatutorials.dk
1.0.0


	mod_hejverden.php
	mod_hejverden.xml
	index.html
	tmpl



                             

2: Nu skal funktionaliteterne bruges

Nu skal vi have bygget disse parametre ind i modulets php. Indtil videre ses disse parametre kun i backend under modulet. Hvis du ændrer dem i backend, vil det ikke ændre noget i frontend. Lad os lave op på det.

Åben "mod_hejverden.php"

Vi starter ud med at hente alle parametre for modulet. Jeg har valgt at gemme parametrene som et object, da jeg synes det ser pænest ud. Du kan ogsså hente dem som $navn1, $navn2 osv.

$sponsor1 				= new stdClass;
						//             Variabel | Standard værdi hvis ingen findes.
$sponsor1->billed 		= $params->get("billed1",false);
						// hvis billedet eksistere, så er URL' rigtigt.          Ellers så indsætter vi vores egen URL først.
$sponsor1->src 			= (file_exists($sponsor1->billed)) ? $sponsor1->billed : JURI::base().$sponsor1->billed;
$sponsor1->navn 		= $params->get("navn1",false);
$sponsor1->beskrivelse	= $params->get("beskrivelse1",false);
$sponsor1->link 		= $params->get("link1",false);
$sponsor1->linktype 	= ($params->get("linktype1","0") == 0) ? "" : 'target="_blank"';
$sponsor2 				= new stdClass;
$sponsor2->billed 		= $params->get("billed2",false);
$sponsor2->src 			= (file_exists($sponsor2->billed)) ? $sponsor2->billed : JURI::base().$sponsor2->billed;
$sponsor2->navn 		= $params->get("navn2",false);
$sponsor2->beskrivelse	= $params->get("beskrivelse2",false);
$sponsor2->link 		= $params->get("link2",false);
$sponsor2->linktype 	= ($params->get("linktype2","0") == 0) ? "" : 'target="_blank"';
$sponsor3 				= new stdClass;
$sponsor3->billed 		= $params->get("billed3",false);
$sponsor3->src 			= (file_exists($sponsor3->billed)) ? $sponsor3->billed : JURI::base().$sponsor3->billed;
$sponsor3->navn 		= $params->get("navn3",false);
$sponsor3->beskrivelse	= $params->get("beskrivelse3",false);
$sponsor3->link 		= $params->get("link3",false);
$sponsor3->linktype 	= ($params->get("linktype3","0") == 0) ? "" : 'target="_blank"';

Eftersom at vi har defineret alle vores parametre, skal vi have lavet lidt design. Se venligst mine kode kommentarere for nærmere uddybelse. Dette skal også indsættes i mod_hejverden.php

//Jeg inkluderer Twitter Bootstrap, fordi jeg vil bruge deres tooltip.
JHtml::_('bootstrap.framework');
//Jeg henter en standard funktion fra joomla
$document = JFactory::getDocument();
//Vi skal også inkludere lidt JS når musen er over billedet (sponsoren)
$document->addScriptDeclaration('
jQuery(document).ready(function(){
	/*Når musen er over vores element*/
	jQuery("#mod_hejverden a.sponsor img").hover(function(){
		/*Så animerer vi opacity til 0.6*/
		jQuery(this).animate({opacity: "0.6"}, 10);
	},
	function(){
		/*Når musen er væk fjernes effekten*/
		jQuery(this).animate({opacity: "1"}, 10);
	});
});
');
//Vi skal også tilføje lidt CSS til vores design
$document->addStyleDeclaration("
/*Billedet sættes til at fylde hele elementet*/
#mod_hejverden img{max-width:100%;height:auto;}
/*Vi laver et mellemrum under billedet med 10px*/
#mod_hejverden img{margin-bottom:10px;}
");

4. Vi skal have vist sponsorerne

Indtil videre har vi kun bearbejdet vores parametre. Vi har endnu ikke fået det til at vise noget som helst. Koden nedenfor vil jeg ikke gå i dybden med, da det er simpel html og PHP.

Åben default.php

Kopier venligst ikke her fra. Download venligst modulet i stedet for. (Koden nedenfor kan ikke vises korrekt pga. restriktioner).

<?php
//Denne linje skal være først i alle PHP filer. Det er for at man ikke kan få direkte adgang til filen.
defined('_JEXEC') or die;
?>
<?php //Hvis der er angivet et billed, så tager vi næste skridt if($sponsor1->billed) : ?> <?php endif; ?> <?php if($sponsor2->billed) : ?> <?php endif; ?> <?php if($sponsor3->billed) : ?> <?php endif; ?>

5. Prøv modulet

Gem alle dine filer og zip mappen "hej_verden", hvorefter du installere den i Joomla. Hvis du har lavet det ligesom mig, vil det se således ud.

5. Afslutning og konklusion

I dette blog indlæg har jeg valgt ikke at gå i dybden med de forskellige ting, da det kun skulle være til inspiration. Det er mest for at give et indblik i hvilke muligheder, du har med moduler. Ved at downloade modulet kan du se, hvad jeg gør skridt for skridt.

I fremtiden vil vi bringe mange flere blog indlæg omkring udvikling af udvidelser til Joomla. Har du forslag så efterlad venligst dit aftryk!

Læst 55931 gange Senest ændret Torsdag, 14 november 2013 16:16
Martin Kollerup

Martin er en ung nørd, som elsker udfordringer. Han står bl.a. bag flere moduler til Joomla, samt er fast inventar i forummet. 

3 kommentarer

  • Kommentar link Peder Jelsbak Onsdag, 22 februar 2017 15:34 Skrevet af Peder Jelsbak

    Hej,

    Jeg ved ikke om jeg kan få svar her, men nu prøver jeg.

    Jeg er webmaster på et site, hvor jeg opretter brugerne halv-automatisk via ARRA User Migrate.

    Jeg vil godt kunne give brugerne adgang til en helt personlig side.

    Kan jeg det og i givet fald hvordan ?

    På forhånd tak

    Peder Jelsbak

  • Kommentar link Martin Kollerup Mandag, 30 september 2013 09:16 Skrevet af Martin Kollerup

    Hej Kim,

    Jeg vil tage den på min liste. Det er dog bare meget mere kompliceret at udvikle et komponent.

    /Martin

  • Kommentar link kim saxtorph Torsdag, 19 september 2013 15:23 Skrevet af kim saxtorph

    hej Martin

    hvad med et blog indlæg om udvikling af en komponent.

    hilsen
    kim

Skriv en kommentar

Sørg for du indtaster de påkrævede oplysninger (*).
HTML kode er ikke tilladt.