Joomla! Open Source Content Management System. Dhr. Evert Jochums Turnhout Cross-media ontwerp

Joomla!

Open Source Content Management System

Dhr. Evert Jochums Turnhout 2006-2007 3 Cross-media ontwerp

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 krachtige Open Source Content Management Systemen. Het wordt over de hele wereld gebruikt voor alles van een simpele website tot complexe bedrijfsapplicaties. 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 artikelen, 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 praktisch geen kennis voor nodig. Joomla! beschikt over zeer veel extensies, tools,… die deze codes allemaal automatisch kunnen genereren. Een belangrijk onderdeel van Joomla! is de mogelijkheid tot het uitbouwen van een gemeenschap op uw site. Het aanmaken van een registratieformulier 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 Voorwoord Samenvatting 1. Inleiding 4 2. Benodigde kennis 5 3. Installatie 6 4. Joomla!’s back-end 7 Login ......................................................................................... 7 Homepage ................................................................................ 8 Onderdelen Control Panel ...........................................................9 Onderdelen navigatiebalk .........................................................13

5. Content beheren 15 Section .................................................................................... 15 Category ................................................................................. 15 Content item .......................................................................... 16 Static Content item .................................................................16 6. Eigen template 17 Ontwerp van template ...........................................................17 HTML pagina omzetten naar PHP pagina ...............................18 XML ........................................................................................ 20 Stylesheet ............................................................................... 21 Suffix ....................................................................................... 24 Template uploaden.................................................................25 7. Menu aanmaken 26 Menu ...................................................................................... 26 Menu items ............................................................................ 27 8. Joomla! componenten/extensies 30 Componenten/extensies installeren ......................................30 JoomlaXplorer ........................................................................ 33 Community Builder ................................................................34 Fireboard ................................................................................ 35 Joomap ................................................................................... 35 9. Eigen werk 36 Spizzy bvba ............................................................................. 36 10. Conclusie 40 11. Referenties 41 Websites ................................................................................. 41 Boeken.................................................................................... 41

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-functionele website kan bouwen.

Joomla! Content Management System

4

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 nuttig en een kennis van PHP kan ook zijn voordelen bieden, maar is minder belangrijk.


5

3. INSTALLATIE Joomla! kan zowel lokaal als online geïnstalleerd worden. In dit werk ga ik niet op de installatie hiervan in. Enkele links naar sites met een duidelijke uitleg over de installatie van Joomla!: -

http://wiki.dutchjoomla.org/index.php/Installatie_1.0 http://www.byte.nl/docs/Joomla-Installatie.html http://nl.wikibooks.org/wiki/Joomla/Installatie


6

4. JOOMLA!’S BACK-END In dit hoofdstuk leert men meer over de back-end van joomla! en de configuratie ervan.

LOGIN Uw site url + /administrator

Figuur 4.1: Login


7

HOMEPAGE

Figuur 4.2: Homepage

Figuur 4.3: Navigatiebalk & submenu

De homepage kan opgesplitst worden in twee delen. Het eerste deel is de navigatiebalk. 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 navigatiebalk.


8

Onderdelen Control Panel Add New Content Hiermee kan men nieuwe content toevoegen aan uw website.

Figuur 4.4: Nieuw content item aanmaken

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

Figuur 4.5: Content Items Manager


9

Static Content Manager Hier bevindt zich de content die niet onderhevig is aan vele veranderingen en die niet tot een bepaalde categorie of sectie behoren.

Figuur 4.6: Static Content Manager

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

Figuur 4.7: Front Page Manager

Section Manager Hier bevinden zich secties die in de site aanwezig zijn. Natuurlijk is het ook mogelijk om nieuwe secties te toe voegen.

Figuur 4.8: Section Manager

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

Figuur 4.9: Category Manager


10

Media Manager Een verkenner die enkel te gebruiken is voor afbeeldingen.

Figuur 4.10: Media Manager

Trash Manager In dit onderdeel kan men verwijderde items terugplaatsen of definitief verwijderen.

Figuur 4.11: Trash Manager

Menu Manager Hier 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.

Figuur 4.12: Menu Manager

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

Figuur 4.13: Language Manager


11

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

Figuur 4.14: User Manager

Global Configuration Dit wordt gebruikt om de globale instellingen aan te passen.

Figuur 4.15: Global Configuration


12

Onderdelen navigatiebalk Home Hiermee keert men terug naar het Control Panel. Site

