Uvod u ASP.NET + Progress 4GL - Prezentacija

JKP BEOGRADSKI VODOVOD I KANALIZACIJA BEOGRAD

Uvod u ASP.NET Web programiranje

Autor: Slavimir Lj. Vesić, projektant/programer MCP - Microsoft Certified Professional, Licence ID: 10702121

Uvod • ASP.NET je Microsoft-ov framework (okvir) za razvoj Web aplikacija • ASP.NET je deo .NET framework-a • Poslednja zvanična verzija Visual Studio alata je 2013 (VS 2013) • Microsoft ima u planu sledeću verziju VS vNext – koja će delom biti i revolucionarna po tom što će postojati mogućnost da se .NET aplikacije izvršavaju pod Linux OS • Visual Studio (VS) je IDE (integrated development environment) – integrisano razvojno okruženje • VS omogućava razvoj velikog broja aplikacija: Desktop, Web, Windows Store, Windows Phone, a sa dodatkom Xamarin i Andorid i IOS, i td... SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

2

.NET Programski jezici (1) • Microsoft-ov glavni programski jezik je C# (C Sharp) • Pored C#, .NET podržani jezici su i VB.NET (Visal Basic) i F# (F Sharp), i drugi • C# je objektno-orjentisani (OO) programski jezik (OOP) • Kada je programski jezik OO, to znači da su ispoštovani sledeći principi (koncepti) – često se zovu u literaturi, stubovi (pillars) OOP: • • • •

Apstrakcija (Abstraction) Nasleđivanje (Inheritance) Učaurenje (Encapsulation) Polimofrizam (Polymorphism ) SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

3

.NET Programski jezici (2) • C# i VB.NET su najkorišćeniji .NET jezici • Oni imaju 2-faznu kompilaciju • U prvoj fazi kompilacije C# ili VB.NET kod se prevodi u IL (intermediate language), koji se u ponekoj literaturi naziva i MSIL • time se omogućava da različiti .NET programski jezici prevode svoj izvorni kod (source code) u isti među-jezik • U drugoj fazi kompilacije se poziva JIT (just-in time) compiler i IL se prevodi u mašinski-prirodni jezik (native code), spreman za odgovarajući procesor računara SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

4

Rad sa bazom podataka u .NET okruženju (1) • u .NET-u, rad sa bazom podatka se ostvaruje putem ADO.NET-a • ADO.NET je skup programskih klasa, koje omogućavaju programeru da ostvari pristup bazi podataka • ADO.NET sadrži provider-e, koji omogućavaju rad sa bazom podatka • Provider-i su: SQL Server, Oracle, OleDb, ODBC i td... • Kada se radi sa odgovarajućom bazom podatka tada se koristi skup funkcionalnosti koje su obezbeđene odabranim Provider-om • Sistemi za upravljanje bazom podataka (SUBP) ili (DBMS) mogu da rade sa bazom na način da imaju ili nemaju stalno otvorenu konekciju sa bazom SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

5

Rad sa bazom podataka u .NET okruženju (2) • u .NET-u je to takođe omogućeno putem Connected ili Disconnected Data Access Architecture • DataReader je osnovni objekat koji se koristi u Connected arhitekturi • DataSet je osnovni objekat koji se koristi u Disconnected arhiekturi

• u .NET-u konekcija sa bazom podataka se ostvaruje putem konekcionog stringa (Connection String) • Pored toga što je osnovni način rada sa relacionim sistemima za upravljanje bazama podataka (RDBMS), kao što su SQL Server, Oracle, MySQL, PostgreSQL, Sybase itd..., pisanjem upita (Query) i njihovim izvršavanjem, već neko vreme je trend da u OO jezicima se koriste ORM tehnologije SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

6

Rad sa bazom podataka u .NET okruženju (3) • ORM - Object-relational mapping – objektno relaciono mapiranje • Programeri u OOP su zaključili da je potrebno da razmišljaju na 2 načina kada programiraju: • Na objektno-orjentisanom načinu razmišljanja (koji je bliži realnom sistemu) • Na relacionom načinu razmišljanja (koji je bliži DBMS)

