Spletno programiranje

Učno osebje

• Predavatelj: izr. prof. dr. Tomaž Kosar, G2-2N.36, MS Teams, [email protected], govorilne ure so ob ponedeljkih, 8:00-10:00
• Asistenta: Sandi Majninger, mag. inž. rač. in inf. tehnol, G3-M1-59, Laboratorij Martin, MS Teams, [email protected], govorilne ure so ob torkih, 12:00-14:00
• Asistenta: Dragana Ostojić, mag. inž. rač. in inf. tehnol., G3-N1-34, MS Teams, [email protected], govorilne ure so ob sredah, 9:00-11:00
• Uporabite https://estudij.um.si/.

Obseg predmeta

• Predavanja obsegajo 30 ur, vsak petek od 7:30 do 9:00 (E-105).
• Laboratorijske vaje trajajo 42 ur za 2. in 3. letnik.
• Seminarske vaje obsegajo 3 ure, ponedeljek, 24.2.2025, od 15:00 do 17:15 (A-301).
• Samostojno delo je ocenjeno na 105 ur.
• Predmet je vreden 6 kreditnih točk ECTS.

Vsebina predmeta

• Uvod v spletno programiranje vključuje ponovitev osnov razvoja spletnih aplikacij, piškotke in seje.
• Obravnavane so podatkovne baze v spletnih aplikacijah (MySQL).
• Uporaba NoSQL baz (npr. MongoDB) v spletnih aplikacijah.
• 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, itd.
• Spletne storitve (SOAP, REST), vključno z izmenjavo podatkov (JSON, XML), serializacijo in deserializacijo.
• 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.
• Načrtovanje dobrih spletnih aplikacij (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 in razširitve brskalnikov (WebAssembly, itd.).
• Portali, sistemi za upravljanje z vsebino, dokumentni sistemi, priporočilni sistemi, pomenski splet.

Pregled po tednih

• Prvo predavanje bo uvod s temami kot so spletno inženirstvo, komunikacija strežnik-odjemalec in dinamične spletne strani.
• Drugo predavanje se osredotoča na MVC in varnost podatkov.
• Tretje predavanje bo pokrivalo Node.js.
• Četrto predavanje bo obravnavalo spletne storitve (SOAP, REST) in NoSQL baze podatkov.
• Peto predavanje bo obsegalo Express.js, Mongoose in MongoDB.
• Šesto predavanje bo osredotočeno na React.
• Sedmo predavanje bo obravnavalo Redux in Axios.
• Osmo predavanje bo pokrivalo teme SPA, Deep linking, RWD, MD, PWA.
• Deveto predavanje bo obravnavalo Angular.
• Deseto predavanje bo pokrivalo Typescript.
• Enajsto predavanje bo posvečeno večplatformnemu razvoju z React Native.
• Dvanajsto predavanje bo pokrivalo skaliranje spletnih aplikacij.
• Trinajsto predavanje bo zaključno in bo zajemalo podatkovne centre, kategorije spletnih aplikacij, evolucijo spletnih aplikacij, WASM in prihodnost spleta.

Temeljni študijski viri

• Učno gradivo in primeri so na voljo na E-študij UM: https://estudij.um.si/ (potrebna je prijava).
• GitHub repozitorij: https://github.com/tomazkosar/CourseWebProgramming.
• E. Brown: "Web Development with Node and Express", O'Reilly Media Inc., 2019.
• A. Banks, E. Porcello: "Learning React: Functional Web Development with React and Redux", O'Reilly Media Inc., 2018.
• S. Seshadri: "Angular: Up and Running: Learning Angular, Step by Step", O'Reilly Media Inc., 2018.
• D. K. Barry: "Web Services, Service-Oriented Architectures, and Cloud Computing, Second Edition: The Savvy Manager's Guide", Elsevier, Waltham, 2013.

Cilji predmeta

• Usmerjenost k implementaciji spletnih aplikacij s sodobnimi tehnologijami.
• Uporaba programskih orodij in jezikov za razvoj spletnih aplikacij.

Predvideni študijski rezultati

• Razvoj komunikacijskih spretnosti pri zagovoru in izpitih.
• Uporaba IT orodij za načrtovanje in testiranje spletnih aplikacij.
• Reševanje problemov pri načrtovanju in implementaciji.
• Sposobnost za skupinsko delo pri analizi, načrtovanju, izdelavi in testiranju

Način ocenjevanja

• Razpon ocen: 50-60% (6), 60-70% (7), 70-80% (8), 80-90% (9), nad 90% (10).
• Ocena je sestavljena iz laboratorijskih vaj (50%) in pisnega izpita ali vmesnih izpitov (50%).
• Bonus točke so možne za prisotnost na predavanjih (5%, vsaj 11/13) in video posnetke opravljenih vaj (2%).
• Za sprotni način ocenjevanja je potrebni 50% laboratorijskih vaj in kolokvija.(obvezno 35% na posameznem)
• Klasični način ocenjevanja obsega 50% laboratorijske vaje (obveznih 25%) in pisne izpite (obvezno 25%).
• Izpit je opravljen, če študent zbere najmanj 50% točk iz vseh postavk.
• Potrebno je doseči vsaj polovico obveznosti pri izpitu in laboratorijskih vajah.
• Vaje obsegajo 66% klasične vaje in 34% projektne vaje.

Kolokviji

• Na voljo bosta dva kolokvija.
• Prvi kolokvij bo v 8. tednu, v petek, 18. 4. 2025 ob 7:30 v E-105.
• Drugi kolokvij bo v 14. tednu, v petek, 13. 6. 2025 ob 7:30 v E-105.
• Kolokviji se izvajajo v terminu predavanj in se izvajajo na računalniku.

Uvod

• Spletno inženirstvo in ponovitev predmeta Osnove svetovnega spleta.
• Osnova komuniciranja odjemalec-strežnik.
• Razlika med statičnimi in dinamičnimi spletnimi stranmi.
• Piškotki in seje.
• URL nizi poizvedb.
• Spletni brskalniki in strežniki.
• HTTP zahteve in obrazci.
• Avtentikacija in avtorizacija.
• Podatkovne baze.
• DEMO aplikacija.

Spletno inženirstvo

• Znanstvena disciplina, ki se ukvarja s sistematičnimi in merljivimi načini analize zahtev, načrtovanja, razvoja, testiranja, delovanja in vzdrževanja spletnih aplikacij.
• V angleščini ima različne sinonime(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, previdno načrtovanje posameznih faz in neprestano izboljševanje procesa razvoja spletnih aplikacij.
• Ključne vloge v razvojni ekipi spletnih aplikacij: strojnih arhitektov, sistemskih administratorjev, varnostnih strokovnjakov, testerjev, SEO strokovnjakov, marketinških strategov, poslovnih analitikov in vodij projektov.

Vloge in spretnosti v razvojni ekipi spletnih aplikacij

• V različne vloge sodijo tudi strojni arhitekti, arhitekti mreže, sistemski inženirji in poslovni analitiki.
• Razvojna ekipa obsega tudi sistemske administratorje z varnostne strokovnjake.
• V ekipi so tudi testerji kakovosti in SEO specialisti.
• Vsebinski strategi (marketing) in vodje projektov so ključni za uspeh projekta.
• Pomembno je zavedanje, da so poleg tehničnih vlog prisotne tudi netehnične vloge.

Posebnosti spletnega inženirstva

• Poudarek je na multidisciplinarnosti.
• Iskanje ustreznih uporabnike.
• Hitre spremembe tehnologij in standardov.
• Hitrem uvajanje novih medijev.
• Povezovanje z zalednimi aplikacijami.
• Pomembna je kakovost spletnega uporabniškega vmesnika in vsebine.
• Kratki časi za produkcijo.
• Obvladovanje tveganj.

Osnove svetovnega spleta

• Vsebine: HTTP, WWW, URL, HTML, CSS, JS, DOM in asinhronost, jQuery, Bootstrap, JSON in XML, Ajax, spletni strežniki (Nginx), uvod v PHP in Laravel.

Komunikacije v spletu

• Odjemalec pošlje zahtevo in prejme HTTP odgovor od strežnika.
• HyperText Transfer Protocol (HTTP) je aplikacijski protokol za komunikacijo med odjemalcem in strežnikom, ki temelji na odzivu na zahtevo (pull protokol).
• Zahteva vključuje vrstico zahteve, glave in telo, odgovor pa vrstico stanja, glave in telo.
• Chrome Inspect (F12) je orodje za pregledovanje omrežnih aktivnosti.
• Statične spletne strani so shranjene na strežniku in se ne spreminjajo, razen ob spremembi datotek.
• Dinamične spletne strani se ustvarjajo na strežniku ob vsaki zahtevi.
• Posredniški strežniki (proxy) uporabljajo spletno predpomnjenje (web caching) za hitrejši odzivni čas in zmanjšanje prometa.
• Conditional GET se uporablja za preverjanje, ali se je vsebina na strežniku spremenila.
• Spletni brskalnik(aplikacija za dostop do informacij).
• Spletni strežniki procesirajo dohodne HTTP zahteve.

Aplikacija "Notes"

• Je demonstracija konceptov iz OSS (LIVE DEMO), je enostavna aplikacija, brez dodelane uporabniškega vmesnika.
• Repozitorij predavanj se nahaja tukaj: https://github.com/tomazkosar/CourseWebProgramming.git

Piškotki

• HTTP protokol je brez stanja, zato se želimo slediti uporabniku.
• Piškotki so način za identifikacijo seje odjemalca v brskalniku.
• So vrstica glave v zahtevi ali odgovoru HTTP, ki jo lahko shranite v brskalnik odjemalca
• Struktura piškotka vključuje ime (obvezno), vrednost (obvezno), domeno, expiry, pot, secure connection in access.
• Primer shranjevanja piškotka: setcookie("notes_user", $cookie_value, time() + (86400), "/");
• Primer branja piškotka:

<?php
if(isset($_COOKIE ["notes_user"]))
    echo "Welcome back ". $_COOKIE["notes_user"]. "! ";

• Piškotke lahko upravljate v brskalniku s Ctrl + Shift + J, Application (Chrome, Brave).

Seje

• Seja je povezana s piškotki in shrani uporabniške objekte.
• Primer zapisa: uporabniško ime, vsebina nakupovalne košarice.
• Seji je dodeljen naključno ustvarjen niz, imenovan ID seje.
• Primer zagona seje:

session_start();
if (isset($_SESSION['LAST_ACTIVITY']) && time() - $_SESSION['LAST_ACTIVITY'] < 1800) {
    session_regenerate_id( delete_old_session: true);
}
$_SESSION['LAST_ACTIVITY'] = time();

• Nastavljanje seje: $_SESSION["USER_ID"] = $user_id;
• Uničenje seje:

session_start();
session_unset();
session_destroy();

Piškotki in Seje

• Piškotki so shranjeni na odjemalčevi strani, seje pa na strežniški strani.
• Piškotki shranjujejo nize, medtem ko seje shranjujejo objekte.
• Piškotke je mogoče nastaviti na dolgo življenjsko dobo, medtem ko se seja izgubi, ko uporabnik zapre odjemalca.

Alternativa piškotkom

• HTML5 webstorage.
• Uporaba IP naslova, brskalnika in platforme.
• Uporaba skritih polj (hidden fields) v obrazcu.
• Uporaba predpomnjenih strani v uporabnikovem brskalniku (Google).
• HTTP avtentikacija
• Uporaba Macromedia Flash lokalnih objektov.

URL nizi poizvedb

• URL nizi poizvedb se uporabljajo za prenos informacij.
• ?: 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 poizvedbe.
• p-max=500: Naslednji parameter.

HTTP zahtevki

• Obrazci(HTML element form; Attribut action: URL kam pošljemo podatke).
• Vrste zahtevkov (GET-zapakira parametre kot parametre poizvedbe in POST-zapakira parametre kot poizvedbeni niz(v telesu sporočila)).
• Parametri obrazca.
• Vzorec za vnos uporabe obrazca POST z obrazcom vsebuje obrazec method = "post" na POST stran.

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.
• Pri preverjanju pristnosti mora uporabnik(ali računalnik) dokazati svojo identiteto.

Upravljanje z digitalnimi identitetami

• Danes pa se avtentikacija večinoma izvaja z uporabniškim imenom in geslom.
• Skupku teh podatkov lahko poimenujemo z skupnim imenom digitalna identiteta.
• Primer digitalne identitete so(uporabniško ime, uporabniško geslo, digitalno potrdilo, razni osebni podatki, profil in seznam privilegijev).
• Poznamo(Enkratna prijava, Enkratna odjava in preverjanje v dveh korakih).

Strežniški paketi

• so/ustvarijo Lokalno spletno in razvojno okolje(peskovnika) v katerem razvijalci napišejo, uporabijo in preizkusijo programsko kodo.
• WAMP (Je Kratica, ki pomeni Windows, Apache, MySQL in PHP).
• XAMPP
• Laragon(Operacijski sistem Microsoft Windows. in ustvaril Leo Khoa.
• Njegova Namestitev: https://laragon.org/.

Vrste podatkovnih baz

• Podatkovna baza(Urejena zbirka podatkov).
• Relacijske podatkovne baze(MySQL SQLLite Microsoft SQL server MariaDB).
• NoSQL.

Podatkovne baze NoSQL

• NoSQL je vsaka podatkovna baza, ki ne sovpada s tradicionalnim relacijskim modelom.
• Podatkovna baza je namenjena velikim količinam podatkov(Je namenjena za procesiranje velikih količin strukturiranih in nestrukturiranih podatkov(angl. big data) in je običajno porazdeljena, in razširljiva).
• Naslov https://en.wikipedia.org/wiki/NoSQL.
• Poznamo več vrts(Dokumentne, Stolpične, NoSQL podatkovne baze in Grafi).

Sistem za upravljanje baze podatkov

• Sistem za upravljanje 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 in MariaDB).

MySQL

• Sistem za upravljanje podatkovnih baz;
• Vključen v Laragon;
• Relacijski model podatkovnih baz (bazo podatkov, tabele, stolpce, zapise, itd.);
• Standardni SQL;
• Brezplačna in odprtokodna programska oprema pod splošno javno licenco GNU;
• Vsebuje bazo information_schema(hranjuje 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).

Grafični odjemalci za delo z ER podatkovnimi bazami

• Nekateri priporočeni odjemalci MySQL GUI(MySQL Workbench, HeidiSQL, SequelPRO, Dbeaver in PhpMyAdmin).
• Pomembno je znati Ustvarjanje tabel z zunanjimi ključi in spreminjanje tabel.

Vaja 1

• Objava novic ter orodja ki ga bomo uporabili(Laragon, PHPStorm, VS Code).

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.