Apache, SSI ja esiprosessointi

• Luentotaltiointi
• Edelleenohjaus
• Salasanasuojaus
• Monikielisyys
• SSI (Server Side Includes)
• Esiprosessointi XSLT:llä
• WML
• SSI, XSL vai WML?

Opiskellaan Apachen ominaisuuksia tekemällä edelleenohjaus, salasanasuojaus, monikielinen etusivu ja tutustutaan SSI:hin. Lisäksi kokeillaan esiprosessointia WML:n ja XSLT:n avulla.

Kaikki tässä demossa käsiteltävät asiat toimivat vain Apache-www-palvelimissa eli www.cc.jyu.fi- tai people.cc.jyu.fi-koneissa. www.ad.jyu.fi on Microsoft IIS -www-palvelin, jossa asiat tehdään eri tavalla.

Muuta sivuston sisältävän hakemiston nimeksi nanonano. Jos et vielä ole kopioinut koko Nanonanon sivustoa V:-asemalta atk-keskuksen www-palvelimelle (www.cc.jyu.fi) niin tee se nyt.

Edelleenohjaus

Edelleenohjaus -mallivideo

Monesti käy niin että dokumentit muuttavat paikkaansa ja saattaa olla hyvin vaivalloista muuttaa kaikkia niihin osoittavia linkkejä. Muiden tekemien linkkien muuttaminen on mahdotonta. Tällöin tulee ratkaisuksi edelleenohjaus jolla selain saadaan kulkeutumaan automaattisesti uuteen osoitteeseen.

• Ota yhteys www.cc.jyu.fi-palvelimeen SSH Secure Shell -ohjelmalla.
• Muuta nanonanon opiskelu-kansion nimeksi opinnot.
• Voit kokeilla selaimella kuinka kaikki opiskelu-kansioon osoittaneet linkit rikkoutuivat edellisen muutoksen takia. Korjataan asia edelleenohjauksella
• Siirry nanonanon sivuston juurikansioon ja luo .htaccess-tiedosto esimerkiksi komennolla

  nano -w .htaccess

  -w-parametri kertoo nano-ohjelmalle, ettei tiedostoa saa rivittää automaattisesti. Tähän tiedostoon sijoitetaan kaikki Apachelle tarkoitetut komennot. Lisää .htaccess-tiedostoon rivi:

  Redirect permanent /~omatunnus/nanonano/opiskelu/ http://www.cc.jyu.fi/~omatunnus/nanonano/opinnot/

  Edelleenohjattavan sivun (tiedoston) osoite kerrotaan absoluuttisesti palvelimen juuresta lukien. Uusi osoite pitää ilmoittaa kokonaisuudessaan.
• Kokeile selaimella toimivatko linkit nyt.
• Jättämällä permanent-sana pois saataisiin tehtyä väliaikainen edelleenohjaus, jonka kohdalla esim. google säilyttää muistissaan alkuperäisen osoitteen mutta hakee sisällön uudesta osoitteesta.
• Tyypillisin esimerkki edelleenohjauksesta on WWW-palvelimien automaattisesti tekemä edelleenohjaus jos www-sivun osoite viittaa kansioon mutta osoitteesta jätetään pois viimeinen /-merkki. esim. annetaan osoitteeksi http://appro.mit.jyu.fi/2004/kevat/www/demot/demo7 eikä http://appro.mit.jyu.fi/2004/kevat/www/demot/demo7/. Ensimmäinen osoite viittaa demo7-nimiseen tiedostoon ja jos sitä ei löydy niin Apache edelleenohjaa automaattisesti demo7/-kansioon.

  Kokeile mitä Web-Sniffer sanoo osoitteista:

  • http://appro.mit.jyu.fi/2004/syksy/www/demot
  • http://appro.mit.jyu.fi/2004/syksy/www/demot/

Salasanasuojaus

Suojaus salasanalla -mallivideo

Yksittäinen kansio on helppo suojata salasanalla.

• Suojataan nanonanon dokumentit salasanalla. Lisää artikkelit-kansioon .htaccess-tiedosto ja kirjoita sinne:

  AuthUserFile /foo/bar/tunnus/.users
  AuthGroupFile /dev/null
  AuthName ByPassword
  AuthType Basic
  <Limit GET>
  require valid-user
  </Limit>
  

  AuthUserFile-kohtaan pitää kertoa hakemistopolku tiedostoon josta löytyvät käyttäjätunnukset ja salasanat. Tämä polku pitää tarkistaa WWW-palvelimesta (www.cc.jyu.fi) eikä se siis onnistu esim. silmusta tai versosta.
  • Siirry www/nanonano/artikkelit/-kansioon
  • Kirjoita komento pwd niin saat www-palvelimessa toimivan hakemistopolun. Polku on jokaisella käyttäjällä erilainen!