• Ideja ORM je da prevaziđe ovaj jaz i da programeri rade OO, a to je u skladu sa Agilnim načinom razvoja softvera, što je predominantni način projektovanja i izgradnje softvera • ORM alati omogućavaju mapiranje objekata iz programa u tabele u bazi podataka i oni su sloj zapravo između baze podataka i programa • U .NET-u se dosta koristi Entity Framework kao ORM rešenje iako postoje i druga (nHibernate, Micro, ...) SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

7

Rad sa bazom podataka u .NET okruženju (4) • Do sada sam opisao načine rada sa SUBP koji podržavaju relacioni model podataka i koji se jednim imenom zovu RDBMS (Relational Database Management System) • U RDBMS-u SQL je standard za komunikaciju sa bazom podataka • Poslednjih nekoliko godina usled WEB 2.0., razvijaju se velikom brzinom i skup baza podatka poznat pod nazivom NoSQL (Not only SQL) • Primeri tih baza podataka su Mongo DB, Couch DB itd... • Ideja je da se podaci pamte najčešće u notaciji parova ključ-vrednost (keyvalue) • .NET ima podršku za rad sa ovim tipovima baza • Ovo je veoma značajno u poslednje vreme kada se sve više koriste mobilni uređaji, kako u privatne, tako i u poslovne svrhe SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

8

Web programiranje (1) • Sa razvojem World Wide Web-a (WWW) (Tim Berners-Lee), u fokus je došlo i Web programiranje • Web programiranje se oslanja na ISO OSI model (ili 4-slojni TCP/IP model u zavisnosti od literature), prema kojem postoji 7 slojeva – 7 apstrakcija: aplikacioni sloj, prezentacioni sloj, sloj sesije, transportni sloj, mrežni sloj, sloj linka podataka (data link-a) i fizički sloj • Ideja slojeva je uvedena jer je komunikacija sama po sebi složena, pa se njena složenost umanjuje razlaganjem (dekompozicijom) na slojeve i davanjem određenih zadataka svakom pojedinačnom sloju • Model usluga je zgodan za razumevanje dekompozicije slojeva – gde se svaki sloj posmatra kao usluga koja je obezbeđena sloju iznad (npr. TCP daje siguran transport HTTP-u i još neke druge stvari) bez ulaženja u implementacione detalje sloja ispod !!! (HTTP-a ne interesuje kako to TCP obezbeđuje) • Na svakom sloju postoje komunikacioni protokoli, koji omogućavaju komunikaciju između distribuiranih procesa istog sloja (u smislu obradne paradigme) • Web programiranje je u samoj svojoj biti distribuirano programiranje • Klijent (Client) u smislu obradne paradigme je proces koji poziva (Request) server • Server (Server) u smislu obradne paradigme je proces koji čeka poziv (Request) klijenta, izvršava zahtev klijenta i šalje odgovor (Response) • Distribuirana aplikacije je ona u kojoj komuniciraju klijent i server, koji su međusobno udaljeni SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

9

Web programiranje (2) – HTTP(1) • za Web programiranje je važan HTTP protokol – protokol aplikativnog sloja • HTTP protokol prenosi podatke od klijenta do servera i obrnuto • Klijentski proces HTTP-a je Web browser (pretraživač): Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, . . . • Serverski proces HTTP-a čini Web server • Kada u pretraživaču ukucamo neku adresu, npr: http://www.bvk.rs, tada pozivamo HTTP serverski proces (i zahtevamo neki resurs gde se ovde ne vidi jer po default-u vraća , a može da bude .html, .php, .aspx itd, npr. http://www.bvk.rs/index.php) • Po default-u Web server sluša na portu 80, tako da iako to ne vidimo u URLu pretraživača, mi naš zahtev možemo da prosledimo kao http://www.bvk.rs:80 SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

10

Web programiranje (3) – HTTP(2) • HTTP – Hypertext Transfer Protocol, kao što mu ime kaže omogućava razmenu hiperteksta • Jedna od osnovnih karakteristika HTTP protokola jeste da je on bez stanja (stateless), što znači da za izvršavanje logike komunikacije između klijenta i servera je potrebno omogućiti praćenje stanja • Stanje se u Web programiranju obezbeđuje: • Sesijom (session) • Kolačićima (cookies)

