Načrtovanje in razvoj spletnih aplikacij

Vrste spletnih strani

Glede na uporabljeno tehnologijo pri izdelavi in glede na način delovanja ločimo:

Statične spletne strani

Statične spletne strani so shranjene na spletnem strežniku. Ob vsaki zahtevi odjemalca, strežnik pošlje enako kopijo statične spletne strani. Statična spletna stran se spremeni le, ko upravitelj spremeni njene datoteke na stežniku.

Za sestavo statične spletne strani zadostuje HTML tehnologija. HTML (angl. Hypertext Markup Langage) je označevalni jezik za določitev strukture in postavitev elementov spletne strani in za povezovanje na druge dele iste spletne strani ali zunanjih spletnih strani. Vsebuje oznake, s katerimi opišemo posamezne elemente spletne strani. HTML do neke mere opisuje tudi oblikovanje posameznih elementov spletne strani. Tako npr. oznaka <b> pomeni začetek, oznaka </b> pa konec poudarjene pisave. Besedilo, ki ga napišemo med tema dvema oznakama, bo prikazano poudarjeno.

Za bolj učinkovito oblikovanje pa uporabljamo tehnologijo CSS (angl. Cascading Style Sheets). Z njim lahko določimo, kako izgledajo posamezni elementi v HTML dokumentu (npr. vsi odstavki, vse slike, vse povezave...). Določimo lahko tudi nove oblikovne sloge, ki jih poimenujemo in potem uporabimo na enem ali več HTML elementih in datotekah.

Vsaka HTML datoteka ima glavo (oznaka <head>) in telo (oznaka <body>). V glavi so opisane lastnosti spletnega sestavka: naslov, kodna tabela znakov v kateri je spletna stran napisana, definicija privzetega URL naslova ali privzetega cilja vseh povezav na tisti spletni strani, poti do zunanjih virov, meta podatki, oblikovni slog. V telesu pa je dejanska vsebina spletne strani.

Koda statične spletne strani

Koda statične spletne strani

XML (angl. eXtensible Markup Language) je jezik za opis podatkov. XML v nasprotju s HTML ni namenjen za prikazovanje podatkov, ampak njihovemu shranjevanju, izmenjavi in iskanju. V XML-ju oznake niso predpisane, določimo lahko svoje lastne oznake, ki jih smiselno poimenujemo. Primer XML zapisa:

<vozilo>
   <tip>osebno vozilo<tip>
</vozilo>

Iskanje po XML dokumentu je bistveno hitrejše, saj iskalniku ni treba prečesati celotnega dokumenta, ampak samo oznake, ki ustrezajo iskanju.

Primer XML datoteke

Primer XML datoteke

Strežba statičnih spletnih strani

Postopek strežbe statičnih spletnih strani je sledeč:

  1. odjemalec tvori zahtevo, katere glavni element je naslov spletne strani
  2. zahteva se posreduje spletnemu strežniku
  3. spletni strežnik razčleni zahtevo in glede na naslov poišče ustrezno spletno stran na disku
  4. spletni strežnik tvori odgovor, katerega glavni element predstavlja spletna stran in ga posreduje odjemalcu
Strežba statičnih spletnih strani

Strežba statičnih spletnih strani

Aktivne spletne strani

Aktivne spletne strani omogočajo izvajanje programa v uporabnikovem brskalniku. Tako lahko:

  • vnesemo dinamičnot statičnemu jeziku HTML
  • beremo in spreminjamo vsebino HTML dokumentov
  • v HTML vstavimo dinamičen tekst
  • spremenimo atribute HTML oznak
  • spremenimo oblikovne sloge CSS
  • validiramo podatke iz obrazcev, še preden jih pošljemo na strežnik
  • zaznamo vrsto brskalnika, ki ga uporablja uporabnik, s čimer lahko prikažemo vsebine, ki so odvisne od brskalnikov (prikaz iste vsebine, različno oblikovane na tabličnih računalnikih, telefonih, prenosnikih, itd.)
  • ustvarjamo in pridobivamo podatke iz piškotkov, kar omogoča personalizacijo spletne strani
  • izvajamo različne dogodke, kot npr. klik z miško, pomik z miško, zaznavanje pritisnjene tipke, itd.
  • pripravimo interaktivne animacije
  • ...

Sestavni del spletne strani je programska koda, ki je lahko v izvršni obliki (npr. Java apleti) ali v izvorni obliki (npr. JavaScript).

Primer aktivne spletne strani, ki ima vključeno skriptno kodo JavaScript

Primer aktivne spletne strani, ki ima vključeno skriptno kodo JavaScript

Strežba aktivnih spletnih strani

Postopek strežbe aktivnih spletnih strani je sledeč:

  1. odjemalec tvori zahtevo, katere glavni element je naslov spletne strani
  2. zahteva se posreduje spletnemu strežniku
  3. spletni strežnik razčleni zahtevo in glede na naslov poišče ustrezno spletno stran na disku
  4. spletni strežnik tvori odgovor, katerega glavni element predstavlja spletna stran, ki je zgrajena iz HTML-ja, CSS-ja ter JavaScripta, in ga posreduje odjemalcu
  5. spletni odjemalec v brskalniku sestavi spletno stran iz prejetega HTML-ja in CSS-ja, izvede se tudi koda JavaScript
Strežba aktivnih spletnih strani

Strežba aktivnih spletnih strani

Strežba aktivnih spletnih strani na odjemalčevi strani

Strežba aktivnih spletnih strani na odjemalčevi strani

Dinamične spletne strani

Dinamične spletne strani so strani, ki jih strežnik generira na zahtevo. Razlog za uporabo dinamičnih spletnih strani je poenostavitev dela. Dinamične spletne strani omogočajo:

  • izdelavo spletnih strani za vsakega obiskovalca posebej
  • odpravo ponavljanja kode - npr. menujev, glave in noge html strani
  • uporabo velikih količin podatkov

Dinamične spletne strani strežnik zgradi šele takrat, ko odjemalec zahteva spletno stran. Glede na zahtevo odjemalca ali glede na stanje podatkov na strežniku je lahko stran iz trenutka v trenutek drugačna. Zahtevo odjemalca strežnik posreduje programu, ki npr. nekaj izračuna, poišče podatke na strežniku, rezultate vgradi v spletni sestavek. Šele nato strežnik spletno stran pošlje odjemalcu.

Primer dinamične spletne strani je na primer stran z zadetki iskanja na iskalniku Google. Vsebina je odvisna predvsem od uporabnikovega iskalnega niza. Pa tudi če uporabnik uporabi isti iskalni niz, so lahko zadetki v različnih časovnih obdobjih različni.

Tehnologije dinamičnih spletnih strani

Strežnik za zapis spletne strani, ki jo bo poslal odjemalcu, lahko uporablja različne tehnologije:

  • CGI (angl. Common Gateway Interface) - pri vsaki zahtevi se celotna spletna stran zgradi na novo
  • PHP (angl. Hypertext Preprocessor), ASP, (angl. Active Server Pages), ASP.NET, JSP (angl. Java Server Pages) - nekateri deli spletne strani so statični, drugi deli strani pa se zgradijo vsakič na novo

Strežba dinamičnih spletnih strani

S stališča odjemalca ni razlik med statičnimi in dinamičnimi spletnimi stranmi, saj se odjemalcu v obeh primerih posreduje spletna stran, ki je zgrajena iz HTML-ja, CSS-ja in lahko tudi JavaScripta-a. Razlika je samo v tem, da so statične spletne strani ustvarjene enkrat, aktivne spletne strani pa se ustvarjajo na zahtevo - ob vsakem dostopu odjemalca do strežnika.

Strežba dinamičnih spletnih strani je bolj zapletena in poteka v naslednjih korakih:

  1. odjemalec tvori zahtevo (angl. Request), katere glavni del predstavljajo naslov dinamične spletne strani, parametri in vrednosti parametrov
  2. brskalnik posreduje spletnemu strežniku HTTP zahtevo
  3. strežnik zažene program, ki obdela HTTP zahtevo
  4. program odpre predlogo spletne strani v skladu s HTTP zahtevo
  5. program poišče podatke iz podatkovne baze v skladu s HTTP zahtevo
  6. program iz predloge in podatkov ustvari dinamično spletno stran
  7. strežnik pošlje brskalniku ustvarjeno spletno stran kot HTTP odgovor
Strežba dinamičnih spletnih strani

Strežba dinamičnih spletnih strani

Na enem spletnem strežniku lahko tečejo različne dinamične spletne strani. Vsak tip dinamičnih spletnih strani potrebuje svoj pogon za izvrševanje. Običajno strežniki glede na končnice datotek (.php, .jsp, .asp, .aspx) določijo katerega od nameščenih pogonov naj uporabijo.