CGI ja lomakkeet - Demo 6

Mallivideot

Ongelmia videon katselussa?

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 5:ssa tehtyjä lomakkeita varten CGI-ohjelma, joka käsittelee lomakkeen tiedot. Ohjelma lähettää lomakkeen tiedot sähköpostiin ja tallentaa ne tiedostoon.

  1. Käynnistä SSH Secure Shell. Ota SSH-yhteys atk-keskuksen www.cc.jyu.fi-koneeseen.
  2. Jos saat www.cc.jyu.fi:ssä virheilmoituksen:
    "Could not chdir to homedirectory /home?/???/tunnus/: No such file or directory"
    
    Niin kopioi virheilmoitus leikepöydälle ja lähetä virheilmoitus sähköpostina osoitteeseen webmaster@jyu.fi ja kerro viestissä että sinulta puuttuu kotihakemisto www.cc.jyu.fi-koneesta.

    Demotehtäviä voit jatkaa people.cc.jyu.fi-koneella.

  3. Siirry www-kansioon ja luo sinne uusi alihakemisto nimeltään cgi-bin
  4. Siirry cgi-bin-kansioon.
  5. Kopioi seuraavat tiedostot cgi-bin-kansioon:

    Kopioiminen onnistuu helpoiten wget-komennolla kirjoittamalla:

    wget haettavan_tiedoston_osoite
  6. Muuta laheta.txt-tiedoston nimeksi laheta.cgi
  7. Anna kaikille suoritus- ja lukuoikeus laheta.cgi-tiedostoon ja lukuoikeus laheta.conf-tiedostoon.
  8. Muuta laheta.conf-tiedoston sisältöä niin, että lomakkeen tiedot lähetetään sähköpostiisi ja että tiedot tallentuvat tiedostoon.
    nano laheta.conf
    • email-elementin sisälle tulee sähköpostiosoite, johon lomakkeen tiedot lähetetään (oma sähköpostiosoitteesi).
    • 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.
    • lahettaja, nimi ja otsikko -elementeillä voidaan vaikuttaa siihen mitä lähetetyn sähköposti otsikoissa lukee. Tiedot voidaan ottaa myös lomakkeen samannimisistä kentistä (name-ominaisuus).
    • 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 absoluuttinen osoite.
  9. Kokeile toimiiko cgi-ohjelma komentoriviltä:
    ./laheta.cgi
    Jos ei toimi niin tarkista ohjelman käyttöoikeudet. Varmista, että laheta.cgi-ohjelmaan on kaikilla suoritus- (x) ja lukuoikeus (r) mutta ei kirjoitusoikeutta (w). Varmista, että cgi-bin-kansioon on kaikilla luku-, ja suoritusoikeudet. Varmista, että kaikilla on kirjoitusoikeus tilaustiedostoon.
    drwxr-xr-x    2 tjlahton opis         4096 Nov 10 15:24 .
    -rwxr-xr-x    1 tjlahton opis        11043 Nov 10 15:24 laheta.cgi
    -rwxr-xr-x    1 tjlahton opis         1225 Nov 10 15:24 laheta.conf
    -rw-rw-rw-    1 tjlahton opis           10 Nov 10 15:24 tilaukset.txt
    Tarkista myös laheta.conf-tiedoston sisältö.
  10. Avaa Amayaan demo5- hakemistossa oleva lomake. Muuta lomakkeen action-attribuutin arvoksi äsken asentamasi cgi-ohjelman osoite:
    <form action="http://www.cc.jyu.fi/~omatunnus/cgi-bin/laheta.cgi" method="post">
    Helpoiten tämä onnistuu koodinäkymästä suoraan kirjoittamalla tai rakennenäkymästä valitsemalla form-elementin.
  11. 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ö. Muuta V-asemalla olevan www-hakemiston nimeksi wwwdemot (napauta oikealla hiiren painikkeella ja valitse Rename). Siirrä V-asemalta demotehtävät sisältävä wwwdemot-hakemisto kokonaisuudessaan oikealle puolelle (www.cc.jyu.fi-palvelimelle).

    Siirretään demot-tiedostot www.cc.jyu.fi-palvelimelle

  12. Nyt lomakkeesi ovat toiminnassa ja näkyvät osoitteessa:
    http://www.cc.jyu.fi/~omatunnus/wwwdemot/demo5/
    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
  13. 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 demo5-hakemistossa olevan lomaketta siten, että vastaanottajan tilalle tulee lähettäjän tiedot. Voit tehdä muutokset joko Unixissa nano-editorilla, jolloin muutokset päivittyvät heti, tai Amayassa, jolloin muutetut tiedostot täytyy siirtää uudelleen.
    • Muuta Aihe-otsikkoon liittyvän lomake-elementin name-ominaisuuteen arvo otsikko. Lomakkeen lähettäjän kirjoittama aihe tulee nyt lähetettyyn sähköpostiin.
    • Erityiskenttiä voidaan myös muokata piilokentillä. Määrätään lähettäjän nimi piilokentällä. Lisää form-elementin sisälle piilokenttä (Amayassa valinnalla XHTML | Form | Hidden) ja aseta sille seuraavat ominaisuudet:
      <input type="hidden" name="nimi" value="Nanonanon postilomake" />
    • Tallenna. Siirrä päivitetty lomake SFTP:llä demo5-hakemistoon jos käytit Amayaa editointiin.
    • Kokeile lomakkeen toimintaa ja tarkista sähköpostisi.

