2 Web-lomakkeet. HTML-lomakkeet. Lomakkeiden perusteet

Transkriptio

1 Web-lomakeet ovat verkkopalvelun tekninen perusta; käyttäjän syötteen välittäminen tapahtuu käytännössä aina lomakkeiden avulla Esimerkkejä lomakkeiden käytöstä: yksinkertaiset toiminnot: palautelomake, vieraskirja sovellukset: verkkokauppa (tuotteiden valinta, tilaajan tiedot, sisäänkirjautuminen, maksaminen,...) tai organisaation portaali Ainoa nykyselainten tukema keino lomakkeiden toteuttamiseen on HTML-kieli Lomakkeiden käsittelijöitä voidaan toteuttaa useilla eri ohjelmointikielillä CGI-rajapinta: Perl, Python, C++,... dokumentteihin upotettavat kielet: PHP, ASP, JSP,... sovelluspalvelimet: J2EE, EJB, Oracle, Plone,... Tulevaisuuden keino Web-lomakkeiden toteuttamiseen on XForms Tutustutaan nyt HTML-kielen lomakkeisiin sekä XForms-määrityksen perusteisiin MATHM Hypermedian ohjelmointi (kevät 2007) 21 HTML-lomakkeet XHTML-moduulit jakaa HTML-lomakkeet kahteen moduuliin: Basic Forms Module: form, input, label, select, option, textarea Form module: form, input, select, option, textarea, button, fieldset, label, legend, optgroup Basic Forms Module on HTML-lomakkeiden pienin yhteinen tekijä, joka sisältyy esimerkiksi HTML-kielen yksinkertaisimpaan versioon, XHTML Basic -kieleen. Yksinkertainen lomake: <form action="rekisteroi.php" method="post"> <p><label for="id-name">nimi:</label> <input name="name" id="id-name" type="text"/> <input type="submit" value="lähetä"/> </p> </form> Huomioita: lomakkeen juurielementti, lomakkeen käsittelijän määritteleminen, välitystavan valinta, lomakkeen komponenttien määritteleminen ja nimeäminen, komponenttien nimilaput,... MATHM Hypermedian ohjelmointi (kevät 2007) 22 Lomakkeiden perusteet Käydään lyhyesti läpi keskeiset HTML-lomakkeiden määrittelemiseen liittyvät elementit ja attribuutit. Täydelliset tiedot löytyvät esimerkiksi HTML suosituksesta. Lomakkeen juurielementti: form-elementti lomakkeen käsittelijä: action-attribuutti tietojen välitystapa: method-attribuutti (post get) Lomakekomponenttien yleiset attribuutit: nimi (käytetään arvon avaimena käsittelijässä): name-attribuutti arvo: value-attribuutti komponentti ei ole käytössä: disabled="disabled" lisäksi kaikille HTML-elementeille yhteiset id, class, title, style,... Suuri osa lomakkeen komponenteista toteutetaan input-elementin avulla: komponentin tyyppi: type-attribuutti (text password checkbox radio submit reset file hidden image button) MATHM Hypermedian ohjelmointi (kevät 2007) 23 Esimerkkejä input-elementin käytöstä: Tekstikenttä: <input name="name" id="id-name" type="text"/> Valintaruuduilla (checkbox) voidaan valita useita vaihtoehtoja: <p>kiinnostavat tyylilajit: <input type="checkbox" name="genre" value="pop"/> Pop <input type="checkbox" name="genre" value="rock"/> Rock <input type="checkbox" name="genre" value="surf"/> Surf </p> Valintapainikkeilla (radiobutton) voidaan valita ainoastaan yksi vaihtoehto: <p>arvostelu: <input type="radio" name="rating" value="excellent"/> Loistava! <input type="radio" name="rating" value="poor"/> Oikein huono </p> Tiedoston lähettäminen: <p>valitse tiedosto: <input type="file"/></p> Tiedoston lähettäminen: form-elementtiin lisättävä attribuutti enctype="multipart/form-data". MATHM Hypermedian ohjelmointi (kevät 2007) 24

2 Lisää lomakekomponentteja Valikosta voidaan valita oletuksena yksi vaihtoehto: <select name="rating" id="id-rating"> <option value="excellent">erinomainen</option> <option value="poor">huono</option> </select> Valikko voidaan toteuttaa myös siten, että siitä voidaan valita useita vaihtoehtoja. Komponentin käyttäminen on kuitenkin niin hankalaa, että se kannattaa korvata valintaruuduilla. <select name="genre" multiple="multiple"> <option value="pop">pop</option> <option value="rock">rock</option> <option value="surf">surf</option> </select> Tekstialueeseen voidaan syöttää useita rivejä tekstiä: <p><textarea name="comment">kommenttisi levystä</textarea></p> Lisäksi: accesskey-attribuutti, tabindex-attribuutti, button-elementti MATHM Hypermedian ohjelmointi (kevät 2007) 25 Lomakekomponenttien valinta HTML-kielen komponentit voidaan jakaa kahteen luokkaan: Vapaa syöte: tekstikenttä, tekstialue, salasana,... Luetellut vaihtoehdot: valintaruutu, valintapainike, valikko Tärkein tekijä komponentin valinnassa on syötteen käyttötarkoitus: luetellut vaihtoehdot: syötettä tullaan käyttämään ehtolauseen ehtona tai ohjelmallisessa päättelyssä vapaa syöte: vaihtoehtojen luetteleminen on mahdotonta, syöte esitetään tekstinä sovelluksen käyttöliittymässä Komponentin valinta voi vaikuttaa itsestään selvältä asialta. Kuitenkin esimerkiksi tiedonhaun apuvälineiden toteuttaminen riippuu syötteestä. Ongelmia aiheuttavat: kirjoitusvirheet, sanojen taivutus, vaihtoehtoiset esitystavat,..., avainsanojen valinta Luetellut vaihtoehdot mahdollistavat syötteen kieliversioinnin, assosiatiivisten linkkien muodostamisen tai esimerkiksi hakuehtojen listaamisen käyttäjälle. MATHM Hypermedian ohjelmointi (kevät 2007) 26 Lomakkeen käytettävyys ja saavutettavuus Lomakkeen komponenttien nimilaput ja ryhmittely parantavat lomakkeen käytettävyyttä ja saavutettavuutta sekä graafisissa selaimissa että ääniselaimissa. HTML-lomakkeissa ryhmittely tehdään fieldset-elementillä. Ryhmät otsikoidaan legend-elementillä. Komponenttien nimilaput määritellään label-elementillä. <form action="add-record.php"> <fieldset><legend>levyn tiedot</legend> <label for="id-recordname">nimi:</label> <input name="recordname" id="id-recordname" type="text"/> <label for="id-artist">esittäjä:</label> <input name="artist" id="id-artist" type="text"/> <fieldset><legend>arvostelu</legend> <label for="id-rating">arvostelu:</label> <!-- lomakekomponentti arvostelutiedoille --> </form> Selain esittää fieldset-elementin tyypillisesti rajaamalla komponentit reunaviivalla. Komponentin valinta onnistuu graafisessa selaimessa label-elementtiä näpäyttämällä. Lomakkeen taitto ja ulkoasu HTML-kielen puutteellisten taitto-ominaisuuksien takia lomakkeen toteuttaminen tehdään usein table-elementin avulla: <fieldset> <legend>lähiosoite</legend> <p> <label for="id-streetname">katuosoite</label> <br /> <input name="streetname" type="text"/> </p> <table> <tr><td>postinumero</td><td>postitoimipaikka</td></tr> <tr><td><input name="postcode" type="text"/></td> <td><input name="postoffice" type="text"/></td> </tr> </table> On tärkeää huomata, että taulukon käyttäminen lomakkeen taittamiseen heikentää lomakkeen saavutettavuutta ja laiteriippumattomuutta. Toisaalta komponenttien harkittu asettelu edistää lomakkeen käytettävyyttä. Suunnitteluratkaisujen tekeminen edellyttää sovelluksen kohderyhmän kartoittamista! MATHM Hypermedian ohjelmointi (kevät 2007) 27 MATHM Hypermedian ohjelmointi (kevät 2007) 28

