PROGRAMIRANJE VEB APLIKACIJA

MySQL

AJAX HTML
Predavanje 1
PHP
jQuery CSS
dr Gabrijela Dimić
gdimic@gs.viser.edu.rs JScript
U naredna tri meseca zajedno ćemo
naučiti nešto sjajno
Pregled
 Informacije o predmetu
 Veb sajt ili veb aplikacija?
 Primer online sistema
 Veb aplikacija
 Front – end tehnologije
 Back – end tehnologije
 Arhitektura veb aplikacija
 Klijent server arhitektura
 Troslojna arhitektura
 MVC (Model – View – Kontroler)
 MERN Stack arhitektura
 Skriptni jezici
Pregled
 Informacije o predmetu
 Veb sajt ili veb aplikacija?
 Primer online sistema
 Veb aplikacija
 Front – end tehnologije
 Back – end tehnologije
 Arhitektura veb aplikacija
 Klijent server arhitektura
 Troslojna arhitektura
 MVC (Model – View – Kontroler)
 MEAN Stack arhitektura
 Skriptni jezici
PVA tim

 Predmetni nastavnik:
• dr Gabrijela Dimić, gdimic@gs.viser.edu.rs
• Kabinet 513
• Konsultacije:
• sreda, 14.00 -16.00
• četvrtak, 15.00 -17.00

 Predmetni saradnici:
• dipl.inž. Boško Bogojević, bosko.bogojevic@viser.edu.rs
• Kabinet 408
• Konsultacije – na sajtu Odseka

• dipl.inž.Aleksandra Borzanović, aleksandra.borzanovic@viser.edu.rs

• Kabinet 507
• Konsultacije – na sajtu Odseka
Moodle stranica

 https://lectio2.viser.edu.rs/course/view.php?id=234
Nastava

 Predavanja:
• Ponedeljak, 14.00 -16.25
• Gornja sala levo

 Laboratorijske vežbe:
• Dve nedelje posle početka predavanja, od 24.10.2022.
• Utorak ILI Četvrtak ILI Petak
• Laboratorija ?
Laboratorijske vežbe

 Obavezne: 80%
 10 laboratorijskih vežbi
 Maksimalno 10 poena

 Nadoknade vežbi
• U januaru (na kraju semestra)
• Pred februarski ispitni rok

 Na nadoknadama vežbi se NE DOBIJAJU BODOVI

• evidentira se SAMO realizacija vežbe
Priručnik za laboratorijske vežbe

Novo izdanje za šk. 2022/2023.

Potpisuje se od strane saradnika.

Mogućnost korišćenja na
kolokvijumima i ispitu.
Kolokvijumi

 Nisu eliminatorni
• sakupljaju se poeni

 Prvi kolokvijum :
• Maksimalno 30 poena (3 zadatka)
• U sedmici od 28.11.2022.
• Posle sedmog termina predavanja

 Drugi kolokvijum:
• Maksimalno 60 poena (4 zadatka)
• U sedmici od 23. 01.2023.
Projekat

 Nije obavezan
 Ne isključuje prisustvo na laboratorijskim vežbama
 Prijava putem Moodle kursa nakon postavljenog obaveštenja
 Odbrana projekta:
• predaja projektne dokumentacije
• usmena odbrana
 Teme za projekat
• unapred definisane,
• mogućnost predlaganje teme
 Projekat se radi samostalno
Bodovna struktura
 LABORATORIJSKE VEŽBE:
• Do 1O POENA

• Osvojeni poeni se prenose

 KOLOKVIJUMI:
• K1: maksimalno 30

• K2: maksimalno 60

• Samo za januarski i februarski ispitni rok

 PROJEKAT:
• MAKSIMALNO 90 POENA

 INTEGRALNI ISPIT:
• MAKSIMALNO 90 POENA
Način polaganja ispita

 Prvi način - kolokvijumi:

• JANURSKI i FEBRUARSKI ISPITNI ROK
• Vežbe +K1+K2

 Drugi način - projekat:

• JANURSKI i FEBRUARSKI ISPITNI ROK
• Vežbe + PROJEKAT

 Treći način - integralno

• Od JUNSKOG ISPITNOG ROKA
• Vežbe + IZRADA KOMPLETNE VEB APLIKACIJE ZA ZADATI KORISNIČKI
SCENARIO (u terminu ispita, ispit traje 3 sata)
Literatura

 PDF prezentacije sa predavanja

 Priručnik za laboratorijske vežbe

 Luke Welling, Laura Thomson, PHP and MySQL Web

Development

 Hugh E. Williams, David Lane, Web Database Applications with

PHP and MySQL
Kriterijum za formiranje ocene
Pregled
 Informacije o predmetu
 Veb sajt ili veb aplikacija?
 Primer online sistema
 Veb aplikacija
 Front – end tehnologije
 Back – end tehnologije
 Arhitektura veb aplikacija
 Klijent server arhitektura
 Troslojna arhitektura
 MVC (Model – View – Kontroler)
 MEAN Stack arhitektura
 Skriptni jezici
Da li je veb sajt isto što i veb
aplikacija? Šta je isto, a u čemu je
razlika?
Veb sajt ili Veb aplikacija
Veb sajt ili Veb aplikacija
Veb sajt ili Veb aplikacija
Online rezervacioni sistem - primer
 Šta uključuje izrada online sistema?

Korisnički interfejs
HTML, CSS tehnologije

Baza podataka
MySQL
SQL Server
PostgreSQL
MongoDB....

Funkcionalnosti
Prikaz podataka
Unos podataka
Izmena podataka PHP
Primer – Studentski servisi
 Podaci/Informacije:
• Osnovni podaci o studentima
• Predmeti po nastavnim planovima i
programima

 Kada se ulogujete:
• Prikaz profila na osnovu unetih podataka
 Unos podataka:
• Prijava predmeta za tekuću šk.godinu
• Prijava ispita za aktuelan ispitni rok
Osnovni pojmovi

 Internet:
 globalna mreža računara
 WWW:
 servis koji Internet pruža
 HTTP:
 Hypertext Transfer Protocol je protokol namenjen prenosu informacija putem WWW
( World Wide Web) servisa Interneta
 Web klijent:
 program koji služi kao intefejs za povezivanje i razmenu podataka sa serverom (Chrome,
Firefox, Opera itd.)
 Web server:
 program koji koristi HTTP protokol da isporuči(servira) fajlove koje zahtevaju udaljeni
korisnici putem klijentskih programa (najčešće web prikazivača – browsera)
Pregled
 Informacije o predmetu
 Veb sajt ili veb aplikacija?
 Primer online sistema
 Veb aplikacije
 Front – end tehnologije
 Back – end tehnologije
 Arhitektura veb aplikacija
 Klijent server arhitektura
 Troslojna arhitektura
 MVC (Model – View – Kontroler)
 MEAN Stack arhitektura
 Skriptni jezici
Veb aplikacije

 Veb aplikacije predstavljaju:

 programe koji koriste veb pretraživače u kombinaciji sa veb tehnologijama kako bi
izvršili zadatke koji su im zadati putem ineternet komunikacije.
 Fizički se nalazi na veb serveru
 Ne moraju se prilagođavati različitim operativnim sistemima
 ista aplikacija radi na svim platformama
 Instaliraju se samo na serveru
 korisnici uvek izvršavaju poslednju instaliranu verziju aplikacije
 Dostupne na svim hardverskim uređajima koji se mogu povezati na internet
Veb aplikacije

 Prednosti:
 ne zahtevaju složenu proceduru implementacije i nadogradnje
 mogućnost rada više korisnika bez smanjenja performansi
 veliki broj platformi i razvojnih alata
 rade bez obzira na operativni sistem
 može se pristupiti sa bilo kog uređaja – nije potrebna instalacija
Veb aplikacije

 Nedostaci:
 sigurnost poverljivih privatnih i osetljivih podataka
 brzina rada zavisi od brzine mrežne veze sa serverom
 obavezno postojanje internet mreže
 vlasnik aplikacije ima kontrolu nad podacima
 potreba za usaglašavanjem veb standarda
Veb aplikacije

 Primena:
 Registracija i prijava na sisteme u privatne i poslovne svrhe
• Korisniku omogućeno da organizuje i kreira sadržaj koji želi da mu se prikaže
 E – trgovina
 Veb banking
 Socijalne mreže
• Facebook, Twitter, YouTube, Wikipedia...
 Gmail
 Distance learning
 Zdravstvo...
Veb aplikacije

 Realizuju se kroz kombinaciju front – end i back – end tehnologija

 Front – end
 klijentske tehnologije
 HTML, CSS, JavaScript
 prezentovanje informacija korisnicima
 Back –end
 serverske tehnologije
 PHP, ASP, PERL ...
 skladištenje, obrada, ažuriranje podataka
Veb aplikacije

 Funkcionisanje veb aplikacije podrazumeva komunikaciju kroz

sledeće servere:

Veb server da bi primila Aplikacioni server da bi Server baze podataka

zahtev od strane korisnika izvršavala zahteve koji su kako bi se sačuvali i
podneti preuzeli potrebni podaci
radi izvršenja zahteva
Desktop vs. veb aplikacije
Pregled
 Informacije o predmetu
 Veb sajt ili veb aplikacija?
 Primer online sistema
 Veb aplikacije
 Front – end tehnologije
 Back – end tehnologije
 Arhitektura veb aplikacija
 Klijent server arhitektura
 Troslojna arhitektura
 MVC (Model – View – Kontroler)
 MEAN Stack arhitektura
 Skriptni jezici
Arhitektura veb aplikacija

 Dvoslojna arhitektura:

 Klijentski sloj:
• prezentacioni sloj ili interfejs prikazan na
klijentu

 Sloj podataka:
• sloj za rad sa bazom podataka skladišten na
server zajedno sa aplikacijom
Arhitektura veb aplikacija

 Dvoslojna arhitektura - karakteristike:

 Klijent – server aplikacija

 Veća brzina rada zbog ne postojanja
aplikacionog servera
 Laka za održavanje
Arhitektura veb aplikacija

 Dvoslojna arhitektura - nedostaci:

 Problem skalabilnosti:
 lošije performanse sa povećavanjem broja korisnika
 Više vremena se troši na upravljanje procesima
nego na rešavanje zahteva
 Veći troškovi održavanja
Arhitektura veb aplikacija
 Prvi sloj:
 Troslojna arhitektura:
 prezentacioni sloj koji je u komunikaciji
sa korisnikom.
 interfejs aplikacije za unos zahteve za
pristup određenim podacima.

 Drugi sloj:
 poslovna logiku sistema.

 Treći sloj:
 baza podataka
 upiti kojima se rešava komunikacija sa
bazom podataka.
Arhitektura veb aplikacija

 Troslojna arhitektura - karakteristike:

 Serverske aplikacije za posredovanje
između klijenta računara i servera baze
podataka.
 Komunikacija između srednjeg sloja i sloja
baze podataka se obavlja pomoću
protokola zavisnog od tipa programskog
jezika i tipa baze podataka.

 WWW obezbeđuje mrežu i protokole

koji povezuju klijentski sloj sa srednjim
slojem - dominantno HTTP.
Arhitektura veb aplikacija

 Troslojna arhitektura:
 Prezentacioni sloj
• prezentaciona logike i korisnički interfejs
• obrađuje podatke unete od strane korisnika
• šalje sloju servisa koji dalje stupa u komunikaciju sa ostalim
slojevima.

 Sloj servisa i poslovne logike

