Joomla! - meuwissen-design.nl · arti kels als blog gaat gebruiken, is dit zeer handig. In de blog...

Dhr. Evert JochumsTurnhout 2006-2007

3 Cross-media ontwerp

Joomla!

Open SourceContent Management System

VOORWOORD

Bij deze gelegenheid wil ik graag een woord van dank richten tot alle mensen die hebben bijgedragen tot het verwezenlijken van dit eindwerk.

In eerste plaats is dit Dhr. M. Veeckmans, zaakvoerder van SPiZZY bvba (stageplaats), voor de begeleiding en de kostbare raadgevingen.

Verder dank ik in het bijzonder Dhr. E Sieben (stagebegeleider) voor de zorgvuldige opvolging en het nalezen van dit werk.

Ook mijn ouders en mijn zus dank ik voor het grondig nalezen.

SAMENVATTING

Joomla! is één van de meest krachti ge Open Source Content Management Systemen. Het wordt over de hele wereld gebruikt voor alles van een simpele website tot complexe bedrijfsapplicati es. Joomla! is eenvoudig te installeren, simpel te beheren en betrouwbaar.

Het systeem is handig in gebruik voor mensen die totaal geen ervaring hebben met websites en zijn content. Er kunnen gemakkelijk arti kelen, nieuws, blogs, polls,… toegevoegd, bewerkt of verwijderd worden zonder ook maar één regel code (HTML, CSS, PHP, XML,…) te moeten typen.

Ook is het een zeer goed systeem voor webontwerpers met een niet al te grote kennis van de verschillende talen. Een goede kennis van HTML en CSS is aan te raden. Wanneer PHP, XML,… gebruikt moeten worden, is hier prakti sch geen kennis voor nodig. Joomla! beschikt over zeer veel extensies, tools,… die deze codes allemaal automati sch kunnen genereren.

Een belangrijk onderdeel van Joomla! is de mogelijkheid tot het uitbouwen van een gemeenschap op uw site. Het aanmaken van een registrati eformulier is kinderspel. Nu kan de gebruiker via een login toegang krijgen tot verschillende extra onderdelen. De mate van toegang is per gebruiker zeer gemakkelijk in te stellen in de back-end.

INHOUDSOPGAVE

VoorwoordSamenvatti ng

1. Inleiding 42. Benodigde kennis 53. Installati e 64. Joomla!’s back-end 7

Login .........................................................................................7Homepage ................................................................................8

Onderdelen Control Panel ...........................................................9Onderdelen navigati ebalk .........................................................13

5. Content beheren 15Secti on ....................................................................................15Category .................................................................................15Content item ..........................................................................16Stati c Content item .................................................................16

6. Eigen template 17Ontwerp van template ...........................................................17HTML pagina omzett en naar PHP pagina ...............................18XML ........................................................................................20Stylesheet ...............................................................................21Suffi x .......................................................................................24Template uploaden .................................................................25

7. Menu aanmaken 26Menu ......................................................................................26Menu items ............................................................................27

8. Joomla! componenten/extensies 30Componenten/extensies installeren ......................................30JoomlaXplorer ........................................................................33Community Builder ................................................................34Fireboard ................................................................................35Joomap ...................................................................................35

9. Eigen werk 36Spizzy bvba .............................................................................36

10. Conclusie 4011. Referenti es 41

Websites .................................................................................41Boeken ....................................................................................41

4Joomla! Content Management System

1. INLEIDING

In dit werk zal men meer inzicht krijgen over dit Content Management Systeem.Joomla! kan beschouwd worden als de motor achter een website die het makkelijk maakt content aan te maken, aan te passen, te beheren en te delen.

Ook wordt er besproken hoe men zelf een Joomla! capabele template moet aanmaken, zodat men zonder veel problemen een eigen multi -functi onele website kan bouwen.


2. BENODIGDE KENNIS

Als men Joomla! CMS gebruikt als systeem om enkel content van een site toe te voegen, te bewerken of te verwijderen, is er zeer weinig kennis nodig van verschillende webontwikkelingstalen.

Wanneer men echter Joomla! gebruikt om een nieuwe website (template) te maken is een goede kennis van HTML en CSS vereist. Een basiskennis van XML is zeer nutti g en een kennis van PHP kan ook zijn voordelen bieden, maar is minder belangrijk.


3. INSTALLATIE

Joomla! kan zowel lokaal als online geïnstalleerd worden.In dit werk ga ik niet op de installati e hiervan in.

Enkele links naar sites met een duidelijke uitleg over de installati e van Joomla!:

- htt p://wiki.dutchjoomla.org/index.php/Installati e_1.0- htt p://www.byte.nl/docs/Joomla-Installati e.html- htt p://nl.wikibooks.org/wiki/Joomla/Installati e


