Nazaj Informatika Naprej Informatika 2 Vaje

V11 - Še nekaj uporabnih primerov: obrazci, koordinatne slike,


Dodatno gradivo: obrazci,

Obrazci

Včasih si želimo, da nam uporabniki vnesejo podatke kar preko spletnih strani (primeri: zbiranje prijav za..., prodaja izdelkov, odgovori na vprašanja, ... ). V takšnih primerih uporabimo obrazce, ki uporabniku omogočajo vnos podatkov. Nekateri urejevalniki HTML (tudi Word) imajo že pripravljene tipske obrazce, ki pa jih lahko tudi spreminjamo. Podatke iz omrežnega strežnika lahko pošljemo z el. pošto, ali pa jih pošljemo programu, ki teče na strežniku in jih le-ta shrani v vnaprej določeno datoteko. V drugem primeru potrebujemo torej strežniško podporo (posvet s skrbnikom omrežja). Zato bom natančneje opisal le primer pošiljanja podatkov z el. pošto.

Pošiljanje vnešenih podatkov preko el. pošte

S klikom na primer dobite primer enostavnega omrežnega obrazca. Njegova izvorna koda je napisana v nadaljevanju. Razložil bom le elemente, ki jih do sedaj nisem razložil oz. so pomembni za razumevanje.

<HTML>
 <HEAD>
  <TITLE> Obrazci </TITLE>
 </HEAD>

 <BODY>
  Primer shranjevanja oz. pošiljanja vnešenih podatkov po el. pošti.
  <BR><BR>
  Primer: Zbiramo prijave za izlet.
  <FORM METHOD=POST ACTION="mailto:Mirko.Pesec1@guest.arnes.si?subject=Prijava">
  <INPUT TYPE="TEXT" NAME="ime" SIZE="15" VALUE="Vnesi ime">
  <BR><BR>
  <INPUT TYPE="TEXT" NAME="priimek" SIZE="25" VALUE="Vnesi priimek">
  <BR><BR>
  <INPUT TYPE="SUBMIT" VALUE="Pošlji">
  <INPUT TYPE="RESET" VALUE="Izbriši">
</FORM>

 </BODY>
</HTML>

FORM - blok, v katerem morajo biti vse definicije polj obrazca;
POST - lastnost, ki omogoča shranjevanje podatkov (podobna je GET);
ACTION - naslov programa ali skripte, ki bo program obdelala;
INPUT TYPE -vrsta polja v obrazcu;
NAME - ime spremenljivke, ki jo uporabi program pri označevanju besedila;
SIZE - število znakov, ki jih lahko vpišemo v obrazec;
VALUE - besedilo, ki se pojavi v obrazcu pred vpisom uporabnikovih podatkov.

Ker nimamo strežniške podpore, smo v lastnosti ACTION zapisali kar el. naslov, na katerega naj bodo poslani podatki. Ti so običajno v datoteki, ki je pripeta k sporočilu. Ta datoteka pa ima pri nekaterih programih kar ime naslova sporočila. Podatki iz obrazca so zapisani v eni vrstici in so težko berljivi. Ta problem pa lahko rešimo z uporabo programov (najdemo jih na internetu - Trans-Form) za predelavo podatkov.

Zbiranje vnešenih podatkov na strežniku

Iz prej opisanih razlogov je bolje, če podatke pošljemo izbranemu programu na strežniku. Seveda se moramo pri tem posvetovati s skrbnikom strežnika.
Tak program za strežnik je prosto dostopen na strežniku Izobraževalne delavnice na Fakulteti za matematiko in fiziko in se imenuje dodaj. Deluje tudi na lokalnem omrežju in celo na lokalnem računalniku.

V tem primeru ima značka FORM z lastnostjo ACTION naslednjo obliko:

 <FORM METHOD=POST ACTION="<ime programa s potjo><ime HTML datoteke, ki jo vidi uporabnik>?file=<ime datoteke s podatki>&csv-neobvezen parameter, ki omogoča odpiranje datoteke s programom Excel">

Primer uporabe:
<FORM METHOD=POST ACTION="Programi/dodaj.exe/odgovr.htm?file=podatki.csv&csv"

Koordinatne slike

Včasih želimo eni sami sliki dodati večje število povezav. To nam omogočajo koordinatne slike oz. ukaza MAP in AREA.

Najprej si oglejmo primer. Iz primera je razvidno, da lahko n.pr.: en sam "gumb" opremimo z več povezavami. Če je tak gumb dovolj majhen in ga namestimo na več mestih v daljšem dokumentu, nam to lahko zelo pomaga pri pomikanju na strani s sorodnimi temami.

Naj navedem še en primer uporabe. Imamo skupinsko fotografijo. Na vsak obraz bi radi naredili povezavo na večjo sliko ali na kak drug naslov (spletna stran, el. naslov, ...).

To sta samo dva primera uporabe. Sedaj pa k razlagi. Za lažje razumevanje, bom tudi tokrat v nadaljevanju prikazal najprej izvorno kodo našega primera:

<HTML>
 <HEAD>
  <TITLE> Koordinatne slike </TITLE>
 </HEAD>

 <BODY>
  <MAP NAME="Ime1">
        <AREA HREF="../../../Index.html" COORDS="0,0,50,20" ALT="Osnovna stran">
        <AREA HREF="../../Informatika1/Informatika1.html" COORDS="0,20,50,40" ALT="Informatika1">
        <AREA HREF="../Informatika2.html" COORDS="0,40,50,60" ALT="Informatika2">
  </MAP>
  <IMG SRC="V11_KoordinatneSlike.gif" HEIGHT=60 WIDTH=50 USEMAP="#Ime1">
 </BODY>
</HTML>

MAP - prikaz slike;
NAME - povezava z ukazom IMG;
AREA - sliko razdeli na več delov, omogoči vnos povezave in opisa oz. prikaz nadomestnega besedila;
COORDS - koordinate posameznih delov slike, ki jim želimo dodeliti povezave;
HREF - naslov za del slike, ki ga omejujejo koordinate;
NOHREF - določimo odročje brez povezav;
SHAPE - omogoča še druge oblike likov (ne samo pravokotnik, ki je privzeta oblika):
    - CIRCLE - podamo x, y in premer kroga;
    - RECT - pravokotnik (x1,y1,x2,y2)     /  x1,y1 - levi zgornji kot  / x2,y2 - desni spodnji kot;
    - POLY - mnogokotnik s krajišči          / zadnje krajišče se samodejno poveže s prvim;
    - DEFAULT - področje, ki ga nismo posebej določili;

Nazaj Informatika Naprej Informatika 2 Vaje