De auteur van dit ebook kan op geen enkele manier verantwoordelijk gehouden worden voor eventuele onjuistheden in dit ebook

2

Joomla ebook – Een fantastische website maak jezelf

Disclaimer Bij de samenstelling van dit ebook is de grootst mogelijke zorg besteed aan de juistheid en correctheid van de informatie die in dit ebook wordt verstrekt.

De auteur van dit ebook kan op geen enkele manier verantwoordelijk gehouden worden voor eventuele onjuistheden in dit ebook.

Belangrijk Je mag dit ebook gratis weggeven of verkopen tegen elke prijs je maar wilt. Het ebook mag uitsluitend in deze vorm worden verspreid, het is niet toegestaan de inhoud en/of opmaak te wijzigen, of informatie uit dit ebook op een andere wijze te gebruiken.

Plaats dit ebook op je website, geef het aan de leden van je mailinglijst of verkoop het op advertentiesites.

www.joomlaebook.nl 2

3


Inhoudsopgave VOORWOORD ........................................................................................................................................ 5 1.

WAT IS JOOMLA ............................................................................................................................ 6 1.1 JOOMLA IS EEN CMS........................................................................................................................ 6 1.2 HOE WERKT HET? ............................................................................................................................ 6 1.2.1 Een gewone website............................................................................................................ 7 1.2.2 Een website met een CMS .................................................................................................. 8 1.3 W AT ZIJN DE VOORDELEN? ............................................................................................................... 9 1.4 W AT KUN JE ALLEMAAL MET JOOMLA? ............................................................................................. 10 1.5 W AAR KUN JE JOOMLA KOPEN? ...................................................................................................... 11

2. DE INSTALLATIE ............................................................................................................................. 12 2.1 W EBSERVER VOORBEREIDING......................................................................................................... 12 2.2 DATABASE VOORBEREIDING ............................................................................................................ 13 2.3 DOWNLOADEN JOOMLA BESTANDEN ................................................................................................ 14 2.4 UPLOADEN JOOMLA BESTANDEN ..................................................................................................... 16 2.5 INSTALLATIE................................................................................................................................... 20 3. HET UITERLIJK VAN JE WEBSITE ................................................................................................ 29 3.1 STANDAARD UITERLIJK NA INSTALLATIE............................................................................................ 29 3.2 W AT IS EEN TEMPLATE ? ................................................................................................................. 29 3.2.1 Index.php .............................................................................................................................. 30 3.2.2 TemplateDetails.xml ............................................................................................................. 32 3.2.3 Template_thumbnail.png ...................................................................................................... 32 3.2.4 template.css.......................................................................................................................... 32 3.3 DE MEEGELEVERDE TEMPLATES...................................................................................................... 33 3.4 ANDERE TEMPLATES ...................................................................................................................... 35 3.5 JE EIGEN TEMPLATE ....................................................................................................................... 37 3.5.1 De mapstructuur ................................................................................................................... 37 3.5.2 Posities en Modules ............................................................................................................. 38 3.5.3 Het index.php bestand .......................................................................................................... 42 3.5.4 De stylesheet ........................................................................................................................ 46 3.5.5 templateDetails.xml .............................................................................................................. 49 3.5.6 Het template installeren ........................................................................................................ 51 3.5.7 Het template verder afmaken ............................................................................................... 55 4. DE INHOUD VAN JE WEBSITE ....................................................................................................... 64 4.1 SECTIES EN CATEGORIEËN EN ARTIKELEN........................................................................................ 64 4.2 DE VOORPAGINA VAN JE SITE .......................................................................................................... 66 4.3 MEER OVER ARTIKELEN .................................................................................................................. 69 4.4 W EERGAVES VAN ARTIKELEN .......................................................................................................... 76 4.5 PUBLICEREN EN DEPUBLICEREN VAN ARTIKELEN .............................................................................. 87 5. EXTRA FUNCTIONALITEIT OP JE WEBSITE ................................................................................ 90 5.1 COMPONENTEN.............................................................................................................................. 90 5.2 MODULES ...................................................................................................................................... 95 5.3 PLUGINS ........................................................................................................................................ 99 5.4 UITBREIDINGEN UIT DE JOOMLA EXTENSIONS DIRECTORY .............................................................. 102 6. WEBSITE CONFIGURATIE ............................................................................................................ 106 6.1 W EBSITE INSTELLINGEN................................................................................................................ 106 6.2 SYSTEEMINSTELLINGEN ................................................................................................................ 108 6.3 SERVER INSTELLINGEN ................................................................................................................. 109 7. HET BEVEILIGEN VAN JE WEBSITE ........................................................................................... 109 7.1 HET ADMINISTRATOR ACCOUNT ..................................................................................................... 110


4


7.2 EEN STERK WACHTWOORD ........................................................................................................... 111 7.3 RECHTEN OP MAPPEN .................................................................................................................. 112 7.4 HET ADRES VAN DE ADMINISTRATOR PAGINA .................................................................................. 113 7.5 DE JOOMLA SECURITY CHECKLIST ................................................................................................. 114 TOT SLOT ........................................................................................................................................... 115 5 GRATIS TEMPLATES ..................................................................................................................... 115 BIJLAGEN........................................................................................................................................... 116 HOOFDSTUK 2 W EBSERVER SOFTWARE .............................................................................................. 116 HOOFSTUK 3 PEUTROËN TEMPLATE .................................................................................................... 116 HOOFDSTUK 5 AUTOWEEKBLAD BANNER ............................................................................................. 116


5


Voorwoord Hartelijk dank voor het downloaden van dit ebook over Joomla. Ik hoop dat dit boek de start mag zijn van één of meerdere prachtige websites die je zult gaan maken.

In dit boek vind je heel veel informatie over hoe je een website opzet en configureert met Joomla. Deze informatie wordt in de vorm van een casus aan je gegeven, je gaat namelijk aan de hand van dit boek een website maken voor het fictieve automerk Peutroën. Overal waar tijdens deze casus gesproken wordt over www.peutroen.nl daar mag je dit vervangen voor je eigen website naam.

In dit ebook staat de belangrijkste informatie die je moet weten om productief te kunnen zijn met Joomla. Niet alle Joomla mogelijkheden worden besproken, omdat dit ebook dan veel te groot worden. Wel ben je, na het doorwerken van dit ebook, goed in staat om de mogelijkheden die niet worden behandeld zelfstandig te lijf te gaan. Na het uitvoeren van alle handelingen die in de ebook worden beschreven, zul je namelijk behoorlijk goed je weg kunnen vinden in Joomla.

Wanneer in dit ebook aangegeven wordt dat je iets moet invullen, dan wordt hetgeen je moet invullen altijd tussen dubbele aanhalingstekens gezet. Dit ziet er als volgt uit: Vul bij dit scherm het volgende in: “Gepubliceerd”.

Het is dan bedoeling dat je het woord Gepubliceerd invult, zonder de dubbele aanhalingstekens.

Oke, tijd om aan de slag te gaan. Heel veel plezier en succes met het maken van websites met Joomla.

Mocht je na het doorwerken van dit ebook de smaak te pakken hebben en je Joomla kennis verder willen uitbreiden, lees dan ook mijn ebook over het bouwen van Joomla templates: http://www.netspecialist.nl/ebooks/joomlatemplates.html

Mindert Aardema www.joomlaebook.nl 5

6


1. Wat is Joomla

1.1 Joomla is een CMS Joomla is een CMS, dit staat voor Content Management Systeem. Wat is nu een CMS? Een CMS is een programma waarmee je eenvoudig een website kunt beheren. Beheren betekent in dit geval het kunnen uitvoeren van de volgende handelingen: 

Het toevoegen/wijzigen/verwijderen van artikelen of pagina’s aan je website



Het kunnen toevoegen en verwijderen van afbeeldingen op je website



Het kunnen toevoegen/wijzigen/verwijderen van menu items (knoppen) op je website



Het op een door jou bepaald tijdstip kunnen publiceren en dé-publiceren van pagina’s, menu items etc op je website



Het toevoegen van extra functionaliteit op je website (denk hierbij aan een gastenboek, een webwinkel, een contactformulier etc.)



Het toevoegen van gebruikers op je website, waarbij je onderscheid kunt maken wat deze gebruikers kunnen zien en kunnen wijzigen op je website



Het eenvoudig kunnen wijzigen van het uiterlijk van je website



En nog veel meer

Kortom, met een CMS heb je een krachtig stuk gereedschap in handen om een mooie, dynamische website te maken en te onderhouden. Een CMS kan het verschil maken tussen een website die een blok aan het been is en een website die daadwerkelijk toegevoegde waarde heeft voor jou of voor je bedrijf.

1.2 Hoe werkt het? Een website die is gebouwd op basis van een CMS werkt wezenlijk anders dan een gewone website. Om de werking van een CMS als Joomla duidelijk te maken, wordt nu eerst de werking van een gewone website uitgelegd. Daarna wordt, om het verschil aan te tonen, de werking van een website met een CMS uitgelegd.


7


1.2.1

Een gewone website

Een gewone website is opgebouwd uit HTML bestanden (HTML is de taal waarin websites worden gebouwd), en eventuele afbeeldingen. Deze bestanden worden opgeslagen op een webserver. Wanneer een bezoeker met zijn webbrowser naar je site toe surft door in de adresbalk de naam van jouw site te typen (www.jouwsite.nl), dan zal er verbinding worden gemaakt met de webserver waarop de bestanden van je website staan. De webserver leest het verzoek van de webbrowser (laat mij de website www.jouwsite.nl zien). Vervolgens stuurt de webserver het index bestand (dit is de hoofdpagina van een website) terug naar de webbrowser. In dit index bestand staat de tekst van je website. Als er in je index bestand ook afbeeldingen staan, dan worden deze ook naar de webbrowser gestuurd. Ook de opmaak van de website (lettergrootte, achtergrondkleur etc) staan in het index bestand gedefinieerd.

De webbrowser ontvangt het index bestand en de afbeeldingen en toont deze vervolgens als een webpagina op het scherm van de bezoeker. In de volgende afbeelding wordt dit weergegeven.

Bij een gewone website staat elke pagina (met teksten en afbeeldingen) in een apart bestand. Als een bezoeker op een menu item klikt om bijvoorbeeld de pagina “contact.html” te bekijken, dan maakt zijn webbrowser weer contact met de webserver. De webserver stuurt vervolgens het bestand “contact.html” weer terug naar de webbrowser en deze toont dit bestand weer als de webpagina “contact” op het scherm van de bezoeker.

Dit mechanisme werkt prima voor kleine websites die niet of heel weinig veranderen. Het grote nadeel is dat, wanneer je een pagina toe wilt voegen, je een nieuw HTML


8


bestand zult moeten maken en op al je bestaande HTML bestanden de menubalk zult moeten aanpassen (je wilt immers dat er een menu item komt dat verwijst naar deze pagina). Verder dien je in elk HTML bestand de opmaak van je website te definiëren. Wanneer je dit wilt doen, dan zul je een gedegen kennis van HTML moeten hebben.

Het kan ook anders, dat zul je in de volgende paragraaf zien.

1.2.2

Een website met een CMS

Een website met een CMS werkt wezenlijk anders dan een gewone website. Een website met een CMS bestaat uit 3 onderdelen, te weten: 

De techniek van je website (scripts, dit zijn kleine programmaatjes die zijn geschreven in een bepaalde programmeertaal)



De opmaak van je website (hoe je website eruit ziet. De opmaak is opgeslagen in een template)



De inhoud van je website (alle teksten, afbeeldingen, menu items etc. Deze zijn opgeslagen in een database)

Wanneer een bezoeker met zijn webbrowser naar www.jouwsite.nl toe surft, dan wordt er weer een verbinding gelegd met de webserver. De webserver zoekt het opgevraagde bestand op. In dit geval is dit bestand niet een HTML pagina maar een script. De webserver voert dit script uit. Het script zorgt er voor dat de juiste menu items, teksten en afbeeldingen uit de database gehaald worden. Vervolgens kijkt de webserver welk template gebruikt moet worden en worden de opgehaalde menu items, teksten en afbeeldingen met het template terug gestuurd naar de webbrowser. De webbrowser toont de ontvangen menu items, teksten en afbeeldingen als een webpagina op het scherm van de bezoeker, en zorgt er voor dat dit gebeurt met de opmaak zoals die in het template beschreven staat. In de volgende afbeelding zie je hoe dit in zijn werk gaat.


9


De werking van een CMS lijkt in eerste instantie misschien ingewikkelder dan die van een gewone website. Echter, in de praktijk blijkt een CMS juist veel gemakkelijker in het gebruik dan een gewone website. De scripts bijvoorbeeld, hoef je niet zelf te maken, deze worden gewoon met Joomla meegeleverd. En, om pagina’s ,menu items etc te maken of te bewerken heb je geen enkele kennis nodig van HTML, scripttalen, databases of andere moeilijke dingen nodig. Je kunt al deze dingen namelijk doen via je webbrowser op een erg gemakkelijke manier. Dit wordt overigens verder in dit ebook uitgebreid behandeld.

We zullen nu eens gaan kijken naar de voordelen van een CMS.

1.3 Wat zijn de voordelen? Een CMS is ooit bedacht om het onderhouden van websites gemakkelijker te maken. En gemakkelijker is het inderdaad geworden. Hieronder worden de voordelen van een CMS opgenoemd. Alle onderstaande zaken zijn niet mogelijk bij een gewone website.


10




Je kunt zelf eenvoudig pagina's, menu items, afbeeldingen etc. aanmaken, bewerken en verwijderen



Voor het toevoegen, wijzigen of verwijderen van pagina’s, afbeeldingen, menu items etc. is geen technische kennis nodig



Het uiterlijk van een website met CMS is vastgelegd in een template. Nieuwe pagina’s die je aanmaakt, worden hierdoor automatisch met de juiste opmaak weergegeven



Je kunt meerdere personen autoriseren voor het toevoegen van pagina’s, menu items, afbeeldingen etc. Je kunt het up to date houden van de website dus laten uitvoeren door meerdere personen



De navigatiestructuur is eenvoudig aan te passen



Je kunt eenvoudig extra functionaliteit toevoegen aan je site (bijvoorbeeld een webwinkel, gastenboek etc.)

Dit zijn enkele van de belangrijkste voordelen van een CMS. In dit ebook gaan we dus werken met het Joomla CMS. In de volgende paragraaf wordt uitgelegd wat je allemaal kunt met Joomla.

1.4 Wat kun je allemaal met Joomla? Eigenlijk is in de bovenstaande paragrafen al veel gezegd over de mogelijkheden van een CMS in het algemeen. Al deze mogelijkheden gelden natuurlijk ook voor Joomla.

Dit betekent dus dat je met Joomla: 

Pagina’s kunt aanmaken/bewerken/verwijderen



Menu items kunt aanmaken/bewerken/verwijderen



Zaken op je website toevoegen en verwijderen op het tijdstip dat jij kiest



Met een paar muisklikken het hele uiterlijk van je website kunt wijzigen



Verschillende mensen aan je website kunt laten werken



Etc.


11


Al deze zaken kunnen op een hele eenvoudige manier vanuit je webbrowser gedaan worden. Joomla bestaat namelijk uit twee gedeeltes, een voorkant en een achterkant. De voorkant is de website die bezoekers zien als ze naar je site surfen. De achterkant is het beheerdersgedeelte van je site. Deze is ook via de webbrowser te benaderen. Als je naar de beheerderspagina gaat, dan dien je in te loggen met een gebruikersnaam en wachtwoord. Na het inloggen kom je in de beheeromgeving terecht alwaar je al bovenstaande activiteiten kunt uitvoeren. Daarnaast biedt Joomla de mogelijkheid voor anderen om programma’s te bouwen die naadloos in Joomla te integreren zijn. Dit kan voor jou erg nuttig zijn. Dankzij deze mogelijkheid zijn er namelijk enorm veel (meestal gratis) uitbreidingen voor je website te downloaden. Deze uitbreidingen zijn zeer eenvoudig in Joomla te installeren. Je kunt dus hiermee de functionaliteit van je website oneindig uitbreiden.

Als jij op een bepaald moment besluit dat je een boodschappenkarretje wilt toevoegen op je website, omdat je dingen wilt gaan verkopen, dan kan dit. Je download een winkelkarretje-module, installeert deze in Joomla en je kunt starten met het verkopen van dingen via je website.

1.5 Waar kun je Joomla kopen? Zo’n prachtig product als Joomla met zoveel mogelijkheden, dat zal flink wat kosten……

Niet dus. Joomla is open source software en is geheel gratis te downloaden en te gebruiken. Je kunt Joomla downloaden op www.joomla.org


12


2. De Installatie Na dit inleidende verhaal over content management systemen in het algemeen en Joomla in het bijzonder, kan ik me voorstellen dat je staat te popelen om te beginnen met het bouwen van je eigen website. Laten we aan de slag gaan.

Voor dat je website online kunt zetten, moet je een aantal voorbereidende activiteiten uitvoeren. Deze stappen zijn achtereenvolgens: 

Het voorbereiden van de webserver



Het aanmaken van een database



Het downloaden van Joomla



Het kopiëren van Joomla naar de webserver



Het installeren van Joomla

Nadat deze activiteiten zijn uitgevoerd, gaan we met het echt leuke werk beginnen, namelijk het opbouwen van je website. Maar goed, laten we met de voorbereiding beginnen.

2.1 Webserver voorbereiding Joomla heeft, om goed te kunnen functioneren, de volgende zaken nodig: 

Een webserver (hierop plaats je alle bestanden waaruit je website bestaat)



PHP (Joomla is gebouwd met de programmeertaal php. De webserver waarop je Joomla site wordt geïnstalleerd dient php te ondersteunen)



Een database (Joomla bewaart alle artikelen, menu items, afbeeldingen etc in een database. Wanneer een bezoeker van je site een pagina opent, dan zorgt Joomla ervoor dat de juiste tekst en afbeeldingen van deze pagina uit de database gehaald worden en geprojecteerd worden op het beeldscherm van deze bezoeker)

In deze paragraaf gaan we het hebben over de webserver. Hoe kom je nu aan een webserver? Als je zelf heel handig bent, kun je zelf een webserver installeren op je


13


PC. Hiervoor is open source (gratis) software te vinden op het internet. Hiervoor verwijs ik je door naar de bijlage.

Er zijn echter ook bedrijven die je tegen een (kleine) vergoeding een webserver aanbieden. Je hoeft dan dus niet zelf een webserver te installeren en te configureren, het enige wat je hoeft te doen is het kopiëren van je bestanden naar deze webserver. Bedrijven die webservers aanbieden worden webhosting bedrijven genoemd.

Een webhosting bedrijf zorgt er voor dat je domeinnaam (www.jouwnaam.nl) geregistreerd wordt en dat je ruimte hebt waar je je website bestanden neer kunt zetten. Wanneer een bezoeker naar je website surft, dan zal hij uitkomen bij de webserver van het webhosting bedrijf en vanaf deze webserver wordt dan je website getoond.

Bij de keuze van een webhosting bedrijf dien je er op te letten dat dit bedrijf ondersteuning aanbiedt voor php en MySQL. Kijk bijvoorbeeld eens op http://www.hosting-bedrijven.nl/ voor een lijst van bedrijven die webhosting aanbieden.

Zoals al gezegd, heeft Joomla PHP ondersteuning nodig om te kunnen functioneren. Wanneer je zelf een webserver installeert, dan zul je hierop ook PHP moeten installeren. Het voert te ver voor dit ebook om hierover uitleg te geven. We beperken ons dus tot installatie van Joomla op een webserver van een webhosting bedrijf dat PHP ondersteuning aanbiedt.

Wanneer het webhosting bedrijf PHP ondersteuning aanbiedt, dan hoef je verder geen voorbereidingen meer te treffen op dit gebied. Dat betekent dat we nu verder kunnen gaan naar de volgende stap, namelijk het gereed maken van de database.

2.2 Database voorbereiding Voor een goede werking van Joomla heb je dus een database nodig. Wat doet deze database nu precies. In hoofdstuk 1 heb je kunnen lezen hoe een content management systeem werkt. De database wordt dus gebruikt om alle teksten, afbeeldingen, menu items etc in op te slaan. Joomla slaat dus artikelen niet op als


14


bestanden maar slaat artikelen op in een database. Wanneer een bezoeker van je site een pagina opent, dan zoekt Joomla in de database de teksten en afbeeldingen die bij deze pagina horen en toont deze vervolgens op het scherm van de computer.

Joomla maakt gebruik van een MySQL database. MySQL is open source database software die uitermate geschikt is voor gebruik op websites in combinatie met PHP. Vaak zul je dan ook zien dat webhosting bedrijven die PHP ondersteunen ook MySQL ondersteunen.

Om je database voor te bereiden, dien je in te loggen op de beheerpagina van je webhosting bedrijf en ga naar “database beheer”. Het is per webhosting bedrijf verschillend waar je dit onderdeel kunt vinden, en soms kan dit onderdeel een andere naam hebben. In ieder geval dien je te zoeken naar een onderdeel waar je nieuwe databases en nieuwe database gebruikers kunt aanmaken. Maak nu eerst een nieuwe database aan en noteer de naam die je deze database geeft. Maak vervolgens een databasegebruiker aan en noteer ook de naam en het wachtwoord hiervan. Joomla heeft de naam van de database nodig om te kunnen bepalen waar hij de teksten, afbeeldingen etc kan neerzetten en kan opvragen. Joomla heeft de database gebruikersnaam en wachtwoord nodig om verbinding te kunnen maken met de database.

Nu je een database en database gebruiker hebt aangemaakt, ben je klaar voor de volgende stap.

2.3 Downloaden joomla bestanden Joomla bestaat uit een aantal mappen en bestanden. Deze mappen en bestanden zijn te downloaden vanaf de Joomla website, het adres van deze website is http://www.joomla.org


15


De laatste versie van Joomla is meteen vanaf de voorpagina te downloaden (zie afb.):

Klik op “Download Joomla”. Op de pagina die nu verschijnt kies je voor de full package. Joomla wordt nu gedownload in een ZIP bestand. Een ZIP bestand is als het ware een soort archief waarin meerdere mappen en bestanden kunnen zitten (in dit geval alle Joomla mappen en bestanden). Om de bestanden in het ZIP bestand te kunnen gebruiken, moet je ze eerst uitpakken (unzippen). Hiervoor is op het internet veel gratis software te vinden. Een goed ZIP programma is 7-ZIP (http://www.7zip.org).

Nu je Joomla gedownload hebt, dien je dus eerst het ZIP bestand uit te pakken. Nadat je dit gedaan hebt, is er een mapje aangemaakt met daarin alle bestanden en mappen van Joomla.

Nu kun je de Joomla mappen en bestanden gaan uploaden naar je webserver.


16


2.4 Uploaden joomla bestanden Het uploaden van de joomla bestanden betekent niets anders dan dat je de bestanden van je harde schijf kopieert naar de webserver. Hiervoor kun je FTP cliënt software gebruiken, je kunt het ook gewoon met de functionaliteit van Windows doen. Het eerste wat je moet doen is in de Windows verkenner een verbinding maken met de webserver. Dit doe je in Windows Vista op de volgende manier: Ga naar “Computer” nu wordt het scherm geopend waarin de in je computer aanwezige schijven worden getoond. Klik ergens op een leeg stuk van het scherm op je rechter muisknop en kies voor “Netwerklocatie toevoegen”. Het volgende scherm verschijnt (zie afb.):


17


Klik op “Volgende” Nu krijg je het volgende scherm te zien (zie afb.):


18


Klik ook hier op volgende om het volgende scherm te krijgen (zie afb.):


19


Vul bij “Internet- of netwerkadres” de ftp server in die je van je webhosting bedrijf hebt gekregen (of die je zelf hebt ingesteld) en klik op volgende, het volgende scherm verschijnt (zie afb.):

Haal het vinkje weg bij “Anoniem aanmelden” en vul bij “Gebruikersnaam” de naam in die je van je webhoster hebt gekregen en klik op volgende. In het laatste scherm dat nu verschijnt, kun je op “voltooien” klikken. Als je het vinkje aan laat staan bij “Deze netwerklocatie openen als ik op Voltooien klik” dan zal er verbinding met de webserver worden gelegd. Er zal gevraagd worden naar je wachtwoord, vul hier het wachtwoord in dat je van je webhoster ontvangen hebt.

In het scherm dat nu verschijnt, kun je een naam opgeven voor deze netwerkverbinding. Geef de verbinding een logische naam en klik op volgende


20


Nu je een verbinding met de webserver hebt opgezet, kun je deze verbinding openen in de Windows verkenner als ware het een map op je eigen PC.

Open nu de map waarin je de Joomla bestanden hebt uitgepakt. Selecteer alle mappen en bestanden (dmv de toets combinatie ctr - a) en kopieer alle mappen en bestanden (toets combinatie ctr – c). Ga vervolgens naar het venster waarin de verbinding met de webserver getoond wordt, daar plak je de Joomla mappen en bestanden (toets combinatie ctr – v).

Nu alle Joomla bestanden zijn gekopieerd naar de webserver, ben je klaar voor het daadwerkelijk installeren van Joomla.

2.5 Installatie Nu gaat het leuk worden, we gaan nu echt beginnen met het opzetten van een website. We gaan dit in de vorm van een casus doen. We gaan namelijk een website opzetten voor een zelf verzonnen automerk, te weten Peutroën.

Het voorbeeld Peutroën is puur bedoeld als een voorbeeld hoe je een website in Joomla kunt bouwen, onderhouden en uitbreiden. Overal waar vanaf nu gesproken wordt over www.peutroen.nl kun je dit vervangen voor www.jouwsite.nl.

Om de installatie te starten, gaan we met de internet browser naar de website www.peutroen.nl toe. Je ziet nu het volgende scherm (zie afb.)


21


In dit scherm kun je kiezen welke taal gebruikt dient te worden tijdens de installatie. Wanneer je een keuze hebt gemaakt, klik je in de rechter bovenhoek op “volgende”.

Nu zie je het volgende scherm (zie afb.) In dit scherm worden de resultaten van de pré installatie controle getoond. Voor een correcte werking van Joomla moeten de items rechtsbovenin allen voorzien zijn van een groene “ja”. Als hier een aantal zaken een rode “nee” hebben, dan dienen instellingen aan de webserver gewijzigd te worden. Hiervoor dien je contact op te nemen met je webhosting bedrijf.


22


De items rechtsonderin zijn meer aanbevelingen. Wanneer daar enkele items op “rood” staan, kan Joomla nog zonder problemen geïnstalleerd en gebruikt worden. Een klik op “volgende” brengt ons naar het volgende scherm (zie afb.)

Hier worden de licensiebepalingen waaronder Joomla mag worden gebruikt getoond. Klik hier weer op “volgende” en het volgende scherm verschijnt (zie afb.)


23


Dit is een belangrijke stap in de installatie. In dit scherm wordt aangegeven van welke database Joomla gebruik moet maken en met welke gebruikersnaam er aangelogd dient te worden. De volgende velden dienen nu ingevuld te worden: 

Type database: dit is (bijna) altijd MySQL



Naam Host: dit is meestal “localhost”. Je webhosting bedrijf kan je vertellen wat hier precies dient te worden ingevuld



Gebruikersnaam: hier vul je de databasegebruikersnaam in die je eerder hebt aangemaakt



Wachtwoord: hier vul je het wachtwoord in van de databasegebruiker



Naam database: Hier vul je de naam van de database in die je eerder hebt aangemaakt

Bij “geavanceerde instellingen” kun je één en ander laten staan zoals het staat. Klik op “volgende” en het volgende scherm verschijnt (zie afb). In dit scherm vul je de FTP gegevens in die je van je webhosting bedrijf hebt ontvangen.

Na het invullen van de FTP gegevens (wat overigens niet verplicht is, deze velden mogen dus ook leeg gelaten worden) klik je op “volgende”. Nu zie je het volgende scherm (zie afb).


24


In dit scherm wordt de installatie van Joomla afgerond. Hier vul je de naam van de website in (in dit geval Peutroën). Verder vul je het administrator email adres en het wachtwoord van het administrator account in. Je kunt hier ook kiezen om voorbeeld data te installeren. Wanneer je hiervoor kiest, dan worden er al allerlei artikelen, menu items en andere zaken aangemaakt op je website. Dit kan erg handig zijn wanneer je Joomla goed wilt leren kennen. Met behulp van de voorbeeld data krijg je een goed beeld hoe zaken gerealiseerd worden in Joomla en welke mogelijkheden er allemaal zijn.

In dit ebook kiezen we er echter voor geen voorbeeld data te installeren. Wij gaan de website helemaal zelf vullen met pagina’s, menu items, afbeeldingen en nog veel meer

Na het invullen van alle velden en het (eventueel) installeren van voorbeeld data, klik je op volgende. Er wordt gevraagd of je zeker weet of je geen voorbeeld data wilt installeren. Klik op OK. Nu volgt het laatste scherm van deze installatie (zie afb.)


25


De laatste stap van deze installatie is het verwijderen van de map “installation” van de webserver. Dit is een beveiligingsstap. Als je de map laat staan, dan geef je hackers de mogelijkheid vrij eenvoudig de website te her-installeren, met alle gevolgen van dien. Je nieuwe site is pas te openen nadat de map “installation” is verwijderd.

Oke, we hebben de map verwijderd, en we gaan nu de site www.peutroen.nl openen. We zien het volgende (zie afb.)


26


Aangezien we geen voorbeeld data hebben geïnstalleerd, is de website nog behoorlijk leeg. Zoals in hoofdstuk 1 al aangegeven, bestaat een Joomla site uit een voorkant en een achterkant. De voorkant is de website die bezoekers zien, de achterkant is de beheeromgeving van de website. Om naar de beheeromgeving te gaan van de website, ga je naar http://www.peutroen.nl/administrator. Nu zie je het volgende scherm (zie afb.):

Log in met de gebruikersnaam “admin” en het wachtwoord wat je aan het einde van de installatie hebt opgegeven. Na inloggen, zie je het volgende scherm (zie afb.):

Zoals je ziet zijn alle teksten en menu items in het Engels. Het eerste wat we nu gaan doen is een Nederlands taalpakket installeren. Dit Nederlandse taalpakket is te


27


vinden op de website http://extensions.joomla.org . Wanneer je op deze website komt, zoek dan naar “taalbestand”. Er is één zoekresultaat, te weten “Dutch – Translations for Joomla”. Klik op “download” nu verschijnt het volgende scherm (zie afb.):

Kies hier voor de full version en de meest recente versie van de Nederlandse vertaling en download deze (door er op te klikken). Nu ga je in de beheeromgeving van de website naar het menu item “extensions → install/uninstall” (zie afb.);


28


Nu verschijnt het volgende scherm (zie afb.):

Klik op de knop “bladeren” en blader naar het taalbestand dat je zojuist gedownload hebt (nl-NL_joomla_lang_full.1.5.XX.zip) en klik vervolgens op de knop “upload file and install”. Na installatie van het taalbestand, ga je naar het control panel (via menu “site → control panel”). In het control panel kies je voor “language manager”, het volgende scherm wordt geopend (zie afb.);

Om voor je site de Nederlandse taal als standaard in te stellen, selecteer je voor zowel “site” als “administrator” Nederlands en klik je op “default”.

Nu we Joomla hebben geïnstalleerd en het Nederlandse taalbestand hebben geïnstalleerd, kunnen we ons gaan bezig houden met het uiterlijk van de website.


29


3. Het uiterlijk van je website 3.1 Standaard uiterlijk na installatie Nu Joomla geïnstalleerd is, ben je er natuurlijk nog niet. Je wilt ook dat je website er goed en aantrekkelijk uitziet. Ook hier kan Joomla uitkomst bieden. Het uiterlijk van een CMS zoals Joomla wordt geregeld door zogenaamde templates. Je kunt op het internet vele templates downloaden. Veel van deze templates zijn gratis. Ook kun je zelf je eigen template maken. Maar voor we op zoek gaan naar mooie templates, of er zelf één gaan maken, gaan we eerst kijken wat nu precies een Joomla template is.

3.2 Wat is een template ? In een template staan alle opmaak kenmerken van een website gedefinieerd. Met de opmaak van een website wordt bedoeld: 

De kleuren van een website



de lay-out (waar bevinden zich alle onderdelen van de website)



Lettertypes van de website



Hoe de menu items eruit zien



etc.

De Joomla templates zijn te vinden op de webserver in de map templates. Als je met je FTP programma of met de Windows verkenner naar je webserver toegaat en de map “templates” opent, dan zie je het volgende (zie afb.):


30


We zien dat Joomla standaard wordt meegeleverd met een aantal templates. We openen het template “rhuk_milkyway”. We zien nu het volgende (zie afb.):

Zoals je ziet, bestaat een template uit flink wat mapjes en bestanden. We zullen nu de belangrijkste behandelen.

3.2.1 Index.php In het index.php bestand staan de onderdelen beschreven waaruit je website bestaat. Het bestand is een combinatie van HTML (de taal waarmee websites worden gemaakt) en PHP (de programmeertaal waarmee functionaliteit aan websites kan worden toegevoegd). Het index bestand is het hoofdbestand van het template. We zullen eens gaan kijken hoe dit bestand eruit ziet. Je kunt index.php openen in kladblok of in een HTML editor zoals dreamweaver. Wij gebruiken een open source (gratis) code editor om index.php te openen, namelijk Notepad ++ (dit programma is te downloaden op http://sourceforge.net/projects/notepad-plus/ . Als we index.php openen, dan zien we het volgende (zie afb.):


31


Zoals je ziet is het bestand opgebouwd uit HTMLen PHP. We zien echter ook een paar interessante dingen, deze zijn met een rode lijn omcirkeld. Het volgende staat in de rood omlijnde gedeeltes: In het bovenste omlijnd gedeelte: <jdoc:include type="modules" name="top" /> In het onderste omlijnd gedeelte: <jdoc:include type="modules" name="user3" /> Dit zijn erg belangrijke onderdelen van het template. In een Joomla template zijn namelijk blokken te definiëren, waarin Joomla onderdelen kan tonen. Deze blokken worden posities genoemd. Hierboven zien we twee posities, namelijk “top” en “user 3”. Als we later meer zullen inzoomen op Joomla, zullen we zien dat Joomla onderdelen toont in zowel “top” als in “user3”. Ter illustratie, meestal is een menubalk van een website aan de linkerkant geplaatst. Het Joomla blok waarin de menubalk wordt getoond zal dus vaak “left” zijn. In de code ziet dit er dan uit als “<jdoc:include type="modules" name="left" />”. Het kan zijn dat één en ander nu erg ingewikkeld voor je wordt. Geen zorgen, later volgt hier meer uitleg over.


32


3.2.2 TemplateDetails.xml In dit bestand staan alle gegevens van het template beschreven, zoals naam van het template, naam en email adres van de maker van het template en de bestanden waaruit het template bestaat.

3.2.3 Template_thumbnail.png Dit is een miniatuur afbeelding van hoe je website eruit ziet wanneer je dit template kiest. Wanneer je in de beheeromgeving van je website naar de pagina gaat waar de beschikbare templates worden getoond, dan wordt dit bestand gebruikt om een voorbeeld van het template te laten zien.

3.2.4 template.css Dit bestand vind je in het mapje “css”. Template.css is een zogenaamd stylesheet. In dit stylesheet worden alle opmaak kenmerken weergegeven van de onderdelen die in index.php zijn gedefinieerd. Als in index.php bijvoorbeeld het onderdeel “menu” staat gedefinieerd, dan staat in template.css gedefinieerd hoe dit onderdeel eruit moet zien voor wat betreft kleuren, lettertype etc. etc.

Dit zijn de belangrijkste bestanden van een template. We zullen later in dit ebook zelf een eenvoudig eigen template maken. We zullen dan ook de andere bestanden tegen komen die we hier niet behandeld hebben. Heb je geen zin om een mooi template te zoeken of te maken en wil je meteen met je website aan de slag, dat kan natuurlijk ook. Joomla wordt geleverd met een aantal ingebouwde templates. Als we nu onze nieuwe website www.peutroen.nl openen, dan zien we het volgende (zie afb.):


33


De website ziet er meteen al mooi uit met het template wat Joomla na installatie standaard toont. Als je wilt, kun je nu al verder gaan met het plaatsen van artikelen en menu items op de website. Wij gaan echter eerst eens kijken welke templates nog meer meegeleverd zijn met Joomla.

3.3 De meegeleverde templates Om de templates die standaard met Joomla worden meegeleverd te bekijken, moeten we eerst ingelogd zijn op de beheeromgeving van de website. Zoals je al eerder hebt kunnen lezen, kom je daar door te surfen naar www.peutroen.nl/administrator.

Als je ingelogd bent, ga je naar het menu “extensies → Templatebeheer” (zie afb.):


34


Het volgende scherm wordt geopend (zie afb.):

Je ziet dat hier de aanwezige templates worden getoond. Joomla 1.5.14, dat is de versie waarmee in dit ebook wordt gewerkt, wordt geleverd met de templates: 

Beez



JA_Purity



rhuk_milkyway

De rhuk_milkyway is na een installatie van Joomla het standaard template. Wanneer je met je muis over de templates beweegt, dan wordt een voorbeeld van het template getoond, zodat je meteen een idee hebt hoe je site eruit zal gaan zien als je dat template als standaard instelt. Als je het selectievakje voor een template aanklikt, en vervolgens op “standaard” klikt (het gele sterretje rechtsbovenin), dan wordt dit het standaard template voor je website. We gaan nu een ander template als standaard instellen voor onze website. We klikken het selectievakje aan voor de “JA_Purity” template en klikken op “standaard”. Als we nu naar de voorkant van de website gaan (www.peutroen.nl), dan zul je zien dat de website er nu erg anders uitziet (als dit niet het geval is, dan moet je even op “F5” drukken, de pagina wordt dan opnieuw geladen).


35


Je ziet, met Joomla is het mogelijk om met een paar muisklikken je website een compleet ander uiterlijk te geven. Alleen, na de installatie van Joomla heb je de keuze uit slechts 3 templates, dit is natuurlijk wel een beetje beperkt. Gelukkig zijn er buiten de templates die standaard meegeleverd worden bij Joomla nog talloze templates via het internet te vinden. Veel van deze templates zijn gratis, echter als je gebruik maakt van een gratis template, dan is de kans groot dat ook andere mensen dit template gebruiken. Je website is dan dus niet echt uniek. Er zijn ook bedrijven die geheel op maat Joomla templates ontwikkelen. De prijzen hiervan variëren van een paar tientjes tot een paar duizend euro. Laten we nu eens op zoek gaan naar een ander template voor onze site.

3.4 Andere templates Zoals in de vorige paragraaf al genoemd, zijn er legio Joomla templates te vinden op het internet. We zullen nu eens een mooi gratis template op het internet zoeken en deze toevoegen aan de al aanwezige templates.

We beginnen onze zoektocht naar een template op www.google.com .We voeren de volgende zoekopdracht in “gratis joomla templates”. Je kunt de zoekterm ook in het Engels invoeren (free joomla templates). Google zal je behoorlijk veel resultaten terug geven. Open een aantal sites waar je gratis templates kunt vinden, en download er één die je mooi vind. Voor dit ebook is het template SkyScrapers gedownload van de website www.joomla24.com.

De bestanden en mappen van een template zijn altijd ingepakt in een .zip bestand ( soms wordt ook wel .tar of .tar.gz gebruikt als inpakmethode). Om het template te installeren op je website, dien je in te loggen op de beheeromgeving. Daarna ga je naar het menu “extensies  Installeer/deinstalleer”. Je ziet nu het volgende scherm (zie afb.)


36


Bij “Upload pakketbestand” klik je op de knop “bladeren”. Blader nu naar het template dat je zojuist gedownload hebt, selecteer het template en klik op “openen”. Klik vervolgens op de knop “Upload bestand en installeer”. Na afloop van de installatie zie je het volgende (zie afb.):

Nu hebben we dus een extra template beschikbaar binnen onze website. Om te checken of dit inderdaad het geval is, gaan we naar het menu “Extensies  Templatebeheer”. Zoals je ziet, is er naast de standaard meegeleverde templates nu een nieuw template bijgekomen (zie afb.)


37


Klik nu het selectievakje aan bij het nieuwe template en klik op “standaard”. Als we vervolgens naar onze site www.peutroen.nl gaan, dan zien we het nieuwe template in actie.

Download nog meer templates om meerdere verschillende ontwerpen voor je website te proberen, het aanbod is zo groot dat je waarschijnlijk wel een template zult vinden dat naar je zin is.

Wil je een echt uniek ontwerp, waarvan je zeker bent dat niemand anders het heeft, dan kun je zelf een geheel eigen template maken.

3.5 Je eigen template Een geheel eigen template zorgt er voor dat het uiterlijk van je site echt uniek is. Omdat het maken van een template behoorlijk complex is, worden in dit ebook alleen de basisstappen uitgelegd. Het resultaat van deze paragraaf zal zijn een heel basaal template dat je in Joomla kunt installeren en gebruiken voor je website. Dit gedeelte van het ebook is vooral bedoeld om je een idee te geven hoe je een Joomla template kunt maken. Om een echt mooi, compleet template te maken zul je meer verfijning en details moeten toepassen. In de bijlage vind je de kant en klare bestanden van het template dat we nu gaan maken.

3.5.1 De mapstructuur Een Joomla template bestaat uit een aantal mappen en bestanden. De eerste map die je aanmaakt, is de map die deze mappen en bestanden bevat. Deze hoofdmap krijgt de naam van het template.

We noemen ons template peutroen, we maken dus eerst een map aan met de naam “peutroen”. (je kunt er voor kiezen deze mappen en bestanden meteen op de webserver aan te maken, handiger is het om ze eerst ergens op de harde schijf van je PC aan te maken). Maak nu in de map peutroen twee nieuwe mappen. De eerste map noem je “css” de tweede map noem je “images”. www.joomlaebook.nl 37

38


Nu de mappen van ons template zijn gemaakt, gaan we de bestanden maken. Hiervoor gaan we een editor gebruiken. Je kunt kiezen voor kladblok of wordpad (deze twee worden met Windows meegeleverd), in dit ebook werken we met de open source editor Notepad++. In Notepad++ (of, als je een andere editor gebruikt, dan in die editor) open je een nieuw (leeg) bestand. Typ nu het volgende:

Sla vervolgens het bestand op als index.html in de map peutroen. Kopieer vervolgens dit bestand ook naar de mappen css en images. Door dit bestand in de mappen van je template te zetten, voorkom je dat bezoekers de inhoud van de mappen kunnen bekijken. Als er een map op je webserver staat, bijvoorbeeld de map foto, en een bezoeker gaat naar www.jouwsite.nl/foto dan zal hij kunnen zien welke bestanden in deze map aanwezig zijn. Als je het bestand index.html in je map hebt staan, zoals we het net aangemaakt hebben, dan zal de webbrowser van je bezoeker automatisch dit bestand openen en een lege webpagina tonen.

Verderop in dit hoofdstuk gaan we de Joomla template bestanden maken. We gaan het nu eerst echter over iets anders belangrijks hebben, namelijk posities en modules binnen Joomla.

3.5.2 Posities en Modules Modules zijn onderdelen die op verschillende plaatsen binnen je website kunnen worden weergegeven. Modules kunnen zowel tekst als functionaliteit bevatten. Een voorbeeld: de menubalk die je in onze website ziet (en waarin nu nog alleen de knop “home” te zien is), is een module. Ook zou je een inlog schermpje op je website kunnen weergeven. Zo’n schermpje is ook een module binnen Joomla.


39


Er worden een aantal modules meegeleverd met Joomla. Ter illustratie zullen we er eentje gaan activeren. We gaan naar de beheeromgeving van www.peutroen.nl. Vervolgens gaan we naar “extensies  Modulebeheer” (zie afb.)

We zien dan het volgende scherm (zie afb.):

Zoals je ziet, is er al één module geactiveerd (“main menu”). Deze module is de menubalk van de website. Als we nu op “nieuw” klikken, dan zien we de met Joomla meegeleverde modules (zie afb.):


40


We kunnen uit een flink aantal modules kiezen, zoals: 

een banner



Laatste nieuws



Enquête



etc.

We kunnen ook voor een “aangepaste HTML” module kiezen. Met deze optie kun je zelf een module maken. Op dit moment gaan we echter niet zelf een module maken, we kiezen dus een bestaande en wel de “wie is online” module. Selecteer de “wie is online” module en klik op “volgende”. Nu verschijnt het volgende scherm (zie afb.):


41


In dit scherm kun je een aantal parameters opgeven voor deze module. Je kunt bijvoorbeeld de module een titel geven en aangeven of deze titel getoond moet worden. Je kunt ook aangeven bij welke menu items de module getoond moet worden. Wat belangrijk is in dit scherm is de positie waarin de module wordt getoond. Je kunt in je template meerdere posities definiëren. Het hoofdmenu bijvoorbeeld staat meestal in de positie “left”. We gaan het dadelijk iets uitgebreider over deze posities hebben. We kiezen er nu eerst voor om de module in de positie “left” te plaatsen. Verder geven we de module de naam “wie is er online” we zetten een ja bij zowel “toon titel” als “geactiveerd”. De module wordt alleen getoond als “geactiveerd” op “ja” staat. Je kunt dus heel eenvoudig modules uit- en aanzetten op je website, alleen door hier een “ja” of een “nee” aan te klikken. Klik nu op “opslaan” en bewonder het resultaat op de website (zie afb.):

We hebben 1 gast online (dit ben jezelf ;-). Joomla deelt een website op in posities. Deze posities hebben een bepaalde naam. Standaard gebruikt Joomla de volgende namen voor posities: 

Breadcrumbs (hier wordt het kruimelpad getoond)



Search (hier wordt het zoekscherm in getoond)



Left (Hier wordt het hoofdmenu in getoond en eventuele extra modules)



Right (Modules die aan de rechterkant van de pagina worden getoond)



Banner (Hierin wordt een banner getoond)



Top (Hierin wordt vaak een tweede menubalk getoond)



Bottom (hierin wordt vaak een voettekst getoond)



User 1 (Hierin worden eventueel 1 of meerdere modules getoond)


42




User 2 (zie user 1)



User 3 (zie user 1)

Bovenstaande posities zijn overigens niet verplicht. Ook de naamgeving van de posities is niet verplicht, je kunt posities de naam geven die je zelf wilt. Waarschijnlijk is dit op dit moment nu nog een abstract verhaal. In de volgende paragrafen, als we ons template verder ontwikkelen, zal één en ander veel duidelijker worden. We gaan nu ons template maken, te beginnen met het index.php bestand.

3.5.3 Het index.php bestand We gaan beginnen met het belangrijkste bestand van het template, namelijk het “index.php” bestand. Wanneer een bezoeker naar je website surft, dan is het index.php bestand van je template het eerste bestand wat geopend wordt door de webbrowser van deze bezoeker. In dit index.php bestand staat beschreven wat er getoond dient te worden en door welk stylesheet de opmaak dient te worden bepaald.

Open nieuw (leeg) bestand in je editor (kladblok, notepad++). Het eerste wat we nu gaan invoeren is het volgende:

Dit regeltje code zorgt ervoor dat het index.php bestand alleen geopend mag worden door Joomla zelf. Als een bezoeker naar je site surft, dan zal Joomla het index.php bestand van je website openen. Als deze bezoeker nu het pad naar dit bestand zou kennen, en hij zou via dit pad het index.php bestand willen openen, dan volgt de melding “restricted access”. Dit is een ingebouwde beveiliging. Als het mogelijk zou zijn voor bezoekers om rechtstreeks de php bestanden van Joomla te openen, dan zou dit een behoorlijk beveiligingsrisico zijn. Het volgende dat we in index.php zetten, is de doctype declaratie. Dit regeltje tekst laat aan webbrowsers weten wat voor een type bestand nu precies geopend wordt.


43


Op basis hiervan bepaalt de webbrowser van een bezoeker hoe het bestand getoond dient te worden. De doctype declaratie ziet er als volgt uit (dit typ je dus in je editor):

Voor dit ebook is het verder niet van belang om exact te weten wat de doctype declaratie inhoudt. We gaan hier dan ook niet verder op in. Het volgende blok code dat in de index.php komt te staan is: <jdoc:include type="head" /> Het belangrijkste wat in dit gedeelte gedefinieerd wordt is de head sectie van de template. In de head sectie staan de verwijzingen naar stylesheets, de zoekwoorden en de beschrijving van de site, de auteur van de site, kortom de meta gegevens van je website.

Nu volgt de daadwerkelijke inhoud van je template, deze inhoud bepaalt hoe je website eruit zal gaan zien. De inhoud wordt de body genoemd. We gaan nu de body tags aanmaken, dit ziet er als volgt uit:


44


Tussen deze twee body tags (waarvan de begin tag is en de eind tag, komt de inhoud van ons template. We kiezen voor een ontwerp met een header en een footer en daartussen in 3 kolommen (zie afb.):

Om dit ontwerp te realiseren, typ je tussen en de volgende code:


45


Nu gaan we de posities invoeren. Een positie wordt aangegeven door het volgende regeltje code:

<jdoc:include type="modules" name="left" /> Zoals je ziet, wordt hiermee de positie “left” gedefinieerd. Voor de positie “top” zou de regel er zo uitzien:

<jdoc:include type="modules" name="top" />

We vullen nu op de juiste plekken de juiste posities in. Dit komt er als volgt uit te zien:

<jdoc:include type="modules" name="banner" />

<jdoc:include type="modules" name="left" /> www.joomlaebook.nl 45

46


<jdoc:include type="component" />

<jdoc:include type="modules" name="right" />

<jdoc:include type="modules" name="bottom" />

We zien één positie die wat vreemd is, namelijk “<jdoc:include type="component" />”. Deze positie is de plaats van de feitelijke artikelen of pagina’s op onze website. Dit zal duidelijk worden op het moment dat ons template klaar is en we het gaan testen.

Om het index.php compleet te maken, zetten we onderin een afsluit tag, deze ziet er als volgt uit:

Nu is ons index.php bestand klaar. In de bijlage kun je het complete template terug vinden, daarin vind je dus ook het complete index.php bestand terug.

3.5.4 De stylesheet We gaan nu het ontwerp dat we in het index.php bestand hebben gezet opmaken door middel van een style sheet. Met opmaken wordt bedoeld:



47

 Kleuren  Lettertypes  Breedte van kolommen  Etc Maak in de map “css” het bestand “template.css” aan. Dit bestand is het stylesheet van het template. Open het bestand in een editor. Typ nu het volgende in:

body { text-align: center; padding-top: 20px; background: #FF3300; font-family: arial; font-size: 11px; color: #FFFFFF; }

#container { display: inline-block; width: 800px; margin-left: auto; margin-right: auto; text-align: left; padding-top: 0; margin-top: 0; border: solid 1px #000000; background: #FFFFFF; }

#header { width: 800px; height: 125px; background: #333333; padding-top: 0;



48

}

#left { width: 150px; float: left; clear: left; padding-top: 10px; border-right: solid 1px #000000; border-bottom: solid 1px #000000; background: #999999; }

#right { width: 150px; float: right; clear: right; padding-top: 15px; border-left: solid 1px #000000; border-bottom: solid 1px #000000; background: #999999; }

#main { width: 800px; background: url(../images/mainbg.gif) repeat-y; }

#content { float: left; width: 490px; padding-bottom: 20px; }

#footer { www.joomlaebook.nl 48


49

width: 800px; height: 20px; background: #333333; float: left; }

Je hebt nu de lay-out opgemaakt, wat wil zeggen dat je de breedte en de kleuren van de kolommen en tekstvakken hebt ingesteld. Het resultaat gaan we later bekijken op het momen dat we het template gaan testen.

3.5.5 templateDetails.xml Het laatste bestand dat we aanmaken is het “templateDetails.xml” bestand. In dit bestand worden de gegevens van de ontwikkelaar en van het template zelf opgeslagen. Tevens worden alle bestanden weergegeven waaruit het template bestaat. Wanneer het template geïnstalleerd wordt, dan controleert Joomla aan de hand van het templateDetails.xml of alle bestanden aanwezig zijn. Zijn niet alle bestanden aanwezig, dan volgt er een foutmelding.

Maak een nieuw document aan in je editor, en typ daarin het volgende:

peutroen 23/09/09 Jouw naam [email protected] http://www.jouwsite.nl Jouw Naam all rights reserved For Peutroen use only 1.0 <description>Template voor Peutroen site index.php


50


templateDetails.xml index.html css/index.html css/template.css images/index.html <positions> <position>left <position>right <position>banner <position>bottom Sla dit bestand nu op als “templateDetails.xml” in de map peutroen van je template. Let er trouwens op dat je bij “peutroen” de naam van de template map invult. In ons geval dus “peutroen”. Zou je het mapje bijvoorbeeld “opel” hebben genoemd, dan zou er in jouw templateDetails.xml bestand hier dus “opel” staan.

De mappenstructuur en de bestanden van je template zien er nu als volgt uit (zie afb.):


51


3.5.6 Het template installeren We zijn nu zover dat we een eerste proefinstallatie van ons template kunnen gaan uitvoeren. Het eerste dat we gaan doen, is het “inzippen” van ons template. Maak met behulp van een inzip programma van de map “peutroen” een zip bestand met de naam “peutroen.zip”.

Log nu in op de beheeromgeving van de website www.peutroen.nl en ga daar naar “extensies → Installeer/Deïnstalleer. Bij “upload pakketbestand” blader je naar het zojuist aangemaakte peutroen.zip bestand en vervolgens klik je op “upload bestand en installeer”.


52


Nadat het template is geïnstalleerd, ga je naar “extensies → Templatebeheer”. Je ziet dat het template “peutroen” is toegevoegd. Let op de gegevens die bij versie, auteur etc. staan, dit zijn de gegevens die je in het templateDetails.xml bestand hebt gezet.

Maak het peutroen template het standaard template en ga vervolgens naar www.peutroen.nl om het template in actie te zien. Als het goed is, zie je het volgende

(zie afb.):

Op dit moment ziet de website er nog niet echt fraai uit maar we hebben wel zojuist ons eerste eigen template gemaakt. We zien al een paar Joomla modules terug komen. Weet je nog dat we zowel het hoofdmenu als de “wie is online” module op positie “left” hadden geplaatst? Je ziet beide modules nu in de balk aan de linkerzijde verschijnen. Laten we nu ook aan de rechterkant een module plaatsen, hiervoor gaan we weer naar de beheeromgeving van de website.

We gaan aan de rechterkant een poll installeren. Hiervoor gaan we in de beheeromgeving eerst naar “componenten Enquetes”. Het volgende scherm verschijnt (zie afb.):


53


Klik op “nieuw”. Nu verschijnt het volgende scherm (zie afb.):

Vul het scherm als volgt in: Onder gegevens: Titel: Mijn favoriete Peutroën B1 is de: Alias: Favoriet Interval: 86400 Gepubliceerd: Ja

Onder opties: Optie 1: B1 Sport Optie 2: B1 Classic Optie 3: B1 Cabrio Klik vervolgens op “opslaan”


54


Ga nu naar “extensies  Modulebeheer”. In het module beheerscherm klik je op “nieuw”, selecteer “enquête” en klik op “volgende”. Nu verschijnt het volgende scherm (zie afb.):

In dit scherm vul je het volgende in: Onder gegevens: Titel: Poll Toon titel en geactiveerd: Beide op Ja Positie: Right (mocht de optie “right” er niet bij staan, dan kun je dit ook gewoon intypen in dit veld).

Onder parameters selecteer je de enquête die je zojuist hebt aangemaakt. Klik op “opslaan” en ga vervolgens naar de website toe. Klik op de “home” link en je zult zien dat aan de rechterzijde van onze website de poll verschijnt.


55


3.5.7 Het template verder afmaken Ons template is op dit moment nog niet af. Het eerste dat we gaan doen, is een logo maken voor onze website. Dit kun je in elk grafisch software pakket doen, we gaan nu een heel simpel logo maken in het in Windows standaard meegeleverde programma “Paint”. Open Paint. Ga in Paint naar het menu “Afbeelding  Kenmerken”. Geef in het schermpje wat nu verschijnt aan dat de afbeelding 200px breed moet zijn en 105 px hoog (zie afb.):

Maak nu wat moois van je logo. Voor dit ebook gebruiken we een simpel logo dat er uitziet als volgt (zie afb.):

Sla het logo dat je gemaakt hebt op als gif bestand in de peutroen template map in de map “images”. Noem het bestand logo (zie afb.):


56


Je zult nu ongetwijfeld opmerken dat, nu we een bestand toegevoegd hebben aan ons template, we ook het templateDetails.xml bestand moeten aanpassen. Immers, daarin staat beschreven uit welke bestanden het template bestaat, en Joomla controleert hierop bij de installatie van het template.

Kijk in het templateDetails.xml naar het gedeelte

index.php templateDetails.xml index.html css/index.html css/template.css images/index.html images/logo.gif

Het zwarte gedeelte is hoe het oorspronkelijk was, het rode gedeelte is hetgeen we nu dus toevoegen. Let op, de bestandsnaam van het logo is logo.gif. Echter, Paint kan het bestand ook opgeslagen hebben als logo.GIF. Controleer even in je template of gif met kleine- of met hoofdletters staat, dit moet namelijk exact zo overgenomen worden in het templateDetails.xml bestand, anders zal Joomla een foutmelding geven bij het installeren van het template.

Sla nu het templateDetails.xml bestand op.

We gaan nu er voor zorgen dat het logo getoond wordt op de website, dit doen we door ons index.php bestand aan te passen. Open het index.php bestand van je template, en ga naar het volgende gedeelte toe:




57

Voeg de volgende regel toe meteen onder

Dit regeltje code zorgt er voor dat het logo wordt getoond met een breedte van 200 pixels en een hoogte van 105 pixels. Het “alt” gedeelte wordt getoond wanneer een bezoeker om één of andere reden je logo niet kan laden.

Nu ziet dit gedeelte er dus zo uit:


Sla het index.php bestand op. We gaan nu ook de menu items wat mooier maken. Open in de map “css” van je template het bestand “template.css”. Ga nu helemaal naar de onderkant van dit bestand en voeg het volgende toe:

.menu { list-style: none; padding-left: 0; margin-left: 0; }

.menu li a, .menu li a:visited { padding-left: 7px; display: block; font-family: verdana; font-size: 11px; www.joomlaebook.nl 57


58

color: #FFFFFF; text-decoration: none; line-height: 28px; border-bottom: 1px solid #5B92E3; }

.menu li a:hover { color: #FF3300; }

Ook zullen we het lettertype van het template wat verfraaien. Voeg het volgende toe aan het template.css bestand:

.contentheading { color: #333333; font-size: 20px; margin: 5px; }

p{ color: #333333; margin: 5px; }

Sla het template.css bestand op.

Voordat we het template opnieuw gaan installeren, gaan we eerst het peutroen template de-installeren van de website www.peutroen.nl. Ga in de beheeromgeving naar “extensies  Templatebeheer”. Selecteer nu eerst een ander template als het standaard template, dit is nodig om het peutroen template te kunnen de-installeren.


59


Ga nu naar “extensies  installeer/deïnstalleer”, het volgende scherm verschijnt nu (zie afb.):

Klik nu op “templates” selecteer in het scherm wat dan verschijnt het peutroen template en klik op “deïnstalleer”. Even later verschijnt de melding dat het deinstalleren gelukt is.

Maak nu met behulp van een zip programma weer een zip bestand van je template. Je maakt van de map “peutroen” dus een bestand met de naam “peutroen.zip”.

Installeer het template door in de beheeromgeving van de website te gaan naar “extensies  Installeer/Deïnstalleer”, vervolgens naar het bestand “peutroen.zip” te bladeren en daarna op “upload bestand en installeer” te klikken. Als je nu weer naar www.peutroen.nl kijkt, dan zie je dat de website er al iets fraaier uit ziet.

We gaan nu alvast wat tekst op de home pagina zetten, zodat het geheel echt op een website begint te lijken.


60


Ga in de beheeromgeving naar “Artikelen  Artikelbeheer”. Het volgende scherm verschijnt (zie afb.):

Klik op “nieuw” om een nieuw artikel aan te maken. Nu verschijnt het volgende scherm (zie afb.):

In dit scherm kun je een nieuw artikel maken en opslaan. In hoofdstuk 4 gaan we verder in op dit scherm, voor nu volstaat het invullen van de volgende zaken:

Titel: Welkom bij Peutroen Alias: Welkom Sectie: Selecteer ongecategoriseerd Gepubliceerd: Ja Voorpagina: Ja Categorie: ongecategoriseerd


61


In het tekstvak waarin je het artikel kunt typen, typ je de volgende tekst:

Welkom op de site van Peutroën, de site voor de moderne auto van nu.

Start op deze website de virtuele rondtour door de wereld van Peutroën. Ervaar de klasse, voel de rijke aankleding, geniet van de frisse kleuren.

Peutroën staat voor:



Klasse



Eigenzinnigheid



Dynamiek



Sportiviteit



Kwaliteit



Betaalbaarheid.

Laat u overtuigen op deze website en vraag vandaag nog een proefrit aan.

Zorg ervoor dat alle tekst opgemaakt wordt als paragraaf (dit kun je zien door te tekst te selecteren en te controleren of er in het rechter keuzevakje in de werkbalk van de editor “Paragraph” staat (zie afb.):

Klik nu op “opslaan”. Ga weer eens kijken op de website www.peutroen.nl en zie hoe de site er nu uitziet. Nadat je het resultaat van het door ons zelf gemaakte template bewonderd hebt, keer je weer terug naar de beheeromgeving. Als we naar “extensies  Templatebeheer” gaan en we zweven met onze muis over de templates, dan zie we bij elk template een voorbeeld verschijnen, behalve bij ons peutroen template. Laten we daar wat aan gaan doen.


62


Ga naar de website www.peutroen.nl. Maak nu een schermprint (dmv de toetsencombinatie “alt” en “PrintScrn” (hou de alt toets ingedrukt, druk op de printscrn toets en laat deze weer los, laat dan pas de alt toets weer los). Open nu het programma “Paint”. In paint klik je op het menu “Bewerken  Plakken”, nu wordt de schermprint weergegeven in Paint. Sla de schermprint op als “template_thumbnail.gif”.

Nu moeten we er voor zorgen dat de zojuist opgeslagen schermprint verkleind wordt. Hiervoor zijn op het internet genoeg gratis programmaatjes te vinden, een goede is bijvoorbeeld PixResizer, deze is onder andere te downloaden op http://www.nederlandstaligesoftware.nl/softwareprogrammas/pixresizer.html

Verklein de schermprint nu zo, dat de breedte 200px is. Verder is het van belang dat je de verkleinde schermprint niet opslaat als “gif” bestand maar als “png” bestand (ook dit is mogelijk met PixResizer). Je slaat de verkleinde schermprint dus op als “template_thumbnail.png” in de map peutroen van je template.

Ja, inderdaad, nu moeten we ook weer het templateDetails.xml bestand aanpassen. We hebben immers een bestand toegevoegd aan ons template. In het templateDetails.xml bestand vul je het “” gedeelte als volgt aan (de rode tekst is de toevoeging, de zwarte tekst is zoals het was)

index.php templateDetails.xml index.html template_thumbnail.png css/index.html css/template.css images/index.html images/logo.gif


63


Na het opslaan van het templateDetails.xml bestand, maak je van je template weer een zip bestand met de naam “peutroen.zip” (als de vorige er nog stond, dan kun je deze gewoon verwijderen).

De-installeer het peutroen template en installeer het opnieuw met het zojuist gemaakte zip bestand. Ga nu in de beheeromgeving naar “extensies Templatebeheer” en zweef met de muis over het Peutroen template. Als het goed is, wordt nu ook voor ons template een voorbeeld zichtbaar.

Mocht het allemaal niet goed zijn gegaan, of heb je geen zin in zelf het hele template te maken, dan maakt dat niet zoveel uit. Een link naar de downloadlocatie van het complete template dat we in dit hoofdstuk gemaakt hebben is terug te vinden in de bijlage van dit ebook.

Je zult begrijpen dat ons Joomla template op dit moment nog verre van compleet is. Er valt nog heel wat opmaak werk te doen en er dient dus nog veel toegevoegd te worden aan de stylesheet. Echter, het voert te ver voor dit ebook om de ontwikkeling van een compleet template te behandelen. Met de stappen uit dit hoofdstuk heb je een goede basis om zelf templates te gaan ontwikkelen. Op het internet zijn verder goede websites te vinden over het ontwikkelen van Joomla templates. Mocht je jezelf echt verder willen verdiepen in het bouwen van Joomla templates, dan raad ik je aan mijn ebook hierover te lezen. http://www.netspecialist.nl/ebooks/joomlatemplates.html

Voor het vervolg van dit ebook gaan we gebruik maken van het JA Purity template. Ga naar de beheeromgeving van de website en maak het JA Purity template het standaard template. We gaan ons nu bezighouden met de teksten, plaatjes, menu items, kortom de inhoud van de website.


64


4. De inhoud van je website We gaan nu onze website voorzien van teksten, afbeeldingen en menu items. Voordat we dit gaan doen, gaan we eerst kijken naar hoe Joomla informatie organiseert. 4.1 Secties en categorieën en artikelen In Joomla heet de tekst die wordt weergegeven op een pagina een artikel. Een artikel zou je je kunnen voorstellen als een A4tje met tekst over een bepaald onderwerp. Dit A4tje ligt samen met andere A4tjes over zowel hetzelfde onderwerp als andere onderwerp kriskras door elkaar op uw bureau. Omdat alle artikelen door elkaar heen liggen, verzamelt u alle A4tjes en stopt ze per onderwerp in een map. Voor elk onderwerp is er dus een map, en in deze map zitten alle A4tjes over dit onderwerp. Deze map wordt in Joomla een categorie genoemd. In een categorie over een bepaald onderwerp kunt u dus meerdere artikelen over dit onderwerp plaatsen. Nu ligt uw bureau verzameld met mappen waarin A4tjes zijn verzameld. Al deze mappen die allemaal een onderwerp vertegenwoordigen, kunnen weer in een lade gestopt worden, waarbij een lade een hoofdonderwerp is. De mappen die bij een hoofdonderwerp horen, worden in de lade van dit hoofdonderwerp gedaan. Zo'n lade wordt binnen Joomla een sectie genoemd. In de onderstaande afbeelding wordt getoond hoe Joomla informatie organiseert (zie afb.):


65


Doordat Joomla informatie indeelt in artikelen, categorieën en secties, kun je gemakkelijk informatie gegroepeerd verzamelen en kun je informatie eenvoudig terugvinden. Verder is het binnen Joomla mogelijk om informatie uit categorieën en/of secties gegroepeerd weer te geven op je website. Wat hier precies mee wordt bedoeld, wordt later in dit hoofdstuk verder uitgelegd.

We gaan nu iets doen, wat we al een beetje in het vorige hoofdstuk hebben gedaan, namelijk het plaatsen van informatie op de voorpagina van onze website.


66


4.2 De voorpagina van je site Ga naar de beheeromgeving van de website www.peutroen.nl (www.peutroen.nl/administrator) en klik op “voorpaginabeheer ” (zie afb.):


Je ziet het artikel dat we in hoofdstuk 3 aangemaakt hebben. We gaan wat aanpassingen in dit bericht maken. Klik op “welkom bij Peutroën”, nu opent zich het editor scherm, dit is het scherm waarin we het artikel kunnen bewerken. We gaan nu eerst een afbeelding toevoegen. Zoek op je eigen harde schijf of op het internet een afbeelding van een auto. Als je een mooi plaatje van een auto gevonden (en eventueel gedownload) hebt, ga dan weer naar de editor van het voorpagina artikel. Positioneer de cursor aan het begin van de tekst “Peutroën staat voor” en klik nu op het knopje “afbeelding” (dit knopje vind je onder tekstinvoer scherm). Het volgende schermpje wordt geopend (zie afb.):


67


Gebruik het knopje “bladeren” om de afbeelding van de auto te selecteren en klik vervolgens op het knopje “upload”. Het plaatje wordt nu naar de webserver verzonden. Zodra dit gebeurd is, klik je op het plaatje van de auto (deze komt na het uploaden tussen de andere plaatjes te staan) en vul je veldjes als volgt in:

Url afbeelding: deze wordt automatisch gevuld Beschrijving afbeelding: Het topmodel van Peutroën Titel: Het topmodel van Peutroën Uitlijning: rechts Onderschrift: Niet geselecteerd Vervolgens klik je op “invoegen” en de afbeelding wordt in het artikel geplaatst. Klik nu in de editor op “toepassen” en het artikel wordt opgeslagen. Ga naar www.peutroen.nl op het resultaat te bekijken.

Wanneer je het formaat van het plaatje wilt aanpassen, klik dan in de editor op de afbeelding, zodat deze omlijnd wordt door een zwarte lijn met op de hoeken en in het


68


midden van de zijkanten een wit vierkantje. Klik vervolgens in de werkbalk van de editor op de knop “afbeelding bewerken” (zie afb.):


Vul in het eerste veldje achter “Dimensions” 300 in en klik vervolgens op “Update”. Klik vervolgens in de editor weer op “toepassen” en bewonder het resultaat op www.peutroen.nl (wanneer de wijziging op de site nog niet is doorgevoerd, druk dan

even op de F5 knop om de website opnieuw te laden).

We gaan nu nog wat meer tekst toevoegen aan ons artikel. Typ onder de al aanwezige tekst het volgende:

Naast het leveren van uitstekende kwaliteit, heeft Peutroen ook het milieu hoog op de prioriteitenlijst staan. Zo zijn al onze modellen standaard uitgerust met: 

Een roetfilter



Banden met lagere rolweerstand



Hybride aandrijftechniek



Een start/stop systeem


69


Met een Peutroën kunt u dus gerust blijven auto rijden, terwijl u toch het milieu spaart. Alle Peutroëns hebben het groene A-label, wat natuurlijk ook erg veel bespaart op aanschaf en/of leasekosten. Omdat het artikel met deze extra toegevoegde tekst wel erg lang zou worden, gaan we een “lees meer” link toevoegen. Positioneer de cursor aan het begin van het stuk tekst dat je net hebt ingevoerd, en druk op “enter” om de tekst één regel te laten zakken. Ga nu met de cursor één regel naar boven, zodat deze tussen de oude tekst en de zojuist toegevoegde tekst komt te staan. Klik nu op de “lees meer” knop (deze vind je onder het veld waar je de tekst in kunt voeren). Nu zie je een rode stippellijn in de tekst verschijnen. Klik nu op “toepassen” en bekijk het resultaat op www.peutroen.nl (eventueel op F5 drukken om de pagina opnieuw te laden). Er is nu

onderaan de pagina een “lees meer” knop bijgekomen. Wanneer je daar op klikt, dan verschijnt de tekst die je zojuist hebt toegevoegd. Dit artikel voor de voorpagina is op dit moment klaar. We gaan nu meer inzoomen op alles wat te maken heeft met artikelen binnen Joomla 4.3 Meer over artikelen We hebben al één artikel aangemaakt en gewijzigd, namelijk het artikel van de voorpagina. Als we nu eens naar dit artikel kijken, dan vallen een aantal zaken op. Bovenaan het artikel staat een balk waarin de aanmaakdatum en de auteursnaam weergegeven worden. Tevens zijn er aan de rechterkant van deze balk knopjes te vinden om het artikel te printen, om te zetten naar PDF of het naar iemand te mailen (zie afb.):

Verder zie je onderaan het artikel staan wanneer de laatste aanpassing van het artikel heeft plaatsgevonden. We zullen nu eens gaan kijken waar dergelijke instellingen te vinden zijn en hoe je ze aan en uit kunt zetten. Ga naar de beheeromgeving van je website en ga naar “Artikelen  Artikelbeheer”. In het Artikelbeheer scherm zie je nu één artikel staan, namelijk het artikel wat op de voorpagina van onze site wordt weergegeven. In de menubalk, die bovenin dit


70


scherm te vinden is, zie je een aantal icoontjes staan, waaronder het icoon “Voorkeuren” (zie afb.):

Wanneer je op dit icoon klikt, dan opent zich het volgende scherm (zie afb.):

In dit scherm kun je allerlei voorkeuren voor je artikelen instellen, zoals onder andere het tonen van de auteursnaam, het tonen van een print, pdf en mail icoontje etc. Wanneer je met je muis over één van de instellingen zweeft, dan verschijnt er een korte omschrijving van het doel van de instelling. De voorkeuren die je in dit scherm instelt, worden toegepast op alle artikelen van je website. Je kunt echter deze voorkeuren ook per artikel instellen. Zo kun je dus standaard aangeven dat de www.joomlaebook.nl 70

71


auteursnaam niet getoond wordt, maar kun je voor specifieke artikelen aangeven dat de auteursnaam wel wordt getoond.

We gaan nu eerst in dit scherm de algemene voorkeuren instellen, we gaan later artikel-specifieke voorkeuren instellen. Wijzig in dit scherm de onderstaande voorkeuren:

Naam auteur: Verberg Aanmaakdatum en tijd: Verberg Iconen: Verberg PDF Icoon: Verberg Print Icoon: Verberg E-mail Icoon: Verberg Hits: Verberg Klik vervolgens bovenin dit scherm op “Opslaan”. Nu zijn de algemene voorkeuren voor je artikelen ingesteld. Kijk op www.peutroen.nl en klik op de “Home” link. Nu is de balk boven het artikel, met daarin de auteursnaam en de icoontjes verdwenen.

We gaan nu een tweede artikel aanmaken, en voor dit artikel gaan we een paar specifieke voorkeuren instellen. We gaan dit voor dit nieuwe artikel ook een sectie en een categorie aanmaken. We beginnen met het aanmaken van een sectie. Zoals je eerder in dit hoofdstuk hebt kunnen lezen, is een sectie in Joomla te vergelijken met een lade waarin je mappen met artikelen kunt bewaren. Ga in de beheeromgeving van de peutroën site naar “Artikelen  Sectiebeheer”. Klik in het “Sectiebeheer-scherm” op de “Nieuw” button om een nieuwe sectie aan te maken. Het volgende scherm verschijnt (zie afb.):


72


Je zult opmerken dat de meeste Joomla schermen op elkaar lijken. Als het goed is, zul je er ook steeds gemakkelijker je weg in vinden. Vul bij zowel “Titel” als “Alias” het volgende in: “Nieuws”. En geef aan dat deze sectie gepubliceerd dient te worden. Verder hoef je niets in te vullen. Klik op “Opslaan” om de sectie op te slaan. Ga nu naar “Artikelen Categoriebeheer”. Klik op “Nieuw” om een nieuwe categorie aan te maken. Geef als titel en alias het volgende op “Laatste Nieuws”. Geef verder aan dat de categorie gepubliceerd dient te worden en selecteer bij “sectie” de zojuist door ons aangemaakte sectie “nieuws”. (Nieuws is op dit moment ook de enige sectie waaruit je kunt kiezen. Zouden er meerdere secties aanwezig zijn, dan zou je ook een andere kunnen kiezen).

Ik het tekstvak typ je de volgende tekst: Op dit gedeelte van onze website vind u het laatste nieuws over het automerk Peutroën. www.joomlaebook.nl 72

73


Klik op “Opslaan”. Nu gaan we een nieuw artikel aanmaken. Ga naar “Artikelen  Artikelbeheer”. Klik op “Nieuw” om een nieuw artikel aan te maken. Vul in het scherm dat nu verschenen is de volgende zaken in:

Titel: De B1 debuteert op de Amerikaanse markt Alias: De B1 debuteert op de Amerikaanse markt Sectie: Nieuws Gepubliceerd: Ja Voorpagina: Nee Categorie: Laatste nieuws

En zet de onderstaande tekst in het tekstveld:

Afgelopen maandag was het eindelijk zover. Na jaren van voorbereidingen, zet Peutroën voet op de Amerikaanse markt. Op de Cars & Motor show van Las Vegas, één van de grootste autotentoonstellingen in de VS, werd de compleet vernieuwde Peutroën B1 tentoongesteld aan het Amerikaanse publiek.

Na het inrichten van een compleet dealernetwerk met 46 Dealers in 21 staten, is Peutroën nu helemaal klaar voor de verovering van de markt in de USA.

Voeg, om het af te maken, nog een leuke afbeelding toe aan je artikel, en klik vervolgens op “Opslaan”.

We gaan nu een menu item aanmaken die we koppelen aan het artikel dat we zojuist hebben gemaakt. Ga in de beheeromgeving naar “Menu’s  Main menu”. Het volgende scherm verschijnt (zie afb.):


74


Op dit moment is er nog maar één menu item aanwezig, Home. Klik op “Nieuw” om een nieuw menu item aan te maken. Nu verschijnt het volgende scherm (zie afb.):

We kiezen voor “Interne link  Artikelen” en vervolgens voor “Weergave artikel”. Het volgende scherm wordt nu getoond (zie afb.):


75


Vul het scherm als volgt in: Titel: Nieuws Alias: Nieuwsitems Gepubliceerd: Ja

Aan de rechterkant van het scherm zie je de parameters die je voor dit menu item kunt instellen.

Parameters (basis) Selecteer artikel: Selecteer het artikel dat we zojuist hebben aangemaakt

Parameters (component) Hier vind je de voorkeuren die we algemeen ingesteld hebben. In dit gedeelte kun je specifiek voor het artikel waarnaar dit menu item verwijst andere voorkeuren instellen.


76


Stel het volgende in: Aanmaakdatum en tijd: Toon Iconen: Toon E-mail icoon: Toon Parameters (systeem) Hier kun je nog een aantal voorkeuren instellen. Stel één en ander als volgt in: Paginatitel: Peutroën.nl - Het laatste nieuws (dit wordt getoond in de bovenste balk van het venster van je webbrowser ) Toon paginatitel: Nee (Als je dit op “Ja” zet, wordt deze paginatitel ook getoond boven het artikel, wij willen de titel alleen in de bovenste balk van het webbrowser venster tonen) Pagina class achtervoeging: Deze blijft leeg. Zoals je weet wordt het uiterlijk van de website geregeld door een template, in dit template staat alle opmaak van de site gedefinieerd. Als je hier iets invult, dan kun je voor deze specifieke pagina de opmaak van het template “overrulen”. Het voert echter te ver voor dit ebook om hier verder op detail in te gaan. Menu afbeelding: We selecteren geen afbeelding SSL inschakelen: selecteer “weigeren”. Klik nu op “opslaan” en kijk vervolgens naar de website. Klik op de “Home” link om het nieuwe menu item zichtbaar te maken. Klik vervolgens op het menu item “Nieuws”, het menu item dat we zojuist aangemaakt hebben en zie dat nu boven het artikel de aanmaak datum en het email icoon verschijnen.

Vind je niet dat www.peutroen.nl nu al een echte website begint te worden? Ben je klaar om nog een stapje verder te gaan? Oke, dan gaan we nu stoeien met de verschillende weergave mogelijkheden van artikelen op je website.

4.4 Weergaves van artikelen Weergaves van artikelen, wat wordt daar nu precies mee bedoeld? Wel, zoals we de site tot nu toe hebben opgebouwd, bevat elke pagina steeds één artikel. Er zijn echter meer mogelijkheden. Eén weergave mogelijkheid zijn we al tegen gekomen,


77


namelijk het verdelen van een artikel in twee stukken, een intro tekst en, onder een “lees meer” link de rest van het artikel.

Voordat we nu verder gaan, gaan we eerst een aantal secties, categorieën en artikelen aanmaken. Hieronder worden de secties, categorie:en en artikelen weergegeven die we gebruiken in die ebook. Als je in een erg creatieve bui bent, maak dan gerust nog meer secties, categorieën en artikelen aan. Hoe meer je dingen in Joomla doet, hoe sneller je zult leren Joomla helemaal te beheersen.

Maak in ieder geval de volgende zaken aan (hierbij wordt er van uit gegaan dat je aan de hand van de voorgaande paragrafen in staat bent de volgende handelingen uit te voeren):  Een sectie met de naam “Dealers”  Een sectie met de naam “Modellen”  Een sectie met de naam “Veel gestelde vragen”  Een categorie met de naam “Nederland” . Plaats deze categorie in de sectie “Dealers”.  Een categorie met de naam “USA” . Plaats deze categorie in de sectie “Dealers”.  Een categorie met de naam “A1” . Plaats deze categorie in de sectie “Modellen”.  Een categorie met de naam “B1”. Plaats deze categorie in de sectie “Modellen”.  Een categorie met de naam “C1”. Plaats deze categorie in de sectie “Modellen”.  Een categorie met de naam “Technische Handelingen”. Plaats deze categorie in de sectie “Veel gestelde vragen”.

Nu we de benodigde secties en categorieën hebben aangemaakt, kunnen we de artikelen gaan schrijven die we erin willen opslaan.


78


Maak een artikel aan met de naam “Amsterdam”. Geef aan dat dit artikel in de sectie “Dealers” en in de categorie “Nederland” opgeslagen dient te worden. De tekst van het artikel luidt als volgt:

Autobedrijf Arends Planetenbaan 32 8347 HG Amsterdam

Tel: 020-1234567 Fax: 020-7654321

Sla nu het artikel op. Maak nog 4 van dergelijke artikelen aan, maar dan voor 4 andere steden in Nederland.

Maak ook een paar artikelen voor dealers in de Verenigde Staten. Uiteraard sla je deze artikelen op in de sectie “Dealers” en de categorie “USA”.

Nu gaan we de artikelen maken voor de automodellen. Maak voor elk model twee pagina’s met daarin de omschrijving voor de modellen:

A1 Sport A1 Cabrio

B1 Classic B1 Supersport

C1 Sedan C1 Estate

Het is natuurlijk altijd leuk om de artikelen van de modellen te voorzien van een afbeelding. Bedenk zelf voor de artikelen een leuke tekst en zoek er een leuk plaatje bij (de tekst mag ook complete onzin zijn, het gaat erom dat je een paar artikelen aanmaakt).


79


Sla de 2 artikelen van het model A1 op in de sectie “Modellen” en de categorie “A1”, de artikelen voor het B1 model in de categorie “B1” van de sectie modellen en waarschijnlijk weet je nu ook wel in welke sectie en categorie je de artikelen voor het C1 model moet opslaan. Als laatste gaan we 10 artikelen maken voor de “Technische reparaties” categorie”. Misschien denk je dat 10 artikelen aanmaken erg veel werk is, daarom zullen we nu meteen ook een manier introduceren om één en ander wat sneller te laten verlopen. Maak een artikel aan met als titel “Distributieriem vervangen”. Vul als tekst van het artikel de onderstaande “dummytekst” in:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sla vervolgens het artikel op in de sectie “Veel gestelde vragen” en in de categorie “Technische handelingen”.

Na het opslaan, kom je automatisch weer terecht in het Artikelbeheer scherm. Zet nu een vinkje voor het zojuist aangemaakte artikelen “Distributieriem vervangen” en klik in de werkbalk op de knop “Kopiëren” (zie afb.):


80



Zorg dat je het artikel naar de juiste sectie en categorie kopieert, selecteer hiertoe aan de linkerkant van het scherm “Veel gestelde vragen / Technische handelingen””. Klik vervolgens op “Opslaan” en het artikel wordt gekopieerd. Het enige dat je nu nog hoeft te doen is de titel en het alias van het zojuist gekopieerde artikel te wijzigen. Open het artikel en wijzig de titel en Alias in “Oliepeil controleren”. Nu heb je twee artikelen in de sectie “Veel gestelde vragen” en de categorie “Technische handelingen”. Zet een vinkje voor deze twee artikelen, en herhaal de kopieer actie. Nu heb je twee artikelen gekopieerd. Vervang voor twee artikelen de titel en alias voor een andere technische handeling. Selecteer nu de 4 artikelen, en druk weer op “Kopiëren”. Deze stappen herhaal je net zolang tot je 10 artikelen hebt in de sectie/categorie “Veel gestelde vragen / Technische handelingen”.

Nu hebben we alle benodigdheden om wat te stoeien met weergaves.

We gaan nu eerst een nieuw menu item aanmaken. Ga in de beheeromgeving naar “Menu’s Main Menu”. Klik op “Nieuw” om een nieuw menu item aan te maken. Kies voor “Intern menu  Artikelen  Weergave “sectieblog”, het volgende scherm verschijnt (zie afb.):


81


Vul dit scherm als volgt in: Titel: Dealers Alias: dealers Gepubliceerd: Ja Onder ”parameters basis” selecteer je de sectie “Dealers”. Bij “beschrijving” en “beschrijving afbeelding” selecteer je “Verberg”. Verder stel je onder “parameters basis” de volgende voorkeuren in: Hoofdartikel: 0 Intro: 6 Kolommen: 2 Links: 10

Deze instellingen behoeven enige uitleg. Aangezien we nu geen menu item naar één artikel maken, maar een menu item naar een sectie met daarin twee categorieën met artikelen, moeten we aangeven hoe we dit willen weergeven op de pagina.


82


Een hoofdartikel wordt in zijn geheel weergegeven over de volle breedte van de pagina.. Vaak kies je voor 1 hoofdpagina.

Bij een intro, wordt alleen het gedeelte van een artikel getoond dat zich boven de “lees meer” link bevindt. Het aantal kolommen bepaalt hoeveel van deze intro’s worden weergegeven over de breedte van de pagina.

Bij links kun je aangeven van hoeveel artikelen je de link wilt tonen. Stel, er zijn 20 artikelen, je toont 1 hoofdartikel en 6 intro’s, dan zou je voor de overige 13 artikelen een link willen vertonen. Je vult daar dan 13 in.

Laten we nu verder gaan met het aanmaken van het menu item. Onder “Parameters systeem” geef je als paginatitel op “Dealers”. Selecteer “Ja” bij : “Toon paginatitel”. Klik nu op “opslaan” en bewonder het resultaat onder de link “Dealers” op www.peutroen.nl. Dat ziet er al fraai uit niet? Wat nu nog ontbreekt, is de categorie

titel. Je kunt van de nu getoonde dealers niet meteen zien of deze nu in Nederland of in de VS zijn gesitueerd. Om dit in te stellen ga je in de beheeromgeving weer naar “Menu’s  Main Menu” (waarschijnlijk stond deze pagina nog geopend) en klik op het menu item “Dealers”. Ga nu naar “Parameters component” , zoek naar “Categorienaam” en selecteer “toon”. Klik op “toepassen” en kijk vervolgens op de website of nu bij de dealers staat waar ze zijn gesitueerd. Doordat je nu op “toepassen” hebt geklikt in plaats van op “opslaan” blijft de pagina waarin je het menu item bewerkt geopend. Je ziet dat je onder “Parameters component” weer alle voorkeuren voor de artikelen kunt instellen (zoals toon aanmaakdatum, toon printicoon etc).


83


Ook onder “Parameters geavanceerd” kun je nog een aantal handige voorkeuren instellen. Je kunt daar bijvoorbeeld de volgorde in stellen waarin artikelen getoond worden. Dit kan handig zijn wanneer je bijvoorbeeld een lijst op alfabetische volgorde wilt tonen, of wanneer je nieuwsitems wilt tonen, waarbij het meest recente nieuwsitem getoond dient te worden.

We hebben nu een mooie weergave gemaakt van het dealernetwerk van Peutroën. Laten we nu een menu item maken voor de meest gestelde vragen. Ga weer naar “Menu’s  main menu” en klik weer op “Nieuw”. Kies voor “Interne link  Artikelen  Weergave categorieblog” het volgende scherm verschijnt (zie afb.):

Zoals je ziet lijkt dit scherm behoorlijk op het scherm dat hoort bij de sectieblog weergave. Geef dit menuitem de titel en alias FAQ. Selecteer onder “Parameters basis” de categorie “Veel gestelde vragen / Technische handelingen”. Verder wil je 1 hoofdartikel, 0 intro’s 2 kolommen en 10 links. Onder “Parameters systeem” vul je in dat de paginatitel “Veel gestelde vragen” moet zijn en dat je de paginatitel wilt tonen. Klik op “opslaan” en kijk vervolgens naar het resultaat op de website. www.joomlaebook.nl 83

84


Misschien dat je nog een leuke afbeelding wilt tonen bij de meest gestelde vragen. Dit kun je doen door voor de categorie “Meest gestelde vragen / Technische handelingen” een afbeelding te selecteren.

Het eerste wat je hiervoor moet doen, is het zoeken (of maken) van een leuke afbeelding. Als je een afbeelding hebt, ga dan in de beheeromgeving naar “Website  Mediabeheer”. Nu verschijnt het volgende scherm (zie afb.):

Via het mediabeheer scherm kun je alle verschillende media die aanwezig zijn op je site beheren. Op dit moment zijn er alleen nog maar afbeeldingen op onze site, maar je kunt je voorstellen dat we hier ook filmpjes en audiofragmenten zouden kunnen bewaren.

Aan de linkerkant van bovenstaand scherm, zie je de mappenstructuur van mediabeheer. Het is belangrijk om te weten dat alle afbeeldingen die in de artikelen worden getoond, zich in de map “stories” bevinden. We gaan nu echter een afbeelding aan een categorie koppelen, deze zetten we rechtstreeks in de “Mediabeheer” map en dus niet in de map “stories”. Klik op de “bladeren” knop om naar de afbeelding die je hebt gekozen te bladeren en klik vervolgens op “start upload”. De afbeelding wordt nu naar de webserver verzonden.


85


Ga nu naar “Artikelen  Categoriebeheer” en klik op de categorie “Technische handelingen”. Zoek naar de instelling “Afbeelding” en selecteer daar de afbeelding die je zojuist geüpload hebt. Kies bij afbeeldingspositie voor “rechts”. Vervolgens klik je op “Opslaan”. Ga nu naar “Menu’s  Main menu” en klik op het menu item “FAQ”. Bij “Parameter basis” zie je de volgende optie staan “Beschrijving afbeelding”. Zet deze op “toon” (zie afb.):

Sla het menu item op en kijk op de website of de afbeelding getoond wordt.

Het laatste dat we in deze paragraaf gaan doen, is het verfraaien van de homepagina van de website. Ga hiervoor eerst naar “Artikelen → Artikelbeheer”. Selecteer de artikelen “De B1 Debuteert op de Amerikaanse markt” en één van de artikelen uit de categorie “Veel gestelde vragen / Technische handelingen”. Klik bij deze geselecteerde artikelen op het rode icoontje met het witte kruis in de kolom “Voorpagina” (zie afb.);

Met deze handeling geef je aan dat je deze artikelen op de voorpagina wilt tonen. Ga nu naar “Artikelen → Voorpaginabeheer. In het scherm dat nu verschijnt, zie je de artikelen staan die op de voorpagina worden weergegeven (zie afb.):


86


In de kolom “Volgorde”, kun je met behulp van de groene pijltjes de artikelen op volgorde zetten. Zet de artikelen in de volgende volgorde: 1. Welkom bij Peutroën 2. De B1 debuteert op de Amerikaanse markt 3. Een van de technische handelingen Klik op het diskette icoontje naast het woord “Volgorde” om deze volgorde op te slaan. Ga nu naar “Menu's → Main menu”. Klik op het menu item “Home” om deze te wijzigen. Onder “Parameters (basis)” stel je het volgende in: Hoofdartikel: 1 Intro: 2 Kolommen: 2 Links: 4 Stel vervolgens bij “Parameters (geavanceerd)” het volgende in: Volgorde categorie: Volgorde Primaire sortering: Volgorde Met deze instellingen kun je aangeven in welke volgorde de artikelen weergegeven dienen te worden. We hebben nu ingesteld dat de volgorde waarin de artikelen nu staan gerangschikt (wat we zojuist met de groene pijltjes hebben gedaan) als volgorde moet worden aangegeven. Je kunt echter ook kiezen voor een alfabetische volgorde of een volgorde waarbij het nieuwste artikel het eerst wordt getoond en het oudste artikel het laatst. www.joomlaebook.nl 86

87


Ga gerust eens wat spelen met de volgorde en bewonder het resultaat. Klik nu eerst op “Opslaan” om de wijzigingen in het “Home” menu item vast te leggen, en kijk op de website www.peutroen.nl hoe het eruit ziet (wel even op de home knop klikken, anders zie je de wijziging niet). We hebben nu al heel wat gedaan met artikelen en het weergeven van artikelen op je site. We gaan het nu hebben over wanneer je artikelen wilt laten zien op je website.

4.5 Publiceren en depubliceren van artikelen Als je naar “Artikelen → Artikelbeheer” gaat, dan zie je, zoals je inmiddels weet, een lijst met alle artikelen die aanwezig zijn op je website. Achter deze artikelen staan een aantal kolommen (zie het rood omkaderde gedeelte in onderstaande afbeelding.):

Deze kolommen vertellen het volgende over de artikelen: Gepubliceerd: is het artikel gepubliceerd of niet. Artikelen worden alleen getoond als ze de status “Gepubliceerd” hebben. Voorpagina: Wordt een artikel al dan niet op de voorpagina weergegeven. Volgorde: Wat is de rangschikking van de artikelen Toegangsniveau: Mag iedereen het artikel zien of slechts een beperkt aantal bezoekers Sectie: In welke sectie is het artikel opgeslagen Categorie: in welke categorie is het artikel opgeslagen Auteur: Wie heeft het artikel geschreven Datum: Wanneer is het artikel geschreven Hits: Hoe vaak is het artikel bekeken ID: Het unieke identificatienummer van het artikel


88


We gaan nu eerst eens kijken naar het publiceren en depubliceren van artikelen. Je kunt een artikel publiceren en depubliceren door het artikel te selecteren (een vinkje te zetten voor het artikel) en dan in de menubalk klikken op de knop “Publiceren” of “Depubliceren” (zie afb.):

Je kunt een artikel ook publiceren en depubliceren door op het icoontje in de kolom “Gepubliceerd” te klikken. Achter elk artikel staat zo'n icoontje. Ga nu op de website www.peutroen.nl en klik op het menu item “Dealers”. Je ziet dat alle dealers getoond

worden. Ga nu naar de beheeromgeving en depubliceer het artikel van één van de dealers. Ga dan weer terug naar de website en klik nogmaals op het menu item “Dealers”. Nu wordt de gedepubliceerde dealer niet meer getoond.

We gaan nu nog een leuke toepassing van het publiceren en depubliceren bekijken. In “Artikelen → Artikelbeheer” open je een artikel (het maakt niet uit welke). Aan de rechterkant van het scherm zie je de “Parameters artikel”. Je kunt daar onder andere de volgende twee opties vinden: 

Start publiceren



Stop publicatie

Met deze opties kun je aangeven vanaf welke datum een artikel dient te worden gepubliceerd en tot welke datum het artikel op de website mag worden getoond. Dit kan erg handig zijn bij bijvoorbeeld tijdelijke aanbiedingen. Wanneer een aanbieding geldig is van 1 oktober tot en met 1 november, dan kun je met deze opties er voor zorgen dat deze aanbieding alleen gedurende deze periode wordt getoond op de website. Het is trouwens voor bijna alles wat je op een Joomla website zet mogelijk om aan te geven of iets gepubliceerd of gedepubliceerd moet worden. Ga bijvoorbeeld maar eens naar “Menu's → Main menu” en zie dat hier voor de menu items ook een publiceer en depubliceer mogelijkheid is.


89


Nu weet je heel veel over artikelen op je website. Het is belangrijk dat je veel oefent met deze stof, zodat je steeds beter en sneller uit de voeten kunt met Joomla. We gaan nu nog een stap verder. We gaan nu kijken naar allerlei functionaliteit die Joomla standaard aanbiedt en naar extra functionaliteit die je voor Joomla kunt downloaden van het internet.


90


5. Extra functionaliteit op je website De functionaliteiten van Joomla worden geregeld via Componenten, modules en plugins. Standaard worden er al componenten, modules en plugins meegeleverd met Joomla, daarnaast kun je nog veel extra functionaliteit downloaden van het internet. 5.1 Componenten Componenten zijn programma's die je binnen Joomla uit kunt voeren. Een component wordt geladen op de plek waar normaal gesproken de artikelen van een website worden getoond. Je kunt menu items koppelen aan componenten. Je kunt de componenten vinden in de beheeromgeving onder het menu item “Componenten” (zie afb.):

We gaan nu het component “contacten” activeren. Ga naar “Componenten → Contacten → Categorieën”. Klik vervolgens op “Nieuw” om een nieuwe categorie aan te maken. Geef als titel en als alias het volgende op “Contact algemeen” en klik vervolgens op “Opslaan”. Ga nu naar “Componenten → contacten → contacten” nu wordt het contactpersonenbeheer scherm geopend. Klik op “Nieuw” om een nieuwe contactpersoon aan te maken. Nu verschijnt het volgende scherm (zie afb.):


91


Vul bij “naam” en “alias” het volgende in “Contact”. Selecteer bij “Categorie” de categorie “Contact Algemeen” die je zojuist hebt aangemaakt. Bij “E-mailadres zou je bijvoorbeeld “[email protected]” kunnen invullen. Echter, aangezien peutroen.nl een door ons zelf verzonnen naam is, zal dit niet gaan werken wanneer we straks inderdaad een mailtje gaan versturen. Vul daarom bij “Emailadres” je eigen email adres in (let op, dadelijk proberen we een mailtje te versturen. Als je gebruik maakt van een webserver van een webhosting bedrijf, dan zal dit zeer waarschijnlijk wel gaan lukken. Mocht je zelf een webserver hebben geïnstalleerd, zorg er dan voor dat er ook mail functionaliteit is geïnstalleerd op deze webserver.). De rest van de velden mag je naar eigen inzicht invullen. Aan de rechterkant van het scherm, onder “Contactpersonenparameters” kun je aangeven welke velden je wilt tonen en welke je wilt verbergen.


92


Ga nu naar “Menu's → Main menu”. Klik op “Nieuw” om een nieuw menu item aan te maken. Kies voor “Interne link → Contactpersonen → Contact → Standaard weergave contactpersonen” (zie afb.):


Vul bij “titel” en bij “alias” het volgende in: “Contact”. Bij “selecteer contactpersoon” kun je kiezen naar welke contactpersoon dit menu item moet worden doorgelinked. Aangezien we nu nog maar één contactpersoon hebben, hoeven we nu niet te kiezen. Onder “Parameters (systeem)” vul je bij “paginatitel” in: “Contact” en “Toon paginatitel” zet je op “Ja”. www.joomlaebook.nl 92

93


Klik op “opslaan” en kijk op www.peutroen.nl. Nadat je op de “Home” knop klikt, verschijnt het nieuwe menu item in de menubalk. Als je er op klikt dan verschijnt de contact informatie met een email formulier. Je hebt nu een component geactiveerd en weergegeven in je Joomla site. Zoals je al gezien hebt, zijn er meerdere componenten aanwezig in Joomla. Ook deze componenten kun je activeren voor je website. We gaan nu nog één ander component activeren. Ga naar “Componenten → advertenties → Categorieën”. Klik op “Nieuw” om een nieuwe categorie aan te maken. Vul bij zowel “titel” als “alias” het volgende in: “reclame tijdschriften” en klik daarna op “opslaan”. Ga nu naar “Componenten → Advertenties → Cliënten”. Klik op “Nieuw” om een nieuwe cliënt aan te maken. Nu verschijnt het volgende scherm (zie afb.):

Vul hier de fictieve gegevens in van een fictieve klant. Klik, als je klaar bent, op “opslaan”. We gaan nu eerst een advertentie maken. Open “Paint” of een ander programma waarmee je afbeeldingen kunt maken. Stel de grootte van de afbeelding in op 468px breed en 60px hoog. Maak er een mooie advertentie van (in de bijlage van dit ebook is de banner die bij het maken van dit ebook is gebruikt te vinden, dus die kun je eventueel ook gebruiken).


94


Als je advertentie klaar is, ga dan in de beheeromgeving van de website naar “Website → mediabeheer”. Klik in de mappenstructuur aan de linkerkant van dit scherm op de map “Banners”. Upload vervolgens je advertentie naar je website. De advertentie moet dus in de map “Banners” terecht komen. Ga nu naar “Componenten → Advertenties → Advertenties”. Klik op “Nieuw” om een nieuwe advertentie aan te maken. Het volgende scherm verschijnt (zie afb.):

Vul het scherm als volgt in: Naam: Autoweekblad Alias: autoweekblad Toon advertentie: Ja Sticky: Nee Volgorde: 1 Categorie: reclame tijdschriften Naam cliënt: Auto Weekblad Aangekochte weergaves: 100 (als je ruimte voor advertenties verkoopt aan bedrijven, dan kun je hier aangeven hoe vaak de advertentie getoond zal gaan worden). Klik url: http://www.autoweekblad.nl Kliks: Een teller hoe vaak de advertentie is aangeklikt.


95


Aangepaste advertentiecode: Hier vul je niets in. Je gebruikt dit veld wanneer een klant aangeeft dat de advertentie op zijn eigen website staat. Je kan hier dan HTML code invoeren die verwijst naar deze externe advertentie. Beschrijving/Notities: Leeg laten. Je kunt hier notities maken over deze advertentie voor jouw eigen gebruik. Wat je hier invult wordt niet getoond op je website. Advertentie afbeeldingselectie: Selecteer je advertentie afbeelding Breedte: 468 Hoogte: 60 Tags: Leeg laten. Je kunt hier steekwoorden invullen. Het is binnen Joomla mogelijk dat advertenties alleen getoond worden als de opgegeven steekwoorden (tags) ook voorkomen in het artikel. Sla nu de advertentie op. Als je nu gaat kijken op de website www.peutroen.nl om de advertentie te bewonderen, dan zal het je opvallen dat er geen advertentie getoond wordt. De reden hiervoor is de volgende, de advertentiecomponent is een soort programma dat het tonen van advertenties op je website regelt. Om deze advertentie nu inderdaad op je site weer te geven, heb je een ander Joomla onderdeel nodig, namelijk een module.

5.2 Modules Modules zijn stukjes code die onderdelen van je website zichtbaar kunnen maken op verschillende posities op je website. We hebben posities reeds behandeld in hoofdstuk 3 bij het maken van een template. Ook hebben we het toen al over modules gehad. We gaan nu een module activeren die de advertentie op onze website zal tonen. Ga in de beheeromgeving naar “Extensies → Modulebeheer”. Klik op “Nieuw” en selecteer uit de lijst beschikbare modules de “Banner” module en klik op “volgende”. Nu verschijnt het volgende scherm (zie afb.):


96


Vul dit scherm als volgt in: Onder gegevens: Titel: Autoweekblad Toon titel: Nee Geactiveerd: ja Positie: Banner De overige opties onder gegevens kun je laten staan zoals ze zijn. Onder Menutoewijzing Geef aan dat de advertentie onder alle menu items getoond mag worden. Je kan hier ook aangeven dat de advertentie alleen bij bepaalde menu items getoond mag worden. Onder parameters Doel: Nieuw venster met menubalk. Als je de banner aanklikt, wordt er een volledig nieuw browservenster geopend. Aantal: 1 Advertentie cliënt: Selecteer autoweekblad Categorie: selecteer reclame tijdschriften


97


Zoek op tags: Nee Als je bij het component tags had aangegeven, had je hier ja moeten selecteren. Willekeurig: Sticky, volgorde Koptekst: Niets invullen Voetnoot: Niets invullen Moduleclass achtervoegsel: Niets invullen De instellingen onder “Geavanceerde parameters” laten we ongewijzigd. Klik nu op “Opslaan” en kijk op de website of de banner wordt getoond. Vergeet niet op de “Home” knop te klikken, voordat de banner daadwerkelijk getoond wordt. Oh ja, in het JA Purity template dat we nu gebruiken, vind je de “Banner” positie onderaan. Scroll dus naar beneden om de banner te zien. We gaan nu nog een andere module activeren voor onze website. Ga in de beheeromgeving naar “Extensies → Modulebeheer”. Klik op “Nieuw” selecteer de “Inloggen” module en klik op “volgende”. Het volgende scherm verschijnt: (zie afb.):

Vul het scherm als volgt in: Titel: Inloggen Toon titel: Ja


98


Geactiveerd: Ja Positie: Left Volgorde: 2::wie is er online Laat de overige instellingen voor wat ze zijn en klik op “opslaan”. Nu heb je een inlogmodule geactiveerd op je website. Deze module kan erg handig zijn, omdat deze bezoekers de mogelijkheid geeft zich te registreren op je website, en vervolgens laat inloggen op je website . Zo kun je voor deze geregistreerde bezoekers artikelen beschikbaar stellen die voor niet geregistreerde bezoekers niet beschikbaar zijn. Ook kun je zelf gebruikers aanmaken binnen je site, die je dan kunt laten inloggen via deze login module. Laten we eens een gebruiker aanmaken, en dan een menu item en een hyperlink zo instellen dat deze alleen zichtbaar is voor geregistreerde bezoekers (zoals deze gebruiker). Ga nu eerst in de beheeromgeving van de website naar “Website → gebruikersbeheer”.Klik op “Nieuw” om een nieuwe gebruiker aan te maken. Verzin een naam en een wachtwoord. Maak deze nieuwe gebruiker lid van de groep “Tekstverwerker”. Onder “Parameters” stel je de taal en de tijdzone in voor deze gebruiker, en vervolgens klik je op “opslaan”. Ga nu naar “Artikelen → Artikelbeheer” en maak een nieuw artikel aan. Geef het artikel de titel “Vertrouwelijk”. Het artikel hoeft niet in een sectie of categorie geplaatst te worden. Onder “Parameters (artikel)” selecteer je bij “toegangsniveau” “geregistreerd”. Verzin wat tekst voor in het artikel en sla het artikel op. Ga nu naar “Menu's → Main menu” en klik op “Nieuw” om een nieuw menu item aan te maken. Kies voor “Interne link → Artikelen → Artikel → Weergave artikel”. Geef


99


het menu item als titel en alias “Geheim”. Bij “toegangsniveau” selecteer je “Geregistreerd”. Onder “Parameters (basis) selecteer je het artikel “vertrouwelijk” en daarna klik je op “Opslaan”. Ga nu naar de website www.peutroen.nl je ziet dat het menu item “Geheim” niet wordt getoond (ook niet als je op de “Home” knop klikt). Log nu in via de login module als de gebruiker die je zojuist hebt aangemaakt. Nadat je bent ingelogd, wordt het menu item “Geheim” zichtbaar. Valt het je op dat, nu je bent ingelogd, er bij de titel van het artikel het volgende icoontje staat (zie afb.):

Omdat je de gebruiker in een hogere groep hebt geplaatst dan “geregistreerd” (wij hebben de gebruiker in de groep “tekstverwerker” geplaatst) mag deze gebruiker via de voorkant van de website artikelen wijzigen. Klik maar eens op het icoontje, het artikel zal nu getoond worden in een editor en kan aangepast worden. Deze optie is erg handig, wanneer je meerdere mensen aan je website wilt laten werken, maar ze geen toegang wilt geven tot de beheeromgeving. Nu we een paar modules hebben geactiveerd op de website, wordt het tijd om eens te gaan kijken naar plugins.

5.3 Plugins Plugins zijn kleine programmaatjes die functionaliteit verzorgen binnen je Joomla site. Anders dan bij componenten en modules, verzorgen plugins geen functionaliteit die een bezoeker van je website kan gebruiken. Zie plugins meer als kleine stukjes code die je website beter laten draaien, of je website wat meer mogelijkheden en gebruiksgemak geven.


100


Je kunt de plugins vinden als je naar de beheeromgeving van je site gaat en vervolgens gaat naar “Extensies  Pluginbeheer”. Je ziet nu het volgende scherm (zie afb.):

Je ziet nu de plugins die standaard met Joomla worden meegeleverd. Zoek nu de plugin “Content-Load Module” op en klik erop om de plugin te openen. Het volgende scherm verschijnt (zie afb.):

Zoals je misschien al gemerkt hebt, worden modules altijd geladen binnen bepaalde posities op je website (bijvoorbeeld “Left” of “Banner”. De plugin die we nu geopend hebben, maakt het mogelijk om modules te laden in een artikel. We gaan deze plugin nu eens aan het werk zetten. Zorg er voor dat de plugin geactiveerd is (“Geactiveerd” moet op “Ja” staan) en klik op “Opslaan”. Ga nu naar “Extensies  Module beheer”. Klik op “Nieuw” om een nieuwe module aan te maken. Selecteer op de “Aangepaste HTML” module (we gaan nu zelf een


101


hele simpele eigen module aanmaken) en klik op “Volgende”. Het volgende scherm wordt geopend (zie afb.):

Vul het scherm als volgt in: Titel: Autorai 2011 Toon titel: Nee Geactiveerd: Ja Positie: Je selecteert nu geen positie maar je voegt er één toe. Dit doe je door in het vakje waarin de positie staat het volgende te typen “Evenement”. Menutoewijzing: Kies voor “Selecteer menu-item(s) uit de lijst” en selecteer vervolgens het “Home” menu item. Hiermee zorg je ervoor dat onze module alleen op de homepagina wordt getoond.

Vul in het tekstverwerker scherm het volgende in:

Bezoek onze stand op de Autorai 2011. Standnummer 41 en maak kans op een nieuwe Peutroën B1. www.joomlaebook.nl 101

102


Selecteer vervolgens de tekst, en verander de opmaak van “Paragraph” naar “Heading 1”. Klik nu op “Opslaan” om de module op te slaan. Ga nu naar “Artikelen  Artikelbeheer” en open het artikel “Welkom bij Peutroën” (het artikel dat op de homepagina wordt getoond). Vul nu ergens in de tekst van het artikel de volgende code in: “{loadposition evenement}”. Met deze code geef je aan dat de plugin “Load-module” de modules die op positie “Evenement” staan op deze plek in het artikel moet laden. Sla het artikel op en kijk op de website www.peutroen.nl wat er gebeurt als je op de “Home” knop klikt om de pagina opnieuw te laden. Je ziet onze module verschijnen in het artikel.

We hebben het nu uitgebreid gehad over de extensies die standaard met Joomla worden meegeleverd. Er zijn echter nog veel meer extensies die je extra kunt downloaden. Het leuke hiervan is, sommige extensies leveren een geweldige toevoeging op je website en de meeste extensies zijn gratis. In de volgende paragraaf wordt getoond waar je extensies kunt downloaden.

5.4 Uitbreidingen uit de Joomla Extensions Directory Uitbreidingen voor je Joomla site, de zogenaamde extensies, kun je vinden in de Joomla Extensions Directory (JED). Om naar de Joomla Extensions Directory te gaan, surf je met je webbrowser naar de volgende internet pagina http://extensions.joomla.org . Deze pagina ziet er als volgt uit (zie afb.):


103


Aan de linkerkant van deze pagina zie je de categorieën waarin de extensies zijn ingedeeld. Verder worden er “Random new Extensions” getoond, een willekeurige greep uit nieuwe extensies. Ook is er een gedeelte “New and Noteworthy”, hier worden nieuwe extensies getoond die zeker het vermelden waard zijn. Klik nu aan de linkerkant van de pagina op “All Categories”, zodat je een overzicht krijgt van alle aanwezige categorieën. Klik nu in de categorie “Sports and Games” op “Games”. Zoek nu de extensie “Ciz Biz (tic tac toe) en klik op “Download”. De extensie wordt nu in een ZIP bestand gedownload. Het bestand heet “mod_cizbiz.zip”. Aangezien de naam begint met “Mod” zie je dat het hier een module betreft. Er zijn ook plugins en componenten te downloaden. Vaak staat er bij een extensie al een M, P of C afgebeeld, zodat je weet dat het een module, plugin of component is. Bij sommige extensies staan zowel een M, P of C afgebeeld, dit


104


betekent dat deze extensie is opgebouwd uit zowel een module, plugin en een component. Ga nu in de beheeromgeving van je website naar “Extensies  Installeer / Deinstalleer”. Met de “blader” knop blader je naar het “mod_cizbiz.zip” bestand en vervolgens klik je op “”Upload bestand en installeer”.

Nadat je de melding hebt gekregen dat de installatie geslaagd is, ga je naar “Extensies  Module beheer”. Klik op de “CIZ BIZ Game” module om deze te openen. Vul bij positie in “spel” en zet zorg ervoor dat de module geactiveerd is (“Geactiveerd” op “Ja:”). Bij “Menutoewijzing” selecteer je “Geen”. Sla daarna de module op. Ga nu naar “Artikelen  Artikelbeheer”. Maak een nieuw artikel aan met als titel en alias “Spelletje”. Als tekst typ je het volgende in: “{loadposition spel}”. Sla het artikel op. Ga nu naar “Menu’s  Main menu” en maak een nieuw menu item aan. Kies voor “Interne link  Artikelen  Artikel  Weergave artikel”. Vul bij zowel “Titel” als “Alias” het volgende in: “Spelletje”. Selecteer vervolgens onder “Parameters (basis)” het artikel dat je zojuist hebt gemaakt (het artikel “Spelletje”). Klik vervolgens op “Opslaan”. Keer nu weer terug naar “Extensies  Module beheer” en open de “CIZ BIZ Game” module. In de module geef je nu bij “Menutoewijzing” aan dat de module alleen getoond mag worden onder menu item “Spelletje”. Klik op “Opslaan”. Ga nu terug naar de website www.peutroen.nl en klik op de “Home” knop. Je zult zien dat er een nieuw menu item is bijgekomen. Klik op het menu item “Spelletje” en dan…spelen maar.

Je hebt nu kennis gemaakt met de extensies die meegeleverd zijn met Joomla en je hebt gezien waar je extra extensies kunt downloaden. Het is nu vooral belangrijk om die extensies te zoeken die aansluiten bij hetgeen jij wilt op je website. Vaak betekent dit veel zoeken en proberen. Dus, installeer gerust extensies om ze te proberen. Bevallen ze niet, Joomla heeft ook een De-installeer optie, hiermee heb je www.joomlaebook.nl 104

105


al kennis gemaakt in hoofdstuk 3, toen we een paar keer een template gingen deinstalleren. Hou wel ernstig rekening met het volgende: het installeren van externe extensies kan een mogelijk gevaar voor je website betekenen. Niet alle extensies zijn even veilig geprogrammeerd en dus kwetsbaar voor hack pogingen. Het is altijd goed, voordat je een extensie installeert, even te zoeken op forum.joomla.org wat andere Joomla gebruikers van deze extensie vinden.

Verder kun je op de Joomla site tips vinden hoe je kunt afwegen of een extensie veilig is of niet. Surf hiervoor naar http://docs.joomla.org/How_do_you_choose_secure_extensions%3F

Op dit moment is onze Peutroën site al een hele behoorlijke website geworden. Natuurlijk zijn er nog tal van zaken die toegevoegd kunnen worden, maar voor dit ebook zullen we de website niet meer verder uitbreiden. Met alles wat je nu geleerd bent, moet je overigens goed in staat zijn om zelf op verdere ontdekkingsreis te gaan door Joomla en een prachtige website kunnen maken.


106


6. Website configuratie 6.1 Website instellingen Nu de website voor wat betreft inhoud redelijk op orde is, gaan we eens kijken naar het verder af configureren van de website. Het configureren van je website doe je door op de beheeromgeving van je website te gaan naar “Website  Algemene instellingen”. Het volgende scherm verschijnt (zie afb.):

We zullen nu de instellingen langslopen, waarbij we voornamelijk wat langer stil zullen staan bij instellingen die we nu gaan wijzigen. Als je meer wilt weten over de verschillende instellingen, blijf dan even met je muis over een instelling zweven, er verschijnt dan een uitleg waar de instelling voor is. Website instellingen

Website offline: hier kun je aangeven of je website offline moet zijn of niet. Dit kan handig zijn, wanneer je bijvoorbeeld nog aan je site werkt maar Joomla al wel hebt geïnstalleerd. Als de site off line is, krijgt de gebruiker de tekst te zien de je invult in Offline bericht. Offline bericht: Hier kun je bijvoorbeeld invullen wanneer de site weer online zal zijn Website naam: Vul hier de naam van je website in, in ons geval is dat Peutroën.


107


Standaard WYSIWYG tekstverwerker: Hier kun je aangeven welke editor gebruikt moet worden voor het maken van artikelen. Lijstlengte: Geef aan hoeveel items op één pagina getoond moeten worden in bijvoorbeeld “Artikelbeheer”. Feedlengte: Joomla biedt standaard RSS ondersteuning, hier kun je instellen hoe lang een feed mag zijn. RSS en feeds worden niet behandeld in dit ebook. Feed e-mail: hier kun je aangeven welk email adres in feeds getoond wordt

Metadata instellingen Algemene website Meta beschrijving: Hier kun je een omschrijving van je website neerzetten. Deze wordt bij de metagegevens van je website getoond. Zoekmachines gebruiken deze informatie om je site te indexeren en te ranken. Vul hier het volgende in: “Peutroën, het dynamische automerk”.

Algemene website Meta trefwoorden: Hier kun je de trefwoorden voor je site opgeven. Deze worden bij de metagegevens van je site getoond. Zoekmachines gebruiken deze gegevens om te indexeren. Vul het volgende in:

Peutroën, auto, A1, B1, C1, sportauto, cabrio

Toon titel metatag: Ja Toon auteur metatag: Ja

De metagegevens kun je terugvinden door ergens op je website met de rechtermuisknop te klikken en dan op “Bron weergeven” te klikken. Je krijgt nu de HTML code van je website te zien. De metagegevens bevinden zich in de “Head” sectie.

SEO Instellingen (SEO staat voor search engine optimalisation) Zoekmachinevriendelijke URLs: Stel deze in op “Ja” Standaard maakt Joomla adressen voor zijn pagina’s die er als volgt uitzien:


108


http://www.peutroen.nl/index.php?option=com_content&view=article&id=2&Itemid=2

Een dergelijk adres is voor een zoekmachine lastig om te begrijpen. Een zoekmachine vriendelijke URL ziet er bijvoorbeeld zo uit:

http://www.peutroen.nl/index.php/nieuwsitems.html

Gebruik Apache mod_rewrite: Nee (tenzij je begrijpt dat htaccess.txt hernoemd dient te worden naar .htaccess) Voeg een achtervoegsel (suffix) aan URLs toe: Ja Je hebt nu alle website instellingen ingesteld. Klik op “Toepassen” om de wijzigingen op te slaan.

Klik nu op “Systeem” (zie afb.) om de systeem configuratie in te stellen.

6.2 Systeeminstellingen We lopen nu door de systeeminstellingen heen.

Systeeminstellingen Geheim woord: Wordt gegenereerd bij Joomla installatie en gebruikt wordt voor beveiligingsfuncties. Wijzig hier niets aan. Pad naar logmap: Laat ongewijzigd Webservices inschakelen: Nee


109


Helpserver: Dit is de locatie waar de help informatie vandaan wordt gehaald. Kies de server die je voorkeur heeft.

Gebruikersinstellingen Hier kun je verschillende instellingen voor gebruikers instellen. Voor onze website laten we alle instellingen ongewijzigd.

Media instellingen Onder deze groep kun je allerlei zaken instellen voor de verschillende media die je wilt gebruiker op je site (afbeeldingen, videofragmenten etc.) Wij gaan nu niets wijzigen aan deze instellingen. Ook onder “Foutopsporingsinstellingen”, “Cache instellingen” en “Sessie instellingen” wijzigen we niets.

We gaan nu naar de server instellingen.

6.3 Server instellingen Onder “Server instellingen” zie je veel dingen terug komen die je hebt ingesteld tijdens de installatie van Joomla aan het begin van dit ebook. Je zou hier dus eventuele zaken waarvan je na installatie gewenst had dat je ze anders had ingesteld, hier wijzigen. We gaan nu niets wijzigen aan dit gedeelte van de instellingen en dat betekent dat we klaar zijn met de configuratie van onze website.

We gaan nu verder met een minder plezierig onderwerp, beveiliging. Een website op het internet is natuurlijk prachtig, echter je stelt je website dan dus aan de hele wereld bloot. Dit betekent dat ook mensen met kwade bedoelingen je site kunnen bekijken en er op zullen proberen in te breken.

7. Het beveiligen van je website Een website is nooit 100% inbraak vrij te maken. Telkens worden er nieuwe inbraakmethodes, veiligheidslekken en kwetsbaarheden uitgevonden. De maatregelen die in dit hoofdstuk worden genoemd zijn voldoende voor het goed


110


beveiligen van je website, al geeft dat nog geen enkele garantie dat er nooit op je site ingebroken wordt.

Waar je wel 100% zeker van kunt zijn, is dat wanneer je geen veiligheidsmaatregelen neemt, je website vroeger of later gekraakt zal gaan worden.

7.1 Het administrator account Het administrator account krijgt standaard de gebruikersnaam “admin” mee. De meeste hackers weten dit. Wanneer een hacker probeert in te breken op een Joomla site, dan hoeft hij in de meeste gevallen dus alleen het wachtwoord van het administrator account te raden.

Wanneer je het admin account een andere naam geeft, maak je het voor een hacker een stukje moeilijker om je site te hacken. Behalve het wachtwoord moet hij nu immers ook de gebruikersnaam zien te raden. Belangrijk hierbij is om een gebruikersnaam te kiezen die niet voor de hand ligt. Als je site bijvoorbeeld www.lampekap.nl is, dan ligt de gebruikersnaam lampekap erg voor de hand. Kies dus

een niet voor de hand liggende gebruikersnaam, het liefst één met een combinatie van bijzondere tekens (zoals !, @, $ etc) ,cijfers en letters. De gebruikersnaam van het administrator account is eenvoudig te wijzigen. Op de beheeromgeving ga je naar “Website  Gebruikersbeheer” Klik vervolgens op de gebruiker “administrator”. In het scherm wat nu verschijnt (zie afb. hieronder) vervang je bij “gebruikersnaam” admin voor een andere gebruikersnaam. Vervolgens klik je op “opslaan”. Nu is de gebruikersnaam gewijzigd.


111


7.2 Een sterk wachtwoord Het wachtwoord is vaak een zwak punt in de beveiliging van websites. Veel mensen kiezen een erg voor de hand liggend wachtwoord (bijvoorbeeld de naam van hun site, of straatnaam) of men kiest een eenvoudig te raden wachtwoord. Veel hackers beschikken over programmaatjes die wachtwoorden kunnen raden. Wanneer een wachtwoord eenvoudig is, dan zal zo’n programmaatje het wachtwoord snel kunnen raden.

Daarom is het verstandig een sterk wachtwoord te kiezen. Een sterk wachtwoord is een wachtwoord dat bestaat uit een combinatie van bijzondere tekens (zoals !, @, $ etc) ,cijfers en letters. Het wachtwoord is het sterkst als het daarnaast ook een willekeurige volgorde van tekens is. Zo is bijvoorbeeld het wachtwoord H@llo (afgeleid van hallo) gemakkelijker te raden dan @lHo (afgeleid van hallo en in willekeurige volgorde). Ook is het belangrijk dat het wachtwoord niet te kort is. Minimaal 8 tekens is aan te raden. Als je het lastig vind om een wachtwoord te verzinnen, google dan eens op “strong password”. Je zult dan veel sites vinden met een tooltje dat een wachtwoord voor je verzint. Erg handig.


112


7.3 Rechten op mappen Zoals je hebt kunnen zien tijdens het installeren van Joomla (zie hoofdstuk 1), bestaat Joomla uit een aantal mappen en bestanden die je naar de webserver van je webhoster kopieert. Op deze mappen zijn rechten in te stellen. Rechten wil zeggen dat je de mate van toegang bepaalt tot een map of een bestand. Je kunt bijvoorbeeld aangeven dat een map of bestand “alleen lezen” is. Dit betekent dat een bezoeker van je website deze map of dit bestand mag zien maar niet mag bewerken of verwijderen. Ook kun je “volledige toegang” rechten geven voor een map of bestand. Het spreekt natuurlijk vanzelf dat dit absoluut niet is aan te raden, met “volledig toegang” kan een bezoeker of hacker namelijk alles met deze map of dit bestand.

Een standaard regel voor Joomla is dat bestanden maximaal 644 rechten mogen hebben en mappen maximaal 755. Deze getallen komen uit de Linux wereld. De getallen die aangeven hoeveel rechten iemand heeft op een map of een bestand, bestaan altijd uit 3 getallen. Deze 3 getallen stellen gebruikersgroepen voor. Het eerste getal geeft de rechten weer van de eigenaar, het tweede getal geeft de rechten weer van alle leden van een gebruikersgroep waarin ook de eigenaar zit, het derde getal geeft de rechten weer van de buitenwereld.

De getallen betekenen verder het volgende: Lezen (4) Schrijven (2) Uitvoeren (1).

Stel, jij als eigenaar van een bestand mag dit bestand lezen, schrijven en uitvoeren. Dit betekent dat jij lezen = 4 + schrijven = 2 + uitvoeren = 1 in totaal het recht 7 hebt.

De leden van de groep waar je deel van uitmaakt, mogen alleen lezen = 4 en uitvoeren = 1. De groep heeft dus het recht 5.

De buitenwereld, dus iedereen die je website bezoekt, heeft recht lezen = 4.

Je stelt dan dus op dit bestand de rechten in als 754.


113


Voor Joomla geldt dus dat mappen maximaal op 755 mogen staan. Dat betekent dat jij als eigenaar mag lezen = 4 + schrijven = 2 + Uitvoeren = 1. Vandaar dat het eerste getal 7 is. De groep en de buitenwereld mogen lezen = 4 + uitvoeren = 1. Dus het tweede en derde getal is 5.

Bestanden worden ingesteld op maximaal 644. Kun je nu zelf bepalen wat dit betekent?

Het instellen van rechten op bestanden en mappen kun je dien door in te loggen op het control panel dat je van je webhosting bedrijf hebt gekregen. In dit control panel ga je naar “Bestandsbeheer” om de mappen en bestanden van Joomla te zien te krijgen. Binnen het bestandsbeheer scherm is het mogelijk om de rechten in te stellen voor mappen en bestanden. Omdat de control panels per webhosting bedrijf er anders uit kan zien, gaan we hier verder geen uitgebreide beschrijving geven. Je kunt eventueel je webhosting bedrijf vragen om hulp bij het instellen van rechten op mappen en bestanden.

Als je in staat bent je eigen webserver te installeren, dan kun je ongetwijfeld ook zelf de rechten instellen op je webserver.

7.4 Het adres van de administrator pagina Wat ook kan bijdragen aan de veiligheid van je website, is het veranderen van het adres van de beheeromgeving. Bij een standaard Joomla installatie vind je de beheeromgeving altijd op www.jouwsite.nl/administrator . In ons geval staat de beheeromgeving dus op www.peutroen.nl/administrator . Als een hacker vermoedt dat hij met een Joomla site te maken heeft, dan is het eerste dat hij zal gaan doen naar de beheeromgeving van de site gaan. Als hij daar is aangekomen, dan hoeft hij alleen nog maar de juiste inloggegevens zien te bemachtigen en hij is binnen.

Om het een hacker lastiger te maken, gaan we het adres van de beheeromgeving veranderen. Hiervoor gaan we een plugin downloaden. Zoek op


114


extensions.joomla.org naar de “Jsecure” plugin. Download de plugin met de naam “Jsecure Authentication”. Installeer de plugin vervolgens. Nadat je de plugin hebt geïnstalleerd , ga dan naar “Extensions  Pluginbeheer”. Zoek naar de plugin “System - jSecure Authentication” en klik erop om deze te openen. Selecteer bij “Geactiveerd” “Ja”. Bij parameters, kun je bij “Key” aangeven wat er achter het adres www.jouwsite.nl/administrator gezet dient te worden om naar de beheeromgeving te

gaan. Vul hier in “geheim”. Bij “redirect options” selecteer je “redirect to index page”. Wanneer een bezoeker nu naar www.jouwsite/administrator surft, dan komt hij uit bij de voorpagina bij je site en dus niet meer bij de beheeromgeving. Klik op “Opslaan”. Log nu uit van de beheeromgeving. Ga vervolgens naar www.peutroen.nl/administrator kun je inloggen?

Ga nu naar www.peutroen.nl/administrator/?geheim kun je nu inloggen?

7.5 De Joomla security checklist Met bovenstaande stappen heb je je website al een heel stuk beveiligd. Joomla heeft verder een security checklist beschikbaar gesteld. Aan de hand van deze checklist kun je controleren hoe veilig je website is en welke verdere beveiligingsmaatregelen je eventueel nog kunt nemen. De security checklist is te vinden op http://docs.joomla.org/Category:Security_Checklist .

Naast bovenstaande maatregelen is het natuurlijk ook van essentieel belang op regelmatig te controleren op de Joomla site of er een nieuwe versie beschikbaar is. Als er inderdaad een nieuwe versie beschikbaar is, probeer dan zo snel mogelijk je website te updaten.


115


Tot slot We zijn nu aan het einde gekomen van dit ebook. Je hebt nu vanaf “scratch” een complete Joomla website gebouwd en geconfigureerd. Waarschijnlijk zal dit niet je laatste website zijn. Hopelijk heb je dit ebook leuk en leerzaam gevonden. Wanneer je opmerkingen hebt over dit ebook, of wanneer je je eigen gemaakte Joomla website wilt laten zien, stuur dan een email naar [email protected]

5 gratis templates Omdat alle begin moeilijk is, kan ik me voorstellen dat het maken van je eigen Joomla ontwerp, je eigen template, best lastig is. Daarom bied ik je gratis 5 kant en klare templates aan die je kunt gebruiken voor je website.

Het enige wat je hoeft te doen om deze templates te kunnen downloaden, is een mail te sturen naar [email protected] met daarin je mening over dit ebook. Jouw mening kan ik dan publiceren op mijn website.

Dus, 5 gratis templates als je je mening over mijn ebook stuurt naar [email protected]

Hartelijke groet, M. Aardema


116


Bijlagen Hoofdstuk 2 Webserver software Een veel gebruikte webserver is WAMP. Wamp staat voor Windows, Apache, Mysql en PHP. Het complete pakket dus dat je nodig hebt voor Joomla. WAMP server is te downloaden op: http://www.wampserver.com/en/download.php

Hoofstuk 3 Peutroën template Het Peutroën template is te downloaden op www.joomlaebook.nl/resources/peutroen.zip

Hoofdstuk 5 Autoweekblad banner De banner is te downloaden op www.joomlaebook.nl/resources/banner.jpg


De auteur van dit ebook kan op geen enkele manier verantwoordelijk gehouden worden voor eventuele onjuistheden in dit ebook

Recommend Documents