3 Data- ja dokumenttikeskeinen tieto lomakkeissa Verkkopalvelun sisältö voidaan jakaa datakeskeiseen ja dokumenttikeskeiseen tietoon: Datakeskeinen tieto on jäsennettävissä pieniin palasiin, jotka voidaan tallentaa esimerkiksi relaatiotietokantaan. Esimerkkejä: levyn kappaletiedot, reseptin valmistusaineet tai henkilötiedot Dokumenttikeskeinen tieto muodostuu tiettyä asiaa muodostavista (hypertekstimuotoisista) kokonaisuuksista. Esimerkkejä: kirja, raportti, käyttöohje, levyn kansilehti. HTML-lomakkeet soveltuvat hyvin datakeskeisen tiedon syöttämiseen, esimerkkejä: Henkilötiedot: tekstikentät etu- ja sukunimelle, alasvetovalikko sukupuolelle,... Päivämäärän valinta: kolme alasvetovalikkoa tai tekstikenttä tehokäyttäjälle Mieluisimmat musiikkityylilajit: valintaruutuja Dokumenttikeskeinen tieto on syötettävä käytännössä aina tekstialueeseen. Ongelmaksi muodostuu kuitenkin tiedon sisäisen rakenteen kuvaaminen. Dokumenttikeskeisen tiedon syöttäminen Dokumenttikeskeistä tietoa voidaan syöttää verkkopalveluun kahden eri periaatteen mukaisesti: Suora HTML-merkkaus. HTML-merkkauksen kirjoittajan tueksi on toteutettu erilaisia Web-selaimessa toimivia WYSIWYG-editoreita. HTML-merkkauksen käytön ongelmia ovat mm. esitietovaatimukset, tiedon rämettyminen ja syötteen tietoturvan varmistaminen. Kevytrakenteinen merkkauskieli. Tietosisältö syötetään tekstialueeseen tekstinä, jonka sekaan lisätään yksinkertaista merkkausta, esim. _korostus_, *vahva korostus* ja Linkkiteksti : Kevytrakenteisen merkkauskielen soveltaminen on ehdottomasti harkitsemisen arvoinen vaihtoehto etenkin silloin kun suuri osa sovellukseen syötettävästä tiedosta on dokumenttimuotoista. Asiaan palataan sisällönhallintajärjestelmien yhteydessä. Textile ( on esimerkki yleisesti käytetystä kevytrakenteisesta merkkauskielestä. Myös Wikeihin syötetään yleisesti tietoa kevytrakenteisilla merkkauskielillä. MATHM Hypermedian ohjelmointi (kevät 2007) 29 MATHM Hypermedian ohjelmointi (kevät 2007) 30 Ketterämpiä Web-lomakkeita? Web-soveltajat ovat viimeisen parin vuoden ajan kohisseet Ajax (Asyncronous JavaScript and XML) teknologiasta, joka monen mielestä mullistaa Weblomakkeiden (ja siten Web-sovellusten) toimintaperiaatteeen. Ajax-teknologia yhdistää seuraavat olemassa olevat Web-tekniikat: HTML-kieli ja CSS-tyylit: tiedon esittäminen selaimessa, Document Object Model (DOM): näkymän muokkaaminen dynaamisesti selaimessa, XML-kieli ja XMLHttpRequest-rajapinta: tiedon välittäminen selaimen ja palvelimen välillä, JavaScript (tai ECMAScript): toimintalogiikan toteuttaminen selaimeen. Lähde: Garrett, J. J. Ajax: A New Approach to Web Applications, Ajax-soveltajan on syytä olla tarkkana sovelluksen erityisesti saavutettavuuden, laiteriippumattomuuden ja käytettävyyden suhteen: Osa selaimista ei (vielä?) tue Ajax-teknologiapatteria kokonaisuudessan. Ajax-sovellukset käyttävät HTMLkomponentteja usein eri tavalla kuin mihin keskimääräinen Web-käyttäjä on tottunut. MATHM Hypermedian ohjelmointi (kevät 2007) 31 Verkkopalvelu ja toimintojen luonne Nykyaikainen WWW-arkkitehtuuri ( jakaa verkkopalveluiden toiminnot kahteen luokkaan; turvallisiin ja ei-turvallisiin: Turvallinen toiminto (safe intercation): toiminto vastaa luonteeltaan kyselyä/hakua toiminnon suorittaminen ei muuta sovelluksen tilaa Ei-turvallinen toiminto (unsafe interaction): toiminto vastaa luonteeltaan tilausta toiminnon suorittamisen seurauksena sovelluksen tila muuttuu: käyttäjän lisätään sähköpostilistalle tai rekisteröidään palveluun, toiminnon seurauksena syntyy maksutapahtuma,... Huom: ei-turvallinen tarkoittaa tässä eri asiaa kuin vaarallinen (dangerous) Toiminnon luonne pitäisi näkyä käyttöliittymässä tavalla tai toisella: ei-turvallisten toimintojen suorittamiseen voidaan esimerkiksi rakentaa selkeästi erottuva käyttöliittymä MATHM Hypermedian ohjelmointi (kevät 2007) 32

4 Toiminnon luonne & välitystavan valinta Pysyvät URI-tunnisteet Selain välittää käyttäjän syötteen palvelimelle HTTP-protokollan avulla. HTTP sisältää kaksi vaihtoehtoista tapaa syötteen välittämiseen: get- ja post-metodit. get-metodi: turvalliset toiminnot: haku/kysely, sovelluksen tila ei muutu kaikki pyyntöön liittyvät tiedot koodataan mukaan URI-tunnisteeseen post-metodi: ei-turvalliset toiminnot: tilaus, sovelluksen tila muuttuu pyyntöön liittyvät tiedot koodataan HTTP-pyynnön otsikkotietoihin käyttäminen perusteltua myös arkaluontoisia tietoja (esim. salasana, yhteystiedot tai luottokortin numero) välitettäessä Välitystavoilla on myös selaimen toiminnan perusteella havaittavia eroja: getpyynnössä parametrit näkyvät selaimen osoitekentässä. post-pyynnön perusteella tuotetun näkymän päivittäminen aiheuttaa lomakkeen tietojen lähettämisen uudestaan palvelimelle (sovelluksen varauduttava tähän). MATHM Hypermedian ohjelmointi (kevät 2007) 33 Nykyaikaisen Web-arkkitehtuurin mukaan käyttäjän luottamus sovelluksen toimintoihin perustuu kahteen keskeiseen tekijään: URI-tunnisteiden pysyvyyteen (stability) ja ennustettavuuteen (predictability) Sovelluksen tulisi tarjota resurssia edustava representaatio URI-tunnisteen perusteella ajanhetkestä riippumatta Resurssin URI-tunnisteen tulisi pysyä muuttumattomana: Viileät URI:t eivät muutu Resurssin URI-tunnisteen tulisi olla sama jakelukontekstista (käyttäjä, käyttötilanne ja päätelaite) riippumatta: representaatio räätälöidään jakelukontekstiin sopivaksi HTTP-protokollan get-metodi mahdollistaa pysyvien URI-tunnusten toteuttamisen: kirjanmerkit, linkit ja välimuistin toiminta. Esimerkki: pysäkin numero 3525 aikataulu talvikaudella 2006: MATHM Hypermedian ohjelmointi (kevät 2007) 34 Muista myös nämä! Web-sovelluksen käyttäjä on usein pulassa Web-lomakkeiden kanssa. Keinoja käyttäjän tukemiseen: Ohjeet ja opasteet: Mitä kenttään on syötettävä? Syötteen pakollisuus? Oletusten ja rajoitusten esittäminen (esimerkiksi syötteen sallittu muoto ja mitta) Virheilmoitukset ja korjausehdotukset: Selkeä ilmoitus virheellisestä syötteestä korjausehdotuksineen. Mahdollisesti syötteen dynaaminen tarkastaminen käyttäjän kirjoittaessa syötettä (Ajax). Viestit onnistuneista toiminnoista: Selkeä ilmoitus myös onnistuneista toiminnoista ( Levyn Nieminen & Litmanen tiedot lisätty ). Syötteen kierrättäminen: Kerran syötetyn tiedon käyttäminen oletusarvona tulevissa lomakkeissa jne. Vaiheittain täytettävä lomake: Suuremman lomakkeen jakaminen selkeisiin kokonaisuuksiin, joiden välillä käyttäjä voi navigoida lomaketta täyttäen. Tukee erityisesti aloittelevia käyttäjiä. Käyttäjän tukeminen on otettava huomioon jo sovellusarkkitehtuurin suunnittelussa. MATHM Hypermedian ohjelmointi (kevät 2007) 35 Lomakkeiden tulevaisuus: Xforms XForms on W3C:n määrittelemä menetelmä laiteriippumattomien Weblomakkeiden toteuttamiseen XForms mahdollistaa lomakkeiden toteuttamisen siten, että lomakkeen täyttäminen onnistuu esimerkiksi työasemalla, kämmenlaitteella tai vaikkapa paperilla XForms 1.0 hyväksyttiin W3C-suositukseksi lokakuussa 2003 XForms 1.0 Basic Profile on XHTML Basic -kielen tapainen minimijoukko tulevaisuuden lomakkeiden pienin yhteinen tekijä XHTML 2.0 tulee käyttämään XForms-lomakkeita XForms 1.1 on parhaillaan kehitteillä Tutustutaan seuraavaksi XForms-määrityksen perusteisiin. MATHM Hypermedian ohjelmointi (kevät 2007) 36

5 XForms: suunnittelutavoitteita XForms: esitystapa, toiminnallisuus ja tietosisältö XForms-määrityksen suunnitelutyön pohjaksi määriteltiin joukko tavoitteita: tuki erilaisille päätelaitteille (HTML-kieltä) monipuolisemmat käyttöliittymäkomponentit tietosisällön, toiminnallisuuden ja esitystavan erottaminen (vrt. Malli-Näkymä- Ohjain -filosofia ohjelmistosuunnittelussa) tuki kansainvälistämiselle (i18n) mahdollisuus usean lomakkeen sijoittamiseen yhteen näkymään ja yhden lomakkeen jakamiseen useampaan näkymään lomakkeen täytön väliaikainen keskeyttäminen (suspend) ja täytön jatkaminen (resume) XML-yhteensopivuus Suunnittelutavoitteista on syytä ottaa oppia omien lomakesovellusten suunnittelussa ja toteuttamisessa vaikka XForms MATHM Hypermedian ohjelmointi (kevät 2007) 37 XForms erottaa toisistaan lomakkeen toiminnallisuuden, esitystavan, ja tietosisällön: Toiminnallisuus: Lomakkeen toiminnallisuudesta tehdään yksi laiteriippumaton XML-kuvaus, joka voidaan liittää useampaan lomakkeen käyttöliittymään. Esitystapa: Lomakkeen käyttöliittymä voidaan toteuttaa esimerkiksi XHTML- tai WML-kielellä. XForms määrittelee myös joukon omia lomakekomponentteja, joiden tavoitteena on lopulta korvata XHTML-kielen määrittelemät lomakekomponentit. Tietosisältö: XForms määrittelee lisäksi kielen lomakkeeseen syötettyjen tietojen esittämiseen (XML Instance Data). XForms määrittelee myös protokollan tietosisällön välittämiseen XForms-lomakkeiden ja XForms-prosessorin välillä. XForms voidaan ottaa käyttöön vaikka heti. Selaimet eivät määritystä (vielä?) oletuksena tue, mutta käyttö on mahdollista esimerkiksi selainlaajennoksen avulla. Toinen vaihtoehto on se, että XForms-muotoinen lomakkeen kuvauksen perusteella tuotetaan palvelimella erilaisiin jakelukonteksteihin sopivat versiot (representaatio) lomakkeesta. MATHM Hypermedian ohjelmointi (kevät 2007) 38 XForms 1.0 -komponentit Lopuksi input secret tekstikenttä syöttäminen siten, että syöttämistä seuraava ei saa tietoa selville, esim. salasana textarea monirivinen tekstialue upload tiedoston lähettäminen sovellukselle, myös esimerkiksi mikrofoni tai digitaalikamera range valinta asteikosta, esim. päivämäärä väliltä select yhden tai useamman vaihtoehdon valinta lueteltujen vaihtoehtojen joukosta select1 täsmälleen yhden vaihtoehdon valinta lueteltujen vaihtoehtojen joukosta output lomakkeen tietosisällön esittäminen käyttöliittymässä (täyttöön palaaminen, monisivuinen lomake) trigger käyttäjän käynnistämä toiminto submit lomakkeen tietojen lähettäminen osittain tai kokonaan Sanasto sisältää lisäksi elementit ohjeiden (help), vihjeiden (hint), virheilmoitusten (alert) ja nimilappujen (label) liittämiseen komponentteihin. MATHM Hypermedian ohjelmointi (kevät 2007) 39 Verkkopalvelun toteuttaminen edellyttää aina lomakkeiden käyttämistä Tällä hetkellä käytännössä ainoa keino lomakkeiden toteuttamiseen on HTML-kieli XForms on tulevaisuuden keino lomakkeiden määrittelemiseen XFormsin idea lomakkeen tietosisällön, toiminnallisuuden ja esitystavan erottamisesta on sovellettavissa omien lomaketoteutusten suunnittelemisessa ja toteuttamisessa, esimerkkinä ohjattu lomakkeen täyttäminen tai laiteriippumattomien lomakkeiden toteuttaminen. Toimintatapa on yleistettävissä koko sovelluksen toteutukseen. Lomakkeet ovat selkeästi HTML-kielen haastavin osa-alue etenkin kun toteutuksessa otetaan huomioon myös lomakkeen ulkoasu, käytettävyys ja saavutettavuus. Yhden kaikille soveltuvan ratkaisun sijaan voidaan toteuttaa joukko eri jakelukonteksteihin sopivia vaihtoehtoja => monikanavajulkaiseminen. Yksinkertainen monikanavajulkaiseminen voidaan toteuttaa CSS-tyylien avulla. Ajax-teknologia mahdollistaa nykyistä monipuolisempien lomakkeiden toteuttamisen, mutta haastaa sekä toteuttajan taidot että sovelluksen saavutettavuuden. MATHM Hypermedian ohjelmointi (kevät 2007) 40