Figuur 4.1: Login

4. JOOMLA!’S BACK-END

In dit hoofdstuk leert men meer over de back-end van joomla! en de confi gurati e ervan.

LOGIN

Uw site url + /administrator


Figuur 4.2: Homepage

Figuur 4.3: Navigati ebalk & submenu

HOMEPAGE

De homepage kan opgesplitst worden in twee delen. Het eerste deel is de navigati ebalk. Via deze balk kan men navigeren doorheen alle verschillende onderdelen van Joomla!.Het tweede deel noemt men het Control Panel. Vanuit het Control Panel kan men verschillende onderdelen van Joomla! aanpassen. De verschillende onderdelen van het Control Panel zijn ook terug te vinden onder bepaalde delen van de navigati ebalk.


Figuur 4.4: Nieuw content item aanmaken

Figuur 4.5: Content Items Manager

Onderdelen Control PanelAdd New ContentHiermee kan men nieuwe content toevoegen aan uw website.

Content Items ManagerIn dit onderdeel kan men de verschillende content van de website terugvinden.


Figuur 4.6: Stati c Content Manager

Figuur 4.7: Front Page Manager

Figuur 4.8: Secti on Manager

Figuur 4.9: Category Manager

Stati c Content ManagerHier bevindt zich de content die niet onderhevig is aan vele veranderingen en die niet tot een bepaalde categorie of secti e behoren.

Front Page ManagerDe arti kelen die zich hier bevinden worden weergegeven op de homepage van de site. Deze arti kelen zijn ook terug te vinden in de Content Items Manager.

Secti on ManagerHier bevinden zich secti es die in de site aanwezig zijn. Natuurlijk is het ook mogelijk om nieuwe secti es te toe voegen.

Category ManagerOnder dit item bevinden zich de verschillende categorieën waaruit de site bestaat. Deze zijn te vergelijken met secti e. Het onderscheid is dat een categorie een onderdeel van een secti e is.


Figuur 4.10: Media Manager

Figuur 4.11: Trash Manager

Figuur 4.12: Menu Manager

Figuur 4.13: Language Manager

Media ManagerEen verkenner die enkel te gebruiken is voor afb eeldingen.

Trash ManagerIn dit onderdeel kan men verwijderde items terugplaatsen of defi niti ef verwijderen.

Menu ManagerHier krijgt men een overzicht van de aanwezige menu’s. Ook heeft men hier de mogelijkheid om nieuwe menu’s en/of menu items aan te maken.

Language ManagerHier kunnen nieuwe talen geïnstalleerd worden om het gebruik van Joomla! te vergemakkelijken.


Figuur 4.14: User Manager

Figuur 4.15: Global Confi gurati on

User ManagerHier kan men de gebruikers van de site instellen en hen bepaalde rechten geven.

Global Confi gurati onDit wordt gebruikt om de globale instellingen aan te passen.


Onderdelen navigati ebalkHomeHiermee keert men terug naar het Control Panel.

SiteGlobal Confi gurati onAanpassen van de globale instellingen.

Language ManagerHier kunnen nieuwe talen geïnstalleerd worden om het gebruik van Joomla! te vergemakkelijken.

Media Manager Een verkenner die enkel te gebruiken is voor afb eeldingen.

PreviewHier krijg men een voorvertoning te zien van de site. Men kan kiezen tussen een vertoning in een nieuw venster, in hetzelfde venster of in hetzelfde venster met de benaming van de verschillende onderdelen erbij.

Stati sti csJoomla! kan enkele stati sti eken bijhouden zoals bv. zoektermen, aantalbezoekers,…Deze gegevens worden hierin bewaard.

Template ManagerDit heeft alles te maken met het uiterlijk van uw site. Men heeft hier een keuze om templates te installeren voor de front-end en de back-end. Ook kan men hier de verschillende onderdelen, waaruit een site bestaat, een andere naam geven of nieuwe onderdelen toevoegen.

Trash ManagerIn dit onderdeel kan men verwijderde items terugplaatsen of defi niti ef verwijderen.

User ManagerHier kan men de gebruikers van de site instellen en hen bepaalde rechtengeven.

Menu Menu Manager

Hier kan men de bestaande menu’s een andere benaming geven of nieuwe menu’s aanmaken.

In het Menu onder het Menu Manager item bevinden zich de verschillende aanwezige menu’s. Door op één van deze menu’s te klikken kan men in dat bepaald menu een menu item toevoegen, bewerken of verwijderen.


ContentOnder dit item bevindt zich alles wat met de content (inhoud) van de site te maken heeft .Hier kunnen newsitems, FAQ’s, secti ons, categories,… toegevoegd, bewerkt of verwijderd worden.

ComponentsDit menu bevat alle geïnstalleerde componenten van Joomla!. Componenten kunnen beschouwd worden als kleine applicati es binnen Joomla!. Vele van deze applicati es worden gebruikt om meer interacti eve sites te creëren. Naast de standaard aanwezige componenten is het mogelijk om er zelf nog toe te voegen. Er bestaan verschillende sites waar men componenten kan downloaden.

ModulesModules zijn kleinere onderdelen van Joomla! dan componenten. Modules worden weergegeven op de site en in de Module Manager kan men bepalen waar deze op uw pagina weergegeven moeten worden.

MambotsDe term Mambots is afk omsti g van het Mambo-CMS (voorloper van Joomla! CMS).Mambots zijn kleine ‘robots’ die er voor zorgen dat het systeem goed functi oneert.Standaard zijn er Mambots aanwezig voor de content, de editors en de zoekfuncti es.

InstallersOnder dit item kunnen verschillende onderdelen geïnstalleerd worden. Zoals nieuwe templates voor zowel front- als back-end, nieuwe componenten, nieuwe modules en nieuwe mambots.Ook is het mogelijk om geïnstalleerde onderdelen te verwijderen.

MessagesIn dit onderdeel bevinden zich de ontvangen berichten van andere gebruikers van uw Joomla! site.

SystemHier bevindt zich extra informati e over Joomla!. Zoals PHP instellingen, systeem informati e,…

HelpEen help functi e die men kan raadplegen bij bepaalde problemen.


Figuur 5.1: Structuur Joomla! site

5. CONTENT BEHEREN

Een van de belangrijkste onderdelen van Content Management Systems is het beheren van content (inhoud). Hieronder ziet men hoe deze in Joomla! gestructureerd worden.

De structuur van Joomla! kan opgedeeld worden in 3 niveau’s:1. Secti es2. Categorieën3. Content items

SECTION

Vooraleer men kan beginnen met content te integreren in Joomla!, moet men de verschillende secti es aanmaken. Door op de homepage op Add Secti ons te klikken of door in de navigati ebalk naar Content > Secti on Manager te gaan, kan dit gebeuren.

CATEGORY

Na het aanmaken van de verschillende secti es, kan men deze gaan onderverdelen in categorieën. Het aanmaken van deze categorieën gebeurt door te klikken op Category Manager op de homepage of door in de navigati ebalk naar Content > Category Manager te gaan.


CONTENT ITEM

Vanaf nu kunnen er Content items (arti kels) toegevoegd worden. Een Content item bestaat uit twee delen: de intro text en de main text. Vooral als men deze arti kels als blog gaat gebruiken, is dit zeer handig. In de blog wordt dan enkel de intro text weergegeven met een ‘Lees meer… link’ onder deze text. Deze verwijst de gebruiker dan door naar het volledige arti kel. Tijdens het aanmaken van deze Content items wordt er steeds gevraagd naar de secti e en categorie waar deze thuishoort. Vandaar dat deze eerst moeten aangemaakt worden vooraleer men kan beginnen met het schrijven van de Content items.

STATIC CONTENT ITEM

De Content items worden vaak verward met de Stati c Content items. Deze laatste zijn terug te vinden op de homepage onder de knop Stati c Content Manager of in het navigati emenu bij Content onder dezelfde naam. Het verschil tussen beiden is dat de tekst niet uit twee delen bestaat en dat deze niet wordt gekoppeld aan een secti e en categorie. Meestal worden hierin teksten aangemaakt die niet al te veel wijzigingen ondergaan bv. copyrights.


Figuur 6.1: Ontwerp HTML & CSS

6. EIGEN TEMPLATE

Een Joomla! template bestaat steeds uit dezelfde bestandsnamen, die in eenzelfde mappenstructuur opgeslagen dienen te worden. Als voorbeeld neemt men hier de mapbenaming template_joomla. Hierin worden de index.php en de templateDetails.xml pagina’s geplaatst. In deze map bevinden zich minstens nog twee extra mappen, images en css. In de images map worden alle afb eeldingen, die in uw site gebruikt worden, opgeslagen. In de css map wordt het gebruikte stylesheet opgeslagen met als benaming template_css.css.Het is zeer belangrijk deze structuur te volgen om toekomsti ge problemen binnen de Joomla! back-end te vermijden.

ONTWERP VAN TEMPLATE

Men start met de aanmaken van een HTML pagina (index.html) met behulp van een CSS stylesheet (template_css.css) .De structuur die men gebruikt voor het opbouwen van deze pagina mag bestaan uit tabellen, andere geven liever de voorkeur aan divs. In dit voorbeeld zal er gebruik gemaakt worden van de div structuur.

