1. No category

1
Joomla
Versio 1.5 lokakuu 2010
Kirjoittanut Jari Sarja (www.jarisarja.fi)
2
Sisältö
1. Johdanto ................................................................................................................................... 4
2. Asennus omalle koneelle ........................................................................................................ 5
2.1. Wampin asennus............................................................................................................... 5
2.2. Tietokannalle tunnus ja salasana .................................................................................. 13
2.3. Tietokannan luominen..................................................................................................... 15
2.3. Postipalvelin mukaan ...................................................................................................... 18
2.4. Joomlan asentaminen omalle koneelle ......................................................................... 22
3. Asennus palvelimelle esimerkkiartikkeleiden kera ............................................................ 30
4. Ennen kuin aloitamme ........................................................................................................... 38
4.1. Rakenne kuntoon ................................................................................................................ 39
4.2. Joomlan työkalut rakenteeseen............................................................................................ 40
4.3. Uudet osaston luominen ...................................................................................................... 41
4.4. Uuden ryhmän luominen ..................................................................................................... 44
5. Sisältöä sivuille ....................................................................................................................... 47
5.1. Uuden artikkelin luominen .............................................................................................. 47
5.2. Ingressi ja leipäteksti ....................................................................................................... 49
5.3. Editorin toiminnot............................................................................................................. 51
Ylärivin painikkeet................................................................................................................. 51
5.3.1. Laajennettu editori........................................................................................................ 53
5.4. Kuvan lisääminen ............................................................................................................ 54
5.4.1. Kuvan lataaminen Joomlaan ......................................................................................... 57
5.5. Etusivu .............................................................................................................................. 58
5.6. Asetukset ......................................................................................................................... 59
5.6.1. Yleiset asetukset ........................................................................................................... 59
5.6.2 Menun asetukset ............................................................................................................ 61
5.6.3. Artikkelia koskevat asetukset ....................................................................................... 62
5.7. Mediakeskus .................................................................................................................... 63
5.7.1. Kuvan lisääminen mediakeskukseen ............................................................................. 64
5.7.2. Kuvan poistaminen mediakeskuksesta .......................................................................... 65
3
6. Valikot ja navigointi – sivuston ulkoasu hahmottuu................................................................... 66
6.1. Sivun luominen, joka sisältää artikkelin .............................................................................. 66
6.2. Sivun luominen, joka sisältää monta artikkelia blogin tapaan .............................................. 68
6.3. Monitasoisen valikon luominen .......................................................................................... 71
6.4. Sivun titlen muokkaaminen................................................................................................. 73
6.5. Joomlan sisäänrakennetun aloitussivun vaihtaminen ........................................................... 74
6.6. Artikkelin julkaiseminen etusivulla ..................................................................................... 75
6.1.1. Etusivun artikkeleiden järjestys ................................................................................... 76
6. 9. Aloitussivun asetukset ....................................................................................................... 76
7. Käyttäjät ja kirjautuminen ......................................................................................................... 77
7.1. Uuden käytättäjän luominen................................................................................................ 78
7.2. Rekisteröitymisen salliminen tai estäminen ......................................................................... 79
7.3. Ryhmät ja oikeustasot – kuka saa tehdä ja mitä saa tehdä .................................................... 80
7.4. Käyttäjän estäminen............................................................................................................ 82
7.5. Käyttäjäoikeuksien yleiset määritykset................................................................................ 84
7.6. Valikko vain kirjautuneille .................................................................................................. 84
8. Moduulit, komponentit ja lisäosat .............................................................................................. 86
8.1. Moduulit ............................................................................................................................. 86
8.2. Komponentit ....................................................................................................................... 92
8.2.1 Mainosten lisääminen .................................................................................................... 93
8.2. 2. Beardev - urheilutilastointia......................................................................................... 97
8.2.3. Joomleague eli urheilutilastointia ............................................................................... 103
8.2.4 Koodi tekstiin .............................................................................................................. 134
8.3. Suomen kieli mukaan........................................................................................................ 134
9. Templatet eli sivupohjat ......................................................................................................... 137
9.1. Sivupohjan vaihtaminen.................................................................................................... 137
9.2. Oman teeman eli sivupohjan tekeminen ............................................................................ 139
9.3. Templaten paketoiminen ................................................................................................... 155
Verkossa ..................................................................................................................................... 158
Lähteet ........................................................................................................................................ 158
4
1. Johdanto
Joomla on ilmainen, avoimeen lähdekoodiin perustava julkaisujärjestelmä. Ohjelma on
kirjoitettu PHP-koodilla ja tietokantaratkaisuna käytetään ohjelmaa MySQL. Joomlan yksi
ominaisuus on templatet eli sivupohjat, jotka mahdollistavat sivuston ulkoasun muutoksen
yhdellä hiiren klikkauksella. Sivujen päivittäminen on helppoa. Helpoimmillaan se on sitä,
että selaat sivuja ja kun haluat muokata sivua painat kynän kuvaketta ja alat muokata sivua.
Joomlaan on myös saatavilla paljon lisäosia, joiden avulla Joomlasta saa tehtyä vaikka
webkaupan. (Wikipedia.)
Joomla rakentuu kahdesta osasta eli kaikille näkyvästä frontendistä ja vain ylläpitäjille
näkyvästä bcakendistä. Ylläpitäjän kannalta kaikki oleellinen on koottu hallintapaneeliin.
Joomla on myös mahdollistaa säätää niin, että sivuille voi rekisteröityä kuka tahansa.
Kirjautumisen jälkeen näkymät vaihtelevat oikeuksien mukaan eli Joomlassa voi märitellä
erilaisia oikeustasoja. (Wikipedia.)
Nimi Joomla tulee swahilin kielisestä sanasta jumla ja se tarkoittaa "kaikki yhdessä".
Joomla 1.0.x rakentuu Mambon koodiin. Kaikki alkoi kun Mambo julkaistiin 2005.
Mambosta tuli heti suosittu ja se veti puoleensa paljon kehittäjiä ja käyttäjiä. Menestyksen
innoittamana yritys, joka oli vastannut kehityksestä eli Miro International päätti hankkia
ohjelmalle tuotesuojan. (Wikipedia.)
Ohjelman kehittäjien mielestä Miro Internation vei kehitystä väärään suuntaan. Pian
syntyikin vastaliike mm websivuston muodossa eli OpenSourceMatters.Org, josta Joomla
ponnisti kuuluisuuteen. Mambon virallisella foorumilla julkaistiin avoin kirje siitä mitä
Mambolle oli tapahtunut. Avoimen kirjeen seurauksena heti samana päivänä 1000 käyttäjää
rekisteröityi sivustolle OpenSourceMatters. Idea avoimeen lähdekoodin perustuvasta
sisällönhallintajärjestelmästä sai siten vankkaa kannatusta. (Wikipedia.)
Joomlalle ei haluttu mitään merkintöjä kuten “copyright” tai “trademark”. Tai siitähän se
nimi tuli alun perin ”kaikki yhdessä”. Ensimmäinen versio julkaistiin syyskuussa 2005 ja se
oli hyvin samanlainen kuin Mambon sen hetkinen versio. Seuraava versio eli Joomla 1.5
ilmestyi jo kuukauden kuluttua. (Wikipedia.)
Joomla on pärjännyt hyvin avoimen lähdekoodin verkkosovelluksiin erikoistuneen Packt
Publishingin vuotuisessa Open Source CMS Award –kisassa. Yleisöäänestyksen ja
asiantuntijaraadin arvioinnin perusteella Joomla on varteenotettava julkaisujärjestelmä.
Ykköspalkinnon Joomla voitti 2006 ja 2007 sarjassa Open Source Content Management
System.
5
2. Asennus omalle koneelle
Joomlan käyttöön omalla koneella tarvitaan webpalvelin, PHP-tuki ja MYSQL-tietokanta.
Helpoiten noiden asentaminen onnistuu, kun asennetaan WAMP. Applen käyttäjille löytyy
vastaavasti MAMP ja Linuxin käyttäjille LAMP. Tässä ohjeessa asennetaan WAMP, koska
Windows on käyttöjärjestelmänä omassa koneessani.
HUOM!
Macintosh koneissa ei toimi WAMP vaan siellä homman hoitaa MAMP. Netistä löytyy
ohjettaa suomeksi: http://www.joomlaportal.fi/content/view/421/44/
Wampin lisäksi pitää vielä luoda tietokanta ja sille tietokannalle käyttäjä. Sen jälkeen kaikki
on valmista ja voit testailla Joomlaa omalla koneellasi.
2.1. Wampin asennus
Koska kyseessä on tietokantapohjainen julkaisujärjestelmä, tarvitsemme tietokantaa avuksi.
Tarvitsemme myös PHP:n. Helpoiten homma hoituu asentamalla WAMP.
HUOM!
Jos suunnittelet Joomlan asentamista palvelimelle, varmista seuraavat asiat: palvelimella
on php-tuki ja palvelimella on tietokanta käytettävissä. Omalla koneella voit kokeilla
Joomlaa asentamalla WAMP palvelimen, jolloin oma koneesi toimii webpalvelimena.
WAMP on muunnosta LAMPista eli kyseessä on ohjelmistokokonaisuus ja alkukirjain
osoittaa onko käyttöjärjestelmänä Windows vai Linux. Tässä lyhyesti koko paketti
 W tarkoittaa Windowsia
 A tarkoittaa Apace serveriä
 M tarkoittaa MySqlää
 P tarkoittaa PHP:tä
