Tvorba Web 2.0 aj pre začiatočníkov

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. Každý chce nielen získavať informácie a konzumovať zábavu, ale aj komunikovať navonok, teda zdieľať zážitky a názory. S postupným rastom technologických možností stúpa aj náročnosť na interaktivitu a grafický dizajn. Sú to práve nové technológie Webu 2.0, ktoré pomáhajú stierať rozdiely medzi stránkami vytvorenými profesionálnymi a laickými tvorcami. Do popredia sa dostáva nápad a kreativita. Ak tieto dva základné predpoklady máte, potrebujete už len dobrý nástroj na vytváranie webových stránok.

WebMatrix je vývojové prostredie typu all-in-one, takže po jeho nainštalovaní máte k dispozícii všetko potrebné na vytváranie webových aplikácií vrátane webového servera na ladenie aplikácie a databázy na platforme SQL Server Compact, ktorá je v prípade potreby súčasťou aplikácie. Vývojové prostredie si môžete zadarmo stiahnuť na adrese http://www.microsoft.com/web/webmatrix. Okrem novej zjednodušenej syntaxe začiatočníci určite ocenia aj súpravu knižníc na implementáciu spolupráce so širokou paletou webových služieb a sociálnych sietí. Napríklad prepojenie vašej aplikácie s Facebookom vytvoríte na niekoľko kliknutí.

Nová zjednodušená syntax
Najvýznamnejšia novinka je nová syntax Razor na tvorbu aplikačnej logiky. Jej základné princípy vysvetlíme na praktickom príklade, preto bude najlepšie Web Matrix nainštalovať a vytvoriť si prvý vlastný projekt. Začiatočníkom odporúčame vytvoriť projekt zo šablóny Empty Site.

Vytvorenie projektu aplikácie.

Používateľské rozhranie vývojového prostredia WebMatrix využíva osvedčený panel nástrojov a pás kariet z kancelárskeho balíka Office. V ľavej dolnej časti obrazovky môžete prepínať mód práce. Návrh stránky prebieha v režime 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... Stránky obsahujúce kód Razor majú špeciálnu príponu v závislosti od použitého programovacieho jazyka: cshtml pre C# a vbhtml pre Visual Basic. V úvodnej aplikácii naplníme dve premenné textovými reťazcami a vypíšeme ich obsah:

@{ var sNadpis = "Môj pokus o webovú aplikáciu"; }
@{ var sText = "Ahojte všetci!"; }
<h1>@sNadpis</h1>
<p>@sText</p>

 

Vývojové prostredie Web Matrix odlišuje kód Razor od ostatného kódu (HTML, JavaScript...) podfarbením

Aplikáciu spustíte pomocou tlačidla Run. Na účely testovania a ladenia bude spustená priamo na vašom počítači. Teraz sa môžeme oboznámiť so základnými princípmi syntaxe Razor, ktorej výrazy sa začínajú znakom @, za ktorým môže nasledovať jednoriadkový výraz alebo viacriadkový blok kódu @{} v zložených zátvorkách. Ako vidíte v príklade, premenné Razor začínajúce sa znakom @ môžu byť kdekoľvek v kóde HTML. Môžete použiť aj blok kódu v zložených zátvorkách:

@{ 
  var sPozdrav =
"Ahojte všetci!"; 
  var dtDen =
DateTime.Now.DayOfWeek; 
  var sOznam = sPozdrav +
" Dnes je: " + dtDen; 
} 
<p>Oznam: @sOznam</p>

 
Vnútri kódu Razor môžete používať tagy HTML, napríklad:

@if(IsPost)
{
   <p>Ahoj už sa poznáme teraz je:
@DateTime.Now a na túto 
     stránku ste prišli cez postback!</p>
} 
else 
{
   <p>Ahoj, si tu prvýkrát, teraz je:
<br /> </p> @DateTime.Now
} 

Premenné môžu byť rôznych typov – číselné, textové, dátumové... Príklad:

@{ var nCislo = 49; }
@{ var sText = "Ahoj"; }
@{ var dtAktRok = DateTime.Now.Year; }

Na 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.

@for(var i = 10; i < 17; i++)
{
  <p
style="font-size: @(i + "pt")">Veľkosť fontu tohoto
textu: @i</p>
}

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. Príklad:

@{
  var bDatum = false;
  if(bDatum){@DateTime.Today;}
  else {<text>- -
-</text>}
}

Interakcia medzi používateľom a webovou aplikáciou sa často odohráva prostredníctvom formulárov. Potom sa tieto údaje spracujú, prípadne uložia do databázy. Ukážeme príklad jednoduchého formulára.

@{
  if (IsPost) {
    string sMeno =
Request["Meno"];
    int nVek =
Request["Vek"].AsInt();
    string sHobby =
Request["Hobby"];
    <text>  
    Zadané údaje: <br
/>
     Meno: @sMeno <br
/>
     Hobby: @sHobby<br
/> 
    </text>
  }
}
<html lang="en">
  <body>
   <form
method="post" action="">
    <fieldset>
     <legend>Nový
člen</legend>
     <div>
      <label
for="Meno">Meno:</label>
      <input
type="text" name="Meno" value="" />
     </div>
      <label
for="Hobby">Hobby:</label>
      <input type="text"
name="Hobby" value="" />
     </div>
     <div>
      <input
type="submit" value="Pridaj" class="submit" />
     </div>
    </fieldset>
   </form>
   </body>
</html>

 

Príklad jednoduchého formulára

Prepojenie na Facebook alebo Twitter na niekoľko riadkov kódu
Jedna z najčastejšie využívaných funkcií siete Facebook je tlačidlo Páči sa mi to, pomocou ktorého ľudia označia, že sa im niečo na vašej stránke páči. Facebook môžete využívať, aby sa ste sa spojili so svojou komunitou, prípadne zákazníkmi a niečo (názor, hobby, produkt...) komunikovali a propagovali.

<body>
  <p>Páči sa mi
to:</p> @Facebook.LikeButton() 
  <p>Stránku
odporúčajú:</p> 
   @Facebook.LikeButton( 
   href:
"http://www.asp.net/webmatrix", 
   action:
"recommend", 
   width: 250, 
   buttonLayout:
"button_count", 
   showFaces: true, 
   colorScheme:
"dark") 
</body>

Hodnotenie obsahu cez Facebook

Do svojej webovej aplikácie môžete pridávať príspevky z mikroblogov populárneho Twittera k danej téme.

<body>
 <table>
  <tr>
   <td>Twitter -
profil</td>
   <td>Twitter -
téma</td>
  </tr>
  <tr>
   <td>@Twitter.Profile("lubolacko")</td>
   <td>@Twitter.Search("Windows
Phone 7")</td>
  </tr>
 </table>
</body>

 

Prepojenie na Twitter

Vzorové projekty užitočných aplikácií
Aby webová aplikácia oslovila používateľa, musí byť stmelením obsahu, interaktivity a dizajnu. Zdalo by sa, že tu začiatočník skončí. Práve naopak, šablóny vzorových projektov vo WebMatrixe umožňujú vytvárať komplexné interaktívne webové aplikácie aj začiatočníkom, pričom pomerne bohatú funkcionalitu dosiahnu bez akéhokoľvek programovania.

Šablóna StarterSite – jedna z najčastejšie sa vyskytujúcich úloh pri riešení každej aplikácie je vytvorenie používateľského rozhrania na prihlásenie sa používateľa k aplikácii a veci s tým súvisiace, teda registrácia nových členov. Na uľahčenie týchto rutinných záležitostí obsahuje WebMatrix StarterSite šablónu, kde sú už implementované prakticky všetky funkcie súvisiace s prihlasovaním a registráciou nových členov.

Šablóna Gallery (Fotoalbum) – je nielen užitočná, ale zároveň je aj odpoveďou na otázku, ako vytvoriť graficky bohatú aplikáciu vo vývojovom prostredí bez možnosti grafického návrhu. Aplikácia je funkčná hneď po vytvorení. Návštevníci si môžu snímky prezerať a po zaregistrovaní aj komentovať.

Šablóna Bakery – možno vám pomôže rozbehnúť na internete svoj startup biznis. Je to klasická aplikácia typu internetového obchodu, ktorá umožňuje predávajúcemu prostredníctvom webových katalógov ponúkať svoj tovar a kupujúcim zasa nakupovať a, samozrejme, nejakou formou za tovar platiť.

Na hlavnej stránke aplikácie je aktuálna ponuka – okrem aplikácií typu e-commerce je táto šablóna rovnako vhodná aj na výmenné aktivity medzi zberateľmi (známky, zápalkové škatuľky)

Používateľ v objednávacom formulári uvedie doručovaciu adresu, kam treba tovar doručiť, a mailovú adresu na zaslanie účtu. Platba sa dá vyriešiť napríklad na dobierku. Zákazníkovi príde potvrdenie objednávky mailom, ktorý slúži aj ako elegantné riešenie na ukladanie objednávok.

Slovenské šablóny sú k dispozícii na adrese http://msdn.microsoft.com/sk-sk/ee404903#rozne.

Zdroj: PC REVUE 8/2011

---

 

---