DOM Document Object Model (наставак)

Transcription

1 [Р338] Програмирање за веб 3 Саша Малков Универзитет у Београду Математички факултет 2014/2015 [Р338] Програмирање за веб Саша Малков Тема 6 DOM Document Object Model (наставак) [Р338] Програмирање за веб - Саша Малков /15 - час 3 1 1

2 Пример дефиниције интерфејса interface NamedNodeMap { Node getnameditem(in DOMString name); Node setnameditem(in Node arg) raises(domexception); Node removenameditem(in DOMString name) raises(domexception); Node item(in unsigned long index); readonly attribute unsigned long length; // Introduced in DOM Level 2: Node getnameditemns(in DOMString namespaceuri, in DOMString localname) raises(domexception); Node setnameditemns(in Node arg) raises(domexception); Node removenameditemns(in DOMString namespaceuri, in DOMString localname) raises(domexception); }; [Р338] Програмирање за веб - Саша Малков /15 - час 3 2 Основни елементи интерфејса Node nodetype : unsigned short код типа чвора 1 - чвор Element 2 - чвор Attribute 3 - чвор Text 6 - чвор Entity 8 - чвор Comment 9 - чвор Document... nodename : DOMString назив чвора, зависи од његовог типа nodevalue : DOMString вредност чвора, зависи од типа [Р338] Програмирање за веб - Саша Малков /15 - час 3 3 2

3 Основни елементи интерфејса Node (2) attributes : NamedNodeMap колекција атрибута чвора важни елементи су length item(i) може да се употребљава и у облику...[i] childnodes : NodeList низ потомака, тј. садржаних елемената parentnode : Node родитељски чвор x.childnodes[i].parentnode == x [Р338] Програмирање за веб - Саша Малков /15 - час 3 4 Основни елементи интерфејса Node (3) previoussibling : Node претходни чвор у колекцији x.childnodes[i+1].previoussibling == x.childnodes[i] nextsibling : Node наредни чвор у колекцији x.childnodes[i].nextsibling == x.childnodes[i+1] firstchild : Node први елемент низа потомака x.childnodes[0] == x.firstchild lastchild : Node први елемент низа потомака x.childnodes[x.childnodes.length-1] == x.lastchild [Р338] Програмирање за веб - Саша Малков /15 - час 3 5 3

4 Илустрација организације чворова [Р338] Програмирање за веб - Саша Малков /15 - час 3 6 Пример кода који пролази кроз DOM traverse = function( node ){ if( node==null ) return 'null'; var result = ""; if( node.nodetype==3 ){ if( node.nodevalue!= null && node.nodevalue.trim()!= '') result = result + '"' + node.nodevalue + '"'; }else{ if( node.nodename!= null ) result = result + node.nodename; result = result + '['; if( node.attributes!= null ) for( var i=0; i<node.attributes.length; i++ ) result = result + node.attributes[i].name + '= + node.attributes[i].value + ';'; if( node.childnodes!= null ) for( var i=0; i<node.childnodes.length; i++ ) result = result + traverse(node.childnodes[i]); if( node.nodevalue!= null && node.nodevalue.trim()!= '') result = result + '"' + node.nodevalue + '"'; result = result + '] '; } return result; } [Р338] Програмирање за веб - Саша Малков /15 - час 3 7 4

5 Важни методи getelementsbyname("el") проналази све поделементе чвора ноде са датим именом document.getelementsbyname("el")[0] проналази први елемент у документу са датим именом getelementsbytagname("div") проналази све поделементе чвора ноде са датом ознаком getelementbyid("id") проналази први поделемент са датим идентификатором appendchild(node) додаје нови подчвор removechild(node) брише дати подчвор [Р338] Програмирање за веб - Саша Малков /15 - час 3 8 Важна својства HTML чворова innerhtml текстуална вредност чвора, укључујући и све подтагове style модел CSS стила својства: background, backgroundcolor, border, bordercolor,... [Р338] Програмирање за веб - Саша Малков /15 - час 3 9 5

6 Читање и парсирање XML-a if (window.domparser){ parser = new DOMParser(); xmldoc = parser.parsefromstring(text,"text/xml"); }else{ // Internet Explorer xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async = false; xmldoc.loadxml(text); } објекат xmldoc представља чвор типа Document [Р338] Програмирање за веб - Саша Малков /15 - час 3 10 Литература Стандарди: / / Туторијали [Р338] Програмирање за веб - Саша Малков /15 - час

7 [Р338] Програмирање за веб Саша Малков Тема 7 AJAX [Р338] Програмирање за веб - Саша Малков /15 - час 3 12 AJAX Asynchronous JavaScript and XML Концепт асинхроног размењивања података са сервером Омогућава мењање садржаја и изгледа веб странице без учитавања потпуно нове странице AJAX је омогућио прављење богатог корисничког интерфејса на вебу носилац интерактивности уместо сесије постаје страница програмирање интерактивности са сервера се преноси на клијенте [Р338] Програмирање за веб - Саша Малков /15 - час

8 JavaScript и догађаји <!DOCTYPE html> <html> <head> <script> function promenitekst(){ document.getelementbyid('mojdiv').innerhtml = '<p>promenjeno...</p>'; } </script> </head><body> <div id="mojdiv"> <h2>tekst koji cemo promeniti</h2> </div> <button type="button" onclick="promenitekst()"> Promeni tekst</button> </body> </html> [Р338] Програмирање за веб - Саша Малков /15 - час 3 14 AJAX и догађаји Основна разлика у односу на обичан ЈavaScript: садржај који се додаје или мења не мора да се унапред учитава као део странице, већ се према потреби накнадно учитава са сервера [Р338] Програмирање за веб - Саша Малков /15 - час

9 Прављење AJAX објекта Зависи од верзије прегледача По стандарду JS: httpreq = new XMLHttpRequest(); Старе верзије IE: httpreq = new ActiveXObject("Microsoft.XMLHTTP"); Пример који ради у складу са верзијом: var httpreq; if( window.xmlhttprequest ) httpreq = new XMLHttpRequest(); else httpreq = new ActiveXObject("Microsoft.XMLHTTP"); [Р338] Програмирање за веб - Саша Малков /15 - час 3 16 Слање захтева За слање захтева се користе методи open() и send() open(method,uri,async,user,password) одређује параметре захтева, али не врши његово слање сви параметри су опциони method метод преноса захтева, GET или POST uri идентификација ресурса async true ако је пренос асинхрон или false ако је синхрон user корисничко име password лозинка send([string]) упућује захтев string тело захтева, користи се само у случају метода POST [Р338] Програмирање за веб - Саша Малков /15 - час

10 Додатни параметри захтева timeout одређује максимално трајање чекања на одговор ако је 0 (подразумевана вредност) чека се без ограничења withcredentials корисничко име и лозинка се укључују у захтев upload помоћни објекат за праћење тока слања великих захтева abort() обуставља све операције по захтеву [Р338] Програмирање за веб - Саша Малков /15 - час 3 18 Догађаји објекта захтева Два типа догађаја: Event уобичајени JS догађај EventProgress проширење, има додатне атрибуте readonly attribute boolean lengthcomputable; readonly attribute unsigned long long loaded; readonly attribute unsigned long long total; readystatechange : Event дошло је до промене атрибута readystate loadstart : ProgressEvent започело је слање захтева progress : ProgressEvent настаје често током слања захтева и примања одговора abort : ProgressEvent обрада захтева је прекинута, на пример позивом метода abort() error : ProgressEvent није успела обрада захтева load : ProgressEvent захтев је успешно испуњен timeout : ProgressEvent истело је време а захтев још није испуњен loadend : ProgressEvent обрада је завршена, било успешно или неуспешно [Р338] Програмирање за веб - Саша Малков /15 - час

11 Слање захтева (2) Препоручује се употреба једноставнијег и бржег метода GET, када код је то могуће Метод POST се користи у случају преноса веће количине података када желимо да спречимо кеширање резултата када се ради о прослеђивању садржаја формулара Ако се ради о формуларима или слању садржаја, може се постављати заглавље захтева setrequestheader(name,value) [Р338] Програмирање за веб - Саша Малков /15 - час 3 20 Пример httpreq.open("post","ajaxdata.php",true); httpreq.setrequestheader( "Content-type", "application/x-www-form-urlencoded" ); httpreq.send("ime=paja&prezime=patak"); [Р338] Програмирање за веб - Саша Малков /15 - час

12 Обрада одговора Одговор се добија по успешном испуњавању захтева као атрибут објекта захтева: httpreq.status код статуса (200, 404,...) httpreq.responsetext одговор у текстуалном облику httpreq.responsexml одговор у облику структурираног XML документа у складу са DOM [Р338] Програмирање за веб - Саша Малков /15 - час 3 22 Параметри и методи резултата status враћа целобројни код резултата обраде захтева statustext враћа текстуални опис резултата обраде захтева getresponseheader(name) враћа вредност елемента заглавља одговора getallresponseheaders() враћа све елементе заглавља overridemimetype(mimetype) поставља MIME тип у заглављу одговора, без обзира на пристиглу вредност [Р338] Програмирање за веб - Саша Малков /15 - час

13 Параметри и методи резултата (2) responsetype враћа тип резултата може да буде празна ниска (подразумевани), "arraybuffer", "blob", "document", "json", и "text response ако је тип text (или подразумеван), враћа тело резултата као текст ако је тип arraybuffer, враћа тело резултата као arraybuffer ако је тип blob, враћа тело резултата као blob ако је тип document, враћа тело резултата као document ако је тип json, враћа тело резултата као json responsetext враћа тело резултата као текст responsexml враћа тело резултата као XML DOM објекат [Р338] Програмирање за веб - Саша Малков /15 - час 3 24 У случају асинхроног преноса httpreq.readystate стање захтева 0 - захтев није иницијализован 1 - успостављена веза са сервером 2 - примљен захтев 3 - захтев се обрађује 4 - захтев је обрађен и одговор је спреман за употребу httpreq.onreadystatechange функција за обраду догађаја промене стања захтева [Р338] Програмирање за веб - Саша Малков /15 - час

14 Синхроно или асинхроно У случају синхроног рада метод send() чека одговор У случају асинхроног рада нема чекања одговора Трајање сваког позива обухвата време преноса поруке према серверу обраде захтева на серверу преноса одговора до клијента Већи број синхроних захтева може имати за последицу велике застоје због серијског извршавања [Р338] Програмирање за веб - Саша Малков /15 - час 3 26 Синхроно или асинхроно (2) По правилу се ради асинхроно тако се омогућава слање већег броја захтева и паралелна обрада одговора Синхрони рад је прихватљив при иницијалном попуњавању садржаја странице ако се ради о мањим документима ако је у питању само један синхрони захтев [Р338] Програмирање за веб - Саша Малков /15 - час

15 Пример синхроног рада function promenitekst(){ var httpreq = new XMLHttpRequest(); httpreq.open("get","/js2_part.html",false); httpreq.send(); } // метод send() је сачекао одговор // па сада можемо да га обрадимо document.getelementbyid('mojdiv').innerhtml = httpreq.responsetext; [Р338] Програмирање за веб - Саша Малков /15 - час 3 28 Пример асинхроног рада function promenitekst(){ var httpreq = new XMLHttpRequest(); httpreq.open("get","/js3_part.html",true); } // метод send() не чека одговор // па морамо да поставимо руковалац догађаја httpreq.onreadystatechange = function(){ if( this.readystate==4 && this.status==200 ) document.getelementbyid('mojdiv').innerhtml = this.responsetext; }; httpreq.send(); [Р338] Програмирање за веб - Саша Малков /15 - час

16 Мало уопштеније function asynchttp(uri,onok){ var httpreq = new XMLHttpRequest(); httpreq.open("get",uri,true); httpreq.onreadystatechange = function(){ if( this.readystate==4 && this.status==200 && onok) onok(this); }; httpreq.send(); } function promenitekst(){ asynchttp("/js3_part.html",function(httpreq){ document.getelementbyid('mojdiv').innerhtml = httpreq.responsetext; }); } [Р338] Програмирање за веб - Саша Малков /15 - час 3 30 Може и овако function asynchttp(uri,onload){ var httpreq = new XMLHttpRequest(); httpreq.open("get",uri,true); httpreq.onload = function(){ onload(this); }; httpreq.send(); } [Р338] Програмирање за веб - Саша Малков /15 - час

17 Литература Формална спецификација Туторијал [Р338] Програмирање за веб - Саша Малков /15 - час 3 32 [Р338] Програмирање за веб Саша Малков Тема 8 Проблем развоја веб апликација [Р338] Програмирање за веб - Саша Малков /15 - час

18 Карактеристике проблема Карактеристике проблема развоја веб апликације се препознају из различитих углова из угла апликације из угла сесије из угла странице из угла учесника у развоју [Р338] Програмирање за веб - Саша Малков /15 - час 3 34 Карактеристике проблема из угла апликације Избор између више архитектура више начина имплементације избор архитектуре утиче на значај многих карактеристика проблема Употреба датотека трајни подаци могу да се чувају у датотекама посебно ако ако се веб апликација имплементира на једном нивоу Комуникација са системима за управљање базама података најважнији подаци су најчешће у неком СУБП читање и мењање података Комуникација између слојева апликације код вишеслојних апликација мора да постоји комуниција између слојева комуникација са помоћним сервисима Конкурентно окружење да би рад био ефикасан, неопходно је да више захтева може да се истовремено конкурентно опслужује [Р338] Програмирање за веб - Саша Малков /15 - час

19 Карактеристике проблема из угла апликације (2) Често се постављају упити што је веб локација сложенија то је већи проценат садржаја који се припремају на основу садржаја базе података често се за припрему једног садржаја мора поставити по неколико упита посебно често на разним уводним и прегледним страницама, као и на страницама које описују везе између садржаја Релативно ретко се изводе сложене трансакције читање података је много чешће него њихово мењање највећи број садржаја се припрема без извођења било каквих бочних ефеката осим, можда, ради вођења евиденције посета велики број бочних ефеката је привременог и локалног карактера односи се само на текућу сесију трајни и глобални бочни ефекти се остварују углавном у облику трансакција над подацима СУБП промене података се углавном раде из пословног слоја, а не из слоја веба [Р338] Програмирање за веб - Саша Малков /15 - час 3 36 Карактеристике проблема из угла апликације (3) Уједначен графички изглед страница обично све странице једне апликације имају заједничке основне елементе графичког дизајна често се и на страницама које чине различите делове апликације појављују неки заједнички елементи Раздвојеност пословне логике и корисничког интерфејса од почетка пројектовања до краја имплементације је пожељно раздвајати кориснички интерфејс од пословне логике већи број савремених алата за развој динамичких веб локација то омогућава [Р338] Програмирање за веб - Саша Малков /15 - час

20 Карактеристике проблема из угла сесије Носилац интерактивности је сесија веб апликације је интерактиван систем основни оквир за остваривање интеракција између посетиоца и локације је сесија сесија је носилац размене информација између посетиоца и локације чувања информација о посетиоцу и току саме сесије Део интерактивности се може пренети на страницу посебно ако се примени архитектура тешких клијената [Р338] Програмирање за веб - Саша Малков /15 - час 3 38 Карактеристике проблема из угла сесије (2) Интеракција у оквиру сесије се састоји од посета и дијалога сесија се састоји од парова (захтев, одговор) такви парови не граде временску ни просторну секвенцу неки делови сесије се морају одвијати у строго дефинисаним секвенцама парова такви сегменти сесије се називају дијалози неуређени сегменти сесије су појединачне посете Основни интерактивни елемент сесије је дијалог дијалог је основни елемент интеракције на нивоу сесије ток интеракције у оквиру дијалога је строго дефинисан Управљање дијалозима и сесијама за исправан ток сесије може бити неопходно преношење стања између узастопних посета за исправан ток дијалога је потребно управљати током посета [Р338] Програмирање за веб - Саша Малков /15 - час

21 Карактеристике проблема из угла странице Не постоји интерактивност при припремању једног садржаја припремање садржаја је као црна кутија сви улазни подаци су познати пре започињања припремања садржаја ниједан излазни податак се не издаје пре окончавања припремања садржаја имплементирана логика припреме нема спољних утицаја током припреме Припремање појединачних садржаја је најчешће једноставно највећи број поступака за припремање садржаја је сасвим једноставан сам садржај може бити веома сложен, али се то углавном не одражава значајно на поступак његовог припремања припремање почива на већем броју дељених заједничких елемената више мањих целина, једноставних за припремање повезивање делова у целину [Р338] Програмирање за веб - Саша Малков /15 - час 3 40 Карактеристике проблема из угла странице (2) Страница може бити носилац дела интерактивности у случају архитектуре тешких клијената страница може да буде заокружена целина, која у потпуности обухвата интеракцију са корисником за обављање одређеног посла [Р338] Програмирање за веб - Саша Малков /15 - час

22 Карактеристике проблема из угла учесника у развоју Раздвојеност програмских и графичких сегмената дефинисања страница највећи број развијалаца су HTML програмери знају HTML, CSS, елементе графичког дизајна неформално и површно савладане основе програмирања програмери знају програмирање, базе података неформално и површно HTML, CSS, основе дизајна хроничан недостатак стручних кадрова који знају обе области пожељно раздвајање послова дизајна и програмирања Издвојеност делова програма који се односе на базу података пожељно је издвојити делове програма који су непосредно зависни од конкретног СУБП или конкретне БП локализовање зависности од специфичног СУПБ једноставнија подела посла између програмера и стручњака за базе података [Р338] Програмирање за веб - Саша Малков /15 - час 3 42 Карактеристике проблема из угла учесника у развоју (2) Потреба за једноставним развојем програмских сегмената страница да би HTML програмери могли да ураде што више посла, потребно је да им се значајно олакша писање елементарних програмских целина Резервисаност у односу на прелазак на нове алате тежња да се што ређе прелази на нове алате учење кошта (време, напор, новац) многи не воле учење искористити што боље већ стечена знања како код појединачних програмера тако и у организацијама као целинама [Р338] Програмирање за веб - Саша Малков /15 - час

23 Ниво сложености веб садржаја 1. Страница 2. Скуп страница 3. Веб локација 4. Веб апликација [Р338] Програмирање за веб - Саша Малков /15 - час 3 44 Ниво 1 Страница Један документ са припадајућим садржајима Припадајући садржаји обухватају различите визуалне, аудио и видео садржаје које употпуњују презентацију документа [Р338] Програмирање за веб - Саша Малков /15 - час

24 Ниво 2 Скуп страница Колекција страница Обично постоје међусобне везе, али није пресудно [Р338] Програмирање за веб - Саша Малков /15 - час 3 46 Ниво 3 Веб локација Скуп међусобно повезаних страница Тематски или другачије организованих Униформан дизајн естетска целовитост Униформна употреба уједначена правила навигације Обично има препознатљиву намену или циљ [Р338] Програмирање за веб - Саша Малков /15 - час

25 Ниво 4 Веб апликација Веб локација Садржај се динамички производи или презентује у време посећивања и у интеракцији са корисником Корисник не захтева само ресурсе него и некакву врсту обраде података претраживање израчунавање... Корисник оставља трајан траг у систему уређивање садржаја куповина... [Р338] Програмирање за веб - Саша Малков /15 - час 3 48 Од захтева до приказа Корисник клијентског рачунара жели да види презентацију изабраног ресурса Ресурс је доступан на неком серверу [Р338] Програмирање за веб - Саша Малков /15 - час

26 Од захтева до приказа (2) Кораци: Клијент шаље захтев одговарајућем серверу Сервер прима захтев, обрађује га и испоручује пакет клијенту Клијент припрема пакет за приказивање и приказује презентацију ресурса Шта сервер испоручује? Како клијент припрема презентацију ресурса? [Р338] Програмирање за веб - Саша Малков /15 - час 3 50 Нивои контекста веб апликације Под контекстом се подразумева окружење у коме постоји одређено стање, тј. одређени подаци При развоју и раду веб апликације, постоје 4 нивоа контекста У овкиру имплементирања сваког од нивоа контекста потребно је да постоји одређено дељење података [Р338] Програмирање за веб - Саша Малков /15 - час

27 Нивои контекста веб апликације (2) 1. Захтев појединачни захтеван и добијен садржај 2. Посета скуп садржаја који чини једну комплетну страницу HTML, CSS, слике, скриптови, Сесија једна целовита употреба апликације обухвата више посета и све додатне скривене захтеве нпр. AJAX захтеви 4. Апликација / Сервис обухвата све употребе апликације током периода функционисања [Р338] Програмирање за веб - Саша Малков /15 - час 3 52 Дељење података Дељење података је потребно на сваком од нивоа контекста Ниво захтева обрада захтева је целина па је дељење интерно Ниво посете подаци који се деле при прављењу садржаја који чине једну страницу нема системског начина да се установи да захтеви припадају истој посети обично се имплементира кроз упитни део URI-ја Ниво сесије подаци који се деле при обради свих захтева једне сесије привремени колачићи Ниво апликације подаци који се деле при обради свих захтева апликације конфигурација апликације глобални дељени подаци на нивоу апликације трајни колачићи кориснички налози [Р338] Програмирање за веб - Саша Малков /15 - час

28 Дељење података сесије Подаци имају привремено трајање Стратегије Само колачићи сви потребни подаци се чувају у колачићима потенцијално велики број колачића успоравање комуникације сви се шаљу са сваким захтевом потенцијалан безбедносни проблем Апликативне сесије користи се само један колачић за идентификовање сесије сви остали елементи стања се чувају на серверу термин сесија се често употребљава за означавање скупа података који се чувају на серверу и чине стање једне сесије [Р338] Програмирање за веб - Саша Малков /15 - час 3 54 Дељење података апликације Подаци се преносе између више сесија Стратегије Само колачићи или један трајни идентификациони колачић није поуздана идентификација корисника колачићи идентификују корисника клијентског рачунара користи се само за податке који нису осетљиви подешавање корисничког интерфејса и сл. концепт са једним колачићем захтева чување потенцијално велике количине небитних података на серверу Кориснички налози корисник мора да се аутентификује обично навођењем корисничког имена (или ел.адресе) и лозинке сви подаци се чувају на серверу, као скуп података о кориснику [Р338] Програмирање за веб - Саша Малков /15 - час

29 Литература Shklar L, Rosen R., Web Application Architecture - Principles, Protocols and Practices, John Wiley and Sons, Саша Малков, Wafl Програмски језик за развој веб апликација, Математички факултет, [Р338] Програмирање за веб - Саша Малков /15 - час 3 56 [Р338] Програмирање за веб Саша Малков Тема 9 Технологије развоја серверске стране веб апликација [Р338] Програмирање за веб - Саша Малков /15 - час

30 Програми за прављење садржаја Да би се неки садржај динамички направио (изменио, прилагодио,...) потребно је да се примени нека логика Та логика се негде мора испрограмирати Одговарајући програм се мора извршити веб сервер мора да покрене програм......проследи му параметре......сачека да заврши извршавање......преузме резултат извршавања [Р338] Програмирање за веб - Саша Малков /15 - час 3 58 Потребни подаци Програм који прави садржаје мора да користи више врста података Податке из захтева URI домен, релативна путања, продужена путања, упит,... тело захтева параметри формулара датотеке које клијент подиже Податке из сесије подаци који чине стање сесије обично у облику нетишизираног каталога вредности може бити и типизирана структура Податке апликације/сервиса подаци који чине конфигурацију апликације обично се само читају дељени подаци на нивоу апликације Глобалне податке и услуге систем датотека база податка друге сервисе [Р338] Програмирање за веб - Саша Малков /15 - час

31 Приступање подацима Да би програм могао да приступи подацима......веб сервер их мора учинити доступним програму То се не ради на исти начин за све врсте података......ни за све верзије веб сервера Постоје многе технологије које омогућавају веб серверу да покрене програм и омогући му приступ овим подацима [Р338] Програмирање за веб - Саша Малков /15 - час 3 60 Начини покретања програма Веб сервер може да обезбеди прављење садржаја покретањем програма као засебног процеса као дела процеса сервера помоћу посебних механизама уграђених у сам веб сервер повезаних са сервером у виду прикључака (plug-in) [Р338] Програмирање за веб - Саша Малков /15 - час

32 Покретање засебних процеса Поступак: веб сервер прави посебан процес у њему покреће програм за припрему садржаја преноси му параметре по завршетку рада преузима резултат Пример: CGI, FastCGI,... [Р338] Програмирање за веб - Саша Малков /15 - час 3 62 Common Gateway Interface - CGI Прва технологија за покретање програма прилагођена уобичајеном раду у UNIX свету Програм се покреће као најобичнији процес на нивоу ОС-а Веб сервер прослеђује параметре као: аргументе командне линије параметре окружења (setenv, getenv) улазни ток Програм издаје припремљен садржај на стандардном излазу [Р338] Програмирање за веб - Саша Малков /15 - час

33 Common Gateway Interface CGI (2) Карактеристике: универзалан практично сваки ОС практично сваки програмски језик безбедан сваки покренут програм је засебан процес у мери у којој је постављање програма на сервер безбедно (!!!) релативно неефикасан покретање процеса је скупо временски меморијски нема оптимизације понављања свака инстанца програма је нови процес дељење података мора да користи друге системе (датотеке, базе података,...) чак и примена ефикасних програмских језика не решава проблем обично се ради о алгоритамски и рачунски једноставним проблемима испада да је важнија цена покретања него цена извршавања Данас се углавном не употребљава [Р338] Програмирање за веб - Саша Малков /15 - час 3 64 Common Gateway Interface CGI (3) Пишу се на било ком програмском језику на коме се могу писати програми или скриптови за одговарајућу серверску платформу C / C++ Python Perl Tcl... Погледати, на пример: Данас се углавном не употребљава [Р338] Програмирање за веб - Саша Малков /15 - час

34 FastCGI Унапређење технологије CGI Основна идеја је да се уштеди на покретању процеса након што се једанпут покрене процес заврши један посао затим се успава али се не гаси следећи пут се не покреће нови процес већ се само активира већ постојећи Основни проблем употреба специфичних API-ја умањена преносивост (између сервера) [Р338] Програмирање за веб - Саша Малков /15 - час 3 66 Покретање програма у серверу Веб сервер представља окружење за извршавање програма нешто као виртуална машина при покретању програма се не праве посебни процеси нема експлицитног преношења параметара парамтери се добијају од окружења резултат извршавања се прослеђује окружењу на одговарајући начин обично нешто налик на стандарни излаз окружење је веб сервер интеракција помоћу API-ја програм издаје резултат на стандардном излазу по завршетку рада сервер преузима резултат из угла развоја нема значајних разлика у односу на CGI Пример: Јава Сервлети [Р338] Програмирање за веб - Саша Малков /15 - час

35 Јава сервлети Веб серверу се додаје ЈВМ за сваку апликацију се прави посебна ВМ подаци на нивоу апликације се деле као глобални у ВМ подаци на нивоу сесије се деле преко посебних библиотека додатним класама се обезбеђује приступ спољном свету Карактеристике покретање програма не захтева учестало покретање процеса иако Јава јесте спорија од C-а, већа је уштеда него губитак програми су обично релативно једноставни Ово је и данас веома заступљена технологија [Р338] Програмирање за веб - Саша Малков /15 - час 3 68 ASP.NET Концептуално скоро исто као Јава сервлети Разлика је у врсти ВМ ASP.NET користи Common Language Runtime - CLR подржава више програмских језика C#, VisualBasic, F#,... Примарна технологија за развој веб апликација за MS Windows [Р338] Програмирање за веб - Саша Малков /15 - час

36 Употреба уграђених механизама Неки облици припреме садржаја захтевају релативно једноставну логику и могу се имплементирати без посебних програма Одговарајући механизми се могу уградити у веб сервер Пример: SSI Server Side Include у документу се наводе посебне директиве (тагови) пре испоручивања садржаја, сервер анализира документ и обрађује директиве на одговарајући начин обично су то једноставне директиве за уметање другог документа или дела документа али могу бити и нешто сложеније [Р338] Програмирање за веб - Саша Малков /15 - час 3 70 Пример Server Side Include <!--#echo var="date_local"--> уметање вредности променљиве <!--#include virtual="myfile.txt" --> <!--#include virtual="/common/myfile.txt" --> уметање садржаја датотеке <!--#exec cgi="/cgi-bin/clicktrade.cgi" --> покретање програма и уметање добијеног резултата [Р338] Програмирање за веб - Саша Малков /15 - час

37 Употреба прикључака Ако се у веб сервер угради могућност додавања прикључака, онда нови прикључци могу имплементирати додатне механизме за припремање садржаја Слично као у случају уграђених механизама, али много већи ниво флексибилности Штавише, прикључци могу да додају и подршку за нове начине покретања програма [Р338] Програмирање за веб - Саша Малков /15 - час 3 72 Употреба прикључака (2) Савремени веб сервери имају веома моћне и флексибилне могућности додавања прикључака У плану је да у другом делу курса посветимо више пажње неким технологијама Apache IIS [Р338] Програмирање за веб - Саша Малков /15 - час

38 Приступи припремању садржаја Разликују се четири основна приступа проблему припремања динамичких садржаја програмски приступ шаблонски приступ хибридни приступ сесијски приступ [Р338] Програмирање за веб - Саша Малков /15 - час 3 74 Програмски приступ За за припремање сваког динамичког садржаја се пише одговарајући програм најопштији најфлексибилнији и најмоћнији најмање продуктиван за једноставне садржаје Примери: CGI, Јава сервлети, Perl, Python,... [Р338] Програмирање за веб - Саша Малков /15 - час

39 Пример програмског приступа CGI, Perl #!/usr/bin/perl print "Content-type:text/html\r\n\r\n"; print '<html>'; print '<head>'; print '<title>hello Word - First CGI Program</title>'; print '</head>'; print '<body>'; print '<h2>hello Word! This is my first CGI program</h2>'; print '</body>'; print '</html>'; [Р338] Програмирање за веб - Саша Малков /15 - час 3 76 Шаблонски приступ Динамичке странице се описују помоћу шаблона константни делови који се не мењају параметризовани делови који се динамички мењају Обично надградња HTML-а додају се тзв. серверски тагови обично велики број једноставних тагова Потенцијално и релативно сложени макрои Примери: SSI, Cold Fusion [Р338] Програмирање за веб - Саша Малков /15 - час

40 Пример шаблонског приступа ColdFusion... <cfoutput> #myfirstvar# <br/> #mysecvar# <br/> #mynumber# <br/> </cfoutput> <cfoutput>#mynumber + anothernumber#</cfoutput>... <cfquery name="updatetitleprice" datasource="pubs"> UPDATE titles SET price = WHERE (title_id = 'BU1032') </cfquery>... [Р338] Програмирање за веб - Саша Малков /15 - час 3 78 Шаблонски приступ (2) Карактеристике веома једноставно и продуктивно за једноставне садржаје тешко прилагодљиво и обично веома компликовано за иоле сложеније садржаје недовољно изражајно решење не може се свака логика припремања садржаја описати на овај начин ограничено на странице (тј. обично све текстуалне садржаје) није погодно за бинарне садржаје [Р338] Програмирање за веб - Саша Малков /15 - час

41 Хибридни приступ Мешавина програмског и шаблонског приступа Додаје се мали број серверских тагова таг израза тело тага је израз записан на прог. језику, чији резултат ће заменити таг програмски таг тело тага је сегмент програма који ради неки посао таг се замењује ониме што сегмент програма испише на стандардном излазу Примери: JSP, ASP.NET, PHP,... [Р338] Програмирање за веб - Саша Малков /15 - час 3 80 Пример хибридног приступа PHP... <?php $displaycount = 10; if( $_REQUEST["show"] == "all" ){ $displaycount = $novosticount; } $category = $_REQUEST["cat"]; if($category!= null ){ $originalcategory = $category; $category = "[". $category. "]"; } for( $i=0; $i<$novosticount; $i++ )...?><p id="news-<?php echo $i?>" class="news_date"> <?php echo newsdate($news[$i])?> </p><p class="news"><?php echo newsbody($news[$i])?></p> <?php }...?>... [Р338] Програмирање за веб - Саша Малков /15 - час

42 Хибридни приступ (2) Карактеристике веома једноставно и продуктивно за једноставне садржаје флексибилно и веома изражајно добро решење и за веома сложене садржаје практично свака логика припремања садржаја се може описати на овај начин најпогодније за странице (тј. све текстуалне садржаје) није сасвим погодно за бинарне садржаје превазилази се тако што се цео документ направи као један таг [Р338] Програмирање за веб - Саша Малков /15 - час 3 82 Сесијски приступ Идеја је да се програмски руководи током сесије (дијалога) за разлику од уобичајеног корисничког вођења Обично се развој дели на шаблонско описивање интерфејса програмско описивање тока дијалога Примери: Mawl, <bigwig>, Guide Карактеристике има значајне квалитете у домену управљања током дијалога недовољно флексибилно и једноставно за остале случајеве [Р338] Програмирање за веб - Саша Малков /15 - час

43 Однос алата и приступа Већина развојних алата је прилагођена једном од приступа Данас је најзаступљенији хибридни приступ Ретки су алати који комбинују све приступе [Р338] Програмирање за веб - Саша Малков /15 - час 3 84 [Р338] Програмирање за Веб Саша Малков Тема 10 Развојне платформе [Р338] Програмирање за веб - Саша Малков /15 - час

44 Развојна платформа Развојна платформа = скуп софтверских производа који служе као основа за развој и испоручивање веб апликација оперативни систем веб сервер систем за управљање базама података програмски језик за развој серверског кода програмски језик за развој клијентског кода Обично се у платформу не рачунају неопходни елементи HTTP HTML CSS [Р338] Програмирање за веб - Саша Малков /15 - час 3 86 LAMP Платформа LAMP Linux Apache MySQL PHP [Р338] Програмирање за веб - Саша Малков /15 - час

45 LAMP (2) Висока флексибилност - за сваку од компоненти постоји више алтернатива све компоненте постоје и за друге оперативне системе може да се користи и други веб сервер често се у захтевним окружењима употребљавају комерцијалне верзије СУБП велики избор програмских језика [Р338] Програмирање за веб - Саша Малков /15 - час 3 88 ASP/ASP.NET Платформа ASP/ASP.NET Windows IIS SQL Server није неопходно, али је уобичајено C#, VisualBasic [Р338] Програмирање за веб - Саша Малков /15 - час

46 ASP/ASP.NET (2) Умерена флексибилност - за већину компоненти постоји више алтернатива IIS ради само за Windows може да се користи и други веб сервер може да се користи и други СУБП могу да се користе и други програмски језици али корисници MS инфраструктуре релативно ретко бирају друге алате ако се користе други језици и СУБП, најчешће се онда не користи ни IIS, па ни Windows алтернатива је MonoRail, компатибилна платформа отвореног кода корисно ради миграција, повезивања и сл. [Р338] Програмирање за веб - Саша Малков /15 - час 3 90 Јава Платформа Јава ОС по избору Веб сервер по избору, најчешће нека варијанта Apache База података по избору Програмски језик Јава [Р338] Програмирање за веб - Саша Малков /15 - час

47 Јава (2) Висока флексибилност ради на свим ОС подржава различите веб сервере, али најчешће нека варијанта Apache може да се користи било који СУБП Изузетно флексибилна и моћна, али и сложена због тога се често избегава у мањим пројектима често се користи у сложеним пројектима [Р338] Програмирање за веб - Саша Малков /15 - час 3 92 JavaScript Платформа JavaScript ОС по избору Веб сервер Node.js База података по избору Програмски језик JavaScript [Р338] Програмирање за веб - Саша Малков /15 - час

48 JavaScript (2) Умерена флексибилност ради на свим ОС може да се користи било који СУБП постоје JS базе података, као CouchDB неки од програмских језика који се преводе на JS JSX, Dart, CofeeScript, TypeScript,... Поједностављен развојни контекст сви алати могу да се изаберу тако да користе исти програмски језик [Р338] Програмирање за веб - Саша Малков /15 - час 3 94 Литература Shklar L, Rosen R., Web Application Architecture - Principles, Protocols and Practices, John Wiley and Sons, Саша Малков, Wafl Програмски језик за развој веб апликација, Математички факултет, [Р338] Програмирање за веб - Саша Малков /15 - час