U web aplikacijama podaci se stalno prenose od klijenta ka serveru i nazad. Upoznajmo se sa kolačićima, sesijama, lokalnim skladištima i ostalim mestima gde možete da čuvate podatke u web aplikacijama.

Uvod

Rad na web aplikacijama se u principu svodi na prenos podataka sa klijenta(pregledača - engl. Web Browser) na web server i obrnuto. Kada otvaramo neku stranu pregledač šalje neke podatke kojima se definiše šta je potrebno vratiti kao odogovor. Web server čita ove podatke i kreira podatke koje treba da prikaže formatira kao HTML i šalje ih pregledaču.

Zbog toga je izuzetno bitno da znamo gde sve možemo držati promenljive u web aplikacijama kako se mogu unositi i menjati. Postoje tri mesta gde se drže podaci kada radite sa web aplikacijama:

1. U perzistentnom skladištu npr. baza podatka, fajl i slično. Dana se je teško zamisliti napredniji sajt koji ne prikazuje neke podatke iz neke baze
2. Na serveru gde se unutar procesa koji na web serveru obrađuje zahteve pamte podaci sa kojima se radi.
3. U pregledaču na klijentu gde se drže podaci kojima se pristupa uglavnom iz JavaSkripta ili ih korisnik direktno unosi preko nekih formi.

Perzistentna skladišta (baze podataka) su priča za sebe tako da ćemo ovde pokriti priču o promenljivama koje se drže na serveru i na pregledaču.

Podaci na klijentskoj strani

Standardni HTML vam omogućava da unosite/držite podatke na klijentskoj strani u formama, kolačićima, skrivenim poljima i slično. Ovim podacima pristupate pomoću JavaSkript-a ili ih korisnik direktno unosi, a podaci koji su u njima se šalju i web serveru. U nastavku ćemo videti kako se koriste skrivena polja i kolačići.

Polja forme

Najčešće podatke na klijentskoj strani unosi korisnik u polja forme. Forme sadrže različite elemente kao što su tekst polja, polja za lozinke, potvrvrdu, radio dugmad, liste i slično.

Korisnik unosi podatke u polja forme i pritiskom na dugme za slanje, oni se šalju ka web serveru. U sledećem primeru je prikazan HTML kod kojim se prikazuju tekst polja na HTML strani gde korisnik može uneti podatke:

<form action="snimipodatke.aspx">
  <input type="text" name="ime" value="jocapc" /> 
  <input type="text" name="email" value="" />
  <select name="boja">
    <option>Crvena</option>
    <option>Crvena</option>
  </select>
  <input type="text" name="date" value="" />
  <input type="checkbox" name="active" />
  <button type="submit">OK</button>
  <button>Cancel</button>
</form>

U jednom trenutku korisnik će popuniti polja forme ona će biti poslata server (engl. submit) server će prihvatiti podatke i uraditi nešto sa njima (npr. snimiti ih u bazu podataka) i poslati neki odgovor klijentu (npr. HTML koji kaže da je promena uspešna).

Kada korisnik pošalje formu, na serverskoj strani možete pristupiti poljima po imenu pomoću Request objekta:

string ime = Request.Form["ime"].ToString();

Ime pod kojim pronalazite polja u Request.Form kolekciji se slažu sa imenim koja se stavili kao name atribut u HTM poljima.

Posebna vrsta polja koje korisnik ne može promeniti su skrivena polja.

Skrivena polja

Skrivena polja su standardni HTML elementi koje korisnik ne može da vidi niti da ih upisuje. Za razliku od ostalih HTML polja njihova namena nije da ih korisnik popunjava nego da sadrže neke podatke koje korisnik ne vidi a uglavnom im se pristupa preko JavaSkripta. Ako bi vam na primer trebalo polje u kome čuvate vrednost nekog brojača treba staviti sledeći element u HTML strane:

 <input type="hidden" name="brojac" value="17" />

Svako skriveno polje mora da ima tip "hidden" kojim se definiše pregledaču da ovaj element ne sme da prikaže korisniku. Polje mora da ima atribute name i value. JavaSkript može da pristupi podatku upisanom u skrivenom polju tako što pronađe element po imenu i koristi vrednost atributa kao u sledećem primeru:

<script type="text/javascript">
var hid=document.getElementsByName("brojac")[0];
alert(hid.value);
hid.value = hid.value+1;
</script>

Standardni JavaSkript vam omogućava da pronađete skriveno polje po imenu, pročitate (i eventualno prikažete) vrednost njegovog atributa "value" i da upišete novu vrednost u njega. Ako je skriveno polje u nekoj formi, šta god da upišete kao vrednost će biti poslato serveru kada se forma pošalje. Ako koristite C# na serverskoj strani prihvatanje vrednosti skrivenih polja je jednostavno - samo ga pronađite u skupu parametara forme iz zahteva kao u sledećem primeru:

 string brojac = Request.Form["brojac"].ToString();

Skrivena polja su najjednostavniji način za razmenu podataka klijenta na kome nekakav JavaSkript upisuje podatke i web servera. Skrivena polja sadrže podatke čim se strana učita u pregledač i sadrže podatke sve dok se ne pređe na sledeću stranu. Ako bi se pravila paralela sa serverskim promenljivama, onda bi se moglo primetiti da su skrivena polja ekvivalentna kontekstnim promenljivama na serveru poto im je životni ciklus strana na kojoj se nalaze.

Kolačići

Kolačići su slični skrivenim poljima - oni predstavljaju skladište za podatke u pregledaču kome se može pristupiti po imenu pomoću JavaSkripta i korisnik ne može direktno da ih menja. Razlika između skrivenih polja i kolačića je u činjenici da su kolačići promenljive koje se stalno prosleđuju od pregledača do servera i nazad, za razliku od skrivenih polja koja se samo šalju u jednom smeru od pregledača ka serveru.

Ako je unet neki podatak u kolačić u pregledaču, on će biti prosleđen serveru zajedno sa ostalim parametrima. Isto tako server u odgovoru može da pošalje instrukciju da se neka vrednost u kolačiću postavi, promeni ili obriše. Na ovaj način kolačići prestavljaju lokacije za promenljive koje stalno kruže između klijenta i servera sve dok ih jedna strana ne obriše.

Iako se kolačići na klijentskoj strani jednostavno upisuju JavaSkriptom, jednostavnji način da koristite kolačiće je da koristite jQuery biblioteku i jQuery Cookie plugin. Ako koristite ovaj plugin postavljanje i čitanje kolačića po imenu je jednostavno:

<script type="text/javascript">
jQuery.cookie('sifra', 1234);
var s = jQuery.cookie('sifra');
jQuery.cookie('sifra', 4321);
</script>

U gornjem primeru je postavljena vrednost kolačića sa imenom "sifra" na 1234 i učitana vrednost u JavaSkript promenljivu s. Kao što vidite promenljive u kolačićima se jednostavno koriste. Kao i skrivena polja, kolačići se šalju od klijenta ka web serveru u svakom zahtevu. Na primer, ako bi se poslao web zahtev ka strani Index.aspx i ako trenutno u pregledaču imamo dva kolačića "sifra" i "visina" zahtev koji se šalje serveru bi bio u sledećem primeru:

GET /Index.aspx HTTP 1.1
Accept: *.*
Cookie: sifra=4321;visina=75;
(Telo Zahteva)

U ovom zahtevu se otvara strana Index.aspx i šalju joj se vrednosti dva kolačića "sifra" i "visina". Ako koristite C# možete na serverskoj strani možete lako pročitati vrednost određenog kolačića po imenu - primer je dat u sledećem kodu:

HttpCookie kolacic = Request.Cookies["sifra"];
if (kolacic != null)
   sifra = kolacic.Value

Pošto se kolačići šalju sa svakim zahtevom jednostavno ih je pročitati po imenu. Jedino ako kolačić ne postoji potrebno je proveriti da li je vrednost null. Isto tako kreiranje i postavljanje vrednosti kolačića je jednostavno:

HttpCookie kolacic = new HttpCookie("sifra");
kolacic.Value = "1234";
Response.Cookies.Add(kolacic);

Kada server vraća odgovor pregledaču on može da prosledi i vrednosti promenljivih koje treba upisati u kolačiće u pregledaču kao u sledećem primeru:

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: sifra=1234;
(Telo HTP Odgovora)
 

U ovom primeru je u odgovoru vraćena nova vrednost kolačića "sifra" i stara vrednost kolačića "visina". Kada se kolačić doda u odgovor servera biće postavljen u pregledač gde mu se može pristupiti iz JavaSkripta. Kolačići su veoma slični sesionim promenljivama na serverskoj strani pošto postoje u pregledaču sve vreme dok korisnik radi sa aplikacijom.

Pored toga možete kontrolisati životni vek kolačića i definisati da određena vrednost može da postoji sledećih nekoliko dana. Sledeći kod upisuje vrednost promenljive u kolačić i definiše da on treba da bude obrisan iz pregledača za sedam dana:

<script type="text/javascript">jQuery.cookie('sifra', 4321, { expires: 7 });</script>

Ovaj kod direktno modifikuje kolačić na pregledaču. Ekvivalentni C# kod koji postavlja kolačić na serverskoj strani sa datumom isteka je prikazan u sledećem primeru:

HttpCookie kolacic = new HttpCookie("sifra");
kolacic.Value = "1234";
kolacic.Expires = DateTime.Now.AddDays(7);
Response.Cookies.Add(kolacic);
 
 

Pod pretpostavkom da je ovaj kolačić postavljen 24 jula, odgovor koji server šalje pregledaču će biti:

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: sifra=1234; expires=Tue, 31-Jul-2012 07:13:22
(Telo HTP Odgovora)

Kao što možete videti pored imena i vrednosti, server šalje i trenutak kada pregledač treba da obriše kolačić. Kolačići su idealni kada treba da čuvate vrednosti na klijentskoj strani tokom rada sa aplikacijom (slično sesionim promenljivama). Možete da kontrolišete koliko dugo će se zadržati na pregledaču i u tom periodu postavljati promenljive koje će se koristiti u JavaSkriptu i prosleđivati nazad ka serveru. Pored toga kolačići su idealni kada treba da zapamtite neki podatak na klijentskom računaru.

Na primer, kada se korisnik prijavi u neki sistem (npr Facebook) u formi za prijavljivanje postoji opcija ("remember me" checkboks) kojim korisnik može da zatraži da se zapamti ko je on kako bi mogao automatski da bude ulogovan kada sledeći put dođe na sajt. Ukoliko korisnik odabere ovu opciju ona može da se upiše u kolačić i stalno šalje serveru. Ako sever pronađe ovu informaciju u kolačiću neće tražiti od korisnika da se opet prijavi kada sledeći put dođe na sajt.

Lokalno i sesiono skladište

HTML5 donosi dva nova tipa skladišta podataka u koja se mogu staviti podaci po imenu a to su:

• Lokalno skladište
• Sesiono skladište. 

Za razliku od kolačića i parametara, lokalno skladište predstavlja podatke koji se ne šalju ka serveru u svakom zahtevu. Oni predstavljaju podatke koji se nalaze isključivo na klijentu (pregledaču) i ako ih je potrebno poslati ka server moraju se upisati u neko skriveno polje, kolačić ili parametar URLa.

Lokalno skladište predstavlja rečnik podataka u pregledaču kojima se može pristupiti po nazivu pomoću JavaSkripta. Primer JavaSkript poiva je prikazan u sledećem kodu:

localStorage[“sifra”] = “1234”;
var id = localStorage[“sifra”];

Podaci koji se nalaze u lokalnom skladištu se čuvaju i kada se pregledač zatvori tako da se mogu koristiti neograničeno. Lokalno skladište se često koristi radi keširanja podataka na klijentskoj strani koji se mogu koristiti u slučaju ako se prekine veza sa serverom. Ovo je posebno popularno u mobilnim aplikacijama koje često moraju da rade i kada se veza sa internetom izgubi. Pored lokalnog skladišta postoji i sesiono skladište kojem se pristupa na isti način kao i lokalnom skladištu:

sessionStorage[“sifra”] = “1234”;
...
var id = sessionStorage[“sifra”];

Jedina razlika u odnosu na lokalno skladište je u činjenici da se podaci u sesionom skladištu gube kada se pregledač zatvori. U zavisnosti od namene možete odabrati da li vam više odgovara lokalno ili sesiono skladište.

Podaci na serverskoj strani

Kada se podaci popune na klijentskoj strani i pošalju u zahtevu potrebno ih je negde smestiti na serverskoj strani kako bi programski kod mogao da ih koristi. Na serverskoj strani promenljive mogu biti stavljene u različite kolekcije u zavisnosti od potrebe. Promenljivama se pristupa pomoću nekog serverskog programskog jezika kao što je C#. Postoje tri grupe promenljivih koje se mogu koristiti na serverskoj strani:

• Aplikacione promenljive - podaci koje dele svi korisnici koji trenutno rade sa aplikacijom.
• Sesione promenljive - podaci koje koristi jedan korisnik dok radi sa aplikacijom.
• Promenljive zahteva - podaci koji postoje samo dok se izvršava jedan zahtev.

Parametri zahteva 

U svakom zahtevu koji se šalje ka serveru se nalaze podaci koje korisnik želi da prosledi. Ovi podaci se mogu proslediti na dva načina:

• Preko URLa što je karakteristično za GET zahteve: 

http://www.moj.sajt.com/index.aspx?id=2&ime=test&svi=true

• U telu zahteva  što je karakteristično za POST zahteve:  

http://www.moj.sajt.com/index.aspx
id=2
ime=test
svi=true

Razlika je samo u tome što se u POST zahtevu ne vide parametri u URLu koj se vidi u pregledaču, kao i u činjenici da u GET zahtevu postoji ograničenje u količini podataka koje može da prosledi. U oba slučaja, na serverskoj strani im možete pristupiti po imenu pomoću Request kolekcije:

int id = Convert.ToInt32(Request["id"]); 
string ime =  Request["ime"]; 
boolean svi = Convert.ToBoolean(Request["svi"]); 

Po potrebi možete konvertovati tip iz stringa u int ili boolean.

Promenljive zahteva se mogu samo čitati pošto su to vrednosti koje šalje koristnik. U slučaju da su vam potrebne promenljive koje su ekvivalentne parametrima zahteva ali želite da ih i menjate možete da koristite kontektste promenljive.

Kontekstne promenljive

Kontekstne promenljive su promenljive koje žive dok traje jedan zahtev, ali ih ne šalje korisnik iz pregledača. One se koriste kako bi u njih programski kod stavio neke podatke koje će koristiti neki drugi deo koda i koji će nestati kad se zahtev završi. Kao i aplikacione i sesione i njima se pristupa pomoću imena kao u sledećem primeru:

HttpContext.Current.Items["jezik"] = 1;
...
string jezik = (string) (HttpContext.Current.Items["jezik"]);
 

HttpContext.Current predstavlja trenutni kontekst zahteva i u okviru njega se nalazi rečnik u kome možete da stavljate promenljive po imenu. Ove promenljive se koriste na isti način kao i prethodne samo im je životni vek od trenutka kada im se postavi vrednost do trenutka kada se završi zahtev (tj. prikaže strana).

Čemu služe kontekstne promenljive? Kontekstne promenljive koristimo kada želimo da ostvarimo komunikaciju među komponentama bez eksplicitnog prosleđivanja (npr. preko argumenata metoda). Umesto toga možete da upišete neki podatak u kontekstnu promenljivu i svaka komponenta kojoj treba taj podatak može da ga preuzme ili modifikuje. Kada se zahtev završi i kada nema više serverskih komponenata kojima bi taj podatak trebao kontekstne promenljive se gube.

 Primer korišćenja kontekstne promenljive može biti konekcija sa bazom podataka. Možete na početak zahteva da inicijalizujete konekciju ka bazi i stavite je u kontekst. Bilo koja komponenta koja treba da komunicira sa bazom može da uzme konekciju iz konteksta izvrši SQL upit ka bazi i ostavi konekciju sledećoj komponenti. Kada se zahtev završi konekcija iz konteksta više nije potrebna i može se zatvoriti i ukloniti.

Sesione promenljive

Sesija je rečnik promenljivih gde su promenljive izolovane za pojedinačne korisnike. Sesionim promenljivama može pristupi isključivo trenutni korisnik i to samo svojim sesionim promenljivama. Za svakog korisnika koji pristupa web aplikaciji, aplikacija ima po jednu sesiju gde drži samo njegove podatke. Kada korisnik pošalje zahtev preko pregledača, on implicitno šalje i identifikator njegove sesije tako da web aplikacija može da identifikuje sesione podatke koji pripadaju isključivo njemu.

Slično aplikacionim promenljivama, sesione promenljive se nalaze u objektu Session i može im se pristupiti po ključu. Primer C# koda koji upisuje i čita sesionu promenljivu je prikazan u sledećem primeru:

Session["jezik"] = "sr";
string jezik = Session["jezik"];

U ovom primeru smo upisali vrednost jezika "sr" u sesionu promenljivu "jezik" i upisali je u lokalnu promenljivu. Za razliku od aplikacionih promenljivih gde bi svi korisnici videli istu promenljivu "jezik" u slučaju sesionih promenljivih se za svakog korisnika pravi posebna kopija koja je dodeljana samo trenutnom korisniku. To znači da ako jedan korisnik upiše vrednost promenljive "jezik" samo on će videti tu vrednost. Drugi korisnici koji iz svoje sesije čitaju promenljivu "jezik" će imati svoju kopiju.

Sesione promenljive se koriste kada želite na zapamtite neki izbor koji je napravio korisnik i ne želite da se ta informacija deli sa drugim korisnicima. Neki primeri korišćenja su:

• Odabir trenutnog jezika - ako pravite višejezični sajt i omogućavate korisnicima da odaberu jezik na kom će biti prikazan sadržaj promenljivu koja sadrži trenutno odabrani jezik ćete staviti u sesiju. Različiti korisnici će imati različite vrednosti jezika i u zavisnosti od te promenljive ćete birati na kom jeziku prikazujete sadržaj.
• Korpa za kupovinu - ako korisnik na sajtu može da bira proizvode koje će kupiti neke vrati i tek kasnije ih stvarno kupi lstu izabranih prizvoda ćete držati kao sesionu promenljivu i u toj listi dodavati ili uklanjati proizvode. Ostali korisnici koji istovremeno kupuju imaju svoje kopije liste odabranih proizvoda (pod istim imenom u sesiji) ali se oni ne mešaju sa izborom drugih korisnika. 

Sesione promenljive žive dok korisnik radi sa aplikacijom. Kada korisnik prestane da radi sa aplikacijom (na primer pola sata ne šalje nikakve zahteve i akcije), njegova sesija ističe i sve sesione promenljive se gube.

Aplikacione promenljive

Aplikacione promenljive predstavljaju promenljive kojima mogu pristupati svi korisnici web aplikacije. Applikacione promenljive su smeštene u globalni rečnik gde se svakoj promenljivoj može pristupiti po imenu (ključu). Primer korišćenja aplikacionih promenljivih iz C# koda je prikazan u sledećem listingu:

int brojac = Convert.ToInt32(Application["Brojac"]);
...
Application["Brojac"] = brojac + 1;

U ovom primeru brojac je promenljiva koja se nalazi u Application rečniku i može joj se pristupiti preko ključa "Brojac". Aplikacione promenljive su idealne za podatke na serveru koji su deljeni i zajednički za sve klijente. Tipičan primer takve promenljive je brojač poseta.

Naravno treba imati na umu životni vek ovih promenljivih. Aplikacione promenljive su smeštene u memoriji servera i nestaju kada se web aplikacija ili server resetuju. U tom slučaju brojač poseta koji bi se stavio u aplikacione promenljive bi se resetovao svaki put kada se web aplikacija resetuje.

U slučaju zajedničkih promenljivih koje menja više različitih korisnika potrebno je obezbediti neku vrstu sinhronizacije pristupa tj. ne može se dozvoliti da dva korisnika istovremeno menjaju podatke. Application klasa ima metode Lock() i Unlock() kojima se može sinhronizovati pristup deljenim resursima kao u sledećem primeru:

Application.Lock();
int brojac = Convert.ToInt32(Application["Brojac"]);
Application["Brojac"] = brojac + 1;
Application.UnLock();

U ovom slučaju jedan korisnik je dobio isključivi pristup aplikacionim promenljivama sve dok ne pozove metodu UnLock().