Tällä kerralla on tavoitteena käydä läpi verkkopalvelun toteuttamiseen liittyviä asioita Mitkä tekijät asettavat reunaehtoja verkkopalvelun toteutukselle? Mitä kaikkea verkkopalvelun toteutuksessa on otettava huomioon? Loppukäyttäjä: käytettävyys (käytön tehokkuus ja virheettömyys, subjektiivinen tyytyväisyys) & saavutettavuus,... Kehittäjä/ylläpitäjä: ylläpidettävyys & päivitettävyys, muokattavuus, uudelleenkäyttö,... Miten verkkopalvelun tyypilliset toiminnot toteutetaan? Verkkopalvelun toiminnallisuus perustuu lomakkeisiin, joten yksittäisten toimintojen toteuttaminen on pääpiirteissään samanlaista sovelluksesta toiseen Toteutustyön tueksi on olemassa valmiita suunnittelumalleja ja sovelluskehyksiä: tyhjästä on yleensä turha aloittaa Tutustutaan ensin tarkemmin verkkopalvelun toteutustyön reunaehtoihin eri näkökulmasta ja käydään sitten läpi esimerkkejä siitä, miten reunaehdot käytännössä otetaan huomioon toteutustyössä MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 52 Näkökulmia verkkopalvelun toteutukseen Sovelluksen käytettävyyden kriteerejä loppukäyttäjän näkökulmasta (ISO 9241): käyttäminen helppo oppia, käyttäminen on tehokasta (noviisi vs. ekspertti), helposti muistettavissa, aiheuttaa vähän virheitä ja on mukava käyttää. Teknisen toteutuksen kriteerejä: Kustannustehokkuus, luotettavuus ja yhdenmukaisuus (Welling & Thompson) Päivitettävyys, siirrettävyys, uudelleenkäyttö, yhteensopivuus, virhesietoisuus (ohjelmistotuotanto) Tutustutaan seuraavaksi hieman tarkemmin siihen, miten kriteerit otetaan huomioon verkkopalvelun teknisessä toteutuksessa. MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 53 Heuristinen käyttöliittymäsuunnittelu (kertausta) Heuristiikan noudattaminen: esimerkkejä (1/3) Tyypillinen hyvän käyttöliittymäsuunnittelun muistilista sisältää esim. seuraavat kohdat (Nielsen): järjestelmän tila (jos on pakko käyttää) pitää olla aina käyttäjän tiedossa järjestelmän käsitteiden tulee vastata sovellusalueen käsitteitä ei-toivotut komennot on voitava selkeästi peruuttaa (lipsahdukset!) käsitteiden ja toimintojen tulee olla systemaattisia ja odotusten mukaisia käyttövirheet tulee ennakoida ja ennaltaehkäistä virheiden tekeminen käytön tulee olla havaitsemista ulkoa muistamisen sijaan eksperteille on tarjottava tehokkaita menetelmiä (optiot ja mukautuvuus) pieni on kaunista toteuta selkeät virheviestit jotka ehdottavan ongelman korjaamista ohjeet ja dokumentaatio tulisivat aina olla tarvittaessa saatavilla Itsestään selviä asioita? Tuppaavat ainakin unohtumaan kovin helposti! MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 54 Järjestelmän tila: Sisään kirjautuneen käyttäjän tunnus/nimi näytetään sovelluksen käyttöliittymässä (+ mahdollisuus uloskirjautumiseen) Käyttäjän sijainti sovelluksessa: mukautuva valikko tai murupolku Portaali: kooste järjestelmän tilasta käyttäjän mieltymysten perusteella Järjestelmän käsitteet vs. käyttäjä: Human-Computer Interaction (HCI) ja käyttäjäkeskeinen suunnittelu Toiminnallisuuden ja teknisen suunnittelun erottaminen Käsitteiden testaaminen prototyyppien avulla Toimintojen peruuttaminen: Esikatselu ja hyväksyminen Mahdollisuus syötetyn tiedon muokkaamiseen/poistamiseen Peruuta-toiminnon toteuttaminen hankalaa! MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 55
Heuristiikan noudattaminen: esimerkkejä (2/3) Heuristiikan noudattaminen: esimerkkejä (3/3) Toimintojen systemaattisuus: Yhtenäisyys: sivupohjat ja kielitiedostot kirjastojen toteuttaminen käyttöliittymien tuottamiseen, käyttöliittymän irrottaminen toimintalogiikasta Käyttövirheiden ennakointi ja ennaltaehkäisy Ohjeet ja opasteet, käyttöliittymäsuunnittelu,... Testaaminen (prototyypit)! Käyttö havaitsemista, ei ulkoa muistamista: Ohjeet ja opasteet, käyttöliittymäsuunnittelu,... Hakutoiminto: tiedon visualisointi vs. avainsanahaku Eksperteille tehokkaita menetelmiä: Käyttäjäroolit Mukautuva hypermedia MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 56 Pieni on kaunista: Yksinkertainen asiakas, käyttöliittymäsuunnittelu Yksinkertaisen verkkopalvelun suunnitteleminen on huomattavasti työläämpää kuin monimutkaisen! Selkeät virheviestit: Tieto siitä, missä virhe on ja ohjeet virheen korjaamiseksi Ohjeet ja dokumentaatio saatavilla: Verkkopalvelun käyttöliittymässä on riittävästi tilaa siihen, että suuri osa ohjeista voidaan upottaa suoraan sovellukseen Oletukset julkaisukontekstista (käyttäjä, päätelaite & verkkoyhteys, tuki skripteille tai evästeille, pakolliset selainlaajennukset, ) on aina kerrottava käyttäjälle Sovellusten arviointiin tarkoitettuja heuristiikkoja voi vapaasti käyttää apuvälineenä myös sovelluksen suunnittelutyössä MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 57 Lomakkeet ja syötteen käsittely Verkkopalvelun tekninen toteutus perustuu lomakkeisiin. Verkkopalvelun toiminto sisältää tyypillisesti seuraavat vaiheet: 1. Käyttäjä syöttää toiminnon edellyttävät tiedot lomakkeeseen ja lähettää lomakkeen sovellukselle 2. Sovellus ottaa pyynnön vastaan ja tarkastaa (validoi) syötteen Syötteen ollessa laillinen: 3. Syötteen perusteella valitaan osa sovelluksen tietosisällöstä (turvallinen toiminto, ~haku) tai muutetaan sovelluksen tilaa (ei-turvallinen toiminto, ~tilaus) 4. Käyttäjä ohjataan uuteen näkymään, jossa kerrotaan toiminnon onnistumisesta ja näytetään haun tulos tai sovelluksen uusi tila Syötteen ollessa virheellinen: 3. Käyttäjä ohjataan takaisin näkymään, jossa virhe on tapahtunut. Näkymään liitetään korjausehdotuksen sisältävä virheilmoitus ja korostetaan virheellisen syötteen sisältävä lomakkeen komponentti tai komponentit Syötteen tarkastaminen Reunaehtoja syötteen laillisuudelle: Tietokanta: syötteen pakollisuus (pääavain tai not null), sarakkeen sisällön maksimikoko tai yksikäsitteisyys (pääavain) Määrämuoto: sähköpostiosoite, henkilötunnus, päivämäärä, viitenumero, ISBNtunnus, URI,... Laillinen syöte määritellään usein osana sovelluksen toiminnallista määrittelyä (vrt. HYTT) Keino tarkastamiseen: säännölliset lausekkeet (regular expressions) Määritellään merkkijonon sallittu hahmo (pattern), jota verrataan tutkittavaan merkkijonoon Säännöllisiä lausekkeita voi käyttää myös merkkijonojen etsimiseen ja korvaamiseen Syötteen pakollisuuteen ja merkkijonon pituuteen liittyvät tarkastukset voidaan toteuttaa käytössä olevan ohjelmointikielen kirjastofunktioilla MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 58 MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 59
Säännöllisten lausekkeiden perusteet Säännöllisen lausekkeen hahmo koostuu merkeistä ja metamerkeistä (metacharacters) (Lähde: Rantala, A. PHP Web-ohjelmoinnin peruskirja): vaihtoehto ^ seuraava lauseke merkkijonon alussa $ edeltävä lauseke merkkijonon lopussa. mikä tahansa merkki (yksi) * edellisen lausekkeen toisto 0 tai useamman kerran + edellisen lausekkeen toisto 1 tai useamman kerran? edellisen lausekkeen toisto 0 tai 1 kertaa () lausekkeen ryhmittely (ja varastointi) [] merkkijoukko {} edellisen lausekkeen toisto vähintään n ja enintään m kertaa {n,m} \ metamerkin merkityksen poisto Esimerkki säännöllisestä lausekkeesta Toiminnallisen määrittelyn yhteydessä voidaan esimerkiksi määritellä päivämäärän muodoksi yyyy-mm-dd (Lähde: http://www.w3.org/tr/note-datetime) Esimerkki hahmosta: ^[0-9]{4}-[01][0-9]-[0-3][0-9]$ merkkijono alkaa (^) tasan neljällä merkillä ({4}) joukosta (0, 1, 2, 3,..., 9) viidentenä merkkinä on pakollinen väliviiva (-) kuukauden ensimmäinen numero on aina 0 tai 1 ([01]) ja toinen välillä 0-9 pakollinen väliviiva (-) päivämäärän ensimmäinen ([0-3]) ja toinen ([0-9]) numero lopussa ei muita merkkejä ($) Huomaa, että tavalliselta käyttäjältä (noviisi) ei saa vaatia päivämäärän kirjoittamista tietyssä muodossa (vaihtoehdot!). Tehokäyttäjä on asia erikseen (ohjeistus) Säännöllisten lausekkeiden ideat tulevat vastaan myös esimerkiksi formaalien kielten ja UNIX-tehokäytön yhteydessä (grep) MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 60 MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 61 Syöte, tietoturva ja PHP Vihamielinen käyttäjä voi horjuttaa sovelluksen tietoturvaa monella tavalla: Tietokanta: Syötteeseen voidaan lisätä merkkejä, jotka mahdollistavat SQLkomentojen välittämisen suoraan tietokantaan. Ratkaisu: addslashes()- ja stripslashes()-funktiot Komentotulkki: Syötteeseen voidaan lisätä merkkejä, jotka mahdollistavat käskyjen välittämisen komentotulkille (shell). Ongelma silloin, kun PHP-ohjelma välittää syötteen komentoriviohjelmalle. Ratkaisu: escapeshellcmd()-funktio HTML-käyttöliittymä: Syötteeseen voidaan lisätä merkkejä, jotka sotkevat sovelluksen käyttöliittymän. Ongelma syntyy silloin, kun käyttäjän syöte tulostetaan takaisin käyttöliittymään (esimerkiksi keskustelupalsta tai vieraskirja). Ratkaisu: strip_tags()- ja htmlspecialchars()-funktiot Verkkopalvelun tietoturvallisen toteutuksen perusteisiin kuuluu lisäksi HTTPSprotokollan käyttäminen kaiken arkaluontoisen tiedon välittämiseen asiakkaan ja palvelimen välillä. HTTPS-protokollan käyttö estää tietojen selvittämisen tietoliikennettä kuuntelemalla. HTTPS-protokollan yli välitettyjä tietoja ei myöskään säilytetä selaimen välimuistissa. MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 62 Merkistöt: taustaa Merkistöt aiheuttavat ongelmia joko sovelluksen toteuttajalle tai käyttäjälle. Taustaa: Web-sovellusta voi käyttää mistä tahansa maailman kolkasta Eri kielissä ja käyttöympäristöissä on käytössä erilaiset merkistöt Eri merkistöt esitetään eri tavalla tietokoneen muistissa Yleisiä merkistöjä: ASCII: merkkien esittämiseen käytössä 7 bittiä, käyttäjälle näytettäville merkeille (A-Z, a-z, 0-9) annettu arvot väliltä 32-127 ISO 8859-1: ASCII-laajennos, joka sisältää mm. skandinaaviset merkit ÅÄÖåäö. ISO 8859-15 sisältää myös euro-merkin ( ). Merkkien esittämiseen 8 bittiä Unicode: Standardi, joka mahdollistaa kaikkien maailman merkkien esittämisen yhdellä ja samalla merkistöllä. Useita tapoja merkkien koodaamiseen: UTF-8, UTF-16, UCS-2 Kolmikerrosarkkitehtuuri: merkistöt on otettava huomioon sekä merkkijonojen esittämisessä, käsittelyssä että tallentamisessa MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 63
Ongelmia ja yleinen ratkaisu Esimerkiksi UTF-8 käyttää yhden merkin esittämiseen yhden tai useampia tavuja. Tämä aiheuttaa ongelmia ellei asiaa huomioida sovelluksen toteutuksessa. Esimerkkejä: yksi merkki vie useamman merkin tilan tietokannassa ja tietosisällön korkein sallittu pituus ylittyy liian aikaisin. Ratkaisu ongelmaan: 1. Valitaan sovelluksen sisäiseen toteutukseen merkistö, jonka avulla pystytään esittämään mahdollisimman suuri joukko yksittäisiä merkkejä (=Unicode, esim. UTF-8) 2. Muunnetaan käyttäjän syöte ja muu sovellukseen tuotava tietosisältö valittuun merkistöön ja oletetaan merkistön käyttö sovelluksen sisäisessä toteutuksessa (ohjelmakoodi & tietokanta) Huomaa, että sovelluksen näkymissä käytettävän merkistön ei tarvitse olla sama kuin sovelluksen sinäinen merkistö. Joel Spolskyn The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) on ehdottaman suositeltavaa lukemista, ks. http://www.joelonsoftware.com/articles/unicode.html MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 64 Merkkijonot ja PHP PHP-kieli on kehittynyt käytännön tarpeista. Tästä syystä kielen kehitys on ollut välillä enemmän, välillä vähemmän suunnitelmallista. Merkistöjen osalta tiedossa on ongelmia (lähde: php.net): A string is series of characters. In PHP, a character is the same as a byte, that is, there are exactly 256 different characters possible. This also implies that PHP has no native support of Unicode. See utf8_encode() and utf8_decode() for some Unicode support. Siis: paras mahdollinen vaihtoehto eli Unicoden käyttäminen sovelluksen toteutuksessa ei (suoraan) ole mahdollista. Apuvälineitä: mbstring-laajennus sisältää joukon funktioita, jotka mahdollistavat myös Unicode-merkistöä käyttävien merkkijonojen käsittelemisen Karvalakkiratkaisu: PHP-funktiot utf8_encode() ja utf8_decode() ja HTML-kielen accept-charset attribuutti. Ongelmia: UTF-8 ei ole ainoa tapa merkistön koodaamiseen, selainriippuvuus MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 65 Koodin uudelleenkäyttö Koodin uudelleenkäytöllä on useita lisäarvoja sovelluksen toteutustyössä: Kustannustehokkuus: Sovelluksen moduulin M ylläpitämiseen, testaamiseen ja dokumentointiin keskimäärin kuluva aika on toteuttamiseen verrattuna moninkertainen Ylläpidettävän koodin määrä on pyrittävä pitämään mahdollisimman pienenä Luotettavuus: Moduulin luotettavuuden varmistaminen edellyttää kattavaa testaamista Testaamisesta huolimatta koodiin voi jäädä ohjelmointivirheitä, jotka paljastuvat ajan myötä Yhdenmukaisuus: Sovelluksen käyttöliittymien (ja muiden rajapintojen) yhdenmukainen toteuttaminen esimerkiksi tyylioppaan perusteella on työlästä Modulaarinen toteutus mahdollistaa koodin uudelleenkäytön MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 66 Koodin uudelleenkäyttö ja PHP PHP-kieli mahdollistaa koodin uudelleenkäytön moduulien ja funktioiden avulla: include() ja require(): tiedoston sisällyttäminen toiseen PHP-tiedostoon. Ero: ensimmäinen aiheuttaa epäonnistuessaan varoituksen (warning), jälkimmäinen virheen (error) include_once() ja require_once(): vastaavia kuin edelliset, mutta sisällyttäminen tapahtuu ainoastaan kerran Käyttötapauksia: Omat funktiokirjastot: HTML-merkkauksen tulostaminen, tietokantayhteyden avaaminen, syötteen tarkastaminen,... => include_once() Sivupohjan (header.php ja footer.php) ja muiden yleisten HTMLrakenteiden irrottaminen omaksi kokonaisuudekseen => include() PHP5 mahdollistaa yksinkertaisten moduulien ohella myös täysiverisen olioohjelmoinnin (periytyminen, paketointi, poikkeukset,...) Tietoturvan parantamiseksi arkaluontoista tietoa sisältävät sisällytettävät tiedostot kannattaa nimetä php-tiedostopäätteellä (miksi?) MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 67
Ohjelmistotuotannon kriteerit Yleisessä ohjelmistotuotannossa sovelluksen laadulle on määritelty mm. seuraavat kriteerit: Päivitettävyys: Yleisesti: mekaanisten työtehtävien siirtäminen ihmiseltä tietokoneelle Modulaarinen suunnittelu parantaa sovelluksen päivitettävyyttä merkittävästi: HTML-merkkauksen tulostaminen, sivupohjat,... Verkkopalvelussa myös sisällön päivittämisen helppous on tärkeää Siirrettävyys: Sovelluksen toteutustekniikoiden valinta siten, että tuki löytyy mahdollisimman monelta palvelimelta Esimerkkejä: ODBC-tietokantarajapinta ja SQL-standardi (tai tekstitiedostojen käyttäminen), yleisesti käytössä olevat versiot käytettävistä ohjelmistoista ja kielistä, erillistä asennusta vaativien kirjastojen käytön välttäminen MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 68 Uudelleenkäyttö: Modulaarinen suunnittelu Verkkopalvelun yleisten osien irrottaminen sovelluskohtaisista ratkaisuista Dokumentointi! Yhteensopivuus: Standardiratkaisujen käyttäminen mahdollisuuksien mukaan: validi HTML ja CSS, kuvat JPEG/GIF/PNG-muodossa Sovelluksen toteuttaminen saavutettavuuden ja laiteriippumattomuuden periaatteiden mukaisesti Sovelluksen kansainvälistäminen & mahdollisuus kotoistukseen Virhesietoisuus: Sovelluksen on toivuttava erilaisista virheistä: virheelinen syöte, tiedoston lukemisen tai kirjoittamisen epäonnistuminen, tietokantayhteyden katkeaminen Käyttäjälle virheilmoitus selvällä kielellä ja esimerkiksi toimenpidesuositukset Sovelluksen toiminnallisuuden toteuttaminen periaatteella Toimii PC:llä, mun PC:llä ei useinkaan ole järkevää, ei ainakaan verkkopalveluiden yhteydessä MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 69 Yhteenveto Verkkopalvelun (yleisesti hypermediasovelluksen) toteutuksessa on otettava huomioon paljon erilaisia asioita Dokumentoidun suunnittelun merkitys korostuu Perinteisen vesiputousmallin mukaisen prosessin sijaan on usein perusteltua käyttää iteraviisia suunnittelu- ja toteutusmenetelmiä: prototypointi tai ketterä ohjelmistokehitys Suunnittelutyössä ja valmiin sovelluksen arvioinnissa kannattaa käyttää apuna erilaisia heuristiikkoja ja muistilistoja Avaintekijä sovelluksen toteutuksen laadun edistämisessä on modulaarinen suunnittelu. Asia kannattaa pyrkiä ottamaan huomioon jo harjoitustyön toteutuksessa Käyttäjän syötteeseen liittyvät asiat aiheuttaa paljon sovelluksen tekijälle. Valtaosa lomakkeeseen perustuvat toiminnallisuuden toteuttamiseen kuluvasta ajasta on käytettävä syötteen tarkastamis- ja käsittelyrutiineihin Suunnittelumallien (design patterns) ja sovelluskehysten (application framework) avulla voidaan entisestään tehostaa toteutustyötä. Molempiin palataan vielä luentojen kuluessa MATHM-57100 Hypermedian ohjelmointi (kevät 2006) 70