De vetgedrukte benamingen zijn positi es in Joomla!. Deze worden later opgevuld met content.


Joomla Website

Figuur 6.2: Code van de index.html pagina

Figuur 6.3: Joomlasoluti ons1 werkbalk

HTML PAGINA OMZETTEN NAAR PHP PAGINA

Omdat Joomla! gebruik maakt van de PHP scriptt aal moet de index.html pagina omgezet worden naar een index.php pagina. Als men gebruik maakt van Adobe Dreamweaver om webpagina’s aan te maken, is hier een zeer eenvoudige oplossing voor.

Belangrijk is dat vooraf Dreamweaver gesloten is, zodat een nieuwe werkbalk geïnstalleerd kan worden.Om deze Dreamweaver extensie te vinden surft men naar htt p://extensions.joomla.org/. Bij search zoekt men op ‘joomlasoluti ons’. Als dit gebeurd is download en installeer dan deze extensie: ‘Free Dreamweaver template tool by Joomlasoluti ons’. Start Dreamweaver opnieuw op en open de index.html pagina.

Men selecteert de code beginnende bij de top tot en met de tag. Standaard staat bij Dreamweaver de werkbalk Common weergegeven.Vervolgens klikt men op de naam Common. Nu krijgt men een keuze van enkele andere werkbalken. Hier kiest men voor de werkbalk Joomlasoluti ons1. Een reeks nieuwe knoppen verschijnen. Wanneer men met de muis over de eerst knop beginnende van links gaat, verschijnt de tekst ‘Insert Head Code’. Klik hierop en de geselecteerde code is vervangen door de PHP code die Joomla! nodig heeft om de pagina te kunnen lezen.


” />

Figuur 6.4: Joomla! PHP codes

Figuur 6.5: Template code met Joomla! positi es

Wanneer men geen gebruikt maakt van Dreamweaver, moet men de geselecteerde code zoals hierboven omschreven, vervangen door de code hieronder weergegeven.

Wanneer dit gebeurd is, sla dan de pagina op onder de naam index.php.

Om de gewenst content op de juiste plaatsen weer te geven in uw template, moeten de Joomla! positi es nog geplaatst worden. Hiervoor kan ook gebruik gemaakt worden van de joomlasoluti ons1 werkbalk.Na het plaatsen van de positi es ziet de code er zo uit:

De positi es kunnen later nog aangepast worden. Ook de namen hiervan kunnen gewijzigd worden. Dit kan men doen in het menuitem Site > Template Manager > Module Positi ons. Enkel de MainBody kan niet worden gewijzigd, omdat deze standaard geïnterpreteerd wordt als ruimte waar de arti kels en de content van de frontpage worden weergegeven.


template_joomla dd/mm/jjjj Auteursnaam None [email protected]/authorEmail> www.author.com 1.0 Beschrijving van de template index.php images/image1.gif images/image2.gif images/image1.jpg images/image2.jpg css/template_css.css

Figuur 6.6: XML-bestand

XML

Het aanmaken van een XML-bestand is een zeer belangrijk onderdeel bij het maken van een eigen template. De gegevens die hierin voorkomen zijn ook enkel de gegevens die bij de latere installati e van uw template overgezet worden.Hieronder vindt men een voorbeeld van een XML-bestand.

Van groot belang is dat alle bestanden die nodig zijn om uw template te laten weergeven hierin vermeld staan.


/* Joomla CSS*/a:link, a:visited {}a:hover{}table.contentpaneopen{}table.contentpaneopen td{}table.contentpaneopen td.componentheading{}table.contentpane{}table.contentpane td{}table.contentpane td.componentheading{}table.contentpaneopen fi eldset{}.button{}.inputbox{}.componentheading{}.contentheading{}table.searchintro{}table.searchintro td{}table.moduletable{}div.moduletable{}table.moduletable th, div.moduletable h3{}table.moduletable td{}table.pollstableborder td{}.sectiontableheader{}.sectiontablefooter{}.sectiontableentry1{}.sectiontableentry2{}.small{}.createdate{}.modifydate{}.readon{}table.contenttoc{}table.contenttoc td{}table.contenttoc th{}a.mainlevel:link, a.mainlevel:visited{}a.mainlevel:hover{}a.mainlevel#active_menu{}a.mainlevel#active_menu:hover{}a.sublevel:link, a.sublevel:visited{}a.sublevel:hover{}a.sublevel#active_menu{}ul.latestnews{}li.latestnews{}a.latestnews:link, a.latestnews:visited{}a.latestnews:hover{}a.latestnews#active_menu{}a.latestnews#active_menu:hover{}ul.mostread{}li.mostread{}Figuur 6.7: Joomla! CSS

