JOOMLA 3.x
Content Management System (CMS) Online webdesign m.b.v. Joomla
Carl Maegerman www.lesgever.be
Cursus Joomla
PCVO Meetjesland
INHOUDSOPGAVE 1
WAT IS JOOMLA? ........................................................................................................................................... 5 1.1 1.2
WAT IS EEN CMS ............................................................................................................................................. 5 WAAROM JOOMLA GEBRUIKEN ........................................................................................................................ 5
2
WEBSITE PUBLICEREN MET EEN HTML EDITOR (DREAMWEAVER) .................................................................... 7
3
WEBSITE PUBLICEREN MET EEN CMS (JOOMLA) ................................................................................................ 8
4
DOMEINNAAM + WEBHOSTING HUREN VOOR 1 JAAR BIJ ONE.COM ............................................................... 8
5
FTP CLIENT FILEZILLA DOWNLOADEN EN INSTALLEREN ................................................................................... 11
6
JOOMLA INSTALLATIE ........................................................................................................................................ 12 6.1 JOOMLA DOWNLOADEN EN UITPAKKEN OP JE PC ............................................................................................ 12 6.2 JOOMLA INSTALLATIEBESTANDEN OP JE WEBRUIMTE ZETTEN ........................................................................ 12 6.2.1 In je hoofddomein - dit doe je normaal, als je nog geen website hebt (bvb. www.webke.be) ............. 12 6.2.2 In een subdomein van je hoofddomein - dit doe je als je reeds een website hebt en je wilt eens experimenteren met Joomla. De Joomla site staat dan gewoon in een subdomein (bvb. www.webke.be/JOOMLA) .................................................................................................................................. 12
7
JOOMLA OP JE WEBRUIMTE INSTALLEREN ....................................................................................................... 13 7.1 7.2 7.3 7.4
8
CONFIGURATIE ............................................................................................................................................... 13 DATABASE...................................................................................................................................................... 14 SAMENVATTING ............................................................................................................................................. 15 VERWIJDEREN INSTALLATIEMAP .................................................................................................................... 16
DE JOOMLA WEBSITE BEKIJKEN EN BEHEREN (FRONT-END EN BACK-END) ........................ 17 8.1 8.2
FRONT-END – EERSTE TABBLAD ..................................................................................................................... 17 BACK-END – TWEEDE TABBLAD...................................................................................................................... 17
9
JOOMLA INTERFACE OP NEDERLANDS INSTELLEN............................................................................................ 18
10
HOE ZIET EEN JOOMLA WEBPAGINA ERUIT ...................................................................................................... 19
11
MODULEPOSITIES WEERGEVEN ALS VOORBEELD ......................................................................... 20 11.1 11.2
12
WELKE STAPPEN MOET JE DOEN OM DIT TE KUNNEN TONEN ...................................................................... 20 OVERZICHT MODULE POSITIES VAN HET TEMPLATE BEEZ3 ........................................................................ 20
ENKELE AAN TE RADEN EXTENSIES ..................................................................................................... 21 12.1 JCE EDITOR INSTALLEREN ALS STANDAARD TEKSTVERWERKER ............................................................... 21 12.1.1 JCE downloaden.............................................................................................................................. 21 12.1.2 JCE installeren ................................................................................................................................ 21 12.1.3 Downloaden JCE Nederlands taalbestand ...................................................................................... 21 12.1.4 Installeren JCE Nederlands taalbestand ......................................................................................... 21 12.1.5 JCE activeren als standaard tekstverwerker ................................................................................... 21 12.2 GANTRY FRAMEWORK INSTALLEREN ......................................................................................................... 22 12.2.1 Gantry bundle downloaden ............................................................................................................. 22 12.2.2 Gantry bundle installeren ................................................................................................................ 22 12.2.3 Gantry Template instellen als standaard template .......................................................................... 22 12.2.4 Overzicht module posities van het template Gantry - Voorbeeld .................................................... 23 12.2.5 Overzicht module posities van het template Gantry - schematisch ................................................. 24
13
BACKUP MAKEN VIA DE JOOMLA EXTENSIE AKEEBA BACKUP ................................................. 25
14
AKEEBA KICKSTART .................................................................................................................................. 26
© Carl Maegerman
2/70
Cursus Joomla
15
STAPPENPLAN AKEEBA BACKUP MAKEN EN TERUGZETTEN...................................................... 27 15.1 15.2 15.3
16
PCVO Meetjesland
HET MAKEN VAN DE BACKUP ..................................................................................................................... 27 EXTRA STAPPEN OM DE BACKUP VEILIG TE STELLEN ................................................................................. 27 TERUG ZETTEN BACKUP ............................................................................................................................. 27
DE STAPPEN OM EEN JOOMLA WEBSITE TE MAKEN ...................................................................... 28 16.1 16.2 16.3 16.4 16.5 16.6
TEMPLATE ................................................................................................................................................. 28 SCHEMA TEKENEN ..................................................................................................................................... 28 CATEGORIEËN............................................................................................................................................ 28 ARTIKELS .................................................................................................................................................. 28 NAVIGATIEMENU ....................................................................................................................................... 28 EXTRAATJES .............................................................................................................................................. 28
17
CONCLUSIE JOOMLA VS DREAMWEAVER .......................................................................................... 29
18
KLASSIKAAL VOORBEELD WEBSITE “PCVO MEETJESLAND” ............................................................................. 30 18.1 ONTWERP .................................................................................................................................................. 30 18.2 DE CATEGORIE “OPLEIDINGEN” MAKEN .................................................................................................... 31 18.3 HET ARTIKEL “INFORMATICA” MAKEN EN IN DE CATEGORIE “OPLEIDINGEN” STEKEN.............................. 31 18.4 HET NAVIGATIEMENU MAKEN ................................................................................................................... 31 18.4.1 Een Menuitem maken die geen Sub-menuitems bevat met link naar een Artikel (Welkom) ............ 31 18.4.2 Een Menuitem maken die Sub-menuitems bevat die geen link bevat (Opleidingen)........................ 32 18.4.3 Een Sub-menuitem maken met link naar een Artikel (Informatica) ................................................. 32 18.4.4 Een Menu item maken met link naar een Categorieblog (Nieuwtjes).............................................. 32 18.5 VOLGORDE ARTIKELEN IN ARTIKEL BLOG .................................................................................................. 33 18.6 ONGEWENSTE VERMELDINGEN BIJ ARTIKELS VERBERGEN ........................................................................ 33 18.7 DE MODULE BREADCRUMBS ACTIVEREN ................................................................................................... 34 18.8 STARTPAGINA INSTELLEN .......................................................................................................................... 34 18.9 KIEZEN OF VERWIJDEREN VAN HET LOGO IN DE TOP BANNER ................................................................... 34 18.10 EEN BANNER PLAATSEN BOVENAAN DE PAGINA ........................................................................................ 35 18.11 UITTESTEN ................................................................................................................................................. 35 18.12 BACKUP MAKEN ........................................................................................................................................ 35 18.13 BACKUP UITTESTEN ................................................................................................................................... 35
19
ALGEMENE WEBSITE INSTELLINGEN ................................................................................................................. 36 19.1 WEBSITE .................................................................................................................................................... 36 19.1.1 Website-instellingen ........................................................................................................................ 36 19.1.2 Metadata-instellingen ..................................................................................................................... 37 19.1.3 SEO-instellingen ............................................................................................................................... 38
20
MEER OVER ARTIKELS ........................................................................................................................................ 40 20.1 AFBEELDINGEN .......................................................................................................................................... 40 20.2 HYPERLINKS .............................................................................................................................................. 40 20.3 LEES MEER … ............................................................................................................................................ 41 20.4 LEES MEER … + INTRO TEKST .................................................................................................................... 41 20.4.1 Voor één artikel ............................................................................................................................... 41 20.4.2 Voor alle artikelen gekoppeld aan het menu item Nieuwtjes.......................................................... 42 20.4.3 Voor alle artikelen ........................................................................................................................... 42
21
GROTE HERHALINGSOEFENING ......................................................................................................................... 43 21.1 21.2 21.3 21.4 21.5
MYSQL DATABASE VOLLEDIG LEEGMAKEN .............................................................................................. 43 WEBRUIMTE VOLLEDIG LEEGMAKEN ......................................................................................................... 43 JOOMLA INSTALLEREN EN OP NEDERLANDS INSTELLEN............................................................................. 43 JCE EDITOR INSTALLEREN ......................................................................................................................... 44 GANTRY BUNDLE INSTALLEREN................................................................................................................. 44
© Carl Maegerman
3/70
Cursus Joomla
21.6 21.7 21.8 21.9 21.10 21.11 21.12
PCVO Meetjesland
AKEEBA BACKUP INSTALLEREN .............................................................................................................. 44 AKEEBA KICKSTART INSTALLEREN ......................................................................................................... 44 AKEEBA BACKUP UITVOEREN ................................................................................................................. 44 BACKUP BESTAND KOPIËREN NAAR JE LOKALE PC .................................................................................... 44 BACKUP TERUGZETTEN MET AKEEBA KICKSTART .................................................................................. 44 MAKEN VAN DE WEBSITE PCVO MEETJESLAND ....................................................................................... 45 OVERZICHT MODULE POSITIES VAN HET TEMPLATE GANTRY .................................................................... 46
22
AANGEPASTE HTML MODULE OP BEPAALDE POSITIE PLAATSEN ............................................ 47
23
ARTIKELEN - NIEUWSFLITS MODULE IN DE SIDEBAR PLAATSEN .............................................. 47
24
FOTOALBUM OF FOTOGALERIJ MET ONE.COM ............................................................................... 48 24.1 24.2
25
EEN FOTOALBUM EMBEDDEN ..................................................................................................................... 48 EEN FOTOGALERIJ EMBEDDEN ................................................................................................................... 49
GEBRUIKERSBEHEER ................................................................................................................................. 51 25.1 MENUITEM ENKEL ZICHTBAAR MAKEN VOOR EEN BEPAALDE GEBRUIKERSGROEP ..................................... 53 25.2 TOEGANGSNIVEAU WIJZIGEN ..................................................................................................................... 53 25.2.1 Toegangsniveau wijzigen voor Front-end gebruikers ..................................................................... 53 25.2.2 Toegangsniveau wijzigen voor Back-end gebruikers ...................................................................... 54
26
NUTTIGE GRATIS EXTENSIES .................................................................................................................. 55 26.1 FOTO SLIDER – DJ-IMAGESLIDER .............................................................................................................. 55 26.2 CONTACTFORMULIER - RAPID CONTACT ................................................................................................... 56 26.3 MAP - GOOGLE MAP................................................................................................................................... 58 26.4 AGENDA - GCALENDER ............................................................................................................................. 60 26.4.1 Modules publiceren ......................................................................................................................... 61 26.4.2 Menu item maken............................................................................................................................. 61 26.5 GASTENBOEK - VITABOOK ........................................................................................................................ 62 26.6 LINK MET FACEBOOK – SP FACEBOOK....................................................................................................... 63
27
EEN ANDER TEMPLATE GEBRUIKEN VOOR JE WEBSITE .............................................................. 64
28
MEERTALIGE SITE ...................................................................................................................................... 65 28.1 INSTALLEREN VAN DE TAALBESTANDEN .................................................................................................... 65 28.2 MENUS MAKEN .......................................................................................................................................... 66 28.2.1 Nederlands menu ............................................................................................................................. 66 28.2.2 Maken van het Engels menu ............................................................................................................ 66 28.3 ARTIKELS MAKEN IN DE JUISTE TAAL......................................................................................................... 67 28.3.1 Nederlands artikel ........................................................................................................................... 67 28.3.2 Engels artikel ................................................................................................................................... 67 28.4 MENU ITEMS TOEVOEGEN AAN DE MENU’S ................................................................................................ 67 28.4.1 Nederlandse menu items .................................................................................................................. 67 28.4.2 Engelse menu items ......................................................................................................................... 67 28.5 MODULES .................................................................................................................................................. 68 28.6 TAAL FILTER .............................................................................................................................................. 68 28.7 TAAL SELECTIE .......................................................................................................................................... 68 28.8 GANTRY TEMPLATES MANAGER CORRECT INSTELLEN ............................................................................... 69 28.8.1 Nederlands menu ............................................................................................................................. 69 28.8.2 Engels menu .................................................................................................................................... 69 28.9 BREADCRUMBS AANPASSEN ...................................................................................................................... 69
29
BESLUIT ........................................................................................................................................................... 70
© Carl Maegerman
4/70
Cursus Joomla
PCVO Meetjesland
1 Wat is Joomla? Joomla is een open-source, content managenment system, afgekort CMS. (een ander voorbeeld van een CMS is Drupal). Joomla komt van het Swahili “Allemaal samen”. Het is een internationaal software project ontwikkeld en ondersteund door duizenden mensen over de hele wereld.
1.1 Wat is een CMS Alle content (= inhoud) die op je webpagina’s komt te staan, wordt opgeslagen in de tabellen van een database. Dus deze content staat niet op HTML pagina’s, die we maken in een HTML editor (bvb. Dreamweaver). Er wordt een template (= sjabloon) gemaakt voor je website en iedere keer dat iemand klikt op een link in jouw site, wordt de content die bewaard wordt in de database, naar het template gestuurd en wordt de HTML pagina gecreëerd die op haar beurt getoond wordt in je browser.
Webhosting Server Joomla FRAMEWORK - INHOUD Joomla
Joomla TEMPLATE - OPMAAK
My SQL database
HTML pagina
Local PC Browser – IE, Firefox, Chrome, Opera, Safari, …
1.2 Waarom Joomla gebruiken • •
Een website kan men “sneller” maken dan bij een HTML editor De klant kan “zelf” updates doorvoeren in de content van zijn webpagina’s
© Carl Maegerman
5/70
Cursus Joomla
• • •
PCVO Meetjesland
Men kan “snel” bepaalde functionaliteit toevoegen aan zijn site d.m.v. Extensions, zonder dat men daarvoor een webdeveloper moet inschakelen “Bijna” elke site die men in HTML gebouwd heeft, kan men bouwen in Joomla Zéér “populair” CMS, met ondersteuning van vele duizenden personen
© Carl Maegerman
6/70
Cursus Joomla
PCVO Meetjesland
2 Website publiceren met een HTML editor (Dreamweaver) ROOT map lokaal De ROOT map kan je dezelfde naam van je site geven. Bijvoorbeeld: Lesgever
ROOT map webhoster Domeinnaam: www.lesgever.be Domeinnaam gekoppeld met Webruimte
ROOT
Thuis op de PC Lokale bestanden
Webruimte is beveiligd met een FTP login
ROOT
Server webhoster Externe site
images
images
foto1.jpg
foto1.jpg
foto1.jpg
foto1.jpg
CSS
CSS
opmaak1.css
opmaak1.css
opmaak2.css
opmaak2.css
templates
templates
sjabloon1.dwt
sjabloon1.dwt
sjabloon2.dwt
sjabloon2.dwt
index.html
index.html
cursusmateriaal.html
cursusmateriaal.html
toffeHyperlinks.html
toffeHyperlinks.html
Startpaginanaam is standaard index.html LET OP: bestandsnaam in kleine letters
UPLOADEN = PUBLICEREN Kopiëren van lokale bestanden naar de webruimte die je kreeg bij de webhoster. © Carl Maegerman
7/70
Cursus Joomla
PCVO Meetjesland
3 Website publiceren met een CMS (Joomla) 4
Local PC
Je hebt enkel een PC nodig met een besturingssysteem en een browser. In deze browser kan je dan je website beheren en bekijken.
Browser
ROOT map webhoster Domeinnaam: www.lesgever.be Domeinnaam gekoppeld met Webruimte
ROOT
Beheren (d.m.v. login) www.lesgever.be/administrator Bekijken (iedereen op het internet) www.lesgever.be
© Carl Maegerman
8/70
Cursus Joomla
PCVO Meetjesland
Domeinnaam + webhosting huren voor 1 jaar bij One.com •
Surf naar http://www.one.com/nl/ en typ hierin de gewenste domeinnaam
• •
Klik dan op het pijltje naast het zoekveld Is je gewenste domeinnaam nog vrij, zoals bvb hieronder, kies dan het goedkoopste pakket en vul de gegevens correct in.
•
Hierna bevestig je met volgende
© Carl Maegerman
9/70
Cursus Joomla
PCVO Meetjesland
• Je kiest nu de manier van betalen, mogelijkheden zijn creditkaart of overschrijving
• • • •
•
Vergeet daarna ook niet het selectievakje van de voorwaarden aan te vinken Nu nog eens op de knop Kopen klikken Je zal nu nog een mail ontvangen waarin gevraagd wordt om te betalen (als je via een overschrijving wou betalen) Nadat de betaling is ontvangen zal de webhoster One jouw domeinnaam en webruimte in orde brengen en alle accountgegevens via mail doorsturen, die je nodig hebt om bestanden te plaatsen op jouw webruimte die gekoppeld is aan jouw domeinnaam Als je nu naar je domeinnaam surft zal je de standaard pagina van One.com zien
© Carl Maegerman
10/70
Cursus Joomla
PCVO Meetjesland
5 FTP client FileZilla downloaden en installeren • • • •
Download FileZilla op deze website http://filezilla-project.org/ Installeer dit programma op je PC Start het programma op en ga naar het menu Bestand – Sitebeheer Klik op de knop Nieuwe site
•
Vul nu een verwijzingsnaam in voor je site en vul de juiste inloggegevens in
•
Klik nu op Verbinden en je ziet een nieuw venster met links de bestanden op jouw PC en rechts de bestanden op je webruimte
LET OP!!! • Bewerken – Instellingen • Overdrachten – Bestandstypes • Zet dit op Binair
© Carl Maegerman
11/70
Cursus Joomla
PCVO Meetjesland
6 Joomla installatie 6.1 Joomla downloaden en uitpakken op je PC • • •
Download Joomla Full Package (.zip bestand) op http://www.joomla.org/download.html Pak de bestanden uit in een map op je PC Deze map heeft als naam iets in de aard van “Joomla_3.x.x-Stable-Full_Package” Het .zip bestand kan je nadien verwijderen
6.2 Joomla installatiebestanden op je webruimte zetten 6.2.1 In je hoofddomein - dit doe je normaal, als je nog geen website hebt (bvb. www.webke.be) Je krijgt dan je Joomla website te zien als je surft naar je hoofddomein (bvb. www.webke.be) • •
• •
Kopieer de inhoud van de map “Joomla_3.x.x-Stable-Full_Package” met FileZilla naar de root directory van je domein Maak, indien nodig, op je webhoster een MySQL database aan (bij one.com is er standaard maar één voorzien en die heeft al een naam waarin je jouw domeinnaam herkent, bvb. bij het domein webke.be is dat dan webke_be) Surf via je browser naar je domein (bvb. www.webke.be) Er opent automatisch een installatiewizard waar je alle gegevens invult.
6.2.2 In een subdomein van je hoofddomein - dit doe je als je reeds een website hebt en je wilt eens experimenteren met Joomla. De Joomla site staat dan gewoon in een subdomein (bvb. www.webke.be/JOOMLA) Je krijgt dan je Joomla website te zien als je surft naar je subdomein (bvb. www.webke.be/JOOMLA) • • •
• •
Maak met FileZilla in de root directory van je domein een submap aan met als naam JOOMLA Kopieer de inhoud van de map “Joomla_3.x.x-Stable-Full_Package” met FileZilla naar de submap JOOMLA in de root directory van je domein Maak, indien nodige, op je webhoster een MySQL database aan (bij one.com is er standaard maar één voorzien en die heeft al een naam waarin je jouw domeinnaam herkent, bvb. bij het domein webke.be is dat dan webke_be) Surf via je browser naar je subdomein (bvb. www.webke.be/JOOMLA) Er opent automatisch een installatiewizard waar je alle gegevens invult.
© Carl Maegerman
12/70
Cursus Joomla
PCVO Meetjesland
7 Joomla op je webruimte installeren Surf via de browser naar je domein (bvb. www.webke.be ) of naar je subdomein (bvb. www.webke.be/JOOMLA ), afhankelijk van waar je je Joomla installatiebestanden gezet hebt. Er opent automatisch een installatiewizard waar je alle gegevens invult.
7.1 Configuratie
© Carl Maegerman
13/70
Cursus Joomla
PCVO Meetjesland
7.2 Database
© Carl Maegerman
14/70
Cursus Joomla
PCVO Meetjesland
7.3 Samenvatting
© Carl Maegerman
15/70
Cursus Joomla
PCVO Meetjesland
7.4 Verwijderen installatiemap
Na het verwijderen van de installatiemap kan je de Joomla website gaan bekijken en beheren. Dit wordt besproken in het volgende hoofdstuk.
© Carl Maegerman
16/70
Cursus Joomla
PCVO Meetjesland
8 De Joomla website bekijken en beheren (Front-end en Back-end) Je opent je browser en opent best twee tabbladen. • •
Op het eerste tabblad surf je naar het Front-end (de Joomla website bekijken) Op het tweede tabblad surf je naar het Back-end (de Joomla website beheren)
8.1 Front-end – eerste tabblad • •
Ga naar je eerste tabblad en surf naar je domein (bvb. www.webke.be) of subdomein (bvb. www.webke.be/JOOMLA) afhankelijk van waar je de site gezet hebt. Je ziet het resultaat (dus je website) – Front-end
8.2 Back-end – tweede tabblad •
Ga naar je tweede tabblad en surf naar je domein (subdomein) + administrator (bvb. www.webke.be/administrator of www.webke.be/JOOMLA/administrator) en dan krijg je een inlogscherm
De hoofdgebruiker heeft als user name admin Het paswoord koos je bij de installatie
•
Je ziet het beheergedeelte van je website – Back-end
LET OP: om de nieuwste toestand te zien van je website zal je je browservenster dikwijls moeten “refreshen”. Als je dus iets wijzigt in de Back-end, dan moet je in de Front-end het venster “refreshen” met F5
© Carl Maegerman
17/70
Cursus Joomla
PCVO Meetjesland
9 Joomla interface op Nederlands instellen Ga je naar de Back-end waar je terechtkomt op het Control Panel. Je kan snel naar het Control Panel door op het knopje links boven te klikken • • • • • •
Kies Language Manager Klik op de knop Install Language Selecteer Dutch (Nederlands) Klik op de knop Install Keer terug naar de Language Manager Activeer het sterretje van de gewenste taal bij: o Installed – Site o Installed – Administrator
Vanaf nu kan je Joomla in het Nederlands gebruiken. Het Control Panel noemt nu Controlepaneel en alle menu’s staan u ook in het Nederlands
© Carl Maegerman
18/70
Cursus Joomla
PCVO Meetjesland
10 Hoe ziet een Joomla webpagina eruit Je kan dus een webpagina in Joomla vergelijken met een muur. Op die muur heb je een aantal prikborden ( = Moduleposities). En op ieder prikbord kan je plakbriefjes ( = Modules) prikken. De namen van de Moduleposities kunnen verschillen!!! Voor de eenvoud neem ik hier Positie #. Template Positie 1
Positie 2 Positie 3
Positie 4
Positie 5 Module X
Positie 6 Module Y
Module Z
Positie 7
© Carl Maegerman
19/70
Cursus Joomla
PCVO Meetjesland
11 Moduleposities weergeven als voorbeeld 11.1 Welke stappen moet je doen om dit te kunnen tonen Wil je de Moduleposities van een Template weergeven in je browser dan kan je dit als volgt doen: • Ga naar Templatebeheer • Klik op de knop “Opties” • Ga naar het tabblad “Templates” • Zet “Voorbeeld module posities” op Ingeschakeld • Klik op “Opslaan & sluiten” • Ga nu in het Templatebeheer naar het tabblad “Templates” • Klik op “Voorbeeld” naast de afbeelding van de gewenste Template
De browser opent nu een bijkomend tabblad met daarin een visuele weergave van de Moduleposities.
11.2 Overzicht module posities van het template Beez3
© Carl Maegerman
20/70
Cursus Joomla
PCVO Meetjesland
12 Enkele aan te raden Extensies 12.1 JCE editor installeren als standaard tekstverwerker Als we later Artikels (dit is de inhoud van je webpagina’s) schrijven in Joomla dan is de standaard editor nogal minimaal. Een beter alternatief is JCE, dit staat voor Joomla Content Editor. Invoegen van afbeeldingen of links naar interne artikelen zal ook veel gemakkelijker gebeuren. JCE is wat men noemt een Component, dit is een soort subprogramma van Joomla!!!
12.1.1 JCE downloaden Deze gratis extensie in de vorm van een ZIP bestand kan je downloaden op http://www.joomlacontenteditor.net/
12.1.2 JCE installeren • Ga naar het Controlepaneel – Installeer extensies • Upload het ZIP bestand dat je zonet gedownload hebt
12.1.3 Downloaden JCE Nederlands taalbestand Deze uitbreiding van JCE kan je downloaden in de vorm van een ZIP bestand op http://www.joomlacontenteditor.net/downloads/languages
12.1.4 Installeren JCE Nederlands taalbestand • Ga in het Controlepaneel naar het menu Componenten – JCE Editor • Klik op de tab Install Add-ons • Upload het ZIP bestand dat je zonet gedownload hebt
12.1.5 JCE activeren als standaard tekstverwerker • • • •
Ga naar Controlepaneel – Algemene instellingen Ga naar het tabblad Website Kies als Standaard tekstverwerker: Editor – JCE Vergeet niet op de knop Opslaan en sluiten te klikken!!!
© Carl Maegerman
21/70
Cursus Joomla
PCVO Meetjesland
12.2 Gantry framework installeren Het Gantry framework http://www.gantry-framework.org/ is ontworpen door de mensen van Rocket Theme http://www.rockettheme.com/ die op hun beurt Templates maken die draaien op dit framework. Het bijzondere aan dit framework is dat het op een “eenvoudige” manier toelaat om de moduleposities zelf in een vrij flexibele manier aan te passen. Dit is niet mogelijk in andere templates, waar de moduleposities vast zijn en men om deze te wijzigen in de code moet duiken.
12.2.1 Gantry bundle downloaden Dit gratis framework en basistemplate kan je downloaden in de vorm van een bundle (ZIP bestand) op http://www.gantry-framework.org/ Dit bestand bevat het Gantry Framework + Standaard Gantry template for J2.5 and J3.0 + Geassocieerde Plugins
12.2.2 Gantry bundle installeren • Ga naar het Controlepaneel – Installeer extensies • Upload het ZIP bestand dat je zonet gedownload hebt
12.2.3 Gantry Template instellen als standaard template • Ga naar het Templatebeheer • Stel dit template als standaard template in voor je website Op de volgende bladzijde zie je een schematische weergave van de Moduleposities van het standaard Gantry Template. We zullen later meer uitleg geven over de flexibiliteit van deze posities.
© Carl Maegerman
22/70
Cursus Joomla
PCVO Meetjesland
12.2.4 Overzicht module posities van het template Gantry - Voorbeeld
Het valt direct op dat hier veel meer posities voorzien zijn. Op de volgende bladzijde zie je een schematisch overzicht van deze posities (héél handig bij het later positioneren van de verschillende modules van de webpagina
© Carl Maegerman
23/70
Cursus Joomla
PCVO Meetjesland
12.2.5 Overzicht module posities van het template Gantry - schematisch
mb
© Carl Maegerman
24/70
Cursus Joomla
PCVO Meetjesland
13 Backup maken via de Joomla extensie AKEEBA BACKUP Ongelukken gebeuren! Je site draait niet meer na een wijziging, je hebt bepaalde bestanden verwijdert en je kan ze niet meer terug halen, enz… Vergeet dus zeker niet op regelmatige basis een backup te maken van je Joomla site. Video’s i.v.m. deze extensie / software vindt je op https://www.akeebabackup.com/videos.html • U vindt deze extensie op https://www.akeebabackup.com/products/akeeba-backup.html • Het nederlandse taalpakket vindt u op http://d2n13qx8m4psnz.cloudfront.net/language/akeebabackup/index.html Na deze installatie vindt u Akeeba Backup terug bij het menu Componenten – Akeeba backup De eerste keer dat u deze component start bent u best van even de Configuratiewizard uit te voeren. Daarna kunt u uw eerste automatische backup uitvoeren. U vindt het backup bestand op de volgende plaats
Hoofdmap van je Joomla site Dit is de Root directory indien je de site in je hoofddomein geplaatst hebt.
Map met het backup bestand
LET OP: Wijzig de bestandsnaam van dit bestand in een iets duidelijker naam voor jou en kopieer het bestand naar uw lokale PC met FileZilla!!! Verwijder daarna het online bestand!!!
© Carl Maegerman
25/70
Cursus Joomla
PCVO Meetjesland
14 AKEEBA Kickstart Deze bestanden gaan we later nodig hebben om onze backup gemaakt met AKEEBA terug te zetten • U vindt deze bestanden op https://www.akeebabackup.com/products/akeeba-kickstart.html • Deze map komt in ZIP formaat binnen en moet u eerst uitpakken op uw PC • Je kan in de map alle .ini files van talen die u niet interesseren verwijderen. U houdt dan de volgende files over:
LET OP: Zorg dat je ten allen tijde bestanden met FileZilla upload in “Binary Transfer Mode”. In FileZilla ga je hiervoor naar: Bewerken – Instellingen – Overdrachten – Bestandstypes – Keuzerondje “Binair” • Nu moet je de overblijvende bestanden van deze map uploaden (met bvb. FileZilla) naar de map waarin je site stond (bij One.com is dit de root directory in geval dat u de site in het hoofddomein geplaatst heeft. • Upload nu je backup bestand (dit is het bestand dat je met Akeeba Backup gemaakt hebt) naar de zelfde plaats. • Nu kan je Akeeba Kickstart opstarten door naar het kickstart.php bestand te surfen Bij Webke.be is dit bvb. http://www.webke.be/JOOMLA/kickstart.php • Je krijgt nu een boodschap die je toch best even naleest
© Carl Maegerman
26/70
Cursus Joomla
PCVO Meetjesland
• Druk op ESC als je aan alle voorwaarden voldaan hebt • Daarna vindt Akeeba Kickstart automatisch de aanwezige backup bestanden in de root directory van je Joomla site en toont hij het volgende venster
15 Stappenplan AKEEBA backup maken en terugzetten 15.1 Het maken van de backup • Maak een backup met AKEEBA backup
15.2 Extra stappen om de backup veilig te stellen • • • •
Geef het backup bestand een meer duidelijke naam Kopieer het backupbestand naar je lokale PC Verwijder het backup bestand van je webruimte Kopieer het backupbestand van je lokale PC naar de root directory van je Joomla site
15.3 Terug zetten backup • • • •
Start AKEEBA Kickstart op Selecteer de juiste backup Volg alle stappen van de wizard Op het einde niet vergeten van de installatiemap op te ruimen
© Carl Maegerman
27/70
Cursus Joomla
PCVO Meetjesland
16 De stappen om een Joomla website te maken 16.1 Template Kies een template gratis of betalend die het best aanleunt qua structuur en opmaak bij de website die jij wilt maken.
16.2 Schema tekenen Teken op papier een schema waarin je volgende zaken vermeld • Welke teksten ga ik gebruiken • Welke afbeeldingen (logo, banner, andere foto’s) ga ik gebruiken • Welke Artikels ga ik aanmaken • Ga ik de Artikels organiseren in Categorieën en welke • Hoe zal mijn navigatiemenu eruit zien en met welke Artikels of categorieën ga ik de menuitems koppelen • Welke extraatjes heb ik nodig onder de vorm van Extensies (Contactformulier, Google mapje, fotogalerij, videogalerij, enz…) De benodigde informatie kan je best organiseren op voorhand in een mappenstructuur zoals hierna weergegeven:
16.3 Categorieën Maak je geplande categorieën aan
16.4 Artikels Maak je geplande Artikels aan en steek ze in de juiste Categorieën
16.5 Navigatiemenu Maak de juiste menuitmes aan in het hoofdmenu
16.6 Extraatjes Voeg alle extraatjes toe die je wilt zien op je webpagina’s
© Carl Maegerman
28/70
Cursus Joomla
PCVO Meetjesland
17 Conclusie Joomla vs Dreamweaver
Met Joomla maak je dus een website op een héél andere manier dan met een WYSIWYG-editor zoals Dreamweaver. Met Dreamweaver maak je webpagina’s, die je vervolgens op het internet plaatst. Met Joomla maak je verschillende blokjes gegevens die je in een databank opslaat en waarmee Joomla een webpagina samenstelt. Zo’n blok kan van alles zijn. Een tekst, een menu, een foto, een module, enz… . Je kan een blok op één of meerdere pagina’s weergeven.
© Carl Maegerman
29/70
Cursus Joomla
PCVO Meetjesland
18 Klassikaal voorbeeld website “PCVO Meetjesland” We maken klassikaal een kleine website aan en gaan op het einde een backup maken en die ook eens terugzetten.
18.1 Ontwerp Het Navigatiemenu van de website zal de volgende Menuitems bevatten: • Welkom • Over Ons • Nieuwtjes • Opleidingen • Contact Men heeft 3 Categorieën: • Opleidingen • Nieuwtjes • Contact Men heeft de volgende Artikels:
Artikel
Welkom Over Ons Informatica Talen Bouw Nieuwtje 1 Nieuwtje 2 Nieuwtje 3 Adres Openingsuren Telefoon Fax Mail
© Carl Maegerman
Categorie
Uncategorised Uncategorised Opleidingen Opleidingen Opleidingen Nieuwtjes Nieuwtjes Nieuwtjes Contact Contact Contact Contact Contact
30/70
Cursus Joomla
PCVO Meetjesland
Links van het Navigatiemenu:
Menuitem Welkom Over Ons Opleidingen Nieuwtjes Contact
Sub-menuitem Informatica Talen Bouw
Link naar
Artikel Welkom Artikel Over Ons Artikel Informatica Artikel Talen Artikel Bouw Categorieblog Categorie Nieuwtjes Categorieblog Categorie Contact
18.2 De Categorie “Opleidingen” maken 1. 2. 3. 4. 5.
Ga naar het Backend In het Controlepaneel kies je voor Categoriebeheer Klik op de knop Nieuw Typ als Titel voor de Categorie, Opleidingen in Klik op de knop Opslaan en sluiten
Doe dit nogmaals voor de volgende Categorieën: • Nieuwtjes • Contact
18.3 Het Artikel “Informatica” maken en in de categorie “Opleidingen” steken 1. 2. 3. 4. 5. 6. 7.
Ga naar het Backend In het Controlepaneel kies je voor Artikelbeheer Klik op de knop Nieuw Typ als Titel van het Artikel, Informatica in Kies als Categorie, Opleidingen Typ als tekst “Dit is een omschrijving van onze opleiding Informatica.” Klik op de knop Opslaan en sluiten
Doe dit ook voor alle andere Artikels voorzien in het ontwerp, kies zelf een kleine tekst die verwijst naar het menuitem.
18.4 Het Navigatiemenu maken 18.4.1 Een Menuitem maken die geen Sub-menuitems bevat met link naar een Artikel (Welkom) • • • • •
Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik op het menuitem Home Zet Menu-itemtype op Artikelen - Individueel Artikel
© Carl Maegerman
31/70
Cursus Joomla
PCVO Meetjesland
• Bij Selecteer Artikel kiest u het gewenste artikel, in ons geval Welkom • Verander de Titel in Welkom • Extra bij dit Menuitem Omdat dit het start item is zal je op het tabblad Paginaweergave bij Toon paginakop moeten kiezen voor Nee (bekijk zelf maar eens wat het in- en uitschakelen van dit item betekent) • Klik op de knop Opslaan en sluiten Maak nu zelf het Menuitem Over Ons
18.4.2 Een Menuitem maken die Sub-menuitems bevat die geen link bevat (Opleidingen) • • • • • • • •
Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik nu op de knop Nieuw Zet Menu-itemtype op Systeemlinks - Externe URL Typ bij Link het # teken Verander de Titel in Opleidingen Klik op de knop Opslaan en sluiten
18.4.3 Een Sub-menuitem maken met link naar een Artikel (Informatica) Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik nu op de knop Nieuw Zet Menu-itemtype op Individueel Artikel Bij Selecteer Artikel kiest u het gewenste artikel, in ons geval Informatica Verander de Titel in Informatica Kies bij Hoofditem het Menu item waaronder dit Sub-menu item moet zitten (in dit geval Opleidingen) • Klik op de knop Opslaan en sluiten • • • • • • • •
Maak nu zelf de Sub-menu items Talen en Bouw
18.4.4 Een Menu item maken met link naar een Categorieblog (Nieuwtjes) • • • • •
Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik nu op de knop Nieuw Zet Menu-item type op Artikelen - Categorieblog
© Carl Maegerman
32/70
Cursus Joomla
PCVO Meetjesland
• Bij Kies een categorie kiest u de gewenste categorie, in ons geval Nieuwtjes • Verander de Titel in Nieuwtjes • Als extraatje kies je bij het tabblad Blogweergave: • bij Kolommen voor 1 • bij Volgorde artikelen voor Meest recente eerst • Klik op de knop Opslaan en sluiten Maak nu zelf het Menu item Contact, maar kies nu bij Blogweergave opties: • • • • •
bij Hoofdartikelen voor 0 (zorgt ervoor dat het eerste artikel niet apart bovenaan staat) bij Intro-artikelen voor 5 (zorgt ervoor dat alle 5 de artikelen getoond worden) bij Kolommen voor 2 (zorgt voor een blog in twee kolommen) bij Volgorde meerdere kolommen voor Links naar rechts bij Volgorde artikelen voor Artikelbeheer volgorde (zorg wel voor de goede volgorde dan in het Artikelbeheer, zie volgend puntje!!!)
18.5 Volgorde artikelen in artikel blog De volgorde van de artikelen zelf bepalen, doe je als volgt: • Ga naar Artikelbeheer • Klik nu in de lijst van de artikelen op de kolomtitel Volgorde • Je kan nu de artikelen in de juiste volgorde slepen met het volgende knopje • Zet de volgorde als volgt: o Adres o Openingsuren o Telefoon o Fax o Mail
18.6 Ongewenste vermeldingen bij Artikels verbergen Nu zal je opmerken dat er bij de Artikels boven de zelf ingetypte tekst nog vermeldingen staan. Deze kan men om te beginnen best bij Artikelbeheer – Opties uitzetten. Dit doe je als volgt: 1. Ga naar het Backend 2. In het Controlepaneel kies je voor Artikelbeheer 3. Klik op de knop Opties 4. Ga naar het tabblad Artikelen 5. Verberg de zaken die je niet wilt zien bij het Artikel 6. Verberg bvb. eens alles behalve de Titel en kies Opslaan en sluiten 7. Kijk nu nog eens op het Frontend
© Carl Maegerman
33/70
Cursus Joomla
PCVO Meetjesland
18.7 De module Breadcrumbs activeren Breadcrumbs tonen je op een eenvoudige manier aan waar je je ergens bevindt in de website. Ga naar het Backend In het Controlepaneel kies je voor Modulebeheer Klik op de module Breadcrumbs Bij Toon titel kies je voor Verberg Kies bij Positie voor Kruimelpad (breadcrumb) (in het Gantry template staat het dan direct op de juiste plaats) • Tekst voor de startpagina voor Welkom • Toon start voor Ja • Klik op de knop Opslaan en sluiten • • • • •
18.8 Startpagina instellen Bij het Menubeheer moeten we ook nog het Menu-item Welkom als Startpagina instellen. Dit doe je in Menubeheer door op het Menu Main menu te klikken en daar ter hoogte van Welkom het sterretje aan te klikken voor Startpagina.
18.9 Kiezen of verwijderen van het logo in de Top Banner • Ga naar de Backend • Ga naar het Templatebeheer • Onze standaard template voor onze website is hier Gantry - Default, we klikken deze aan • We kiezen voor het tabblad Style • Om nu je eigen logo te gebruiken doe je de volgende stappen: o Zorg er eerst voor dat je via Controlepaneel – Mediabeheer je eigen logo geupload hebt naar de juiste plaats (bij voorkeur een mapje aanmaken met de naam van de website)
o Klik bij Logo op de schuiflijst Type en kies daar Custom o Klik bij Custom Logo op de knop Select en kies je eigen logobestand o Klik op de knop Save
© Carl Maegerman
34/70
Cursus Joomla
PCVO Meetjesland
18.10 Een banner plaatsen bovenaan de pagina Soms wil men in plaats van een logo eenvoudigweg een banner op de pagina waarin het logo verwerkt is. Onderneem eerst de volgende stappen om het logo te verwijderen: • Ga naar de Backend • Ga naar het Templatebeheer • Onze standaard template voor onze website is hier Gantry - Default, we klikken deze aan • We kiezen voor het tabblad Style • Zet bij Logo de schuifknop Show op OFF • Klik op de knop Save Plaats nu je banner bovenaan de website: • Ga naar de Backend • Ga naar het Modulebeheer • Klik op de knop Nieuw • Kies bij Type module voor Aangepaste HTML • Kies bij Titel voor Banner • Kies bij Toon titel voor Verberg • Kies bij Positie voor top-a • Voeg in het editorvenster via de knop Invoegen/bewerken afbeelding je eigen banner in • Klik op Opslaan en sluiten
18.11 Uittesten Eigenlijk moet je tijdens alle voorgaande stappen telkens de veranderingen checken in het Front-end. Bekijk dit eindresultaat dus aandachtig en werk bij waar nodig.
18.12 Backup maken • • • •
Maak een backup met AKEEBA backup Geef het backup bestand een meer duidelijke naam Kopieer het backupbestand naar je lokale PC Verwijder het backup bestand van je webruimte
18.13 Backup uittesten • • • • •
Kopieer het backupbestand van je lokale PC naar de root directory van je Joomla site Start AKEEBA Kickstart op Selecteer de juiste backup Volg alle stappen van de wizard Op het einde niet vergeten van de installatiemap op te ruimen
© Carl Maegerman
35/70
Cursus Joomla
PCVO Meetjesland
19 Algemene website instellingen Ga hiervoor naar Controlepaneel – Algemene instellingen Je krijgt nu een venster met 5 tabbladen: • Website • Systeem • Server • Rechten • Tekstfilters Wij bespreken hier voornamelijk het eerste tabblad. De instellingen van de andere tabbladen laat u voor wat ze zijn, want wijzigingen hierin kunnen drastische gevolgen hebben als men niet echt weet wat men hiermee aanvangt.
19.1 Website 19.1.1 Website-instellingen Website naam Naam van de website zoals deze op het frontend en de homepage wordt weergegeven. Website offline Héél handige instelling, omdat je tijdens onderhoud van de website, je de website offline kan zetten voor de gewone gebruikers. Je ziet dan een pagina waar op staat dat er werkzaamheden zijn aan de site. Als beheerder heb je op deze pagina de mogelijkheid om in te loggen, zodat jij als enige kan zien hoe de wijzigingen eruit zien die je aanbrengt in de website. Offline bericht – Aangepast bericht Met de combinatie van deze twee instellingen kan je zelf bepalen hoe het offline bericht eruit ziet. Offline afbeelding Je kan zelfs een afbeelding gebruiken als offline bericht. Mouse-over bewerkiconen voor Afhankelijk van het template.
© Carl Maegerman
36/70
Cursus Joomla
PCVO Meetjesland
Standaard tekstverwerker Wanneer meerdere teksverwerkers geïnstalleerd zijn (bvb. JCE), kan je hier de standaard tekstverwerker kiezen. Standaard Captcha Dit is een soort beveiliging tegen herhaaldelijk inloggen door spammers. Standaard toegangsniveau Wanneer een nieuw artikel geschreven wordt, is het standaard toegangsniveau 'Publiek'. Dat betekent dat iedereen die uw website bezoekt het artikel kan lezen. Indien de inhoud alleen beschikbaar moet zijn voor mensen met een inlog-account, moet u de artikelen op 'Geregistreerd' zetten. Als u hier het standaard toegangsniveau wijzigt, zijn voortaan alle nieuwe artikelen op geregistreerd. De reeds aangemaakte artikelen behouden wel hun toegangsniveau. Standaard lijstlengte In het controlepaneel van Joomla werkt u veel met lijsten. Bijvoorbeeld het overzicht van de artikelen, menu-items, contactpersonen enzovoorts. Hier kunt u aangeven wat de standaardlengte van de lijsten moet zijn. Als ze het maximum overschrijven, wordt de lijst over meerdere pagina's verdeeld. Standaard feedlimiet Aantal artikelen in feeds. E-mailadres feed Het e-mailadres dat bij de feed vermeld wordt. De keuze is van auteur of van website.
19.1.2 Metadata-instellingen Algemene metabeschrijving van website Dit is de kleine tekst met uitleg over je site, die men ziet als men in Google zoekt naar je site. Algemene metatrefwoorden van website Dit zijn de trefwoorden die jij het belangrijkste vindt indien men in Google naar je site zoekt.
© Carl Maegerman
37/70
Cursus Joomla
PCVO Meetjesland
Robots Hoe worden de pagina’s doorzocht door de spider van een zoekmachine. Bvb. moet hij enkel de eerste pagina of de hele website indexeren. Index, Follow wil dus zeggen dat hij deze pagina indexeert en ook de links die op deze pagina staan moet volgen. Inhoudsrechten Hier kan je een tekst plaatsen die bepaald of mensen de inhoud mogen kopiëren, distribueren en dergelijke. Toon auteur metatag – Toon Joomla! Versie De tekst van het item zegt genoeg ;-)
19.1.3 SEO-instellingen SEO staat voor Search Engine Optimalisation of Zoekmachine Optimalisatie. Een belangrijke factor van SEO is het leesbaar maken van de URL's van de pagina's: de adressen. Wanneer de zoekmachine ook belangrijke trefwoorden in de url leest, heeft dit een positieve invloed op het zoekresultaat. Zoekmachine vriendelijke URL’s Zet dit op Ja. Zo wordt de titel van het artikel of menuknop in de url weergegeven. Gebruik URL herschrijven Laat dit op Nee staan. Dit dient om de toevoeging index.php uit de URL te krijgen. Maar dit houdt in dat men enkele bestandsnamen correct moet wijzigen. Daarom doen we dit liever niet. Voeg een achtervoegsel (suffix) aan URL’s toe Zet dit op Ja. Met deze optie aan krijgen alle URL's de extensie .html. Waarom is dit belangrijk? Wanneer er geen uitgang (extensie) aan de URL wordt gegeven, 'denkt' de zoekmachine dat het hier een map of folder betreft. Met de uitgang .html indexeert de zoekmachine de pagina als solide html wat de indexering ten goede komt.
© Carl Maegerman
38/70
Cursus Joomla
PCVO Meetjesland
Unicode aliassen Zet dit voor Nederlandstalige sites op Nee. Dit is vooral een optie die veel vragen op roept: wat is unicode aliassen?! Op Nee worden niet ASCII karakters omgezet naar 'gewone' latijnse letters in de url, bv: é -> e ä - a. Op Ja worden de speciale karakters ook opgenomen in de URL. Dit is vooral van belang voor websites met de standaard taal Frans, Grieks, Russisch enzovoort. Websitenaam in paginatitels invoegen Zet dit op Voor Een erg fijne en onmisbare toevoeging in Joomla! Het is heel belangrijk dat de Websitenaam op iedere pagina wordt vermeld. Het systeem heeft standaard de keuze om de website naam wel of niet in iedere titel te vermelden en zo ja, of het voor of achter de titel van het artikel moet komen. Cookie-instellingen In ons geval leeg laten. Indien de website meerdere domeinen beslaat (www.website.ext, forum.website.ext, wiki.website.ext) is het mogelijk dat de gebruiker één keer hoeft in te loggen en niet op ieder domein apart. Als je van de website zoals hij nu is, een backup wilt maken, is het nu de moment!!! Probeer deze backup zeker eens terug te zetten, zodat je weet dat hij correct gemaakt is!!!
© Carl Maegerman
39/70
Cursus Joomla
PCVO Meetjesland
20 Meer over Artikels 20.1 Afbeeldingen Hier en daar een afbeelding op een website, kan de boel een beetje opvrolijken ;-) Als je een afbeelding in een artikel wilt plaatsen kan dit als volgt: • Ga naar het Backend • Kies Artikelbeheer • Kies je artikel (bvb. Nieuwtje 1) • Klik ergens na de eerste lijn tekst en typ een spatie • Klik rechts en kies Afbeelding invoegen/bewerken • Je kan nu in de Root directory van de mediabestanden een nieuwe map maken bvb. “PCVO Meetjesland” • Je klikt op die map en je maakt hier een submap Afbeeldingen • Selecteer de map Afbeeldingen • Je kan nu afbeeldingen uploaden vanaf de map “Helicopters” die je van je lesgever kreeg LET OP: de grootte van de foto’s mag blijkbaar op dit moment niet groter zijn dan 1MB • Kies dan de eerste helicopter en kies Invoegen • Klik met de rechter muisknop op de afbeelding en kies voor Afbeelding invoegen/bewerken • Zorg ervoor dat je de afbeelding bij Dimensies een hoogte van 100px ingeeft Doe hetzelfde nu voor de artikelen Nieuwtje 2 en Nieuwtje 3
20.2 Hyperlinks Soms is het ook nodig om binnen een webpagina een hyperlink te hebben naar een andere webpagina of website Als je een hyperlink in een artikel wilt plaatsen kan dit als volgt: • Ga naar het Backend • Kies Artikelbeheer • Kies je artikel (bvb. Welkom) • Typ ergens een stukje tekst bvb. “Neem gerust contact met ons op voor verdere vragen.” • Selecteer het stukje tekst waarvan je een hyperlink wilt maken (bvb. contact) • Klik rechts en kies Link invoegen/bewerken • Kies dan bvb.het Menuitem Contact als link en voeg deze in
© Carl Maegerman
40/70
Cursus Joomla
PCVO Meetjesland
20.3 Lees meer … LET OP: Dit is enkel zichtbaar bij een Artikel Blog!!! Soms kan je best niet alle informatie van een artikel meteen tonen. Je ziet dan soms onder het artikel een link staan met de vermelding Lees meer … of Meer info … Dit kan je doen als volgt: • Ga naar het Backend • Kies Artikelbeheer • Klik op de knop Opties (rechts bovenaan) • Klik op het tabblad Artikelen • Zorg ervoor dat “Lees meer” getoond wordt en vergeet niet bovenaan te kiezen voor Opslaan en sluiten • Ga nu naar een bepaald artikel (bvb. Nieuwtje 1) • Voeg twee nieuwe regels in na het artikel • Ga één regel terug • Klik op de knop Lees meer invoegen • Typ na de grijze balk (als je JCE gebruikt) nu de verdere tekst met meer uitleg, bvb. “Hier kan men dan veel meer uitleg geven over het product.” Dit kan uitleg zijn die de gebruiker enkel wil zien als hij echt geïnteresseerd is in het product. De gebruiker zelf kiest dus of hij deze uitleg wil zien of niet. • De tekst Lees meer … die men krijgt in het artikel kan men wijzigen voor ieder artikel afzonderlijk. Ga hiervoor naar het betreffende artikel, klik op het tablad Opties en wijzig de parameter Lees meer tekst in bvb. Meer info … Doe hetzelfde nu voor de artikelen Nieuwtje 2 en Nieuwtje 3
20.4 Lees meer … + intro tekst Je merkt bij het vorige op dat als je op Meer info … klikt, dat dan de tekst die er stond (introtekst) verdwijnt en dat de lees meer tekst verschijnt. Je kan er nu voor zorgen dat de introtekst ook blijft staan, maar dat de Meer info … tekst er gewoon bijkomt.
20.4.1 Voor één artikel • • • •
Ga naar het Backend Kies Artikelbeheer Klik op het gewenste artikel Klik op het tabblad Opties en kies bij Toon introtekst = Toon
© Carl Maegerman
41/70
Cursus Joomla
PCVO Meetjesland
20.4.2 Voor alle artikelen gekoppeld aan het menu item Nieuwtjes • • • • •
Ga naar het Backend Kies Menubeheer Klik op het gewenste menu Klik op het gewenste menu item Klik op het tabblad Opties en kies bij Toon introtekst = Toon
20.4.3 Voor alle artikelen • • • • •
Ga naar het Backend Kies Artikelbeheer Klik op de knop Opties (rechts bovenaan) Klik op het tabblad Artikelen Zorg ervoor dat “Toon introtekst” getoond wordt en vergeet niet bovenaan te kiezen voor Opslaan en sluiten
Als je van de website zoals hij nu is, een backup wilt maken, is het nu de moment!!! Probeer deze backup zeker eens terug te zetten, zodat je weet dat hij correct gemaakt is!!! Je zal nu wel merken dat je backup bestanden groter beginnen worden en dus lang duren om te maken en terug te zetten
© Carl Maegerman
42/70
Cursus Joomla
PCVO Meetjesland
21 Grote herhalingsoefening Indien je Joomla beter begrijpt, is het dus aan te raden om Joomla ZONDER de voorbeeld data te installeren en met het Gantry Framework + Template http://www.gantry-framework.org/ te werken. Verschillende templates die van dit framework gebruik maken vindt je op http://www.rockettheme.com/joomla-templates . Bekijk gerust even alle mogelijkheden op hun site en je zult merken dat dit framework echt de moeite waard is.
21.1 MySQL database volledig leegmaken • • • • • •
Surf naar de site van One.com https://www.one.com/nl/ Ga naar het Configuratiescherm Klik daar op phpMyAdmin Selecteer je MySQL database Onderaan het scherm kan je ALLE tabellen selecteren Met de schuiflijst ernaast kan je een DROP uitvoeren op alle tabellen (dit is verwijderen)
21.2 Webruimte volledig leegmaken • Start FileZilla http://filezilla-project.org/ op en maak verbinding met je webruimte • Selecteer alle mappen en bestanden die op de root directory staan van je webruimte • Verwijder de geselecteerde mappen en bestanden
21.3 Joomla installeren en op Nederlands instellen • • • • • • • •
•
Ga naar de site van Joomla http://www.joomla.org/ Download de laatste stabiele versie van Joomla (dit is een ZIP bestand) Pak dit ZIP bestand uit Kopieer met FileZilla http://filezilla-project.org/ de inhoud van deze uitgepakte map naar de root directory van je webruimte Surf naar de URL van je Domein (bvb. www.webke.be) Doorloop de installatieprocedure van Joomla Open je browser (bvb. Chrome, Firefox, IE, Safari, Opera of andere …) Zorg dat je twee tabbladen open staan hebt o Op het eerste tabblad surf je naar het Frontend: dit is de URL van je Domein (bvb. www.webke.be) o Op het tweede tabblad surf je naar het Backend: dit is de URL van je Domein + administrator (bvb. www.webke.be/administrator) en log in met je account (bvb. admin + wachtwoord) Installeer het Nederlandse taalpakket voor Joomla en stel dit als standaard in voor zowel de Website als het Beheergedeelte
© Carl Maegerman
43/70
Cursus Joomla
PCVO Meetjesland
21.4 JCE editor installeren • • • • •
Download de laatste stabiele versie van JCE (ZIP bestand) Installeer deze extensie Download de laatste versie van het taalbestand (ZIP bestand) Installeer dit via de JCE component Stel JCE in als standaard tekstverwerker
21.5 Gantry bundle installeren • Download de laatste stabiele versie van de Gantry bundle (ZIP bestand) Dit bestand bevat het Gantry Framework + Standaard Gantry template for J2.5 and J3.0 + Geassocieerde Plugins • Installeer deze extensie en stel in Templatebeheer dit template als standaard in
21.6 AKEEBA Backup installeren • • • • •
Download de laatste stabiele versie van AKEEBA Backup (ZIP bestand) Installeer deze extensie Download de laatste versie van het taalbestand (ZIP bestand) Installeer deze extensie Voer deze extensie nog NIET uit!!!
21.7 AKEEBA Kickstart installeren • • • •
Download de laatste stabiele versie van AKEEBA Kickstart (ZIP bestand) Pak dit bestand uit Verwijder alle taalbestanden (.ini) van de talen die je niet wenst Upload de overblijvende bestanden naar de root directory van je webruimte
21.8 AKEEBA Backup uitvoeren • Start AKEEBA op en voer de configuratiewizard uit • Maak nu een backup • Geef de backup, die je terugvindt in de map /administrator/components/com_akeeba/backup een meer herkenbare naam bvb. 00 - Basis website Joomla NL - Voorbeeld data - JCE - Gantry - AKEEBA Backup AKEEBA Kickstart
21.9 Backup bestand kopiëren naar je lokale PC • Kopieer dit backup bestand met FileZilla naar een veilige map op je lokale PC
21.10 Backup terugzetten met AKEEBA Kickstart • Kopieer dit backup bestand van je lokale PC naar de root directory van je webruimte • Probeer of je de backup nu kan terugzetten met AKEEBA Kickstart
© Carl Maegerman
44/70
Cursus Joomla
PCVO Meetjesland
21.11 Maken van de Website PCVO Meetjesland • Maak de volledige site zoals we die klassikaal gemaakt hebben nu op eigen tempo • Vergeet zeker je backups niet te maken Het uiteindelijke resultaat als je op het menuitem Nieuwtjes klikt:
© Carl Maegerman
45/70
Cursus Joomla
PCVO Meetjesland
21.12 Overzicht module posities van het template Gantry
mb
© Carl Maegerman
46/70
Cursus Joomla
PCVO Meetjesland
22 Aangepaste HTML module op bepaalde positie plaatsen Stel dat je op positie maintop-a, maintop-b en maintop-c van het Gantry template een bepaalde inhoud wilt plaatsen. Deze in houd kan van alles zijn, bvb. tekst, afbeeldingen, HTML code en andere zaken. Je gaat als volgt tewerk: • Ga naar het Modulebeheer • Klik op de knop Nieuw • Kies Aangepaste HTML o Titel is gelijk aan Blokje1 o Positie is gelijk aan maintop-a o Typ in de editor “Dit is het eerste blokje” • Klik op het tabblad Menutoewijzing en zorg ervoor dat dit blokje enkel op de pagina Welkom getoond wordt • Klik op Opslaan en sluiten • Doe nu iets gelijkaardig voor 2 volgende blokjes, Blokje2 en Blokje3 en zet deze op de posities maintop-b en maintop-c
23 Artikelen - Nieuwsflits module in de sidebar plaatsen Als voorbereiding kan je een drietal Artikels in de categorie Nieuwtjes plaatsen (normaal heb je dit in het verleden reeds gedaan) We gaan deze Artikels nu als Nieuwsflits laten weergeven op de positie sidebar-a Je gaat als volgt tewerk: • Ga naar het Modulebeheer • Klik op de knop Nieuw • Kies Artikelen – Nieuwsflits o Titel is gelijk aan Nieuwsflits o Positie is gelijk aan sidebar-a • Klik op het tabblad Menutoewijzing en zorg dat dit blokje enkel op de pagina Welkom getoond wordt • Klik op het tabblad Module en kies o categorie Nieuwtjes o Toon afbeeldingen op Ja o Toon titel op Ja o Lees meer … link op Toon • Klik op Opslaan en sluiten • Probeer nu ook eens in de layout van het template de breedtes van de positie sidebar-a te wijzigen!!! (zie templatebeheer)
© Carl Maegerman
47/70
Cursus Joomla
PCVO Meetjesland
24 Fotoalbum of Fotogalerij met one.com Indien je gebruik maakt van One.com als webhoster, heb je de mogelijkheid om op een vrij eenvoudige manier een fotogalerij op je website te plaatsen. Ga hiervoor als volgt tewerk: • Ga naar het configuratiescherm van One.com • Klik op Foto Galerij • Maak een galerij aan o Geef ze een naam o Geef ze een URL o Ken een gebruiker toe met een paswoord • Voeg daarna albums toe met foto’s aan deze galerij. Als voorbereiding voor het plaatsen van een Fotoalbum en Fotogalerij doe je het volgende in het Back-end: • Ga nu naar het Back-end van je site • Maak een Categorie “Foto” aan (dit zal dienen om later de Artikels “Fotoalbum” en “Fotogalerij” in te steken)
24.1 Een fotoalbum embedden Je kan nu één album van zo’n fotogalerij embedden in je website door de volgende stappen uit te voeren: • Surf naar het adres van je galerij (bvb. http://joomla.lesgever.be) • Klik op een album in deze galerij • Klik op de link “Share album” bovenaan rechts • Kopieer de code die je te zien krijgt bij “Embed this album”met CTRL + C • Maak een nieuw Artikel “Fotoalbum” aan en steek dit in de Categorie “Foto” • Schakel de JCE editor over naar broncode weergave • Plak daar de code in met CTRL + V • Kies voor Opslaan en sluiten • Ga nu naar Menubeheer • Maak een nieuw Menuitem “Foto” (zonder link, Externe URL # dus) • Maak een nieuw Sub-menuitem onder “Foto” en noem dit “Fotoalbum” • Koppel dit Sub-menuitem met het Artikel “Fotoalbum” Als alles goed gegaan is moet je nu een Sub-menuitem “Fotoalbum” hebben dat één album toont in de vorm van een diavoorstelling. Deze kan je eveneens full-screen tonen. Je kan de grootte van deze diavoorstelling wijzigen door in de broncode de waarden van de parameters width en height te wijzigen.
© Carl Maegerman
48/70
Cursus Joomla
PCVO Meetjesland
24.2 Een fotogalerij embedden Je kan nu ook een volledige fotogalerij embedden in je website door de volgende stappen uit te voeren: • Surf naar het adres van je galerij (bvb. http://joomla.lesgever.be) • Bekijk de URL van de galerij, die kan er ongeveer als volgt uitzien: http://joomla.lesgever.be/#home. Het zal nu de bedoeling zijn om deze URL weer te geven in je webpagina via de volgende broncode <iframe src="http://joomla.lesgever.be/#home" name="foto" width="1200" height="650" scrolling="Auto" frameborder="0" id="foto"> • Maak een nieuw Artikel “Fotogalerij” aan en steek dit in de Categorie “Foto” • Schakel de JCE editor over naar broncode weergave • Typ de code in dit scherm (deze is echter niet zichtbaar als je het Artikel sluit en weer opent, waarschijnlijk een bug in de editor) • Kies voor Opslaan en sluiten • Ga nu naar Menubeheer • Maak een nieuw Sub-menuitem onder “Foto” en noem dit “Fotogalerij” • Koppel dit Sub-menuitem met het Artikel “Fotogalerij” Als alles goed gegaan is moet je nu een Sub-menuitem “Fotogalerij” hebben dat de volledige galerij toont in een interactieve vorm. Deze kan je eveneens full-screen tonen. Je kan de grootte van deze galerij wijzigen door in de broncode de waarden van de parameters width en height te wijzigen. LET OP: als deze waarden te klein worden krijg je schuifbalken!!! Het volledige uitzicht van deze galerij kan je instellen via de volgende stappen: • Ga naar het Configuratiescherm van one.com • Klik op Foto Galerij • Klik op Bewerken bij de juiste foto galerij • Kies bij Ontwerp – Lay-out voor Verander de galerij lay-out Je kan deze galerij eveneens gebruiken voor Video’s in .wmv formaat online te zetten. Dit doe je op dezelfde manier als foto’s. Je kan natuurlijk ook het submenuitem Fotogalerij Extern linken met de externe site http://joomla.lesgever.be/#home en dit op een nieuw browser tabblad laten weergeven!!! Probeer dit voorgaande eens zelf uit, maar let erop dat als je op het submenuitem klikt, dat de externe site weergegeven wordt op een nieuw tabblad in de browser!!!
© Carl Maegerman
49/70
Cursus Joomla
PCVO Meetjesland
Heb je nu one.com niet als webhoster of ben niet tevreden met dit soort fotoalbum of fotogalerij, dan moet je op zoek naar een extensie die wel voldoet aan je eisen. Ik gebruik zelf dikwijls Google+ Foto’s , maar daarvoor heb je een Gmail account nodig. Let erop dat je dan het album Openbaar gedeeld zet, zodat de link naar dit album kan bekeken worden door alle bezoekers van de website!!! We gaan hier niet verder op in aangezien je dan beter eerst even de cursus “Foto tot album” volgt zodat je weet hoe Google+ Foto’s werkt!
© Carl Maegerman
50/70
Cursus Joomla
PCVO Meetjesland
25 Gebruikersbeheer Het kan nu zijn dat je bepaalde gebruikers, bepaalde rechten geeft op je website. Twee mogelijke machtigingen kunnen zijn: • Bepaalde Menuitems (dus pagina’s) enkel zichtbaar maken voor een bepaalde gebruikersgroep • Het toegangsniveau wijzigen van bepaalde Front-end en Back-end gebruikers Om dit nu alles mogelijk te maken, gaan we eerst op de pagina “Welkom” een inlogformulier voorzien. Dit doe je als volgt: • Ga naar het Back-end • Klik op Modulebeheer • Klik op Login Form • Wijzig de Positie naar sidebar-a • Klik op het tabblad Menutoewijzing en zorg ervoor dat deze module enkel getoond wordt op de pagina “Welkom” Check nu even of je op het Front-end enkel op de pagina “Welkom” dit Inlog Formulier ziet staan.
© Carl Maegerman
51/70
Cursus Joomla
PCVO Meetjesland
Iemand kan zich nu registreren via dit formulier door op de link Registreer te klikken.
Deze gebruiker dient zijn account nu nog te activeren via de activeringslink die naar zijn e-mail adres gestuurd is. LET OP: Jij kan dit activeren en inschakelen als Administrator ook zelf doen in het Gebruikersbeheer (we doen dit aangezien dit een fictieve gebruiker is en dat zijn e-mail adres ook niet bestaat.
Je zal ook merken dat deze gebruiker automatisch toegevoegd is bij de gebruikersgroep Registered. Dit kan je achteraf altijd wijzigen. Het gemakkelijkste is dus nieuwe gebruikersgroepen maken in Gebruikersbeheer en de gebruikers die dezelfde rechten hebben in dezelfde gebruikersgroep steken. Daarna kan men de rechten meteen voor een volledige gebruikersgroep instellen. © Carl Maegerman
52/70
Cursus Joomla
PCVO Meetjesland
25.1 Menuitem enkel zichtbaar maken voor een bepaalde gebruikersgroep • Ga naar Menubeheer • Klik op het Sub-menuitem “Fotogalerij” • Kies bij Toegang voor Registered (dit is de groep waar de geregistreerde gebruikers in zitten) • Klik op Opslaan en sluiten Check even op je Front-end en je zal zien dat je als niet ingelogde gebruiker het Sub-menuitem Fotogalerij niet meer te zien krijgt. Log je even in met je nieuwe geregistreerde gebruiker en je zal dit Sub-menuitem wel zien. LET OP: vergeet dit Sub-menuitem niet terug Publiek toegankelijk te zetten na deze test
25.2 Toegangsniveau wijzigen In Joomla hebben we zowel voor de Front-end gebruikers als de Back-end gebruikers verschillende toegangsniveaus.
25.2.1 Toegangsniveau wijzigen voor Front-end gebruikers We gaan de rechten voor deze verschillende niveaus eerst overlopen voor het Front-end gedeelte. De volgorde is van veel rechten naar weinig. • Hoofdredacteur (Publisher): een hoofdredacteur kan vanaf het Front-end gedeelte artikelen aanmaken, artikelen bewerken en artikelen publiceren. • Redacteur (Editor): een redacteur kan vanaf het Front-end gedeelte artikelen aanmaken of bewerken. Maar deze moeten eerst worden goedgekeurd door een hoofdredacteur, voor deze worden geplaatst. • Auteur (Author): de auteur kan vanaf het Front-end gedeelte nieuwe artikelen aanmaken. Maar deze artikelen moeten eerst worden goedgekeurd door een redacteur of hoofdredacteur, voor deze op de site worden geplaatst. • Geregistreerd (Registered): de geregistreerde gebruiker kan artikelen bekijken die voor niet-geregistreerde gebruikers verborgen blijven. Het toegangsniveau wijzigen kan enkel door de Administrator in het Back-end gedeelte en doe je als volgt: • Ga hiervoor naar Gebruikersbeheer • Klik op de gebruiker waarvan je het toegangsniveau wil wijzigen • Zet het toegangsniveau van Dirk Fictief bvb. eens op Hoofdredacteur (Publisher) • Klik op Opslaan en sluiten © Carl Maegerman
53/70
Cursus Joomla
• • • •
PCVO Meetjesland
Ga nu naar het Front-end en bekijk eens de pagina Welkom Log je in op de pagina Welkom als Dirk Fictief Ga terug naar het Front-end en bekijk nog eens de pagina Welkom Je ziet nu een knopjes waarmee je het Artikel of de Banner kan editeren
25.2.2 Toegangsniveau wijzigen voor Back-end gebruikers De rechten voor deze Back-end gebruikers zien er als volgt uit. De volgorde is van veel rechten naar weinig. • Super Administrator (Super Users): Als Super Administrator heb je toegang tot alle Back-end functies. Deze Gebruikers kunnen niet worden gewist en kunnen niet veranderen naar een andere groep. • Administrator (Administrator): Als Administrator heb je toegang tot de Back-end functies, maar heb je een beetje meer beperkingen dan een Super Administrator. Een Administrator kan geen: o gebruiker in de Super Administrator groep toevoegen of wijzigen o wijzigingen aanbrengen in de Global Configuration instellingen o Mass Mail functie gebruiken o Templates wijzigen of installeren o Taalbestanden wijzigen of installeren. • Beheerder (Manager): Deze heeft de beperkingen van de Administrator en kan ook geen: o Gebruikers beheren o Modules installeren o Componenten installeren © Carl Maegerman
54/70
Cursus Joomla
PCVO Meetjesland
26 Nuttige gratis extensies 26.1 Foto slider – DJ-ImageSlider Dikwijls zie je een foto slider bovenaan een Joomla pagina. Een goed extensie om dit te verwezenlijken is DJ-ImageSlider. Ga als volgt tewerk om dit op je pagina te zetten: • Zoek de extensie DJ-ImageSlider en download deze extensie (je zal wel even moeten registreren op deze site, maar het gebruik van de extensie is gratis voor nietcommerciële doeleinden. • Ga naar Installeer extensies en installeer deze extensie • Ga naar Modulebeheer • Klik op de module DJ-ImageSlider o Kies bij Toon titel voor Verberg o Kies bij Positie voor top-a o Kies bij Status voor Gepubliceerd o Kies bij Menutoewijzing enkel voor het menuitem Welkom o Ga naar de Basisopties en vul bij Image Folder het juiste pad van je foto’s in Bvb. images/PCVO_Meetjesland/SliderWelkom het onderlijnde moet je aanpassen aan jou pad o Pas de andere opties bij Basis opties aan zodat de slider voldoet aan jouw eisen Slide Width = breedte in px van één foto Slide Height = hoogte in px van één foto Visible Images = aantal foto tegelijk die je wilt zien LET OP: Eens deze module goed ingesteld is en je hebt nog eens een gelijkaardige slider nodig, kan je je veel werk besparen door deze module te Dupliceren in Modulebeheer!!!
© Carl Maegerman
55/70
Cursus Joomla
PCVO Meetjesland
26.2 Contactformulier - Rapid Contact Wij maken voor het contactformulier gebruik van Rapid Contact. Dit is een extensie die je in de Joomla extensions directory vindt http://extensions.joomla.org Eerst maak je de juiste e-mailaccounts op je domein: • Ga naar het Configuratiescherm in one.com • Klik op E-mailbeheer en maak de juiste adressen aan bvb. o
[email protected] o
[email protected] (gebruikt om mailformulier correct te laten werken, gebruik dit NIET als gewoon e-mailadres) o
[email protected] • Sluit je configuratiescherm terug af Nu gaan we de extensie Rapid Contact installeren en gebruiken: • Zoek de extensie Rapid Contact op en download ze voor de juiste versie van Joomla. • Installeer deze extensie via Installeer extensies • Ga naar Modulebeheer • Klik op Rapid Contact • Verander de Titel in Mail • Kies bij Toon titel voor Verberg • Bij Positie typ je in user99 • Bij Status kies je Gepubliceerd • Bij Menutoewijzing kies je voor Op alle pagina’s • Bij Enable Anti-spam kies je voor No Voorbeelden!!! • Bij Email Parameters en Tekst Parameters:
[email protected] Website
[email protected] Uw e-mail adres: Onderwerp: Uw vraag: Verzend Dank u voor uw bericht Uw bericht kon niet verzonden worden. Probeer opnieuw. Vul a.u.b.uw e-mail adres in! Vul a.u.b. een geldig e-mail adres in! © Carl Maegerman
56/70
Cursus Joomla
PCVO Meetjesland
We gaan nu het formulier in het Artikel “Mail” zetten als volgt: • Open het Artikel “Mail” (of maak een nieuw Artikel “Mail” aan en steek dit in de Categorie “Contact”) • Schakel de JCE editor over naar broncode weergave • Typ de volgende code in dit scherm {loadposition user99} • Kies voor Opslaan en sluiten Als je nu klikt op het menu Contact (dat in het verleden gekoppeld was aan een blogweergave van bepaalde artikels waaronder Mail, zal je nu een contactformulier zien staan).
© Carl Maegerman
57/70
Cursus Joomla
PCVO Meetjesland
26.3 Map - Google map Dikwijls vindt je op een website ook een routebeschrijving terug m.b.v. Google maps. Dit kan je als volgt verwezelijken: • Ga naar www.google.be • Klik bovenaan de webpagina op Maps • Je kan nu een adres zoeken op 2 manier: o Typ het adres in dat je wilt tonen op de kaart (bvb. Stoepestraat 38, 9960 Assenede) o Typ de naam in van je bedrijf (bvb. PCVO Meetjesland) • Je ziet nu een grote kaart verschijnen met een markering van het adres LET OP: je kan je bedrijf op Google Maps zetten d.m.v. naar Google Maps te surfen en dan te klikken op de link “uw bedrijf op Google Maps”. Alles wijst zichzelf een beetje uit. • Klik nu op “Kaart delen en insluiten”
• Klik op de tab “Kaart insluiten”
• Kies voor “Aangepast formaat” en pas aan o Breedte en hoogte o Weergave o Zoomfactor o Dialoogvenster of niet
© Carl Maegerman
58/70
Cursus Joomla
• • • • • • •
PCVO Meetjesland
Als je klaar bent selecteer je alle HTML code onderaan dit venster Druk op CTRL + C om dit op het klemmenbord te kopiëren Editeer nu het Artikel “Adres” in de Categorie “Contact” Verwijder eventueel de inhoud van dit Artikel Schakel in de JCE Editor om naar Broncode Plak de HTML code van Google Maps met CTRL + V Klik op Opslaan en sluiten
Bekijk nu in het Front-end je Contact pagina en je zal daar een interactieve kaart zien staan
© Carl Maegerman
59/70
Cursus Joomla
PCVO Meetjesland
26.4 Agenda - GCalender Indien je in het bezit bent van een Gmail account, kan je de Google agenda die daaraan gekoppeld is ook gaan koppelen met je Joomla website met de extensie GCalender. LET OP: je Google agenda moet wel publiek gedeeld (openbaar) staan!!! (Zie agenda instellingen in Google en Domeinbeheer Google Apps voor de agenda’s) Ga als volgt tewerk: • Zoek de extensie GCalender en download ze • Ga naar Installeer extensies en installeer de extensie • Ga naar Componenten – GCalender – Kalenders • Klik op de knop Importeer o Log in met je Google account van dit domein (bvb.
[email protected]) o Selecteer de agenda(‘s) die je wilt zien o Klik op de knop Toevoegen o Klik nu op de agenda Geef de agenda een naam (bvb. Webke) Geef het kalender-ID op (zie agenda-id bij instellingen van deze agenda in Google) LET OP: het kan zijn dat dit er in GCalender zo uitziet carl.maegerman%40webke.be (de @ wordt dus vervangen door %40) Geef de agenda een kleurtje • Ga naar Componenten – GCalender – Kalenders • Klik bovenaan rechts op de knop Opties o Tabblad Component Geef daar het Google Apps Domein (in indien je dit hebt, anders laat je dit leeg) Geef ook de Tijdzone in die je ook in gaf bij je Google Calender Bij Cache kies je voor geen cache (anders zie je niet de recentste afspraken) Klik op Opslaan en sluiten o Tabblad Kalender Kies bij Toon kalenders voor Nee (beperkt op de site de mogelijkheid om meerdere kalenders in- en uit te schakelen)
© Carl Maegerman
60/70
Cursus Joomla
PCVO Meetjesland
26.4.1 Modules publiceren • Ga naar Modulebeheer en je zal daar 3 niet gepubliceerde modules vinden. • Publiceer elk van de volgende modules eens op positie sidebar-a en stel de volgende zaken in: o Publiceer de module Gcalender Next Tabblad Module • Kies kalender op juiste kalender stellen • Positie op sidebar-a instellen Tabblad Menutoewijzing • Welkom o Publiceer de module Gcalender Upcoming Tabblad Module • Kies kalender op juiste kalender stellen • Positie op sidebar-a instellen Tabblad Menutoewijzing • Welkom o Publiceer de module Gcalender Overview Tabblad Module • Kies kalender op juiste kalender stellen • Positie op sidebar-a instellen Tabblad Menutoewijzing • Welkom
26.4.2 Menu item maken • Ga naar Menubeheer • Klik op het juiste menu • Klik op de knop Nieuw o Stel Menutitel in als Agenda o Kies bij Menu-itemtype voor GCalender weergave o Kies in het tablad Opties bij Selecteer kalenders de juiste kalender o Klik op Opslaan en sluiten
© Carl Maegerman
61/70
Cursus Joomla
PCVO Meetjesland
26.5 Gastenboek - VitaBook Met een gastenboek kan je geregistreerde bezoekers van je website de gelegenheid geven om berichten te plaatsen en reacties op berichten te geven. Terzelfdertijd kan jij als beheerder deze berichten beheren en verwijderen indien nodig. Wij gebruiken als voorbeeld de extensie VitaBook Je gaat als volgt tewerk: • Zoek de extensie Vitabook en download de geschikte versie van de Main extension • Installeer deze extensie • Ga naar het Menubeheer en kies het juiste menu • Maak een nieuw menu item door op de knop Nieuw te klikken o Kies als Menu-itemtype “Gastenboek” (zie bij VitaBook) o Kies als met als Menutitel “Gastenboek” o Klik op Opslaan en sluiten • Open nu een nieuw tabblad in je browser en surf naar http://www.google.com/recaptcha o Klik hier op de knop USE reCAPTCHA ON YOUR SITE o Na ingeven van je domeinnaam (bij mij bvb. www.webke.be) zal je twee keys krijgen Public key Private key o Laat dit tabblad open staan • Ga nu in je Back-end naar het menu Extensies – Pluginbeheer o Schakel de plugin Captcha – ReCaptcha in o Klik op de plugin Captcha – ReCaptcha o Vul bij de Basis opties deze 2 keys in (kopiëren en plakken van dat openstaande tabblad) o Klik op Opslaan en sluiten • Ga nu naar het menu Systeem – Algemene instellingen o Kies bij Standaard Captcha voor Captcha – Recaptcha o Klik op Opslaan en sluiten • Ga naar Modulebeheer • Plaats de module Login Form enkel op de pagina van ons Gastenboek op de positie sidebar-a o Ga naar Modulebeheer o Klik op de module Login Form o Kies bij Positie voor sidebar-a o Zet bij Menutoewijzing dit formulier enkel actief op de pagina Gastenboek o Klik op Opslaan en sluiten • Bekijk het Front-end en test dit gastenboek uit (als je inlogt als admin kan je de berichten beheren)
© Carl Maegerman
62/70
Cursus Joomla
PCVO Meetjesland
26.6 Link met facebook – SP Facebook Op vele websites vindt je tegenwoordig een link naar de Facebookpagina van het bedrijf. Dit is een gemakkelijke (en gratis) manier om je klanten op de hoogte te houden via Facebook. Wij gebruiken bvb. gratis extensie SP Facebook van http://www.joomshaper.com Ga als volgt te werk: • Zoek de extensie SP Facebook op het internet en download deze extensie • Installeer de extensie • Ga naar Modulebeheer • Schakel de module SP Facebook in • Klik op de module SP Facebook o Bij Toon titel kies je voor Verberg o Bij Positie kies je voor breadcrumb o Op het tabblad Menutoewijzing laat je dit enkel zien op de Welkom pagina o Op het tabblad Opties zet je Plugin Type op Like Button o Op het tabblad Like Button Options doe je het volgende: Zet URL to Like op jouw facebookadres (voor onze school is dat www.facebook.com/pcvomeetjesland) Bij Show send button kies je voor No Kies bij Layout style op Button count Bij Show faces voor No o Klik op Opslaan en sluiten ! Maak NU een backup met Akeeba en kopieer dit backup bestand naar je PC !
© Carl Maegerman
63/70
Cursus Joomla
PCVO Meetjesland
27 Een ander template gebruiken voor je website Het kan nu zijn dat na een tijdje het uitzicht van je website je niet meer bevalt. Je kan nu zonder de website te opnieuw te maken van in het begin, het volledige uitzicht van deze site veranderen door een ander template te kiezen. LET OP: Het is beter om eerst het juiste template te kiezen dat je qua opmaak aanspreekt, voordat je aan de website begint!!! Nadien wisselen zorgt steeds voor meerwerk in vele gevallen. Gebruik dan ook liefst een template van dezelfde makers van je originele template anders zullen de module posities andere namen hebben en dan moet je dit zelf rechttrekken door de modules terug op de juiste posities te zetten. Je gaat als volgt te werk: • Maak altijd eerst een backup met Akeeba (mocht je dit hiervoor niet gedaan hebben) en kopieer dit backup bestand naar je PC Je weet maar nooit dat er iets fout loopt bij het wisselen van template ;-) • Zoek en download een ander template Liefst van dezelfde maker van je originele template, bij ons voorbeeld in de cursus is dit gebaseerd op het Gantry 4.0 framework • Ga naar Installeer extensies en installeer dit template • Ga naar Templatebeheer • Zet daar het nieuwe template als Standaard
© Carl Maegerman
64/70
Cursus Joomla
PCVO Meetjesland
28 Meertalige site Een videohandleiding, van de hieronder uitgeschreven werkwijze voor het standaard template Beez3 – Default vind je op deze site: http://www.joomla-css.nl/nl/joomla-3-modules-stijlen/taalkeuze-meertalige-website LET OP: Zorg er zeker voor dat je voordat je met de volgende hoofdstukken begint, een goede backup hebt van je volledige website!!! Dit is uw verantwoordelijkheid!!!
28.1 Installeren van de taalbestanden • Voer eerst de stappen uit van Hoofdstuk 15 mocht dit nog niet gebeurt zijn (hoofdstuk 15 – Stappenplan AKEEBA backup maken en terugzetten) Zet desnoods je backup terug die je indertijd maakte!!! • Ga naar Taalbeheer • Klik op Inhoud • Klik op de knop Nieuw • Vul de gegevens zoals hieronder in
http://www.uwdomeinnaam.be/nl Naam van de vlag afbeelding (nl.gif) zonder de extensie Naam van de map binnen in de taalmappen
• Klik op Opslaan en sluiten
© Carl Maegerman
65/70
Cursus Joomla
PCVO Meetjesland
28.2 Menus maken 28.2.1 Nederlands menu • Ga naar Menubeheer • Maken van het Nederlandse menu o Klik op de knop Nieuw o Vul onderstaande gegevens in
o Klik op Opslaan en sluiten
28.2.2 Maken van het Engels menu • Ga naar Menubeheer • Maken van het Engelse menu o Klik op de knop Nieuw o Vul onderstaande gegevens in
o Klik op Opslaan en sluiten
© Carl Maegerman
66/70
Cursus Joomla
PCVO Meetjesland
28.3 Artikels maken in de juiste taal 28.3.1 Nederlands artikel • Ga naar het Artikelbeheer o Klik op de knop Nieuw voor een nieuw artikel o Zet Titel op Welkom o Typ een Nederlandse tekst in het artikel bvb. “Welkom op onze site” o Klik op Opslaan en sluiten
28.3.2 Engels artikel • Ga naar het Artikelbeheer o Klik op de knop Nieuw voor een nieuw artikel o Zet Titel op Welcome o Typ een Engelse tekst in het artikel bvb. “Welcome to our site” o Klik op Opslaan en sluiten
28.4 Menu items toevoegen aan de menu’s 28.4.1 Nederlandse menu items • Ga naar het menu Main Menu Dutch o Klik op de knop Nieuw voor een nieuw menu item o Kies bij Menu- itemtype voor Individueel Artikel o Selecteer het Artikel in de juiste taal (bvb. Welkom) o Kies bij Menu titel voor Welkom o Kies bij Taal voor Dutch (NL) o Klik op Opslaan en sluiten o Duid nu dit menu item aan als standaard (zie sterretje). Doe dit enkel voor het start item van dit Nederlands menu!!! Het sterretje zal veranderen in een Nederlandse vlag
28.4.2 Engelse menu items • Ga naar het menu Main Menu English o Klik op de knop Nieuw voor een nieuw menu item o Kies bij Menu- itemtype voor Individueel Artikel o Selecteer het Artikel in de juiste taal (bvb. Welcome) o Kies bij Menu titel voor Welcome o Kies bij Taal voor English (UK) o Klik op Opslaan en sluiten o Duid nu dit menu item aan als standaard (zie sterretje). Doe dit enkel voor het start item van dit Engels menu!!! Het sterretje zal veranderen in een Engelse vlag © Carl Maegerman
67/70
Cursus Joomla
PCVO Meetjesland
28.5 Modules Check eerst even bij Modulebeheer op welke positie het Main Menu staat (normaal position-7) Voor de Nederlandse menu module • Ga naar Modulebeheer • Klik op de knop Nieuw • Selecteer als Moduletype Menu • Kies bij Titel voor Main Menu Dutch • Kies bij Positie voor position-7 • Kies bij Taal voor Dutch (NL) • Kies bij Selecteer menu voor Main Menu Dutch • Bij de Geavanceerde opties kies je bij Module class achtervoegsel voor _menu • Klik op Opslaan en sluiten Voor de Engelse menu module • Ga naar Modulebeheer • Klik op de knop Nieuw • Selecteer als Moduletype Menu • Kies bij Titel voor Main Menu English • Kies bij Positie voor position-7 • Kies bij Taal voor English (UK) • Kies bij Selecteer menu voor Main Menu English • Bij de Geavanceerde opties kies je bij Module class achtervoegsel voor _menu • Klik op Opslaan en sluiten Nadat je de twee modules gemaakt hebt, ga je de bestaande Main Menu module depubliceren.
28.6 Taal filter Ga naar Extensies – Pluginbeheer Zoek de plugin Systeem – Taalfilter en publiceer hem
28.7 Taal selectie We gaan nu de mogelijkheid geven om de taal te selecteren. • Ga naar Modulebeheer • Klik op de knop Nieuw o Kies als Moduletype voor Taalselectie o Kies bij Titel voor Taalsectie o Kies bij Toon titel voor Verberg o Kies bij Positie voor breadcrumb (dit kan later natuurlijk een andere positie zijn) o Kies bij Taal voor Alle • Klik op Opslaan en sluiten
© Carl Maegerman
68/70
Cursus Joomla
PCVO Meetjesland
28.8 Gantry templates manager correct instellen Om nu in het Gantry template het menu te laten veranderen naargelang de gekozen taal, moet men in de Gantry template manager enige zaken uitvoeren.
28.8.1 Nederlands menu Ga naar Templatebeheer Klik op het template Gantry – Default Wijzig de Stijlnaam in Gantry – NL Klik op Save as copy Tabblad Menu o zet je een vinkje bij Select a menu en kies daar dan Main Menu Dutch • Tabblad Assignments o Zet je bij Main Menu Dutch een vinkje bij de juiste menu items (bvb. Welkom) • Klik op Save • • • • •
28.8.2 Engels menu Ga naar Templatebeheer Klik op het template Gantry – Default Wijzig de Stijlnaam in Gantry – UK Klik op Save as copy Tabblad Menu o zet je een vinkje bij Select a menu en kies daar dan Main Menu English • Tabblad Assignments o Zet je bij Main Menu English een vinkje bij de juiste menu items (bvb. Welcome) • Klik op Save • • • • •
TIP: Als je van plan bent om een meertalige site op te zetten, is het aangeraden om vanaf het begin de titels van je artikels een extensie te geven. Bvb. Welkom-NL en Welkom-UK. Op deze manier staan dezelfde artikels in een andere taal toch bij elkaar in de artikel lijsten.
28.9 Breadcrumbs aanpassen Je moet nu nog één klein dingetje veranderen als je wilt dat de breadcrumbs correct de startpagina in de juiste taal aangeven. • • • • •
Ga naar Modulebeheer Klik op de module Breadcrumbs Kies bij Positie voor breadcrumb Kies bij Toon start voor Nee Klik op Opslaan en sluiten ! Maak NU een backup met Akeeba en kopieer dit backup bestand naar je PC !
© Carl Maegerman
69/70
Cursus Joomla
PCVO Meetjesland
29 Besluit Indien je alles in deze cursus begrepen hebt, dan ben je nu in staat om Joomla te installeren op je domein en hiermee een volledige website te maken. Het aantal extensies, in jouw website, hangt natuurlijk van jouw behoeften af. Vergeet niet dat je in de Extensions Directory van Joomla http://extensions.joomla.org/ nog vele andere extensies kan vinden. Indien de opmaak van de duizenden templates (gratis of betalend) je niet kan bekoren, dan rest er niets anders dan een HTML editor zoals Dreamweaver te leren. Het gebruik van deze software is moeilijker aan te leren, maar het grote voordeel is dat je alles zelf onder controle hebt (je bent niet afhankelijk van de makers van de extensies) en dat je website een stuk sneller zal zijn. Joomla heeft dan als voordeel dat het sneller aan te leren is en dat je zaken op je website kunt plaatsen (via extensies), waar je in dreamweaver al een vergevorderde webdesigner / developer moet zijn. Anderzijds zal je website stukken trager zal zijn dan een website gemaakt in Dreamweaver. Ik wens je alvast veel succes bij het maken en beheren van je website.
© Carl Maegerman
70/70