Ostoskori

Ostoskori -mallivideo

  1. Kopioidaan Nanonanon sivuille pieni esimerkkigalleria. Siirry wwwdemot-alihakemistossa olevaan galleria-alihakemistoon (ja ellei tätä ole niin luo sellainen). Kopioi wget-ohjelmalla hakemistoon seuraava sivu:
  2. Voit korjata esimerkkisivun käyttämään omaa css-tiedostoasi käyttämällä nano-editoria, mutta tarkempi gallerian ulkoasun muotoilu tehdään demoissa 8.
  3. Tilaamisen onnistumiseksi joudut ensimmäisenä kopioimaan käyttöösi ostoskoriohjelman
    • Ostoskoriohjelma ei toimi suoraan V-asemalta, koska www.ad.jyu.fi:ssä on käytössä Microsoftin IIS-palvelin. Sijoitamme ostoskori-ohjelman Apache-www-palvelimelle, joka löytyy mm. www.cc.jyu.fi-koneesta. Voit pitää galleriasivun toistaiseksi V-asemalla vaikka ostoskori-ohjelma onkin www.cc.jyu.fi:ssä.
    • Siirry cgi-bin-kansioon ja kopioi sinne wget-komennolla seuraavat tiedostot:
    • 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 tilaukset.xml
      • Lisää tuotteiksi seuraavat ja keksi niille sopivat hinnat:
        • haapa_ja_koivu
        • metsakurjenpolvi
        • soutaja_ja_lehtisaari
        • veneranta
        • viitatorni
  4. Muuta ostoskori.txt-tiedoston nimeksi ostoskori.cgi
  5. Anna kaikille suoritusoikeus (+x) ostoskori.cgi-tiedostoon.
  6. Anna kaikille kirjoitusoikeus (+w) tilaukset.xml-tiedostoon.
  7. 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.
  8. Muokkaa nano-editorilla ostoskori.xhtml-tiedostoa ja siinä määriteltyä lomaketta seuraavasti:
    • Poista valmiit lomake-kentät ja lisää tekstikentät joilla kysyt asiakkaalta nimen, osoitteen ja sähköpostiosoitteen. Mallia lomakekenttien tekemiseksi voit ottaa luennon 5 esimerkistä.
    • Käytä nimen ja sähköpostiosoitteen kysymisessä ostoskori.conf-tiedostossa neuvottua kentän nimeä (sijoita tämä name-attribuutin arvoksi). Muiden lomakekenttien nimillä ei ole väliä.
    • Aseta ostoskori.xhtml:n action-attribuuttiin arvo:
      http://www.cc.jyu.fi/~tunnus/cgi-bin/ostoskori.cgi
  9. Testaa taas toimiiko ostoskori moitteettomasti komentoriviltä suoritettuna. Jos sait virheitä niin varmista, että ostoskori.xhtml-tiedosto on hyvin muodostettua xhtml:ää.
  10. 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.

  11. Seuraavaksi muutetaan Nanonanon galleriasivusto käyttämään ostoskoria. Avaa nano-editorissa galleria-hakemiston index.html editoivaksi. Jokaisen kuvan yhteyteen pitää lisätä linkki, joka lisää kyseisen kuvan ostoskoriin. 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.
    • &amp; parametrien välinen erotin &-merkki, joka pitää kuitenkin olla entiteettimuodossa eli &amp;
    • lisaa=1 varmistaa ostoskorille, että tehdään lisäystä. Parametrin arvolla ei ole merkitystä kunhan jokin arvo löytyy.
  12. Lisää vastaavalla tavalla linkit muiden kuvien yhteyteen viimeistä kuvaa lukuunottamatta. Kopioi linkin koodi ja muuta parametrina vietävän tuotteen nimeä. Tarkista, että käytät tismalleen samoja nimiä kuin määrität tuotteiksi ostoskori.conf-tiedostoon.
  13. Kokeillaan tehdä linkin sijaan tilauspainike. Lisää seuraava pieni lomake viimeisen kuvan yhteyteen:
    <form action="http://www.cc.jyu.fi/~tunnus/cgi-bin/ostoskori.cgi" method="post">
    <p><input type="hidden" name="viitatorni" value="1" />
    <input type="submit" name="lisaa" value="Lisää ostoskoriin" /></p>
    </form>

    Piilokentässä määritellään tilattavan tuotteen lukumäärä ja nimi, joka on määritelty ostoskori.conf-tiedostossa.

  14. Testaa, että ostoskori toimii.
    • Kokeile lisätä eri tuotteita ostoskoriin.
    • Kokeile poistaa tuotteita ostoskorista.
    • Kokeile tuleeko tilaus sinulle sähköpostilla.
    • Tarkista tallentuiko tilaus myös tilaukset.xml-tiedostoon.

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/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. Demossa 8 sijoitetaan hakulomake CSS:n avulla parempaan paikkaan eli sivun ylälaitaan.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/2006/kevat/www/demot/demo6/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2007-01-30 15:53:24
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto