WWW-lomakkeet ja CGI-ohjelmat

• Sähköpostilomake
• CGI-ohjelmointi Perl-kielellä
  • yksinkertaisin perl-ohjelma
  • Lomakkeiden käsittely
  • Evästeet
  • Tiedostojen käsittely

Näissä demotehtävissä opetellaan WWW-lomakkeiden ja CGI-ohjelmien perusteita.

Sähköpostilomake

Maililomake -mallivideo

Tehdään sähköpostin lähettämiseen tarkoitettu lomake. Tämän tyyppistä lomaketta käytetään esimerkiksi Webmail-palvelussa. Esimerkkejä lomake-elementtien tekemiseen löydät luennolta 4. Lomakkeen rakenteesta halutaan oikeassa laidassa olevan kuvan kaltainen. Ulkoasu määrätään vasta lomakkeen luonnin jälkeen, joten aluksi ei kannata välittää ulkoasusta.

• Luo V:\sovellukset\-hakemistoon alihakemisto demo3.
• Aloita uusi XHTML 1.0 strict dokumentti ja tallenna se demo3-kansioon index.html-nimelle.
• Linkitä CSS-tyylitiedosto xhtml-dokumenttiisi.
• Muokkaa sivun title- ja h1-elementit sopiviksi.
• Lisää dokumenttiisi lomake (form-elementti)
• Lisää lomakkeelle kappale (p-elementti) ja sen sisäään lomakekentän otsikko eli label-elementti ja edelleen labelin sisään tekstikenttä eli input-elementti, jonka type-attribuutin arvon on text. Kirjoita kentän otsikoksi Aihe.

  <label>Aihe <input type="text" /></label>

• Tallenna dokumentti. Avaa lomake selaimessa ja testaa, että label- ja input-elementit ovat yhdistettyinä napauttamalla lomakekentän otsikkoa. Nyt kursorin pitäisi mennä siihen lomakekenttään, johon yhdistäminen on tehty.
• Lisää input-elementille name-ominaisuus ja sen arvoksi aihe. Ominaisuus kertoo kentän nimen lomakkeen käsittelijälle.
• Kokeile sivua selaimella. Laita tekstikentille vielä kiinteä esityspituus size-ominaisuudella:

  <label>Aihe:
  <input type="text" name="aihe" size="40" /></label>

• Lisää uusi kappale. Lisää kappaleen sisään label-elementti, johon teksti Prioriteetti.
• Lisää valintalista (engl. select)

  
  <label>Prioriteetti
  <select>
  </select>
  </label>
  

• Lisää select-elementin sisään option-elementtejä. Kirjoita option-elementteillä vaihtoehdot Korkea, Normaali ja Alhainen.

  
  <label>Prioriteetti
  <select>
  <option>Normaali</option>
  </select>
  </label>
  

• Valitse vaihtoehdoista Normaali valituksi lisäämällä sille selected-ominaisuuden arvoksi selected.

  <option selected="selected">Normaali</option>

• Tee uusi kappale. Lisää edelliseen tapaan uusi label jonka sisällöksi kirjoitat Vastaanottaja ja valintalista.
• Lisää valintalistan sisään valintaryhmä (optgroup) Anna valintaryhmälle nimeksi (label-attribuutti) Luennoijat

  
  <select>
  <optgroup label="opettajat">
  </optgroup>
  </select>
  

• Lisää valintaryhmään kaksi valintaa (option):
  • Tommi Lahtonen
  • Jukka Mäntylä

  
  <select>
  <optgroup label="opettajat">
  <option>Tommi Lahtonen</option>
  <option>Jukka Mäntylä</option>
  </optgroup>
  </select>
  

• Lisää toinen valintaryhmä jolle annat otsikoksi Tuntiopet ja lisäät valinnat:
  • Matti Meikäläinen
  • Maija Meikäläinen
• Kokeile lomakkeen toimintaa Firefoxissa
• Lisää jokaiseen edellä lisätyn valinnan (option) value-ominaisuuden arvoksi kyseisen henkilön sähköpostiosoite:
  • Tommi: tommi.j.lahtonen@jyu.fi
  • Jukka: jmantyla@mit.jyu.fi
  • Matti: foo@bar.example
  • Maija: bar@foo.example

  <option value="tommi.j.lahtonen@jyu.fi">Tommi Lahtonen</option>
  

• Muuta vielä valintalistalle mahdollisuus valita useampi vastaanottaja. Vaihda valintalistan multiple-ominaisuuden arvoksi multiple. Vaihda myös valintalistan name-ominaisuuden arvoksi vastaanottajat

  <select name="vastaanottaja" multiple="multiple">
  

• Kokeile Firefoxilla lomakkeen toimintaa. CTRL- ja SHIFT-näppäimien avulla voit valita useamman vastaanottajan
• Tehdään valintanappi-lista formaatin valinnalle. Lisää uusi label-elementti, jonka sisälle lisäät suoraan radio-painikkeen, ja vasta tämän jälkeen otsikkotekstiksi Teksti.

  <label><input type="radio" value="" /> Teksti</label>
  

• Lisää vielä kaksi label- ja input-paria. Laita otsikoiksi HTML ja XML.
• Lisää kaikille valintanapeille sama arvo name-attribuuttiin.
• Anna kullekin valintanapille oma arvo value-attribuuttiin, joka näkyy lomakkeen käsittelijälle tietoja lähetettäessä.
• Valitse oletusvalinnaksi Teksti lisäämällä ominaisuus checked="checked". Ryhmän otsikko Formaatti lisätään myöhemmin.

  <label><input type="radio" checked="checked" value="" /> Teksti</label>
  

• Lisää uusi label ja sen sisälle valintaruutu (engl. checkbox), jonka otsikoksi kirjoitat Lähetä myös tekstiviesti.

  <label>Lähetä myös tekstiviesti <input type="checkbox" /></label>

• Aseta valintaruudun name-ominaisuuden arvoksi tekstiviesti ja value-ominaisuuden arvoksi Kyllä.
• Lisää vielä toinenkin valintaruutu otsikon kera. Kirjoita otsikoksi Lähetä myös tavallinen kirje. Keksi tälle valintaruudulle järkevät arvot value- ja name-ominaisuuksiin
• Tee uusi kappale. Lisää ensin label-elementti tekstillä Viesti.
• Täydennä lomake varsinaisella tekstialueella (textarea-elementti). Laita tekstialueelle näkymään 20 riviä (rows), joista kunkin pituudeksi on 50 merkkiä (cols). Nimeä tekstialue antamalla name-ominaisuuteen jokin sopiva arvo.

  <textarea cols="50" rows="20"></textarea>

• Lisää loppuun Lähetä viesti-painike. Anna painikkeelle järkevä teksti muuttamalla value-ominaisuutta.

  <input type="Submit" value="foo" />

• Lisää kullekin lomake-elementille (input, select, textarea) vielä tabindex-ominaisuuteen numeroarvo, joka kertoo monesko elementti on sarkainjärjestyksessä. Ominaisuutta tarvitaan erityisesti silloin jos elementtien käyntijärjestys ei ole sama kuin esiintymisjärjestys XHTML-dokumentissa.
• Ryhmittele lomakkeen osat fieldset- ja legend-elementeillä. Kirjoita ryhmän alkuun <fieldset> ja loppuun </fieldset>. Ryhmittelyt tulevat form-elementin sisälle.
• Ryhmän otsikko lisätään fieldset-elementin sisälle <legend> ... </legend> -elementillä. Laita osien otsikoiksi Otsikkotiedot ja Viestiosa.
• Lisää viestiosan (fieldset) sisälle toinen fieldset-ryhmä, jonka sisälle rajaat formaatti-valintanapit. Anna alueen nimeksi Formaatti legend-elementillä.
• action-attribuutti kertoo miten tai millä ohjelmalla lomakkeen lähetetyt tiedot käsitellään. Laita tähän http://appro.mit.jyu.fi/cgi-bin/view.cgi
• method-attribuutti kertoo tavan, jolla lomakkeen tiedot lähetetään. Kirjoita tähän post.
• Tallenna ja testaa lomaketta selaimella. Kokeile lähettää lomake painamalla Lähetä viesti -painiketta niin näet millaisia tietoja lomake lähettää lomakkeenkäsittelijälle.

CGI-ohjelmointi Perl-kielellä

Tutustu ensimmäisenä Perl ja CGI-ohjelmointi-ohjeeseen. Yritä ohjeen avulla tehdä seuraavat tehtävät:

• Ota SSH-yhteys people.cc.jyu.fi-koneeseen (komentorivi). Siirry public_html-kansioon ja luo sinne uusi hakemisto nimeltään perl. Siirry perl-kansioon. Jos unixin käyttäminen ei ole entuudestaan tuttua tutustua ITKP101-kurssin luentoon ja demotehtäviin.
• Kirjoita yksinkertainen perl-ohjelma, joka tulostaa oman nimesi. Kokeile ohjelmaa komentoriviltä. Sinun kannattaa avata people-koneeseen kaksi ssh-yhteyttä. Toisessa voit muokata perl-ohjelmaa esim. nano-editorilla ja toisessa kokeilla ohjelman suorittamista. Nano toimii samalla tavalla kuin pico-editori.

  yksinkertaisin perl-ohjelma

  #!/usr/bin/perl -w -T
  use strict;
  
  print "Minun nimeni on Matti Meikäläinen\n";
  

  • tallenna ohjelma esim. hello.cgi-nimelle.
  • Anna tiedostoon kaikille suoritusoikeus komennolla chmod a+x hello.cgi
  • Voit kokeilla ohjelmaa kirjoittamalla komentoriville ./hello.cgi
• Kokeile ohjelmaa selaimella www-palvelimen kautta osoitteesta:

  http://people.cc.jyu.fi/~tunnus/perl/hello.cgi

  WWW-palvelimen pitäisi antaa virheilmoitus.
• Ohjelma ei sellaisenaan toimi vielä cgi-ohjelman koska www-palvelin haluaa ohjelman kertovan mediatyyppinsä. Lisää ohjelmaasi ennen muita print-lauseita http-protokollan edellyttämä rivi:

  print "Content-type: text/plain\n\n";

  Tämä rivi ilmoittaa että ohjelman tuloste halutaan käsitellä tekstitiedostona. Yksi tyhjä rivi kertoo www-palvelimelle, että muita http-otsikkoja ei ole enää tulossa. Kokeile ohjelmaasi uudelleen www-selaimella.
• Muuta ohjelmasi tuottamaan xhtml-dokumentteja. Korjaa mediatyypiksi text/html.
• Lisää ohjelman alkuun mediatyypin tulostuksen jälkeen xhtml-dokumentin sisällön kannalta oleeelliset tulostukset:

  # tulostetaan sivun alkusisältö
  # Koska tulostettavassa tekstissä on lainausmerkkejä
  # niin määrätään erikseen lopetusmerkiksi FOO
  print <<FOO;
  <?xml version="1.0" encoding="ISO-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
  <head>
  <title>hello</title>
  </head>
  <body>
  <h1>hello</h1>
  FOO
  

• Lisää ohjelmasi loppuun vielä xhtml-dokumentin loppuun tulevat rivit:

  print "
  </body>
  </html>
  ";
  

  Voit nyt ennen näitä rivejä tulostaa dokumenttiin haluamaasi sisältöä. Kokeile tulostaa oma nimesi tekstikappaleen (p) sisälle.

Lomakkeiden käsittely

Laajennetaan CGI-ohjelmaa käsittelemään aikaisemmin tehdyn lomakkeen tietoja.

