12 Kohti seittiohjelmointia Seuraavaksi tarkastelemme aidon WWW-ohjelmoinnin perusteita. Tarkoituksena ei ole vankan WWW-ohjelmoinnin oppiminen, vaan lähinnä eri ratkaisumallien esittely, jotta ohjelmoinnin perusperiaatteet tulisivat läpikäydyiksi ( näkemys ja tulevien opintojen perusta). WWW-ohjelmointia voi TTY:llä yksityiskohtaisemmin opiskella eri näkökulmista esim. kursseilla Seittiohjelmointi ja Hypermedian ohjelmointi. Dynaamisen, käyttäjät tunnistavan tai helposti ylläpidettävän WWW-hypermedian tekeminen edellyttää ohjelmointityötä. WWW:n asiakas-palvelin -mallista johtuen WWW-ohjelmointi suuntautuu kahteen erityyppisen ohjelmointiympäristöön - asiakas: WWW-selaimet (selaimen skriptiohjelmointi; esim. JavaScript, sovelmien (applet) ohjelmointi; käytännössä Javalla, komponenttiohjelmointi; esim. ActiveXkehittimellä, plug-in-ohjelmointi; esim. C++:lla) - palvelin: WWW-palvelimet (CGI-ohjelmointi, Java-ohjelmointi; esim. Servletit, erilaisiin WWW-moduuleihin perustuva ohjelmointi, esim. PHP, yleinen palvelinohjelmointi, esim. Java/C/Python/Perl-kieliset palvelinohjelmat) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 271 Ohjelmoinnin perusperiaatteet purevat tietenkin kaikkialla (suunnittelun ja dokumentoinnin merkitys, ohjelmien jako moduuleihin tai luokkiin, kehitysympäristön std-luokkien & rajapintojen käytön opettelu, jne.) Eri menetelmät vaativat kuitenkin erityisosaamistaan. Esimerkiksi WWWselainohjelmien erot sekä selainten jatkuva kehitystyö yhdistettynä heikkoon dokumentaation on tehnyt asiakaspään ohjelmoinnista käytännössä työlästä (eri selainten/selainversioiden erityispiirteet pitää tietää kohtuutarkkaan). Erikoisia pulmia aiheuttavat selainten päivityksistä aiheutuvat muutokset (se mikä toimii tänään ei ehkä toimikaan huomenna!) Nyrkkisääntö on kutakuinkin se, että asiakaspään ohjelmointi painottuu käyttöliittymäohjelmointiin ja tietoliikenteen asiakasohjelmointiin, palvelinpään ohjelmointi puolestaan prosessinhallintaan ja esim. tietokantojen käyttöön. WWW-ohjelmoinnin peruspiirteitä - asiakkaiden ohjelmistot ja verkkoyhteys vaihtelevat (selaimet, nopeus) - samanaikaisia asiakkaita voi olla useita (käyttäjien tunnistaminen, tiedon lukitseminen, rinnakkainen prosessointi, käyttöliittymässä tapaht. muutokset) - Internet on avoin ja laaja järjestelmä (tietoturvakysymykset, kansainvälisyys) - taustalla tiiviit kytkennät Internet- & WWW-määrityksiin ja ohjelmistoihin 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 272 HTML-lomakkeet ja CGI-ohjelmointi Luonteva tapa aloittaa ohjelmointi on keksiä käyttöä HTML-lomakkeille. Eräs tapa on käyttää palvelimen CGI (Common Gateway Interface)-rajapintaa Esimerkki: minilaskin joka laskee yhteen kokonaislukuja <title>minilaskin CGI/PERL</title> <form action="http://matriisi.ee.tut.fi/~huhtis/cgi-bin/count.cgi" method="get"> <input type="text" name="lukua"> + <input type="text" name="lukub"><br> <input type="submit" value="laske"> <input type="reset" value="tyhjennä"> Toiminta: selain lukee input-kenttien arvot talteen ja submit-napin painalluksella lähettää koodatut tiedot count.cgi-nimiselle (URL) ohjelmalle palvelimella Palvelimella (HTTP-palvelimen cgi-ajo-oikeuksin varustettu) ohjelma count.cgi käynnistetään pyynnön johdosta ja se vastaanottaa koodatut tiedot (GET ympäristömuuttuja/post stdin) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 273 #! /usr/bin/perl # HTTP-otsikko jotta stdout välittyy selaimelle oikein # voisi olla myös esim. text/plain tai image/gif printf "Content-type:text/html\n"; printf "\n"; printf "<title>cgi-ohjelman vastaus</title>\n"; # Kirjoitetaan näkyville asiakkaasta saatavia tietoja # (HTTP-palvelin kerää tiedot) printf $ENV{'REMOTE_HOST'."<br>"; printf $ENV{'REMOTE_ADDR'."<br>"; printf "[".$ENV{'QUERY_STRING'."]<br>"; # Luetaan koodatut numerot (oletetaan syötteen muoto oikeaksi), # lasketaan ja tulostetaan vastaus (URL:ssa + erottelee parametrit, # % koodaa erikoismerkit heksoina) $ENV{'QUERY_STRING' =~ /(\d+)[^\d]+(\d+)/; $v = $1 + $2; printf "<b>yhteenlaskun vastaus on ".$v."</b>"; Ohjelma tekee jotain ja tulostaa stdouttiin tekstiä joka lähetetään takaisin asiakkaalle Esimerkki: Ajo koneelta pc.tut.fi (10.20.30.40) syötteillä 3 ja 6 tuottaa tuloksen: 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 274
pc.tut.fi 10.20.30.40 [lukua=3&lukub=6] Yhteenlaskun vastaus on 9 - CGI-ohjelma on kirjoitettu Perl-ohjelmointikielellä (ts. CGI ei ole ohjelmointikieli vaan rajapinta) - CGI-ohjelman tuloste on HTML-tekstiä - ohjelman ajo tehtiin kertakutsuna; ts. syöte ajo tuloste - lomakkeen tiedot koodattiin GET-metodissa mukaan URI-tunnisteeseen (http://matriisi.ee.tut.fi/~huhtis/cgi-bin/count.cgi?lukua=3&lukub=6) - lomakkeen tietojen koodauksen purkaminen on tarpeen (tähän on valmiita ratkaisuja) - jos Perl-skriptin koodirivi $v = $1 + $2; olisi kirjoitettu muodossa $v = eval($1 + $2); olisi ohjelmassa selvä tietoturva-aukko HTML-lomakkeiden ohjelmointi JavaScriptillä Vastaava laskuohjelma voidaan toteuttaa myös asiakaspäässä esim. JavaScriptillä seuraavasti : <title>minilaskin JS</title> <script language="javascript"> <!-- function laske(a,b) { return 1.0*a+1.0*b; --> </script> <form> <input type="text" name="lukua"> + <input type="text" name="lukub"> = <input type="text" name="ans"><br> <input type="button" value="laske" onclick="ans.value=laske(lukua.value,lukub.value);"> <input type="reset" value="tyhjennä"> CGI-toteutukset toimivat käytännössä huomattavasti varmemmin kuin JS-toteutukset 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 275 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 276 HTML:n lomake-elementit HTML 4.01 version mukaiset lomakkeet voivat sisältää seuraavantyyppisiä elementtejä - erilaisia painikkeita (myös omalla grafiikalla) - valintaruutuja (checkbox) - radiopainikkeita (radiobutton) - valikoita - tekstin syöttökenttiä (yksi- tai monirivisiä, myös salasanan syöttökenttä(password)) - piilotettuja kenttiä (esim. muuttujien taltioimiseen HTTP on tilaton protokolla) - tiedoston valintanappulan (toteuttaa myös valintadialogin tiedoston upload-toimintoa varten) - lomakkeen kentät tyhjentävän reset-nappulan Lomakkeiden käyttäminen vaatii aina ohjelmointia (HTML:n ulkopuolella) XHTML ja lomakkeet XHTML sisältää käytännössä kaikki HTML4:n lomake-elementit Suositus XHTML:n sanaston modularisoinnista nostaa seuraavat lomake-elementit keskeiseen asemaan (ts. ne sisältyvät Basic Forms Moduleen): - form - input ( text password checkbox radio submit reset hidden ) - label - select - option - textarea Erityisesti pois marginaalisina elementteinä jäävät esim. - input (image) - button (omaa grafiikkaa sis. nappulat), 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 277 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 278
PHP Pienten (joskus myös suurten) WWW-ohjelmien kirjoittaminen on toisinaan kätevintä seuraavalla idealla: - HTML-sivuun (osaksi merkkausta) upotetaan elementinomainen prosessointiohje, joka sisältää WWW-palvelinpäässä suoritettavan ohjelman tai skriptin - kun WWW-asiakas (selain) pyytää sivua, WWW-palvelin suorittaa skriptit ja sijoittaa näiden tulostaman tekstin osaksi HTML-dokumenttia, joka sitten lähetetään asiakkaalle (jos tuloksena on HTML-sivu näkyy se selaimessa ongelmitta) - jos ja kun skriptillä on muita vaikutuksia (esim. tiedostojen kirjoittaminen, tietokannan käsittely jne.), palvelin hoitaa myös ne pyynnön yhteydessä (tai välittää sopiville moduuleille edelleen suoritettaviksi) - tehtävästä huolehtiva WWW-palvelin (tai sen moduuli) voi jäsentää myös tietoliikenteessä liikkuvaa tietoa helposti käsiteltävään muotoon ja esim. piilottaa tilattoman HTTP-yhteysmuodon rajoituksia (tarjoamalla esim. mekanismin session tallettamiseen [esim. evästeiden avulla]) jne. Eräs tällainen (suosittu, ilmainen) ns. template-kieli on PHP 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 279 PHP:n käyttö PHP voidaan ottaa käyttöön esim. Apache-WWW-palvelinohjelman moduulina (asentaminen riippuu käyttöjärjestelmästä NT/Unix/Linux) PHP:n syntaksi muistuttaa suuresti Perliä (ja siten osin C:tä ja siten Javaa) Ohjelmointikielen perusrakenteiden ohella PHP:n (4) voima on sen sisältämien funktioiden määrä, esim. - tuttu syntaksi & säännönmukaiset lausekkeet - yksinkertainen olio-ohjelmointi - tiedostojenkäsittely - sessionhallinta, matalan tason soketti-ohjelmointi - eri tietokantojen käsittely SQL-kielellä - dynaamiset kuvat, jne. Parasta on se, että asiakaspään ei tarvitse tietää PHP:stä mitään Perus-PHP:n päälle on myös rakennettu sovelluskohtaisia kirjastoja 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 280 Esimerkki Toteutetaan taas minilaskin-lomake joka laskee kokonaisluvut yhteen: <title>minilaskin JS</title> <?php $v=$lukua+$lukub;?> <form action="<?php print $PHP_SELF;?>" method="get"> <input type="text" name="lukua" value="<?php print $lukua;?>"> + <input type="text" name="lukub" value="<?php print $lukub;?>"> = <input type="text" name="ans" value="<?php print $v;?>"><br> <input type="submit" value="laske"> <input type="reset" value="tyhjennä"> - lomakkeen action-kentässä viittaus lomakkeeseen itseensä ($PHP_SELF) - yo. koodi ei ole HTML:ää, mutta prosessoinnin tulos on (joskaan ei validia sellaista) - muuttujien käsittely! (PHP purkaa lomakkeen muuttujien koodauksen automaattisesti) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 281 Esimerkki tiedostojen käsittelystä Toteutetaan astetta monimutkaisempi PHP-ohjelma, joka tulostaa attribuuttina annetun tiedoston <title>tiedoston tulostaminen</title> <h1>pfile</h1> <p>työhakemistosta löytyvät seuraavat tiedostot:</p> <pre> <?php system('ls -al');?> </pre> <p>kirjoita tulostettavan tiedoston nimi:</p> <form action="<?php print $PHP_SELF;?>" method="get"> <input type="text" name="fn" value="<?php print $fn;?>"> <input type="submit" value="tulosta"> <?php if (preg_match("/[^\w\.\-]/",$fn,$arr)) { print "Virhe tiedoston nimessä: hakemistoviittaukset tms. eivät ole sallittuja!"; exit; 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 282
if (!file_exists($fn)) { print "Virhe: tiedostoa $fn ei löydy!"; exit; print "<p>tulostus:</p><pre>\n"; $fp = fopen($fn,"r"); while(! feof($fp)) { $s = fgets($fp, 1024); $s = preg_replace("/\</","<",$s); print $s; fclose($fp); print "</pre>\n";?> - lauserakenteet - tiedostonkäsittely, system-funktion käyttö, - PHP-funktioiden nimeämiskäytäntö (ei paketteja tms.) Java Java on C/C++-tyyppinen olio-ohjelmointikieli joka soveltuu hyvin WWW-ohjelmointiin - kansainvälisyyden huomiointi: Unicode, kansainvälistäminen (i18n): käyttöliittymien tekstit ja muut resurssit, tekstin suunta, päivämäärät yms. - suoraviivaiset välineet Internet-ohjelmointiin ja ohjelmien hajauttamiseen, rajapintoja tietokantojen käyttöön, tietoturvamallit yms. - aito olio-ohjelmointi (oikea perintä & kapselointi, paketit, rajapinnat) - laaja ja hyvin dokumentoitu luokkakirjasto, runsaasti rajapintatoteutuksia - yleisesti käytössä (sovelmien tuki on pulmallinen [selainsodat]) Java-ohjelmat käännetään tavukoodiksi, jota ajetaan Java-virtuaalikoneessa (valmis tavukoodi siirtyy alustalta toiselle) Runsaasti ilmaisia työkaluja & ohjelmointioppaita saatavilla Useita eri versioita (läh. 1.0 / 1.1 / 1.2=Java 2 / + laajennuksia [Swing]) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 283 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 284 Java-ohjelmia on mahdollista kirjoittaa kehittyneen IDE:n (Integrated Development Environment) tukemana ilman tietoa sovellusten yksityiskohdista (vrt. VB/Delphi); usein Java-ohjelmat kuitenkin kirjoitetaan tekstimuodossa (esim. emacs) ja käännetään skriptin avulla (esim. Apache Ant/GNU Make). WWW-ohjelmoinnin näkökulmasta Javalla tehdään kolmenlaisia ohjelmistoja - sovellukset (täysverinen Java-ohjelma) - sovelmat eli appletit (selaimessa tms. rajoitetun oikeuksin ajettava ohjelma) - servletit (CGI-tyyppisesti palvelinpäässä ajettavia Java-ohjelmia) Kaikki Java-ohjelmat kirjoitetaan samalla tavalla olio-ohjelmoinnin perusfilosofian mukaisesti Java-ohjelman tyyppi määräytyy sen luokan mukaan, josta oma ohjelma peritään - sovellus voidaan periaatteessa kirjoittaa ilman perintää (tällöin piilotettu oletusperintä Object-luokasta) - perus-sovelma peritään Applet-luokasta - perus-servletti peritään HttpServlet-luokasta Jokainen ohjelmatyyppi toteuttaa tarvittavat (perityt) metodit ja rajapinnat 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 285 Esimerkki: Java-sovelma Kirjoitetaan minimalistinen Java-sovelma (Java 1.1) joka laskee kaksi lukua yhteen ja näyttää vastauksen Java-ohjelma on varsin lyhyt (huom!: vaatii toimiakseen virtuaalikoneen & kirjastot ajettuna vaatii enemmän tilaa kuin tavukoodin 1.5 kb!): import java.awt.*; import java.awt.event.*; import java.applet.*; public class calc extends Applet implements ActionListener { TextField ta = new TextField(5); TextField tb = new TextField(5); TextField tc = new TextField(5); Button b = new Button("Laske"); 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 286
public void init() { b.addactionlistener( this); add( ta); add( new Label( "+")); add( tb); add( new Label( "=")); add( tc); add( b); public void actionperformed( ActionEvent ae) { int v = (new Integer(ta.getText())).intValue() + (new Integer(tb.getText())).intValue(); tc.settext((new Integer(v)).toString()); Sovelman upottaminen HTML-dokumenttiin: <applet code="calc.java" width="300" height="200"> </applet> - luokkien käyttö (AWT:n monimutkaisuus), kielen kielioppi, roskienkeruu, vahva tyypitys - luokkasidonnaisuus (kaikki perustietotyyppejä lukuun ottamatta toimii luokkien varassa) - jämerä ohjelmointimalli: 5min hack-spagetti-hack -ohjelmointi ei Javalla oikeastaan edes onnistu tästä on sekä hyötyä että haittaa (protoilun pulmat) - kehitysvälineet (javac, javadoc) Java-ohjelmointi edellyttää - Internet-tekniikoiden & olio-ohjelmoinnin perusteiden tuntemusta - Java-tietotyyppien & -luokkakirjastojen hallintaa - javadoc-muotoisen dokumentaation sisälukutaitoa - selkeää etukäteissuunnittelua: lyhytnäköinen (lue: hän-joka-ei-luokkia-suunnittele) Java-ohjelmoija kirjoittaa sovelluksen nopeasti solmuun ja tuloksena on vielä pahempaa spagettia kuin esim. PHP-koodi 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 287 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 288 Oikea väline WWW-ohjelmointiin? WWW-ohjelmointiin ei ole yhtä ainoaa oikeaa tekniikkaa Tekniikan valintaan vaikuttavat esimerkiksi - sovelluksen koko ja monimutkaisuus - tekijätiimin koko ja osaaminen - sovelluksen kohderyhmän käytössä olevat ohjelmistot ja laitteet - sovelluksen kohderyhmän osaamistaso ja tottumukset Palvelintekniikoiden kärjistetty suuruusjärjestys: - CGI: Python/Perl => palautelomake, vieraskirja - template-kielet: PHP/JSP/ASP => portaali, verkkokauppa - sovelluspalvelimet: J2EE(JBOSS/BEA WebLogic)/ColdFusion => sähköinen liiketoiminta, Web Services, intra- ja ekstranetit Mitä tuntemattomampi asiakas sitä vähemmän sovelluslogiikkaa voidaan sijoittaa selaimeen (JavaScript, Java-sovelmat, Active-X, pluginit)! 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 289 Tarve ohjelmointiin: mukautuva hypermedia Samaan tapaan kuin esim. navigointia helpottava kalansilmänäyttö muuttuu navigoinnin myötä, myös varsinainen asiasisältö voidaan (periaatteessa) mukauttaa käyttäjän tarpeiden mukaisesti Mukautuvalla (adaptive) hypermedialla tarkoitetaan tilannetta jossa esim. - hypertekstin linkkejä piilotetaan tai näytetään käyttäjän navigointihistorian/navigointistrategian/toiveiden mukaisesti - solmuihin lisätään osia tai niitä piilotetaan - hypertekstiin luodaan dynaamisesti uusia karttoja (tms. näkymiä) - myös osa sisällöstä tuotetaan dynaamisesti, jne. Käyttäjälle (lukijalle) välitettävän informaation tarkoituksenmukainen määrä on mitä ilmeisimmin käyttäjäkohtaista niinpä mielekäs aktiivinen mukauttaminen edellyttää jotain tietoa käyttäjästä. Tiedon keruumekanismeja: - suorat kysymykset (Mitä haluat tehdä/nähdä? Mitä osaat?) - epäsuora päättely (esim. päättely navigointihistorian/tehtävien perusteella) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 290
Mukautuvuuden tekninen toteutus tarvitsee taustalle käyttäjästä kertovan tietorakenteen eli käyttäjämallin ja mekanismin hypertekstin mukauttamiseen Rikas hypertekstirakenne Käyttäjämalli Käyttäjälle esitettävä hyperteksti Perusratkaisu (koska helppo toteuttaa!) käyttäjämallinnukseen on ns. overlay-mallien käyttö (hypertekstin graafiin merkitään informaatiota käyttäjästä, esim. tietääkö esitiedot/milloin lukenut/ymmärsikö/mitä haluaisi tietää/jne.) 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 291 Esimerkki mukautuvan sovelluksen toteuttamisesta: - toteutetaan yksi mahdollisimman rikas hyperteksti - mallinnetaan käyttäjiä suhteessa tähän (esim. rikkaan semanttisen verkon avulla overlay-periaatteella [verkon rakenne ~ hypertekstin rakenne]) - alustetaan käyttäjämalli stereotyyppien noviisi/peruskäyttäjä/ekspertti avulla esim. lyhyen alkukyselyn tms. perusteella; päivitetään käytön myötä - linkkejä ja solmujen yksityiskohtia (mukautuvat elementit) näytetään mukautuvasti - epäsuora päättely tehdään käyttäjän lokitietojen perusteella; vaikeasti pääteltävät asiat kysytään suoraan käyttäjiltä epäsuoran päättelyn sijaan - päähuomio on näkymien ja karttojen mukauttamisessa Sisällön todellinen mukauttaminen edellyttää astetta järeämpien tekoälytekniikoiden tapauskohtaista käyttöä (esim. tietämyskantoja, joista tietoa julkaistaan hypermediasovellukseen) näissä taas törmätään tekoälytieteiden ongelmiin (tiedon esittäminen, kontekstin tunnistaminen, jne.) Toteutus vaatii sovelluskohtaisia ratkaisuja & ohjelmointia, ts. valmiita, yleisesti käytössä olevia alustoja ei prototyyppisovelluksia (esim. ELM ART, ks. http://apsymac33.uni-trier.de:8080/art/login-e.html) lukuun ottamatta juuri ole 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 292 Lopuksi Monipuolisen hypermedian toteuttaminen edellyttää väistämättä työn automatisointia - rutiinitehtävät siirretään ihmiseltä tietokoneen vastuulle - tietokone on tyhmä, joten tieto on kuvattava täsmällisesti W3C:n Semanttinen Web tarjoaa keinot tiedon kuvaamiseen: - Resource Description Framework (RDF): resurssien ominaisuuksien kuvaileminen - Web Ontology Language (OWL): käsiteverkkojen (ontologia) täsmällinen kuvaaminen ohjelmallisen päättelyn (infer) tueksi Mukautuvan hypermedian ohella ohjelmointikielten avulla voidaan toteuttaa monikanavajulkaisemisen idea - erilaisten näkymien tekeminen samasta tietosisällöstä: mahdollistaa esimerkiksi laiteriippumattomien ja saavutettavien versioiden kustannustehokkaan toteuttamisen Käytännössä monikanavajulkaiseminen ja mukautuva hypermedia ovat pelkästään erilaisia lähestymistapoja samaan asiaan: monikanavajulkaisemisen avulla voidaan toteuttaa käyttäjän, käyttötilanteen tai päätelaitteen perusteella mukautuvia sovelluksi 7307000 HYPERMEDIAN PERUSTEET (syksy 2004) 293