Lomakkeiden käsittelytekniikat - Luento 8

• Luentotaltiointi
• Lomakkeen toiminta
• Lomakkeen tietojen lähettäminen vastaanottajalle
  • Tietojen lähettäminen suoraan sähköpostiin
  • Tietojen lähettäminen ohjelmalle
  • Lähettämisessä käytettävät tavat
  • enctype-attribuutti
• Harjoitustyössä käytettävä CGI-ohjelma
  • Piilokenttä lomake_email
• Hakulomake
  • Google
• Entiteetit ja URL-koodaus
• WWW-ohjelmointi selaimessa
  • JavaScript
  • Sivun tyylitiedoston vaihtaminen JavaScriptin avulla
  • VBScript
  • ActiveX ja Visual Basic/JScript .NET
  • Java-appletit
  • ActionScript
• WWW-palvelimen dynaamiset tekniikat
  • CGI
  • PHP, JSP ja ASP (.NET)

Luennolla käydään läpi lomakkeiden käsittelytekniikoita ja WWW-ohjelmointia.

Lomakkeen toiminta

Kerrataan ensin lomake-elementtejä esimerkkilomakkeen avulla.

1. Selainohjelma pyytää palvelimelta lomakesivun.
2. Palvelin toimittaa sivun selaimelle.
3. Käyttäjä täyttää ja hyväksyy lomakkeen. Selain lähettää lomakkeen tiedot WWW-palvelimella suoritettavalle ohjelmalle.
4. Lomakkeelta tuleva data käsitellään ohjelman tekijän haluamalla tavalla. Ohjelma voi tehdä esimerkiksi seuraavia toimenpiteitä:
   • Erikoismerkkien käsittely (esim. ääkköset, rivinvaihdot).
   • Tarkistukset syötteelle (esim. onko jokin kenttä oikean muotoinen, onko kaikkiin kohtiin vastattu).
   • Tiedot lähetetään edelleen sähköpostitse.
   • Tallennetaan tietokantaan.
   • Tallennetaan suoraan osaksi jotain WWW-sivua.
   • Lomakkeen tietojen jatkokäsittelyyn voidaan käyttää monenlaisia erilaisia ohjelmistoja.
5. Ohjelma palauttaa käyttäjälle tietoja:
   • Varmistuksen tietojen lähetyksen onnistumisesta.
   • Tiedon, jos syötteessä oli jotakin virheitä.
   • Tilauksen tai palautteen sisällön.

Lomakkeen tietojen lähettäminen vastaanottajalle

Seuraavassa käydään läpi erilaisia tapoja lähettää lomakkeen tiedot vastaanottajalle.

Tietojen lähettäminen suoraan sähköpostiin

Lomakkeen tiedot voidaan lähettää suoraan sähköpostiin seuraavan määrityksen avulla.

<form action="mailto:antti.j.ekonoja@jyu.fi" method="post">
...
</form>

Tätä mailto-tapaa ei pidä koskaan käyttää!

• Edellyttää käyttäjältä toimivaa ja oikeilla asetuksilla säädettyä sähköpostiohjelmaa.
• Lähetettävän tiedon muotoon ei voida vaikuttaa.

Tietojen lähettäminen ohjelmalle

Palvelimella suoritettavalla ohjelmalla mahdollistetaan tietojen jatkokäsittely mahdollisimman luotettavasti.

<form action="http://palvelin/cgi-bin/kasittelija.cgi" method="post">
...
</form>

Lähettämisessä käytettävät tavat

Lomakkeen tietojen lähettämiseen on kaksi erilaista metodia (post ja get), joilla kummallakin on oma käyttökohteensa. Metodien välinen ero huomioidaan lomakkeen tiedot vastaanottavassa ohjelmassa.

post-metodi

<form action="http://palvelin/cgi-bin/kasittelija.cgi" method="post">
...
</form>

• Käytetään silloin, kun ei haluta tietoja URL:n joukkoon tai kun lähetettävä tietomäärä on suuri.
• Käytetään, jos lomakkeen tiedoilla pyritään muuttamaan / lisäämään / poistamaan jonkin tietovaraston tietoja.

get-metodi

<form action="http://palvelin/cgi-bin/kasittelija.cgi" method="get">
...
</form>

