Razvoj spletnih aplikacij: podatkovne baze

Učno osebje

• Predavatelj je izr. prof. dr. Tomaž Kosar, dosegljiv v sobi G2-2N.36 in preko MS Teams.
• Elektronski naslov predavatelja je [email protected].
• Govorilne ure so ob ponedeljkih od 8. do 10. ure.
• Asistenta sta Sandi Majninger (G3-M1-59, Laboratorij Martin, MS Teams, [email protected], torek 12-14) in Dragana Ostojić (G3-N1-34, MS Teams, [email protected], sreda 9-11).
• Za študijsko gradivo se uporablja spletna stran https://estudij.um.si/.

Obseg predmeta

• Predavanja trajajo 30 ur in potekajo ob petkih od 7.30 do 9.00 v predavalnici E-105.
• Laboratorijske vaje obsegajo 42 ur.
• Seminarske vaje obsegajo 3 ure in so že bile izvedene 24.2.2025 (A-301).
• Samostojno delo znaša 105 ur.
• Študent prejme 6 kreditnih točk ECTS.

Vsebina predmeta

• Ponovitev osnov razvoja spletnih aplikacij, kot so piškotki in seje.
• Uporaba podatkovnih baz v spletnih aplikacijah (MySql).
• NoSQL baze za spletne aplikacije (npr. MongoDB).
• Načrtovalski vzorec MVC (model-view-controller).
• Celostna arhitektura spletnih aplikacij.
• Skladi rešitev: LAMP, MEAN, MERN, MERNG.
• Programiranje na strežniku (node.js, npm, Express, Mongoose).
• Spletne storitve (SOAP, REST).
• Izmenjava podatkov (JSON, XML), serializacija in deserializacija.
• Programiranje na odjemalcu (React, Angular).
• Enostranske spletne aplikacije (single page application).
• Evolucija spletnih aplikacij (Responsive Web Design, Progressive Web Apps).
• Globoko povezovanje.
• Načrtovanje kakovostnih spletnih aplikacij (stilski vodiči, prelomne točke, Material Design, internacionalizacija).
• Uporaba JavaScript in translatorjev (TypeScript).
• Trendi v odjemalskem programiranju.
• Večplatformni razvoj (Flutter, React Native, Ionic, Framework7).
• Zmogljivost, zanesljivost in varnost aplikacij.
• Skaliranje spletnih aplikacij (vertikalno, horizontalno, virtualizacija, računalništvo v oblaku, mikroservisi).
• Podatkovni centri.
• Prihodnost spletnih aplikacij, razširitve brskalnikov (WebAssembly).
• Portali, sistemi za upravljanje z vsebino, dokumentni sistemi, priporočilni sistemi.

Pregled po tednih

• 1. teden: Uvod v spletno inženirstvo, komunikacija strežnik-odjemalec, dinamične spletne strani.
• 2. teden: MVC, varnost podatkov.
• 3. teden: Node.js.
• 4. teden: Spletne storitve (SOAP, REST), NoSQL.
• 5. teden: Express.js, Mongoose, MongoDB.
• 6. teden: React.
• 7. teden: Redux, Axios.
• 8. teden: SPA, Deep linking, RWD, MD, PWA.
• 9. teden: Angular.
• 10. teden: Typescript.
• 11. teden: Večplatformni razvoj (React Native).
• 12. teden: Skaliranje spletnih aplikacij.
• 13. teden: Zaključek s podatkovnimi centri, kategorijami spletnih aplikacij, evolucijo, WASM in prihodnostjo spleta.

Študijski viri

• Učno gradivo in primeri so na E-študiju UM (potrebna prijava).
• Dodatno gradivo je na GitHub (tomazkosar/CourseWebProgramming).
• Priporočena literatura: 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.

Cilji predmeta

• Cilj je usposobiti študenta za implementacijo spletnih aplikacij s sodobnimi tehnologijami, orodji in jeziki.

Predvideni študijski rezultati

• Sposobnost komuniciranja (ustni zagovor, izražanje na izpitu).
• Uporaba informacijske tehnologije (programska orodja za načrtovanje, testiranje).
• Reševanje problemov (načrtovanje in implementacija spletnih aplikacij).
• Delo v skupini (analiza, načrtovanje, izdelava in testiranje).

Način ocenjevanja

• Ocene: 50-60% (6), 60-70% (7), 70-80% (8), 80-90% (9), nad 90% (10).
• Ocena je sestavljena iz 50% laboratorijskih vaj in 50% pisnega izpita/vmesnih izpitov.
• Bonus: 5% za prisotnost (vsaj 11/13 predavanj) in 2% za video opravljenih vaj.
• Študent opravi izpit, če zbere najmanj 50% točk iz vseh postavk.
• Polovico obveznosti mora doseči tako pri izpitu kot vajah.
• Klasične vaje 66%, projektne vaje 34%.

Kolokviji

