ICT-dag29 mei 2012

Gent

Bruno ParthoensDocent LerarenopleidingKatholieke Hogeschool

Limburg

bruno.parthoens@khlim.be

Joomlavoor

beginners

Tot Joomla 1.5: geen ACL en moeilijke boomstructuur (zie later)Voordelen

Geen secties en categorieën meer maar zelf boomstructuur te bepalen door ontwerperAccess Control List

Joomla 2.5 is long-time release net als de 1.5 (minstens 18 maanden)Ondertussen is Joomla 3.0 uit maar is testversie en geen long-time release (enkel

Joomla 1.6 - 1.7

Joomla easy?

http://www.gratiscursus.behttp://dropbox.com

Emailadres: beginnersjoomla@gmail.comPaswoord: joomla123

Voorbeeld:http://1ict.baso.khlim.behttp://bvl.baso.khlim.behttp://leerplankv.baso.khlim.be/projectburotica

Cursusmateriaal

CMS (Content Managment System): website die volledige klaar is en aanpasbaarAnder bekend voorbeeld: DRUPAL

PHP en MySQL maar geen kennis nodig

Volledig gratis

Wat is Joomla?

Webruimte

Joomla installatiebestanden

FTP-cliënt

Benodigdheden

Offline werken: Je ontwerpt je website lokaal en publiceert achteraf de bestanden naar webruimteHarde schijf (Wampserver nodig op je PC vermits Joomla ontwikkeld is met PHP en een MySQL-database)

http://www.wampserver.comAlle bestanden worden aangemaakt en geïnstalleerd in de map c:\wamp\www\joomlahttp://www.zelfstudie.be (Joomla 1)

Mogelijkheden

USB-stick (USBwebserver nodig)http://www.usbwebserver.comJe maakt je volledige website alzo op je USB-stick of externe harde schijf

Online werken: Je ontwerpt je volledige website rechtstreeks op de webserver

Mogelijkheden

WebruimtePHP ondersteunenMySQL-database aanbiedenInstellingen op de php-database ondersteunenVoorbeelden:

One.comWebreus.nlhttp://www.1freehosting.com/000webhost.com (volledig gratis met cPanel om databases, subdomeinen,… aan te maken)

Benodigdheden

Joomla installatiebestandenhttp://www.joomladownloads.nl/filmpjeMaak een mapje Joomla aan op je harde schijf en pak de bestanden hierin uitWij hebben dit reeds op de usb-stick staan: map joomla 2.5.4

Benodigdheden

FTP-cliëntKopieert je bestanden van je harde schijf naar je webruimte http://filezilla-project.org/download.php (=gratis)Kopieer je installatiebestanden van je harde schijf naar je webruimte. Dit kan vrij lang duren.Filmpje

Benodigdheden

Installatie van Joomla

Twee installatieopties

http://ictdag1.baso.khlim.be/familienaam Gebruikersnaam: ictdag1Database: ictdag1wachtwoord: gent123Geavanceerde instellingen (voorvoegsel uniek maken)

Eén database en één subdomein

Filezilla openenHost = baso.khlim.beGebruikersnaam = ictdag1Wachtwoord = gent123

SnelverbindenOpen rechts httpdocsMaak een nieuwe map aan (familienaam)Kopieer je installatiebestanden van links naar je eigen map rechts

Eén database en één subdomein

Eén database en één subdomein

Filezilla openenHost = baso.khlim.beGebruikersnaam = ictdag2Wachtwoord = gent123

SnelverbindenOpen rechts httpdocsMaak een nieuwe map aan (familienaam)Kopieer je installatiebestanden van links naar je eigen map rechts

Eén database en één subdomein

Joomla configureren

Starten met de Backend

Controlepaneel

Ga naar Frontend

Tabblad Website

Webpagina’s maak je altijd in een ARTIKEL (inhoud)Structuur 1.5:

Opbouw Joomla 2.5

SECTIE

CATEGORIEEN

ARTIKELEN die je dan kan koppelen aan een MENU

Opbouw Joomla 1.6-1.7-…

Subcategorieën

Subsubcategorieën

ARTIKELEN die je dan kan koppelen aan een MENU

Categorieën

STRUCTUUR

Website

Categorie Categorie

SubCategorie SubCategorie SubCategorie SubCategorie

Artikel/pagina

Artikel/pagina

Artikel/paginaArtikel/pagina

Artikel/pagina

Artikel/pagina

Voorpagina

Meerdere categorieënVoorbeeld: site van een krant

Je kan een categorie beveiligen, waardoor de artikelen die hierin staan enkel door leden/klanten bezocht kunnen worden. Bv. je beveiligt de sectie buitenlands voor je leden.Je kan achter één menu-item meerdere artikelen (uit één categorie) tonen in lijstweergave of volledig (blogweergave).

Vanaf 1.7 kan dit ook via Speciale Aritikelen (zie later)

Voorbeeld: nut van Categorieën

Joomla 2.5Speciale Artikelen: je kan zo artikelen over verschillende categorieën

verspreid toch op één pagina (artikel) krijgen

Artikel aanmaken dat op voorpagina zal verschijnen: “Welkom op mijn website over NY” (http://www.lipsum.com)

Artikelenbeheer

Tweede artikel aanmaken dat via menu bereikbaar zal worden.

Categorieën en subcategorieën aanmaken

Waarom? http://leerplankv.baso.khlim.be/projectburotica/administrator/

Filmpje

Opbouw Joomla

DistrictenAlgemeenBezienswaardigheden

Categorieën

Artikelenbeheer

Speciale artikelen kom in het algemeen op de startpagina

Om goed overzicht te bewaren kan je categorie waarin je werkt selecteren.

Bij ieder artikel kan je toegangsniveau instellen. Wie mag dit artikel bekijken?(Login venster = geregistreerd)

Parameterinstellingen

Parameterinstellingen

Menubeheer

Begrip ModulesAlles wat geen inhoud krijgt is een moduleEen module plaats je op een bepaalde positie van je website

Welke posities zijn er in je website?Extensies- TemplatebeheerOpties

Posities kan je bekijken via Frontend door na de URL “index.php?tp=1” te typen.

Een eigen menu ontwerpen

Posities

Artikelen verschijnen standaard op een vaste plaats (centraal). Via deze module kan je bijvoorbeeld tekst op een gewenste positie plaatsenwww.murimpreg.be (premie)

FilmpjeMaak een menu aan via Menubeheer (bovenmenu)Verplaats Home – Bezienswaardigheden van Mainmenu naar BovenmenuMaak het menu-item DistrictenMenu-items Uptown en Downtown onder DistrictenKlik op voorbeeld. Krijg je dit menu te zien?

Een eigen menu ontwerpen

Je moet inderdaad nog de module Menu aanmaken via Extensies-modulebeheer en het menu hier aan koppelen

Een eigen menu ontwerpen

Maak een nieuw Menu aan: Submenu1Maak twee menu-items aan: Brooklyn en SohoMaak een module aan Menu: DowntownGeef een positie (position-07)Ik wil dit submenu enkel zien wanneer ik op Districten-Downtown klik: Hoe doe ik dit?Maak nu Uptown aan!

Een submenu ontwerpen

Wij willen artikelen die verdeeld zijn over verschillende categorieën toch in 1 pagina laten verschijnenWe maken twee categorieën bij: Acties en NieuwtjesIn Acties: artikel “Bloomingdales” (Speciaal)In Nieuwtjes: artikel “Wist je dat ?” (Speciaal)Maak een nieuw menu-item “Interessante info”

Nieuwtjes

Hoofdartikelen: over de gehele breedteIntro-artikelen: staan in kolommen#links: artikelen zullen via een link beschikbaar

gemaakt worden indien nodig

Voorbeeld: ik heb 7 artikelen in totaal op één pagina

0 (hoofd) + 4 (intro) = 4 artikelenEr zijn dus nog 3 artikelen over (7 – 4) die via

links beschikbaar worden

Algemene wijzigingenKies Extensies-Templatebeheer

Je krijgt een aantal templates te zien: Beez20 is standaard voor WEBSITE en Bluestork voor ADMINISTRATIEPANEELKlik op de templatenaamJe kan nu een aantal wijzigingen doorvoeren, zoals het logo wijzigen

Templates

CSS wijzigen CSS is de opmaak van je website, niet de inhoud

Via Filezilla CSS-bestand downloaden en bewerken

Terug uploaden (zie html)

HTML wijzigenIn de voet (footer) staat er Powerd by Joomla

Download index.php vanuit de map templates/beez20Tip: a href staat voor een hyperlink (Joomla), php echo staat voor typOpgepast: Zie dat je de originele html nog ergens bewaart om evt. terug te zetten indien niet gewenst resultaat.

Templates

Kiezen voor een andere templateKies een template uit de lijst

Download een template naar keuze via Extensies-Installeer (opgelet: zorg dat de template geschikt is voor 1.7)http://www.web-garden.be/templates/

http://www.siteground.com/joomla-hosting/joomla-templates.htm

http://www.joomla24.com/

Templates

Templates

Ontwerp zelf een sjabloon en installeer ditMoeilijk?

Ja en Neen?

Ja: Deel 3 Joomla met relatieve div’s werken (vanaf nul opbouwen)

Neen: Aristeer 3.0 (nodig voor Joomla -1.6 of 1.7)

Filmpje

Templates

Aristeer 3.0

Na installatie

Templates

Sla dit sjabloon op als NewYork.artx (alleen maar als je een licentie hebt)Exporteer dit sjabloon als NewYork.zip naar je lokale schijfInstalleer het sjabloon via Extensies-ExtensiebeheerMaak NewYork je standaardsjabloonEn nu?

Posities aanpassen in Modules“Submenu-items tonen” aanvinken (JA)Opmaak van verticaal menu toepassen op submenu

Hoe? Googlen

Na installatie

Templates

Module LoginFilmpje (login)Gebruikersbeheer

Nieuwe gebruiker aanmaken Frontend (login)Nieuwe gebruiker aanmaken Backend (via http://www.joomlaxx.classy.be/administrator)Rechten toekennen aan gebruikers

http://www.zelfstudie.be/cursussen/joomla.php?id=34

Berichten sturen - groepsmail

Login (gebruikers)

Je kan je website voorzien van externe linksFilmpje

Nieuwe categorie maken die links gaat verzamelen (opgepast: geen gewone categorie)Componenten-Weblinks-Categorieën

Nieuwe link toevoegenComponenten-Weblinks-Links

Weblinks toevoegen aan menu

Gebruiker Weblinks laten toevoegen: hoe?Onderscheid Externe link-Wrapper-Weblinks

Weblinks

Breadcrumbs of broodkruimels volgen het pad dat je volgt op een website (hyperlinks)Toevoegen via Modulebeheer (kruimelpad)Plaats is gereserveerd (breadcrumbs)Tip: Home niet tonen !!!

Broodkruimels

Wie is er online?Geeft het aantal bezoekers op een bepaald ogenblik aan

BannersActies aankondigen

Reclame maken

Meest gelezen (welke artikelen?)

Andere zinvolle modules

Joomla breid je uit aan de hand van extensiesEr bestaan enorm vele en zinvolle uitbreidingen: Joomla!extensies op http://www.dutchjoomla.orgOF http://extensions.joomla.orgNiet iedere extensie is geschikt voor iedere versie:

1.0 Native (werkt alleen bij Joomla 1.0.x)1.5 Legacy (is geschreven voor Joomla 1.0.x maar werkt in Legacy Mode ook voor 1.5.x

Via Pluginbeheer

1.5 Native (is geschreven voor Joomla 1.5.x)….

Joomla uitbreiden

PluginsGebruik: in een artikelMoet meestal nog geactiveerd worden na installatieToepassing: Filmpje van New York integreren in een artikel.

AllVideos (link)

ModuleOp een bepaalde positie in je website

Module Weer (link)

Welke uitbreidingen?

ComponentGebruik: meestal koppelen aan menu-item

Foto album 0zioGallery (link)

Uitzonderingen: JCE-editor (link)

Zo kan je je opmaakmogelijkheden in een artikel uitbreiden (tabel, links naar andere artikelen (cfr wikipedia), …)

Backup van je website Akeeba (link)

Welke uitbreidingen?

Nut?Server crashtEen foute component geïnstalleerd waardoor website niet meer werktEen nieuwe domeinruimte voor website met nieuwe database-gebruiker-…

Backup

Akeeba

Ik was op zoek naar een manier om een gallerij van afbeeldingen te plaatsen in een artikelVaak vind je dit toevallig!Op extensie gezocht naar AllVideos om video’s te implementeren

Surf naar http://www.joomlaworks.gr

Hoe vind je een extensie?

Fotoalbum

Download PluginKies Extensies-Installeer

Blader naar het zip-bestand en klik op Upload bestand & installeer

Fotoalbum

Fotoalbum