• Lähettää lomakkeen sisällön URL:n mukana.

  http://palvelin/ohjelma.cgi?nimi=Antti+Ekonoja&email=antti.j.ekonoja@jyu.fi

• Lomakkeen tiedot siis näkyvät osoitteen perässä selainikkunassa.
• Käytetään, jos lomakkeella on tarkoitus tehdä haku tai muu toiminto, joka ei vaikuta järjestelmän tilaan.
• Mahdollistaa kirjanmerkkien tekemisen, esim. Googlen haut.
• Mahdollistaa viittaamisen samaan sivuun uudestaan.
• Ei kannata käyttää suurien tietomäärien siirtämiseen:
  • URL:eista tulee pitkiä ja kömpelöitä.
  • HTTP-standardi ei aseta rajoituksia osoitekentän pituudelle (kts. RFC2616 luku 3.2.1), mutta jotkin vanhat selaimet/välityspalvelimet eivät välttämättä ymmärrä yli 255 merkin pituisia osoitteita.

enctype-attribuutti

• application/x-www-form-urlencoded
  • Oletusarvo lomaketiedon lähetysmuodoksi, ei tarvitse erikseen merkitä.
  • Tiedot kerätään yhteen merkkijonoon.
  • Lomakekentät lähetetään muodossa name=value.
  • Erilaiset tiedot erotetaan toisistaan &-merkillä.
  • Erikoismerkit (välilyönnit, skandinaaviset merkit, erikoismerkit) koodataan URL-enkoodauksella (%XY-merkinnällä).
  • Saatu merkkisarja täytyy parsia koneellisesti.
• multipart/form-data
  • Kukin lomaketieto pidetään erillään.
  • Erilliset lomaketiedot paketoidaan yhdeksi moniosaiseksi paketiksi.
  • Tiedostojen lähettämisessä käytettävä tyyppi.
  • Tarvitaan käytännössä vain silloin, kun lomakkeella lähetetään tiedostoja. Muutoin enctype voidaan jättää kokonaan pois.
  • Esim.

    <form action="http://palvelin.com/cgi-bin/otanvastaantiedostoja.cgi"
     method="post" enctype="multipart/form-data">
      <fieldset>
        <legend>Liitetiedosto</legend>
        <p><input type="file" name="siirrettava_tiedosto" /></p>
      </fieldset>
      <p><input type="submit" name="laheta" value="Lähetä" /></p>
    </form> 
    

Harjoitustyössä käytettävä CGI-ohjelma

Harjoitustyössä käytettävä CGI-ohjelma on asennettu valmiiksi kurssipalvelimelle. Roskapostin välttämiseksi kurssilaisten on kuitenkin lisättävä oma jyu.fi-päätteinen sähköpostiosoitteensa sallittujen listaan osoitteessa:

http://appro.mit.jyu.fi/www/harkka/laheta/

Sivuille pääsee vain Korppi-järjestelmästä kurssin sivuilta löytyvällä tunnus ja salasana parilla.

Tämän jälkeen voidaan tehdä lomake seuraavan esimerkin mukaisesti:

<form action="http://appro.mit.jyu.fi/cgi-bin/www/laheta.cgi" method="post">
  <fieldset>
  <legend>Lomakeryhmän otsikko</legend>
    <input type="hidden" name="lomake_email" value="omaosoite@jyu.fi" />
    ...lomake-elementtejä...
  <fieldset>
</form>

Piilokenttä lomake_email

Lomakkeelle on lisättävä piilokenttä, jonka name-attribuutin arvo on lomake_email ja value-attribuutin arvo oma sähköpostiosoite, johon lomaketiedot halutaan lähettää. Sähköpostiosoite tulee olla juuri siinä muodossa, minkä ilmoitit sallittujen osoitteiden listaan.

Hakulomake

Sivustohaun toteuttaminen vaatii melko hyvää ohjelmointitaitoa. Voimme kuitenkin käyttää hakukoneiden tarjoamia rajapintoja hakulomakkeen tekemiseksi. Tarvitsemme hakupalvelun, joka antaa rajoittaa haun omille sivuillemme. Lähtökohtana voimme tutkia, mitä parametreja osoiteriviltä löytyy tai millainen lomake hakukoneen Advanced search -sivulta löytyy. Näiden tietojen perusteella voimme tehdä oman hakulomakkeen ja laittaa sen käsittelijän osoittamaan hakukoneen ohjelmaan.

Google

Google search basics: More search help -sivulta löydämme, että jos hakutermissä on site:, niin tällä voi rajoittaa hakua WWW-osoitteen mukaan.

Search Protocol Reference ja Googlen webbikäyttöliittymän ja haun kielikoodit -sivuilta löydämme myös, että parametri q on hakutermi. Parametrilla as_q voidaan lisätä myös muita hakutermejä. Referenssidokumentteja tutkimalla löydämme myös parametrit ie (hakutermien merkistökoodaus), oe (hakutulosten merkistökoodaus) ja hl (Googlen käyttöliittymän kieli). Näiden perusteella teemme lomakkeen, joka rajoittuu kurssisivustolle:

<form action="http://www.google.com/search" method="get">
<fieldset>
<legend>Haku</legend>
<input type="hidden" name="ie" value="iso-8859-1" />
<input type="hidden" name="oe" value="iso-8859-1" />
<input type="hidden" name="hl" value="fi" />
<input type="hidden" name="as_q" value="site:appro.mit.jyu.fi/www" />
<p><label for="hakusana">Hae kurssisivuilta</label>
<input type="text" size="20" id="hakusana" name="q" value="" /></p>
<p><input type="submit" value="Hae" /></p>
</fieldset>
</form>

Omille sivuille tehtävissä hauissa käy joskus niin, että Google ei löydä yhtään hakutulosta millään hakusanalla. Tähän syynä on se, että Google ei ole vielä indeksoinut sivuasi tietokantaansa. Automaattinen indeksointi vaatii sen, että joltain jo indeksoidulta sivulta on linkki sivullesi. Google tekee indeksoinnin yleensä noin kerran viikossa, eli ihan heti uudet sivut eivät Googlen avulla löydy mitenkään.

Entiteetit ja URL-koodaus

Kaikki merkit voidaan XHTML:ssä esittää entiteetteinä. Tärkeimmät entiteetit, joita on joskus pakko käyttää WWW-sivuilla, ovat seuraavat:

• & &
• < &lt;
• > &gt;

Samaan tapaan joskus joudutaan käyttämään erikoismerkkejä URL-osoitteissa. Tällöin on käytettävä erilaista koodaustapaa. Perussääntönä kannattaa kuitenkin pitää, ettei käytä erikoismerkkejä URL:eissa. Jos niitä on kuitenkin pakko käyttää, niin erikoismerkit on koodattava merkkiä vastaavalla heksadesimaaliluvulla.

Siis: jos lisäät WWW-dokumenttiisi linkin (a-elementti) tai kuvaviittauksen (img-elementti) osoitteeseen (href- tai src-attribuutin arvo), josta löytyy seuraavia erikoismerkkejä, niin nämä erikoismerkit on kirjoitettava seuraavassa koodatussa muodossa:

Esim. linkki:

Google-haku aiheesta operator <> &&

<p>Google-haku aiheesta
<a href="http://www.google.com/search?q=operator%20%3C%3E%20%26%26">
operator &lt;&gt; &amp;&amp;</a></p>

Lisätietoa:

• URL Encoding (or: 'What are those "%20" codes in URLs?')
• Pitkä referenssitaulukko osoitteessa: http://www.w3schools.com/html/html_ref_urlencode.asp
• Entiteettien ja URL-koodauksen avulla voi huijata tyhmimpiä spamrobotteja Spam-protect your email -työkalun avulla.

WWW-ohjelmointi selaimessa

Skriptikielet ovat selainohjelman sisälle rakennettuja ohjelmointikieliä, joilla voidaan toteuttaa pieniä toimintoja, kuten tarkistaa lomakkeen syöttötietoja ennen niiden lähettämistä eteenpäin.

Komponenttipohjaisissa ohjelmointitekniikoissa sovellus tai sen osia upotetaan sivulle object-elementillä (kts. luento 9) tai vastaavalla merkinnällä. Selaimeen integroituva laajennus käsittelee ohjelmakoodiin. Tämä tarkoittaa sitä, että sopivat ohjelmat pitää erikseen asentaa koneelle, jotta tällaisia sivuja päästään käyttämään.

WWW-selaimessa toimivilla skriptikielillä ja muilla tekniikoilla voidaan toteuttaa vuorovaikutteisuutta ja toiminnallisuutta, joka ei edellytä jatkuvaa yhteyttä WWW-palvelimeen tai yhteys WWW-palvelimeen tapahtuu taustalla tapahtumapohjaisesti.

Lisätekniikat aiheuttavat kuitenkin riskejä tietoturvan kannalta eikä kokonaista palvelua voi rakentaa pelkästään niiden varaan. Lisäksi kaikki käyttäjät eivät voi hyödyntää erillistekniikoita ja ne voivat muodostaa esteitä sisällön saavuttamiseksi.

JavaScript

JavaScript on useissa graafisissa selaimissa toimiva skriptikieli. Tarkemmin sanottuna selaimissa olevat skriptikielet ovat ECMAScript-standardin toteutuksia. Esim. Internet Explorerissa käytetty ECMAScript-implementaatio on JScript. Firefox taas käyttää JavaScriptiä.

JavaScriptillä ei ole mitään tekemistä Javan kanssa.

Etuja: ECMAScript-toteutukset ovat sisäänrakennettuina graafisiin selaimiin ja ovat jossain määrin yhteensopivia. Näin voidaan toteuttaa selaimessa toimivia WWW-sovelluksia. Joskus kuitenkin voi tulla pieniä yhteensopivuusongelmia johtuen siitä, että eri selaimet käyttävät eri toteutuksia ECMAScript-standardista (esim. Firefox JavaScriptiä ja Internet Explorer JScriptiä).

• Pieni esimerkki:
  • Lomake
  • JavaScript-koodi
• Lisää JavaScript-esimerkkejä
• Tapahtumankäsittely XHTML 1.1:ssä
• JavaScript - Mozilla Developer Center
• ECMAScript - standardoitu versio JavaScriptistä
• JavaScript Guide
• JavaScript Source

Sivun tyylitiedoston vaihtaminen JavaScriptin avulla

Mobiiliselainten valikoiden kautta ei yleensä ole mahdollista vaihtaa sivulla käytettävää CSS-tyylitiedostoa, minkä vuoksi erityisesti mobiiliselaimille ja muille pienille näytöille suunniteltu tyylitiedosto voi jäädä kokonaan hyödyntämättä. Mobiiliselaimissakin on kuitenkin hyvä JavaScript-tuki, minkä ansiosta tyylitiedoston vaihtaminen voidaan tehdä JavaScriptillä esimerkiksi siten, että tyylitiedosto vaihtuu sivulla painiketta tai linkkiä klikkaamalla.

Kyseinen toiminto vaatii hieman JavaScript-osaamista, mutta webistä löytyy onneksi useita valmiita skriptejä, joita saa käyttää ilmaiseksi (lue aina lisenssiehdot).

Esimerkki, JavaScript-koodi ja sen selitykset

Toinen esimerkki (käyttää samaa JavaScript-koodia edellisen kanssa)

• Toimivuus testattu: Firefox, IE, Opera ja muutamat Nokian kännykät.
• Tyylitiedoston vaihdon voi toteuttaa linkeillä tai painikkeilla. Painike käytettävyydeltään yleensä parempi.
• Käyttäjä voi halutessaan vaihtaa tyyliä myös selaimen valikoista.
• Oletustyylin rel-attribuutti tulee olla normaali StyleSheet ja kaikilla muilla tyyleillä Alternate StyleSheet.
• Jokaiselle tyylille täytyy asettaa yksilöllinen title. Kyseistä titleä kutsutaan linkkien tai painikkeiden onclick-tapahtumankäsittelijässä. Huomaa, että kirjoitusasu molemmissa tulee olla juuri sama, eli myös kirjainkoolla on merkitystä!
• Valittu tyyli säilyy muistissa, vaikka välillä käydään eri sivuilla. Toteutettu evästeen avulla:

  <body onload="useStyleAgain('styleTestStore');" onunload="rememberStyle('styleTestStore');">
  