• Laita oikea polku .htaccess-tiedostoon, lisää /-merkki ja polun perään tiedostonnimeksi .users
• Luo käyttäjätunnus ja salasana komennolla:

  htpasswd -c .users tunnus

• Lisää lukuoikeudet kaikille tiedostoon .users, niin palvelin pystyy lukemaan käyttäjätunnukset ja salasanat. Käyttäjätiedoston salasanat ovat kryptattuja, mutta salaamatonta yhteyttä käyttävään salasanavarmennukseen ei voi yksinään luottaa tärkeitä tietoja välitettäessä.
• Jos sinulla ennestään on jo olemassa .users-tiedosto ja haluat lisätä siihen tunnuksia niin komento on:

  htpasswd .users tunnus

• Kokeile kysyykö selain tunnusta ja salasanaa.
• Tarkemmin hakemistojen suojaamisesta voi lukea atk-keskuksen ohjeesta.

Monikielisyys

Monikielisyys -mallivideo

HTTP-protokolla ja Apache-WWW-palvelin tukevat suoraan automaattista kielenvalintamekanismia, joka palauttaa selaimelle oikeankielisen dokumentin selaimen asetuksien mukaan. Selaimien kieliasetuksia voi säätää suoraan niiden asetuksista ja voi esim. laittaa kielet mieleiseensä järjestykseen.

Muutetaan Nanonanon sivuston etusivu monikieliseksi seuraavasti:

• Lisätään .htaccess-tiedostoon seuraavat rivit:

  # Tehdään var-päätteisistä tiedostoista tyyppikartta-tiedosto,
  # joka kertoo mikä tiedosto sisältää mitäkin kieltä
  AddHandler type-map .var
  # Käytetään kansion indeksitiedostona index.var-tiedostoa
  # tavallisen index.shtml-tiedoston sijaan
  # Määrätään indeksitiedostovaihtoehdot:
  DirectoryIndex index.var index.html index.shtml
  # Määrätään kielten oletusjärjetys, ensin englanti ja sitten suomi.
  # Tätä järjestystä käytetään jos selain ei itse ilmoita selkeää paremmuusjärjestystä
  LanguagePriority en fi
  # Varmistetaan, että selaimelle tarjotaan dokumentti myös jos selaimen haluamia
  # kielivaihtoehtoja ei löydy
  ForceLanguagePriority Prefer Fallback

• Seuraavaksi luodaan index.var-tiedosto ja lisätään siihen rivit:

  URI: index.en.shtml
  Content-type: text/xml
  Content-language: en
  
  URI: index.fi.shtml
  Content-type: text/xml
  Content-language: fi
  

  Yllä kerrotaan, että index.en.shtml-tiedosto sisältää englanninkielisen version ja index.fi.shtml-tiedosto suomenkielisen version. Mediatyypiksi on shtml:n tapauksessa valittava palvelimen antama text/xml ja muutettava se normaaliin text/html -tyyppiin .htaccess -tiedoston avulla. Jos SSI:tä ei käytetä, tyyppinä voi käyttää pelkkää text/html -tyyppiä.

• Kopioi alkuperäinen nanonanon etusivu eli index.html sekä index.en.shtml että index.fi.shtml-nimille.
• Muokkaa index.en.shtml-tiedostoa ja käännä sen sisältö ainakin osittain englanniksi.
• Kokeile selaimella Nanonanon etusivua. Muuta selaimen kieliasetuksia ja kokeile muuttuuko sivu (esim. Mozillassa Edit | Preferences | Navigator | Languages, Opera File | Preferences | Languages).
• Lisää suomenkieliseen tiedostoon linkki suoraan englanninkieliseen tiedostoon ja päinvastoin ihan siltä varalta, että jotkut käyttäjät eivät osaa säätää selaimensa kieliasetuksia.
• Kokeile mitä tapahtuu jos poistat .htaccess-tiedostosta ForceLanguagePriority-rivin ja poistat selaimen antamista kielivaihtoehdoista kokonaan suomen ja englannin ja laitat tilalle esim. arabian.

Tarkemmin Apachen automaattisesti kielivalinnasta voi lukea dokumentista Apache Content Negotiation.

SSI (Server Side Includes)

SSI -mallivideo

SSI-komennoilla voi lisätä WWW-sivuihin dynaamista toiminnallisuutta. WWW-palvelin tulkitsee xhtml-dokumenttiin upotetut komennot ennen sivun lähettämistä selaimelle.

• Helpotetaan Nanonanon sivuston ylläpitoa siirtämällä kaikille dokumenteille yhteinen navigointi yhteen tiedostoon josta sitä on helppoa keskitetysti ylläpitää.
• Aloita XetorjEditillä uusi tyhjä dokumentti. Kopioi tähän dokumenttiin Nanonanon etusivulla olevan navbar-osan lähdekoodi.

  Muuta kaikki navigointipalkin linkit absoluuttisiksi, jotta samat linkit toimivat millä tahansa sivulla atk-keskuksen www-palvelimelta. Esim:

  <li><a href="http://www.cc.jyu.fi/~omatunnus/nanonano/artikkelit/">Artikkelit</a></li>
  

• Tallenna navigointipalkki navbar.html-nimelle.
• Siirrä navbar.html SFTP:llä nanonano-hakemistoon.
• Siirry www/nanonano/-kansioon SSH-pääteyhteydellä.
• Muuta index.en.shtml-tiedostoa siten, että korvaat navbar-lohkon seuraavalla html-kommentilla, joka toimii myös SSI-komentona:

  <!--#include virtual="navbar.html"-->

• Lisää navigointi samalla tavalla myös index.en.shtml-tiedostoon.
• Tavallisia .html-päätteisiä tiedostoja ei voida aina automaattisesti parsia SSI-komentojen varalta koska se olisi palvelimelle liian raskasta ja turhaa työtä. ATK-keskuksen Apache 2 -palvelin jakaa .shtml-päätteiset tiedostot text/xml-muodossa mikä ei sovi kaikille selaimille ja validaattoreille. Lisää nanonano-hakemistossa sijaitsevaan .htaccess-tiedostoon seuraavat asetukset:

  # Käsketään palvelimen etsiä mahdolliset SSI-komennot .shtml-päätteisistä tiedostoista
  AddHandler Server-Parsed .shtml
  AddType text/html .shtml
  

  Näillä asetuksilla .shtml-sivujen SSI-komennot tulevat käsitellyiksi palvelimella ja selaimet saadaan tulkitsemaan esiprosessoidut sivut html:nä.
• Kokeile selaimella miten nanonanon sivu toimii nyt ATK-keskuksen www-palvelimelta:

  http://www.cc.jyu.fi/~omatunnus/nanonano/

  Jos kaikki meni oikein niin edellä lisäämäsi SSI-komennon tilalla pitäisi selaimessa näkyä ihan normaali navigointipalkki, jonka WWW-palvelin lisäsi navbar.html-tiedostosta SSI-komennon kohdalle.
• Varmista, että navigointipalkin linkit toimivat!
• Kokeillaan lisätä SSI:n avulla myös dokumentin muutosaika sivulle. Lisää index.shtml-tiedoston loppuun rivit:

  <!--#config timefmt="%Y-%m-%e %T"--><!--#echo var="LAST_MODIFIED"-->

  Ensimmäinen kommentti määrää SSI:n päivämäärämuotoilun ja jälkimmäinen aiheuttaa varsinaisen muutosajankohdan lisäämisen. Kokeile selaimella ilmestyikö muutosaika sivulle.
• Lisää SSI:n avulla navigointipalkki ja muutosajankohta linkit-hakemistossa olevalle sivulle. Muista tehdä alihakemistosta oikeanlainen suhteellinen tiedostoviittaus navbar.html-tiedostoon. Muista myös nimetä tiedosto .shtml-päätteisiksi. Mikäli tekisimme muutokset myös kaikiin muihin Nanonanon sivuihin niin saisimme keskitettyä navigoinnin ylläpidon yhteen tiedostoon.
• Mikä ongelma on vältetty tallentamalla jokainen dokumentti omaan kansioonsa ja kansion indeksitiedostoksi? Olisivatko sivuston linkit vielä ehjiä jos kaikki tiedostot eivät olisi indeksidokumentteja?
• Varmista W3C:n LinkChecker-ohjelmalla, että navigointilinkit toimivat varmasti kaikilla alasivuilla.

Esiprosessointi XSLT:llä

Esiprosessointi XSLT:llä -mallivideo

SSI:n ongelmana on palvelimen resurssien turha hukkaaminen. Joka kerta, kun selain pyytää palvelimelta sivua, käy palvelin sivun läpi ja toteuttaa siinä olevat SSI-komennot ennen sivun lähettämistä selaimelle. Tämä on huomattavan raskasta verrattuna yksinkertaiseen sivun lähettämiseen. SSI:tä vastaava toiminta saataisiin toteutettua myös esiprosessoimalla.

Esiprosessointi tarkoittaa seuraavia vaiheita:

1. Kirjoitetaan kaikilla sivuilla käytettävä dokumenttipohja eli template, joka sisältää esim. kaikille sivuille yhteisen navigointilinkistön
2. Kirjoitetaan halutun yksittäisen dokumentin varsinainen sisältö
3. Yhdistetään sisältö ja template valmiiksi sivuksi

XSLT eli eXtensible Stylesheet Language Transformations tarkoittaa XML-sovellusta jolla voidaan määrätä miten tietty XML-tiedosto (esim. XHTML-dokumentti) muunnetaan toiseen muotoon (esim. PDF, tavallinen teksti).

• Luodaan ensimmäiseksi Nanonanon sivustoa varten pohjadokumentti XSL-muotoon. Kopioi wget-komennolla nanonano.xsl Nanonanon sivuston juureen www.cc.jyu.fi-palvelimelle. Kopioi siis linkki oikean hiiren napin takaa avautuvan valikon Copy link location -valinnalla, siirry nanonano-hakemistoon, kirjoita wget ja liitä linkkiteksti valinnalla SSH Secure Shellin valikosta Edit | Paste. Tällöin saat komennon:

  wget http://appro.mit.jyu.fi/2004/syksy/www/demot/demo7/nanonano.xsl

• Kopioi myös esimerkkidokumentti sisältötiedostosta: nanonano.xml
• Kokeile muuntaa esimerkkidokumentti julkaisuvalmiiksi seuraavalla komennolla, joka luo nanonano.html-tiedoston:

  xsltproc nanonano.xsl nanonano.xml > nanonano.html

  Komennon suorittaminen kestää hieman aikaa koska xsltproc-ohjelma myös validoi.

• Testaa selaimella miltä nanonano.html vaikuttaa
• Kokeile myös seuraavaa komentoa jolla saat valmiiseen tiedostoon myös muutosajankohdan:

  xsltproc --stringparam date "`date`" nanonano.xsl nanonano.xml > nanonano.html

• Kokeile muuttaa nanonano.xsl-tiedoston sisältöä ja tee esiprosessointi uudelleen. XSL:n syntaksia ei tällä kurssilla käsitellä vaan voit halutessasi perehtyä asiaan tarkemmin menemällä XML-kurssille. XSL-tiedoston sisältämän xhtml-osuuden muuttaminen pitäisi kuitenkin onnistua.

WML

Esiprosessointi WML:llä -mallivideo

WML (Website Meta Language) on erityisesti WWW-sivujen esiprosessointiin kehitetty väline, jonka suurin ongelma on, että WML-komentoja sisältävät tiedostot eivät ole XML-muotoisia, joka voi hieman rajoittaa käytettävissä olevia työkaluja.

• Tehdään edellä XSL:llä tehtyä esiprosessointia vastaava WML-versio
• Luodaan ensimmäiseksi Nanonanon sivustoa varten pohjadokumentti XSL-muotoon. Kopioi wget-komennolla nanonano.wmltmpl Nanonanon sivuston juureen www.cc.jyu.fi-palvelimelle.
• Kopioi myös esimerkkidokumentti sisältötiedostosta: nanonano.wml
• Kokeile muuntaa esimerkkidokumentti julkaisuvalmiiksi seuraavalla komennolla, joka luo nanonano.html-tiedoston:

  wml -W 2,--expansion=3183 nanonano.wml > nanonano.html

• Testaa selaimella miltä nanonano.html vaikuttaa
• Kokeile muuttaa nanonano.wmltmpl-tiedoston sisältöä ja tee esiprosessointi uudelleen. WML:n syntaksia ei tällä kurssilla käsitellä koska sen edistyneempi käyttäminen vaatii jo ohjelmointitaitoa sillä WML-tiedostoihin voi suoraan upottaa Perl-kielellä tehtyjä ohjelmia. Harjoitustyön ylläpitoon riittävät kuitenkin valmiissa mallipohjassa olevat ominaisuudet.

SSI, XSL vai WML?

Harjoitustyösivuston ylläpito sujuu hyvin millä tahansa käytetyistä tekniikoista. Tulevaisuuden kannalta eniten tutustumisen arvoinen tekniikka saattaa olla XSL mutta se on myös omalla tavallaan hankalin väline. Helpoimmalla selviää käyttämällä SSI:ta mutta enemmän ylläpitomahdollisuuksia haluavat voivat käyttää WML:ää.

Harjoitustyösivun voi tehdä myös ilman ylläpitotyökaluja, mutta tällöin esimerkiksi toistuvien elementtien, navigointien ja päivitysaikamäärien muuttaminen voi olla työlästä.