CGI ja lomakkeet- Demo 5

• Mallivideot
• Lomakkeen käsittely laheta.cgi-ohjelmalla
• Ostoskori
• Haku omalle sivulle

Näissä demoissa otetaan käyttöön muutama lomakkeiden käsittelyyn tarkoitettu CGI-ohjelma sekä tehdään Googlea käyttävä hakulomake. Demoissa tarvitset hieman Unix-tuntemusta, jota voi kertailla Tietokone ja tietoverkot työvälineenä -kurssin demoista 8.

Lomakkeen käsittely laheta.cgi-ohjelmalla

Laheta.cgi -mallivideo

Asennetaan demo 3:ssa tehtyjä lomakkeita varten CGI-ohjelma, joka käsittelee lomakkeen tiedot. Ohjelma lähettää lomakkeen tiedot sähköpostiin ja tallentaa ne tiedostoon.

1. Ota SSH-yhteys atk-keskuksen verso.cc.jyu.fi-koneeseen (tai silmu- tai itu-koneeseen).
2. Siirry www-kansioon ja luo sinne uusi alihakemisto nimeltään cgi-bin
3. Siirry cgi-bin-kansioon.
4. Kopioi seuraavat tiedostot cgi-bin-kansioon:
   • http://appro.mit.jyu.fi/laheta/laheta.txt
   • http://appro.mit.jyu.fi/laheta/laheta.conf

   Kopioiminen onnistuu helpoiten wget-komennolla kirjoittamalla:

   wget haettavan_tiedoston_osoite

5. Muuta laheta.txt-tiedoston nimeksi laheta.cgi
6. Anna kaikille suoritus- ja lukuoikeus laheta.cgi-tiedostoon ja lukuoikeus laheta.conf-tiedostoon.
7. Muuta laheta.conf-tiedoston sisältöä niin, että lomakkeen tiedot lähetetään sähköpostiisi ja että tiedot tallentuvat tiedostoon:
   • email-elementin sisälle tulee sähköpostiosoite, johon lomakkeen tiedot lähetetään.
   • save-elementin sisällä kerrotaan tiedoston nimi, johon lomakkeen tiedot tallennetaan. Tiedosto tallentuu oletusarvoisesti samaan hakemistoon CGI-ohjelman kanssa. Tiedot voidaan tallentaa muuhun hakemistoon kirjoittamalla tiedostonimen eteen suhteellinen polku CGI-ohjelman sisältävästä hakemistosta toiseen.
   • h1, title ja p-elementteihin voi kirjoittaa tekstiä, jotka tulevat kyseisinä elementteinä lomakkeen käsittelyn jälkeiseen palautesivuun. Vaihtoehtoisesti url-elementtiin voi määritellä oman palautesivun osoitteen.
   • css-elementtiin voi määritellä palautesivulla käytettävän css-tiedoston.
8. Kokeile toimiiko cgi-ohjelma komentoriviltä:

   ./laheta.cgi

   Jos ei toimi niin tarkista ohjelman käyttöoikeudet ja laheta.conf-tiedoston sisältö.
9. Avaa XetorjEditiin demo 3:ssa email- ja kahvila- hakemistoissa olevat lomakkeet. Muuta kummankin lomakkeen action-attribuutin arvoksi äsken asentamasi cgi-ohjelman osoite:

   <form action="http://www.cc.jyu.fi/~omatunnus/cgi-bin/laheta.cgi" method="post">

10. Valitse SSH-ohjelmasta SFTP-tiedostojensiirto-ohjelma valinnalla Window | New File Transfer. Valitse vasempaan laitaan My Computerin alta V-aseman sisältö ja avaa oikeaan laitaan www-hakemiston sisältö. Siirrä V-asemalta demotehtävät sisältävä www-hakemisto kokonaisuudessaan oikealle puolelle (www.cc.jyu.fi-palvelimelle).
11. Nyt lomakkeesi ovat toiminnassa ja näkyvät osoitteessa:

    http://www.cc.jyu.fi/~omatunnus/www/demo3/email/
    http://www.cc.jyu.fi/~omatunnus/www/demo3/kahvila/
    

    Kokeile täyttää lomakkeet ja lähettää niiden tiedot cgi-ohjelmalle. Tarkista tulivatko tiedot perille:
    • Käy katsomassa sähköpostiisi. Tuntemattomalta lähettäjältä pitäisi saapua postia :)
    • Tarkista ovatko tiedot tallentuneet tiedostoon. Voit katsoa tiedostoa SSH-yhteyden kautta tai selaimella osoitteesta, johon tiedot ovat tallentuneet. Esimerkiksi:

      http://www.cc.jyu.fi/~omatunnus/cgi-bin/tilaukset.txt

12. CGI-ohjelma tuntee vielä muutaman erityiskentän, joilla voi määrittää käsittelijän lähettämän sähköpostin otsikkotietoja. Ohjelmalla ei voi lähettää sähköpostia mihin tahansa osoitteeseen vaan ainoastaan lomakkeen tekijälle, joten muutetaan email-hakemistossa olevan lomaketta siten, että vastaanottajan tilalle tulee lähettäjän tiedot. Voit tehdä muutokset joko Unixissa pico-editorilla, jolloin muutokset päivittyvät heti, tai Xetor-editorille, jolloin muutetut tiedostot täytyy siirtää uudelleen.
    • Vaihda Vastaanottaja-otsikon tilalle Lähettäjän nimi.
    • Muuta kyseisen lomake-elementin name-ominaisuuteen teksti nimi. Kentän arvo tulee käsittelijän lähettämän sähköpostin lähettäjän nimeksi (engl. From)
    • Lisää uusi lomakekenttä otsikolla Lähettäjän sähköpostiosoite. Laita lomakkeen name-ominaisuuteen teksti lahettaja. Kentän arvo tulee käsittelijän lähettämän sähköpostin lähettäjän e-mail-osoitteeksi.
    • Muuta Aihe-kentän name-ominaisuuteen teksti otsikko. Tällöin lomakekenttään kirjoitettu otsikko tulee sähköpostiviestin otsikoksi.
    • Kokeile lomakkeen toimintaa.
13. Erityiskenttiä voidaan myös muokata piilokentillä. Muokkaa kahvila-hakemiston kyselylomaketta:
    • Lisää form-elementin sisälle piilokenttä, joka määrää lähettäjän nimen

      <input type="hidden" name="nimi" value="Kyselylomakkeen lähettäjä" />

    • Muuta sähköpostiosoitekentän name-attribuuttiin teksti lahettaja. Nyt sähköpostin lähettäjän nimi on aina Kyselylomakkeen lähettäjä, mutta sähköpostiosoitteena on lomakkeen täyttäjän antama tieto.
    • Muuta laheta.conf-tiedostoa ja muuta otsikko-elementin sisälle teksti Vastaus kyselyyn.
    • Testaa lomaketta ja käy tutkimassa sähköpostiasi.

Ostoskori

Ostoskori -mallivideo

1. Muokataan Nanonanolle galleriasivu jolta voi tilata tulosteen haluamastaan kuvasta. Kopioi ensimmäisenä nanonanon galleriasivuksi mallisivu. Tallenna mallisivu V-asemalla www-hakemistossa olevaan galleria-hakemistoon nimellä index.html
2. Avaa tallennettu tiedosto XetorjEditissä. Voit korjata mallisivun käyttämään omaa css-tiedostoasi mutta jätä tarkempi gallerian ulkoasun viilaaminen myöhempiin demoihin.
3. Tilaamisen onnistumiseksi joudut ensimmäisenä kopioimaan käyttöösi ostoskoriohjelman
   • Ostoskoriohjelma ei toimi JYUNETin www-palvelimella (Microsoftin IIS-palvelin) vaan vaatii toimiakseen Apache-www-palvelimen, joka löytyy mm. www.cc.jyu.fi-koneesta. Huomaa, että galleriasivua ei tarvitse välttämättä siirtää www.cc.jyu.fi-palvelimelle!
   • Siirry SSH-ohjelman avulla verso-koneessa www-linkin takana olevaan cgi-bin-kansioon ja kopioi sinne wget-komennolla seuraavat tiedostot:
     • http://appro.mit.jyu.fi/ostoskori/ostoskori.txt
     • http://appro.mit.jyu.fi/ostoskori/ostoskori.conf
     • http://appro.mit.jyu.fi/ostoskori/ostoskori.xhtml
     • http://appro.mit.jyu.fi/ostoskori/readme.txt
   • Muuta ostoskori.txt-tiedoston nimeksi ostoskori.cgi
   • Anna kaikille suoritusoikeus (+x) ostoskori.cgi-tiedostoon
   • Luo cgi-bin-hakemistoon hakemisto tilaus. Siirry hakemistoon. Luo hakemistoon pico-editorilla tiedosto nanonano.xml. Kopioi tiedostoon seuraava pohja tilaustiedostoon ja tallenna:

     <?xml version="1.0" encoding="ISO-8859-1"?>
     <kori>
     </kori>
     

4. Nyt olet saanut kopioitua kaikki ostoskorin toimintaan liittyvät tiedostot. Seuraavaksi täytyy säätää ostoskorin toimintaa muokkaamalla ostoskori.conf-tiedostoa. Muokkaa tiedostoa sen sisältämien ohjeiden mukaan seuraavasti:
   • Määrää tilaukset lähetettäväksi itsellesi sähköpostitse
   • Jätä lähetysosoite tyhjäksi
   • Jätä lähettäjän nimi tyhjäksi
   • Määrää viestin otsikoksi Kuvatilaus
   • Määrää pohjatiedostoksi ostoskori.xhtml
   • Määrää tallennustiedostoksi tilaus/nanonano.xml
   • Lisää tuotteiksi seuraavat ja keksi niille sopivat hinnat:
     • haapa_ja_koivu
     • metsakurjenpolvi
     • soutaja_ja_lehtisaari
     • veneranta
     • viitatorni
5. Kokeile toimiiko ostoskori.cgi suoraan komentoriviltä ilman virheilmoituksia kirjoittamalla:

   ./ostoskori.cgi

   Ruutuun pitäisi tulostua vain ostoskori.xhtml sisältö. Tarkista ostoskori.conf-tiedoston sisältö jos saat virheilmoituksia.
6. Muokkaa ostoskori.xhtml-tiedostoa ja siinä määriteltyä lomaketta seuraavasti:
   • Poista valmiit lomake-kentät ja lisää kentät joilla kysyt asiakkaalta: nimen, lähiosoitteen, sähköpostiosoitteen ja postinumeron sekä postitoimipaikan. Mallia lomakekenttien tekemiseksi voit ottaa luennon 5 esimerkistä.
   • Käytä nimen ja sähköpostiosoitteen kysymisessä ostoskori.conf-tiedostossa neuvottua kentän nimeä. Muiden lomakekenttien nimillä ei ole väliä.
7. Testaa taas toimiiko ostoskori moitteettomasti komentoriviltä suoritettuna. Jos sait virheitä niin varmista, että ostoskori.xhtml-tiedosto on hyvin muodostettua xhtml:ää.
8. Testaa ostoskoria selaimen avulla osoitteesta:

   http://www.cc.jyu.fi/~tunnus/cgi-bin/ostoskori.cgi

   Jos kaikki onnistui niin ostoskori näyttää vain ostoskori.xhtml-tiedoston sisällön.

9. Seuraavaksi muutetaan Nanonanon galleriasivusto käyttämään ostoskoria. Avaa XetorjEdit:ssä galleria-hakemiston index.html editoivaksi. Jokaisen kuvan yhteyteen pitää lisätä linkki, joka lisää kyseisen kuvan ostoskoriin. Tämä onnistuu seuraavasti:
   • Lisää ensimmäisen kuvan yhteyteen linkki seuraavalla tavalla:

     <a
      href="http://www.cc.jyu.fi/~tunnus/cgi-bin/ostoskori.cgi?haapa_ja_koivu=1&amp;lisaa=1">
     Lisää ostoskoriin
     </a>

     Ostoskoriin osoittavan linkin perässä olevat tiedot ovat ostoskoriohjelman ymmärtämiä parametreja (vrt. GET-metodi):

     haapa_ja_koivu=1 haapa_ja_koivu-nimistä tuotetta halutaan lisätä yksi (1) kappale.

     & parametrien välinen erotin &-merkki, joka pitää kuitenkin olla entiteettimuodossa eli &

     lisaa=1 varmistaa ostoskorille, että tehdään lisäystä. Parametrin arvolla ei ole merkitystä kunhan jokin arvo löytyy.

   • Lisää vastaavalla tavalla linkit muiden kuvien yhteyteen. Riittää, kun muutat parametrina vietävän tuotteen nimeä. Tarkista, että käytät tismalleen samoja nimiä kuin määrität tuotteiksi ostoskori.conf-tiedostoon.
10. Kokeile lisätä eri tuotteita ostoskoriin.
11. Kokeile poistaa tuotteita ostoskorista.
12. Kokeile tuleeko tilaus sinulle sähköpostilla.
13. Tarkista tallentuiko tilaus myös tiedostoon
14. Kokeillaan linkin sijaan painikkeen käyttämistä. Muuta ensimmäisen tuotteen tilauslinkin tilalle seuraavanlainen pieni lomake:

    <form action="http://www.cc.jyu.fi/~tunnus/cgi-bin/ostoskori.cgi" method="post">
    <p><input type="hidden" name="haapa_ja_koivu" value="1" />
    <input type="submit" name="lisaa" value="Lisää ostoskoriin" /></p>
    </form>

    Piilokentässä määritellään tilattavan tuotteen nimi ja lukumäärä.

15. Tilauspainikkeena voi käyttää myös haluamaansa kuvaa seuraavalla tavalla:

    <form action="http://www.cc.jyu.fi/~tunnus/cgi-bin/ostoskori.cgi" method="post">
    <p><input type="image" name="haapa_ja_koivu" value="1"
     src="http://appro.mit.jyu.fi/www/demot/demo5/painike.jpg"
     alt="Lisää ostoskoriin" /></p>
    </form>
    

    Yleensä kannattaa pitäytyä selaimen omissa painikkeissa, koska käyttäjät ovat niihin tottuneita.

Haku omalle sivulle

Haku -mallivideo

Googlen avulla on helppoa lisätä haku omalle sivulle. Google ei kovin avoimesti mainosta, että haun voi kohdistaa vain tiettyyn osoitteeseen. Yleisemmin on tiedossa mahdollisuus kohdistaa haku tietyn palvelimen alaisiin sivuihin.

1. Lisää kokeeksi nanonanon sivuston etusivulle seuraavanlainen lomake aivan sivun alalaitaan:

   <div class="haku">
   <form action="http://www.google.com/search" method="get">
   <div>
   <input type="hidden" name="ie" value="iso-8859-1" />
   <input type="hidden" name="oe" value="iso-8859-1" />
   <input type="hidden" name="hq"
    value="inurl:www.ad.jyu.fi/users/<tähän oma t/tunnus>/www/" />
   <input type="text" size="10" id="as_q" name="as_q" value=" " />
   <input type="submit" value="Hae" />
   </div>
   </form>
   </div>

2. Kokeile hakulomakkeen toimintaa. Luultavasti Google ei löydä mitään koska on erittäin epätodennäköistä, että Google olisi käynyt indeksoimassa demotehtäväsivujasi, koska niihin ei ole linkkejä mistään. Voit kokeilla lomakkeen toimintaa vaihtamalla haun kohteeksi esim. appro.mit.jyu.fi/2004/syksy/www/
3. Kuten havaitset niin omalle sivulle voi helposti upottaa lomakkeita, jotka käyttävät kenen tahansa lomakekäsittelijää. Ylläolevalla lomakkeella on muutama Googlen vaatima tieto eli käytetty tiettyjä lomakekenttien nimiä ja niille soveltuvia arvoja. Oleellista on huomata, että hq-nimisen muuttujan arvoksi voidaan kirjoittaa inurl: ja heti perään sivun osoite, jonka alle haku halutaan kohdistaa.
4. Myöhemmissä demoissa sijoitetaan hakulomake CSS:n avulla parempaan paikkaan eli sivun ylälaitaan.