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 Tulevaisuuden keino Web-lomakkeiden toteuttamiseen: XForms Tutustutaan nyt HTML-kielen lomakkeisiin sekä XForms-määrityksen perusteisiin Hypermedian ohjelmointi (kevät 2005) 20 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"> <label for="id-name">nimi:</label> <input name="name" id="id-name" type="text"/> <input type="submit" value="lähetä"/> </form> Huomioita: lomakkeen juurielementti, lomakkeen käsittelijän määritteleminen, välitystavan valinta, lomakkeen komponenttien määritteleminen ja nimeäminen, komponenttien nimilaput, Hypermedian ohjelmointi (kevät 2005) 21 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) Komponenttien 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) Hypermedian ohjelmointi (kevät 2005) 22 Esimerkkejä input-elementin käytöstä: Tekstikenttä: <input name="name" id="id-name" type="text"/> Valintaruuduilla (checkbox) voidaan valita monta vaihtoehtoa: 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 Valintapainikkeilla (radiobutton) voidaan valita ainoastaan yksi vaihtoehto: Arvostelu: <input type="radio" name="rating" value="excellent"/> Loistava! <input type="radio" name="rating" value="poor"/> Oikein huono Tiedoston lähettäminen: Valitse tiedosto: <input type="file"/> Tiedoston lähettäminen: form-elementtiin lisättävä attribuutti enctype="multipart/form-data" Hypermedian ohjelmointi (kevät 2005) 23

2 Lisää lomakekomponentteja Lomakekomponenttien valinta Valikon avulla voidaan valita oletuksena yksi vaihtoehto: <select name="rating" id="id-rating"> <option value="excellent">erinomainen</option> <option value="poor">huono</option> Valikko voidaan toteuttaa myös siten, että siitä voidaan valita useita vaihtoehtoja. Komponentin käyttäminen on hankalaa, joten se kannattaa mahdollisuuksien mukaan korvata valintaruuduilla. <select name="genre" multiple="multiple"> <option value="pop">pop</option> <option value="rock">rock</option> <option value="surf">surf</option> Tekstialueeseen voidaan syöttää useita rivejä tekstiä: <textarea name="comment">kommenttisi levystä</textarea> Lisäksi: accesskey-attribuutti, tabindex-attribuutti, button-elementti Hypermedian ohjelmointi (kevät 2005) 24 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 kieliversioinnin, assosiatiivisten linkkien muodostamisen tai esimerkiksi hakuehtojen listaamisen Hypermedian ohjelmointi (kevät 2005) 25 Lomakkeen käytettävyys ja saavutettavuus Lomakkeen taitto ja ulkoasu 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> <select name="rating" id="id-rating"> <option value="excellent">erinomainen</option> <option value="poor">huono</option> </form> Selain esittää fieldset-elementin tyypillisesti rajaamalla komponentit reunaviivalla. Komponentin valinta onnistuu graafisessa selaimessa label-elementtiä näpäyttämällä Hypermedian ohjelmointi (kevät 2005) 26 HTML-kielen puutteellisten taitto-ominaisuuksien johdosta lomakkeen toteuttaminen tehdään usein table-elementin avulla: <fieldset> <legend>lähiosoite</legend> <label for="id-streetname">katuosoite</label> <br /> <input name="streetname" type="text"/> <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 taittoon heikentää lomakkeen saavutettavuutta ja laiteriippumattomuutta. Toisaalta komponenttien harkittu asettelu edistää lomakkeen käytettävyyttä. Suunnitteluratkaisujen tekeminen edellyttää sovelluksen kohderyhmän kartoittamista! Hypermedian ohjelmointi (kevät 2005) 27

3 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ä Hypermedian ohjelmointi (kevät 2005) 28 Toiminnon luonne & välitystavan valinta 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) Hypermedian ohjelmointi (kevät 2005) 29 Pysyvät URI-tunnisteet Luottamus sovelluksen toimintoihin perustuu kahteen keskeiseen tekijään: URItunnisteiden 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 julkaisukontekstista (käyttäjä, käyttötilanne ja päätelaite) riippumatta: representaatio räätälöidään julkaisukontekstiin sopivaksi HTTP-protokollan get-metodi mahdollistaa pysyvien URI-tunnusten toteuttamisen: kirjanmerkit, linkit ja välimuistin toiminta. Esimerkki: pysäkin numero 20 aikataulu talvikaudella 2005: 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 käyttää XForms-lomakkeita XForms 2.0 on parhaillaan kehitteillä Tutustutaan seuraavaksi XForms-määrityksen ideaan Hypermedian ohjelmointi (kevät 2005) Hypermedian ohjelmointi (kevät 2005) 31

4 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. MVC-malli 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 voi takuulla ottaa oppia omien lomakesovellusten suunnitteluun ja toteuttamiseen! Hypermedian ohjelmointi (kevät 2005) 32 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 kielen lomakkeeseen syötettyjen tietojen esittämiseen (XML Instance Data). Tietosisältö mahdollistaa esimerkiksi tietojen automaattisen kokonaan tai osittain. Lisäksi XForms määrittelee protokollan tietosisällön välittämiseen XFormslomakkeiden 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 julkaisukonteksteihin sopivat vaihtoehdot lomakkeesta Hypermedian ohjelmointi (kevät 2005) 33 XForms 1.0 -komponentit Käyttöesimerkki: XForms ja velho 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 useamman vaihtoehdon valinta lueteltujen vaihtoehtojen joukosta select1 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 Myös elementit ohjeiden (help), vihjeiden (hint), virheilmoitusten (alert) ja nimilappujen (label) liittämiseen komponentteihin Hypermedian ohjelmointi (kevät 2005) 34 XForms mahdollistaa lomakkeen toteuttamisen ohjatun täyttämisen periaatteen mukaisesti => velho (wizard). Lomakkeen käyttöliittymä toteutetaan switch- ja caseelementtien avulla: <xforms:switch> <xforms:case id="personaldetails" selected="true"> <xforms:input ref="name"> <xforms:label>nimi</xforms:label> </xforms:input> <xforms:trigger><xforms:label>osoitetiedot</xforms:label> <xforms:toggle ev:event="domactivate" case="address"/> </xforms:trigger> </xforms:case> <xforms:case id="address" selected="false"> <xforms:input ref="steetaddress"> <xforms:label>katuosoite</xforms:label> </xforms:input> <xforms:trigger><xforms:label>henkilötiedot</xforms:label> <xforms:toggle ev:event="domactivate" case=" personaldetails "/> </xforms:trigger> </xforms:case></xforms:switch> Ohjatun täyttäminen voidaan toteuttaa myös esimerkiksi PHP-kieleen ja HTMLlomakkeisiin perustuvan ratkaisun ja istunnon avulla. Asiaan tullaan palaamaan Hypermedian ohjelmointi (kevät 2005) 35

5 Lopuksi 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 mainio: yleistettävissä koko sovelluksen toteutukseen sovellettavissa myös omien lomaketoteutusten suunnittelemisessa ja toteuttamisessa: esimerkiksi ohjattu lomakkeen täyttäminen tai laiteriippumattomien lomakkeiden toteuttaminen Lomakkeet ovat selkeästi HTML-kielen haastavin osa-alue etenkin kun toteutuksessa pyritään ottamaan huomioon myös lomakkeen ulkoasu, käytettävyys ja saavutettavuus. Yhden kaikille soveltuvan ratkaisun sijaan voidaan toteuttaa joukko eri julkaisukonteksteihin sopivia vaihtoehtoja => monikanavajulkaiseminen. Yksinkertainen monikanavajulkaiseminen voidaan toteuttaa CSS-tyylien avulla Hypermedian ohjelmointi (kevät 2005) 36