• Kod Cookies-a potrebno je voditi računa o bezbednosnim aspektima – jer ih je moguće fizički pročitati, kao .txt fajl (datoteku) SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

11

Web programiranje (4) • Na početku Web programiranja, arhitekture su bile izgrađene tako da su se izvršavale preko CGI-a (Common Gate Interface) • Ideja CGI-a jeste da Web Server prihvati zahtev od klijenta i prosledi ga CGI-u, a CGI preusmerava zahtev na drugi program koji ga obrađuje • Osnovna mana ovog načina rada jeste da se na Web Serveru uvek otvara zaseban proces i time se opterećuje memorija Web Servera • Progress WebSpeed je tehnologija koja radi preko CGI-a • Sa razvojem Web-a, Java, PHP, a kasnije i .NET omogućavaju procesiranje zahteva klijenta preko lakih procesa – niti (threads), za koje se ne otvara zaseban proces na Web serveru SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

12

Web programiranje (5) • Web programiranje se najčešće posmatra kao: • Front-end programiranje • Back-end programiranje

• Front-end programiranje podrazumeva programiranje u 3 sloja: • Sloj strukture kojeg čini HTML - HyperText Markup Language • Sloj prezentacije kojeg čini CSS - Cascading Style Sheets • Sloj ponašanja kojeg obezbeđuje JavaScript

• Back-end programiranje podrazumeva programiranje u jednom Web serverskom programskom jeziku: PHP, Java, ASP.NET, WebSpeed Script... SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

13

Web programiranje (6) • Front-end je deo Web aplikacije koji vidi krajnji korisnik preko Browser-a (pretraživača) • Back-end je deo Web aplikacije u kojem se izvršava logika Web aplikacije, kao i komunikacija sa bazom podataka ili servisima • Kasnije će tokom prezentacije u delu Statički/Dinamički html objasniti kako se ostvaruje celokupno procesiranje zahetva od klijenta ka serveru • Opis narednih sekcija služi da bi se stvorila jasna slika o tome za šta je koji sloj zadužen, bez zalaženja u detalje kako se šta implementira SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

14

Web programiranje (7) - HTML • HTML je jezik Web-a • Sve što je izloženo na Web-u sadrži HTML • HTML je jezik koji obezbeđuje strukturu Web stranice • Svaki pretraživač u sebi sadrži HTML parser, tako da kada dođe Web stranica, on kreće odozgo ka dole i parsira .html fajl i na osnovu HTML instrukcija daje mu strukturu tog fajla i prikazuje tu strukturu • Aktuelan standard je HTML 5 • HTML 5 je veoma pogodan za strukturianje prikaza na mobilnim uređajima SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

15

Web programiranje (8) - CSS • CSS – služi da opiše kako će se .html fajl prikazati u pretraživaču • Uvođenjem CSS-a se jasno razdvaja koji sloj ima koju svrhu: • HTML – struktura • CSS – prezentacija

• CSS na Web serveru najčešće postoji kao .css fajl mada se može direktno pisati i u .html-u se sekciji ili unutar samog html elementa kao atribut

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

16

Web programiranje (9) – JavaScript (1) • JavaScript kao što sam već rekao služi da obezbedi ponašanje Web stranici kada se ona učita u browser (najčešća svrha) • Svaki browser (pretraživač) u sebi ima JavaScript engine, koji mu omogućava da interpretira JavaScript • JavaScript se može korisiti za najrazličitije svrhe, od animacije i kreiranje ponašanja grafičkih elemenata putem kojih se obogaćuje korisničko iskustvo (User Experience – UX), pa do određenih delova na klijentskoj strani koje mogu služiti radi provere tipova podatka koje korisnik unosi (validacija), a pored toga veoma je značajna prilikom asinhronog programiranja putem kojeg se osvežava samo deo Web stranice – AJAX • JavaScript je trenutno najtraženiji jezik Web-a SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

17

Web programiranje (10) – JavaScript (2) • Pored toga što ima primera korišćenja osnovnog JavaScript-a, danas se mnogo više koriste biblioteke JavaScript-a za najrazličitije namene kao što su: jQuery, Node, Angular, Backbone, i td... • JavaScript nije OO jezik i nema veze sa Javom, to joj je dato samo marketinško ime tada kada je nastala • JavaScript ima objektnu sintaksu, ali nije OO jezik jer ne zadovoljava sva svojstva OO jezika • Popularna je svuda, a veoma u radu sa mobilnim i Cloud platformama • Kao što sam gore naveo ima raznih biblioteka i dostupnih API-a SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

18

Web programiranje (11) – Serverski deo • Serverski deo služi za izvršavanje Web serverskog koda i on sadrži poslovnu logiku i komunikaciju sa bazom podataka • Web serverske tehnologije su: PHP, Java Server Pages (JSP), Java Server Faces (JSF), ASP.NET, WebSpeed, Python, Ruby, Perl, i drugi... • Serverski kod se izvršava na Web Serveru ili HTTP Serveru • Web Server je (ne u smislu obradne paradigme) mašina na kojoj je instaliran neki Web, odosno HTTP Server • HTTP serveri su sledeći proizvodi: • • • •

Apache (najpopularniji) – radi u LAMP kombinaciji (Linux, Apache, MySql, PHP) - opensource IIS - Internet Information Services – Microsoft Web server – izvršava ASP.NET Tomcat – izvršava Java kod i drugi . . .

• HTTP serveri su dostupni ili unutar firme ili zakupljivanjem hosting-a SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

19

Statički / Dinamički HTML (1) • statičke Web stranice su one koje nemaju komunikaciju sa bazom i ne izvršavaju nikakvu serversku logiku – one najčešće imaju samo statičke elemente – tekst, slike, eventualno neku animaciju itd... • Procesiranje statičke stranice se obavlja na sledeći način:

• korisnik putem pretraživača zatraži zahtev (request) za određenom Web stranicom • Web server (na kojem se nalazi najčešće taj .html fajl) prihvata zahtev i vraća .html (najčešće) stranicu i vraća je kao deo HTTP odgovora (response) SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

20

Statički / Dinamički HTML (2) • Kada odgovor servera (response) pristigne, pretraživač parsira .html i prikazuje ga krajnjem korisniku • dinamičke Web stranice su stranice koje generiše program koji se izvršava na serveru

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

21

Statički / Dinamički HTML (3) • izvršavanje dinamičke Web stranice se izvršava na sledeći način: • Kada Web server prihvati zahteva za dinamičkom Web stranicom on ga prosleđuje aplikacionom serveru na procesiranje • Kada aplikacioni server prihvati zahtev, on pokreće odgovarajući program – često taj program treba da preuzme neke podatke iz baze podataka • Kada aplikacioni server završi procesiranje podataka on generiše HTML i vraća ga Web serveru • Web server vraća HTML pretraživaču, koji ga prikazuje korisniku SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

22

ASP.NET (1) • ASP.NET je Microsoft-ov framework za razvoj Web aplikacija • ASP.NET web aplikacije se programiraju u Visual Studio-u • ASP.NET omogućava nekoliko načina programiranja Web aplikacija (nekoliko različitih Web projekata – kao i odgovarajuću kombinaciju istih): • • • •

Web pages Web forms MVC Ostale... (nisu sada od interesa)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

23

Web pages • Najjednostavniji model programiranja • Veoma lak i dobar za jednostavne zadatke • Problem: • Mešanje server-side koda i HTML-a što otežava održavanje

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

24

Web forms • Zgodan za zadatke koje zahtevaju intenzivnu komunikaciju sa bazom • Jednostavan za programere koji imaju iskustvo u programiraju Desktop aplikacija, jer ne zahteva mnogo znanja HTML-a • Event-driven programiranje (vođeno događajima) • Sadrži određeni broj serverskih kontrola, koje se prevlače na Web stranicu • Kontrole mogu da se konfigurišu i time se postiže da bez mnogo pisanja koda se omogući određena funkcionalnost • Svaka Web stranica ima mogućnost da poziva odgovarajući C# ili VB.NET kod koji se nalazi iza stranice i u kome je poslovna logika (code-behind pristup) • Nedostatak:

• Teško održavanje koda usled preklapanja HTML-a i server side code-a • Ne postoji potpuna kontrola nad HTML-om kojeg generišu serverske kontrole SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

25

MVC • MVC – Model – View – Controller • Pisanje koda organizovano prema MVC arhitekturalnom programskom uzoru (pattern) • Najbolje rešenje u pogledu velikih Web aplikacija • Najbolje rešenje u smislu održavanja koda – održavanje je veoma lako i reaguje lako na promenu (fleksibilan je !) • Ukoliko je Web sajt mali i logika prosta ne treba ga korisiti (besmisleno je!) • Najbolja osobina mu je Separation of concerns, gde svaki sloj ima određena zaduženja i na taj način obezbeđuje usluge drugom sloju • Jasna kontrola generisanog HTML-a • velika sigurnost usled mehanizma rutiranja • veoma jednostavno može izlagati funkcionalnosti za mobile uređaje SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

26

ASP.NET i Progress 4GL • Neka je zadatak definisan tako, da je potrebno omogućiti CRUD operacije nad Progress OpenEdge RDBMS-u, tako da na aplikativnom sloju funkcioniše ASP.NET • Od pomenuta 3 programska modela možemo iskoristiti Web forms, na način da Progress RDBMS-u omogućuimo ODBC konekciju i da upotrebom ADO.NET framework-a sprovodimo CRUD operacije nad Progress bazom • Na narednim slajdovima to ću i pokazati • Na narednim slajdovima objasniću Web iskorišćene tehnologije SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

27

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (1) • Kreiramo lokalnu progress bazu kao na slici • C:\LokalneBaze\probaradnik.db

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

28

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (2) • Sada kada smo iskreirali bazu možemo da dodamo tabele: • Radnik(SifraRadnika, ImeRadnika, PrezimeRadnika, SifraOdeljenja) • Odeljenje(SifraOdeljenja, NazivOdeljenja)

• Putem .p procedure ubacimo neke podatke, recimo SifraRadnika

ImeRadnika

PrezimeRadnika

SifraOdeljenja

SifraOdeljenja

NazivOdeljenja

10

Pera

Peric

20

10

Projektovanje

20

Jovan

Jovanovic

10

20

Programiranje

30

Mika

Mikic

20

40

Marija

Maric

20

50

Obrad

Obradovic

10

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

29

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (3) • Browse nad spajanjem tabela izgleda

• Sada ćemo otvoriti Progress Explorer Tool i napraviti SQL servis na lokalnoj bazi • Ikonica Progress Explorer Tool-a se mora pokrenuti sa Run as administrator na 64-bit Win 7

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

30

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (4) • Kada pokrenete Progress Explorer Tool, njegov početni ekran izgleda sledeće:

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

31

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (5) • Kliknite desnim dugmetom miša na ikonicu localhost i odaberite Connect . . .

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

32

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (6) • nakon toga pritisnite dugme OK, kao na slici

• Nakon toga raširite deo Localhost, a u njemu deo Databases, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

33

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (7) • desnim dugmetom miša kliknite na Databases i odaberite new • sada vam se prikazuje dijalog u kojem treba da unesete naziv baze, kao na slici • Ja sam odabrao da bude radnici

• Sada je potrebno da konfigurišete serverski podignutu bazu • Nakon što ste pritisnuli OK, prikazuje vam se sledeći ekran, gde treba da odaberete lokalnu bazu SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

34

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (8) • Unesite putanju lokalne baze kao na slici i pritisnite OK

• Vidite da ste kreirali serverski podignutu bazu SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

35

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (9) • sada je potrebno da konfiguršete SQL servis za serverski podignutu bazu • Raširite deo oko konfigurisanja baze do najižeg nivoa kao na slici

• desnim dugmetom miša kliknite na defaultServerGroup i odaberite properties

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

36

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (10) • Prikazaće vam se sledeći ekran

• Konfigurišite broj porta, npr. 9999 i odaberite SQL only iz sekcije Client Type, nakon toga pritisnite OK SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

37

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (11) • na prethodno opisani način ste konfigurisali SQL servis serverski podignute Progress baze podataka • pokrenite bazu tako što će te se pozicionirati na nju, pritisnuti desno dugme miša i odabrati opciju start, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

38

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (12) • sada je potrebno da napravimo ODBC konekciju za konfigurisanu bazu • Pokrenite ODBC Data Source Administrator • Odaberite tab User DSN i kliknite Add, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

39

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (13) • odaberite iz liste ponuđenih ODBC adaptera, onu koja odgovara Progress bazi podataka, npr. Progress OpenEdge 10.2B Driver • nakon toga se otvara dijalog za uspostavljanju ODBC konekciju

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

40

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (14) • popunite dijalog podacima kojima ste konfigurisali bazu, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

41

KORAK 1 – Pravljenje ODBC konekcije za Progress RDBMS (15) • proverite ODBC konekciju preko Test Connection • ukoliko je konekcija uspostavljenja kao na slici to znači da ste uspeli • Na ovaj način ste konfigurisali ODBC Data Source, koji možete koristiti za rad sa .NET-om

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

42

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (1) • sada ćemo iz VS 2013, kreirati Web aplikaciju • pokrenite Visual Studio 2013, recimoUltimate verziju • Odaberite File -> New -> Project, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

43

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (2) • Sada vam se prikazuje dijalog za kreiranje projekata • Sa leve strane iz sekcije Templates odaberite Visual C#, a unutar njega deo Web, kao na slici • Unesite Name i Location projekta u donjem delu dijaloga i odaberite ASP.NET Web Application

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

44

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (3) • Sada vam se prikazuje sledeći dijalog, za odabir tipa Web projekta

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

45

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (4) • sada odaberite Template, WebForms • Kliknite na Change Authentication i odaberite No Authentication • Nakon toga kliknite OK • Sada se kreira projekat za Web aplikaciju • Sada desne strane u uglu se nalazi sekcija Solution – u kome se nalaze fajlovi projekta, sa leve strane se nalazi sekcija Toolbox u kojoj se nalaze alatke, a u centralnom delu se nalazi projekat kao na slici (sledeći slajd)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

46

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (5)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

47

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (6) • Da bi ste videli kako aplikacija izgleda iz menija odaberite opciju Debug i Start Without Debugging

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

48

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (7) • kao što vidite, VS u ovom tipu projekta sam dodaje dosta stvari • sada ćemo pogledati kod iza ove aplikacije i dodati deo za prikaz podataka iz baze • ugasite aplikaciju u borwser-u i vratite se u VS • Iz dela Solution Explorer odaberite fajl Default.aspx, kao na slici • U centralnom delu se učitava kod Web forme, koja ima naziv Default.aspx (naredni slajd)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

49

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (8)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

50

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (9) • U donjem delu ekrana ako klikete na karticu Design, možete videti kako trenutno Web forma izgleda

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

51

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (10) • vratite se na opciju Source i dodajte jedan div HTML element sa klasom row ispod div-a, tako da bude između zatvarajućeg taga i

• Iz Toolbox-a, odaberite kontrolu sa nazivom GridView, kao na slici • Prevucite kontrolu na deo koda unutar gorenjeg div-a kojeg ste dodali • sada je kod sledeći :

• obratite pažnju na označeni deo koda, to znači da je ovo serverska kontrola • Web forms serversko programranje funkcioniše tako što se dodaju serverske kontrole, koje se u runtime-u kompajliraju u HTML, tako da će ova kontrola kasnije da se prevede u tabelu (table) SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

52

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (11) • sada kao što je već opisano odaberite opciju Design prikaza koda • uočite da je dodata kontrola na Web formi, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

53

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (12) • kliknite na strelicu da bi ste konfigurisali GridView kontrolu, kao na slici

• Odaberite iz Combo-box-a opciju , kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

54

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (13) • sada vam se otvara Wizard za konfigurisanje Data Source-a

• Odaberite Database opciju, kao na slici i dajte ime DataSource-u, npr. ProgressDataSource SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

55

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (14) • Iz dijaloga konfigurišite Data Source, tako šti ćete odabrati opciju New Connection . . . • sada se otvara sledeći dijalog za pravljenje konekcije • Iz dela Data Source, odaberite Change, pa Microsoft ODBC DataSource • Nakon toga vam se otvara dijalog Add Connection

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

