Tema 02 Upoznavanje s funkcijama, sintaksom i semantikom softverskih alata dr Vladislav Miškovic [email protected] Fakultet za informatiku i računarstvo - Tehnički fakultet PRAKTIKUM - INTERNET I VEB TEHNOLOGIJE PRAKTIKUM - SISTEMI EPOSLOVANJA 2019/2020 Sadržaj

1. Uvod 2. Programski jezici za razvoj Veb aplikacija 3. Softverske platforme 4. Razvojni alati 5. Sistemi za upravljanje bazama podataka 6. Primer jednostavne transakcione ASP.NET aplikacije 1. Uvod

1. Osnovni pojmovi 2. Aplikativni okvir Microsoft .NET 1.1 Osnovni pojmovi

• Veb sajt i jezik HTML • Veb dizajn Veb sajt i jezik HTML

• Veb aplikacije su nastale nastale razvojem tehnologije izgradnje Veb sajtova – sajt je skup Veb stranica organizovanih u jedan ili više foldera na Veb serveru – relizuje se u jezicima koji podržava Veb čitač (HTML, CSS i JavaScript) • Jezik HTML se sastoji od oznaka (markup tags) • Aktuelna verzija je HTML 5 Veb dizajn

• Dizajn je kreiranje nečega što ima namenu • Grafički dizajn Veb stranica obuhvata – Raspoređivanje elemenata (layout) – Tipografiju - izbor stilova teksta/fontove – Boje - izbor skupa boja za različite elemente – Grafiku - rasterske i vektorske slike, video – Navigaciju - menije i tastere Grafički dizajn stranice: raspored (layout) • Raspoređivanje elemenata 1. Principi umetničke kompozicije: prvo se obrati pažnja na centar i uglove 1) centar i uglovi 2. Podela vizuelnog polja: centar pažnje je na trećinama celine 2) mreža 3x3 3. Navike čitalaca zavise od kulture, npr. zapadna pisma se čitaju s leva prema dole 3) Gutenbergovo Z (Gutenbergovo Z) 4. Kontinualno kretanje pogleda prilikom čitanja: korisnici retko vraćaju pogled na početak (Jakob Nielsenovo F) 4) kontinuitet čitanja (F) 7 Grafički dizajn stranice: raspored (layout) • Stečene navike posetilaca – posetioci pojedine Veb sadržaje očekuju na određenim mestima • link na osnovnu stranicu • polja za pretraživanje • navigaciju • korpu za kupovinu • pomoć • informacije o sajtu – tipična organizacija stranice

8 Grafički dizajn stranice: ostali elementi • Tipografija – font, veličina, razmak, boje – https://www.google.com/fonts • Boje – skup boja, Veb boje #RRGGBB • Grafika – rasterske i vektorske slike, video • Navigacija – meniji, linkovi i tasteri

9 1.2 Aplikativni okvir Microsoft .NET

• Microsoft .NET Framework je softverska platforma za razvoj mrežnih aplikacija – tehnologije: CLR, CLI/CIL, JIT – programski jezici za CLR (više od 20): A#, C#, C++/CLI, Clojure, Eiffel, J#, JScript.NET, L#, Phalanger, VBScript, VBA, Visual Basic.NET, ... – razvojni alat (IDE) i dodaci: Visual Studio 2010/2012/2013/2015/2017/2019 • postoje besplatne verzije za razvoj Veb aplikacija (Expess, Community, Code) – zaštita,npr. automatska prevencija SQL Injection napada • Prenosivost .NET aplikacija - ASP.NET Core i druge VM – npr. OSS projekti Portable.Net i Mono (Linux, Android, OS X, PlayStation, ...), IKVM.NET (.NET Java VM - Java u .NET) Elementi aplikativnog okvira .NET Programski jezici i izvršavnje programa Biblioteka klasa

Runtime sistem (CLR) Objektne biblioteke (Windows)

• Virtuelna mašina CLR (Common Language Runtime) • Objektne biblioteke – Osnovna biblioteka klasa – WinForms – ASP.NET – ADO.NET – WPF – WCF – LINQ, ... ASP.NET Core MVC: multiplatformski pristup razvoju Veb aplikacija • ASP.NET za moderni Veb ASP.NET Core – otvoreni kod – agilnost – brzina – računarstvo u oblaku – multiplatfomska orijentacija • ASP.NNET 5 GitHub

13 2. Programski jezici za razvoj Veb aplikacija 1. Kratki opis jezika JavaScript 2. Kratki opis jezika C# 3. Kratki opis jezika PHP 2.1 Kratki opis jezika JavaScript

• Standardi jezika JavaScript • Osnovi elementi jezika JavaScript • Promenljive i tipovi podataka jezika JavaScript • Strukture podataka i zrazi u jeziku JavaScript • Selekcija u jeziku JavaScript • Iteracija u jeziku JavaScript • Funkcije u jeziku JavaScript • Objekti u jeziku JavaScript

15 Standardi jezika JavaScript

• Jezik JavaScript, originalno nazvan LiveScript, predstavile su kompanije Netscape i Sun 1995. godine • Originalna verzija jezika imala je tri dela: osnovni (core), klijentski (client-side) i serverski (server-side) • JavaScript je: – objektno zasnovan, jer nisu potpuno realizovani koncepti OOP – nezavisan od platforme – omogućava programeru mnogo više funkcionalnosti na strani klijenta • Jezik je standardizovan pod nazivom ECMAScript 1997. godine – verzija 1.0 - svaka naredna verzija dodavala je jeziku nove mogućnosti • Moderna verzija jezika je ECMAScript 10 iz 2019. godine JavaScript i HTML

