C# - Internetes alkalmazás fejlesztés alapjai

forráskód letöltése
Mostani cikkünkben elkezdünk foglalkozni az internetes alkalmazások fejlesztési lehetőségeivel a Visual Studio.NET keretein belül. Első cikkünkben az alapokkal kezdjük, megvizsgáljuk mi kell a kezdeti lépésekhez, milyen szoftver konfigurációra van szükségünk ahhoz, hogy fejleszthessünk, használhassuk az ASP.NET-et.
Az ASP.NET használatához Windows 2000, vagy magasabb verzió szükséges, illetve ha NT 4-ünk van, akkor az is megfelel, ha a 6a szerviz csomag telepítve lett. Az sem árt, ha telepítjük a Microsoft .NET Framework-öt, melyet Windows 95-től, illetve Windows NT 4 SP6a-tól felfelé bármilyen operációs rendszerre is telepíthetünk. Fejlesztéseink bizonyos szakaszaihoz szükséges lehet még a web szerverünkön a FrontPage Server Extension is. Jó, ha van egy web szerver is a közelben egy működő IIS-el, bár megoldható az is, hogy a lokális gépen fejlesszük alkalmazásunkat.
Mellékelt példa fordításához célszerű egy virtuális könyvtárat létrehozni a web oldalainkhoz és oda bemásolni az állományokat, majd onnan megnyitni a Visual Studio.NET-tel.
Nézzük most lépésről lépésre, miként is jött létre a mellékelt példa. A példa készítését egy Windows 2000 Professional-on végezzük, ahol a Visual Studio.NET is található. A helyi hálózaton elérhető egy Windows 2000 Server az IIS-el, melyre feltelepítettük a szükséges szoftvereket.
Ezek után egy új web alkalmazás létrehozásához válasszuk a File – New – Project menüpontot, majd a Visual C# Projects elemei közül a Web Applicaiton elemet. A Name mezőbe megadhatjuk a projektünk nevét, ami maradhat az alapértelmezett WebApplicaiton is. A Location mezőben pedig megadható, hogy melyik gépen legyen létrehozva alkalmazásunk. Itt jelen esetben a http://servername-t adjuk meg, ahol a „servername” a helyi hálózaton található szerver neve, amelyiken fut az IIS. Az Ok gomb lenyomásakor létrejön a megadott számítógépen egy új könyvtár, méghozzá a web oldalaink között, vagyis alapértelmezésben a C:\Inetpub\WWWRoot könyvtáron belül a Name mezőben megadott névvel. Ebbe a könyvtárba kerül az összes szükséges állomány, mely a projektünkhöz kell. Mivel e könyvtár virtuális web könyvtárként is be lesz jegyezve az IIS-be, így majdan a http://www.xy.hu/WebApplication01 címzéssel el is érhetjük az oldalunkat egy böngészőben.
Projektünkben a létrehozás pillanatában már jó néhány állomány létrejön. Számunkra most a WebForm1.aspx lesz az érdekes. Ezt megnyitva kapunk egy üres lapot, melyre tekinthetünk úgy is, mint egy hagyományos alkalmazás Form-jára. Most a ToolBox lapjairól húzhatunk komponenseket erre az oldalra. Válasszuk a ToolBox HTML lapját és tegyünk fel egy Grid Layout Panel-t Drag and Drop-al az üres lapra. Ekkor kapunk egy a Form-hoz hasonló lapot, melyen belül tetszőleges helyre elhelyezhetjük majd a további objektumainkat. Válasszuk most a ToolBox Web Forms lapját. Tegyünk fel innen egy Image, egy Label és egy HyperLink komponenst.
Az Image1 komponenssel egy képet jeleníthetünk meg a web oldalunkon. Ehhez a kép elérhetőségi címét és nevét meg kell adnunk a kép ImageUrl property-jében. Mivel a kép állományát ugyanott helyezzük el, ahol a WebForm1.aspx található, így itt most elegendő az állomány nevet megadni.
A Label1 komponens feliratát a Text property-ben adhatjuk meg.
A HyperLink1 komponens felirata szintén a Text property-ben adható meg, míg azt a címet, amelyre ugrani szeretnénk a kiválasztáskor a NavigateUrl property-ben adhatjuk meg.
E három komponenst a Grid Layout Panel-en belül bárhol elhelyezhetjük. A majdan megjelenő web lapon ugyanezen a pozíción lesznek láthatóak az objektumaink.
Ha kíváncsiak vagyunk az eddig elkészül web oldal HTML kódjára, akkor a lapszerkesztő alján lévő Design gombról váltsunk át a HTML gombbal a HTML forráskódra, melyet akár manuálisan is szerkeszthetünk. Utóbbi esetben persze nem árt, ha vigyázunk arra, hogy az automatikusan létrehozott kódon ne változtassunk úgy, hogy az hibához vezessen.
Nézzük most azt, hogy miként tudunk stílusokat használni. Ehhez szükségünk lesz egy Style Sheet (CSS) lapra. Válasszuk a Project – Add New Item menüpontot. A megjelenő ablakból a Local Project Items elemei közül keressük elő a Style Sheet elemet. A Name mezőben adhatunk egyedi nevet a létrehozandó CSS állománynak.
A létrehozás után automatikusan megjelenik a Style Sheet toolbar is. Ezen olyan nyomógombok találhatók, melyek a manuális szerkesztést helyettesítik. Ez persze nem jelenti azt, hogy a stílus lapunkat nem szerkeszthetnénk kézzel.
Új elem beszúrásához válasszuk az Add Style Rule gombot. A megjelenő ablakban választhatunk egy már meglévő HTML elemet, mint például a BODY, TABLE, stb., vagy akár egy új stílus nevet is létrehozhatunk. Létrehozás után megjelenik a felvett elem kerete:
  BODY
  {
  }
vagy
  .f18
  {
  }
Ha ráállunk az egyikre és a Build Style gombot választjuk, akkor megjelenik egy olyan ablak, melyben tetszés szerint megadhatjuk az új stílus tulajdonságait. Ezek megadása és az ablak bezárása után a választott tulajdonságok megjelennek az adott stílusnál is szövegesen:
BODY
{
  font-size: 8pt;
  font-family: Verdana;
}
.f18
{
  font-weight: bold;
  font-size: 18pt;
  color: #339900;
  font-family: Tahoma, Verdana;
}
A stílusok létrehozását, módosítását így igen egyszerűen elvégezhetjük. Nézzük most, hogy miként tudunk felhasználni egy saját, egyedi stílust, mint például az imént létrehozott f18.
Térjünk vissza a WebForm1.aspx-re, majd váltsunk át a HTML kód nézetre. A HTML oldalunk elejére a HEAD részbe szúrjuk be a következőt:
<link href="StyleSheet1.css" rel=stylesheet type=text/css>
Ezzel megtettük a hivatkozást az adott stílus lapra. Most már csak fel kell használnunk a benne lévő stílusokat.
Térjünk vissza Desing nézetre és válasszuk a Label1 komponenst, majd a CssClass property-jébe adjuk meg a hozzárendelni kívánt stílus nevét, az f18-at.
Ha a Properties ablak tetején lévő legördíthető listából a DOCUMENT elemet választjuk, akkor a megjelenő tulajdonságok az adott web oldalra vonatkoznak. Nézzük most azt, hogy itt milyen lehetőségeink vannak.
Megadhatjuk például az oldalon lévő linkek színeit:
  • aLink – aktív link színe
  • link – alaphelyzetben lévő link színe
  • vLink – a már megtekintett linkek színe
A leftMargin, rightMargin, topMargin és bottomMargin property-ken keresztül a lap négy szélén lévő margó méretét befolyásolhatjuk.
Ezek hatására a HTML kód az alábbiak szerint módosul:
<body bottommargin=0 leftmargin=0 topmargin=0 rightmargin=0 alink=red link=blue>
A keywords property-ben kulcsszavakat rendelhetünk a web oldalunkhoz a keresők számára. Ennek hatására a web oldalra az alábbi kód kerül beillesztésre:
<meta name=keywords content="Visual Studio, C#">
A background property-ben egy háttérképet adhatnánk meg, míg a bgColor property-ben a lap háttérszínét szabályozhatjuk.
A title property adja a lap fejlécének szövegét, mely a web oldalra az alábbi kódot illeszti:
<title>Software Online</title>
Ennyi előkészítés után most nézzük meg élesben is eddigi alkalmazásunkat. Ehhez fordítsuk le azt a Compile gombbal, majd kattintsunk jobb gombbal a Solution Explorer ablak WebForm1.aspx elemén és válasszuk a View in Browser menüpontot. Ennek hatására megnyílik egy Preview ablak, melyben mintha csak az Internet Explorer-t használnánk, megjelenik a web oldalunk.
Ha szeretnénk egy külső böngészőből is elérni az alkalmazásunkat, akkor elindítása után a következő címet írjuk be: http://servername/WebApplication01/WebForm1.aspx, vagy http://www.xy.hu/WebApplication01/WebForm1.aspx, ahol a servername a web szerver gépünk neve, illetve a www.xy.hu az adott web szerverhez tartozó domain név.