Zavod za industrijsko inženjerstvo INFORMACIJSKI SUSTAVI

Katedra za upravljanje proizvodnjom

MS VS
Microsoft Visual Studio
Nositelj kolegija: Prof. dr. sc. Dragutin Lisjak
Asistenti: Dr.sc. Davor Kolar

ver. 1.0
Sažetak
 Cilj vježbi: usvojiti osnove rada i terminologiju softverskog
paketa Microsoft Visual Studio 2019
 Sadržaj:
 Što je to MS VS?
 MS VS sučelje
 MS VS organizacija radnog prostora, prozora i kartica
 MS VS komunikacija među prozorima
 MS VS Properties prozor
 MS VS Server Explorer prozor
 MS VS HTML editor
 Web poslužitelj (server)
 Zaključak

2 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
Što je to MS VS?
 Mircosoft Visual Studio (MSVS) je integrirano razvojno
okruženje (eng. integrated development environment –
IDE), razvijeno od strane Microsoft kompanije,
namijenjeno razvoju raznih vrsta aplikacija na Windows
platformi
 MS VS kao alat za razvoj web aplikacija u potpunosti
zadovoljava potrebe razvojnih programera, jer pokriva
sve aspekte razvoja web aplikacija od izrade HTML
stranica, njihovo dizajniranje korištenjem CSS-a, korištenje
JavaScript-a te programiranje dinamičkog dijela na
samom web poslužitelju

3 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
Što je to MS VS?
 MS VS se koristi za razvijanje:
 konzolnih i GUI (eng. graphical user interface - GUI) aplikacija
zajedno s Windows Formama ili WPF aplikacijama, web
stranicama, web aplikacijama, web servisima te ujedno i
Windows Store aplikacijama za sve platforme podržane od
strane MS Windows-a, Windows Mobile-a, .NET Framework-a,
itd.
 Programiranje aplikacija u gotovo svim poznatijim
programskim jezicima

4 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 .NET Framework i CLR
 .NET Framework – Softverski sustav nadogradnje OS s
ciljem ponude gotovih rješenja i funkcionalnosti
ključnih za razvoj aplikacija.
 CLR (eng. Common Language Runtime) – glavna
sastavnica .NET
 Softverski sustav (virtual machine) koji osigurava
prevođenje u izvorni strojni kod (JIT kompajler).
 Dobiva naredbe isključivo u jeziku nazvanom Microsoft
Intermediate Language (skraćeno MSIL), temeljen na
pravilima koja se nazivaju Common Language
Specifications (CLS) → za pretvorbu u MSIL potreban IL
kompajler

5 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 GUI
 GUI ('gooey') – grafičko korisničko sučelje je vrsta
korisničkog sučelja koji dozvoljava korisnicima da
komuniciraju s elektroničnim napravama kroz grafičke
ikone i vizualne indikatore kao što su sekundarne
notacije (vizualna svojstva – pozicija, boja, simetričnost)
ZA RAZLIKU OD tekstualnih sučelja, tekstualnih navigacija
ili komandno upisanih oznaka
 u računalima, pametnim telefonima, prijenosnim media player-
ima, gaming platformama, itd.

6 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 Base Class Library
 osnovna skupina klasa koja sadrži osnovne
funkcionalnosti koje se koriste u programiranju (funkcije
za transformaciju teksta, mrežnu komunikaciju,
provjeravanje sigurnosnih prava, hvatanje unosa s
tipkovnice…)
 ADO.NET je prva nadogradnja osnovne skupine klasa, a
sastoji se od klasa zaduženih za komunikaciju s bazama
podataka (ADO.NET) te XML-om.

7 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 Programski moduli: Windows Forms
 Windows Forms (WinForms) je naziv za grafičko
aplikacijsko programsko sučelje (eng. application
programming interface – API) uključeno u Microsoft .NET
okvir
 omogućuje pristup izvornim elementima MS Windows
sučelja uključivanjem (omatanjem) postojećeg Windows
API-a u izvorni kod

8 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 Programski moduli: Windows Presentation
Foundation
 Windows Presentation Foundation (WPF) je grafički
podsustav za pružanje korisničkog sučelja u Windows
aplikacijama
 WPF omogućuje konzistentni programski model za stvaranje
aplikacija i razdvaja grafičko sučelje od poslovne logike

9 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
Programski moduli: MVC (Model-View-Controller)
 Model: Skup klasa koje
opisuju podatke s kojima
radimo, kao i aplikacijska
logika kako vršiti izmjenu i
manipulaciju podacima.
 Pogled (engl. View):
Definira kako će UI
aplikacije biti prikazan.
 Upravitelj (engl.
Controller): Skup klasa koji
se brine o komunikaciji s
korisnikom, sveukupnom
toku aplikacije i specifičnoj
logici aplikacije.

10 Informacijski sustavi
 Programski moduli: Web Forms
 dio skupa klasa nazvanog ASP.NET i zadužen je za razvoj
web aplikacija.

 Web forme u sebi sadrže sve objekte potrebne za

objektno-orijentirani pristup generiranju HTML sadržaja,
koji predstavljaju konačni produkt ovakvog tipa web
aplikacija
 Omogućava razvoj web aplikacija sličan razvoju desktop
aplikacija

11 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 Windows Presentation Foundation
 Windows Presentation Foundation (WPF) je grafički
podsustav za pružanje korisničkog sučelja u Windows
aplikacijama
 WPF omogućuje konzistentni programski model za stvaranje
aplikacija i razdvaja grafičko sučelje od poslovne logike

12 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS sučelje

13 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS sučelje

 na Start Page nalaze se osnovni

hiperlinkovi:
a.) stvaranje novog projekta
b.) otvaranje postojećeg projekta
c.) "Recent" → linkovi na projekte koji su
nedavno otvarani

14 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS sučelje
 odabirom „Create new project" moguće je odabrati:
a.) inačicu .NET Frameworka
b.) programski jezik
c.) tip projekta

15 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS sučelje
 odabirom „Create new project" moguće je odabrati:
a.) inačicu .NET Frameworka
b.) programski jezik
c.) tip projekta

16 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS sučelje

17 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS organizacija radnog prostora, prozora i kartica

Solution Explorer
može sadržavati 2
različita projekta, npr.:
ConsoleApp i
WindowsFormsApp

18 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS organizacija radnog prostora, prozora i kartica

Nakon otvaranja više dokumenata,

prostor je moguće podijeliti na više
kartica (tabova) → desnim klikom na
naziv taba otvara se prozor → odabire se
New Horizontal Tab Group

19 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS organizacija radnog prostora, prozora i kartica

"Držanjem" kartice i
"povlačenjem" po površini
prikazuju se mogućnosti
smještaja → "Drag & drop"
kartice!

20 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS organizacija radnog prostora, prozora i kartica

Odabirom Toogle pin

ikone moguće je
"Pop-out" pričvrstiti prozor!
prozor →
pričvrstiti
Server
Explorer!

21 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS organizacija radnog prostora, prozora i kartica

WINDOW → Reset Window

Layout vraća postavke
prozora na inicijalne!

CTR+TAB → otvara prozor sa

svim aktivnim Tool prozorima
i Active fileovima!

22 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS komunikacija među prozorima

Toolbox Designer Surface Property Window

button button Property

Property
Property
text input
Code file
Generirani kod

23 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS Properties prozor

1. označiti
objekt koji DOGAĐAJI
SVOJSTVA
želimo
promijeniti
2. promijeniti
svojstva
objekta

24 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
 MS VS Server Explorer prozor

K1: Spajanje na bazu

K2.1 : Odabrati server

K2.2: Odabrati bazu

K2.3: Testirati konekciju

25 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS HTML editor
 osnova svake web aplikacije je njezina struktura izrađena
korištenjem HTML-a
 u MS VS-u ugrađeni HTML editor ima mogućnost rada u
tri načina: design, source i split kojima omogućava
pregled na web aplikaciju na 3 različita načina:
 simulacija izgleda web stranice u browseru (design),
 prikaz izvornog HTML koda stranice (source), te
 podijeljeni pogled na web stranicu koji se sastoji od simulacije
izgleda i prikaza izvornog koda (split)

26 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
MS VS HTML editor
 podrška za HTML IntelliSense te prisutnost velike količine
CodeSnippeta za HTML zaokružuju mogućnost Visual Studio
HTML editora
 IntelliSense – tehnologija nuđenja opcija i automatskog
završetka programskog koda u trenutku pisanja istoga;
programeru se pruža pregled mogućih funkcija i njihov opis
ovisno o trenutnom kontekstu, čime se povećava i
produktivnost i brzina rada
 CodeSnippet – predstavljaju formatirane dijelove koda koji se
mogu višestruko primjenjivati i na taj način uklopiti u veće
programske cjeline; ti dijelovi se sastoje od rezerviranih riječi i
naredbi određenog programskog jezika, kao i dijelova koji
predstavljaju predloške koje programer u trenutku pisanja
zamjenjuje konkretnim vrijednostima

27 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
IntelliSense → primjer:

IntelliSense

28 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
CodeSnippet → primjer:
 Tools → CodeSnippets Manager → prikazuje sve
instalirane snippets-e u MSVS-u

Odabir
programskog
jezika

Prikaz
snippet-a

29 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
CodeSnippet → primjer:

1. KORAK → Intellisense nam

nudi programski kod → 2. KORAK
→ odaberemo programski kod
(plavo označen) i 2x pritisnemo
'TAB' tipku!

30 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
WEB poslužitelj (server)
 MS VS dolazi s ugrađenim web poslužiteljem, čime je
moguće razvijati aplikacije bez potrebe za instalacijom
dodatnog web poslužitelja
 kod MS VS-a web poslužitelj omogućava korištenje
vanjskih, posebno instaliranih web poslužitelja, bilo da
se radi o Internet Information Serveru (IIS) instaliranom
na razvojnom računalu programera ili o web poslužitelju
na zasebnoj adresi

31 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
Zaključak
 najvažniji aspekt razvoja web aplikacije je izrada
programske logike koja se odvija na serverskoj strani, tj.
web poslužitelju
 MS VS omogućava programerima izradu web aplikacija
korištenjem raznih programskih jezika podržanih u .NET
platformi (C#, VB.NET,…)
 MS VS omogućava i razvoj aplikacija korištenjem samog
.NET Framework-a
 mogućnosti poput IntelliSense tehnologije, CodeSnippet-
a, debugiranja izvršavanja web aplikacija podržane su i u
.NET jezicima

32 / 30 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo