Spletno Programiranje: Introduction to Web Programming PDF

SPLETNO PROGRAMIRANJE 2024/2025 1. predavanje Uvodno predavanje izr. prof. dr. Tomaž Kosar Spletno programiranje – 2. letnik UNI R-IT Učno osebje ◼ Predavatelj: izr. prof. dr. Tomaž Kosar ▪ G2-2N.36, MS Teams ▪ [email protected]...

SPLETNO PROGRAMIRANJE 2024/2025 1. predavanje Uvodno predavanje izr. prof. dr. Tomaž Kosar Spletno programiranje – 2. letnik UNI R-IT Učno osebje ◼ Predavatelj: izr. prof. dr. Tomaž Kosar ▪ G2-2N.36, MS Teams ▪ [email protected] ▪ govorilne ure: ponedeljek, 8-10 ◼ Asistenta: ▪ Sandi Majninger, mag. inž. rač. in inf. tehnol. ▪ G3-M1-59 Laboratorij Martin, MS Teams ▪ [email protected] ▪ govorilne ure: torek, 12-14 ▪ Dragana Ostojić, mag. inž. rač. in inf. tehnol. ▪ G3-N1-34 , MS Teams ▪ [email protected] ▪ govorilne ure: sreda, 9-11 ◼ https://estudij.um.si/ 1. predavanje – uvodna predavanja 2 Spletno programiranje – 2. letnik UNI R-IT Obseg predmeta ◼ Predavanja: 30 ur ▪ petek, 7.30 - 9.00 (E-105) ◼ Laboratorijske vaje: 42 ur ▪ 2. letnik: ▪ ponedeljek, 12.00 - 14.15, G-219 (RV1) ▪ ponedeljek, 14.15 - 16.30, G-219 (RV4) ▪ ponedeljek, 16.30 - 18.45, G-219 (RV3) ▪ torek, 15.00 - 17.15, F-102 (RV2) ▪ 3. letnik: ▪ torek, 17.00 - 19.15, E-110 (RV1) ▪ sreda, 14.00 - 16.15, E-110 (RV2) ◼ Seminarske vaje: 3 ure ▪ ponedeljek, 24.2.2025, 15.00 – 17.15 (A-301) – že izvedeno ◼ Samostojno delo: 105 ur ◼ ECTS: 6 kreditnih točk 1. predavanje – uvodna predavanja 3 Spletno programiranje – 2. letnik UNI R-IT Spletno programiranje – vsebina predmeta ◼ Uvod: ponovitev osnov razvoja spletnih aplikacij: piškotki, seje. ◼ Podatkovne baze v spletnih aplikacijah (MySql). ◼ NoSQL baze za uporabo v spletnih aplikacijah (npr. MongoDB). ◼ Načrtovalski vzorec MVC (model-view-controller). ◼ Celostna arhitektura spletnih aplikacij. ◼ Skladi rešitev: LAMP, MEAN, MERN, MERNG. 1. predavanje – uvodna predavanja 4 Spletno programiranje – 2. letnik UNI R-IT Spletno programiranje – vsebina predmeta ◼ Programiranje na strežniku: ▪ node.js, npm, Express, Mongoose, itd. ◼ Spletne storitve (SOAP, REST). ▪ Izmenjava podatkov (JSON, XML), serializacija in deserializacija. ◼ Programiranje na odjemalcu: React, Angular. ▪ Pogledi in šablone. ◼ Enostranske spletne aplikacije (single page application). ◼ Evolucija spletnih aplikacij (Responsive Web Design, Progressive Web Apps). ◼ Globoko povezovanje. 1. predavanje – uvodna predavanja 5 Spletno programiranje – 2. letnik UNI R-IT Spletno programiranje – vsebina predmeta ◼ Načrtovanje dobre spletne aplikacije (stilski vodiči, prelomne točke, Material Design, internacionalizacija, podpora za omejene uporabnike). ◼ JavaScript in translatorji (TypeScript). ◼ Trendi pri programiranju na odjemalcu. ◼ Večplatformni razvoj (Flutter, React Native, Ionic, Framework7). ◼ Zmogljivost, zanesljivost, varnost. ◼ Skaliranje spletnih aplikacij (vertikalno, horizontalno skaliranje, virtualizacije, računalništvo v oblaku, mikroservisi, oblačne podatkovne baze, pristop brez strežnika). ◼ Podatkovni centri. ◼ Prihodnost spletnih aplikacij, razširitve brskalnikov (WebAssembly, itd.). ◼ Portali, sistemi za upravljanje z vsebino, dokumentni sistemi, priporočilni sistemi, pomenski splet. 1. predavanje – uvodna predavanja 6 Spletno programiranje – 2. letnik UNI R-IT Pregled po tednih ◼ 1. predavanje ◼ 8. predavanje ▪ Uvod (spletno inženirstvo, ▪ SPA, Deep linking, RWD, MD, PWA komunikacija strežnik-odjemalec, dinamične spletne strani) ◼ 9. predavanje ▪ Angular ◼ 2. predavanje ▪ MVC, varnost podatkov ◼ 10. predavanje ▪ Typescript ◼ 3. predavanje ▪ Node.js ◼ 11. predavanje ▪ Večplatformi razvoj (React Native) ◼ 4. predavanje ▪ spletne storitve (SOAP, REST), NoSQL ◼ 12. predavanje podatkovne baze ▪ Skaliranje spletnih aplikacij ◼ 5. predavanje ◼ 13. predavanje ▪ Express.js, Mongoose, MongoDB ▪ Zaključek (podatkovni centri, kategorije spletnih aplikacij, evolucija spletnih ◼ 6. predavanje aplikacij, WASM, prihodnost spleta) ▪ React ◼ 7. predavanje ▪ Redux, Axios 7 Spletno programiranje – 2. letnik UNI R-IT Temeljni študijski viri ◼ Učno gradivo in primeri dosegljivi na E-študij UM: https://estudij.um.si/ – potrebna je prijava v portal. https://github.com/tomazkosar/CourseWebProgramming ◼ E. Brown: Web Development with Node and Express, O'Relly Media Inc., 2019. ◼ A. Banks, E. Porcello: Learning React: Functional Web Development with React and Redux, O'Relly Media Inc., 2018. ◼ S. Seshadri: Angular: Up and Running: Learning Angular, Step by Step, O'Relly Media Inc., 2018. ◼ D. K. Barry: Web Services, Service-Oriented Architectures, and Cloud Computing, Second Edition: The Savvy Manager's Guide (The Savvy Manager's Guides), Elsevier, Waltham, 2013. 1. predavanje – uvodna predavanja 8 Spletno programiranje – 2. letnik UNI R-IT Cilji predmeta ◼Cilj predmeta je naučiti študenta implementirati spletne aplikacije s trenutno aktualnimi spletnimi tehnologijami, programskimi orodji, skriptnimi in programskimi jeziki za razvoj spletnih aplikacij. 1. predavanje – uvodna predavanja 9 Spletno programiranje – 2. letnik UNI R-IT Predvideni študijski rezultati ◼ Po zaključku tega predmeta bo študent sposoben ▪ Spretnosti komuniciranja: ustni zagovor laboratorijskih vaj, ustno izražanje na ustnem izpitu, pisno izražanje pri pisnem izpitu. ▪ Uporaba informacijske tehnologije: uporaba programskih orodij za načrtovanje, implementacijo, razhroščevanje in testiranje spletnih aplikacij. ▪ Reševanje problemov: načrtovanje in implementacija spletnih aplikacij. ▪ Delo v skupini: študenti v skupini analizirajo, načrtujejo, izdelajo in testirajo spletno aplikacijo. 1. predavanje – uvodna predavanja 10 Spletno programiranje – 2. letnik UNI R-IT Način ocenjevanja ◼ Ocenjevanje ▪ od 50 do 60 %, ocena 6 ▪ od 60 do 70 %, ocena 7 ▪ od 70 do 80 %, ocena 8 ▪ od 80 do 90 %, ocena 9 ▪ nad 90 %, ocena 10 ◼ Ocena sestavljena iz: ▪ Opravljene laboratorijske vaje 50% ▪ Pisni izpit oz. vmesni izpiti 50% ◼ Bonus ▪ Prisotnost na predavanjih: 5% (vsaj 11/13) ▪ Video opravljenih vaj: 2% 1. predavanje – uvodna predavanja 11 Spletno programiranje – 2. letnik UNI R-IT Način ocenjevanja ◼ Sprotni način ▪ Ocena sestavljena iz: ▪ opravljene laboratorijske vaje 50% (obvezno 25%) ▪ kolokvija 50% skupno (obvezno 35% pri posameznem) ◼ Klasični način ▪ Ocena sestavljena iz: ▪ opravljene laboratorijske vaje 50% (obvezno 25%) ▪ pisni izpiti 50% (obvezno 25%) (zimsko, poletno in jesensko izpitno obdobje) 1. predavanje – uvodna predavanja 12 Spletno programiranje – 2. letnik UNI R-IT Način ocenjevanja ◼Študent opravi izpit, če zbere skupaj iz vseh postavk najmanj 50 %. ◼Znotraj te vsote mora tako pri izpitu kot pri laboratorijskih vajah doseči najmanj polovico predvidenih obveznosti. ◼Vaje: ▪ Klasične vaje: 66% ▪ Projektne vaje: 34% 1. predavanje – uvodna predavanja 13 Spletno programiranje – 2. letnik UNI R-IT Kolokviji ◼Dva kolokvija ▪ 1. kolokvij: 8. teden ▪ petek, 18. 4. 2025, E-105, 7:30 ▪ 2. kolokvij: 14. teden ▪ petek, 13. 6. 2025, E-105, 7:30 ◼V terminu predavanj ◼Izvedba na računalnik 1. predavanje – uvodna predavanja 14 Spletno programiranje – 2. letnik UNI R-IT Uvod ◼ Spletno inženirstvo ◼ Ponovitev predmeta Osnove svetovnega spleta ▪ Osnova komuniciranja odjemalec – strežnik ▪ Statične spletne strani – dinamične spletne strani ▪ Piškotki in seje ▪ URL nizi poizvedb ▪ Spletni brskalniki ▪ Spletni strežniki ▪ HTTP zahteve in obrazci ◼ Avtentikacija in avtorizacija ◼ Podatkovne baze ◼ DEMO aplikacija 1. predavanje – uvodna predavanja 15 Spletno programiranje – 2. letnik UNI R-IT Spletno inženirstvo ◼ Spletno inženirstvo (angl. web engineering) je znanstvena disciplina, ki se ukvarja s sistematičnimi in merljivimi načini analize zahtev, načrtovanja, razvojem, testiranja, delovanja in vzdrževanja spletnih aplikacij. ▪ V angleščini se uporabljajo še drugi sinonimi za ta pojem: Web Site Engineering, Hypermedia Engineering, Document Engineering, Content Engineering, Internet Software Engineering. 1. predavanje – uvodna predavanja 16 Spletno programiranje – 2. letnik UNI R-IT Cilji spletnega inženirstva ◼ Nedvoumno definiranje ciljev in zahtev. ◼ Sistematičen fazni razvoj spletnih aplikacij. ◼ Previdno načrtovanje posameznih faz razvoja. ◼ Neprestano spremljanje in izboljševanja procesa razvoja spletnih aplikacij. 1. predavanje – uvodna predavanja 17 Spletno programiranje – 2. letnik UNI R-IT Vloge in spretnosti v razvojni ekipi spletnih aplikacij Kompleksen ekosistem Vir: link 1. predavanje – uvodna predavanja 18 Spletno programiranje – 2. letnik UNI R-IT Vloge in spretnosti v razvojni ekipi spletnih aplikacij ◼ Strojni arhitekt, arhitekt mreže, sistemski inženir ◼ Sistemski administrator ◼ Administrator baze podatkov in arhitekt podatkov ◼ Varnostni strokovnjak (angl. security expert) ◼ Tester (zagotavljanje kakovosti) ◼ SEO specialist (isklaniki) ◼ Vsebinski strategi (marketing) ◼ Vodja projekta ◼ Poslovni analitik ◼ Netehnične vloge 1. predavanje – uvodna predavanja 19 Spletno programiranje – 2. letnik UNI R-IT Posebnosti spletnega inženirstva ◼ Multidisciplinarnost ◼ Poiskati ustrezne uporabnike, ki bodo potrdili, če so zahteve dobro definirane. ◼ Hitre spremembe tehnologij in standardov (razvijalci z novimi tehnologijami nimajo izkušenj). ◼ Hitro uvajanje novih medijev in večjih pasovnih širin. ◼ Povezovanje z zalednimi aplikacijami, ki so napisane na različnih platformah in uporabljajo različne tehnologije (to lahko vpliva na arhitekturo in odzivne čase spletne aplikacije). ◼ Kvaliteta spletnega uporabniškega vmesnika (potrebno je narediti prototipe pomembnejših scenarijev uporabe spletne aplikacije). ◼ Kvaliteta spletne vsebine (ažurnost, točnost, dokončanost, verodostojnost, ustreznost, primernost, jasnost, neodvisnost od predstavitve). ◼ Kratki časi za produkcijo spletne rešitve (potrebno je definirati prioritete in oklestiti zahteve s pogajanji z naročniki). ◼ Obvladovanje tveganj (angl. risk managment). 1. predavanje – uvodna predavanja 20 Spletno programiranje – 2. letnik UNI R-IT Predmet Osnove svetovnega spleta ◼ Vsebine: ▪ HTTP, WWW, URL, HTML ▪ CSS ▪ JS ▪ DOM in asinhronost ▪ jQuery, Bootstrap ▪ JSON in XML ▪ HTTP, piškotki, Ajax ▪ Spletni strežniki (NginX) ▪ Uvod v PHP ▪ Laravel ◼ V nadaljevanju današnjega predavanja kratka ponovitev nekaterih vsebin… 1. predavanje – uvodna predavanja 21 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼ HTTP, WWW, URL, HTML ◼ Spletni strežnik ▪ Naloga strežnika je sprejemati zahteve, ki jih pošiljajo odjemalci preko interneta. ▪ Običajna vrata strežnika 80. ◼ Postopek ▪ Odjemalec pošlje strežniku zahtevo HTTP. ▪ Strežnik pošlje odjemalcu statično spletno stran kot odgovor HTTP. Vir: link 1. predavanje – uvodna predavanja 22 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼HyperText Transfer Protocol (HTTP) ▪ protokol ▪ je aplikacijski protokol za komunikacijo med odjemalcem in strežnikom. ▪ Asimetrični protokol odjemalca – strežnika (angl. asymmetric request-response client- server), ki temelji na odzivu na zahtevo. ▪ Odjemalec z uporabo protokola potegne informacije iz strežnika (angl. pull protocol). 1. predavanje – uvodna predavanja 23 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼Zahteva ◼Odgovor Vir: link 1. predavanje – uvodna predavanja 24 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼ Chrome Inspect – F12 (Network, Headers) 1. predavanje – uvodna predavanja 25 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼ V odgovoru HTML (W3Schools, CodeCademy) ◼ Statične spletne strani ▪ Shranjene v strežniku. ▪ Ob enaki zahtevi strežnik pošlje enako kopijo spletne strani. ▪ Spletna stran se spremeni le, če lastnik spremeni datoteke na strežniku. ◼ Dinamična spletna stran ▪ Strežnik izdela strani šele ko pridejo zahteve. 1. predavanje – uvodna predavanja 26 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼ Dinamične spletne strani Vir: link 1. predavanje – uvodna predavanja 27 Spletno programiranje – 2. letnik UNI R-IT Princip komunikacije odjemalec (brskalnik) in spletni strežnik ◼ Postopek pri dinamični spletni strani ◼ Postopek ▪ Brskalnik pošlje strežniku zahtevo. ▪ Strežnik zažene program, ki obdela zahtevo. ▪ Program odpre predlogo spletne strani. ▪ Program poišče podatke iz podatkovne baze. ▪ Program iz predloge in podatkov ustvari dinamično spletno stran. ▪ Strežnik pošlje brskalniku ustvarjeno spletno stran kot odgovor. 1. predavanje – uvodna predavanja 28 Spletno programiranje – 2. letnik UNI R-IT Posredniški strežnik ◼ Spletno predpomnjenje (angl. web caching) opravlja posredniški strežnik (angl. proxy server). ◼ Prednosti: ▪ Lahko bistveno skrajša odzivni čas za večkratne zahteve. ▪ Zmanjša pasovno širino dostopne točke (strežnika) in s tem zmanjša stroške. ▪ Zmanjšuje promet na internetu kot celoti. 1. predavanje – uvodna predavanja 29 Spletno programiranje – 2. letnik UNI R-IT Posredniški strežnik ◼ Odgovarja na zahteve namesto strežnikov. ◼ Ima svoje kopije spletnih strani (samo sveže). ◼ Če posredniški strežnik, spletne strani nima pri sebi, jo zahteva od pravega strežnika. ◼ Navadno pri zagotavljalcu dostopa do interneta (angl. Internet Service Provider, ISP). 1. predavanje – uvodna predavanja 30 Spletno programiranje – 2. letnik UNI R-IT Conditional GET proxy strežnik HTTP zahteva If-modified-since: Objekt se ni HTTP odgovor modificiral HTTP/1.0 304 Not Modified HTTP zahteva If-modified-since: Objekt je modificiran HTTP odgovor HTTP/1.0 200 OK 1. predavanje – uvodna predavanja 31 Spletno programiranje – 2. letnik UNI R-IT Spletni brskalniki ◼ Spletni brskalnik (običajno kar brskalnik) je aplikacija za dostop do informacij na svetovnem spletu. Ko uporabnik zahteva določeno spletno mesto, spletni brskalnik poišče potrebno vsebino s spletnega strežnika in nato prikaže nastalo spletno stran na uporabnikovi napravi (Wikipedia). ◼ Najbolj uporabljeni (link) ◼ Seznam ostalih brskalnikov: link 1. predavanje – uvodna predavanja 32 Spletno programiranje – 2. letnik UNI R-IT Spletni strežniki ◼ Spletni strežnik procesira dohodne zahteve HTTP in več drugih povezanih protokolov. ◼ Spletni strežnik lahko vsebuje eno ali več spletnih mest. ◼ Strežniki: ▪ Apache ▪ IIS ◼ Primerjava spletnih strežnikov: link ◼ Spletni strežniki: link Vir: link 1. predavanje – uvodna predavanja 33 Spletno programiranje – 2. letnik UNI R-IT Aplikacija „Notes“ ◼ Demonstracija konceptov iz OSS (LIVE DEMO) ◼ Enostavna aplikacija, brez dodelanega uporabniškega vmesnika ◼ Repozitorij predavanj ▪ https://github.com/tomazkosar/CourseWebProgramming.git 1. predavanje – uvodna predavanja 34 Spletno programiranje – 2. letnik UNI R-IT Aplikacija „Notes“ 1. predavanje – uvodna predavanja 35 Spletno programiranje – 2. letnik UNI R-IT Piškotki ◼HTTP protokol je brez stanj ◼Želimo slediti uporabniku ◼Piškotki se uporabljajo za identifikacijo seje odjemalca v brskalniku ◼Vrstica glave v zahtevi ali odgovoru HTTP, ki jo lahko shranite v brskalnik odjemalca ◼ https://www.tutorialspoint.com/javascript/javascript_coo kies.htm 1. predavanje – uvodna predavanja 36 Spletno programiranje – 2. letnik UNI R-IT Piškotki ◼HTTP zahteva ◼HTTP odgovor 1. predavanje – uvodna predavanja 37 Spletno programiranje – 2. letnik UNI R-IT Piškotki ◼Struktura ▪ name (obvezno) ▪ value (obvezno) ▪ domain ▪ expiry ▪ path ▪ secure connection ▪ access ◼ http://www.dis.uniroma1.it/damore/was/slides2015/cookies.pdf 1. predavanje – uvodna predavanja 38 Spletno programiranje – 2. letnik UNI R-IT Piškotki ◼ Shranimo piškotek ◼ Preberemo piškotek ◼ Upravljanje piškotkov v brskalniku (npr. brisanje) ▪ Ctrl + Shift + J, Application (Chrome, Brave) 1. predavanje – uvodna predavanja 39 Spletno programiranje – 2. letnik UNI R-IT Piškotki Odjemalec Strežnik ebay 8734 http zahteva Amazon strežnik http odgovor ustvari ID Set-cookie: 1678 1678 ustvari vrstico ebay 8734 amazon 1678 http zahteva cookie: 1678 piškotek- dostop http odgovor pod. baza dostop ebay 8734 http zahteva amazon 1678 cookie: 1678 piškotek Teden dni kasneje: http odgovor 1. predavanje – uvodna predavanja 40 Spletno programiranje – 2. letnik UNI R-IT Seje ◼ Seja povezana s piškotki ◼ Seja shrani uporabniške objekte ▪ Npr. uporabniško ime, vsebina nakupovalne košarice ◼ Uporabnikov brskalnik ne hrani nobenega od teh podatkov. ◼ Seji je dodeljen naključno ustvarjen niz, imenovan ID seje. ◼ Ko se seja prvič ustvari (zaradi prejema zahteve), se ID seje za to sejo kot del odgovora prenese nazaj v brskalnik uporabnika. ▪ V piškotku. ◼ Vsaka naslednja zahteva brskalnika tega uporabnika vključuje ID seje. ◼ Ko aplikacija prejme zahtevo z ID-jem seje, lahko nato obstoječo sejo poveže s to zahtevo. 1. predavanje – uvodna predavanja 41 Spletno programiranje – 2. letnik UNI R-IT Seje Vir: https://images.slideplayer.es/97/164456 65/slides/slide_25.jpg 1. predavanje – uvodna predavanja 42 Spletno programiranje – 2. letnik UNI R-IT Piškotki vs. Seje ◼ Piškotki ◼ Seja ▪ Na odjemalčevi strani. ▪ Na strežniški strani. ▪ Piškotki shranijo nize. ▪ Seje shranijo objekte. ▪ Čas piškotke je mogoče ▪ Ko uporabnik zapre odjemalca, nastaviti na dolgo življenjsko dobo. izgubi sejo. 1. predavanje – uvodna predavanja 43 Spletno programiranje – 2. letnik UNI R-IT Seje ◼Zagon seje ◼Nastavljanje ◼Uničenje 1. predavanje – uvodna predavanja 44 Spletno programiranje – 2. letnik UNI R-IT Alternativa piškotkom ◼ HTML5 webstorage. ◼ Uporaba IP naslova, brskalnika in platforme za ugotavljanje uporabnikov. ◼ Uporaba skritih polj (hidden fields) v obrazcu. ◼ Uporaba predpomnjenih strani v uporabnikovem brskalniku (Google). ◼ HTTP avtentikacija ◼ Uporaba Macromedia Flash lokalnih objektov. 1. predavanje – uvodna predavanja 45 Spletno programiranje – 2. letnik UNI R-IT URL nizi poizvedb ◼URL: ▪ https://www.mimovrste.com/telefoni-na-dotik?p-min=300&p-max=500 Komponenta URL Opis poizvedbe ? Rezerviran znak, ki označuje začetek poizvedbe p-min=30 Parameter v paru ime/vrednost & Rezerviran znak, ko dodajamo več parametrov v URL niz poizvedb p-max=500 Naslednji parameter 1. predavanje – uvodna predavanja 46 Spletno programiranje – 2. letnik UNI R-IT URL nizi poizvedb ◼Prenos informacij prek URL nizov poizvedb ▪ Aplikacija Notes 1. predavanje – uvodna predavanja 47 Spletno programiranje – 2. letnik UNI R-IT HTTP zahtevki ◼ Obrazci (form) ▪ HTML element form ▪ Attribut action: URL kam pošljemo podatke ▪ Atribut method: vrsta zahtevka ◼ Parametri obrazca 1. predavanje – uvodna predavanja 48 Spletno programiranje – 2. letnik UNI R-IT HTTP zahtevek POST ◼ Vrste zahtevkov: ▪ GET – zapakira parametre kot parametre poizvedbe ▪ POST – zapakira parametre kot poizvedbeni niz (v telesu sporočila) ◼ Vzorec za vnos uporabe obrazca POST ▪ GET stran: z obrazcem ▪ Vsebuje obrazec method = "post" na POST stran ▪ POST stran: potrdite in izvedite operacijo (običajno ustvarite ali posodobite) ▪ Če je uspešen, ga preusmerimo na „ciljno" stran ▪ Če preverjanje ni uspelo, preusmerimo na stran GET (označimo napačna polja) ▪ Če pride do napake, preusmerimo na „oops“ stran 1. predavanje – uvodna predavanja 49 Spletno programiranje – 2. letnik UNI R-IT Obrazci ◼Kompleksnejši 1. predavanje – uvodna predavanja 50 Spletno programiranje – 2. letnik UNI R-IT Avtentikacija ◼ Postopek preverjanja pristnosti s strani strežnika. Strežnik mora natančno vedeti, kdo želi dostopati do informacij ali spletnega mesta. ▪ Se vedno izvede na strani strežnika. ▪ Na strani odjemalca ne zagotavlja varnosti. ◼ Pri preverjanju pristnosti mora uporabnik (ali računalnik) dokazati svojo identiteto. ◼ Običajno preverjanje s strani strežnika vključuje uporabo uporabniškega imena in gesla. ▪ Drugi načini za preverjanje pristnosti so lahko s pomočjo kartic, skeniranja mrežnice, prepoznavanja glasu in prstnih odtisov. ◼ Preverjanje pristnosti ne določa katere naloge lahko posameznik opravi ali do katerih virov lahko dostopa. ▪ Preverjanje pristnosti zgolj identificira in preveri, kdo je oseba ali sistem, ki se prijavlja. 1. predavanje – uvodna predavanja 51 Spletno programiranje – 2. letnik UNI R-IT Prijava (login) ◼ Gesla ▪ Šifriranje gesla (sha1, md5) ▪ Dodajanje naključnega znaka (salt) ▪ md5($salt. $password) 1. predavanje – uvodna predavanja 52 Spletno programiranje – 2. letnik UNI R-IT Avtorizacija ◼ Avtorizacija je postopek, s katerim strežnik ugotovi, ali ima odjemalec dovoljenje za uporabo vira. ◼ Avtorizacija je običajno povezano z avtentikacijo, tako da ima strežnik podatek, kdo je uporabnik, ki zahteva dostop. ◼ Vrsta avtentikacije, potrebna za avtorizacijo, se lahko razlikuje; v nekaterih primerih bodo morda potrebna gesla, v drugih pa ne. ◼ V nekaterih primerih ni avtorizacije ▪ Kateri koli uporabnik lahko uporablja vir, ki ga zahteva. ◼ Večina spletnih strani na internetu ne zahteva preverjanja avtentikacije ali avtorizacije! 1. predavanje – uvodna predavanja 53 Spletno programiranje – 2. letnik UNI R-IT Upravljanje z digitalnimi identitetami ◼ Danes se avtentikacija pri dostopu do informacij in spletnih storitev večinoma izvaja z uporabniškim imenom in geslom. ◼ Skupku teh podatkov, kot so uporabniško ime, uporabniško geslo, digitalno potrdilo, razni osebni podatki, profil in seznam privilegijev lahko poimenujemo s skupnim imenom digitalna identiteta. ◼ Enkratna prijava (angl. single sign on) SSO ▪ Enkratna prijava v vse povezane sisteme (primer račun Google). ▪ Povezava: link ◼ Enkratna odjava (angl. sigle sign off) ▪ Enkratna odjava iz vseh sistemov. ◼ Preverjanje v dveh korakih (angl. two-step verification) ▪ Proces kjer uporabimo dve metodi avtentikacije zaporedoma. ◼ Več na: link 1. predavanje – uvodna predavanja 54 Spletno programiranje – 2. letnik UNI R-IT Strežniški paketi ◼Lokalno spletno in razvojno okolje ◼Ustvari lokalno okolje "peskovnika", v katerem lahko razvijalci napišejo, uporabijo in preizkusijo programsko kodo ◼Alternative ▪ WAMP ▪ XAMPP ▪ Laragon 1. predavanje – uvodna predavanja 55 Spletno programiranje – 2. letnik UNI R-IT Strežniški programski paket Laragon ◼Laragon WAMP ▪ WAMP je kratica, ki pomeni Windows, Apache, MySQL in PHP ▪ Operacijskega sistema Microsoft Windows ▪ Ustvaril Leo Khoa ◼Namestitev ▪ https://laragon.org/ 1. predavanje – uvodna predavanja 56 Spletno programiranje – 2. letnik UNI R-IT Strežniški programski paket Laragon ◼ 1. predavanje – uvodna predavanja 57 Spletno programiranje – 2. letnik UNI R-IT Ponovitev podatkovnih baz ◼Podatkovna baza ▪ Urejena zbirka podatkov ◼Vrste podatkovnih baz ▪ Relacijske podatkovne baze ▪ NoSQL 1. predavanje – uvodna predavanja 58 Spletno programiranje – 2. letnik UNI R-IT Podatkovne baze NoSQL ◼ Pojem NoSQL (not only SQL) se nanaša na vsako podatkovno bazo, ki ne sovpada s tradicionalnim relacijskim modelom. ◼ Podatkovna baza je namenjena za procesiranje velikih količin strukturiranih in nestrukturiranih podatkov (angl. big data) in je običajno porazdeljena, in razširljiva. ◼ https://en.wikipedia.org/wiki/NoSQL Vir: link 1. predavanje – uvodna predavanja 59 Spletno programiranje – 2. letnik UNI R-IT Podatkovne baze NoSQL Dokumentne NoSQL Stolpične podatkovne Grafi baze Ključ - Več na naslednjem vrednost predavanju 1. predavanje – uvodna predavanja 60 Spletno programiranje – 2. letnik UNI R-IT Sistem za upravljanje baze podatkov ◼ Sistem za upravljanje baze podatkov (angl. database management systems, DBMS): ▪ paket z računalniškimi programi, ki nadzorujejo ustvarjanje, vzdrževanje in uporabo baze podatkov. ◼ Relacijski DBMS: ▪ MySQL ▪ SQLLite ▪ Microsoft SQL server ▪ MariaDB Vir: link 1. predavanje – uvodna predavanja 61 Spletno programiranje – 2. letnik UNI R-IT MySql ◼ Sistem za upravljanje podatkovnih baz ◼ Vključena v Laragon ◼ Relacijski model podatkovnih baz ▪ Objekti: bazo podatkov, tabele, stolpce, zapise, itd. ◼ Standardni SQL ◼ Brezplačna in odprtokodna programska oprema pod splošno javno licenco GNU 1. predavanje – uvodna predavanja 62 Spletno programiranje – 2. letnik UNI R-IT MySql ◼Vsebuje bazo information_schema ▪ Shranjuje podatke o vseh drugih podatkovnih bazah, ki jih vzdržuje strežnik MySQL ▪ Podatki v tej podatkovni bazi so zaščiteni ▪ Nekatere tabele v DB: ▪ Tables ▪ Columns ▪ User_privileges 1. predavanje – uvodna predavanja 63 Spletno programiranje – 2. letnik UNI R-IT Grafični odjemalci za delo z ER podatkovnimi bazami ◼Zakaj bi se trudili v ukazni vrstici? ◼Nekateri priporočeni odjemalci MySQL GUI: ▪ Windows: MySQL Workbench, HeidiSQL ▪ Mac: SequelPRO ▪ Linux: Dbeaver ▪ Spletni: PhpMyAdmin 1. predavanje – uvodna predavanja 64 Spletno programiranje – 2. letnik UNI R-IT HeidiSQL 1. predavanje – uvodna predavanja 66 Spletno programiranje – 2. letnik UNI R-IT Ustvarjanje in brisanje podatkovne baze ◼Ustvarimo bazo ◼Izbrišemo bazo 1. predavanje – uvodna predavanja 67 Spletno programiranje – 2. letnik UNI R-IT Ukazna konzola ◼Izpis podatkovnih baz 1. predavanje – uvodna predavanja 68 Spletno programiranje – 2. letnik UNI R-IT Tabele ◼Ustvarimo tabelo ◼Pregled tabel 1. predavanje – uvodna predavanja 69 Spletno programiranje – 2. letnik UNI R-IT Tabele ◼Tabela z zunanjimi ključi ◼Spremenimo tabelo 1. predavanje – uvodna predavanja 70 Spletno programiranje – 2. letnik UNI R-IT Grafični pogled na podatke v tabeli 1. predavanje – uvodna predavanja 71 Spletno programiranje – 2. letnik UNI R-IT Zapisi ◼Vstavljanje zapisov v tabelo ◼Posodobitev podatkov 1. predavanje – uvodna predavanja 72 Spletno programiranje – 2. letnik UNI R-IT Izbira podatkov ◼ Izbira iz tabele 1. predavanje – uvodna predavanja 73 Spletno programiranje – 2. letnik UNI R-IT Povezovanje na podatkovno bazo SQL 1. predavanje – uvodna predavanja 74 Spletno programiranje – 2. letnik UNI R-IT Vaja 1 ◼ Objava novic ◼ PHP, MySQL, MVC ◼ Orodja ▪ Laragon ▪ PHPStorm, VS Code 1. predavanje – uvodna predavanja 75 Spletno programiranje – 2. letnik UNI R-IT Naslednjič ◼ Spletna ogrodja ◼ Arhitekturni vzorec MVC ▪ Usmernik ▪ Model (angl. model) ▪ Pogled (angl. view) ▪ Kontroler (angl. controller) ◼ Demo vzorca MVC na aplikaciji Notes ◼ Varnost in saniranje podatkov 1. predavanje – uvodna predavanja 77 Spletno programiranje – 2. letnik UNI R-IT Vprašanja 1. predavanje – uvodna predavanja 78