Lomakkeiden käsittely ja SSI - Demo 7

Mallivideot
Lomaketiedot sähköpostiin laheta.cgi-ohjelmalla
Haku omalle sivulle
SSI (Server Side Includes)
- Lisätietoa

Mallivideot

HUOM! Demojen sisältö on muuttunut hiukan videoiden luomisen jälkeen, joten ne eivät päde ihan suoraan demotehtävien tekemiseen. Myöskin käytettävä editori vaikuttaa hiukan demotehtävien suorittamiseen. Videoista saa kuitenkin pääkohdat demotehtävien tekemiseen.

haku.wmv 957K
ssi.wmv 4.2M

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.

Lomaketiedot sähköpostiin laheta.cgi-ohjelmalla

Laitetaan demo6:ssa tehdyn lomakkeen tiedot menemään sähköpostiin:

Käy Korppi-järjestelmässä kurssin sivuilla hakemassa tunnus ja salasana kohdasta Lomakkeenkäsittelijä.
Avaa uuteen välilehteen osoite
http://appro.mit.jyu.fi/www/harkka/laheta/
Siirry kohtaan osoitteen lisääminen. Kirjoita siihen oma yliopiston sähköpostiosoitteesi ja napauta painiketta Lähetä.
Siirry muokkaamaan W:\www\demo6-hakemistossa olevaa lomaketta. Muokkaa lomakkeen action-ominaisuuden arvoa ja laita siihen:
```
<form action="http://appro.mit.jyu.fi/cgi-bin/www/laheta.cgi" method="post">
...
</form>
```
Sijoita johonkin väliin lomaketta fieldset-elementin sisällä piilokenttä, joka kertoo, mihin sähköpostiosoitteeseen tiedot pitää lähettää. Huomaa, että name-ominaisuuden arvon on oltava lomake_email ja value-ominaisuuden arvon sähköpostiosoite siinä muodossa kuin mitä äskettäin kirjoitit lomakkeelle.
```
<input type="hidden" name="lomake_email" value="omaosoite@jyu.fi.invalid" />
```
Kokeile täyttää lomake ja lähettää napauttaa Lähetä viesti-painiketta. Nyt sähköpostiisi pitäisi tulla WWW-lomakkeelta tiedot.

Sähköpostiosoitteen valinnan voisi tehdä myös muillakin elementeillä, joiden name-ominaisuus on lomake_email, kuten esim. lomakkeen vastaanottaja-kohdan select-elementillä. Tätä ei nyt kuitenkaan tehty, sillä käytössä ei useita jyu.fi-päätteisiä osoitteita.

Haku omalle sivulle

Googlen avulla on helppoa lisätä haku omalle sivulle. Google ei kovin avoimesti mainosta, että haun voi kohdistaa vain tiettyyn osoitteeseen.

Aloitetaan lisäämällä Nanonanon sivuston etusivulle (W:\www\index.html) normaali hakulomake aivan sivun alalaitaan ennen address-lohkoa:
```
<div class="haku">
<form action="http://www.google.com/search" method="get">
<div>
<label for="hakusanat">Hakusanat </label>
<input type="text" size="20" id="hakusanat" name="q" value="" />
<input type="submit" value="Hae" />
</div>
</form>
</div>
```
- Lomakkeen action="http://www.google.com/search" viittaa Googlen hakuohjelmaan.
- Tekstikentän name="q" viittaa hakusanoihin, jotka välitetään hakuohjelmalle.
- Kokeile miten haku toimii
Lisätään lomakkeen sisemmän div-elementin sisälle vielä muutama lisämääritys:
```
<input type="hidden" name="ie" value="iso-8859-1" />
<input type="hidden" name="oe" value="iso-8859-1" />
<input type="hidden" name="hl" value="fi" />
<input type="hidden" name="lr" value="lang_fi" />
```
- Näillä määrityksillä tekstin koodaus saadaan sopimaan suomalaiseen merkistöön ja haun kieleksi määrätään suomi.
- Kokeile miten hakusivu muuttuu.
Hakutuloksiin tulee vielä paljon muitakin sivuja kuin Nanonanon sivut. Rajoitetaan hakua lisäämällä seuraava parametri:
```
<input type="hidden" name="as_q" value="inurl:users.jyu.fi/~omatunnuksesi/www/" />
```
- as_q-nimisen muuttuja lisää muiden hakusanojen lisäksi uuden hakutermin inurl:users.jyu.fi/~omatunnuksesi/www/
- inurl-määreellä voidaan rajoittaa hakua sivun osoitteesta löytyvien sanojen perusteella. Sivun osoite on tultava heti kaksoispisteen jälkeen.
- 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. Tämä johtuu siitä, että sivuillesi ei ole mistään linkkejä, ja vaikka olisikin, niin hakuroboteilla kestää aikansa ennenkuin ne ehtivät vierailemaan sivuillasi.
- Voit kokeilla lomakkeen toimintaa vaihtamalla haun kohteeksi esim. inurl:appro.mit.jyu.fi/www/
Siirretään vielä hakupalkki oikeaan ylälaitaan. Avaa tyylisivu editoitavaksi Web Developer -työkaluriviltä. Lisää haku-luokalle position: absolute; -ominaisuus ja siirrä se top ja right-ominaisuuksilla sopivaan paikkaan. Tallenna muutokset tiedostoon demo2.css

SSI (Server Side Includes)

Samanlaisena toistuvien elementtien lisääminen ja muokkaaminen on vaivalloista, sillä samaa koodia joudutaan normaalisti kopioimaan useille sivuille. Toistuvia osia ovat esimerkiksi vakionavigointipalkki ja päivitystiedot. Parempi ratkaisu on keskittää kaikille sivuille yhteiset osat samaan paikkaan ja liittää ne automaattisesti kunkin sivun alkuun. Tähän voidaan käyttää esimerkiksi Apache-palvelimissa toimivaa SSI-tekniikkaa. WWW-palvelin tulkitsee dokumenttiin upotetut komennot ennen sivun lähettämistä selaimelle.

Tehtävä: Helpotetaan Nanonanon sivuston ylläpitoa siirtämällä kaikille dokumenteille yhteinen navigointi yhteen tiedostoon, josta sitä on helppoa keskitetysti ylläpitää.

Aloita uusi täysin tyhjä dokumentti (ilman XHTML-deklaraatioita). Kopioi tähän dokumenttiin Nanonanon etusivulla olevan <div class="navbar">...</div>-osan lähdekoodi.
Muuta kaikki navigointipalkin linkit absoluuttisiksi, jotta samat linkit toimivat miltä tahansa Nanonanon sivulta. Esim:
```
<li><a href="http://users.jyu.fi/~omatunnus/www/artikkelit/">Artikkelit</a></li>
```
Tallenna navigointipalkki navbar.include-nimellä Nanonanon kotisivuhakemistoon juureen W:\www\.
Muuta W:\www\-hakemistossa olevan index.html-tiedoston nimeksi index.shtml.
- Useissa Apache-palvelimissa oletuksena .shtml-päätteiset tiedostot prosessoidaan SSI-komentojen varalta. Hakemistosta palautetaan yleensä index.shtml-tiedosto, jos hakemistossa ei ole index.html-tiedostoa. Voimme siis käyttää hakemistoissa aivan hyvin index.shtml-nimisiä tiedostoja, koska linkkimme viittaavat hakemistoihin eivätkä index.html- tiedostoihin!
Muuta index.shtml-tiedostoa siten, että korvaat navbar-lohkon seuraavalla SSI-komennolla:
```

```
Kokeile selaimella miten etusivu toimii nyt selaimessa:
```
http://users.jyu.fi/~omatunnus/www/
```
Jos kaikki meni oikein niin edellä lisäämäsi SSI-komennon tilalla pitäisi selaimessa näkyä ihan normaali navigointipalkki, jonka WWW-palvelin lisäsi navbar.include-tiedostosta SSI-komennon kohdalle.
Varmista, että navigointipalkin linkit toimivat! Kokeile kaikkien linkkien toimintaa itse tai tarkistu sivu W3C:n Linkcheckerillä.
Kokeillaan lisätä SSI:n avulla myös dokumentin muutosaika sivulle. Siirrä index.shtml-tiedoston lopussa olevan strong-elementti pois address-lohkosta ja sijoita se p-elementin sisälle. Korvaa aikamääre rivillä:
```

```
- Ensimmäinen kommentti määrää SSI:n päivämäärämuotoilun
- Jälkimmäinen kommentti aiheuttaa varsinaisen muutosajankohdan lisäämisen.
- Kokeile selaimella ilmestyikö muutosaika sivulle.
Tee demo2.css:ään asiayhteydestä riippuva tyyli, joka siirtää address-lohkon jälkeisen p-elementin oikeaan laitaan address-lohkon alapuolelle. Pienennä muutosajankohdan teksti address-lohkon tekstin kokoiseksi.
Siirrä address-lohko omaan tiedostoon address.include. Lisää se etusivun loppuun SSI-komennolla:
```

```
- Miksi päivitysajankohtaa ei voitu siirtää suoraan address.include-tiedostoon?
Avaa pääteyhteys SSH Secure Shellillä jalava.cc.jyu.fi-palvelimeen. Siirry cd-komennolla symbolisen html-linkin alla olevaan www-hakemistoon.
Aja komento
```
nano -w .htaccess
```
.htaccess on tiedosto, jolla voidaan ohjata Apache-palvelimen toimintaa hakemistokohtaisesti.
Lisää .htaccess-tiedostoon seuraavat asetukset:
```
AddHandler Server-Parsed .html 
AddType text/html .html
```
- Ensimmäisellä direktiivillä käsketään palvelimen etsiä mahdolliset SSI-komennot kaikista .html-päätteisistä tiedostoista.
- Toinen määre varmistaa, että prosessoinnin jälkeenkin tiedostot jaetaan oikealla mediatyypillä. Apache 2 -www-palvelin jakaa oletuksena .shtml-päätteiset XHTML-tiedostot text/xml-muodossa mikä ei sovi kaikille selaimille ja validaattoreille joten pitää määrätä mediatyypiksi text/html.
- Tavallisia .html-päätteisiä tiedostoja ei yleensä kannata automaattisesti parsia SSI-komentojen varalta, koska se aiheuttaa palvelimelle raskasta ja turhaa työtä. Tässä tehtävässä kaikkiin .html-tiedostoihin on kuitenkin tarkoitus lisätä navigointipalkki automaattisesti, joten operaatio on perusteltu.
Lisää SSI-komentojen avulla navigointipalkki, tekijätiedot ja muutosajankohta ainakin artikkelit, opiskelu ja linkit-hakemistossa oleville sivulle.
Varmista W3C:n LinkChecker-ohjelmalla, että navigointilinkit toimivat varmasti kaikilla alasivuilla.

Lisätietoa

Käyttäjien kommentit

WWW-lomakkeet

Esteettömyys, SSI ja selainten erot