Yksinkertainen lomake-esimerkki: palautelomakkeen toteuttaminen


etusivu aloitus linkitys kuvia sivuille taulukot tyylit bootstrap bootstrap esimerkkejä lomakkeet lomake-esimerkki

Yksinkertaisimmillaan palautteen keräämisen voi hoitaa ilmoittamalla sivustolla oman sähköpostiosoitteensa (taikka sitten ihan palautetta varten luodun ihan oman osoitteen). Tällöin ei tarvita mitään sen kummallisempia kikkailuita, jokainen osaa varmuudella sähköpostia lähettää.

Toisinaan voi olla mielekästä rakentaa oma lomakkeensa tätä varten. Toteutamme pienen yksinkertaisen lomakkeen, jolla voi lähettää sähköpostia lomakkeella määrättyyn osoitteeseen. Toteutuskielenä on PHP.

Esivalmistelut

PHP on skriptikieli, jota voi liittää normaalin html:n sekaan. Tällöin on tärkeää muistaa, että sivua talletettaessa nimi päätetään tarkentimeen .php, esimerkiksi palaute.php. Tämä tarkennin kertoo www-palvelimelle, että sen pitää nyt tehdä jotain muuta kuin näyttää pelkkä www-sivu, sen tulee ajaa sivu ns. PHP-esiprosessorin läpi.

PHP-esiprosessori käy sivun läpi, suorittaa siellä olevan PHP-koodin ja päästää vasta sitten sivun koodin www-selaimelle. Selaimen ei siis tarvitse ymmärtää PHP:stä yhtään mitään.

PHP-koodi kirjoitetaan HTML:n sekaan seuraavasti:

php-sulut

Kuvassa <?php aloittaa PHP-koodin ja ?> lopettaa. PHP-koodi kirjoitetaan näiden väliin. Tarvittaessa koodissa voi olla useita tällaisia alueita ja niiden väliin voidaan kirjoittaa normaalia HTML:ää.

PHP:stä kaiken löytää osoitteesta http://php.net/. Tällä jaksolla ei tämän tarkemmin mennä PHP:n syntaksiin.

Itse toteutus

Aloitetaan luomalla lomake. Toteutuksessa käytetään ns. heredoc-ominaisuutta, joka helpottaa pitkien koodinpätkien kirjoittamista. Lomake näyttää tältä:

lomakkeen rakentaminen

Halutessasi saat ko. kuvan sisältämän koodin tämän linkin takaa tekstimuodossa.

Koodiin on merkitty action-kohtaan $_SERVER[PHP_SELF]. Tämä tarkoittaa lyhykäisesti sitä, että tämä lomake käsitellään tällä samalla sivulla. PHP:n globaali taulukko $_SERVER sisältää paljon erilaisia sivustoon liittyviä seikkoja ja taulukon alkio PHP_SELF sisältää aina sen sivun nimen, jolta tähän taulukon alkioon viitataan. Huomattavaa on, että PHP:ssä muuttujiin viitataan aina $-merkillä.

Tässä vaiheessa olemme vasta saaneet aikaiseksi lomakkeen keräilyyn liittyvän osan koodia, seuraavaksi ryhdymme käsittelemään sitä. Lisäämme koodiin seuraavat rivit:

sanitointi

Koodin saa tästä.

Kuvan isset()-funktioilla testataan, onko kenttiin annettu dataa. Jos on, mennään eteenpäin.

Huomattavaa: kun lomakkeen metodi on POST, tallettuu lomakkeen data taulukkoon $_POST, jonka indekseinä toimivat kenttien nimet. Eli jos laitat sähköpostikenttään osoitteen esimerkki@example.com, on $_POST[email]:n sisältö tuo mainittu esimerkki@example.com. Tätä tällaista taulukkoa kutsutaan ns. assosiatiiviseksi taulukoksi.

Syötteiden puhdistaminen (sanitointi)

Mitään lomakkeelle syötettyä dataa ei saa koskaan käyttää suoraan. Se on aina tarkistettava ja tarvittaessa puhdistettava ennenkuin se välitetään eteenpäin. Tällä estetään haitallisen koodin sijoittaminen lomakkeelle (XSS).

Esimerkissämme luodaan $clean-niminen taulukko, johon sijoitetaan $_POST-taulukosta saatu data, joka on ajettu PHP:n strip_tags()-funktion läpi. Kyseisen funktion nimestäkin voi päätellä sen, että se putsaa kaikki html-tagit pois syötteestä. Tämä riittää yleensä tällaisessa tilanteessa turvaamaan sen, ettei mitään haitallista pääse läpi. Huomaa tästä myös se, että PHP:ssä ei tarvitse erikseen suorittaa mitään muuttujien taikka taulukoiden esittelyä: ne ovat heti käytettävissä kun niihin viitataan ensimmäisen kerran.

HUOM! Todellisuudessa sähköpostiosoitteelle kannattaisi tehdä jokin parempi tarkistus, varsinkin jos haluaa, että saa sähköpostia vain sellaisista osoitteista, jotka ovat edes syntaktisesti oikeita. Tätä varten PHP:hen on omia kirjastoja, joista löytyy tarkastusmenetelmät sähköpostiin ynnä muita syntaktitarkastuksia. Yksi tällainen kirjastokokoelma on PEAR (PHP Extension and Application Repository). Itse asiassa validate-paketti on asennettukin oppilaitoksemme palvelimille, joten sitä voisi käyttää hyväkseen tässä kohdin.

Varsinainen toiminta, eli palauteen lähettäminen postilaatikkoon

Sitten onkin viimeistelyn, eli viestin lähettämisen vuoro. Näin se toimii:

viestin lähettäminen

Ja koodi on tämän linkin takana.

Nyt yksinkertainen lomake on valmis.

Varmuuden vuoksi tämän linkin takana kokonaan se koodi, jota tässä esimerkissä on käsitelty.


Sivun alkuun...