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
  • post-metodi
  • get-metodi
  • enctype
• Harjoitustyössä käytettävä CGI-ohjelma
  • Piilokenttä lomake_email
• Hakulomake
  • Google
• Entiteetit ja URL-koodaus
• WWW-ohjelmointi selaimessa
  • Javascript
  • 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.

Lomakkeen toiminta

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. Lomakkeella oleva 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 jonkin kenttä oikean muotoinen, onko kaikkiin kohtiin vastattu).
   • Tiedot lähetetään edelleen sähköpostitse.
   • Tallennetaan tietokannaksi.
   • 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.
   • 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:jmantyla@mit.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=Jukka+M%E4ntyl%E4&email=jmantyla@cc.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 osoite-kentän pituudelle (kts. RFC2616 luku 3.2.1)

enctype

• 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, kun 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.invalid" />
    ...lomake-elementtejä...
  <fieldset>
</form>

Piilokenttä lomake_email

Lomakkeelle on lisättävä piilokenttä, jonka name-ominaisuuden arvo on lomake_email ja value-ominaisuuden arvo oma sähköpostiosoite, johon lomaketiedot halutaan lähettää.

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ä osoittamaan hakukoneen ohjelmaan.

Google

Advanced Google Search Operators ja Search Protocol Referencestä löydämme, että jos hakutermissä on inurl: tai allinurl:, niin tällä voi rajoittaa hakua osoitteen mukaan. Löydämme myös, että parametrilla as_q voidaan lisätä hakutermejä. Referenssidokumentteja tutkimalla löydämme myös parametrit ie, oe ja hl. Näiden perusteella teemme lomakkeen, joka rajoittuu kurssisivustolla:

<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="inurl: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>

Entiteetit ja URL-koodaus

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

• & &
• < &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ä URLeissa. Jos niitä on kuitenkin pakko käyttää, niin erikoismerkit on koodattava merkkiä vastaavalla heksadesimaaliluvulla.

Suomeksi: jos lisäät www-dokumenttiisi linkin (a-elementti) tai kuvaviittauksen (img-elementti) osoitteeseen (href- tai src-ominaisuuden 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&amp;btnG=Search">
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ä, jolla 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 että 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.

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.

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

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ä. Tietoturvariski

.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ä
  • Tapahtuman käsittelyä
  • Tekstialue komponenttina
  • Välilehdet
• Microsoft ActiveX
• 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. Opera- ja Mozilla- selaimissa se tulee mukana mikäli niin haluaa, mutta Internet Explorerissa tuki Javalle on vain erikseen asennettuna.

• Java
• Complex javastuff

ActionScript

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

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), ASP (Active Server Pages) ja JSP (Java 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
• WebApplication tutoriaali Javalla
• WWW-sovellukset-kurssi.