• Sloj servisa omogućava komunikaciju između prezentacionog
sloja i sloja poslovne logike
• Sloj poslovne logike zadužen za obradu svih pristiglih
informacija od sloja servisa.

 Sloj baze podataka:

• zadužen za komunikaciju sa bazom podataka i slanje
rezultata poslovnom sloju
Arhitektura veb aplikacija

 Troslojna arhitektura - prednosti:

 Veliki stepen fleksibilnosti pri izboru razvojnog okruženja i konfiguracije
 Visoke performanse
 Prezentacioni sloj ima mogućnost keširanja podataka
 Mrežna komunikacija smanjena
 Smanjeno učitavanje na aplikacijskom i sloju podataka
 Povećana sigurnost podataka
 sigurnost može biti definisana na svakom sloju
 Klijent nije direktno vezan na bazu podataka
 Očuvanje integriteta podatka
 Podela zadataka između slojeva
 efikasnije funkcionisanja aplikacije
 Mogućnost jednostavne skalabilnosti
 Na svaki sloj moguće primeniti horizontalnu skalabilnost.
Arhitektura veb aplikacija

 MVC (Model–View–Controller)
Arhitektura veb aplikacija - MVC

 Model
 realizovan kao klasa, sadrži glavne programske podatke – atribute i metode
 definiše i međusobne veze unutar modela.
 korisnik ne može pristupati direktno, već samo preko kontrolora.
Arhitektura veb aplikacija - MVC

 View
 komponenta u kojoj se realizuje prikaz podataka korisniku.
 korisnik može videti samo ono što je iz modela, preko kontrolora,
prosleđeno Prikazu.
 u veb aplikacijama
 najčešće preko HTML, CSS i JavaScript tehnologija.
Arhitektura veb aplikacija - MVC

 Controller
 posrednik između modela i prikaza
 sadrži glavne mehanizme za kontrolu toka programa, ponašanje
aplikacije i upravljanje korisničkim zahtevima.
 prima korisničke zahteve, obrađuje ih i prosleđuje modelu,
 interpretira podatke dobijene od modela i prikazuje ih korisniku.
Arhitektura veb aplikacija – MEAN Stack

 Full – stack programiranje

 Pojava praktičnih radnih okruženja
 Obahvtaju front – end i back –end
 Smanjenje kompleksnoсti izrade veb aplikacija
Arhitektura veb aplikacija – MEAN Stack

 MEAN Stack arhitektura

 Stek radnih okvira
 Programski kodovi za front i back se pišu u JavaScriptu
 MongoDB
 baza podataka sa kojom back-end komunicira za potrebe
skladištenja i čitanja podataka
 ExpressJS
 radni okvir za pravljenje veb aplikacija
 koristi se za izvršavanje biznis logike aplikacije,
 Angular JS
 JavaScript radni okvir korišćen na izradu dinamičkog
korisničkog interfejsa u vidu jednostranične aplikacije
(Single-Page-Application)
 Node.js
 back-end radno okruženje
 za kompajliranje i izvršavanje koda pisanog u ExpressJS-u
Pregled
 Informacije o predmetu
 Veb sajt ili veb aplikacija?
 Primer online sistema
 Veb aplikacije
 Front – end tehnologije
 Back – end tehnologije
 Arhitektura veb aplikacija
 Klijent server arhitektura
 Troslojna arhitektura
 MVC (Model – View – Kontroler)
 MEAN Stack arhitektura
 Skriptni jezici
Skriptni jezici

Skriptni jezici

 Serverski skrptni jezici

Klijentski Serverski  u srednjem sloju poslovne logike zbog
svoje fleksibilnosti i prenosivosti na
različite platforme.
Java Script
PHP  PHP - najpopularniji
ASP
Ajax
Python
JQuery
Perl
...
....
Skriptni jezici

 PHP
 upotreba otvorenog kôda
 visok stepen integracije s HTML-om i potrebama veba
 mogućnost upotrebe i u najsloženijim sistemima
 vrlo dobra prenosivost
 brzo izvršavanje
 dobra podrška zajednice