a.mostread:link, a.latestnews:visited{}a.mostread:hover{}a.mostread#active_menu{}a.mostread#active_menu:hover{}.highlight{}.code{}form{}div.mosimage{}.mosimage{}.mosimage_caption{}span.article_seperator{}

STYLESHEET

Het stylesheet dat gebruikt wordt voor de opmaak van de template (template_css.css) bevat benamingen eigen aan de pagina. Maar dit is onvoldoende om een degelijke opmaak te kunnen bekomen in Joomla!. Daarom heeft Joomla! zelf nog een lijst van CSS benamingen die men in het template_css.css bestand kan verwerken en naar hartenlust kan bewerken, voor een opti male weergave van de pagina. Hieronder wordt een overzicht gegeven van de belangrijkste CSS opmaak benamingen gebruikt door Joomla! zelf. Deze lijst bevat de meest gebruikte Joomla! benamingen.


Hier volgt een overzicht van enkele Joomla! CSS benamingen en voor welke opmaak ze dienen.

a:link, a:visited {}a:hover{}

Dit geeft de opmaak aan de links in Joomla! die geen extra class bevatt en.

table.contentpaneopen{}table.contentpaneopen td{}table.contentpaneopen td.componentheading{}table.contentpane{}table.contentpane td{}table.contentpane td.componentheading{}table.contentpaneopen fi eldset{}

Dit geeft de opmaak voor de secti es, categorieën en content die in de structuur van een tabel zijn gemaakt. De opmaak van deze classes komen dus op elke pagina voor.

.butt on{}

Hiermee wordt de sti jl van de knoppen (formulier) aangepast.

.inputbox{}

Deze class bepaalt het uitzicht van de invoervelden van een formulier.

a.mainlevel:link, a.mainlevel:visited{}a.mainlevel:hover{}a.mainlevel#acti ve_menu{}a.mainlevel#acti ve_menu:hover{}

Hiermee wordt de opmaak van de navigati e verzorgd.Bij het id acti ve_menu kan een bepaalde sti jl worden meegegeven voor het menuonderdeel dat acti ef is. Een acti ef menu item is gelinkt aan de pagina die op dat moment wordt weergegeven.

a.sublevel:link, a.sublevel:visited{}a.sublevel:hover{}a.sublevel#acti ve_menu{}

Sublevel geeft de opmaak aan de submenu items. Ook hier is de id acti ve_menu van toepassing, wanneer een bepaald submenu item acti ef is.

.mostread

Hiermee bepaalt men de opmaak van het overzicht met de meest gelezen items (nieuws, arti kels,…).


div.mosimage{}

Hierin wordt een afb eelding in de content weergegeven. Deze kan hiermee opgemaakt worden.

.mosimage{}

Hiermee kan men vb. een bepaalde marge, kader,… rond alle afb eeldingen weergegeven, die in de content verschijnen.

.mosimage_capti on{}

Dit wordt gebruikt om het bijschrift van afb eeldingen een bepaalde opmaak te geven.


Figuur 6.8: Suffi x toepassing

SUFFIX

Wanneer men een bepaald Joomla! item individueel wil opmaken, kan hier een suffi x op toegepast worden. Onderstaand voorbeeld maakt dit duidelijk.

Voorbeeld: Main Menu.

Om Main Menu een andere opmaak te geven, gaat men naar het navigati emenu item Modules > Site Modules.Om deze module te openen klikt men op Main Menu. Bij het onderdeel Parameters vindt men Menu Class Suffi x terug. Om hier een andere opmaak te kunnen gebruiken typt men in het tektvak een bepaalde (zelf gekozen) benaming, beginnende met het – teken. Hier wordt het voorbeeld ‘–andereopmaak’ gebruikt, zoals onderstaande afb eelding weergeeft .

Zoals eerder omschreven worden deze CSS items gebruikt voor de opmaak van de Main Menu module.

a.mainlevel:link, a.mainlevel:visited{}a.mainlevel:hover{}a.mainlevel#acti ve_menu{}a.mainlevel#acti ve_menu:hover{}

Wanneer men nu gebruik wil maken van de benaming van de aangemaakte suffi x, voegt men in het CSS bestand enkel deze benaming toe. Nu kan men voor deze module een aparte opmaak voorzien.

a.mainlevel-andereopmaak:link, a.mainlevel:visited{}a.mainlevel-andereopmaak:hover{}a.mainlevel-andereopmaak#acti ve_menu-andereopmaak{}a.mainlevel-andereopmaak#acti ve_menu-andereopmaak:hover{}


Figuur 6.9: Template installeren

Figuur 6.10: Geïnstalleerde templates

TEMPLATE UPLOADEN

Om de template te uploaden in Joomla! zorgt men ervoor dat de mappenstructuur, zoals boven omschreven, behouden blijft . Om deze up te loaden moeten alle gebruikte bestanden gearchiveerd worden in een zip bestand. Let op dat het zip bestand dezelfde benaming krijgt als de bovenliggende map (hier: template_joomla). Het is echter niet deze map die gearchiveerd moet worden maar wel de inhoud ervan. Wanneer dit gebeurd is, gaat men in de navigati ebalk (Joomla! back-end) naar Installers > Template – Site. Bij Upload Package File kiest men voor bladeren en selecteert men het zip bestand. Hierna klikt men op Upload File & Install.

Wanneer Joomla! een foutmelding weergeeft , kijkt men best het zip bestand eens na. Zijn alle bestanden aanwezig en is hier zeker ook naar verwezen in het xml-bestand?Als de template zonder fout wordt geupload, krijgt men ‘Succes’ te zien. Om verder te gaan klikt men op ‘Conti nue’.

Om uw template als standaard template in te stellen, drukt men op de ‘radio butt on’ voor de gewenste template en klikt men rechtsboven op Default. Er verschijnt nu een groen vinkje bij het gekozen template.


Figuur 7.1: Menu Details

7. MENU AANMAKEN

Een zeer belangrijk onderdeel van een website is de navigati e of het menu. Het is essenti eel om hier een goede overzichtelijke structuur in te krijgen, zodat de gebruiker gemakkelijk doorheen de pagina’s kan navigeren. Standaard bevat Joomla! vier menu’s die men naar hartenlust kan aanpassen. Belangrijk is echter wel dat het menu ‘Main Menu’ als hoofdnavigati e wordt gebruik, omdat Joomla! deze standaard koppelt met de positi e mosMainBody().

MENU

Om een nieuw menu aan te maken gaat men in de navigati ebalk naar Menu > Menu Manager. Hier bevinden zich de reeds aangemaakte menu’s. Door te klikken op één van de menu namen kunt, u deze benaming wijzigen.

Als men rechts bovenaan op ‘New’ klikt, kan men een nieuw menu aanmaken. Er wordt gevraagd naar een menu name en een module ti tle. De menunaam wordt weergegeven in het overzicht van de verschillende menu’s. De moduleti tel wordt weergegeven in de back-end bij de componenten en in de front-end boven het menu zelf (indien gewenst).

Wanneer men een nieuw menu hebt aangemaakt, wordt dit automati sch opgenomen in de navigati ebalk onder het ‘Menu’ item.


Figuur 7.2: Nieuw menu item toevoegen

MENU ITEMS

Om in een bepaald menu nieuwe items toe te voegen, gaat men in de navigati ebalk naar Menu > (kies de gewenste menunaam).Men komt nu in de Menu Manager terecht. Om een nieuw item aan te maken, klikt men rechts bovenaan op ‘New’.Er zijn vele verschillende soorten van menu items, onderverdeeld in verschillende categorieën. Hieronder worden deze besproken.

ContentBlog - Content CategoryBlogweergave van een categorie.

Blog - Content Category ArchiveBlogweergave van een categoriearchief.

Blog - Content Secti onBlogweergave van een secti e.

Blog - Content Secti on ArchiveBlogweergave van een secti earchief.

Link - Content ItemEen link creëren die rechtstreeks naar een bepaald content item gaat.

Link - Stati c ContentEen link creëren die rechtstreeks naar een bepaald stati sch content item gaat.

List - Content Secti onCreëren van een lijst van content categorieën voor een specifi eke secti e.


Submit - ContentHiermee creëert men een link die de gebruikers (minimaal Author niveau) in staat stelt via de front-end arti kels te schrijven.

Table - Content CategoryGeeft een tabel weer van content items voor een specifi eke categorie.

MiscellaneousSeparator / PlaceholderHiermee wordt een leeg menu item gecreëerd, als scheiding tussen twee andere menu items.

Wrapper Met een wrapper (iframe) item kan een externe pagina in de site geladen worden.

SubmitSubmit - ContentHiermee creëert men een link die de gebruikers (minimaal Author niveau) in staat stelt via de front-end arti kels te schrijven.

ComponentsComponentCreëert een link naar een in Joomla! aanwezig extern component.

Link - Component ItemCreëert een link naar een in Joomla! aanwezig intern component.

Link - Contact ItemCreëert een link naar één of meerdere contactpersonen.

Link – NewsfeedVia dit item creëert men een link naar nieuws dat op andere sites wordt aangeboden (bv. RSS feeds).

Table - Contact CategoryGeeft een tabel weer van content items voor een specifi eke categorie.

Table - Newsfeed CategoryGeeft een tabel weer van nieuws items voor een specifi eke categorie.

Table - Weblink CategoryGeeft een tabel weer van verschillende weblink items voor een specifi eke weblink categorie.


Figuur 7.3: Weergave van een bepaald menu

LinksLink - Component ItemCreëert een link naar een in Joomla! aanwezig intern component.

Link - Contact ItemCreëert een link naar één of meerdere contactpersonen.

Link - Content ItemEen link creëren die rechtstreeks naar een bepaald content item gaat.

Link – NewsfeedVia dit item creëert men een link naar nieuws dat op andere sites wordt aangeboden (bv. RSS feeds).

Link - Stati c ContentEen link creëren die rechtstreeks naar een bepaald stati sch content item gaat.

Link – UrlHiermee wordt een link gecreëerd naar een externe site. Er kan bepaald worden of deze in het huidige venster of in een nieuw venster weergegeven wordt.

Bij elk menu item kunnen nog verschillende parameters ingesteld worden.

Wanneer men een menu met menu items heeft aangemaakt, is dit terug te vinden bij de modules. Door in de Module Manager op een menu naam te klikken kan men nog bepaald instellingen verrichten. Van groot belang is de Pages/Items secti e. Hier kan men aanduiden wanneer en op welke pagina het menu zichtbaar moet zijn.


Figuur 8.1: Nieuw ciomponent installeren

Figuur 8.2: Geïnstalleerde componenten

8. JOOMLA! COMPONENTEN/EXTENSIES

In dit hoofdstuk worden enkele belangrijke en interessante Joomla! CMS extensions besproken.Op het internet staan verschillende sites met Joomla! extensies (= componenten).De meest uitgebreide is de offi ciële site met als adres: htt p://extensions.joomla.org/.Deze extensies bestaan vaak ook uit modules en/of mambots. Eerst zal besproken worden hoe men deze op correcte wijze moet installeren.

COMPONENTEN/EXTENSIES INSTALLEREN

Om een nieuw component te installeren, gaat men in het navigati emenu naar Installer > Components.Vervolgens klikt men op bladeren om naar de gewenste map te gaan en daar het gewenste component uit te kiezen. Hierna klikt men op Upload & Install, er wordt meegedeeld of het component al dan niet geïnstalleerd is.Een component kan men herkennen aan de benaming. Deze begint bijna alti jd met com.


Figuur 8.3: Nieuwe module installeren

Figuur 8.4: Geïnstalleerde modules

Wanneer de bestandsnaam begint met mod, is dit bestand een module. Om modules te kunnen installeren, gaat men in de navigati ebalk naar Installer > Modules.

De wijze van installati e is hetzelfde als bij een component.


Figuur 8.5: Nieuwe mambot installeren

Figuur 8.6: Geïnstalleerde mambots

Begint de bestandsnaam met bot, dan is dit bestand een mambot. Om mambots te installeren, gaat men in het navigati emenu naar Installer > Mambots.

De wijze van installati e is hetzelfde als bij een component.


Figuur 8.7: JoomlaXplorer

JOOMLAXPLORER

JoomlaXplorer is een zeer handig verkenningstool en kan gebruikt worden als bestands- en FTP-manager. Er is de mogelijkheid om bestanden te bewerken, te verwijderen, te kopiëren, te hernoemen, te archiveren en het uitpakken van bestanden rechtstreeks op de server. Men kan eveneens bestanden zoeken, uploaden en downloaden. Ook het aanmaken van nieuwe bestand is inbegrepen in deze tool.


Figuur 8.8: Community Builder credits

Figuur 8.9: Community Builder confi gurati e

COMMUNITY BUILDER

Community Builder is een extensie voor Joomla!’s User Manager. Het bevat extra velden in het profi el, meer uitgebreide registrati e workfl ow, gebruikslijsten, extra opti es voor de administrator, mogelijkheid om afb eeldingen up te loaden, extra beheersmogelijkheden vanuit de front-end en nog veel meer.Omdat community builder zo een populaire extensie is, zijn er nog vele andere plugins die deze extensie nog verder uitbreiden.


Figuur 8.10: Fireboard Control Panel

Figuur 8.11: Joomap Confi gurati on

FIREBOARD

Fireboard is een zeer handig component wanneer men op de website een forum ter beschikking wil stellen. Na de installati e van dit compont kan men verschillende instellingen verrichten in een eenvoudig te gebruiken Control Panel (te vergelijken met het Control Panel van Joomla!). Een zeer groot voordeel van Fireboard is dat deze gemakkelijk gelinkt kan worden aan de gebruikersprofi elen van Community Builder, zodat men bij het gebruik van de site zich slechts één maal hoeft aan te melden.

JOOMAP

Joomap is een component om op een snelle manier een sitemap aan te maken. De normale menu structuur wordt nu weergegeven in een hiërarchische lijst.De opmaak van deze lijst is gemakkelijk aan te passen, daar Joomap ook over een CSS editor beschikt.


Figuur 9.1: Ontwerp template SPiZZY bvba

9. EIGEN WERK

In dit hoofdstuk krijgt men een beeld van een eigen werk gemaakt met het Joomla! Content Management System.

SPIZZY BVBA

De vetgedrukte benamingen zijn positi es in Joomla!. Deze worden later opgevuld met content.


Figuur 9.2: Homepage van SPiZZY bvba

Op deze afb eelding is duidelijk te zien dat niet alle positi es, zoals in de template aangegeven, weergegeven worden. Dit kan men instellen in de Joomla! back-end.

Op de home pagina is er ook gebruik gemaakt van een toegevoegde extensie (hier: mambot). Onder positi e ‘User 1’ bevinden zich de benamingen IT news, Telecom news en Other news. Deze items worden weergegeven in wat men ‘Slides’ noemt.


Figuur 9.3: Zoekresultaten

Het instellen van een zoekfuncti e voor een webpagina is kinderspel. Standaard bevat Joomla! een zoekfuncti e gestuurd door Google. Deze functi e bevindt zich in de Module Manager. De enige wat moet gebeuren is de positi e kiezen waar het zoekvenster zal verschijnen (hier: subtop). Het zoekresultaat wordt automati sch weergegeven in de MainBody.


Figuur 9.4: Contactf ormulier

Hierboven bevindt zich een afb eelding van hoe een contactf ormulier in Joomla! wordt weergegeven. Ook de aanmaak hiervan is zeer eenvoudig. De contactf ormulieren bevinden zich in de navigati ebalk onder Components > Contacts > Manage Contacts. Onder dit item kan men bestaande formulieren bewerken of verwijderen, of nieuwe formulieren aanmaken. Om een formulier als link in een menu te integreren, gebruikt men het ‘Link - Contact Item’ menu item.


10. CONCLUSIE

Als conclusie kan ik stellen dat Joomla! een zeer handig content management systeem is. Als men snel een site online wil hebben, is dit systeem een zeer geschikte oplossing. Men kan starten met een eenvoudige site en deze uitwerken tot een interacti ve pagina met verschillende applicati es.

Eén van de grootste voordelen aan Joomla! is de mogelijkheid tot het eenvoudig uitbouwen van een gemeenschap. Gebruikers kunnen zich op een gemakkelijke en veilige manier registreren, om zo toegang te krijgen tot verschillende nieuwe onderdelen van de webpagina.

Omdat Joomla! een open source systeem is, gebeurt de ontwikkeling niet door één bepaalde groep, maar door verschillende groepen over de gehele wereld.Hierdoor is dit systeem niet enkel in het engels te verkrijgen, maar ook in verschillende andere talen. Dit alles om het gebruiksgemak te verbeteren.

Joomla! is één van de meest professionele open source content management systemen ter wereld (zie: htt p://www.winmag.nl/arti kelen.php?acti on=OPEN&ACG=1&ID=2228). Een ander groot pluspunt van Joomla! is de compleetheid van het systeem. Ook de uitgebreide keuze uit duizenden extensies en ontwerpen is een voordeel. Omdat Joomla! zo uitgebreid is, is een vereiste training noodzakelijk. Dit kan voor sommige gebruikers een nadeel zijn.


11. REFERENTIES

WEBSITES

Dutch Joomla - htt p://www.dutchjoomla.org

Joomla! - htt p://www.joomla.org

Joomlapolis - htt p://www.joomlapolis.com

Wikipedia - htt p://nl.wikipedia.org/wiki/Joomla!

BOEKEN

Corrò, Marco - Joomla! open source content management - MyStudy Van Duuren Media

Eddie, Andrew; Kempens, Alex; Schornböck, Dieter - Joomla Developers’ Manual - Signwork

Graf, Hagen - Building Websites with Joomla! - Packt Publishing

Joomla!™ is Free Soft ware released under the GNU/GPL License.

Joomla! - meuwissen-design.nl · arti kels als blog gaat gebruiken, is dit zeer handig. In de blog...

Documents

Transcript of Joomla! - meuwissen-design.nl · arti kels als blog gaat gebruiken, is dit zeer handig. In de blog...