• JavaScript je integrisan sa HTML: u okviru jedne stranice mogu se na proizvoljan način kombinovati JavaScript i HTML kod • Iz jezika JavaScript moguće je generisati HTML kod, npr document.write("

Dobar dan!

" + "
"); • JavaScript kod se može uključiti u HTML stranicu direktnim unosom programskog koda u okviru stranice: • ili pozivom js dokumenta 17 Osnovi elementi jezika JavaScript

• Osnovna sintaksa nasleđena iz jezika C/C++ – program se sastoji od naredbi odvojenih znakom ";" ili oznakom novog reda. – naredbe se sastoje od vrednosti, operatora, izraza, ključnih reči i komentara – blok naredbi grupiše naredbe unutar velikih zagrada { // naredbe } – razlikuju se mala i velika slova (kao u jezicima Java, C, C++) • Komentari // Komentar u jednoj C# liniji /* Komentar koji zauzima više redova JavaScript koda. */ Promenljive i tipovi podataka jezika JavaScript • Vrednosti u jeziku JavaScript mogu biti: – celi brojevi – realni brojevi – stringivi (nizovi znakova) – logičke vrednosti true i false (1 i 0) • Osnovni tip promenljive je objekt (može imati vrednost null) • Deklaracija promenljive vrši se naredbom var – predstavlja kreiranje promenljive, dok se njen tip određuje tipom dodeljene vrednosti • Definicija promenljive je kreiranje i inicijalizacija promenljive var evro; //deklaracija promenljive var dinar = 120; //definicija promenljive Strukture podataka i zrazi u jeziku JavaScript • Polja var prazno = []; // polje bez elemenata var prosti = [2, 3, 5, 7, 11]; // polje 5 num. elem. var razlic = [1.1, true, "a",]; // tri različita elem. var matrica= [[],[],[]]; // matrica 3x2 • Izrazi a = true; b = false; c = a || b; d = a && b g = !a; document.write("g = " + g); // g=false Selekcija u jeziku JavaScript

• Naredba If • Naredba Switch if (boolean_izraz) { switch (izraz) { // naredbe case vrednost-1: } // naredbe [else if (boolean_izraz) break; // naredbe case vrednost-2: }] // naredbe [else { break; // naredbe ... }] [default: // naredbe break;] } Iteracija u jeziku JavaScript

• Ponavljanje poznati broj puta: for for (int i = 0; i < 10; i++) { // naredbe, 10 puta } • Petlja kroz skup elemenata: for..in/for each za svaku osobinu (property) u okviru određenog objekta, npr. objekt Array niz = new Array("Đoković", "Nadal", "Federer") for (var i in niz) { document.write(niz[i]i+"
"); } • Ponavljanje po uslovu (while/do...while), npr. int i = 0; n= 10; while (i < n) { // kod koji se izvršava n puta } Funkcije u jeziku JavaScript

• Slične su metodima objekata, ali ne pripadaju nijednom objektu; parametri se prenose po vrednosti • Definicija funkcije s parametrima function ime([param1][,param2][...,paramN]) { naredbe } • Ako funkcija vraća neku vrednost, ona se navodi u naredbi return • Dozvoljeni su rekurzivni pozivi Objekti u jeziku JavaScript

• Jezik JavaScript je objektno zasnovan jezik: objekti se kreiraju modifikacijom ili kopiranjem postojećih objekata • Osobine objekta (properties) su JavaScript promenljive nazivobjekta.nazivosobine • Funkcije objekta su metodi (methods) nazivobjekta.nazivmetoda (parametri); • Postoje ugrađeni sistemski objekti s brojnim metodima, npr. Array, Math, Date, String • Mogu se kreirati sopstveni objekti(new) – this - objekt kome pripada tekući objekt

24 Kreiranje sopstvenih objekata

• Deklaracija novog objekta konstruktorskom funkcijom: function Osoba(ime, prezime, JMBG) { this.ime = ime; this.prezime = prezime; this.mat_broj = JMBG; } • Kreiranje objekata pomoću konstruktora osoba1 = new Osoba("Petar", "Petrović","0101957710223");

25 Naredba with

• Naredba with definiše tip objekta za niz izraza. U okviru izraza dodeljuje specifične vrednosti za određene osobine objekta • Npr. umesto oznake objekta Math za svaku matematičku knstantu ili funkciju (PI, cos, sin, ..) može se koristiti with ispred grupe naredbi: var a, x, y; var r = 10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI/2); }

26 2.2 Kratki opis jezika C#

• Osnovi elementi jezika C# • Promenljive i tipovi podataka jezika C# • Strukture podataka i zrazi u jeziku C# • Rad s objektima u jeziku C# • Selekcija u jeziku C# • Iteracija u jeziku C# • Metodi u jeziku C# • Klase u jeziku C# Osnovi elementi jezika C#

• Osnovna sintaksa nasleđena iz jezika C/C++ – naredba može biti u više redova i završava znakom ";" Vrednost = Vrednost1 + Vrednost2 + Vrednost3; – blok naredbi grupiše naredbe unutar velikih zagrada { // naredbe } – u jeziku C# razlikuju se mala i velika slova (kao u jezicima Java, C, C++) • Komentari // Komentar u jednoj C# liniji /* Komentar koji zauzima više redova C# koda. */ Promenljive i tipovi podataka jezika C#

• Svi jezici aplikativnog okvira .NET koriste iste tipove podataka, čiji su nazivi u jeziku C# : – celi brojevi: byte, short, int, long – decimaln brojevi: float, double, decimal – tekst: char, string – logičke vrednosti: bool – datum i vreme: (struktura) – opšti tip: object • Deklaracija promenljive (i inicijalizacija) int errorCode; string myName; int errorCode = 10; string myName = "Petar"; Strukture podataka i zrazi u jeziku C#

• Polja [] stringPolje = new string[4]; //polje 0..3 int[,] intArray = new int[2, 4]; // polje 4r x 2k int[,] intArray = {{1,2},{3,4},{5,6},{7,8}};//polje 4r x 2k ArrayList dynamicList = new ArrayList(); dynamicList.Add("one"); ... string item = Convert.ToString(dynamicList[0]); • Izrazi nekiBroj = (vrednost + 1) * 3; ImePrezime = Ime + " " + Prezime; nekaVrednost = Math.Sqrt(144); // =12.0 Rad s objektima u jeziku C#

• C# je OO jezik, sa tipovima podataka i operacijama okvira .Net string nekiString = "Ovo je testni string "; nekiString = nekiString.Trim(); // = "Ovo je testni string" nekiString = nekiString.Substring(0, 3); // = "Ovo" nekiString = nekiString.ToUpper(); // = "OVO" nekiString = nekiString.Replace("V", "N");// = "ONO" int length = nekiString.Length; // = 3 • Polja int[] Polje = {1, 2, 3, 4, 5}; int brojElemenata; brojElemenata = Polje.Length; // brojElemenata = 5 int bound; bound = Polje.GetUpperBound(0); // bound = 4 Selekcija u jeziku C#

• Naredba If • Naredba Switch if (nekiBroj > 10) { switch (nekiBroj) { // naredbe case 1: } // naredbe else if (nekiString == "hello") break; { case 2: // naredbe // naredbe } break; else { default: // naredbe // naredbe } break; } Iteracija u jeziku C#

• Ponavljanje poznati broj puta: for for (int i = 0; i < 10; i++) { System.Diagnostics.Debug.Write(i); //10 puta } • Petlja kroz skup elemenata: foreach string[] stringPolje = {"jedan", "dva", "tri"}; foreach (string element in stringPolje) { System.Diagnostics.Debug.Write(element + " "); } • Ponavljanje dok je zadovoljen uslov (while/do...while) : while int i = 0; n= 10; while (i < n) { i += 1; // kod koji se izvršava n puta } Metodi u jeziku C#

• Metod je osnovni element organizacije OO koda • Primer metoda koji ne vraća rezultat void MetodKojiNeVracaRezultat() { // naredbe } • Primer metoda koji vraća celobrojni rezultat int MetodKojiVracaRezultat() { // naredbe // Vraća vrednost 10 return 10; } Klase u jeziku C#

• Kreiranje klase public class MojaKlasa { // kod klase } • Primer public class Proizvod { private string Naziv; private decimal Cena; private string SlikaUrl; } ... Proizvod prodajaProizvoda = new Proizvod(); 2.3 Kratki opis jezika PHP (Internet tehnologije, više na važbama)

• Serverski programski jezik, uveden na predmetu Internet i Veb tehnologije – promenljive – izrazi – selekcija – iteracija – pristup bazama podataka – Veb forme i unos podataka 3. Softverske platforme

1. Node.js 2. Aplikativni okvir ASP.NET 3.1 Node.js

• Softverska platforma otvorenog koda koji omogućava upotrebu jezika JavaScript na serveru • Izgrađen na na osnovu V8 interpretera (V8 JavaScript Engine) koji je razvijen za Veb čitač Chrome u jeziku C++ • Zahvaljujući V8, programi u jeziku JavaScript (ECMAScript) mogu se izvršavati – u okviru Veb čitača – na serverskoj platformi Node.js, nezavisno od Veb čitača • Može da se izvršava se na različitim platformama kao što su npr. Windows, Linux, Mac OS X i Unix • Detaljno upoznavanje: na vežbama 3.2 Aplikativni okvir ASP.NET

• Koncept ASP.NET tehnologije • Struktura stranice • Veb forme (Windows): GridView, DetailsView Koncept ASP.NET tehnologije

• Serverska tehnologija za razvoj Veb aplikacija koja koristi platformu Microsoft .NET Framework – brojni programski jezici (.NET) – programski kod Veb stranice se prevodi (ASP.NET) – odvajanje serverskog koda i klijentskog HTML – veliki broj gotovih elemenata Web GUI • ASP.NET je aplikativni okvir (Web framework) otvorenog koda (open source) za razvoj Veb aplikacija i servisa – jednostavni, efikasni i skalabilni Veb sajtovi zasnovani na HTML5, CSS i JavaScript (milioni istovremenih korisnika) – Visual Studio 2015/2017 - IDE za ASP.NET pod OS Windows – .NET Core - besplatni .NET alat s komandnim interfejsom za OS Windows, Mac i Linux Programski jezici .NET platforme https://en.wikipedia.org/wiki/List_of_CLI_languages

Aktuelni • Visual Basic .NET (VB.NET) • C# • Visual COBOL • C++/CLI, Cobra, Component Pascal, • Windows PowerShell Eiffel • F# Napušteni • F*, Fantom, IronPython, • A# IronScheme • Axum • JScript .NET • Boo • Limnor Studio, Managed JScript, • GrGen.NET Nemerle, Oxygene • IronRuby • Phalanger/PHP • J# • PowerBuilder, Small Basic, Silverfrost FTN95, Synergy DBL .NET, Team • Managed Extensions for C++ Developer • Niecza

41 Jezik C#

• Objektno-orijentisani programski jezik opšte namene za kreiranje distribuiranih softverskih sistema – C# 4.0 - .NET Framework 4, Visual Studio 2010 – C# 5.0 - .NET Framework 4.5, Visual Studio 2012 – C# 6.0 - .NET Framework 4.6, Visual Studio 2015 – C# 7.0 - .NET Framework 4.6.2/4.7, Visual Studio 2017 • Primer minimalnog koda - jednostavni konzolni ispis poruke: using System; namespace PozdravNameSpace { public class Pozdrav { static void Main() { Console.Writeln("Dobar dan!"); } } } 42 Struktura klasične ASP.NET stranice

• Veb stranica je tekstualni fajl sa sufiksom .aspx • Struktura – direktive (<%@ ... %>) – deklaracija linija koda – izvršni kod (inline) – serverske kontrole ASP.NET – komentari (server-side) – obični tekst – HTML oznake (tags) Veb forme (Windows): GridView, ListView • Podsetnik: HTML element Veb forma • Kontrola FormView (WF) • Kontrola GridView (WF) • Kontrola ListView (WF) Podsetnik: HTML element Veb forma

•

. . .

– definiše formu za unos podataka (atributi: ACTION, METHOD, ENCTYPE) • Elementi forme između oznaka mogu biti: • definiše polje forme (atributi: NAME, TYPE, VALUE, CHECKED, SIZE, MAXLENGTH; TYPE može biti: text, button, checkbox) . . . • definiše listu izbora (atributi: NAME, MULTIPLE, SIZE) • definiše elemente liste izbora (atribut:SELECTED) . . . • definiše prozor za unos teksta (atributi: NAME, ROWS, COLS)

45 Elementi forme: polje za izbor i padajuća lista Polje za izbor Padajuća lista • tag • tag i opcija

46 Kontrola FormView (WF)

Proizvod (2) sadržaj tabele u Server Exploreru • FormView je ASP.NET Windows Forms kontrola – omogućava pregled i ažuriranje podataka jedne (3) sadržaj tabela u Veb stranici (FormView) instance iz SQL baze podataka preko Veb stranice i formatiranje prikaza (3) editovanje tabele u Veb stranici (FormView) – može da ažurira, briše i dodaje nove redove u tabelu baze

(1) tabela baze podataka Kontrola GridView (WF)

• GridView je ASP.NET Windows Forms kontrola – omogućava pregled i ažuriranje u SQL bazi podataka preko Veb stranice, straničenje (paging) i formatiranje prikaza – nema funkcije dodavanja novog reda u tabelu – za dodavanje novog reda koristi se neka druga kontrola, npr. FormView Kontrola ListView

• ListView je kontrola ASP.NET 3.5/4/4.5 • Kao GridView, omogućava pregled, ažuriranje, straničenje (paging) i formatiranje • Za razliku od GridView, kontrola omogućava i dodavanje novog reda, odnosno unos podataka u dodatnom redu kontrole 4. Razvojni alati

• Visual Studio 2012-2019 • Generatori koda i programski interfejsi (API) • Sistemi za upravljanje sadržajem (CMS)

50 4.1 Visual Studio 2012-2019

• Osnovne funkcije • Podrška za UML • Podrška za programske jezike (C#,PHP) • HTML elementi • Veb forme • Rad s bazama podataka • OR mapiranje Osnovne funkcije

• Integrisano okruženje, objedinjava više funkcija razvoja softvera – modeliranje, programski i HTML editor, testiranje, rad s bazama podataka, upravljanje verzijama • Kreiranje sajta/stranice/UML modela • Prikaz projekta i koda – Server Explorer, Solution Explorer – Radna površina (Design/Source/Split) – Toolbox, Output • Testiranje – sopstveni Web server/database server (SQL) – eksterni Web server/database server Osnovni ekran (Visual Studio 2012-2015) Kreiranje Veb aplikacije (2012-2015) Napomena: ostali projekti Novi Veb sajt (folder i Web.config) Kreiranje Veb stranice

• Web stranica se kreira pokretanjem dijaloga Website/Add New Item – izborom šablona Web form kreira se stranica za unos podataka (HTML forma) Nova Veb stranica (2012-2015 kategorije) Struktura HTML 5 Veb stranice (prazna Veb forma) Kod HTML 5 Veb stranice (prazna Veb forma) Veb kontrole

• Dizajn Veb stranice: na stranicu se dodaju HTML elementi (Veb kontrole) iz palete i oblikuje njen konačni izgled • Stranica se posmatra grafički (design), programski (source) ili kombinovano – Design view – Source view – Split view Dizajn elemenata stranice

• Inicijalna svojstva kontrola/ elemenata koji čine Veb Izbor kontrole stranicu mogu se menjati ... Podrška za UML (2010-2015)

• Poseban projekt za sve UML modele ili • Isti projekt, poseban folder za UML i druge modele Visual Studio Community 2019: Noviji interfejs, kreiranje projekta Visual Studio Community 2019: Kreiranje ASP.NET Core 3 Veb aplikacije Visual Studio Community 2019: Kreiranje ASP.NET Core 3.1 Veb aplikacije Visual Studio Community 2019: Kreiranje ASP.NET Core 3.1 Veb aplikacije Podrška za programske jezike

• HTML, XML i JavaScript • C# • PHP • Python • R HTML elementi

• Osnovni HTML elementi (Standard) • Ostali HTML elementi • Veb kontrole Standard HTML

• Standardni HTML elementi – običan tekst – paragraf – slika – stil teksta

,...

– nabrajanje

,

,

– hiperlink – tabela , , , – forma

,

,, ... • Atributi – npr. za slike: • HTML 5 tutorial www.w3schools.com/html5/html5_intro.asp Osnovni HTML elementi (paleta Standard) • Standardni elementi: – označeni tekst (Label) – hiperveze (Link) – slike (Image) – tabele (Table) – nabrajanja – elementi Web forme • check box • list box • radio button • button Ostali HTML elementi

• Elementi Web aplikacije – rad s bazama podataka (paleta Data) • kontrole za pritup bazama podataka (SqlDataSource) • kontrole za ažuriranje podataka u tabelarnoj formi (GridView, ListView) • ... – validacija – navigacija – login – AJAX – ... Veb forme

• Veb forma • Programiranje Veb forme

• Veb forma je element koji omogućava komunikaciju s korisnikom i slanje podataka Veb serveru • Sadrži elemente grafičkog interfejsa:

– tastere (button)

– liste izbora (listbox/combobox)

– radio i checkbox elemente

• Nova ASP.Net stranica inicijalno sadrži praznu Veb formu (sadrži samo oznaku div za grupisanje elemenata) Programiranje

• Veb stranice mogu da sadrže kôd using System; različitih programskih jezika using System.Collections.Generic; using System.Linq; a) kao proširenje osnovnog html fajla using System.Web; stranice sa sufiksom .aspx using System.Web.UI; b) na posebnim fajlovima, čija using System.Web.UI.WebControls; oznaka zavisi od programskog public partial class MojaStranica: jezika - za C# kod je u fajlu .aspx.cs System.Web.UI.Page { • Kôd stranice definiše se kao protected void Page_Load(object posebna klasa sender, EventArgs e) { • Veći deo koda je u obliku } procedura koje reaguju na } događaje (event handler) – klik mišem, izmene podataka, ... Rad s bazama podataka

• Visual Studio Data Explorer – kreiranje i brisanje BP – kreiranje i brisanje tabela – kreiranje relacija – prikaz strukture baze podataka pomoću ER dijagrama • Programiranje – uskladištene procedure Ilustracije: Web forme i aplikacije (Microsoft video) • Intro to ASP.NET Web Forms (5) http://download.microsoft.com/download/8/0/8/8086C1B0-419B-4BAC-91A6- 326E0644C45D/HDI-ITPro-ASPNET-Winvideo-ASPNETWebForms4-5minintro.wmv • Kreiranje jednostavne ASP.NET aplikacije koja koristi ASP.NET Web Forms (12 min) http://download.microsoft.com/download/5/7/A/57A18CAB-EEF7-4653-A2A3- F7066E034735/ASP-winvideo-BuildingFirstWebFormsASP_NETApp.wmv • Kreiranje jednostavne MVC aplikacije (18 min) http://download.microsoft.com/download/4/E/3/4E3423EE-0C65-4152- AC55-AF8692E858D1/MSDN-winvideo- BuildingFirstMVCASPNETApplication.wmv

77 Visual Studio i OR mapiranje

• Princip OR mapiranja – različiti modeli klasa i BP – automatizacija kreiranja modela mapiranja • ASP.NET Entity Framework – Entity Data Model (EDM) 4.2 Generatori koda i programski interfejsi (API) • Apache Cordova • Code Igniter Apache Cordova (ranije Adobe PhoneGap)

• Softverski alat za razvoj aplikacija za mobilne platforme: – Android – iOS – BlackBerry 6 – Windows Phone 7/8/10 – WebOS – Symbian Code Igniter

• CodeIgniter je besplatni, objektno orijentisani PHP alat za izradu Web aplikacija – Veliki broj programskih biblioteka – Rad sa svim poznatijim DBMS 4.3 Sistemi za upravljanje sadržajem (CMS)

• Wordpress • Drupal Wordpress

• CMS otvorenog koda, prvobitno namenjen za izradu blogova – serverski jezik: PHP – baza podataka: MySQL, MS SQL – veliki broj tema i dodataka – od milion najposećenih Veb sajtova 66% koristi CMS, a 49% njih koristi Wordpress https://trends.builtwith.com/cms Drupal

• CMS otvorenog koda – serverski jezik: PHP – baza podataka: MySQL, MS SQL – od milion najposećenih Veb sajtova 66% koristi CMS, a 5% njih koristi Drupal https://trends.builtwith.com/cms

84 5. Sistemi za upravljanje bazama podataka 1. SQL Server 2008-2019/Express 5.1 SQL Server 2008-2019/Express • Povezivanje s bazom podataka • Kreiranje baze podataka • Izvršavanje SQL upita (klasično) Povezivanje s bazom podataka

• Zavisi od verzije .NET // pristup lokalnoj bazi podataka // SQL Server Express (C#) • Kontrola SqlDataSource string sKonekcija="Data Source=(localdb)\v11.0; • Objekti klase Connection IntegratedSecurity=true; AttachDbFileName=prodajaDb.mdf"; SqlDbConnection dbKonekcija; dbKonekcija = new SqlDbConnection (sKonekcija); dbKonekcija.Open(); . . (rad s podacima) . dbKonekcija.Close(); Kreiranje baze podataka

• Pomoću komandi iz menija DBMS • Pomoću CASE alata, npr. Visual Studio • Programski, pomoću SQL upita – C# Izvršavanje SQL upita (klasično)

• Izvršavanje upita iz // definisanje upita u sql bazu (C#) // - klasično, bez EF programskog koda string sql; – C# sql = "SELECT * FROM Proizvodi ORDER BY Naziv ASC, Cena ASC;"; • Parametrizovani upiti SqlDbCommand dbKomanda = new SqlDbCommand(); – sqlDataSource ima sekciju dbKomanda.CommandText = sql; , za dbKomanda.Connection = dbKonekcija; preslikavanje naziva dbKomanda.Open(); parametara (prefiks @) u // izvršavanje upita u sql bazu vrednost svojstva neke SqlDataReader rs; kontrole, npr. @ProizvodID u rs = dbKomanda.ExecuteReader(); kontrolu tipa listbox rs.Read(); // jedan red lstProizvod.SelectedValue ... rs.Close(); dbKomanda.Connection.Close(); 6. Primer jednostavne transakcione ASP.NET aplikacije 1. Namena i funkcije 2. Arhitektura 3. Model i baza podataka 4. Interfejs (prototip)

90 6.1 Namena i funkcije

• Veb anketa, prikaz osnovnih podataka o pitanju (npr. ekskurzija), online glasanje i prikaz rezultata ankete 1. Prijava - prikaz informacija o pitanju i prijava. 2. Potvrda - provera ispravnosti prijave i potvrda. 3. Rezime - pregled odgovora na anketu. 4. Ažururanje - ažuriranje spiska učesnika.

91 6.2 Arhitektura

• Standardna višeslojna Sloj interfejsa «interface» arhitektura WebAnketaForma Attributes – UML dijagram Operations paketa/klasa, model Sloj aplikacije dijagram WebAnketa

Attributes Operations

Sloj baze podataka

Anketa

Attributes Operations

92 6.3 Model i baza podataka

• Klase u perzistentnoj memoriji koje odgovaraju entitetskoj klasi u radnoj memoriji (polja): namespace WebAnketa { public class KlijentOdgovor { public string Ime { get; set; } public string Prezime { get; set; } public string eAdresa { get; set; } public string Telefon { get; set; } public bool? Odgovor { get; set; } } }

93 6.4 Interfejs (prototip)

«interface» WebAnketaForma • Implementacija interfejs Attributes + eAdresa + Ime klasa pomoću ASP.NET + Odgovor + Prezime + Telefon Web Forms (WF) kontrola i Operations automatizovano generisanje koda • Stranice za pregled, unos i ažuriranje podataka, npr. pomoću WF kontrola – GridView: izmene i brisanje – FormView:unos i ažuriranje – ListView: unos i ažuriranje

94 Literatura

1. Miškovic V., Praktikum Internet i Veb tehnologije, Univerzitet Singidunum, Beograd, 2020 2. De Sanctis V., ASP.NET Core 3 and Angular 9, 3rd Ed, Packt Publishing, 2020 3. Freeman A., Pro ASP.NET Core MVC 2, 7th Ed, Apress, 2017 4. Freeman A., Pro Entity Framework Core 2 for ASP.NET Core MVC, Apress, 2018 5. Wexler J., Get Programming with Node.js, Manning Publications, 2019 6. Knjige iz Veb tehnologija, dizajna i Veb programiranja (HTML 5, CSS 3, JavaScript, C#, PHP) 7. Microsoft video tutorijali: – http://msdn.microsoft.com/en- us/vs2010trainingcourse_webdevelopment.aspx – http://channel9.msdn.com/