Lomakkeiden käsittelytekniikat - Luento 6

• Luentotaltiointi
• CSS-vinkkejä
• 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
• Entiteetit ja URL-koodaus
• Lomakkeen käsittely CGI-ohjelmalla
  • conf-tiedosto
  • Erityiskentät
• Ostoskori
• Dynaaminen toiminta WWW-selaimessa
  • JavaScript
  • ActiveX
  • Java-appletit
• WWW-palvelimen dynaamiset tekniikat
  • CGI
  • PHP

Luennolla käydään läpi lomakkeiden käsittelytekniikoita.

CSS-vinkkejä

Jatkuva tausta navigointipalkille

3 column complex layout demo

Lomake-elementtien muotoilu CSS:llä: Älä tee.

Lomake-elementtien ulkomuotoilu CSS:llä on liian epävarmaa joten sitä ei juurikaan kannata tehdä. Enintään voi yrittää vaihtaa kirjasimen tyyppiä, kokoa ja tekstin ja taustan väriä. Liiallinen lomake-elementtien ulkomuodon muuttaminen oletuksesta poikkeavaksi aiheuttaa vain käytettävyysongelmia.

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
• Ei kannata käyttää suurien tietomäärien siirtämiseen koska osoiterivillä on jokin maksimikoko

Entiteetit ja URL-koodaus

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

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

Entiteettien lisäksi URL-osoitteissa täytyy käyttää omaa koodaustapaansa. Erikoismerkit pitää koodata heksadesimaalimuotoon. Tärkeimmät:

• välilyönti %20
• & %26
• + %2b
• / %2f
• = %3d
• ? %3f

URL Encoding (or: 'What are those "%20" codes in URLs?')

Entiteettien ja URL-koodauksen avulla voi huijata tyhmimpiä spamrobotteja Spam-protect your email -työkalun avulla

Lomakkeen käsittely CGI-ohjelmalla

Tarvittavat tiedostot:

• laheta.txt - cgi-ohjelma, joka käsittelee ja lähettää WWW-lomakkeelta saadut tiedot sähköpostiin.
• laheta.conf - konfigurointi-tiedosto, jolla ohjataan cgi-ohjelman toimintaa.
• lomake.html - esimerkki-lomake ohjelman testaukseen
• CGI-ohjelma ja conf-tiedosto on siirrettävä samaan hakemistoon.
• laheta.txt:n nimi on muutettava muotoon laheta.cgi
• laheta.cgi-tiedostolle on annettava suoritusoikeus.

conf-tiedosto

laheta.conf-tiedostossa määritellään mihin lomakkeen tieto lähetetään ja millainen sivu näytetään lomakkeen lähettämisen jälkeen. conf-tiedoston on oltava samassa hakemistossa laheta.cgi:n kanssa.

• email-elementin sisälle tulee sähköpostiosoite, johon lomakkeen tiedot lähetetään.
• h1, title ja p-elementteihin voi kirjoittaa tekstiä, jotka tulevat kyseisinä elementteinä lomakkeen käsittelyn jälkeiseen palautesivuun.
• Vaihtoehtoisesti url-elementin sisälle voi määritellä kokonaan oman palautesivun osoitteen.
• css-elementtiin voi määritellä palautesivulla käytettävän css-tiedoston.

Erityiskentät

Lomakkeella voidaan vaikuttaa CGI-ohjelman toimintaan käyttämällä seuraavia nimiä lomake-elementeille:

• lahettajan_nimi-niminen (name-ominaisuus) kenttä tulee käsittelijän lähettämän sähköpostin lähettäjän nimeksi (engl. From)
• lomake_lahettaja-kenttä tulee käsittelijän lähettämän sähköpostin lähettäjän e-mail-osoitteeksi. Lomakkeen tiedot lähetetään kopiona myös lomakkeen täyttäjälle tässä kentässä olevaan osoitteeseen.
• Arvot voidaan määritellä myös piilokenttien avulla jos ei haluta käyttäjien täyttävän niitä:

   
  <input type="hidden" name="lomake_lahettaja"
    value="email_osoite@palvelin.fi" />
  
  <input type="hidden" name="lahettajan_nimi"
    value="Lähettäjän nimi" />
  

