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("<h1>Dobar dan!</h1>" + "<br>"); • JavaScript kod se može uključiti u HTML stranicu direktnim unosom programskog koda u okviru stranice: <SCRIPT LANGUAGE="JavaScript"> ... neki JavaScript kod ... </SCRIPT> • ili pozivom js dokumenta <SCRIPT LANGUAGE="JavaScript" SRC="JSkod.js"> </SCRIPT> 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+"<br>"); } • 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)