Global Configuration Aanpassen van de globale instellingen. Language Manager Hier kunnen nieuwe talen geïnstalleerd worden om het gebruik van Joomla! te vergemakkelijken. Media Manager Een verkenner die enkel te gebruiken is voor afbeeldingen. Preview Hier 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. Statistics Joomla! kan enkele statistieken bijhouden zoals bv. zoektermen, aantal bezoekers,… Deze gegevens worden hierin bewaard. Template Manager Dit 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 Manager In dit onderdeel kan men verwijderde items terugplaatsen of definitief verwijderen. User Manager Hier kan men de gebruikers van de site instellen en hen bepaalde rechten geven.

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.


13

Content Onder dit item bevindt zich alles wat met de content (inhoud) van de site te maken heeft. Hier kunnen newsitems, FAQ’s, sections, categories,… toegevoegd, bewerkt of verwijderd worden. Components Dit menu bevat alle geïnstalleerde componenten van Joomla!. Componenten kunnen beschouwd worden als kleine applicaties binnen Joomla!. Vele van deze applicaties worden gebruikt om meer interactieve 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. Modules Modules 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. Mambots De term Mambots is afkomstig van het Mambo-CMS (voorloper van Joomla! CMS). Mambots zijn kleine ‘robots’ die er voor zorgen dat het systeem goed functioneert. Standaard zijn er Mambots aanwezig voor de content, de editors en de zoekfuncties. Installers Onder 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. Messages In dit onderdeel bevinden zich de ontvangen berichten van andere gebruikers van uw Joomla! site. System Hier bevindt zich extra informatie over Joomla!. Zoals PHP instellingen, systeem informatie,… Help Een help functie die men kan raadplegen bij bepaalde problemen.


14

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.

Figuur 5.1: Structuur Joomla! site

De structuur van Joomla! kan opgedeeld worden in 3 niveau’s: 1. Secties 2. Categorieën 3. Content items

SECTION Vooraleer men kan beginnen met content te integreren in Joomla!, moet men de verschillende secties aanmaken. Door op de homepage op Add Sections te klikken of door in de navigatiebalk naar Content > Section Manager te gaan, kan dit gebeuren.

CATEGORY Na het aanmaken van de verschillende secties, 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 navigatiebalk naar Content > Category Manager te gaan. Joomla! Content Management System

15

CONTENT ITEM Vanaf nu kunnen er Content items (artikels) toegevoegd worden. Een Content item bestaat uit twee delen: de intro text en de main text. Vooral als men deze artikels 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 artikel. Tijdens het aanmaken van deze Content items wordt er steeds gevraagd naar de sectie 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 Static Content items. Deze laatste zijn terug te vinden op de homepage onder de knop Static Content Manager of in het navigatiemenu 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 sectie en categorie. Meestal worden hierin teksten aangemaakt die niet al te veel wijzigingen ondergaan bv. copyrights.


16

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 afbeeldingen, 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 toekomstige 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.

Figuur 6.1: Ontwerp HTML & CSS

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


17

HTML PAGINA OMZETTEN NAAR PHP PAGINA Omdat Joomla! gebruik maakt van de PHP scripttaal 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 http://extensions. joomla.org/. Bij search zoekt men op ‘joomlasolutions’. Als dit gebeurd is download en installeer dan deze extensie: ‘Free Dreamweaver template tool by Joomlasolutions’. Start Dreamweaver opnieuw op en open de index.html pagina. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> Joomla Website

Figuur 6.2: Code van 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 Joomlasolutions1. 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.3: Joomlasolutions1 werkbalk


18

Wanneer men geen gebruikt maakt van Dreamweaver, moet men de geselecteerde code zoals hierboven omschreven, vervangen door de code hieronder weergegeven. id ) { initEditor(); } ?> <meta http-equiv=”Content-Type” content=”text/html;>” /> ” ; ?>” ; ?> Figuur 6.4: Joomla! PHP codes

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! posities nog geplaatst worden. Hiervoor kan ook gebruik gemaakt worden van de joomlasolutions1 werkbalk. Na het plaatsen van de posities ziet de code er zo uit:

Figuur 6.5: Template code met Joomla! posities

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


19

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 installatie van uw template overgezet worden. Hieronder vindt men een voorbeeld van een XML-bestand. <mosinstall type=”template”> template_joomla dd/mm/jjjj Auteursnaam None [email protected]/authorEmail> www.author.com 1.0 <description>Beschrijving van de template <files> <filename>index.php <filename>images/image1.gif <filename>images/image2.gif <filename>images/image1.jpg <filename>images/image2.jpg <filename>css/template_css.css Figuur 6.6: XML-bestand

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


20

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 optimale 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. /* 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 fieldset{} .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{}

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{}

Figuur 6.7: Joomla! CSS


21

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 bevatten. table.contentpaneopen{} table.contentpaneopen td{} table.contentpaneopen td.componentheading{} table.contentpane{} table.contentpane td{} table.contentpane td.componentheading{} table.contentpaneopen fieldset{} Dit geeft de opmaak voor de secties, categorieën en content die in de structuur van een tabel zijn gemaakt. De opmaak van deze classes komen dus op elke pagina voor. .button{} Hiermee wordt de stijl 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#active_menu{} a.mainlevel#active_menu:hover{} Hiermee wordt de opmaak van de navigatie verzorgd. Bij het id active_menu kan een bepaalde stijl worden meegegeven voor het menuonderdeel dat actief is. Een actief menu item is gelinkt aan de pagina die op dat moment wordt weergegeven. a.sublevel:link, a.sublevel:visited{} a.sublevel:hover{} a.sublevel#active_menu{} Sublevel geeft de opmaak aan de submenu items. Ook hier is de id active_menu van toepassing, wanneer een bepaald submenu item actief is. .mostread Hiermee bepaalt men de opmaak van het overzicht met de meest gelezen items (nieuws, artikels,…).


22

div.mosimage{} Hierin wordt een afbeelding in de content weergegeven. Deze kan hiermee opgemaakt worden. .mosimage{} Hiermee kan men vb. een bepaalde marge, kader,… rond alle afbeeldingen weergegeven, die in de content verschijnen. .mosimage_caption{} Dit wordt gebruikt om het bijschrift van afbeeldingen een bepaalde opmaak te geven.


23

SUFFIX Wanneer men een bepaald Joomla! item individueel wil opmaken, kan hier een suffix op toegepast worden. Onderstaand voorbeeld maakt dit duidelijk. Voorbeeld: Main Menu. Om Main Menu een andere opmaak te geven, gaat men naar het navigatiemenu item Modules > Site Modules. Om deze module te openen klikt men op Main Menu. Bij het onderdeel Parameters vindt men Menu Class Suffix 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 afbeelding weergeeft.

Figuur 6.8: Suffix toepassing

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#active_menu{} a.mainlevel#active_menu:hover{} Wanneer men nu gebruik wil maken van de benaming van de aangemaakte suffix, 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#active_menu-andereopmaak{} a.mainlevel-andereopmaak#active_menu-andereopmaak:hover{}


24

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 navigatiebalk (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.

Figuur 6.9: Template installeren

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 ‘Continue’. Om uw template als standaard template in te stellen, drukt men op de ‘radio button’ voor de gewenste template en klikt men rechtsboven op Default. Er verschijnt nu een groen vinkje bij het gekozen template.

Figuur 6.10: Geïnstalleerde templates


25

7. MENU AANMAKEN Een zeer belangrijk onderdeel van een website is de navigatie of het menu. Het is essentieel 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 hoofdnavigatie wordt gebruik, omdat Joomla! deze standaard koppelt met de positie mosMainBody().

MENU Om een nieuw menu aan te maken gaat men in de navigatiebalk 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 title. De menunaam wordt weergegeven in het overzicht van de verschillende menu’s. De moduletitel wordt weergegeven in de back-end bij de componenten en in de front-end boven het menu zelf (indien gewenst).

Figuur 7.1: Menu Details

Wanneer men een nieuw menu hebt aangemaakt, wordt dit automatisch opgenomen in de navigatiebalk onder het ‘Menu’ item.


26

MENU ITEMS Om in een bepaald menu nieuwe items toe te voegen, gaat men in de navigatiebalk 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.

Figuur 7.2: Nieuw menu item toevoegen

Content Blog - Content Category Blogweergave van een categorie. Blog - Content Category Archive Blogweergave van een categoriearchief. Blog - Content Section Blogweergave van een sectie. Blog - Content Section Archive Blogweergave van een sectiearchief. Link - Content Item Een link creëren die rechtstreeks naar een bepaald content item gaat. Link - Static Content Een link creëren die rechtstreeks naar een bepaald statisch content item gaat. List - Content Section Creëren van een lijst van content categorieën voor een specifieke sectie. Joomla! Content Management System

27

Submit - Content Hiermee creëert men een link die de gebruikers (minimaal Author niveau) in staat stelt via de front-end artikels te schrijven. Table - Content Category Geeft een tabel weer van content items voor een specifieke categorie. Miscellaneous Separator / Placeholder Hiermee 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. Submit Submit - Content Hiermee creëert men een link die de gebruikers (minimaal Author niveau) in staat stelt via de front-end artikels te schrijven. Components Component Creëert een link naar een in Joomla! aanwezig extern component. Link - Component Item Creëert een link naar een in Joomla! aanwezig intern component. Link - Contact Item Creëert een link naar één of meerdere contactpersonen. Link – Newsfeed Via dit item creëert men een link naar nieuws dat op andere sites wordt aangeboden (bv. RSS feeds). Table - Contact Category Geeft een tabel weer van content items voor een specifieke categorie. Table - Newsfeed Category Geeft een tabel weer van nieuws items voor een specifieke categorie. Table - Weblink Category Geeft een tabel weer van verschillende weblink items voor een specifieke weblink categorie.


28

Links Link - Component Item Creëert een link naar een in Joomla! aanwezig intern component. Link - Contact Item Creëert een link naar één of meerdere contactpersonen. Link - Content Item Een link creëren die rechtstreeks naar een bepaald content item gaat. Link – Newsfeed Via dit item creëert men een link naar nieuws dat op andere sites wordt aangeboden (bv. RSS feeds). Link - Static Content Een link creëren die rechtstreeks naar een bepaald statisch content item gaat. Link – Url Hiermee 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.

Figuur 7.3: Weergave van een bepaald menu

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 sectie. Hier kan men aanduiden wanneer en op welke pagina het menu zichtbaar moet zijn. Joomla! Content Management System

29

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 officiële site met als adres: http://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

Figuur 8.1: Nieuw ciomponent installeren

Om een nieuw component te installeren, gaat men in het navigatiemenu 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 altijd met com.

Figuur 8.2: Geïnstalleerde componenten


30

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

Figuur 8.3: Nieuwe module installeren

De wijze van installatie is hetzelfde als bij een component.

Figuur 8.4: Geïnstalleerde modules


31

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

Figuur 8.5: Nieuwe mambot installeren

De wijze van installatie is hetzelfde als bij een component.

Figuur 8.6: Geïnstalleerde mambots


32

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.7: JoomlaXplorer


33

COMMUNITY BUILDER Community Builder is een extensie voor Joomla!’s User Manager. Het bevat extra velden in het profiel, meer uitgebreide registratie workflow, gebruikslijsten, extra opties voor de administrator, mogelijkheid om afbeeldingen 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.8: Community Builder credits

Figuur 8.9: Community Builder configuratie


34

FIREBOARD Fireboard is een zeer handig component wanneer men op de website een forum ter beschikking wil stellen. Na de installatie 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 gebruikersprofielen van Community Builder, zodat men bij het gebruik van de site zich slechts één maal hoeft aan te melden.

Figuur 8.10: Fireboard Control Panel

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 8.11: Joomap Configuration


35

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

SPIZZY BVBA

Figuur 9.1: Ontwerp template SPiZZY bvba

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


36

Figuur 9.2: Homepage van SPiZZY bvba

Op deze afbeelding is duidelijk te zien dat niet alle posities, 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 positie ‘User 1’ bevinden zich de benamingen IT news, Telecom news en Other news. Deze items worden weergegeven in wat men ‘Slides’ noemt.


37

Figuur 9.3: Zoekresultaten

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


38

Figuur 9.4: Contactformulier

Hierboven bevindt zich een afbeelding van hoe een contactformulier in Joomla! wordt weergegeven. Ook de aanmaak hiervan is zeer eenvoudig. De contactformulieren bevinden zich in de navigatiebalk 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.


39

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 interactive pagina met verschillende applicaties. 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: http://www.winmag.nl/artikelen.php?action=OPEN&AC G=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.


40

11. REFERENTIES WEBSITES Dutch Joomla - http://www.dutchjoomla.org Joomla! - http://www.joomla.org Joomlapolis - http://www.joomlapolis.com Wikipedia - http://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 Software released under the GNU/GPL License.


41

Joomla! Open Source Content Management System. Dhr. Evert Jochums Turnhout Cross-media ontwerp

Recommend Documents