• Jos kysyt lomakkeella käyttäjältä sähköpostiosoitteen ja/tai nimen, niin voit käyttää edellisiä kenttiä piilottamattomina. Tällöin sähköpostitse tulevassa viestissä näkyy lähettäjän sähköpostiosoite ja/tai lähettäjän nimi. Esimerkiksi:

   
  <label for="nimi">Lomakkeen täyttäjän nimi:</label>
  <input type="text" id="nimi" name="lahettajan_nimi"
    value="Lähettäjän nimi" />
  <label for="sposti">Lomakkeen täyttäjän sähköpostiosoite:</label>
  <input type="text" id="sposti" name="lomake_lahettaja"
    value="email_osoite@palvelin.fi" />
  
  

Ostoskori

Tarvittavat tiedostot löytyvät osoitteesta

http://appro.mit.jyu.fi/ostoskori/

Tallenna tiedostot esim. www-hakemiston cgi-bin-hakemistoon. Muuta ostoskori.txt -tiedoston nimeksi ostoskori.cgi

Ohjelma tunnistaa seuraavat muuttujat (name-attribuutti):

• poista - Aiheuttaa halutun tuotteen / tuotteiden poistamisen
• update - Päivittää tuotteiden lukumääriä, value-ominaisuuden arvo määrää uuden lukumäärän
• lisaa - Lisää tuotteita, value-ominaisuuden arvo kertoo lisäyksen määrän
• tilaa - Lähettää tilauksen

Muiden muuttujien arvoilla (value) ei ole merkitystä kunhan jonkin arvo on määritelty. Vaaditun name-attribuutin voi määritellä esimerkiksi submit-painikkeeseen:

<input type="submit" name="lisaa" value="Lisää ostoskoriin!" />

Näiden lisäksi kaikki conf-tiedostossa määriteltyjä tuotteita vastaavat lomake-elementit (name) käsitellään tuotteina ja niiden arvot (value) tuotteiden lukumäärinä. Lisäys voidaan toteuttaa joko POST- tai GET-metodin kautta. Tällöin esimerkiksi linkistä voi tehdä viittauksen ostoskoriin ja muuttaa samassa yhteydessä ostoskorin sisältöä.

conf-tiedosto

Seuraavat tiedot määräävät miten ostoskori käsitellään tilattaessa:

• email - mihin tiedot lähetetään
• save - mihin tilaukset tallennetaan
• xhtml - tilauslomakkeen osoite
• tuote - tämän nimisiä (name) kenttiä voidaan lisätä ostoskoriin
  • nimi - tuotteen nimi
  • hinta - tuotteen hinta

Seuraavat otetaan ensisijaisesti ostoskori.conf-tiedostosta, mutta voidaan myös määritellä tilauslomakkeella (esim. jos halutaan käyttäjän antaa tiedot).

• from - tilauslomakkeen lähettäjän sähköpostiosoite
• name - tilaajan nimi
• subject - sähköpostin aihe

Dynaaminen toiminta WWW-selaimessa

WWW-selaimessa toimivilla skriptikielillä ja muilla tekniikoilla voidaan toteuttaa vuorovaikutteisuutta ja toiminnallisuutta joka ei edellytä jatkuvaa yhteyttä WWW-palvelimeen.

Lisätekniikat aiheuttavat kuitenkin lisäriskejä tietoturvan kannalta eikä kokonaista palvelua voi rakentaa pelkästään niiden varaan.

JavaScript

JavaScript on joissain selaimissa toimiva skriptikieli, jolla voidaan toteuttaa pieniä www-selaimella toimivia toimintoja kuten tarkistaa lomakkeen syöttötietoja ennen niiden lähettämistä eteenpäin.

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

Tietoturvariski

• Pieni esimerkki
  • Lomake
  • Javascript-koodi
• Tapahtumankäsittely XHTML 1.1:ssä
• ECMAScript standardoitu versio JavaScriptistä
• JavaScript Guide
• JavaScript Source

ActiveX

ActiveX on sarja tekniikoita ohjelmakomponenttien liittämiseksi verkkoon. ActiveX-komponentteja

Toimii käytännössä vain Internet Explorerissa

Tietoturvariski

• 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
• Java-esimerkki (Samuli Ikonen)
• Complex javastuff

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

PHP (HyperText Preprocessor) on dynaamisten WWW-sovellusten tekemiseen tarkoitettu tekniikka.

PHP toimii siten, että ohjelmakoodia upotetaan XHTML-sivun sekaan.

Palvelimella oleva PHP-tulkki esiprosessoi muuttujien ja muualta haettavien tietojen perusteella koodit.

PHP:lla voi lisätä sivuun lisää XHTML-elementtejä tai tehdä jonkun muun toimenpiteen (esimerkiksi tallentaa tietoa tietokantaan).

PHP-esimerkki - Lähdekoodi

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