• Muuta lomakkeesi käyttämään juuri tekemääsi CGI-ohjelmaa:

  <form action="http://people.cc.jyu.fi/~tunnus/perl/hello.cgi" method="post">

• Lue ohjeesta kuinka lomakkeelta tuleviin tietoihin päästään käsiksi. Lisää ohjelmaasi rivi, joka tulostaa aihe-kenttään syötetyn arvon.
• Kokeile ohjelmaasi komentoriviltä. Saat varoituksen koska haluamaasi lomakekenttää ei ole olemassa. Voit simuloida komentorivillä aihe-kentän toimintaa kirjoittamalla:

  ./hello.cgi aihe=testi

• Kokeile selaimella WWW-sivun lomaketta ja tarkista tulostaako ohjelmasi oikean arvon.
• Parantele ohjelmaasi lisäämällä foreach-silmukka, joka tulostaa kaikkien lomakkeelta tulleiden kenttien nimet ja arvot. Tarkista ohjelmasi toiminta ensin komentoriviltä ja sen jälkeen selaimella.
• Lisää ohjelmaasi tarkistus aihe-kentälle. Jos kenttää ei ole täytetty niin tulosta virheilmoitus. Lisää tarkistus myös vastaanottaja-kentälle.

  if ( not $q->param('aihe') ) {
    ...
  } else {
    ...
  }
  

• Kopioi itsellesi valmis lomake ja muuta se käyttämään osoitteessa:

  <form action="http://people.cc.jyu.fi/~tunnus/perl/laske.cgi"
  method="post">

  olevaa CGI-ohjelmaa.
• Kopioi hello.cgi-ohjelmasi laske.cgi-nimelle. Muuta laske.cgi-ohjelmaa siten, että se laskee kaikkien tuote-nimisten kenttien arvot yhteen ja tulostaa loppusumman.

Evästeet

Tutustu perl-ohjeeseen evästeistä. Muista, että kaikki evästeisiin liittyvä pitää tehdä ennen ensimmäistäkään xhtml-koodin tulostamista koska evästeet asetetaan http-otsakkeissa.

• Tallenna loppusumma evästeeseen.
• Lähetä lomakkeella tietoja cgi-ohjelmalle useampaan kertaan ja lisää jokaisella kerralla saatu loppusumma evästeestä jo löytyvään summaan ja päivitä lopullinen yhteissumma evästeeseen. Tulosta jokaisella kerralla erikseen evästeen perusteella laskettu kokonaissumma ja sillä suorituskerralla lomakkeelta laskettu lisäsumma.

  Joudut ohjelmasi alussa ottamaan talteen mahdollisen selaimelta tulleen evästeen arvon. Jos arvo löytyi niin käytät sitä summan pohjana, jos ei niin aloitat summan nollasta. Lasket summan ja asetat uuden arvon evästeellä. Vasta tämän jälkeen voit siirtyä xhtml:n tulostamiseen.

• Parantele ohjelmaasi edelleen. Käytä assosiatiivista taulukkoa ja laske kaikkien samannimisten lomakekenttien arvot yhteen. Tulosta lopuksi yhteenveto kunkin kentän suhteen: yhteissumma, montako kappaletta kyseistä tuotetta on lomakkeella ollut ja yhden kappaleen keskihinta.

Tiedostojen käsittely

• Kirjoita uusi CGI-ohjelma taulukko.cgi, joka tuottaa xhtml-dokumentin, joka on muodostettu tiedot.txt-tiedoston sisällöstä. Ts. tulostat tiedoston sisällön xhtml-taulukkona. Muista huomioida erikseen taulukon otsikkorivi.
• Parantele ohjelmaasi vielä sen verran, että se laskee summan kaikista taulukon sarakkeista ja listaa summat taulukon viimeisellä rivillä.

  Jos haluat testata sisältääkö merkkijono muita merkkejä kuin numeroita voit käyttää seuraavaa regexpiä:

  if  ( $merkkijono =~ m/\D/ ) {
  	...
  }