56

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (15) • Odaberite ODBC DataSource, koji ste ranije konfigurisali i proverite konekciju

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

57

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (16) • nakon toga odaberite Next • ponovo Next, tako da vam se prikaže sledeći dijalog

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

58

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (17) • Odaberite opciju Specify custom SQL statement or stored procedure • Odaberite Next • Upišite sledeću SQL upit ili iskoritite Query Builder alat (naredni slajd) da definišete upit SELECT PUB.Radnik.SifraRadnika, PUB.Radnik.ImeRadnika, PUB.Radnik.PrezimeRadnika, PUB.Radnik.SifraOdeljenja, PUB.Odeljenje.NazivOdeljenja

FROM WHERE

PUB.Radnik, PUB.Odeljenje PUB.Radnik.SifraOdeljenja = PUB.Odeljenje.SifraOdeljenja

• Nakon toga kliknite Next

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

59

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (18)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

60

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (19) • sada testirajte query pritiskom na dugme Test Query, kao na slici

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

61

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (20) • nakon toga odaberite Finish • Na centralnom delu ekrana projekta možete videti da je iza generisan neki kod • Sada build-ujte projekat putem CTRL+SHIFT+B • Pokrenite Web aplikaciju sa CTRL + F5 • uočite kako su na Default.aspx stranici prikazani podaci, kao na slici (naredni slajd)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

62

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (21)

SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

63

KORAK 2 – Pravljenje Web aplikacije u VS 2013 (21) • ugasite pretraživač i vratite se u Visual Studio i kao što je već opisano odaberite sekciju za gledanje koda Source • Uočite da je VS generisao kod, koji je izvršio komunikaciju sa bazom i prikazao podatke



SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

64

Zaključak • Ovo je samo jedan od načina na koji se podaci mogu prikazati iz baze • Ovaj primer je krajnje jednostavan samo da pokaže kako tehnologija funkcinoše • ASP.NET je jedan veoma moćan framework, koji može dovlačiti podatke na razne načine (ne samo preko baze) • U pozadini se ova aplikacija izvršava na IIS Express alatu, koji je da kažemo testni Web server za Visual Studio i on nam omogućava da u trenutku pokretanja aplikacije vidimo rezultat našeg programiranja • Izgled Web aplikacije koji je prikazan je formiran preko HTML 5 i CSS 3, upotrebom Twitter Bootstrap frameworka, kojeg je sam Visual Studio dodao prilikom pravljenja projekta (što se inače može izbeći i pisati kod od nule) • Uočite takođe da kada menjate veličinu ekrana (resize-ovanjem browser-a) ove aplikacije sadržaj se automatski prilagođava veličini, to je poznato kao response design tehnika koja se koristi da se isti interfejs obezbedi i mobilnim aplikacijama i Web aplikacijama i to je ono što štedi trud programerima SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

65

Uvod u ASP.NET Web programiranje • knjige za programiranje u ASP.NET Web forms načinu programiranja: • Imar Spaanjaars - Beginning ASP.NET 4.5.1 in C# and VB, Wrox (2014) • Adam Freeman, etc. - Pro ASP.NET 4.5 in C#, Apress (2013) • Sandeep Chanda, Damien Foggon - Beginning ASP.NET 4.5 Databases, Apress (2013) • Matthew MacDonald - Beginning ASP.NET 4.5 in C#, Apress (2012) • Mary Delamater, Anne Boehm - Murach's ASP.NET 4.5 Web Programming with C# 2012, Mike Murach & Associates (2013) • Rick Kiessig - Ultra-Fast ASP.NET 4.5, Apress (2012) • Microsoft-ov osnovni tutorijal za Web forms • Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013 SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

66

JKP BEOGRADSKI VODOVOD I KANALIZACIJA BEOGRAD

Uvod u ASP.NET Web programiranje

Autor: Slavimir Lj. Vesić, projektant/programer MCP - Microsoft Certified Professional, Licence ID: 10702121 SEKTOR ZA INFORMACIONO KOMUNIKACIONE TEHNOLOGIJE

67