Skriptni jezici

 PHP
 rekurzivni akronim za PHP - Hypertext Preprocessor
 opšte namene, posebno prilagođen razvoju na internetu
 interpretira se na strani servera
 mora da bude instaliran na serveru koji pokreće kod
 koristi tehnike proceduralnog i objektno-orijentisanog programiranja.
Skriptni jezici

 PHP
 1994 - Rasmus Lerdorf (PHP Personal Home page)
 1998 - PHP 3 (PHP Hypertext Preprocessor)
 2001 - PHP 4 (PHP 3 + manje izmene)
 2004 - PHP 5, uvodi se objektno orjentisano programiranje i PHP
Data Objects (PDO)
 2015 – PHP7
 PHP 7.3 (od 7.3.2019.)
 PHP 8 (2020)
 PHP 8.1.0 RC 3 dostupna za testiranje od 30.09.2021.
 PHP 9 (2025)
Skriptni jezici

 PHP program
 datoteke sa ekstenzijom php
 čuva se u obliku teksta i tako se startuje
 potrebno je da bude tretiran od strane PHP interpretera

 PHP interpreter
 program koji razume sintaksu PHP jezika
 razume i druge tipove tekstualnih datoteka (. txt, .htm, .html ), ali
ih ne interpretira
 prevodi kod koji smo napisali u jeziku koji računar razume (binarna
reprezentacija) u realnom vremenu
 izvršava prevedeni kod odmah nakon prevođenja
Skriptni jezici

 Kako sve to radi u slučaju PHP –a ?

 PHP se inicijalizuje, čita konfiguracione datoteke

i učitava potrebne module
 Parsiranje (sintaksna provera koda)
 Prevođenje ( PHP se pretvara u mašinski jezik)
 Mašinski kod se izvršava
 PHP se deinicijalizuje i čisti se memorija
Skriptni jezici

 Razlozi za upotrebu PHP -a

 Koristi se za generisanje sadržaja veb strane u toku izvršavanja
 Open source
 Podržava ga Apache
 Podržava ga Zend engine sa objektnim programiranjem
 Ima podršku za SQL i NoSQL baze podataka
 Laka konekcija na baze podataka (MySQL, Postgres, SQL Server, MongoDB)
 Radi pod Windows i pod Linux operativnim sistemom
 Ne zavisi od tipa i verzije browsera
 Besplatan, brz i siguran
 Ne zahteva nikakvo predznanje sem html a, dok ASP traži C# ili VB .net a
CGI Perl
Skriptni jezici

 Radna okruženja za pisanje PHP -a

 NetBeans
 https://netbeans.apache.org/
 PHPStorm
 https://www.jetbrains.com/phpstorm/download/
 Visual Studio Code
 https://code.visualstudio.com/download
 Eclipse
 http://www.eclipse.org/downloads/
 Aptana Studio
 http://aptana.com/downloads/start
Skriptni jezici

 Popularni PHP softveri

 Blog/ CMS:
 WordPress, PHP blog, Drupal, CMSimple, Joomla, PHP website,
PHP(Reactor)
 Sistem za učenje:
 Moodle
 Forum:
 Prado, phpBB, Vanilla, BBPress
 Facebook
 Vikipedija
Skriptni jezici

 Šta treba instalirati za rad u PHP –u?

 APACHE HTTP Server
 PHP Interpreter
 MySQL server baze podataka (ili bilo koja druga)

 Mogu se koristiti već gotovi paketi koji objedinjuju sve potrebne

softvere
 XAMPP
 WAMP
Skriptni jezici

 XAMPP
 Koreni direktorijum je htdocs
Skriptni jezici
Skriptni jezici
Skriptni jezici