Modx. Versio 1.3 /lokakuu Kirjoittanut Jari Sarja (

Transkriptio

1 1 Modx Versio 1.3 /lokakuu 2010 Kirjoittanut Jari Sarja (

2 2 Sisältö 1. Johdanto Imurointi, ennakkovalmistelut ja asennus Imuroiminen ja purku Kannan luominen Asennus oman koneen palvelimelle Kuinka pääsen hallintapaneeliin? Uusi sivupohja Sivupohjan alkutoimet Sisällön haku tietokannasta Palaset eli chunksit paikoilleen PHP-palaset eli snippetit Sivupohjan muuttujat Ditto Palautelomake Ajax haku Revolution version asennus Imurointi, ennakkovalmistelut ja asennus Imuroiminen ja purku Kannan luominen Asennus oman koneen palvelimelle Editorin asennus Revolution version Oppaita verkossa Lähteet... 84

3 3 1. Johdanto Julkaisujärjestelmiä on valtavan paljon. Ne ovat hyödyllisiä ja helppokäyttöisiä, mutta usein ne rajoittavat sivuston luomisprosessia. MODx on tässä suhteessa poikkeus. se on avoin ja joustava. Voit laajentaa sitä mihin suuntaan tahansa ja luoda juuri sellaisen websivun kuin haluat ja ilman kompromisseja. Siksi MODx.stä sanotaan usein, että se on pikemminkin "content management framework" eli sovelluskehys kuin pelkkä julkaisujärjestelmä. MODx tallentaa websivustojen sisällön tietokantaan. Kun kävijä tulee sivuille, MODx hakee tietokannasta sivun sisällön ja näyttää sen selaimessa. Kaikki tämä tapahtuu ilman, että käyttäjä huomaa mitään. Vastaavasti uusien sivujen ja entisten sivujen muokkaaminen tapahtuu tietokantaa hyödyntäen. Käytössä on myös WYSIWYG editori eli websivujen muokkaaminen on yhtä helppoa kuin tavallinen tekstinkäsittely. MODx on sikäli ajankohtainen, että se on nyt syksyllä 2010 ehdolla kilpailussa Open Source CMS. Parhaimmasta julkaisujärjestelmän tittelistä kilpailevat: CMS Made Simple, MODx, mojoportal, SilverStripe ja XOOPS. Vanhat tutut mestarit ovat jo eläkkeellä eli Drupal, Joomla ja Wordpress. Ne olisivat varmasti kärjessä, jossa saisivat olla mukana.

4 4 2. Imurointi, ennakkovalmistelut ja asennus Jotta MODx toimii koneellasi tarvitset ensinnäkin Apache palvelimen, PHP-tuen ja MYSQL tietokannan. Helpoiten homma hoituu, jos asennat WAMPin. Jos asennat suoraan webpalvelimelle, joka on verkossa, varmistu palvelimen PHP-tuesta ja MYSQL tietokannasta. Jos asennat omalle koneelle tarvitsee sinun vielä luoda tietokantaan käyttäjä ja tunnus sekä tietokanta Imuroiminen ja purku Mene MODx:n sivustolle ja valitse linkki download Otetaan zip-versio ja se evolution (revolution ei vielä valmis). Rekisteröityminen ei ole pakollinen.

5 5 Sieltä paketti kyytiin ja pura se paikkaan, josta se näkyy esim. localhostin kautta. Itse purin sen kansioon modx Ja koska se on siellä kansiona niin kopsasin kansion sisällön yhden tason ylöspäin Kannan luominen MODx on tietokantapohjainen julkaisujärjestelmä, joten sille pitää luoda oma tietokanta ellei sellaista entuudestaan ole. WAMPissa homma hoituu siten, että menet localhostiin ja valitset ohjelmaksi phpmyadmin.

6 6 Valitse priviledges. Valitse Add new user (sivun keskivaiheella) Sitten tiedot eli kaikkiin modx2010 Host on localhost Muuta ruksi kohtaan create database with same name

7 7 Valitse Check all. Ja paina lopuksi painiketta Go Asennus oman koneen palvelimelle Nyt kaikki on valmista ja suunnistetaan paikkaan localhost, joka on oma kone. Napsauta linkki install now.

8 8 Valitse kieli ja paina Next. Valitaan New installation ja Next. Syötä tietokannan tiedot ja testaa yhteys.

9 9 Jos virhe niin näin: Jos taas kaikki ok niin pääset kirjoittamaan myös tietokannan nimen.

10 10 Tämäkin vaihe pitää testata. Jos ei toimi niin muuta näin: Sitten pääkäyttäjän tiedot.

11 11 Älä laita ruksia ruutuun ja install. Hyväksy ehdot ja paina install.

12 12 Sitten vielä yksi ruksi ja Close. Sitten pääsetkin kirjautumaan. Kun olet kirjautunut voit vaihtaa sivustolle oikean nimen.

13 13 Jos kaikki meni ok, etkä asentanut mitään ylimääräistä saatat nähdä tällaisen näkymän kuin alla. Toisaalta jos asensit niin näin. 2.4 Kuinka pääsen hallintapaneeliin? hallintapaneeli voi joutua hukkaan ja tuntuu, että nyt kaikki on pilalla. Älä panikoi vaan suunnista osoitteeseen manager eli näin

14 Siellä on etusivu, jota voit muokata napauttamalla linkkiä. 14

15 15 Valitse painike muokkaa. Tee muutokset ja muista tallennus,

16 Katso lopputulos painamalla esikatselu. 16

17 17 Muutetaan tuota ensimmäistä sivua hieman eli haetaan sisältöä osoitteesta: Ja tallennetaan muutokset.

18 18 3. Uusi sivupohja Tehdään heti alkuun uusi sivupohja, jotta pääsemme kiinni siihen millainen MODx on syvimmältä olemukseltaan Sivupohjan alkutoimet Suunnista paikkaan: Sieltä valitaan sivupohja, jonka nimi on Swansong. Pura sivupohja koneellesi ja ota siitä kopio. Laita kopio kansioon seuraavan kaavan mukaan. Eli ensin pitää löytää polku wamp ->www ->modx ->assets -> templates ja sinne uusi kansio sivupohjat ja sinne index tiedosto ja kuville ja css:lle omat kansiot ja niiden sisältä uusiin kansioihin. Alla esimerkki images kansiosta.

19 19 Sen jälkeen rakennetaan uusi sivupohja valitsemalla Elementit -> Elementit ja sitten Uusi sivupohja. Siellä näkyy tällä hetkellä käytössä oleva sivupohja eli Minimal Template. Uudelle sivupohjalle kirjoitetaan nimieksi Swansong aloitus. Ja sisältö otetaan netistä imuroidusta teemasta (Swansong) tiedostosta index.htm.

20 20 Tallenna sivupohja. Tämän jälkeen otetaan sivupohja käyttöön etusivulla. Suunnista ensin sivulle ja napsauta se auki.

21 21 Valitse etusivulle uusi sivupohja. Tallenna muutokset ja katso sivustoasi. Siellä ei näy juuri mitään, koska polut ovat väärin. Laitetaan siksi polut kuntoon ja muutenkin viilataan ainakin titlen osalta. Sivuston alku uusiksi eli kuten alla. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>[*pagetitle*] - [(site_name)]</title> <base href="[(site_url)]" /> <link href="assets/templates/sivupohjat/swansong/styles/style.css" rel="stylesheet" type="text/css" />

22 22 <meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" /> </head> Tämän lisäksi pitää korjata myös CSS:n polkuja. body { margin : 20px; padding : 0; font : 73% "Trebuchet MS", verdana, arial, sans-serif; color : #666; background : # url(../images/bgd.png) repeat; } Seuraavaksi viilataan yläpalkkia tekstin osalta. Laitetaan sinne omat tietomme. <h1>turvallista matkaa</h1> <p> Opi tietoturvan alkeet </p> 3.2. Sisällön haku tietokannasta Sitten haemme sisällön tietokannasta eli content lyhenee, koska turha teksti pois. <div id="content"> [*content*] </div>

23 23 Lopputulos kutakuinkin kuten alla Palaset eli chunksit paikoilleen Chunksit elit osat tai HTML-palaset eivät voi sisältää PHP koodia, vaikka ne muutoin sisältävätkin paljon toiminnallisuutta. Jos tarvitset php-koodia niin sen puolen hoitaa snippetit eli koodinpätkät tai TV:t (Template Variable). HUOM! osa voi kuitenkin sisältää snippetin, joka puolestaan sisältää PHP-koodia. HTML-palaset ovat lähes sama asia kuin PHP koodiin include toiminta. Ideana on, että sivu paloitellaan osiin. Tästä on se hyöty, että jos osaa tarvitaan on se nopeasti liitettävissä, koska kyse on vain yhdestä koodirivistä. Osa voidaan nopeasti vaihtaa pois johonkin toiseen osaan. Esim. kirjautumisikkuna näkyy ainoastaan etusivulla. Seuraavalla sivulla sitä ei näy, koska siihen on haettu jokin muu sisältö. Chunk merkataan tagilla {{chunk}}. Lisäämme uudet HTML-palasen. Valitse Elementit - > Elementit - > HTML-palaset.

24 24 Valitse uusi HTML-palanen. Kirjoita sinne tiedot eli swansong_header on HTML-palasen nimi. Tuossa laitettiin lisäksi ruksi ruutuun, jotta vain pääkäyttäjät voivat tätä muokata. Lisätään samalla kaavalla vielä. swansong_footer, swansong_leftsidebar ja swansong_rightsidebar.loputulos kuten alla.

25 Miksi juuri nuo HTML-palaset. Ajatus on, että sivu pilkotaan palasiksi seuraavan kaavan mukaisesti. Yläpalkkiin koko sivuston alku ja mukaan vielä yläpalkki ja navigaatio. Vasen palsta myös omaksi palaksi samoin kuin oikea palsta. Lopuksi vielä alapalkki omaksi osaksi. Sivustopohja rikotaan ja niihin liitetään neljä HTML-palasta. Tällä tavoin sivupohjan koodi lyhenee olennaisesti. 25

26 Laitetaan tämän logiikan mukaan kuntoon ensin header eli yläosa. Valitse template ja leikkaa sieltä yläosa pois Eli tämä koodi. 26

27 27 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>[*pagetitle*] - [(site_name)]</title> <base href="[(site_url)]" /> <link href="assets/templates/sivupohjat/swansong/styles/style.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=[(modx_charset)]" /> </head> <body> <div id="container"> <div id="banner"> <img src="assets/templates/sivupohjat/swansong/imgages/swan_banner.jpg" alt="swan" title="swan" /> </div> <div id="bannerb"> <p class="sitename">webnikkarit</p>

28 28 <h1>turvallista markaa</h1> <p> Opi tietoturvan alkeet. </p> </div> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">active link</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> <li><a href="#">item four</a></li> <li><a href="#">item five</a></li> </ul> </div> Tämä koodi, joka leikattiin pois sijoitetaan HTML-palasiin.

29 Muuttunut template saa pelkän viittauksen tähän tiedostoon. 29

30 30 Samalla tavalla muut osat. Vasen menee näin <h2>navigation</h2> <div id="menu"> <ul> <li><a href=" Happy</a></li>

31 31 <li><a href=" title="openwebdesign">owd</a></li> <li><a href=" Viklund</a></li> <li><a href=" Koster</a> </li> <li><a href=" <li><a href=" CSS play </a></li> <li><a href=" title="css menus">listamatic </a> </li> </ul> </div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p> <h2>more Links</h2> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> Ja sivupohjan koodi. <div id="sidebar"> {{leftsidebarr}} </div> Sama sitten oikealle reunalle ja alapalkille. Tässä oikea reuna.

32 32 <h2>news & Updates</h2> <div class="scroll"> <h3>jan </h3> <p class="news"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p> <h3>dec </h3> <p class="news"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p> </div> <h2>more Links</h2> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>

33 33 Ja alapalkki näin. <a href="#">homepage</a> <a <a href=" <a href=" Anyone Design by <a href=" work is licensed under a <a rel="license" href=" Commons Attribution 3.0 License</a> Tämän jälkeen sivupohja on tällainen kuten alla. Sama vielä koodina. {{swansong_header}} <div id="sidebar"> {{swansong_leftsidebar}} </div>

34 34 <div id="sidebar-b"> {{swansong_rightsidebar}} </div> <div id="content"> [*content*] </div> <div style="clear:both"> </div> <div id="footer"> {{swansong_footer}} </div> </div> </body> </html> 3.4. PHP-palaset eli snippetit PHP-palaset ovat koodinpätkiä, joilla saadaan aikaiseksi haluttu toiminto. Se mitä me ensiksi tarvitsemme on wayfinder niminen snippetti. Jos asensit ohjeiden mukaan löytyy kyseinen snippetti paikasta, jonka polku on Elementit -> Elementit - > PHP-palaset

35 35 Jos sinulta puuttuu Wayfinder. Hae se osoitteesta: ja asenna ohjeiden mukaisesti. Koska kyseessä on navigoinnin mahdollistava koodi on meidän ensin lisättävä sivu. Lisäämme sivun, jonka nimi on Info.

36 Tarkista vielä asetuksista, että sivu on julkaistu. 36

37 37 Sitten html-osaan, jossa on se yläosa eli header seuraava kohta pois. <ul id="navlist"> <li id="active"><a href="#" id="current">active link</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> <li><a href="#">item four</a></li> <li><a href="#">item five</a></li> </ul> Tillale näin. [[Wayfinder? &startid=`0` &level=`1`]]

38 38 Level tarkoittaa sitä, että kuinka monta tasoa otetaan mukaan. Nyt valikko toimii. Hieman on tuo ensimmäinen linkki väärin eli säädetään muutamalla valikon teksti.

39 Sivupohjan muuttujat Tässä vaiheessa teemme uuden sivupohjan, johon laitamme muuttujia. Ota kopio sivupohjastasi Avaa sen jälkeen luotu kopio.

40 40 Laita sivupohjalle uusi nimi. Nyt sinulla on kaksi samanlaista sivupohjaa. Sitten teemme sivun, jonka nimi on kirjat. Huom tällä kertaa sivua ei navigaatioon eli jätä ruksi pois siitä kohtaa.

41 Tarkista, että sivu on julkaisematon. 41

42 42 Sitten teemme dokumentin eli sivun alle toinen sivun. Valitse kirjat ja oikea hiirenpainike. Valitse Uusi sivu tähän. Kirjoita sivuille kirjan tiedot.

43 Sitten lisäämme sivupohjan muuttujan ja polku seuraavassa kuvassa. 43

44 44 Sinne teemme muuttujan, jonka tyyppi on kuva. Muista valita myös sivupohja. Teemme myös toisen muuttujan.

45 Nyt sivujen muokkauksessa on lisätoimintoja. Luomme vielä uuden HTML-palasen. 45

46 46 Sinne tulee seuraava koodi. <p><a title="[*pagetitle*]" href="[*imagelink*]" target="_blank"><img title="[*pagetitle*]" src="[*bookimages*]" border="0" alt="" width="70%" height="70%" /></a></p>

47 47 HUOM! Sisältöeditori pitä kytkea pois eli katso alareunassa kohta Käytettävä sisältöeditori. Lopuksi liitämme sivupohjaan HTML-palasen eli {{bookchunk}} [*content*] Nyt voit tehdä uuden sivun, johon valitset tämän uuden sivupohjan ja lisäksi valitset siihen kuvan ja linkin.

48 Tallennuksen jälkeen näet sivun alareunassa jotakin uutta. Täytä tiedot eli hae kirjalle kansiokuva ja linkitä kirjan tiedot. Laita myös kirjan tietoja kohtaa sivun sisältö. 48

49 Lopputulos näkyy nyt sivuilla eli kirjan kansi on mukana ja se on klikattava. 49

50 Ditto Ditto on mielenkiintoinen lisä. Luodaan vielä muutama kirja meidän kirjastoon. Ja kirjoitetaan niille myös tiivistelmä. Tältä näyttää kun lisätään.

51 51 Muista myös laittaa kuva mukaan. Lopputulos kutakuinkin näin.

52 52 Seuraavaksi luomme uuden chunkin eli HTML palasen, joka määrittelee kirjojen ulkoasun. Ideana on, että haemme kaikki kirjat. Valitaan linkki Uusi HTML palanen ja sinne seuraava koodi. <p><a title="[*pagetitle*]" href="[*imagelink*]" target="_blank"><img title="[*pagetitle*]" src="[*bookimages*]" border="0" alt="" width="70%" height="70%" /></a></p> Nimeksi bookchunk ja kategoriaksi Swansong.

53 53 Seuraavaksi valitsemme sivun nimeltä kirjat. Jonne seuraava sisältö.

54 54 Eli koodi menee näin. [!Ditto? &parents=`3` &tpl=`librarytemplate`!] HUOM! Numero 3 on ID, joka pitää katsoa puurakneteesta.

55 55 Muista myös julkaista Kirkat valikkoon eli ruksi ruutuun Näytä valikossa. Loputulos näin. On mahddollista, että ääkköset ovat pielessä. Tee silloin muutos UTF-8 merkistöön. Valitse työkalut - > Järjestelmän asetukset -> Merkistö. Sitten alasvetovalikosta utf-8.

56 56 Dittoa voidaan vielä muokata laittamalla sille sivunumr erointi. [!Ditto? &parents=`3` &tpl=`librarytemplate` &display=`2` &paginate=`1` &paginatealwaysshowlinks=`0`!] [+previous+] [+pages+] [+next+] Koodia voi tietty viilata tyylikkäämpään suuntaan esim näin. [!Ditto? &parents=`3` &tpl=`librarytemplate` &display=`2` &paginate=`1` &paginatealwaysshowlinks=`0`!] <br /><br />

57 57 [+previous+] [+pages+] [+next+] 3.8. Palautelomake Tämä ei toiminut Wampissa ainakaan. Suhtaudun siihen skeptisesti, mutta laitan silti. Lodaan HTML-osa, jonka nimion efeedbackform Sinne seuraava siältö [+validationmessage+] <form method="post" action="[~[*id*]~]"><input type="hidden" name="formid" value="feedbackform" /> <label for="name">your Name</label> <input maxlength="60" name="name" type="text" /> <label for=" ">your Address</label> <input maxlength="40" name=" " size="40" type="text" /> <label for="department">subject</label>

58 58 <select name="department"> <option value="1">website feedback</option> <option value="2">modx Question</option> <option value="3">modx Service Request</option> </select><label for="comments">comments</label> <textarea cols="40" rows="10" name="comments"></textarea> Please enter the anti spam code below: <img src="[+verimageurl+]" border="1" alt="verification code" /> <label for="vericode">code</label> <input name="vericode" size="20" type="text" /> <input name="submit" type="submit" value="send Feedback" /> </form> Toisen osan nimeksi efeedbackreport [+validationmessage+] <form method="post" action="[~[*id*]~]"><input type="hidden" name="formid" value="feedbackform" /> <label for="name">your Name</label> <input maxlength="60" name="name" type="text" /> <label for=" ">your Address</label>

59 59 <input maxlength="40" name=" " size="40" type="text" /> <label for="department">subject</label> <select name="department"> <option value="1">website feedback</option> <option value="2">modx Question</option> <option value="3">modx Service Request</option> </select><label for="comments">comments</label> <textarea cols="40" rows="10" name="comments"></textarea> Please enter the anti spam code below: <img src="[+verimageurl+]" border="1" alt="verification code" /> <label for="vericode">code</label> <input name="vericode" size="20" type="text" /> <input name="submit" type="submit" value="send Feedback" /> </form>

60 60 Lopuksi yhteydenottosivu, jonne tämä. [!eform? &formid=`feedbackform` &tpl=`efeedbackform` &report=`efeedbackreport` &subject=`viesti sivustolta` &vericode=`1`!] Lopputulos näin kuten alla.

61 Ajax haku Muoktaan HTML-osaa, joka säätää oikea reunaa eli sinne lisää seuraava pätkä. <h2>search<h2> [!AjaxSearch? &ajaxsearch=`1` &AS_showResults=`0` &AS_landing=`12`!] Ja siellähän se haku on.

62 Kommentit Lisäämme kommentit kirjoihin eli niitä voivat kirjoittajat kommentoida. Tarvitsemme uuden HTML-palasen, jonka nimeksi Librry_Comments Sinne ainoastaan teksti [!Jot?!] Sitten laitamme kommentit myös sivupohjaan.

63 63 Uutta heti sisällön jälkeen. [*content*] <div id="comments"> {{Library_Comments}} </div> </div> Kuvagallerian asennus Aloita menemällä osoitteeseen

64 64 Pura pektti koneellessi ja siirrä sitten galleries kansio kansion assets alle ja varmista, että sillä kansiolla on kirjoitusoikeudet. Siirrää sitten maxigallery assets kansion alle.

65 65 Lopuksi vielä sivupohjaan koodi. [*MaxiGallery*] Ja toimi

66 4. Revolution version asennus 66

67 67 MODx Revolution 2.0 julkaistiin kesäkuun lopussa MODx Revolution 2.0 on täysin uusi versio verrattuna MODx:n aiempiin versioihin. Kyseessä on suuri muutos ja sen seurauksena kaikki toimintoja ei vielä ole saatavilla ja suomenkielinen kielipakettikin puuttuu. Lisäksi Revolution 2.0 vaatii hieman totuttelua, koska käyttöliittymä on muuttunut Imurointi, ennakkovalmistelut ja asennus Jotta MODx toimii koneellasi tarvitset ensinnäkin Apache palvelimen, PHP-tuen ja MYSQL tietokannan. Helopoiten homma hoituu, jos asennat WAMPin. Jos asennat suoraan webpalvelimelle, joka on verkossa, varmistu palvelimen PHP-tuesta jamysql tietokannasta. Jos asennat omalle koneelle tarvitsee sinun vielä luoda tietokantaan käyttäjä ja tunnus sekä tietokanta Imuroiminen ja purku Mene MODx:n sivustolle ja valitse linkki download Otetaan zip-versio ja se revolution.

68 68 Rekisteröityminen ei ole pakollinen. Sieltä paketti kyytiin ja pura se paikkaan, josta se näkyy esim. localhostin kautta. Itse purin sen kansioon modxlokakuu Kannan luominen MODx on tietokantapohjainen julkaisujärjestelmä, joten sille pitää luoda oma tietokanta ellei sellaista entuudestaan ole. WAMPissa homma hoituu siten, että menet localhostiin ja valitset ohjelmaksi phpmyadmin.

69 69 Valitse priviledges. Valitse Add new user (sivun keskivaiheella) Sitten tiedot eli kaikkiin modx2010 Host on localhost Muuta ruksi kohtaan create database with same name Valitse Check all.

70 70 Ja paina lopuksi painiketta Go Asennus oman koneen palvelimelle Nyt kaikki on valmista ja suunnistetaan paikkaan localhost, joka on oma kone. Kirjoita osoitteen perään vielä setup.

71 71 Polku näin: Valitse ensin kieli. Suomenkileistä versiota ei ole.

72 72 Sitten valitaan Next. Seuraavaksi Next.

73 73 Sitten tietokannat tiedot ja testaus. Sitten testataan merkkijärjestelmät ja suoritetaan asennus.

74 74 Seuraavaksi on vuorossa pääkäyttäjän tunnukset. Koska vihreää, pääsemme asennukseen.

75 Jälleen Next. 75

76 76 Sitten pääsemme kirjautumaan ja samalla poistamme asetukset kansion. Sitten onkin enää kirjautuminen jäljellä.

77 Tämän jälkeen avautuu ohje päällimmäiseksi. Sen saa pois ruksista. 77

78 78 5. Editorin asennus Revolution version Revolution versio on varsin tyylikäs, mutta yksi erikoinen piirre siinä on. Asennuksen jäljiltä puuttuu editori. Artikkelin kohdalla näkyy näin. Tuohon voi kirjoittaa koodia, mutta se on perin työläs tapa tehdä websivuja. Siksi asennamme sivuille Tinymce editorin. Revolution versio on sikäli erikoinen, ettei siihen tarvitse lähteä etsimään asennuspaketteja webistä. Kaikki on valmiina lei tarvitsee ainaostaan poimia paketti. Suunnista kohtaan System -> Package Management.

79 79 Paina painiketta Download Extras. Sieltä etsit kohdan RichtextEditord.

80 80 Siellä näkyy kaksi editoria, joista valitsemme TinyMCE editorin. Lataamme sen valitsemalla Download.

81 81 Kun kaikki on valmista muuttuu painike harmaaksi ja siinä lukee Downloaded. Tämän jälkeen voit laittaa ikkunan kiinni. Nyt siellä näkyy, että Tinymce on ladattu, mutta sei ole asennettu (Not installed). Asennus suoritetaan painamalla painiketta Install. Hyväksy lisenssiehdot ja paina Next.

82 Sitten odottelen, kunnes kaikki on valmista ja pianaa painiketta Ok. 82

83 83 Nyt editori on käytössä. Oppaita verkossa Working With a Content Management Framework: MODx [Online MODxRULES! [Online

84 84 Lähteet Bob s guides [Online Luettu Luettu Maagit [Online Luettu