Vytvárajte moderné Web 2.0 aplikácie - PDF

Description
1 Vytvárajte moderné Web 2.0 aplikácie Internet už dávno nie je výsadou skupiny počítačovo gramotných ľudí. Začal sa proces masovej socializácie webu a používatelia v súčasnosti prevzali moc nad jeho obsahom.

Please download to get full document.

View again

of 91
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Poems

Publish on:

Views: 27 | Pages: 91

Extension: PDF | Download: 0

Share
Transcript
1 Vytvárajte moderné Web 2.0 aplikácie Internet už dávno nie je výsadou skupiny počítačovo gramotných ľudí. Začal sa proces masovej socializácie webu a používatelia v súčasnosti prevzali moc nad jeho obsahom. Nielen rozvoj technológií, či rýchle a dostupné pripojenie, ale aj potreba byť na pulze života a biznisu a potreba zdieľať zážitky a názory je hybnou silou, ktorá posúva Internet k novým métam. Zároveň sa však používatelia Internetu stali náročnejšími na formu prijímaného posolstva a hlavne majú túžbu po interaktivite a možnosti ku všetkému sa vyjadriť. Samozrejme nový interaktívny web má aj iné dimenzie, používatelia si uvedomujú, že napriek tomu, že väčšina masových služieb a sociálnych sietí je bezplatná, prevádzka webovej infraštruktúry niečo stojí a tak sú za relevantnú protihodnotu ochotní prijímať aj reklamné posolstvo. Tí podnikavejší objavia aj možnosti ako reklamné posolstvo šíriť. Web 2.0 je súhrnný názov pre nové internetové technológie, ktoré umožňujú konzumentom webového obsahu aby sa bez špeciálnych znalostí stali jeho tvorcami. Napríklad ak je vašim motívom pre vytváranie webových stránok hobby, nemusíte byť špecialistom na informačné technológie, stačí vám poznať základy a mať k dispozícii dobré nástroje. Internet ponúkal návštevníkom spočiatku iba jednosmernú konzumáciu obsahu z webových stránok k používateľovi. Pre Web 2.0 je charakteristický viacsmerný komunikačný proces, teda zo stránky k používateľovi, od používateľa k webovej stránke, či medzi portálmi navzájom. Do toho vstupuje aj takzvaný Internet vecí, teda komunikácia medzi rôznymi zariadeniami (chladnička, systém riadenia inteligentného domu... ) a poskytovateľmi služieb. Interaktivita Webu 2.0 umožnila stieranie rozdielov medzi profesionálnymi a laickými tvorcami webového obsahu. Typickými fenoménmi webu 2.0 sú blogy, sociálne siete a wiki, prostredníctvom ktorých sa každý používateľ stáva automaticky tvorcom obsahu. Stačí pridať trochu kreativity a zvládnuť jednoduché technológie pre vytváranie webových stránok a môžete postúpiť na najvyššiu métu webu stať sa tvorcom stránok a aplikácií. Postupným vývojom webových aplikácií sa neustále zvyšuje ich interaktivita a kvalita prezentačného rozhrania. Tento vývoj je evolučný, medzi používateľmi a tvorcami webových aplikácií vznikol určitý druh kladnej spätnej väzby, kedy nové možnosti, ktoré poskytujú nové technológie evokujú čoraz vyššie a náročnejšie požiadavky zo strany používateľov. Tento trend vyústil do požiadavky, aby sa možnosti používateľského rozhrania webových aplikácií, čo najviac priblížili možnostiam klasických aplikácií bežiacich na desktopoch. Dynamické, interaktívne aplikácie, ktoré umožňujú prispôsobenie užívateľmi sú základným pilierom Webu 2.0. Úspešnosť aplikácií a to nielen webových závisí v prvom rade od spokojnosti používateľov. Platí to hlavne pri aplikáciách s ktorými sa pracuje denne. Aplikácia musí mať dobrý dizajn, príjemné 2 a ergonomické ovládanie a rýchlu odozvu. Pre hodnotenie spokojnosti používateľov platí jednoduchý slovný vzorec Funkcionalita + Vzhľad + Vzťah + Príbeh = Spokojnosť používateľov. Na rozdiel od klasických príručiek, ktoré sú koncipované od základov po najpokročilejšie témy, v príručke pre tvorbu moderných Web 2.0 Mashup aplikácií sme zvolili trocha odlišný postup. Uvidíte, že niektoré veľmi sofistikované záležitosti, ako napríklad integrovanie vyhľadávania do vašej aplikácie, či spolupráca so sociálnymi sieťami sa dá vyriešiť jednoducho a intuitívne doslova na niekoľko riadkov kódu. Avšak prílišnému optimizmu z predošlého odseku bráni slovné spojenie do vašej aplikácie. Aby ste mohli prepojiť vlastnú aplikáciu s Facebookom a tak na ňu prilákať ľudí, musíte vlastnú aplikáciu mať a musí byť pre používateľa užitočná. A aby ste takú aplikáciu vytvorili, potrebujete zvládnuť prácu s obrázkami, multimédiami, ba aj s údajmi. A to je dôvod, aby ste čítali aj tie kapitoly, ktoré sa zdajú byť zložitejšie. Táto publikácia je primárne zameraná na ľudí, zamýšľajúcich vytvoriť si vlastné stránky, pričom predpokladáme, že primárna oblasť ich záujmov je iná. 3 Web Matrix ako ideálny nástroj pre začiatočníkov Ak niektorým záujemcom o vývoj webových aplikácií tento nadpis niečo pripomína, máte pravdu. Vývojové prostredie od spoločnosti Microsoft s názvom WebMatrix tu už raz bolo, konkrétne v roku Bolo to odľahčené open-source vývojové prostredie pre vývoj hobby projektov na platforme ASP.NET. Postupne ho však vytlačili voľne šíriteľné Express verzie nástroja VisualStudio a samostatný produkt VisualWebDeveloper Express. WebMatrix obsahuje v jednom softvérovom balíku všetko, čo potrebujete na vytváranie webových aplikácií na platforme Windows, vrátene webového servera IIS Express, webového frameworku, ASP.NET a embedded databázy SQL Server Compact (embedded databáza). Všetko je zadarmo a opensource. Skúsenosti a prípadne aj osvedčené aplikácie vytvorené v tomto prostredí môžete využívať aj na profesionálnych komerčných platformách VisualStudio a SQL Server. Produkt nájdete na adrese Matrix komplexná webová platforma Idea nástroja WebMatrix vtedy, aj teraz po siedmich rokoch, je podobná pritiahnuť hobby vývojárov na platformu.net. WebMatrix je koncipovaný tak, že prvé projekty v ňom môžete vytvárať prakticky okamžite a postupne si za pochodu osvojíte aj zložitejšie témy. Najvýznamnejšou novinkou je technológia Razor a súbor knižníc pre implementáciu širokej palety webových služieb a sociálnych sietí. Vývojové prostredie Web Matrix má implementovanú galériu aplikácií pre populárne weby ako napríklad blogovú platformu WordPress. 4 Galéria aplikácií pre populárne weby WebMatrix umožňuje tvorbu dynamických webových stránok, ktorých obsah sa mení na základe vstupov používateľov, prípadne aktuálnych údajoch v databáze. Kód je umiestnený v súboroch s príponami cshtml, alebo vbhtml, ktoré využívajú novú syntax nazývanú Razor. Riadky, či bloky Razor kódu rozoznáte veľmi jednoducho, začínajú čiže zavináčom. Web Matrix odlišuje Razor kód od ostatného kódu (HTML, JavaScript...) sivým podfarbením Projekty z nástroja WebMatrix je možné jednoducho migrovať do nástroja VisualStudio a tak sa v prípade osvedčeného webového projektu posunúť na vyššiu profesionálnejšiu métu. Ak webová aplikácia pracuje s údajmi, súčasťou projektu sa stáva aj SQL Server Compact. Je to odľahčená embedded databáza, čo znamená, že jej engine sa pripája priamo k projektu s ktorým sa šíri. Z tohto dôvodu je (podobne ako kancelárska databáza Access) plne súborovo orientovaná. Inštalácia nástroja Web Matrix Inštaláciu nástroja WebMatrix začnite na adrese V úvodnom dialógu sa zobrazia podrobnosti o komponentoch, ktoré sa nainštalujú. Inštalácia nástroja Web Matrix 5 Podrobnosti o inštalovaných komponentoch Samozrejme tvorcovia nástroja WebMatrix predpokladajú, že s ich projektom dosiahnete úspech, teda, že vytvoríte dobrú aplikáciu, ktorú budete chcieť umiestniť na web. Preto v priebehu inštalácie budete informovaní o možnostiach webhostingu. Vstupný bod je na adrese Počas inštalácie budete informovaní o možnostiach webhostingu Po nainštalovaní nástroja WebMatrix a základných komponentov integrovaných do tohto prostredia (Webový server IIS, SQL Server Compact...) dostanete ponuku na inštaláciu prídavných komponentov a aplikácií, napríklad ASP.NET MVC 3, či CMS (ContentManagement System) systémov. 6 Možnosť inštalácie prídavných komponentov a aplikácií 7 Prvý projekt webovej aplikácie Motto: Nebojte sa, upokojuje lekár pacienta, ktorému práve prišil dva prsty odseknuté pri rúbaní dreva, keď sa vám to zahojí, budete môcť hrať aj na klavíri.... No to som zvedavý, čuduje sa pacient, ja totiž na klavíri hrať neviem... Ako bolo konštatované v úvodnej stati, vývojové prostredie WebMatrix je koncipované tak, že v ňom môžete začať ihneď po inštalácii vytvárať webové aplikácie. A to platí v plnom rozsahu aj pre úplných začiatočníkov. Samozrejme, hlavne pre začiatočníkov platí aj druhé tvrdenie, že si postupne prakticky osvoja aj pokročilejšie témy, takže vaša druhá aplikácia už bude oveľa sofistikovanejšia. Sprievodca rýchlym vytvorením projektu Začnite vytvorením projektu zo šablóny, teda aktivujte voľbu Site FromTemplate. Šablóny sú vzory vopred vytvorených súborov a stránok pre rôzne typy webových stránok. Pre prvý projekt vyberte šablónu Empty Site a pomenujte projekt, napríklad PrvyWeb. Vytvorenie projektu zo šablóny Teraz nastal čas na zoznámenie sa s používateľským rozhraním vývojového prostredia WebMatrix. V hornej časti obrazovky nástroja WebMatrix je osvedčený panel nástrojov a pás kariet (v originálnej 8 terminológii Ribbon), ktorý dôverne poznajú používatelia kancelárskeho balíka Microsoft Office 2010 (2007). Panel obsahuje tlačidlá podľa vybraného pracovného priestoru. V ľavej dolnej časti je okno s tlačidlami na výber pracovného priestoru, teda režimu práce. Okno obsahuje tlačidlá: Site, Files, Databases, Reports. Kliknutím na symbol šípky môžete okno s tlačidlami pre výber pracovného priestoru zminimalizovať Vpravo je pracovná plocha, kde v závislosti od režimu môžete robiť návrh používateľského rozhrania, upravovať súbory, zobrazovať štatistiky a tak ďalej. V dolnej časti je panel oznámení. Vytvorenie projektu zo šablóny Vytvorenie webovej stránky Prepnite WebMatrix do režimu Files. Projekt zatiaľ neobsahuje žiadne stránky. Na paneli nástrojov v skupine Files kliknite na tlačidlo New a v menu vyberte položku New File... 9 V režime Files môžete pridávať do svojho projektu súbory Jadrom prvej cvičnej webovej aplikácie bude stránka, na ktorej bude kód s Razor syntaxou. Stránky obsahujúce Razor kód majú špeciálnu príponu v závislosti od použitého programovacieho jazyka: cshtml pre programovací jazyk C#, vbhtml pre programovací jazyk VisualBasic. Rozdiely v syntaxi obidvoch programovacích jazykov nie sú príliš rozdielne. V tejto publikácii sa zameriame na moderný a perspektívny programovací jazyk C#. Poznámka: V novo vytvorenom projekte vo WebMatrixe sa objavil súbor robots.txt. Ako sa dá vydedukovať z názvu, jeho účelom je zjednodušiť fungovanie internetových vyhľadávačov. Tento súbor vo verzii Beta 3 nástroja WebMatrix nebol a v novej verzii sa nedá prehliadnuť, lebo je to vlastne jediný súbor v novovytvorenom projekte. Niekto chce dosiahnuť aby vyhľadávače na jeho stránkach lepšie fungovali, iní zasa chcú zabrániť aby im roboty korzovali po ich privátnych stránkach. Viac podrobností nájdete na Vyberte typ súboru CSHTML a pomenujte hodefault.cshtml. Ponuka typov súborov 10 CSHTML je špeciálny typ webovej stránky používaný vo WebMatrixe. Okrem štandardného HTML kódu klasickej webovej stránky, a JavaScript kódu môže tiež obsahovať špeciálny kód s Razor syntaxou. WebMatrix vytvorí stránku a otvorí ju v prostredí editora. Stránka obsahuje základné tagy HTML stránky, zatiaľ bez Razor príkazov. !DOCTYPE html html lang= en head meta charset= utf-8 / title /title /head body /body /html Inteligentný pomocník Intellisense pomáha pri tvorbe HTML kódu Na prvej stránke sa pokúsime niečo vypísať. Toto je jednoduchá statická úloha, takže by ste ju mohli realizovať výhradne pomocou HTML kódu. Aby sme urobili prvý krok do sveta ASP.NET, zrealizujeme túto stránku tak, že naplníme dve premenné textovými reťazcami a vypíšeme ich obsah: html lang= en head meta charset= utf-8 / title prvá webová stránka /title /head var snadpis = Hello World var stext = Ahojte všetci! ; /body /html Spustenie webovej aplikácie Hoci webové aplikácie bežne používate, nemusíte sa starať o ich beh a vo väčšine prípadov ani netušíte kde je server na ktorom vaša aplikácia beží umiestnený. Teraz je všetko inak, webová aplikácia bude pre účely testovania a ladenia spustená priamo na vašom počítači. Pomocou ikony so symbolom diskety v hornom ráme nástroja WebMatrix uložte vykonané zmeny a na paneli nástrojov aktivujte tlačidlo Run. 11 Prvé spustenie webovej aplikácie z prostredia WebMatrix Poznámka Pred spustením aplikácie sa uistite, že máte v ľavom paneli nástroja WebMatrix vybranú stránku, ktorú chcete testovať. WebMatrix spustí vybranú stránku a to aj v prípade ak práve upravujete inú stránku. Ak nie je žiadna stránka vybraná WebMatrix sa pokúsi spustiť implicitne predvolenú stránku default.cshtml. Ak nenájde ani stránku s týmto názvom, prehľadávač zobrazí chybu. Zobrazenie stránky aplikácie v prehľadávači webového obsahu Spustenie webovej aplikácie je značne odlišné od behu aplikácií ktoré na svojich počítačoch bežne spúšťate, či už pomocou menu, alebo ikon na pracovnej ploche. Webové aplikácie bežia reálne na serveri, preto pri ich spustení na lokálnom počítači je potrebné zabezpečiť funkcie takéhoto servera. Našťastie WebMatrix pri spustení aplikácie toto všetko zabezpečí automaticky. Aktivuje webový server (IIS Expres) a jeho prostredníctvom zobrazí vašim kódom vygenerovaný obsah stránky v prehľadávači webového obsahu. Všimnite si v prehľadávači adresu URL Spustenie takéhoto servera, ktorý je, integrálnou súčasťou vývojového prostredia je indikované ikonou v pravom dolnom rohu obrazovky operačného systému v blízkosti ikony času. 12 Ikona webového servera IIS Express Hoci ste sa zatiaľ nezoznámili s Razor syntaxou, skúste nasledujúci príklad, ktorý vypíše aktuálny dátum a čas: body h1 hello World stránka /h1 p dátum a /body Aktuálny dátum a čas sa na stránke zobrazí v tvare: Dátum a čas: :27:50. Teraz možno klasici skeptici očakávajú, že po tomto klasickom príklade výpisu budeme pokračovať formátovaným výpisom obsahu premenných, výpisom v cykle a podobným klasickým finesami. Pozrite sa však pozornejšie na rok v dátume. V roku 2011 sa od webových stránok očakáva podstatne viac a medzi základné funkcie patrí četovanie, pripojenie sa na sociálne siete, zdieľanie obsahu... Takže absolvujete len úvod do syntaxe Razor a návod na inštaláciu doplnkov a ste pomerne dobre vyzbrojení pre tvorbu aplikácií využívajúcich sociálne siete. 13 Ľahký úvod do Razor syntaxe Razor je syntaktický predpis pre vkladanie kódu, ktorý sa vykonáva na serveri do webovej stránky. Kód bežiaci na serveri môže dynamicky vytvárať obsah interpretovaný vizuálne v klientovom prehľadávači webových stránok. Ak sa spoliehate na intuíciu, môžete túto kapitolu preskočiť a pustiť sa do tvorby stránok podľa vzorových príkladov a sem sa vrátiť len v prípade nejasností. Stránky obsahujúce Razor kód majú špeciálnu príponu v závislosti od použitého programovacieho jazyka: Cshtml pre programovací jazyk C#, Vbhtml pre programovací jazyk VisualBasic. Ak server spracováva stránky s týmito príponami, spustí kód, ktorý je označený syntaxou Razor a potom pošle výsledok na stránku do prehľadávača. Razor je z hľadiska architektúry situovaný nad vrstvami.net Framework a ASP.NET Nový typ stránok s Razor syntaxou s príponami (.cshtml resp. vbhtml) je možné na serveri kompilovať priamo, bez nutnosti prechodu cez ASP.NET runtime. Razor vám umožní jednoduchý a intuitívny prechod medzi kódom a značkovacím jazykom, porovnajte jeho jednoduchosť s ASP.NET webovými formulármi alebo PHP. 14 Porovnanie syntaxe ASP.NET WebForms (hore), PHP (v strede) a RAZOR (dole) Razor výrazy sa začínajú za ktorým môže nasledovať jednoriadkový výraz, alebo viacriadkový blok zložených var ncislo = var stext = Ahoj ; Ako uvidíte v príklade, Razor premenné začínajúce môžu byť kdekoľvek v HTML kóde: p hodnota číselnej premennej /p p text v textovom reťazci Blok kódu v zložených var spozdrav = Ahojte všetci! ; var dtden = DateTime.Now.DayOfWeek; var soznam = spozdrav + Dnes je: + dtden; Vo vnútri bloku kódu je potrebné oddeľovať jednotlivé príkazy bodkočiarkou. Výpis pomocou vyššie uvedených Razor výrazov 15 Vo vnútri Razor kódu môžete používať HTML tagy, { p ahoj už sa poznáme teraz a na túto stránku ste prišli ces postback! /p else { p ahoj, si tu prvý krát, teraz je: br Komentáre K dobrým zvykom úspešných programátorov patrí komentovanie jednotlivých blokov kódu, aby ste mohli aj po niekoľkých mesiacoch nadviazať na svoju prácu. Komentovanie kódu je taktiež nutným predpokladom tímovej spolupráce viacerých ľudí nad jedným projektom. Razor syntax umožňuje používať jednoriadkové a viacriadkové komentáre. Jednoriadkový Jednoriadkový komentár. Viacriadkový Viacriadkový komentár. druhý riadok. Vo vnútri Razor blokov je možné využívať pre komentár syntax príslušného programovacieho // jednoriadkový komentár. var npocet = 33; /* Viacriadkový komentár Podľa syntaxe programovacieho jazyka C#. */ Používanie premenných Do premenných serverového kódu sa môžu ukladať rôzne dočasné údaje a takto je možné prekonať jednu z najväčších nevýhod HTML protokolu bezstavovosť. Premenné môžu byť rôznych typov, číselné, textové, dátumové... var ncislo = var stext = var dtaktrok = DateTime.Now.Year; 16 Razor syntax v programovacom jazyku C# rozlišuje veľké a malé písmená, takže nasledujúci kód vytvorí dve rôzne var NazovProduktu = Mydlo ; var nazovproduktu = Mydlo ; Razor syntax v programovacom jazyku VisualBasic veľké a malé písmená nerozlišuje. Cyklus Pre vykonávanie opakovaných činností slúži cyklus, pričom v každej iterácii môže byť činnosť modifikovaná napríklad aktuálnou hodnotou riadiacej premennej cyklu. V príklade sa hodnotou tejto premennej riadi veľkosť i = 10; i 17; i++) { p + pt ) veľkosť fontu tohoto Výpis pomocou cyklu Vetvenie kódu na základe podmienky Základnou programovou konštrukciou pre dynamiku aplikácie je podmienka, na základe jej vyhodnotenia sa program následne vetví. Najjednoduchšie sa podmienka vytvorí pomocou príkazu if. var bdatum = false; if(bdatum) else { text - - - /text 17 V ďalšom príklade sa vyhodnotí hodnota stavovej premennej IsPost, podľa ktorej sa zistí, či bola stránka otvorená prvý krát, alebo po stlačení var oznam = ; if(ispost) { oznam = Stránka bola zobrazená pomocou tlačidla. ; else { oznam = Prvé zobrazenie tejto stránky. ; !DOCTYPE html html head /head body form method= post action= input type= submit name= potvrd value= potvrď / /form /body /html Vetvenie programu na základe podmienky. Formulár na zadávanie údajov Cieľom tejto state je interakcia medzi používateľom a webovou aplikáciou, ktorá spočíva v spracovaní údajov zadaných používateľom prostredníctvom webových formulárov. Následne sa tieto údaje spravidla spracujú pomocou aplikačného kódu, prípadne uložia do databázy. Najskôr ukážeme príklad jednoduchého if (IsPost) { string smeno = Request[ Meno ]; int nvek = Request[ Vek ].AsInt(); string shobby = Request[ Hobby ]; text Zadané údaje: br /
Related Search
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks