Dynaamiset WWW-sivut

Jos web-projektisi on sellainen, että sivujen sisältö muuttuu usein tai samaa sisältöä pitäisi tarjota yhtä aikaa eri muodoissa, ei ole kovinkaan järkevää toteuttaa sivustoa staattisiin tekstitiedostoihin perustuvilla HTML-sivuina (.html). Sama pätee tilanteissa, jossa osa sisällöstä toistuu usein, kuten esimerkiksi tismalleen sama navigointipalkki usealla eri sivulla.

Ajatellaanpa tilannetta, jossa esimerkiksi nimeämätön (suomalainen) kännykkävalmistaja julkaisee webissä kaikkien valmistamiensa kännyköiden ominaisuudet ja muut tiedot. Tällöin jokaiselle uudelle kännykkämallille täytyy tehdä oma HTML-sivunsa, jossa on kännykän malli, kuva, tekniset tiedot, ominaisuudet ja lisälaitteet.

Tämä ei kuitenkaan riitä, sillä kännykän mallinumero näkyy muuallakin, esimerkiksi hakusivuilla sekä kännykkämallilistauksissa:

Aina kun uusi puhelinmalli julkaistaan, pitäisi siis päivittää useita kymmeniä ellei satoja HTML-sivuja, jotta uuden puhelimen mallinumero löytyisi jokaisesta paikasta, johon siihen saatetaan viitata.

Tätä ei tietenkään tehdä käsin, sillä se olisi käytännössä mahdoton tehtävä. Ongelma ratkaistaan siten, että näitä HTML-sivuja ei tehdäkään kiinteästi omiin tiedostoihin, vaan ne generoidaan dynaamisesti tarpeen mukaan. Tämä tarkoittaa, että missään ei ole olemassa sellaista tekstitiedostoa, joka pitäisi sisällään kunkin sivun koodin sellaisenaan, vaan sivun näyttämiseen tarvittava HTML-koodi generoidaan lennosta käyttämällä apuna

1. tähän soveltuvaa ohjelmointikieltä
2. tietokantaa, johon on tallennettu kaikkien puhelimien tiedot, sekä
3. www-palvelinta, joka osaa näitä hyödyntämällä generoida HTML-koodin.

Alla on esitetty tämän prosessin kulku yksinkertaisena kaaviona:

1. Selain pyytää palvelimelta tietyn WWW-sivun.
2. WWW-palvelin tietää, ettei kyseistä sivua ole itse asiassa olemassa vaan se pitää generoida lennosta käyttäen apuna tietokannasta löytyviä tietoja. Tarvittavat tiedot pyydetään tietokantapalvelimelta. Usein tietokantapalvelin pyörii samassa tietokoneessa.
3. Tietokantapalvelin palauttaa tarvittavat tiedot WWW-palvelimelle
4. WWW-palvelin koostaa annetuista tiedoista tarvittavan HTML-koodin, joka lähetetään selaimelle

Selaimen näkökulmasta tällä prosessilla ei ole mitään eroa perinteiseen menetelmään, jossa HTML-koodi sijaitsee kiinteässä (staattisessa) tekstitiedostossa. Loppujen lopuksi palvelin kun palauttaa selaimelle jonkun HTML-koodin eikä sillä ole väliä, mistä tuo koodin on peräisin ja miten se on tehty.

Jos järjestelmä on oikein suunniteltu, uuden puhelinmallin lisääminen järjestelmään onnistuu todella helposti. Riittää että sen tiedot tallennetaan tietokantaan - kaikki muu tapahtuu siitä eteenpäin automaattisesti, eikä yhdenkään www-sivun tai toisen puhelimen tietoihin tarvitse koskea.

Tekniset tarpeet dynaamisten sivujen toteuttamiseksi

Yllä mainitun esimerkin toteuttamiseen tarvitaan

1. WWW-palvelin,
   joka pystyy koostamaan jollain ohjelmointikielellä HTML-sivuja dynaamisesti. Microsoft XP Professionalin mukana tulee WWW-palvelinpaketti nimeltään Internet Information Server (IIS), joka sisältää myös FTP-palvelimen. Tämä IIS osaa tulkista ASP-nimistä ohjelmointikieltä (olet saattanut jossain webissä nähdä tiedostoja, joiden pääte on .asp).
   
   Mac OSX:n mukana tulee vastaava paketti nimeltään Apache. Se on ilmainen WWW-palvelin, joka on saatavissa Macin lisäksi Linuxille ja Windowsille.
   
   Apacheen tulee lisätä vielä tuo ohjelmointikielipaketti. Se on nimeltään PHP, ja tähän kieleen pohjautuvia ratkaisuja ja valmiita koodipätkiä löytyy netistä vaikka kuinka, manuaaleista ja ohjeista puhumattakaan.
   
   ASP ja PHP-kielten opettelu ei kuulu kuitenkaan kurssin sisältöön, eikä niitä täysin kokematon tietokoneen käyttäjä opi muutamassa tunnissa.
2. Tietokantapalvelin
   Sekä Windowsille että Macille (ja myös Linuxille) on saatavilla muutamia ilmaisia tietokantapalvelimia, joista yleisin on MySQL. Toinen varteenotettava vaihtoehto on PostgreSQL, joka on aavistuksen verran hankalampi käyttää (vähemmän näppäriä apuohjelmia tarjolla) mutta on joiltain ominaisuuksiltaan monipuolisempi.

Jos haluat opetella PHP- ja SQL-ohjelmointia kotona, voit ladata valmiin paketin joka sisältää kaiken tarvittavan eli Apachen, PHP-moduulin sekä MySQL-tietokannan valmiiksi konfiguroituna. Tällaisia paketteja on useita, joista voisin suositella esim. EasyPHP-järjestelmää (Windows). Lisäksi hakukoneiden avulla löytyy valmiita ohjelmia, sovelluksia, koodinpätkiä sekä ohjeita.

SHTML

Todellisten dynaamisten sivujen tekemiseen tarvitaan aika monipuolisia ohjelmointitaitoja. Jos dynaamisuutta tarvitaan paljon vähemmän ja ongelmat ovat edellistä esimerkkiä yksinkertaisempia (esim. saman koodin toisto joka sivulla), voidaan hyödyntää helpompaa apukeinoa. Tämä menetelmä on nimeltään Server Side Include (SSI), eli erittäin vapaasti suomennettuna "palvelimen päässä tehtävä tiedostojen sisällyttäminen toisiinsa".

Esimerkki 1.

Olen suunnitellut web-sivuston, jossa jokaisen sivun otsikko on samanlainen. Lisäksi menu toistuu lähes samanlaisena koko ajan:

Jotta kaikkea koodia ei tarvitsisi monistaa jokaiselle sivulle, voin jakaa sivun osiin, tallentaa jokaisen osan omaan tiedostoonsa ja lopulta koota haluamani sivun näistä palasista.

Tallennan sivun alkuosan omaan tiedostoonsa alku.html. Lisäksi tallennan menun sisällön omaan tiedostoonsa menu.html. Nämä .shtml-tiedostot eivät sisällä kokonaista HTML-sivua vaan osia niistä.

Uuden sivun kasaan käyttämällä näitä osia:

<!--#include file="alku.html" -->
<table>
<tr>
<td>
<!--#include file="menu.html" -->
</td>
<td>
	Sivun sisältö tähän.
</td>
</tr>
</table>
<!--#include file="loppu.html" -->

Huom! Jos koostat sivun käyttämällä SSI-ominaisuutta, tulee tiedoston nimen olla .shtml-päätteinen. Pelkkä .html ei siis riitä, sillä jollain tavalla täytyy palvelimelle kertoa, että kyseessä on useammasta eri tiedostosta koostettava sivu. S-kirjain kertoo palvelimelle, että voidakseen antaa palvelimelle sivun koodin, täytyy sen käyttää Server Side Include -ominaisuutta.

Jos avaat shtml-tiedoston suoraan tietokoneesi kovalevyltä, näet vain sen koodin joka on kirjoitettu ko. tiedostoon - muissa tiedostoissa olevaa koodia ei koneesi selain osaa yhdistää, sillä se kuuluu palvelimen tehtäviin. Sivujen kasaaminen tapahtuu siis palvelimessa etkä voi katsella valmista .shtml-sivua kotikoneellasi ilman että asennat siihen oman www-palvelimen.

---

Vinkki kokeneille Mac OSX-käyttäjille.

Tässä pikaohjeet oman www-palvelimen käynnistämiseksi sekä SSI-toiminnon aktivoimiseksi.

1. Avaa System preferences (Säätimet)
2. Avaa sieltä Sharing (Jako)
3. Käynnistä Personal Web Sharing (suomeksi ??)
4. Tallenna jotain HTML-koodia kotihakemistosi Sites-hakemistoon (esim. jos käyttäjätunnus on Elvis: Macintosh HD -> Users -> Elvis -> Sites). Anna tiedostolle vaikka nimeksi test.html.
5. Avaa selain ja naputa osoitteeksi http://localhost/~elvis/test.html Nyt pitäisi näkyä tallentamasi sivu. Se mikä tämän eroittaa aiemmasta toimintatavasta on se, että nyt katselet sivua oman web-palvelimesi kautta etkä ns. paikallisesti suoraan kovalevyltä.
6. HUOM! Tästä eteenpäin harjoitus on erittäin vaativa!
   Jos haluat kokeilla miten Server Side Include toimii kotikoneellasi, tallenna jotain koodia edellä mainitun esimerkin mukaisesti tuohon hakemistoon, ts. alku.html ja loppu.html, sekä jokin test.shtml -tiedosto, jonka koodi on

   <!--#include file="alku.html"  -->
   Test test test
   <!--#include file="loppu.html" -->
   

7. Avaa selain ja kirjoita osoitteeksi "http://localhost/~elvis/test.shtml". Include-toiminto ei välttämättä vielä toimi, sillä se pitää konfiguroida käyttöön. Tämä saattaa olla liian hankalaa useimmille, mutta tässä silti ohjeet:
   1. Avaa Terminal (Pääte)
   2. Kirjoita sudo pico /etc/httpd/httpd.conf. Tämä avaa unix-tekstieditorissa tiedoston nimeltä httpd.con (sijaitsee piilotetussa /etc -hakemistossa) niin sanotussa "super user do" eli sudo-moodissa. Kysyy root-käyttäjän salasanaa, joka yleensä yhden käyttäjän koneessa on sama kuin pääkäyttäjän salasana (ts. omasi).
   3. Nyt pitäisi etsiä asetustiedostosta sellainen kohta, jossa määritellään ovatko shtml-tiedostot otettu käyttöön. Helpoin tapa löytää tämä kohta on käyttää find-toimintoa. Paina siis Ctrl+W (siis Control, ei omppu) ja kirjoita "shtml" ja paina Enter.
   4. Vielä ei löytynyt oikea kohta joten paina uudestaan Ctrl+W ja Enter.
   5. Nyt pitäisi olla ruudulla seuraavat asetukset:

      # To use server-parsed HTML files
      #
      #AddType text/html .shtml
      #AddHandler server-parsed .shtml

      
      Poista noista Add-alkuisista riveistä kommenttimerkki "#":
      

      # To use server-parsed HTML files
      #
      AddType text/html .shtml
      AddHandler server-parsed .shtml
      

      Tämä onnistuu liikkumalla nuolinäppäimillä oikealle kohdalle ja painamalla Backspace-näppäintä.
   6. Samalla menetelmällä pitäisi vielä muuttaa seuraava asetus:

      # Each directory to which Apache has access, can be configured with respect
      # to which services and features are allowed and/or disabled in that
      # directory (and its subdirectories).
      # 
      # First, we configure the "default" to be a very restrictive set of
      # permissions.
      # 
      <Directory />
          Options FollowSymLinks 
          AllowOverride None
      </Directory>
      

      Lisää sana "Includes" Options-riville

      <Directory />
          Options FollowSymLinks Includes 
          AllowOverride None
      </Directory>
      

   7. Tämän jälkeen pitäisi vielä tallentaa tiedosto. Paina siis Ctrl+X ja tämän jäkeen kuittaa tallennus painamalla Y (yes) ja lopuksi Enter.
   8. Tähän mennessä olemme muuttaneet WWW-palvelimen yleisiä asetuksia. Mac OS X:ssä on kuitenkin vielä käyttäjäkohtaiset asetukset, joita täytyy käydä rukkaamassa. Jos käyttäjätunnuksesi on Pekka, niin pääset asetuksiisi käsiksi kirjoittamalla terminaaliin
      sudo pico /etc/httpd/users/pekka.conf
   9. Muuta tiedoston sisältö seuraavanlaiseksi:

      <Directory "/Users/pekka/Sites/">
          Options Indexes MultiViews Includes
          AllowOverride None
          Order allow,deny
          Allow from all
      </Directory>
      AddType text/html .shtml
      AddHandler server-parsed .shtml

   10. Tallenna tekemäsi muutokset painamalla Ctrl+X ja tämän jäkeen kuittaa tallennus painamalla Y (yes) ja lopuksi Enter.
   11. Jotta asetukset astuisivat voimaan, käynnistä web-serveri uudestaan (System preferences -> Sharing-> Personal Web Sharing -> Stop & Start