Nykyisin WAMPin asennus on helppoa, koska kaikki osaset eli AMP ovat saatavissa
yhdessä paketissa. WAMP on ilmainen ohjelma ja sitä jaetaan GPL lisenssillä. Asennettuasi
WAMPin pääset tekemään omalla koneella kokonaisia sivustoja ja myös testaamaan niitä.
Et tarvitse webhotellia, kaikki on koneellasi.
WAMPin käyttö on suositeltavaa monestakin syystä. Ehkä painavin syy on, että kannattaa
tehdä virheet omalla koneella. Silloin koko maailma ei huomaa, että sivustosi on ihan
6
sekaisin. Toinen painava syy on, että päästään eroon FTP:n käytöstä. Eli jokaista pientä
muutosta ei tarvitse aina tehdä niin että muutat, jonka jälkeen siirrät ftp:llä tiedoston ja taas
testaat.
HUOM!
Ennen kuin asennat WAMPin, kannattaa sulkea Skype. Sama sitten käytössä, koska
Skype ja WAMP eivät yleensä toimi yhtä aikaa.
Suunnista ensin WAMPin sivuille: http://www.wampserver.com/en/
Valitse Downloads ja viimeisin paketti. Tässä kuvassa viimeisin on heinäkuulta 2009.
Jos lataus ei ala niin paina linkkiä.
7
Mennään suoraan asennukseen eli Run.
Paina seuraavaksi Run.
Paina Next.
8
Hyväksy lisenssiehdot ja paina Next.
Älä vaihda kansiota.
9
Laita ruksit sen mukaan haluatko piikäynnistyspainikkeen ja/tai pikakuvakkeen.
Paina Install painiketta.
10
Valitse oletusselain. Tässä Explorer, koska koneellani ei muuta.
Tällä ei niin kovin väliä. Voit antaa olla kuten kuvassa.
11
Sitten polkaistaan WAMP käyntiin. HUOM! Sammuta Skype viimeistään tässä vaiheessa.
Palomuuri vinkaisee tässä vaiheessa, koska koneellesi asennetaan serveriä. Tällä kertaa ei
kuitenkaan mikään haittaohjelma, joten sallitaan. Katso sen jälkeen alapalkkiasi. Siellä
näkyy uusi kuvake (kellon lähellä oikealla).
12
Suunnista paikkaan http://localhost
Nyt WAMP on asennettu ja se on toiminnassa.
13
2.2. Tietokannalle tunnus ja salasana
Tietokanta on hyvä suoja salasanoin, vaikka ollaankin omalla koneella.
HUOM!
Tämä osio vain edistyneille käyttäjille. On pieni mahdollisuus, että lukitset itsesi
ulos eli Phpmyadmin ei enää toimi.
Laitetaan ensin tietokannan salasana. Valitse ensin phpmyadmin
Siellä tulee ilmoitus (katso sivun alareunaa
Valitse käyttöoikeudet ja sitten root
Laita ruksi ruutuun ja muokkaa käyttöoikeuksia
Valitse lopuksi siirry
Tämän jälkeen avaa tiedosto config.inc.php ja tee muutokset
14
$cfg['Servers'][$i]['password'] = '';
$cfg['Servers'][$i]['password'] = 'salasana';
Toinen muutos
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['auth_type'] = 'cookie';
Tämän jälkeen phpmyadmin vaatii salasanan. Eli käynnistä palvelin uudestaan.
Valitse sitten: http://localhost/phpmyadmin/index.php
15
Tee sama muutos osoitteelle 127.0.0.1
2.3. Tietokannan luominen
Kun kokeilet WAMPia omalla koneella, on sinun luotava ensin tietokanta ja käyttäjä.
Logiikka on erilainen kuin Microsoft Access ohjelmassa, josta käyttäjäoikeudet puuttuvat.
Aloita menemällä osoitteeseen localhost, jolloin samalla tulet tarkistaneeksi, että onko
palvelin käynnissä.
Valitse sieltä phpmyadmin
16
Mikäli olet suojannut mysqln, mikä on suotavaa, laitat ensin tunnuksen ja salasanan.
Seuraavaksi valitset käyttöoikeudet
Sitten ”Lisää uusi käyttäjä”.
17
Laita uudelle käyttäjälle nimi ja salasana. Laita pallukka kohtaan ”Luo samanniminen
tietokanta ja anna kaikki oikeudet”.
Valitse kaikki globaalit käyttöoikeudet
Paina lopuksi painiketta ”Siirry”.
18
2.3. Postipalvelin mukaan
Tämä osio on lähinnä edistyneille käyttäjille, jotka haluavat WAMPista kaiken irti.
Postipalvelintoiminto tarvitaan, jotta voidaan lähettää tietoja s-postiin. Jos esim. pystytät
ylläpitojärjestelmän kuten Joomla ja unohdat salasanasi. Siellä on toiminto "Lähetä salasana
sähköpostiin". Tuo kyseinen toiminto ei kuitenkaan toimi ellei omalla koneellasi ole
sähköpostipalvelinta. Siksi asennamme koneelle sähköpostipalvelimen.
Osoite on: http://glob.com.au/sendmail/
Tallenna zip koneellesi ja pura se kansioon: C:\wampsendmail\
19
Avaa sitten sendmail.ini ja laita smtp-asetukset kohdilleen.
HUOM!
Helpointa on tehdä tili Googleen ja käyttää Googlen smtp:tä postin lähetykseen (k. kuva
yllä).
Kotikoneella joudut selvittelemään mikä on yhteydentarjoajasi smpt. Tässä listaa aiheesta.
 Sonera Internet mail.inet.fi
 Sonera ADSL mail.inet.fi
 Kolumbus smtp.kolumbus.fi
 Elisa ADSL smtp.kolumbus.fi
 Jippii mail.jippii.fi
 Saunalahti posti.saunalahti.fi
 DNA smtp.dnainternet.net
 NIC smtp.nic.fi
 Welho smtp.welho.com
 MB-Net posti.mbnet.fi
 Song Networks smtp.song.fi
20
Tarvitset myös palveluntarjoajan tunnuksen ja salasanan (spostisi tunnukset).
HUOM!
Esimerkissä Googletilini (jari.sarja) ja salasana, joka ei tietenkään oikeasti ole tahasalana.
Sitten php.ini auki
etsi tämä ;sendmail_path =
poista puolipiste alusta ja loppuun lisää eli näin:
sendmail_path = "C:\wampsendmail\sendmail.exe -t"
21
Lopuksi käynnistä palvelin uudestaan.
Seuraavaksi testaamme lomakkeen php koodilla.
<?php
$to = "[email protected]";
$subject = "Terveiset WAMP kurssilta";
$body = "Taitaa toimia?";
$headers = "From: [email protected]\r\n" .
"X-Mailer: php";
if (mail($to, $subject, $body, $headers)) {
echo("<p>Onnistui!</p>");
} else {
echo("<p>Ei toimii...</p>");
}
?>
22
Tee kansio postia ja yllä oleva koodi sinne tiedostoon index.php. Vaihda tiedot, ettei Jarille
tule postia. Sen jälkeen siirry selaimella osoiteriville ja kokeile.
Kaikki toimii, jos teksti Onnistui! Tarkista vielä, että posti tuli perille. Ja kun kaikki toimii,
on oma koneesi täydellinen webpalvelin. Nyt onnistuu myös salasanan lähettäminen
sähköpostiin.
2.4. Joomlan asentaminen omalle koneelle
Joomlan asentaminen onnistuu, jos sinulla on WAMP asennettuna (ks. luku 2.1) ja olet
luonut MYSQL:ään tietokannan sekä sille käyttäjän ja käyttäjälle tunnuksen ja salasanan
(ks.luku 2.2).
Joomlan viimeisin versio löytyy sivuilta: http://www.joomla.org/
23
Käyttöliittymässä lukee oikealla ”Download Joomla”. Napsauta kyseistä kuvaketta. Sen
jälkeen napsautat täyden version linkkiä.
HUOM!
Tietoturvan kannalta on hyvä pysyä ajan tasalla. Yksi keino siihen on tilata tieto
tietoturvapäivityksistä omaan sähköpostiin (ks. kohta Subscribe).
Pura Zip-paketti WAMPin www kansioon. Tässä esimerkissä purku on suoritettu kansioon
joomla.
Mikäli tarvitset tietoa ilmaisohjelmista, joilla zip-paketin purku onnistuu, katso sivua:
http://www.avkymppi.net/wiki/index.php?title=Luokka:Pakkausohjelmat
Vinkki! Erityisen hyvä ohjelma on ilmainen 7zip, joka löytyy osoitteesta:
http://www.7-zip.org/
24
HUOM!
Tekemäsi kansion pitää olla wampissa ja siellä kansiossa www. Vain kansio www on
sellainen, jossa websivustosi toimii.
Kun Joomla on purettu koneellesi, ja se sijaitsee oikeassa paikassa, on aika etsiä kyseinen
paikka selaimen avulla eli osoite on localhost ja tekemäsi kansion nimi.
25
Osoite on tässä tapauksessa localhost/joomla
Sitten ollaankin jo suoraan asennuksessa. Valitse kieleksi suomi ja sitten Next.
Wampissa asetukset ovat kunnossa, joten jatka asennusta painamalla Seuraava.
Lue lisenssi ja paina Seuraava”
26
Sitten on vuorossa tietokannan asetukset.
HUOM!
Tämän materiaalin esimerkissä lukee noihin kohtiin drupal eikä joomla. Loin
myöhemmin myös tunnukset joomla, joomla, joomla.
Sitten jatketaan eteenpäin. Emme tarvitse FTP-ominaisuuksia, koska kyseessä on WAMP.
27
Sitten lähestymme sitä hetkeä, jolloin kaikki on valmista. Laitetaan sivustolle nimi ja
ylläpitäjän tiedot.
Joomla narisee siitä, ettei esimerkkiartikkeleita asenneta.
28
Sitten kaikki onkin valmista ja poistamme asennuskansion.
Sitten pääsetkin ylläpitoon tunnuksia admin ja luomasi salasana.
29
Sivuston osoite on: localhost/joomla/
30
3. Asennus palvelimelle esimerkkiartikkeleiden kera
Tässä luvussa näytetään kuinka Joomla asennetaan www-palvelimelle. Palvelimelta vaaditaan, että
siinä on PHP-tuki sekä MySQL-tietokanta.
HUOM!
Esimerkkiartikkelit ovat yksi keino päästä nopeasti käsiksi toiminnallisuuksiin. Mutta
jos otat sivuston käyttöön, joudut poistamaan suurimman osan artikkeleista.
Suunnistetaan Joomlan sivuille ja otetaan viimeisin versio. http://www.joomla.org/
Tietoturvan osalta kannattaa pysyä ajan tasalla.
31
Sitten ladataan paketti.
Sitten puretaan paketti ja siirretään sisältö palvelimelle FTP-ohjelman avulla.
Tämän jälkeen alkaa asennusvaihe. Siirry selaimella siihen osoitteeseen, jonne siirsit Joomlan
asennustiedostot. Tässä tapauksessa www.janteva.fi/puulaaki
Tämän jälkeen siirryt automaattisesti asennuskansioon ja pääset asennukseen (ks. kuva).
32
Valitse kieleksi Suomi ja jatka painamalla seuraava (oikea yläkulma). Ja kun tiedot ok niin jatka
taas.
33
Seuraavaksi tulee tietoa lisensseistä ja jatkamme eteenpäin.
Seuraavaksi tarvitaan tietokannan tiedot.
34
Sitten jatketaan jälleen.
35
Esimerkkiartikkelit kannatta asentaa.
Sitten jatkuu.
Poista seuraavaksi asennuskansio.
36
Sitten voitkin mennä ylläpitoon.
37
Ja tältä siellä näyttää.
38
4. Ennen kuin aloitamme
Joomlalla tehty sivusto jakaantuu kahteen osaan. Englanniksi nämä kaksi osaa ovat nimeltään
frontend ja backend. Frontend tarkoittaa sitä osaa sivustoa joka näkyy kaikille. Se on se osa, jonka
sivustolla käyvät ihmiset näkevät. Suomeksi frontend olisi etuosa, mutta käännös tuntuu
kömpelöltä. Pysykäämme englanninkielisissä termeissä tai puhutaan pelkästään julkisivusta tai
websivustosta. Backend eli taustaosa on hallinnollinen osa, joka salasanasuojattu. Backend on
tarkoitettu vain sivuston ylläpitäjille. Suomeksi ehkä paras käännös sille osalla on Joomlassa
hallintapaneeli.
Hallintapaneeliin pääset helpoiten kirjoittamalla sivuston nimen perään administrator esim. näin:
www.sinunsivusto.fi/administrator/
Pääset tuonne hallintapaneeliin, jos tiedät tunnuksen ja salasanan.
Hallintapaneelista löytyy sitten kaikki tarvittava sivuston ylläpitoa ajatellen.
39
4.1. Rakenne kuntoon
Websivuston ehkä tärkein ominaisuus on toimiva rakenne. Jos rakenne on alkumetreillä
pielessä, on se vähän samanlainen juttu kuin jos taloa rakennettaisiin huonon perustuksen
päälle. Sellaista sivustoa joutuu jatkuvasti korjailemaan eli siirtämään artikkeleita yhdestä
luokasta toiseen. Siksi suosittelen, että perehdyt artikkeleihin, joita netistä löytyy aiheesta
informaatioarkkitehtuuri.
Kesämökkejä vuokraavan yrityksen sivustorakenne voisi olla tällainen kuin alla olevassa
taulukossa. Jokainen kesämökki muodostaa oman ryhmän, jonka alle tulee joko artikkeleita
tai sivuja.
Siikanen I
Siikanen II
Äkkijärvi
Turniemi
varustus
varustus
varustus
varustus
kuvia
kuvia
kuvia
kuvia
40
4.2. Joomlan työkalut rakenteeseen
Joomlassa on kolme työkalua rakenteen luomista varten: osastot, luokat ja artikkelit. Ylinnä
hierarkiassa ovat osastot, jotka voivat sisältää useita luokkia. Jokaisessa kategoriassa voi olla useita
artikkeleita.
HUOM!
Suomenkieliseen versioon Section manager on käännetty pääryhmien hallinta ja section
manager on käänetty ryhmien hallinta.
Kirjaudu ensin hallintapaneeliin laittamalla sivuston perään /administrator/
Osastojen hallintaan pääset kohdasta ”Section manager”, joko ylävalikosta tai kuvakkeesta.
41
Luokkien hallintaa pääset kohdasta ”category manager”.
4.3. Uudet osaston luominen
Pääryhmien eli osastojen hallintaan pääset kohdasta ”Section manager”, joko ylävalikosta tai
kuvakkeesta.
42
Sitten oikealla ylhäällä napsautat plusmerkkiä (New).
Täytä seuraavaksi kaikki kentät.
43
Muista lopuksi paina tallenna painiketta, jotta muutokset tallentuvat.
Tässä näkymä siitä kuin kaikki pääryhmät on luotu.
44
4.4. Uuden ryhmän luominen
Luokkien eli ryhmien hallintaa pääset kohdasta ”category manager”, joko yläpalkin
alasvetovalikosta tai kuvakkeesta ”Category manager”.
Uuden luokan saat luotua painikkeella New (plus –merkki).
Täydennä kentät.
45
Muista lopuksi tallennus.
Lopputulos tässä esimerkissä näin.
46
47
5. Sisältöä sivuille
Kun Joomla asennetaan ilman esimerkkiartikkeleita, on sivusto täysin tyhjä. Sivuilla ei ole
kerta kaikkiaan mitään muuta kuin otsikko (ks. kuva alla).
Tässä osiossa käydään läpi kaikki mahdollinen sisältöjen luomisesta sivustolle. Toimimme
koko
ajan
hallintapaneelin
kautta.
Kirjaudu
hallintapaneelin
osoitteesta
http://localhost/joomla/administrator/
5.1. Uuden artikkelin luominen
Valitse hallintapaletista ”Add New Article” (ks. kuva).
48
Vaihtoehtoisesti voit valita ylävalikosta ”Content” ja sen jälkeen Article manager. Sitten jälleen se
perinteinen plus –merkki.
Sitten artikkelin perustiedot kuntoon.
Sen jälkeen alkaa kirjoittaminen.
49
Kun kaikki valmista paina tallenna – painiketta.
Vinkki!
Joomlassa on kaksi tapaa tallentaa eli Save (tallenna) ja Apply (toteuta).
Molemmat tallentavat muutoksesi.
Save sulkee avoimen näkymän sen lisäksi, että se suorittaa tallennuksen. Tämä
on kätevä, jos kaikki on valmista ja haluat takaisin hallintapaneeliin.
Aply tallentaa, mutta ei sulje avointa näkymää – siksi se on kätevä, jos esim aiot
kirjoittaa toisenkin artikkelin
5.2. Ingressi ja leipäteksti
Editori toimii samalla tavoin kuin mikä tahansa tekstinkäsittelyohjelma. Käyttöliittymäkin on hyvin
samankaltainen kuin esim. Microsoftin tekstinkäsittelyohjelmissa.
50
Artikkeli voidaan pilkkoa ingressiin ja leipätekstiin. Ingressin jälkeen on linkki ”Lue lisää”. Tämä
on varsin kätevää, jos etusivu on uutissivuston tapainen. Joomla luo ”Lue lisää linkin”
automaattisesti.
Joomlassa on painike ingressiä varten. Painike löytyy sivun alalaidasta ”Read more”.
Kun ingressi on lisätty, näkyy punainen katkoviiva ingressin merkiksi.
Sivustolla näkyy kuten alla.
51
5.3. Editorin toiminnot
joomlan oletuksena on TinyMCE -editori, jonka toiminnot esitten järjestyksessä vasemmasta
yläkulmasta.
Ylärivin painikkeet
Lihavoitu, jonka avulla voit lihavoida tekstin.
Kursivoitu, jonka avulla voit kursivoida tekstin.
Alleviivaus, jonka avulla voit alleviivata tekstin.
Yliviivaus, jonka avulla voit yliviivata tekstin.
Tasaa vasemmalle, jonka avulla tasaat tekstin vasemmalle.
Keskitä, jonka avulla keskität tekstin.
Tasaa oikealle, jonka avulla tasaat tekstin oikealle.
Tasaa molemmat reunat.
52
Styles tarkoittaa sitä, että voit valita esim CSS-luokkia.
Format tarkoittaa mm otsikkotasoja kuten esim H1, H2.
Järjestämätön lista, jonka avulla voit tehdä järjestämättömiä listoja.
Numeroitu lista, jonka avulla voit tehdä numeroituja listoja..
Suurenna sisennystä, jonka avulla suurennat sisennystä
Pienennä sisennystä, jonka avulla pienennät sisennystä
Kumoa, jonka avulla kumoat aiemmin editorilla tehdyn toiminnon.
Tee uudelleen, jonka avulla teet kumotun toiminnon uudelleen.
Lisää tai muokkaa linkki, jonka avulla pääset lisäämään tai muokkaamaan jo olemassa olevaa
linkkiä.
Poista linkki, jonka avulla poistat olemassa olevan linkin.
Lisää ankkuri (sisäinen linkki)
Lisää tai muokkaa kuva, jonka avulla lisäät tai muokkaat jo olemassa olevan kuvan.
Siisti koodi.
Ohje.
HTML-koodi. Pääset muokkaamaan itse koodia.
Vaakasuora viiva.
Poista muotoilu, jonka avulla poistat kaiken muotoilun tekstistä.
Näkymättömät merkit.
53
Alaindeksi.
Yläindeksi.
Lisää erikoismerkki, jonka avulla lisäät tekstiisi erikoismerkkejä.
5.3.1. Laajennettu editori
Editori on varsin puutteellinen,mutta saat siihen helposti lisää ominaisuuksi seuravalla muutoksella.
Saatat esim. tarvita taulukoita.
Valitse Extensions ja sieltä Plugin manager.
Napsauta Editor TinyMce
Muuta nuolella merkatut kohdat.
Tämän jälkeen editorillasi on entistäkin tyylikkäämpi ulkoasu.
54
5.4. Kuvan lisääminen
Kuvan lisääminen tapahtuu siten, että ensin valitaan kuvalle paikka. Sen jälkeen painetaan
painiketta ”Image”, joka löytyy editorin alareunasta.
Kun olet klikannut painiketta ”Image” avautuu ikkuna, jossa voit valita kuvan. Kirjoita kuvalle
ainakin otsikko ja paina lopuksi painiketta ”Insert”.
55
Lopputulos näin.
Kuvaa voi vielä jälkikäteen asemoida editorin kuva –painikkeella. Valitse ensin kuva ja napsauta
kyseistä painiketta. Muutokset tallentuvat painikkeella ”Update”.
56

Image URL tarkoittaa kuvan polkua palvelimella. Älä muuta sitä.

Image description on kuvan kuvaus.

Alignment tarkoittaa kuvan asemointia suhteessa tekstiin

Border tarkoittaa kuvan kehystä pikselinä. Yleensä paras arvo on nolla.

Vertical space tarkoittaa kuvan ja tekstin välistä tyhjää tilaa pystysuunnassa.

Horizontal space tarkoittaa kuvan ja tekstin välistä tilaa vaakasuunnassa.
57
5.4.1. Kuvan lataaminen Joomlaan
Yleensä Joomlassa ei ole valmiina sellaisia kuvia, joita haluaisit käyttää. Silloin joudut tuomaan
kuvan palvelimelle, jotta voisit lisätä sen artikkeliin. Aloita samalla tavalla kuin olisit lisäämässä
kuvan.
Kuvan lisääminen tapahtuu siten, että ensin valitaan kuvalle paikka. Sen jälkeen painetaan
painiketta ”Image”, joka löytyy editorin alareunasta.
Kuvien tuonti sijaitsee avautuvan ikkunan alareunassa.
58

paina painiketta Browse

valitse kuva

paina painiketta ”Start Upload”
Vinkki!
Joomlassa on oletuksena Tinymce –editori, joka on mainio WYSIWYG editori.
Kuvien käsittelyn kannalta kyseinen editori ei ole mitenkään erikoinen. Usein
editorina käytetäänkin JCE:tä, joka on paremmin integroitu Joomlaan kuin Tinymce.
JCE:llä kuvien muokkaus onnistuu suoraan lennosta.
5.5. Etusivu
Mikäli haluat, että artikkelin ingressi näkyy etusivulla, napsautat punaista pallukkaa kohdassa
”Front page”.
59
Tämän jälkeen pallukka on muuttunut vihreäksi oikein merkiksi.
5.6. Asetukset
Jokaiselle artikkelille on olemassa suuri joukko asetuksia, joita voit säätää. Voit esim.
päättää näkyykö kirjoittajan nimi, näkyykö tulostuspainikkeen ikoni ja pdf –versio.
5.6.1. Yleiset asetukset
Yleiset asetukset koskevat kaikkia artikkeleita.
Valitse ensin ”Article Manager”
Valitse sen jälkeen painike ”Parameters”.
Sieltä avautuu ikkuna.
60
Tee tarvittavat muutokset ja paina ”Save”.

Show unauthorised links = näytä hyväksymättömät linkit (kannattaa olla no).

Show article title = näytä artikkelin otsikko

Title linkable = otsikko linkitettävissä

Show intro text = näytä ingressi

Section name = osasto nimi (piilota / näytä)

Section Tisle Linkable = Osaston otsikko linkitettävissä

Category title = Luokan title (piilota / näytä)

Category Title Linkable = luokan otsikko linkitettävissä

Author name = Kirjoittajan nimi

Created Date and Time = artikkelin luontipäivämäärä ja kellonaika (piilota / näytä)

Modified date and Time = artikkelin muutospäivämäärä ja kellonaika (piilota / näytä)
61

Show Navigation = Näytä navigaatio

Read more… = Lue lisää –linkki

Article Rating/Voting = Artikkelin arviointi/äänestys

Icons = ikonit

PDF icon = PDF painike

Print icon = tulosta painike

E-mail icon = sähköpostipainike

Hits = osumat
5.6.2 Menun asetukset
Yleiset asetukset voidaan ylittää laittamalla menulle omat asetukset. kaikki artikkelit menun alla
saavat uudet asetukset, jotka ylittävät yliset asetukset.
Valitse Menus ja sieltä ”Main menu”.
Napsuta Home
Tämän jälkeen asetukset ovat muutettavissa oikealta.
62
5.6.3. Artikkelia koskevat asetukset
Yksittäinen artikkeli voi myös ylittää kaikki muut asetukset. Valitse article manager ja sieltä
artikkeli.
Asetukset näkyvät oikealla.
63
5.7. Mediakeskus
Mediakeskus on paikka, jonne lisätään erilaisia tiedostoja kuten esim. kuvia, jotta niitä voisi liittää
artikkeleihin.
Mediakeskus löytyy ylävalikosta kohdasta site eli ensimmäinen vasemmalta. Se löytyy myös
hallintapaneelin pääsivulta.
64
5.7.1. Kuvan lisääminen mediakeskukseen
Kuvat kannattaa sijoittaa kansioihin, joten luomme kansion nimeltä siikanen1.
Kuvan lisäyksen osalta valitaan ensin kansio.
Valitse kansio.
65
.

paina painiketta Browse

valitse kuva

paina painiketta ”Start Upload”
5.7.2. Kuvan poistaminen mediakeskuksesta
Joskus tulee vääriä kuvia. Poistaminen on helppoa. valitset kansion ja kuvan kohdalla painat
punaista pallukkaa, jonka sisällä on ruksi.
66
6. Valikot ja navigointi – sivuston ulkoasu hahmottuu
Joomlalla luotu sivusto on aina kaksijakoinen. On olemassa sisäinen rakenne, jonka luot
itsesi varten, jotta kaikki olisi järjestyksessä. Tämä luomasi rakenne ei näy automaattisesti
websivuston vierailijoille, jotka katselevat sivuja. Ulkoasun osalta on rakennettava valikot
eli navigaatio – siinä astuvat menut kuvaan.
Joomlassa voi olla useita menuja, mutta oletusarvoisesti siellä on vain Main menu eli
päämenu. Kun lisäät artikkeleita päämenun alle, muodostat sivustolle uusia sivuja.
6.1. Sivun luominen, joka sisältää artikkelin
Kun haluat luoda navigaatioon uuden sivun toimit seuraavan neljän kohdan mukaisesti.
1. Menus -> Main menu
2. Napsauta ikonia uusi (oikealla)
67
3. Valitse Internal link – Articles - > Article -> Article layout
4. Täydennä tiedot
5. Valitse artikkeli
68
6. Valitse preview
7. Ja tältä se näyttää
6.2. Sivun luominen, joka sisältää monta artikkelia blogin tapaan
Kappaleessa 6.1. valitsimme yhden artikkelin, joka avautuu sivulle painettaessa linkkiä. Joskus
saatamme tarvita toimintoa, jolla navigointi napsauttamalla avautuukin monta artikkelia – eli se on
blogi.
Kun haluat luoda sivustolle blogin toimit seuraavan kaavan mukaisesti.
1. Menus -> Main menu
69
2. Napsauta ikonia uusi (oikealla)
3. Valitse Internal link – Articles - > Category -> category Blog layout
70
4. Täydennä tiedot
71
5. Valitse luokka, josta blogin artikkelit otetaan sivuille. Laita myös palstojen määrä eli kuinka
monta palstaa blogissasi on.
6.3. Monitasoisen valikon luominen
1. Valitse Menus -> Menu manager
2. Valitse ”Menu items”
72
3. Valitse New
4. Valitse ”Article Layout”
5. Valitse minkä valikon alle tulee valikko
73
6. Valitse artikkeli ja tallenna. Sitten katsomaan lopputulosta.
7. Hallintapaneelissa sama näkyy näin
6.4. Sivun titlen muokkaaminen
Sivun titleä voi joskus olla syytä muuttaa. Tee silloin seuraavan kaavan mukaisesti.
1. Valitse Menus -> Main menu
2. Valitse artikkeli
74
3. Valitse oikealta Prameters (System) ja Page Title ja kirjoita siihen uusi title
4. Näin se näkyy sivustolla
6.5. Joomlan sisäänrakennetun aloitussivun vaihtaminen
Joomlassa on etusivu valmiina, mutta sitä voit muokata.
1. Valitse ”Menus” ja sitten ”Main menu”
2. Napsauta sivua, jonka haluat etusivuksi
75
3. Napsauta tähteä
4. Nyt sinulla on uusi etusivu
6.6. Artikkelin julkaiseminen etusivulla
Joomlaan on rakennettu sisään toiminto, jolla voit poimia etusivulle erilaisia juttuja kuten esim.
artikkeleiden ingressejä.
1. Valitse Content ja Article Manager
2. Napsauta punaista pallukkaa
76
6.1.1. Etusivun artikkeleiden järjestys
Etusivulle valittujen artikkelien järjestystä muutat numeroilla. Esim. tässä Siikanen I on
ensimmäisenä ja Siikanen II vasta toisena.
6. 9. Aloitussivun asetukset
1. Valitse Menus ja Main menu
2. Valitse aloitussivu (merkattu tähdellä)
3. Voit laittaa artikkelit järjestykseen siten, että uusin on aina ensin
77
Mikäli haluat artikkelit yhteen palstaan vaihdat numeroksi 1.
Sivun titlen saa pois ja sen saa muokattua sellaiseksi kuin haluaa.
.
78
7. Käyttäjät ja kirjautuminen
Joomlassa on alusta saakka ollut tuki käyttäjähallinnalle kaikkine herkkuineen kuten:

rekisteröinti

tilin vahvistaminen s-postilla (vapaaehtoinen)

kirjautuminen (muista minut toiminnolla)

unohdetun salasanan palauttaminen

käyttäjien estäminen
7.1. Uuden käytättäjän luominen
1. Valitse User manager
2. Valitse New
79
3. Täydennä tiedot
4. Tallenna
7.2. Rekisteröitymisen salliminen tai estäminen
1. Valitse yleiset asetukset
80
2. Valitse system
3. Muuta kohtaa Allow user registration
4. Muista tallennus
Mikäli haluat, että käyttäjän täytyy vahvistaa s-postiosoitteensa, teet sen kohdasta “New User
Account Activation”.
7.3. Ryhmät ja oikeustasot – kuka saa tehdä ja mitä saa tehdä
Joomlassa on valmiina erialiaisa käyttäjäryhmiä, joille on määritelty oikeustasoja. Et voi lisätä uusia
oikeuksia tai muuttaa entisiä. Pakki noudattaa valmista kaavaa.
Oikeustasot näkyvät alla olevassa kuvassa sekä englanniksi että suomeksi
81
Oikeustasot on jaettu Frontendiin ja Backendiin. Frontend on julkinen kaikille, mutta Backend on
aina suljettu. Oikeustasot menevät siten, että kuvassa alin taso on ylinnä ja alapuolella on aina
samat oikeudet kuin yllä ja sen lisäksi lisää oikeuksia.
Frontend-ryhmät – kaikki paitsi vierailijat voivat kirjautua

Public Frontend (sivuilla vierailevat käyttäjät, joilla ei ole tiliä)

Registered (alin oikeustaso rekisteröityneille käyttäjille)

Author (voi luoda uutta sisältöä ja ehdottaa aloitus ja loppumispäiviä julkaisuille, mutta ei
voi itse aktivoida sisältöä. Voi muokata omaa artikkelia, kun se on julkaistu.

Editor (sama kuin Author, mutta hän voi muokata myös muiden kirjoittamia artikkeleita,
jotka on julkaistu)

Publisher (saama kuin editor, mutta hän pystyy itse hyväksymään kirjoituksensa)
Backend-ryhmät – voivat kirjautua myös Frontendiin

Public backend (kaikille, joilla on tunnukset)

manager (sama kuin Publisher, mutta hän pääsee myös hallintapaneeliin). Ei voi vaikuttaa
ulkoasuun tai lisukkeisiin kuten esim. komponentit.

Administrator (sama kuin manager, mutta voi vaikuttaa myös ulkoasuun ja hän voi asentaa
uusia lisukkeita ja luoda uusia käyttäjiä

Superuser (kaikki oikeudet mitä Joomla tarjoaa – vain toinen Superuser pystyy luomaan
Superuserin oikeustason.)
Voit muuttaa oikeuksia valitsemalla “User Manager”
Sitten valitset käyttäjän.
82
Sitten Edit
Ja lopuksi muutokset
Muista lopuksi tallennus
7.4. Käyttäjän estäminen
Joskus voi olla tarpeen estää häiriköltä pääsyy tekemään tuhoja. Esim. keskusteluryhmän häirikkö.
Valitse “User Manager”
83
Sitten valitset käyttäjän.
Sitten Edit
Ja lopuksi muutokset eli Block User on Yes.
Muista vielä tallennus
Vinkki!
Joomla 1.6 versiossa voit luoda omia käyttäjähallintatasoja. Nyt on tyydyttävä
siihen mitä on tai löydettävä sopiva lisukkeita kuten JACLPlus, Jfusion tai JUGA
84
7.5. Käyttäjäoikeuksien yleiset määritykset
Voit antaa käyttäjille automaattisesti tietynlaiset oikeukset.
1. Valitse Global configuration
2. valitse välilehti System
3. valitse sopivat oikeudet
4. tallenna muutokset
7.6. Valikko vain kirjautuneille
Ei kirjautuneilta käyttäjiltä voidaan piilottaa toimintoja, koska he eivät näe edes valikkoa.
1. valitse main menu
85
2. Tee valinta
3. Tee muutokset
Public = kaikille
Registered = vain rekisteröityneille
Special = ne, joilla on oikeus hallintapaneeliin
4. Muista tallennus
86
8. Moduulit, komponentit ja lisäosat
Joomlaa pystyy laajentamaan kolmella eri tavalla. Moduulit näyttävät sisältöä – ne ovat
usein kytköksissä komponentteihin. Yleensä moduulit soitetaan yläpalkkiin, sivupalkkiin tai
alapalkkiin. Komponentti tuo peliin uutta toiminnallisuutta, jota entuudestaan ei ole.
8.1. Moduulit
Moduulit sisältävät tietoa ja sitä tietoa voidaan näyttää usealla sivulla. Moduulit voivat
sisältää periaatteessa ihan mitä tahansa. Tavallisia moduuleja ovat:
 Valikko (mod_mainmenu)
 Kirjaudu (mod_login)
 Uusimmat uutiset (mod_latestnews).
 Äänestys (mod_poll)
‘Alla olevassa kuvassa on Kirjaudu moduuli
Hallintapaneelista moduulit löytyvät kohdasta Extensions -> Module manager
87
Valitse Administrator
Siellä ne ovat
Voit lisätä uuden moduulin plus merkistä. Lisätään se nyt sivustolle (Valitse Site).
Valitse Uusi
Valitaan moduuli eli tällä kertaa Costom HTML
88
Sitten next
Täydennä tiedot
Vaihda HTML näkymään ja syötä koodi
<script
src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
89
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('jarimatti').start();
</script>
90
Tallenna muutokset ja katso lopputulos.
Vinkki!
Moduulilla Custom HTML voit liittää sivuille toiminnallisuutta muualta eli lisätä
siihen widgettejä Tässä esimerkissä haettiin Jari Sarjan Twitter viestit. Twitterin
wigetit löytyvät osoitteesta: http://twitter.com/goodies/widgets.
Moduulin sijaintia muutat kohdasta Details
91
Nyt sivusto näyttää entisäkin paremmalta.
Mikäli haluat, että Twitter päivitykset näkyvät vain yhdellä sivulla teet näin kuten kuvassa.
92
Nyt Twitter näkyy ainoastaan sivulla Siikanen I
8.2. Komponentit
Joomlan yksi hyvä puoli on laaja valikoima erilaisia lisäohjelmia eli komponetteja, tai
pluginiä, tai lisäkkeitä – rakkaalla lapsella on monta nimeä.
Lisäosia kannattaa etsiä seuraavista paikoista:
 http://www.waterandstone.com/open-source-cms-resources/articles/50-top-joomlaextensions
 http://www.joomlaport.com/10-Free-Joomla-Extensions-I-Can-t-Live-Without.html
 Joomlan sivuilta haksunalla JED (Joomla Extension Directory).
Joomlassa on valmiina seuraavat komponentit
 Mainokset (banners) - mainosten hallintaan.
 Yhteystiedot - yhteystietorekisteri
 Uutiset – rss uutiset
 Äänestykset - äänestysten järjestäminen.
 Etsi - tutki millä hakusanoilla etsitään teitoa
 Linkit - linkkien hallinta
93
8.2.1 Mainosten lisääminen
Mainokset lisätään vaiheittan. Ensin pitää syöttää perustiedot mainostajasta.
Valitse banner ja clients
Valitse uusi
Syötä tiedot
Muista tallennus. Sen jälkeen lisätään luokka.
Valitse uusi
94
Täydennä tiedot.
Muista tallennus.
Sitten onkin aika lisätä itse mainos valisemalla Components -> Banner -> bBnners
Valitse uusi
95
Tee muutokset ja tallenna.
Laita lopuksi näkymään sivuilla. Valitse Extensions ja mModule manager. Valitse siellä
uusi.
Napsauta banner ja Next
96
Syötä tiedot ja muista talennus
Ja sitten mainos on sivuilla.
97
8.2. 2. Beardev - urheilutilastointia
Urheilua varten kätevä on Beardev
Tallenna koneellesi ja sitten verkossa näin.
Valitse paketti ja suorita asennus.
Tämän jälkeen uusi lisäosa näkyy valikossa kohdassa ”Components”.
98
Seuraavaksi luodaan turnaus. Tämä pitää luoda ja litan nimeksi jalkapallo.
Seuraavaksi luodaan kausi.
99
Kas näin kuten alla. HUOM! valitse Turnaus alasvetovalikosta.
100
Kohdasta Teams voit luoda joukkueet.
Sitten laitetaan joukkueet paikoilleen.
101
Pelipäivät ovat sitten haasteellisempi juttu.
102
HUOM! Oikealla pitää suorittaa valinta.
Sitten vaan pelit kasaan.
103
Lopputoloksen voit katso sivuilta: http://www.janteva.fi/puulaaki/
8.2.3. Joomleague eli urheilutilastointia
Joomlegue on hyvin monipuolinen pallopelien tilastointiohjelma. Alun perin se on tehty jalakapllon
tilastointia varten, mutta myöhemmin siihen on tllut mukaan lisää piirteitä ja ominaisuuksia.
Joomleague löydät sivuilta:
http://joomleague.net/
Tee sivuille tunnus ja kirjaudu sisään niin pääset imuroimaan Joomleguen asennuspaketin.
Valitse valikosta kohta ”Downloads”.
Vaihda kieli englanniksi.
Sivun alareunasta löytyy linkki, jota pitää napsauttaa.
104
Sitten löytyy varsinainen asennuspaketti.
Sieltä napataan se Zip-paketti.
Tavallisesti komponentit asenetaan menemällä kohtaan Extensions ja Install.
Selataan paketti kohdalleen ja painetaan Upload File & install.
105
Yleensä tuo ei onnistu, joten on käytettävä toista tapaa. Pura zip-paketti ja siirrä se kansioon
components.
Mene sen jälkeen kohtaan Extension ja Install ja valitse kohta Install from directory.
Paina painiketta ”Intstall” – kohta saat tiedot onnistumisesta.
106
Kun Joomleague on asennettu löydät sen kohdasta Components.
Joomleaguen aloitussivu on tällainen kuten alla. Jo luodut projektit näkyvät oikealla ja kaikki muu
vasemmalla.
Jo luotuihin projektihin pääsee alasvetovalikon kautta tai napsuattamalla projektin nimeä oikealla.
107
Projects
Joomleaguen idea on, että kaikkein ylinnä on projekti. Sen alla on liiga ja kausi. Esimerkiksi
jääkiekon osalta voisi olla projektina jääkiekko, jonka alla olisi SM-liiga ja sitten divari, kakkonen
jne.
MAH, jota tässä käytetään esimerkkinä on pilkottu lajeihin eli on MAHL-jääkiekko ja on MAHLjalkapallo.
Projektille voidaan luoda lukuisa määrä asetuksia. Tärkein asetus koskee pisteitä eli montako
pistettä voittajalle jne.
108
HUOM!
Projekti toimii siten, että vain yksi liiga ja yksi kausi on aktiivinen – yleensä se uusin kausi ja
liiga.
Sports Types
Joomleague sopii lajiin kuin lajiin. Siksi on olemassa erilline kohta, jossa luodaan laji.
Uusi laji luodaan painikkeella “New”.
109
Leagues
Leagues tarkoittaa pelattavaa liigaa kuten esim jalkapallossa Veikkausliika, ykkönen, kakkonen jne.
Seasons
110
Season tarkoittaa pelattavaa kautta ja kausi voi olla esim 2010 tai tyyliin 2010-2011 kuten esim.
jääkiekkossa on tapana.
Ja uuden kauden (New) luot plusmerkistä (oikealla ylhäällä).
Clubs
Clubs tarkoittaa seuraa eli se on eri juttu kuin joukkue.
Seuran asetuksiin pääset napsauttamalla kynän kuvaketta. Voit mm laittaa sinne joukkueen
peliasun. kohtaan logo small
111
Teams
Teams tarkoittaa joukkuetta ja joukkue kuuluu aina jonkun seuuran alle. Sikäli tama on kätevää, että
jos Seura on mukana useassa lajissa niin logot ja perustiedot saa helposti eli ai tarvitse joka kohtaan
niitä kirjoittaa tai muuttaa.
Persons
Tähän osalstoon luodaan pelaajat, tuomarit jne.
Uuden pelaajan lisäät plus merkistä.
112
Voit lisätä pelaajaan suoraan projektiin ja joukkueeseen kohdasta “Select Project and team”.
Events
Events tarkoittaa pelitapahtumaa kuten esim maalia ja jäähyä.
Taphtuman asetuksiin pääset kynän kuvasta. tapahtumalle valitaan laji ja ikoni esim maali voi olla
pallo, mutta jääkiekossa kiekon kuva.
113
HUOM! Events tarkoittaa ottelutapahtumia. Niiden pohjalta ei synny
automaattisesti tilastoja. Esim. jalisottelussa voi olla tapahtumia kuten kulma,
vapaapotku, joita ei edes tilastoida pelaajakohtaisesti. Mutta otteluraportti näistä
syntyy.
Statitics
Täällä ovat tilastot eli saat maalivahdille torjuntaprosentin ja pelaajille pisteet.
114
Tältä se näyttää, kun siellä on jotakin valmista.
Maalien osalta juttu toimii näin kuten alla.
Pisteet eli malit ja syötöt yhteenlaskettuna on hankalampi juttu eli näin.
115
ID:t saat selville oikealta siinä päänäkymässä.
116
Maalivahdin torjunnat näin.
laukaukset
torjunnat
117
torjuntaprosentti
Positions
Positions tarkoittaa pelipaikkaa. Tiedään kuka on maalissa ja toisaalta voidaan tehdä pakeille oma
pistepörssi.
Ja tältä se näyttää. kun jotain valmista.
118
Uuden pelipaikan luot painikkeella plus ja entisiä muokkaat kynä painikkeella. Tässä alla
jääkiekkomaalivahdin asetukset.
Position events eli pelin aikana maalivati voi saada jäähyn. Hän voi myös antaa syötön tai jopa
tehdä maalin. Tilastojen kannalta on monimutakisempaa, koska tilastoidaan myös torjuntaprosentti,
jota varten lasketaan laukaukset ja torjunnat. Lisäksi maalivahdille lasketaan myös pisteet.
119
Päätuomarin osalta näkymä on erilainen. Päätuomarille ei ole pistepörssiä tai jäähyjä.
Venue
Venue tarkoittaa pelipaikkaa.
Pelien syöttäminen
Aloita päänäkymästä valitemalla projekti.
120
Valtse Matchdays
Lopuksi kohta Edit matches.
Siellä valitaan pelipäivä ja kellonaika.
Sitten valitaan joukkueet.
121
Pelaajien, joka on jo kannassa, syöttäminen projektiin ja joukkueeseen
Jos pelaaja on entuudestaan kaannassa tarvitsee hänet lisätä pelattavaan sarjaan eli projektiin.
Valitse projeki ja feature teams
Napsauta joukkueen kohdalla olevaa kuvaketta.
Valitse assign players.
Ruksita pelaaja ja paina Save.
122
8.2.3.1. Joomleague esimerkkinä MAHL
Luodaan ensiksi Jääkiekkoa varten pohjat. Tarvitse kausimäärittelyt. Valitse Seasions
Sitten New.
Syötä tiedot.
Muista tallennus. Lopputulos kutakuinkin näin kuten alla.
Seuraavaksi laitamme lajiksi jääkiekko.
123
Lisäykset samalla kaavalla kuin em esimerkissä. Lopputulos vaikka näin kuten alla.
HUOM! Nimien ei ole pakko olla englanniksi. Meni sillä kaavalla, koska Soccer oli
valmiina.
Kun kaudet on luotu ja on vielä määritelty lahit voidaan luoda ensimmäinen projekti. Valitse
”Projects” ja sen jälkeen New.
Sitten tiedot paikoilleen.
124
Ja toisella puoellla lisää.
125
Paina lopuksi tallenna.
Valitse seuraavaksi events.
126
Lisätään sinne pelitapahtumat.
HUOM! Kohta Sports type on tärkeä. Valitse oikein, esim tässä lajina jääkiekko.
Kun valmista niin näin.
Seuraavaksi luomme tilastot.
Laitamme näin kuten kuvassa ja tallennus (apply).
127
Tallennusksen jälkeen pääset märittelemäänmitä lasketaan yhteen. Tässä tapauksessa lasketaan
kaikki maallit tapahtumista ja otetaan mukaan myös yv ja av maalit.
Sitten valitaan positions.
128
Ja New.
Sitten kirjoitetaan tiedot ja valitaan mitä pelaaja voi tehdä ja mitä tilastoidaan.
129
Seuraavaksi luodaan seurart ja joukkueet. Kätevintä on luoda seura ja ruksi ruutuun, jotta saadaan
joukkue myös.
Sitten joukke on liitettävä projektiin.
130
Valitse projekti ja kohta teams
Valiitse aasign
Siirrä joukkueet oikealta vasemmalle.
Sitten luodaan pelaajat.
131
Liitä pelaaja projektiin.
Valitse projekti ja Matcdays
Syötä pelit
132
Lisää pelaajat joukkueisiin.
Sitten lisätään projektille pelipaikat.
133
Ja näinhän siinä käy.
Ja siki pelaajalle ei voi myöskään valita pelipaikkaa.
Ongelmana on luultvasti ettei kohtaa positions ole julkaistu.
134
8.2.4 Koodi tekstiin
Kirjoitettassa opasta syntyy ongelmia koodin suhtee. Kijoitatpa miten tahansa esim <b>lihavoi</b>
niin selimessa koodeja ei näy. Ihan sama kirjoitatko koodiin vai vedätkö editorilla. Tähän
raivostuttavaan ongelmaan löytyy ratkaisu. Merkkaa tyyliksi koodi eli ei esim esimuotoiltu teksti.
Jos haluat kirjoittaa PHP –koodia editorilla, voit tehdä sen ohjelmalla Souccer. Asenna siis
Sourcerer, joka löytyy alla olevasta osoitteesta
http://www.nonumber.nl/extensions/sourcerer
8.3. Suomen kieli mukaan
Suomenkileiset asennuspaketit löytyvät Joomlan suomenkielisiltä sivuilta.
Älä pura Zip-pakettia vaan asenna se.
135
Ota kieli käyttöön
136
Se tähti löytyy oikealta ylhäältä. Ensin ruksi ympyrään Finnish ja sitten klikkaat tähetä.
Tee sama juttu toiselle kielipaketille eli tämä on hallintapaneelin käännös.
Valitse välilehti manager (tässä kännös näkyy jo – kuva alla).
137
9. Templatet eli sivupohjat
Joomlan ulkoasu määräytyy sivupohjan eli templaten avulla. Sivupohjaan liitetään kuvat, css ja
toiminnallisuudet. Sivupohjan etuna on, että voit nopeasti vaihtaa ulkoasun koko sivustolle. Lisäksi
voi löytää paljon ilmaisia sivupohjia käytettäväksi.
Ilmaisia sivupohja

http://www.siteground.com/joomla-hosting/joomla15-templates.htm

http://www.joomlashack.com/free-joomla-template

http://www.funky-visions.de/joomla-templates.htm

http://www.joomlaos.de/joomla_template_galerie.htm

http://www.joomla24.com
Maksullisia sivupohjia

http://www.cmslounge.com

http://www.joomla-templates.com

http://www.joomlashack.com/

http://www.yootheme.com/
9.1. Sivupohjan vaihtaminen
Lataa teema palvelimelle kansioon templates.
138
Valitse ylläpidossa ”Template manager”
Valitse ensin teema laittamalla pallukka kohdalleen.
Sen jälkee napsauta tähteä.
139
Lopputulos näin eli tempalte nimeltä jomla on valittuna. Katso tähti oikealla kohdassa
”Default”.
Voit käydä sivuilla katomassa kuinka muutos on toteutunut.
9.2. Oman teeman eli sivupohjan tekeminen
.
Löydät Joomlan oletusteeman kansiosta templates kansion nimellä rhuk_milkway. Polku
kansioon on: (wamp/www/joomla/templates)
140
Kansiosta löytyvät seuraavat osat: css kansio, joka sisältää sivuston CSS-tiedostot. Kansio
html, joka sisältää PHP-tiedostoja Kansiossa images on sivuphjan graafiset elementit.
Tärkein tiedosto on index.php. Sitten siinä on mukana mm sivuston favicon.
Template tarvitsee toimiakseen minimissään vain kaksi tiedostoa


index.php
templateDetails.xml
Ensimmäinen – index.php – sisältää kaiken tiedon sivun rakenteesta, ulkoasusta ja
toiminnallisuudesta. Toinen tiedosto eli templateDetails.xml sisältää tietoa Joomlaa varten.
Siellä on mm templaten nimi, käytettävät tiedostot, kuvat jne.
Seuraavien kymmenen kohdan avulla rakennat itsellesi yksinkertaisen CSS-pohjaisen
template. Esimerkkiä rakennetaan WAMPissa, joten polut tulevat sieltä.
141
Vaihe 1. Luo uusi kansio, jonne sijoitat uuden sivupohjan.
Uuden sivupohjan nimeksi tulee Mouhu siksi kansion nimi mouhu. Kaiken varalta isot
kirjaimet ja ääkköset pois. Kansio sijaitsee siellä missä Joomlan templatet eli tässä
tapauksessa www – joomla – templates.
Vaihe 2. Muokkaa templateDetails.xml alla olevan mallin mukaisesti ja sijoita se kanioon mouhu.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mouhu</name>
<creationDate>4-08-2010</creationDate>
<author>Jari sarja</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.jarisarja.fi</authorUrl>
<copyright>Jari Sarja 2010</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Mouhun kesämökit</description>
142
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/tyyli.css</filename>
<filename>images/ylapalkki.gif</filename>
<filename>images/navi.gif</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
143
Vaihe 3. Luo kansiot css ja images
Kansioon css tulee käytettävä CSS-tyyli ja kansioon images sijoitetaan kuvat. Tässä
vaiheessa riittää kuitenkin, että kansiot luodaan.
Vaihe 4. Luo tiedosto index.php ja kirjoita sinne seuraava koodi
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo
$this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/mouhu/css/template.css" type="text/css" />
</head>
144
Tuossa estetään ensiksi, ettei kukaan voi selaimen kautta hakea
kyseistä tiedostoa. Sitten tulee HTML-määrittelyt ja
kileimäärittelyt. Head –osiossa täkeä kohta on <jdoc:include
type="head" />, koska se hakee mm titlen. Loppu onkin sitten
CSS:ää Joomlaa vraten (kaksi ekaa) ja sitten varsinainen CSS.
Vaihe 5. Haetaan sisältö tietokannasta eli se sisältö mitä Joomlassa muokataan.
Edelleenkin muoktaan index.php –tiedostoa. Laitetaan body tagit paikoilleen ja haetaan
sisältö. Sisällön hakemiseen tarvitaan koodi: <jdoc:include type="component" />
<body>
<jdoc:include type="component" />
</body>
</html>
Vaihe 6. Kokeile miltä sivustosi näyttää eli vaihda template.
145
Tarkemmin templaten vaihtoa on kuvattu kappaleesa 9. Templatet eli sivupohjat.
Vaihe 7. Lisätään toiminnallisuutta
Toiminnallisia osio määrittelimme jo aimemmin (templateDetails.xml) eli mitä aiomm käyttä.
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
146
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
Otetaan vasen valikko käyttöön, jolloin index.php on muotoa kuten alla.
<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
</body>
</html>
Laitetaan myös sivulle alaosa.
Valitse New ja footer
147
Sivuilla on nyt myös alaosa.
Vaihe 8. Laita index.php rakenne kuntoon
index.php
Tässä vaiheessa index.php näin kuten alla eli siinä on rakenne paikoillaan ja on haettu myös
titlen tiedot.
148
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php
$this->language; ?>" lang="<?php echo $this->language; ?>" >
echo
<head>
<jdoc:include type="head" />
<link
rel="stylesheet"
href="<?php
echo
$this->baseurl
?>/templates/system/css/system.css" type="text/css" />
<link
rel="stylesheet"
href="<?php
echo
$this->baseurl
?>/templates/system/css/general.css" type="text/css" />
<link
rel="stylesheet"
href="<?php
echo
$this->baseurl
?>/templates/mouhu/css/template.css" type="text/css" />
</head>
<body>
</head>
<body id="etusivu">
<div id="centrering">
<div id="kolumncontainer">
<div id="sidhuvud"></div>
<div id="navi">
149
<div class="menu">
<jdoc:include type="modules" name="top" />
</div></div>
<div id="kolumn1"><div class="teksti">
<jdoc:include type="component" />
</div>
</div>
<div id="kolumn2"> </div>
</div>
</div>
</body>
</html>
150
Vaihe 9 CSS nimella template.css kansioon css
body {margin: 0; padding: 0;
background: #BFD682;
}
#centrering {
width: 900px;
margin-right: auto;
margin-left: auto;
background: #fff;
}
#kolumncontainer {
float: left; border: 5px solid #fff;
background: #D7DA9E;
}
#sidhuvud {padding: 0px;
background-image: url('../images/ylapalkki.gif');
background-repeat: no-repeat;
height:140px;
width:900px;
}
#navi {padding: 0px;
background-image: url('../images/navi.gif');
background-repeat: repeat-x;
height:36px;
width:900px;
151
}
#kolumn1 {float: left; width: 840px; padding: 10px;background:
#D7DA9E;}
#kolumn2 {float: left; width: 10px; padding: 10px;background:
#D7DA9E;}
.menu {margin:0; padding: 4px 0px 4px 4px ; text-align:left;
border:none; background:white; font:100% Verdana,Arial,sans-serif;
font-weight:bold; color:#fff;
background-color: transparent;
}
.menu li{display:inline; margin-left:0em; }
.menu li a{padding:0px 7px 0 5px;
border-width:1px; border-style:none solid none none;
border-color:#fff;
text-decoration:none;
}
.menu a:link{color:#fff;}
.menu a:visited{color:#fff}
.menu a:hover{background-color: transparent; color:#000}
.menu a:active {background-color: transparent; color:#000}
#current a {
color:#000;
text-decoration:underline;
152
}
.teksti, p {
font-family: verdana, helvetica, sans-serif;
font-size:90%;
line-height:140%;
color:#000;
}
h1 {font-family: verdana, helvetica, sans-serif; color:black;
font-size:130%; font-weight:bold;}
h2 {font-family: verdana, helvetica, sans-serif; color:black;
font-size:120%; font-weight:bold;}
h3 {font-family: verdana, helvetica, sans-serif; color:#000; fontsize:110%; font-weight:bold;}
a img {
border:0;
}
h1 {font-family: verdana, helvetica, sans-serif; color:black;
font-size:130%; font-weight:bold;}
153
h2 {font-family: verdana, helvetica, sans-serif; color:black;
font-size:120%; font-weight:bold;}
h3 {font-family: verdana, helvetica, sans-serif; color:#000; fontsize:110%; font-weight:bold;}
Vaihe 10. Ylävalikko paikoilleen
Lopuksi laitamme ylävalikon kuntoon eli tehdään valikko nimeltä top. Viittasimme siihen
index.php koodassa:
<jdoc:include type="modules" name="top" />
Mene hallintapaneeliin ja valitse Extensions ja ”Module Manager”.
Valitse New
Valitse menu
Paina Next
154
Laita nimeksi top ja sijainniksi top.
HUOM! Nimi ei ole tärkeä vaan tuo kohta Position. Sen pitää olla top,
koska main
haetaan
nimenomaan
ylävalikko eikä esim vasemmlle tulevaa
Valitse
menu
ja list
valikkoa, joka olisi left.
HUOM! Menu Stylessä on muitakin valintoja. Ne ovat lähinnä vanhemmille Joomlan
versioille. Paras ja oikea tapa tehdä valikko on käyttää listaelementtiä eli List.
Tallenna muutokset. Jos template on valittuna näyttää se tältä kuten alla.
155
9.3. Templaten paketoiminen
Valmis sivupohja kannattaa paketoida eli laittaa yhteen nippuun tiivistettynä. Koko kansio pakataan
esim ohjelmalla 7.zip. Eli valitaan kansio ja sitten lisää.
156
Sitten kuten kuvassa.
Ja lopulta tehty template eli sivupohja löytyy templates kansiosta eli mouhu.tar.
157
158
10. Verkossa
Opas Mansetorin tekijöille
http://www.tampere.fi/tiedostot/5yOtoNH1L/Joomla_opas_ver_1_0.pdf
Perusasiaa runsaasti.
Joomlakoulu a la It-stems
http://joomlakoulu.fi/etusivu
Tyylikästä menoa.
http://www.joomlaportal.fi/
Suomalainen Joomlan keskittynyt sivusto. Täältä löytyy hyvin viimeisimmät asennus- ja
kielipaketit.
Joomla! Sanasto
http://www.joomlaportal.fi/content/view/453/44/
Joomlabologi
http://www.beltassu.net/joomlablogi
Mielenkiintoinen saitti - kannattaa tutustua.
IT-systemsin Joomla oppaat. Suomeksi ja varsin laajasti kerrottu kuvien kera.
http://www.it-systems.fi/fi/ohje/joomla-ohjeet
WWW-pohjainen sisällönhallintajärjestelmä opiskelukäyttöön (Ossi Kemppaisen seminaarityö)
https://oa.doria.fi/bitstream/handle/10024/30923/TMP.objres.746.pdf?sequence=1
Joomla! 1.5 Ohje peruskäyttöön
http://www.kotimaanetti.fi/liitteet/ohjeet/0/joomla15_kaytto-ohje_v2.pdf
Kotimaa-yhtiöt tehneet hyvän oppaan.
Atte Sinokko LIIKUNTAPÄIVÄKIRJASOVELLUS JOOMLA-KOMPONENTTINA
https://publications.theseus.fi/bitstream/handle/10024/16787/Sinokki_Atte.pdf?sequence=1
Lähteet
Joomla. [Online: http://sv.wikipedia.org/wiki/Joomla]. Luettu 13.6.2010.