SlideShare a Scribd company logo
1 of 60
Načrtovanje in razvoj  spletnih  aplikacij (RSA) Islam Mušić, prof. Elektro in računalniška šola
Snov ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cilji ,[object Object],[object Object]
Vprašanja,  ideje  ...
Splet???
Splet, internet ,[object Object],[object Object],[object Object]
Internet - ponovitev ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Omrežja – Internetni protokoli ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
IP ,[object Object],[object Object],[object Object],[object Object]
TCP ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WIKI ??? ,[object Object],[object Object]
Splet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTTP Je  WWW  protokol (poznan tudi kot Request & Response) Brskalniki komunicirajo preko http Strežniki komunicirajo preko http Torej je komunikacijski protokol med strežnikom in odjemalcem (brskalnikom)
Delovanje http HTTP uporablja preprost pogovorni vzorec:  brskalnik se  poveže  s strežnikom preko porta  začne dialog s prošnjo za datoteko na strežniku  strežnik nato odgovori brskalniku nazaj in pošlje datoteko
Request & Response
Prikaz strani Brskalnik dobi od strežnika datoteko v obliki HTML (povezave, slike ...). Analiza  HTML Ugotovi, da potrebuje še vsebine za pravilen prikaz strani (recimo sliko). Ko se to zgodi, brskalnik začne še eno HTTP zahtevo za vsako sliko.
Prikaz strani
Vrste vsebine ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Protokol s stanjem Kadar protokol podpira stanje, to pomeni, da omogoča izmenjavo vrste ukazov med odjemalcem in strežnikom. Strežnik pri tem ves čas “ ohranja stanje ” odprte povezave, ki se imenuje tudi seja. Med protokole s stanjem štejemo FTP, SMTP, POP3
Protokol brez stanja Življenjska doba povezave je le v času izmenjave sporočila zahteva/odgovor. Zato ne obstaja avtomatski način vzdrževanja seje med več zaporednimi sporočili zahteva/odgovor. Posledica  je, da ne moremo združiti več zahtev v eno – npr. zahtevati spletne strani skupaj z vsemi slikami.
Zahteva / Odgovor
Majhen test telnet google.com 80 GET /search?q=Islam+Mušić Results (HTTP/1.0  200 OK ...) Enostavno
Http zahtevki GET Najbolj pogosta metoda za pridobitev vsebine datoteke. POST Podobno kot GET, samo da je telo zahtevka vsebuje podatke ki jih želimo sporočiti  strežniku . PUT Se uporablja za pošiljanje datotek na ciljni spletni strežnik. DELETE Redko implementirani.. zbriše dotično datoteko z strežnika.
Nekaj rezultatov 200 OK (datoteka najdena) 404  (File not found) 302 (Resource has moved)  500 (Internal server error)
Statusne kode ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
URI – Universal Resource Identifier ,[object Object],[object Object],[object Object],[object Object]
Struktura URL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Struktura URL ,[object Object],[object Object],[object Object],[object Object],[object Object]
Struktura URL ,[object Object],[object Object],[object Object],[object Object],[object Object]
Struktura URL ,[object Object],[object Object],[object Object]
Relativni/absolutni URL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML ( HyperText Markup Language ) je označevalni jezik za izdelavo spletnih strani  Tim Berners-Lee (W3C) Internet Engineering Task Force (IETF)  HTML 4.01  (24.12.1999) HTML5 (v razvoju; cca. 2012)
HTML ni programski jezik koda zapisana v ASCII (sistemska neodvisnost) TAG  (značke, oznake)
Uvod HTML je kratica za HyperText Markup Language je jezik za objavljanje na svetovnem spletu  podmnožica mednarodnega standarda za izmenjavo elektronskih dokumentov imenovan  SGML  (Standard Generalized Markup Language) HTML ponuja: elektronsko objavo dokumentov z besedili, tabelami, fotografijami, preusmeritve, uporaba obrazcev,…
HTML - oznake oznaka je vedno zaprta med znaka za večji in manjši < in > oznaka velja od mesta klica do mesta preklica, za preklic oznake pred oznako postavimo poševnico / nekatere oznake in elementi lahko vsebujejo tudi  atribute
XHTML - uvod XHTML je naslednji korak v razvoju jezikov, ki se uporabljajo za objavljanje v spletu.  Je jezik, ki zadostuje vsem pravilom jezika XML. Dokumente  XHTML 1  je mogoče napisati tako, da so popolnoma združljivi z različicami jezika HTML 4.01.
XHTML Uporablja HTML značke, ki pa jih je potrebno zapisati po pravilih pisanja XML  Obstajajo  razlike  med XHTML in HTML
XHTML Vsak XHTML dokument se mora začeti z deklaracijo tipa dokumenta (Document Type Definition).  DOCTYPE  deklarira različico XHTML, na kateri temelji dokument. Poznamo tri različne deklaracije (Strict, Transitional, Frameset). <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
XHTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XHTML Mala začetnica  Vsi elementi morajo biti  zaključeni   Gnezdenje  Atributi se ne smejo krajšat
XHTML <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional .dtd&quot;>  <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;sl&quot;>  <head>    <title>naslov dokumenta v naslovni vrstici </title>      </head>      <body>         <!-- telo oz. vsebina -->      </body>  </html>
Spletni portali ,[object Object],[object Object],[object Object]
Spletni portali ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CMS ,[object Object],[object Object],[object Object],[object Object],[object Object]
LMS ,[object Object],[object Object],[object Object],[object Object]
Groupware ,[object Object],[object Object],[object Object]
Groupware ,[object Object],[object Object],[object Object],[object Object],[object Object]
ECM ,[object Object],[object Object],[object Object],[object Object]
ECM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bugtracking (Issue tracking system)??? ,[object Object],[object Object],[object Object],[object Object]
Namestitev spletnega strežnika BITNAMI ,  AppServ , XAMPP, LAMP … Apache, PhP, MySQL (PostgreSQL ...), phpmyadmin, (phppgadmin) http://localhost http://127.0.0.1
Apache Spletni strežnik Windows /  Linux Razširjenost
MySQL SUPB   Prosto dostopen Razširjen v praksi in literaturi
PhP Skriptni  jezik Na zaslon uporabnika izpisujemo (X)HTML Podoben C++ Razširjen v praksi Velika skupnost <?php phpinfo(); ?>
PhP Končnica .php  <?php  …  ?> Komentar // ali /* in */ Kombinacija  HTML  in PhP
Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0
Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web 2.0 ,[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

Similar to Razvoj spletnih aplikacij

TurboGears -- o(g)rodje za agile razvoj aplikacij
TurboGears -- o(g)rodje za agile razvoj aplikacijTurboGears -- o(g)rodje za agile razvoj aplikacij
TurboGears -- o(g)rodje za agile razvoj aplikacijSimon Belak
 
CodeIgniter PHP Framework
CodeIgniter PHP FrameworkCodeIgniter PHP Framework
CodeIgniter PHP FrameworkTomaz Muraus
 
Entity framework code first migrations
Entity framework code first migrationsEntity framework code first migrations
Entity framework code first migrationsAndrej Tozon
 
Virtualization and cloud computing (in Slovene)
Virtualization and cloud computing (in Slovene)Virtualization and cloud computing (in Slovene)
Virtualization and cloud computing (in Slovene)Tomislav Rozman
 
Debugging (Silverlight + SQL Server)
Debugging (Silverlight + SQL Server)Debugging (Silverlight + SQL Server)
Debugging (Silverlight + SQL Server)Andrej Tozon
 
Splošni nasveti za spletne aplikacije
Splošni nasveti za spletne aplikacijeSplošni nasveti za spletne aplikacije
Splošni nasveti za spletne aplikacijeSamir Subašić
 
Koristna Orodja Pri Optimizaciji Spletnih Strani
Koristna Orodja Pri Optimizaciji Spletnih StraniKoristna Orodja Pri Optimizaciji Spletnih Strani
Koristna Orodja Pri Optimizaciji Spletnih Straniuokorn
 
Wordpress delavnica: Backend
Wordpress delavnica: BackendWordpress delavnica: Backend
Wordpress delavnica: BackendDomen Savič
 
Front-end web development - moje izkušnje WCLJ
Front-end web development - moje izkušnje WCLJFront-end web development - moje izkušnje WCLJ
Front-end web development - moje izkušnje WCLJLouDk
 
Šolski Spletni Informacijski Sistem
Šolski Spletni Informacijski SistemŠolski Spletni Informacijski Sistem
Šolski Spletni Informacijski SistemOto Brglez
 
Ie8 - nove funkcionalnosti
Ie8 - nove funkcionalnostiIe8 - nove funkcionalnosti
Ie8 - nove funkcionalnostiValentin Bufolin
 
Uporabniški vmesniki in spletno oblikovanje
Uporabniški vmesniki in spletno oblikovanjeUporabniški vmesniki in spletno oblikovanje
Uporabniški vmesniki in spletno oblikovanjeNina Maček
 
Izkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPAC
Izkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPACIzkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPAC
Izkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPACbniz
 
Silverlight in WCF RIA Services
Silverlight in WCF RIA ServicesSilverlight in WCF RIA Services
Silverlight in WCF RIA ServicesAndrej Tozon
 
Novi val učinkovitosti - Windows 7
Novi val učinkovitosti - Windows 7Novi val učinkovitosti - Windows 7
Novi val učinkovitosti - Windows 7Matjaz Sircelj
 
Developing a Web App from UX to Finish
Developing a Web App from UX to FinishDeveloping a Web App from UX to Finish
Developing a Web App from UX to FinishStudio Pešec
 
MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...
MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...
MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...Andrej Tozon
 
Dušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOA
Dušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOADušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOA
Dušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOAGenis d.o.o.
 

Similar to Razvoj spletnih aplikacij (20)

Projektni Teden
Projektni TedenProjektni Teden
Projektni Teden
 
TurboGears -- o(g)rodje za agile razvoj aplikacij
TurboGears -- o(g)rodje za agile razvoj aplikacijTurboGears -- o(g)rodje za agile razvoj aplikacij
TurboGears -- o(g)rodje za agile razvoj aplikacij
 
CodeIgniter PHP Framework
CodeIgniter PHP FrameworkCodeIgniter PHP Framework
CodeIgniter PHP Framework
 
Entity framework code first migrations
Entity framework code first migrationsEntity framework code first migrations
Entity framework code first migrations
 
Virtualization and cloud computing (in Slovene)
Virtualization and cloud computing (in Slovene)Virtualization and cloud computing (in Slovene)
Virtualization and cloud computing (in Slovene)
 
Debugging (Silverlight + SQL Server)
Debugging (Silverlight + SQL Server)Debugging (Silverlight + SQL Server)
Debugging (Silverlight + SQL Server)
 
Splošni nasveti za spletne aplikacije
Splošni nasveti za spletne aplikacijeSplošni nasveti za spletne aplikacije
Splošni nasveti za spletne aplikacije
 
Koristna Orodja Pri Optimizaciji Spletnih Strani
Koristna Orodja Pri Optimizaciji Spletnih StraniKoristna Orodja Pri Optimizaciji Spletnih Strani
Koristna Orodja Pri Optimizaciji Spletnih Strani
 
Wordpress delavnica: Backend
Wordpress delavnica: BackendWordpress delavnica: Backend
Wordpress delavnica: Backend
 
Front-end web development - moje izkušnje WCLJ
Front-end web development - moje izkušnje WCLJFront-end web development - moje izkušnje WCLJ
Front-end web development - moje izkušnje WCLJ
 
Šolski Spletni Informacijski Sistem
Šolski Spletni Informacijski SistemŠolski Spletni Informacijski Sistem
Šolski Spletni Informacijski Sistem
 
Ie8 - nove funkcionalnosti
Ie8 - nove funkcionalnostiIe8 - nove funkcionalnosti
Ie8 - nove funkcionalnosti
 
Uporabniški vmesniki in spletno oblikovanje
Uporabniški vmesniki in spletno oblikovanjeUporabniški vmesniki in spletno oblikovanje
Uporabniški vmesniki in spletno oblikovanje
 
Izkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPAC
Izkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPACIzkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPAC
Izkušnje pri uporabi ogrodja JSF za prenovo spletne aplikacije COBISS/OPAC
 
Silverlight in WCF RIA Services
Silverlight in WCF RIA ServicesSilverlight in WCF RIA Services
Silverlight in WCF RIA Services
 
Ontologije in tehnologije semantičnega spleta
Ontologije in tehnologije semantičnega spletaOntologije in tehnologije semantičnega spleta
Ontologije in tehnologije semantičnega spleta
 
Novi val učinkovitosti - Windows 7
Novi val učinkovitosti - Windows 7Novi val učinkovitosti - Windows 7
Novi val učinkovitosti - Windows 7
 
Developing a Web App from UX to Finish
Developing a Web App from UX to FinishDeveloping a Web App from UX to Finish
Developing a Web App from UX to Finish
 
MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...
MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...
MVVM in the Windows 8 and Windows Phone universe / MVVM v univerzumu Windows ...
 
Dušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOA
Dušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOADušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOA
Dušan Rot, Mitja Šturm - Interoperabilnost na osnovi SOA
 

Razvoj spletnih aplikacij

  • 1. Načrtovanje in razvoj spletnih aplikacij (RSA) Islam Mušić, prof. Elektro in računalniška šola
  • 2.
  • 3.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. HTTP Je WWW protokol (poznan tudi kot Request & Response) Brskalniki komunicirajo preko http Strežniki komunicirajo preko http Torej je komunikacijski protokol med strežnikom in odjemalcem (brskalnikom)
  • 14. Delovanje http HTTP uporablja preprost pogovorni vzorec: brskalnik se poveže s strežnikom preko porta začne dialog s prošnjo za datoteko na strežniku strežnik nato odgovori brskalniku nazaj in pošlje datoteko
  • 16. Prikaz strani Brskalnik dobi od strežnika datoteko v obliki HTML (povezave, slike ...). Analiza HTML Ugotovi, da potrebuje še vsebine za pravilen prikaz strani (recimo sliko). Ko se to zgodi, brskalnik začne še eno HTTP zahtevo za vsako sliko.
  • 18.
  • 19. Protokol s stanjem Kadar protokol podpira stanje, to pomeni, da omogoča izmenjavo vrste ukazov med odjemalcem in strežnikom. Strežnik pri tem ves čas “ ohranja stanje ” odprte povezave, ki se imenuje tudi seja. Med protokole s stanjem štejemo FTP, SMTP, POP3
  • 20. Protokol brez stanja Življenjska doba povezave je le v času izmenjave sporočila zahteva/odgovor. Zato ne obstaja avtomatski način vzdrževanja seje med več zaporednimi sporočili zahteva/odgovor. Posledica je, da ne moremo združiti več zahtev v eno – npr. zahtevati spletne strani skupaj z vsemi slikami.
  • 22. Majhen test telnet google.com 80 GET /search?q=Islam+Mušić Results (HTTP/1.0 200 OK ...) Enostavno
  • 23. Http zahtevki GET Najbolj pogosta metoda za pridobitev vsebine datoteke. POST Podobno kot GET, samo da je telo zahtevka vsebuje podatke ki jih želimo sporočiti strežniku . PUT Se uporablja za pošiljanje datotek na ciljni spletni strežnik. DELETE Redko implementirani.. zbriše dotično datoteko z strežnika.
  • 24. Nekaj rezultatov 200 OK (datoteka najdena) 404 (File not found) 302 (Resource has moved) 500 (Internal server error)
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32. HTML ( HyperText Markup Language ) je označevalni jezik za izdelavo spletnih strani Tim Berners-Lee (W3C) Internet Engineering Task Force (IETF) HTML 4.01 (24.12.1999) HTML5 (v razvoju; cca. 2012)
  • 33. HTML ni programski jezik koda zapisana v ASCII (sistemska neodvisnost) TAG (značke, oznake)
  • 34. Uvod HTML je kratica za HyperText Markup Language je jezik za objavljanje na svetovnem spletu podmnožica mednarodnega standarda za izmenjavo elektronskih dokumentov imenovan SGML (Standard Generalized Markup Language) HTML ponuja: elektronsko objavo dokumentov z besedili, tabelami, fotografijami, preusmeritve, uporaba obrazcev,…
  • 35. HTML - oznake oznaka je vedno zaprta med znaka za večji in manjši < in > oznaka velja od mesta klica do mesta preklica, za preklic oznake pred oznako postavimo poševnico / nekatere oznake in elementi lahko vsebujejo tudi atribute
  • 36. XHTML - uvod XHTML je naslednji korak v razvoju jezikov, ki se uporabljajo za objavljanje v spletu. Je jezik, ki zadostuje vsem pravilom jezika XML. Dokumente XHTML 1 je mogoče napisati tako, da so popolnoma združljivi z različicami jezika HTML 4.01.
  • 37. XHTML Uporablja HTML značke, ki pa jih je potrebno zapisati po pravilih pisanja XML Obstajajo razlike med XHTML in HTML
  • 38. XHTML Vsak XHTML dokument se mora začeti z deklaracijo tipa dokumenta (Document Type Definition). DOCTYPE deklarira različico XHTML, na kateri temelji dokument. Poznamo tri različne deklaracije (Strict, Transitional, Frameset). <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
  • 39.
  • 40. XHTML Mala začetnica Vsi elementi morajo biti zaključeni Gnezdenje Atributi se ne smejo krajšat
  • 41. XHTML <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional .dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;sl&quot;> <head>   <title>naslov dokumenta v naslovni vrstici </title>     </head>     <body>        <!-- telo oz. vsebina -->     </body> </html>
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51. Namestitev spletnega strežnika BITNAMI , AppServ , XAMPP, LAMP … Apache, PhP, MySQL (PostgreSQL ...), phpmyadmin, (phppgadmin) http://localhost http://127.0.0.1
  • 52. Apache Spletni strežnik Windows / Linux Razširjenost
  • 53. MySQL SUPB Prosto dostopen Razširjen v praksi in literaturi
  • 54. PhP Skriptni jezik Na zaslon uporabnika izpisujemo (X)HTML Podoben C++ Razširjen v praksi Velika skupnost <?php phpinfo(); ?>
  • 55. PhP Končnica .php <?php … ?> Komentar // ali /* in */ Kombinacija HTML in PhP
  • 56.
  • 58.
  • 59.
  • 60.