• Valittu tyyli poistetaan muistista (eväste) suljettaessa selain. Seuraavalla asetuksella on mahdollista saada valittu tyyli pysymään muistissa myös selaimen sulkemisen jälkeen (valittu määrä päiviä):

  <body onload="useStyleAgain('styleTestStore');" onunload="rememberStyle('styleTestStore',10);">
  

  Esimerkissä 10 on evästeen voimassaoloaika päivinä.

VBScript

VBScript on Internet Explorerissa toimiva skriptikieli. VBScriptiä käytetään myös muussa pienehkössä Windows-ohjelmoinnissa.

ActiveX ja Visual Basic/JScript .NET

ActiveX on sarja tekniikoita ohjelmakomponenttien liittämiseksi verkkoon. ActiveX käyttää Windowsin komponenttiohjelmointitekniikoita ja OLE-objektien upottamista. Toimii käytännössä vain Internet Explorerissa ja Windows-ympäristössä. ActiveX:n käyttö sisältää tietoturvariskin.

.NET-kielet käyttävät .NET Framework -alustaa. Ohjelmat käännetään MSIL-välikielelle ja suoritetaan .NET Common Language Runtime -alustalla (Javan tapaan).

• ActiveX-esimerkkejä (toimivat IE:llä):
  • Tapahtumankäsittelyä
  • Tekstialue komponenttina
  • Välilehdet
• JavaBeans ja ActiveX - Jarno Mynttinen

Java-appletit

Java-appletit ovat Java-ohjelmointikielellä toteutettuja WWW-sivuille sijoitettavia pieniä ohjelmia.

Vaativat toimiakseen käyttöjärjestelmään asennetun Java Runtime Environment (JRE) -ympäristön. JRE ei yleensä tule suoraan selaimien asennuksen mukana, mutta sen voi asentaa helposti Javan verkkosivuilta.

• Java
• Esimerkki: GPS-seuranta

ActionScript

Vaatii Adobe Flash Playerin. Flashilla voidaan tehdä interaktiivista vektorigrafiikkaa ja vuorovaikutteisia sovelluksia, jotka kommunikoivat palvelimella olevan ohjelman kanssa. ActionScript pohjautuu ECMAScript-standardiin.

Esimerkkejä

WWW-palvelimen dynaamiset tekniikat

Palvelinpuolen tekniikat toteutetaan siten, että sivujen luonti ja käsittely hoidetaan palvelimessa ajettavalla ohjelmalla.

Palvelinpuolen tekniikoiden etuja ovat mahdollisuus tiedon tallentamiseen ja se, ettei selaimen tarvitse tukea muuta kuin standardia XHTML:ää.

CGI

CGI (Common Gateway Interface) määrittelee miten ja millaista tietoa voidaan välittää WWW-palvelimelta tietoa käsittelevälle ohjelmalle.

Itse ohjelma toteutetaan jollain ohjelmointikielellä, kuten esimerkiksi Perl, Python, C ja C++.

Yksinkertainen CGI-esimerkki - Lomake

PHP, JSP ja ASP (.NET)

PHP (HyperText Preprocessor), JSP (Java Server Pages) ja ASP (Active Server Pages) ovat dynaamisten WWW-sovellusten (käyttöliittymän) tekemiseen tarkoitettuja tekniikoita. PHP:tä käytetään pääasiassa Unix-pohjaisissa järjestelmissä, yleensä Apache-palvelimen kanssa. ASP ja ASP.NET ovat Microsoftin palvelimissa käytettäviä tekniikoita. JSP liittyy ja Java-kieleen ja toimii esim. Tomcat-palvelimella (Apachen versio).

PHP/ASP/JSP-kielet toimivat siten, että ohjelmakoodia upotetaan XHTML-sivun sekaan.

Palvelimella oleva PHP-tulkki esiprosessoi muuttujien ja muualta haettavien tietojen perusteella koodit. PHP:lla voi tuottaa erilaisten parametrien perusteella XHTML-sivun tai tehdä jonkun muun toimenpiteen (esimerkiksi tallentaa tietoa tietokantaan). Java/.NET-ympäristöissä datan käsittely ja toimintalogiikka pyritään erottamaan käyttöliittymästä.

PHP-esimerkki - Lähdekoodi

• php.net - Tietolähde PHP:n maailmaan
• WWW-sovellukset-kurssi