• Izvedeta se dva kolokvija.
• 1. kolokvij: 8. teden (18.4.2025, E-105, 7:30).
• 2. kolokvij: 14. teden (13.6.2025, E-105, 7:30).
• Kolokviji potekajo v terminu predavanj in se izvedejo na računalniku.

Uvod v snov

• Spletno inženirstvo.
• Ponovitev predmeta Osnove svetovnega spleta (delovanje odjemalec-strežnik, URL poizvedbe, piškotki,..).
• Avtentikacija in avtorizacija.
• Podatkovne baze.
• DEMO aplikacija.

Spletno inženirstvo

• Je znanstvena disciplina, ki se ukvarja s sistematičnimi in merljivimi načini analize zahtev, načrtovanja, razvoja, testiranja, delovanja in vzdrževanja spletnih aplikacij.
• Sinonimi: Web Site Engineering, Hypermedia Engineering, Document Engineering, Content Engineering, Internet Software Engineering.

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ševanje procesa razvoja.

Vloge 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

Posebnosti spletnega inženirstva

• Multidisciplinarnost.
• Potrebno je poiskati ustrezne uporabnike, ki potrdijo zahteve.
• Hitre spremembe tehnologij in standardov.
• Hitro uvajanje novih medijev in večjih pasovnih širin.
• Povezovanje z zalednimi aplikacijami.
• Zagotavljanje kvalitete spletnega uporabniškega vmesnika (prototipi).
• Zagotavljanje kvalitete spletne vsebine (ažurnost, točnost, verodostojnost).
• Kratki časi za produkcijo spletne rešitve.
• Obvladovanje tveganj (risk management).

Osnove svetovnega spleta

• Ponovitev vsebin kot so: HTTP, WWW, URL, HTML, CSS, JS, DOM, jQuery, Bootstrap, JSON, XML, Ajax, spletni strežniki (Nginx), PHP, Laravel.

Princip komunikacije odjemalec (brskalnik) in spletni strežnik

• Spletni strežnik sprejema zahteve, ki jih pošiljajo odjemalci preko interneta (vrata 80).
• Odjemalec pošlje strežniku HTTP zahtevo, strežnik vrne statično spletno stran kot HTTP odgovor.
• HTTP (HyperText Transfer Protocol) je aplikacijski protokol za komunikacijo med odjemalcem in strežnikom, ki deluje asimetrično in temelji na odzivu na zahtevo (pull protocol).
• Zgled za HTTP zahtevo in odgovor.
• V odgovoru HTML (W3Schools, CodeCademy).
• Statične spletne strani so shranjene na strežniku, strežnik pošlje enako kopijo ob vsaki zahtevi (spremeni se le, če lastnik spremeni datoteke).
• Dinamične spletne strani strežnik izdela šele pri zahtevi.

Posredniški strežnik

• Spletno predpomnjenje (web caching) opravlja posredniški strežnik (proxy server).
• Prednosti posredniškega strežnika so skrajšanje odzivnega časa, zmanjšanje pasovne širine in zmanjšanje prometa na internetu.
• Deluje tako, da odgovarja na zahteve namesto pravih strežnikov (ima svoje kopije strani).
• Ponavadi se nahaja pri ponudniku internetnih storitev (ISP).

Spletni brskalniki

• Spletni brskalnik je aplikacija za dostop do informacij na spletu (npr. Chrome, Safari, Firefox,...).

Spletni strežniki

• Procesirajo dohodne HTTP zahteve in povezane protokole.
• Lahko vsebujejo eno ali več spletnih mest (npr. Apache, IIS).

Piškotki

• HTTP protokol je brez stanja.
• Piškotki se uporabljajo za identifikacijo seje odjemalca v brskalniku.
• So vrstica v glavi HTTP zahteve ali odgovora, ki se lahko shrani v brskalniku odjemalca.
• Primer HTTP zahteve.
• Struktura piškotka vsebuje ime (obvezno), vrednost (obvezno), domeno, čas trajanja (expiry), pot (path), secure connection in access.
• Piškotek se shrani s funkcijo setcookie("notes_user", $cookie_value, time() + (86400), "/");
• Preberemo ga z uporabo $_COOKIE["notes_user"].
• Piškotke se upravlja preko Ctrl + Shift + J, Application (Chrome, Brave).
• Spletni strežnik ustvari ID in vrstico v bazi (prva zahteva), HTTP odgovor vsebuje "Set-cookie", brskalnik pošlje piškotek v naslednjih zahtevah.

Seje

• Seja je povezana s piškotki in shrani uporabniške objekte (npr. uporabniško ime, vsebina košarice).
• Uporabnikov brskalnik ne hrani teh podatkov.
• Seji je dodeljen naključno ustvarjen niz (ID seje).
• Ko se seja ustvari, se ID seje prenese nazaj v brskalnik uporabnika preko piškotka.
• Vsaka naslednja zahteva brskalnika vključuje ID seje.
• Ko aplikacija prejme zahtevo z ID-jem seje, jo lahko poveže s to zahtevo.
• Primer seje.
• Zagon seje se izvede s session_start().
• Nastavi s $_SESSION["USER_ID"] = $user_id;.
• Uniči s session_start(), session_unset(), session_destroy().

Razlika med piškotki in sejami

• Piškotki so shranjeni na odjemalčevi strani in shranjujejo nize. Čas trajanja je daljši.
• Seje so shranjene na strežniški strani, shranjujejo objekte in se izgubijo, ko uporabnik zapre odjemalca.

Alternative 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.

URL nizi poizvedb

• V URL-ju so komponente, kot npr. https://www.mimovrste.com/telefoni-na-dotik?p-min=300&p-max=500, kjer ? označuje začetek poizvedbe, p-min in p-max so parametri.
• Primer prenosa informacij preko URL nizov poizvedb (Aplikacija Notes).

HTTP zahtevki

• Uporabljajo se obrazci (form) s HTML elementom form in atributom action za URL, kam se pošljejo podatki.
• HTTP zahtevek lahko uporablja metode GET (zapakira parametre kot parametre poizvedbe) ali POST (parametere zapakira kot poizvedbeni niz v telesu sporočila).
• Pri obrazcih POST se podatki potrdijo in izvede operacija, v primeru uspeha se uporabnika preusmeri na ciljno stran, v primeru napake pa nazaj na obrazec ali stran za napake.

Avtentikacija

• Je postopek preverjanja pristnosti s strani strežnika (izvede se na strežniku).
• Pri avtentikaciji mora uporabnik dokazati svojo identiteto (uporabniško ime in geslo).
• Obstajajo tudi drugi načini (npr. kartice, skeniranje mrežnice).
• Avtentikacija ne določa, katere naloge lahko posameznik opravi ali do katerih virov lahko dostopa.

Avtorizacija

• Je postopek, s katerim strežnik ugotovi, ali ima odjemalec dovoljenje za uporabo vira.
• Avtorizacija je povezana z avtentikacijo.
• Vrsta avtentikacije se lahko razlikuje.
• Večina spletnih strani na internetu ne zahteva preverjanja avtentikacije ali avtorizacije!

Upravljanje z digitalnimi identitetami

• Avtentikacija se večinoma izvaja z uporabniškim imenom in geslom.
• Skupku teh podatkov rečemo digitalna identiteta.
• Enkratna prijava (single sign on - SSO): prijava v vse povezane sisteme (Google račun).
• Enkratna odjava (single sign off): odjava iz vseh sistemov.
• Preverjanje v dveh korakih (two-step verification): uporaba dveh metod avtentikacije.

Strežniški paketi

• Lokalno spletno in razvojno okolje: ustvari se lokalno okolje ("peskovnik"), v katerem lahko razvijalci pišejo, uporabijo in preizkusijo programsko kodo (WAMP, XAMPP, Laragon).

Strežniški programski paket Laragon

• Laragon uporablja WAMP (Windows, Apache, MySQL in PHP) in ga je ustvaril Leo Khoa.
• Namestitev je na voljo na https://laragon.org/.

Ponovitev podatkovnih baz

• Podatkovna baza: Urejena zbirka podatkov.
• Vrste: Relacijske (SQL) in NoSQL baze.

Podatkovne baze NoSQL

• NoSQL se nanaša na baze, ki ne sovpadajo s tradicionalnim relacijskim modelom.
• Baze so namenjene za procesiranje velikih količin strukturiranih in nestrukturiranih podatkov (big data).
• Primeri NoSQL baz so dokumentne, stolpične, grafične in ključ-vrednost baze.

Sistem za upravljanje baze podatkov

• Je paket računalniških programov, ki nadzorujejo ustvarjanje, vzdrževanje in uporabo baze podatkov (DBMS).
• Relacijski DBMS so MySQL, SQLLite, Microsoft SQL server, MariaDB.

MySQL

• Je sistem za upravljanje podatkovnih baz.
• Vključen je v Laragon.
• Relacijski model (bazo podatkov, tabele, stolpce, itd.).
• Uporablja standardni SQL jezik.
• Je brezplačna in odprtokodna programska oprema pod splošno javno licenco GNU.
• Vsebuje bazo information_schema, ki shranjuje podatke o vseh drugih bazah, ki jih vzdržuje strežnik MySQL.
• Nekatere tabele v DB so: Tables, Columns, User_privileges.

Grafični odjemalci za delo z ER podatkovnimi bazami

• Priporočeni za Windows: MySQL Workbench, HeidiSQL.
• Za Mac: SequelPRO.
• Za Linux: Dbeaver.
• Spletni: PhpMyAdmin.
• Ustvarjanje, urejanje in brisanje podatkovnih baz in tabel.

Vaja 1

• Objava novic s PHP, MySQL in MVC modelom.
• Programska orodja: Laragon, PHPStorm ali VS Code.