Andmebaasipõhiste veebirakenduste arendamine Microsoft Visual Studio
ja SQL Server ’i baasil

ASP.NET
Tallinn
2011

Sisukord

ASP.NET 4
Põhivõimalused 5
Lihtsa veebilehestiku loomine HTML keele abil 5
Astmelised laadilehed (CSS) – cascading style sheets 28
Programmeeritavad veebilehed 39
Andmebaasipõhise veebirakenduse loomine 51
Ülesandeid 55
Andmetabeli näitamine veebilehel 55
Ülesandeid 58
Andmete lisamine 58
Ülesandeid 60
Lehe kohendamine 60
Ülesandeid 67
Järjestamine 67
Ülesandeid 71
Otsimine 71
Ülesandeid 74
Konfiguratsioonifail web.config 75
Edasijõudnutele 120
Veebi kopeerimine 120
Programmi koodi paigutamine eraldi faili 121
Seadistamine (Web.config) 123
Rakenduse jälgimine ( Trace ) 124
Vigade haldamine 128
AJAX 133
Lokaliseerimine 135
Master Pages 140
Elemendid lehel 142
Veebilehtede kujundamine kasutades nägusid ( Themes ) 157
Väärtuste tööaegne meelespidamine 159
Veebisaidi turvamine 163
Andmetega manipuleerimine 171
WebParts 181
Veebiteenused 182
IIS 188
Kokkuvõte 189
Lisad 190

ASP.NET

ASP.NET on .NET raamistiku moodul, mis võimaldab sul luua veebirakendusi, kasutades sealjuures minimaalselt koodi.
ASP.NET ei ole mitte ASP ( Active Server Pages) uus versioon , vaid täiesti uus lähenemine veebirakenduste loomisele. Erinevalt ASPist ja ka PHPst, mis on peamiselt skriptimise keeled, on ASP.NET lehtede taga olev kood täielikult objektorienteeritud. Seega tuleks ASP. NETi võrrelda mitte PHP vaid JAVA rakendustega. Kasutaja saab, kuid ei pruugi täpselt mõelda HTMLi eripärade peale. Pigem määrab ta, milliseid komponente ta soovib veebilehel näha ning need näidatakse, arvestades vajadusel kasutaja veebilehitseja eripäradega – eriti kehtib see mobiilseadmete kohta.
Koodi ASP.NET lehtede tarbeks võib kirjutada ükskõik millises .NET keeles. Lisaks veebivormidele on võimalik oma rakendust veebis serveerida ka läbi veebiteenuste.
Ka ASP. NETist on olemas mitmeid versioone. Kui võrrelda ASP.NET versioone 1.1, 2.0, 3.5 ja 4.0 siis võib öelda, et palju on jäänud samaks, kuid üht teist on ka ümber tehtud ja lisatud. Hea uudis on see, et kõik vanad konstruktsioonid töötavad, kuid juurde on tulnud mitmed uued meetodid. Tänu provaideri( teenusepakkuja ) põhisele lähenemisele on rakenduse loomine alates 2.0 versioonist muutunud märksa abstraktsemaks ja lihtsamaks. Palju koodi on viidud lehekülje tagustelt koodilehtedelt teenusepakkujatesse. ASP.NET versioonis 3.5 on juurde tulnud toetus AJAXile (Asyncronious Java and Xml), mõned uued serveri kontrollid ning LINQ kasutamise võimalus. AJAX võimaldab andmeid lehel reaalajas muuta ilma, et peaks kogu lehte selle tarbeks uuesti laadima .
ASP.NET lehed koosnevad tekstifailidest, mida saab serveerida läbi IIS ( Internet Information Service ) virtuaalkaustade. Lehtede loomiseks sobivad kõik tekstiredaktorid. Abivahendeid usaldavale inimesele on kõige parem kasutada kirjutamiseks sellised abivahendeid, mis lehtede loomisel kiirendavad koodi kirjutamist lõpetades alustatud sõnu, kontrollivad jooksvalt süntaksit ning aitavad HTMLi loomisel. Üheks selliseks abivahendiks on Visual Studio . Ehkki palja "rumala" tekstiredaktoriga kirjutamisel on eeliseks lihtsus, siis nt Visual Studio Web Developer Expressiga on lootus ka algajal nõnda läbi saada, et ta paljudesse menüüdesse ära ei upu.

Põhivõimalused

Lihtsa veebilehestiku loomine HTML keele abil

Esimene veebileht

Kõige lihtsam veebirakendus koosneb ühest lehest. Veebilehtede levinumaks keeleks on HTML, mida veebilehitsejad mõistavad lugeda ning loetud teksti põhjal kasutajale lehe ette kuvada. Mitmete veebitehnoloogiate (ASP.NET, Java servlet, PHP, Python ...) tulemusena lehitsejasse saadetav tekst on ikkagi „puhas“ HTML, nii et osava peitmise korral ei pruugi veebisaidi vaatajal kuidagi võimalik olla kindlaks teha, millise tehnoloogia abil vastav lehestik on kokku pandud. Ning nagu varemalt kombeks ning praegugi lihtsamate, pidevat muutmist mitte vajavate lehtede puhul kasutatakse, võibki veebileht olla üks harilik HTMLi reeglitele vastav tekstifail, mida veebilehitsejas näidatakse. Mitmesugused tehnoloogiad on lihtsalt leidnud võimalusi, kuidas võimalikult mugavalt lehtedel olevad andmeid määrata vastavalt kasutaja soovidele. Lihtsaim HTMLi reeglitele vastav veebileht näeb aga välja järgmine:
Minu esimene leht
Tere maailm
Selle võib salvestada omale sobiva tekstiredaktoriga (nt. Notepad või ka vastinstalleeritud Visual Web Developer). Panna failile laiendiks .html (siis teab veebilehitseja, et vastavat teksti tuleb kujundada HTML-i reeglitele vastavalt), jätta meelde kuhu fail salvestati.
Edasi juba lehitsejas avada nagu tavalist kohaliku masina faili (failimenüüst ava). Tulemuseks leht, kus ülal pealkirjariba peal on lehe pealkiri ning allpool sisu osas lehe sisu.
Minu esimene leht
Tere maailm
Veidi lähemad seletused , et mida miski HTMLi lehe osa tähendada võiks.
Avakäsklus teatab HTMLi versiooni. Nii nagu nt. Wordi dokumentidel on versioonid 2.0, 6.0, 97, 2000, 2003, 2007 jne, nõnda ka HTML on oma arengu käigus muutunud. Kõiki eri versioone ja „murrakuid“ lugedes saaks neid kokku õite mitukümmend. Siit võib välja lugeda, et versiooniks on XHTML 1.0 Transitional – ehk siis 1999ndast ligi kümnendi püsinud kirjapanekuvorming.
Edasi hakkavad HTMLi käsklused. Märkide vahel olevate sõnadega antakse teada, mis nüüd tulemas on. Esimese elemendi nimeks ongi html, ehk siis lehitsejale teadmiseks, et tulemas htmli dokument. Juuresolev atribuut xmlns (xml namespace) näitab, millise nimeruumiga elemendid seotud on. XHTML 1.0 Transitionali puhul siis järgnev nimi: www.w3.org/1999/xhtml. Näeb välja väga hüperlingi moodi. Aga selline kuju võeti nimeruumide nimetuste puhul ette vaid selleks, et kogemata ei satuks mitmel eri firmal ette samanimelist nimeruumi. Kas vastavale lehele ka selgitav tekst andmete kohta pannakse – see on juba vajaduse ja viisakuse küsimus.
Veebilehe kood koosneb kahest suhteliselt iseseisvast osast. Ühe nimeks head (päis) ning teiseks body (sisu). Esimesse neist pannakse pealkiri (title) ning soovi korral lisaks igasugu muud andmed lehe kohta, mida otse näidata ei soovita. Näiteks lehe autor, märksõnad, kooditabel jm.
Minu esimene leht
Sisu osa lehel on kõigile nähtav. Lihtsamal juhul ongi siin paljas tervitav tekst, aga eks hiljem saab kujundust keerukamaks hakata muutma.
Tere maailm
Nagu näha, siis kõik alustavad elemendid peavad kusagil ka lõppema. Lehe sisuosa tähistav element body lõpeb lõpetava tähisega ning dokumendi enese .
Et suurem lehekülg võib ülesehituselt päris keerukaks minna, siis on vaja abivahendeid kontrollimaks, kas kõik ikka reeglitele vastab. Enamik lehitsejaid suudab küll mõningad (trüki)vead ka ise ära aimata ning siiski lehe viisakalt välja näidata. Kuid sealjuures võib hakata tekkima probleeme. Näiteks, et kas tekstid olid mõeldud üksteise kõrvale või üksteise alla. Kui veebilehe looja on oma lehe validaatoris järgi kontrollinud, siis võib loota , et lehitsejad saavad sellest enamvähem sarnaselt aru. Ametlikuks veebilehe tehnilise korrektsuse kontrolliks on loodud teenus aadressil http://validator.w3.org . Seal võimalik kontrollida kas juba ülesriputatud lehe korrektsust, laadida üles fail või kopeerida olemasolev HTMLi kood otse tekstiaknasse. Lihtsa väikese koodi puhul, nagu siinne alustus, on viimatine võimalus ehk mugavaim. Kui mõni viga juhtub, antakse sellest teada. Muul juhul aga teatatakse uhkesti rohelisel kirjal, et sisestatud kood on reeglipärane.
Ülesandeid

• Tee näide läbi. Vaata tulemust.
  
• Lisa tervitusele hüüumärk. Salvesta ja vaata veebilehitsejas tulemust.
  
• Veendu, et kood valideerub.
  
• Tekita HTML-koodi sisse viga (nt. eemalda üks
• Paranda kood taas õigeks. Kopeeri validaatori antud „kvaliteedimärgi“ lõik oma koodi sisse lehe lõppu (enne ). Veendu, et pilt tuli nähtavale.
  

Visual Web Developer Expressi install

Tasuta kasutatavate Express -toodete jaoks tarviliku leiab aadressilt www.microsoft.com/express . Veebi jaoks mõeldud toodete installimiseks on võimalik kasutada Web Platform Installerit, kus saab „linnukestega“ ära märkida soovitud komponendid.
Veebiosas Install-nupule vajutades saab vastava programmi kätte.
Tasub programm omale alla laadida
ja siis käima panna. Üldjuhul küsitakse, kas oled nõus laetud programmi käivitama. Vastavalt operatsioonisüsteemile võib küsimine erinev välja näha, aga administraatoriõigusi ja käivitusluba on igal pool vaja. Edasi kulub mõningane aeg vajalike täienduste laadimisele ning siis saab asuda paigaldatavaid komponente valima .
Veebilehestiku loomiseks vajalikud üksused peaksid üldjuhul olema vaikimisi juba valitud.
Tahtes aga seda üle kontrollida ja soovi järgi täiendusi lisada, saab menüüdes liikuda ja valikuid täiendada. Peab hoolitsema, et vähemasti Web Developer 2010 Express ning SQL Server peale saaksid.
Edasi on masinal hulk tegemist- kümnekonnast minutist mõne tunnini sõltuvalt veebi ühenduskiirusest ning masina enese jõudlusest. Pärast .NET 4 raamistiku installi lõppu palutakse arvuti taaskäivitada. Samuti tuleb taaskäivitus ette ülejäänud komponentide paigalduse järel. Seadistuse juures rohelistest ribadest ülemine näitab, kui palju failidest on kohale tõmmatud, kui palju veel. Alumisest näeb, mida parajasti paigaldatakse.
Pärast paigalduse lõppu on kasulik tarkvara registreerida – siis saab temaga töötada kauem kui prooviajaks ette nähtud 30 päeva. Help-menüüst Register Product – selle peale võimalik oma MSNi tunnusega sisse logida ning vajalik võti saada. Kui tunnust pole, saab selle samas luua.

Esimene veebileht Visual Studio abil

Nagu näha, võib lehti luua igasuguse tekstiredaktori abil. Piisab teksti kirjutamisest, salvestamisest ning veebilehitseja mõistab lehel olevate HTMLi käskude ning nende vahel oleva sisu põhjal tulemuse välja näidata.
HTMLi käske on aga palju ning kõik neist ei pruugi sugugi kohe tuttavad olla. Samas aga enamik meist on kujundanud tekste mõne redaktori abil, kus saab valida värve, suurust jm. Seetõttu võib esmane lehtede loomine minna libedamalt mõne selleks tarbeks mõeldud vahendi abil. Et siin materjalis tutvustatakse Microsofti veebivahendeid, jääb paratamatult ette Visual Web Developer, mil ka veebilehtede koostamiseks omaette nurk olemas.
Uue veebilehestiku loomiseks tasub valida failimenüüst „New Web Site“. Ning et liialt palju lehti silmade kirjuks muutmiseks ette valmis ei genereeritaks, siis sobib valikust Empty Web Site. Allpool tasub märkida/luua kataloog , kuhu sisse loodav lehestik tuleb.
Toimetuse tulemusena tekkis masinasse vastav kataloog vaid web.config-nimelise failiga. Sellest ei tasu end segada lasta. Web Developeri paremas servas võiks olla nähtaval Solution Explorer . Või kui seda mingil põhjusel seal ei paista, siis võiks aidata View menüüst valitud Solution Explorer. Selles parem hiireklõps rakenduse kataloogi nime peal ning võib valida enesele veebilehestiku uue elemendi.
Sealt omakorda HTML-lehe ning lehe nimeks näiteks peokuulutus.html.
Tulemusena tekib HTMLi kest, mille sisse saab sobivaid teateid lisama hakata.
Üles ja vahele on hea siin sobiv teade panna – hiljem kipub see kergesti ununema. Edasi võib aga vaadete alt valida „Design“ ning saab lehte kujundada juba küllalt „tavalist“ redaktorit kasutades. Pealkirja tarbeks võib stiilide alt valida „Heading 1“ – selle tulemusena mõistetakse too rida juba ise nähtavamaks vormida.
Vahepeal võib huvi pärast lähtekoodi ehk Source vaatest piiluda, mis siis lehele pealkirja märkimise tulemusena tehti. Nagu näha, pandi sõna „Koolipidu“ h1-nimeliste käskluste vahele. Samuti pandi lõigumärk p (paragraph) ümber tavalisele nähtavale tekstile. Kui lõike oleks rohkem, siis saab nad lihtsalt nõnda üksteise järgi kirjutada, igaühele alustuseks ning
lõpetuseks.

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende
ristimise pidu. Kogu koolirahvas oodatud!
Lehe vaatamiseks tasub Web Developeris vajutada nupule, mille kirjelduseks „View in Browser“. Tulemuseks pannakse kohalikus masinas tööle veebiserver ning veebilehitseja ja loodud serveri kaudu saab nimetatud lehte vaadata. Iseenesest poleks palja HTML-lehe tarbeks serveri käivitamine hädavajalik – seda saab vaadata ka lihtsalt failina kohalikust kataloogist. Aga kuna Web Developer pigem mõeldud siiski iga kord serveris uuesti genereeritavate lehtede loomise tarbeks, siis on talle vastav võimalus sisse ehitatud. Nii võibki lehte rahumeeli imetleda aadressilt, mis hakkab tähekombinatsiooniga http – HyperText Transfer Protocol , järgneb masina nimi, kust lehte vaadatakse. Nimi localhost tähistab kohalikku masinat. Edasi pordi ehk värati number mis vajalik, et samas masinas olevad mitmed veebiühendust pakkuvad programmid omavahel tülli ei läheks. Siis juba rakenduse nimi ja sealt seest rakenduse sees oleva faili nimi.
Kui tahta loodud kuulutus teistele üle võrgu ka kättesaadavaks teha, tuleb see laadida lihtsalt kohta, kus see kõigile näha. Olgu selleks õpilasele koolivõrgus eraldatud veebiruum või ka mõnes avalikus serveris asuv koht. Eestis näiteks on levinud hot.ee nimeline veebikeskkond, kus rahumeeli igaüks saab omi HTML-faile hoida ja teistele näidata. Kel konto olemas, võib Kodulehe sektsiooni vastava faili laadida.
Edasi piisab juba veebilehitsejasse aadressi kirjutamisest ning igaüks võib üle võrgu vastavat teadet vaadata. Koolis saab viite panna nt. avalehele või siis huvilistele kirja teel kohale saata.
Tahtes hiljem ASP.NETi lisavõimalusi kasutada, võib püüda valida koha, kus vastavat majutusteenust pakutakse. Konspekti kirjutamise ajal jäi ühe mõistliku paigana silma aspspider.com - .NET 4.0 toega veebimajutuskeskkond. Algul tuleb end kasutajaks teha nagu ikka. Muidukatsetajate eemalhoidmiseks tuleb lehestikule koostada mõningane kirjeldus. Samuti tuleb registreerumissoov oma elektronpostiaadressilt kinnitada ning eraldi veel viis minutit oodata näitamaks, et keskkonna kasutamise huvi tõsine on.
Kui need sammud läbitud, siis lubatakse Control Panel-i ning File Manageri juurde, mille abil vajalikke faile serverisse laadida. Veebifailid tuleb panna kausta webroot. Praegusel juhul piisab vaid peokuulutus.html-ist.
Ning tuttav leht kaugeski serveris üleval .

Piltide kasutamine veebilehel

Veebileht võib piirduda ainult tekstilise teabega. Tahtes seda aga ilusamaks muuta, on pildid igati omal kohal. Kes autoriõigustega ei karda pahuksisse minna, saab omale veebist igasuguseid vahvaid kujutisi muretseda. Kui aga joonis ise kokku pandud, siis ei saa kellelgi muret olla, et seda üles panna ei tohiks. Siin kuulutuse juures joonistati kokku rebase moodi kujutis. Ning et seda oleks mugav veebilehestiku juures pruukida, siis salvestati olemasoleva HTML-failiga samasse kausta. Veebis enamvähem kindlapeale näidatavad vormingud on gif, jpg ja png. Esimene neist jooniste tarbeks, teine fotodele ning viimatine saab enamvähem kõigega viisakalt hakkama. Igasugu muude vormingute nagu näiteks bmp näitamine sõltub rohkem konkreetse veebilehitseja oskustest ja seadistustest. Siin salvestati siis peokuulutus.html-iga samasse kausta pilt nimega rebane .png.
Pärast pildi salvestamist ei ilmu see veel automaatselt failide juures nähtavale. Aga kui Solution Exploreris vajutada refresh-nuppu , siis peaks pildifaili nimi failide loetellu ilmuma.
Edasi võib pildi lihtsalt lehe teksti sees sobivasse kohta – näiteks lõppu – lohistada. Keskkond võib küsida alternatiivteksti – nende jaoks, kes mingil põhjusel pilte ei saa vaadata. Näiteks, kui tegemist mobiiliekraani kaudu veebi lehitsemisega ning kiiruse ja odavuse huvides on pildid välja lülitatud.
Kui lähtekoodi piiluda, siis on näha, et tekkis uus lõik (element nimega p). Lõigu sees pilt (element nimega img) ning viimasel küljes atribuutidena mõned andmed. Tähtsam neist pildifaili nimi, siin näites rebane.png . Teiseks kohustuslikuks väljaks pildi juures on toosama alternatiivtekst, mis sisestusaknast küsituna vastavasse kohta kirjutati. Kes veebilehte koodina kirjutab, mõistab selle sobivasse alt-kohta ka ise paigutada. Ning võibki pilti vaadata.
.style1 {
width : 134px;
height : 165px;

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende
ristimise pidu. Kogu koolirahvas oodatud!
Lähtekoodi lähemal piilumisel paistab, et kasutajale on tekitatud klass nimega style1, kus kirjas pildi mõõtmed. Ülal päiseosas stiil defineeritakse ning allpool pildi juures määratakse, et selle pildi klassiks on style1. Iseenesest kannataks selle osa ka koodi seest välja võtta ning lasta pildil olla oma loomulikus suuruses.
Kui nüüd pildiga kuulutus tahta kuhugi veebiserverisse nähtavale kohale üles panna, siis tuleb veebi kopeerida mõlemad failid. Nii pildifail kus rebane peal kui ka muudetud sisuga kuulutusfail, kus öeldud , kus kohal see pilt on vajalik lehel näidata. Enne kopeerimist tasub jälgida, et Web Developeris oleksid failid salvestatud. Pildi näitamine arendusvahendi lehel ei tähenda veel andmete jõudmist kettale.
Kui nüüd lehte uuesti vaadata, võiks pilt näha olla. Mõnel pool hoitakse veel vanu andmeid meeles – seega tuleb uue tulemuse nägemiseks mõnevõrra oodata. Või siis vajutada CTRL+ SHIFT +Reload.

Seotud lehed

Eelnevast näitest paistis , et paljaks tutvustuseks piisab ühest lehest. Rohkemate andmete põhjal pole aga põhjust kõike korraga näidata – vastavalt vajadusele saab lugeja valida omale parasjagu vajalikke lehti. Enne lehtede omavahelist sidumist tuleb aga need kõigepealt valmis teha – siis on mugavam teada anda, kust kuhu liigelda saab. Siin näites lisame peokuulutuse kõrvale lehe, kus kirjas, mille eest keegi korralduse juures vastutab. Ehk siis taas Solution Exploreris rakenduse kausta juures parem hiireklõps, sealt uus HTML-leht, mil nimeks vastutajad.html. Osa kujundust on mugav disainivaates teha. Et tulemuseks aga HTML-kood, siis ei saa disainivaates teha midagi sellist, mida otse koodi sisse kirjutada ei saa. Vastupidi aga küll. Üheks selliseks mooduseks on definitsiooniloend – sõna ja tema seletus. Ehk siin on sõna ehk definitsiooni rollis klassi number, selgituseks aga nende roll peol. Kogu selle loo ülesmärkimiseks on vaja kolme eri HTML-käsklust. Käsk dl ehk definition list teatab, et nüüd loetelu algab, nüüd lõpeb. Definition term ehk dt märgib seletatava termini, dd ehk definition määrab termini vaste. Ning nende abil saab iga klassi koos oma rolliga kirja panna.
Kood:
Peo vastutajad

Peo korralduse eest vastutajad

10. klass
Rebased
11. klass
Võistluste ja katsumuste läbiviijad
12. klass
Muusika eest hoolitsejad
Disainivaates on näha, et klassid on tõmmatud vasakule, nende juurde kuuluvad seletused aga mõningasse taandesse sinna kõrvale.
Kaks eraldi lehte olemas, nüüd siis tarvis nad omavahel siduda. Ja praegusel juhul soovitavalt mõlemat pidi – nii et avalehelt saaks vastutajate lehele ning viimasest omakorda tagasi avalehele. Viite loomiseks on vajalik teada anda kaks asja: mille peale vajutades viide käivitub ning kuhu vajutades satutakse. Viidetega ümber käimiseks on HTMLi sisse mõeldud element nimega a. Selline lihtne ühetäheline nimi, pärit sõnast anchor ( ankur ). Kõige lihtsam ühendusmoodus on avada avalehe lähtekood ning sinna sobivasse kohta lihtsalt vedada Solution Exploreri alt vastav fail. Ehk siis haaran hiirega kinni failinimest vastutajad.html ning sikutan ta lehe lähtekoodis kohta, kus võiks viide olla.
Tulemusena tekkis siis rida
vastutajad.html
Atribuudi href (hyperlink reference ) juures on kirjas avatava faili nimi. Elemendi a sisu (ehk siis ja vahelt on lehel nähtav tekst. Praegu seal lihtsalt sama faili nimi, sest lohistamise peale ei mõistnud veebiredaktor sinna paremat selgitust anda. Ise aga saab sinna mõnevõrra pikemalt kirjutada. Näiteks
Peo osaliste tööjaotus
mis siis veebilehel näeb välja ilusasti viitena
Terviklik avalehe kood siis
.style1 {
width: 134px;
height: 165px;

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende
ristimise pidu. Kogu koolirahvas oodatud!
Peo osaliste tööjaotus
Sarnane viide ka vastutajate lehe koodi
Peo vastutajad

Peo korralduse eest vastutajad

10. klass
Rebased
11. klass
Võistluste ja katsumuste läbiviijad
12. klass
Muusika eest hoolitsejad
Avalehele
ning juba võibki viiteid pidi kahe lehe vahet liikuma hakata.
Viited aga ei pea sugugi olema vaid paari kohaliku lehe vahel. Kuna veebiaadressi kaudu saab ligi lehtedele üle Interneti, siis piisab sobiva viite lisamisest oma lehele. Lihtsa failinime puhul saab lehitseja aru, et seda otsitakse kohalikust kataloogist. Kui aga aadressil on kirjas ees http:// (või mõni muu protokolli tähis nt. ftp), siis teatakse, et vastavat faili tuleb välisvõrgust otsima hakata. Sellest ka põhjus, miks viidetele tuleb nood http-d ette kirjutada. Muul juhul kipub lehitseja otsima kohalikust kataloogist faili nimega www.ilm.ee (või näiteks faili nimega microsoft.com) ja ei leia kuidagi.
Peo osaliste tööjaotus
Vaata ilmateadet ja vali enesele sobiv riietus!
Käsklus br tähistab reavahetust (break). Segadust kipub vahel tekitama, miks tol elemendil on kaldkriips lõpus, kui mõneski muus kohas kipub kaldkriips olema enne elemendi nime. Selgituseks, et siin on elemendi algus ja lõpp koos, st. tegemist on käsu
lühendatud kujuga. XHTML vastab XMLi reeglitele ning sealtkaudu nõutakse iga elemendi puhul algust ja lõppu. Elemendil a on näiteks sinna vahele põhjust atribuudina panna avatav aadress ning tekstilise väärtusena kasutajale nähtav jutt. Käsk br tähistab aga ainult reavahetust ning kui sinna täiendavaid andmeid (nt. rea kõrgust) ei lisata, siis piisabki vaid elemendi nimest. Mille taga kaldkriips annab teada, et sellega on vastava elemendi mõjupiirkond ühtlasi lõppenud.
Lõpetuseks siis lehitsejas töötav viidetega leht.
ja tema lähtekood
.style1 {
width: 134px;
height: 165px;

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende
ristimise pidu. Kogu koolirahvas oodatud!
Peo osaliste tööjaotus
Vaata ilmateadet ja vali enesele sobiv riietus!
Ülesandeid

• Loe näide mõttega läbi.
  
• Koosta korvpallivõistluse tarbeks kuulutusleht.
  
• Vaata lehte veebilehitsejas.
  
• Otsi või joonista lehele sobiv pilt.
  
• Koosta eraldi lehekülg, kus kirjas mängivate võistkondade nimed.
  
• Seo lehed omavahel viidetega.
  
• Pane avalehele viide korvpallireeglitele. Näiteks http://www.basket.ee/uploads/docs/korvpalli_reeglid.pdf
  
• Otsi korvpalliga seotud pilte. Koonda nad ühele galeriilehele. Lisa viide avalehelt galeriisse ja tagasi
  
• Koosta iga võistkonna kohta omaette väike tutvustav leht. Avalehelt tee viide lehele, kus asub võistkondade loetelu. Loetelust saab viite abil iga võistkonna juurde. Lisa ka tagasisuunas toimivad viited.
  
• Võimaluse korral pane loodud lehestik üles avalikult kättesaadavasse veebiserverisse. Veendu, et kõik on ilusti nähtav. Serveri puudumisel püüa lehestik nähtavaks saada sõbra arvutis või oma arvuti teises kataloogis.
  
• Tee oma lehestikus mõni täiendus (näiteks lisa üks korvpallimeeskond). Hoolitse, et uus versioon oleks nähtav ka ülespanekukohas.
  

Astmelised laadilehed (CSS) – cascading style sheets

Lehestiku kujundamisel on mitmesuguseid mooduseid. Üksiku väikese lehe puhul on tõenäoliselt lihtsaim variant graafilise redaktori abil sobivasse kohta suurused ja värvid määrata ning ongi valmis. Kui aga soovitakse, et mitmes kohas oleks sarnane kujundus – näiteks pealkirjad kindla suuruse ja paigutusega, viited üle kogu dokumendi ühtlased, siis pikema dokumendi või lehtede komplekti korral on viisakas vastavat tüüpi andmete kujundus eraldi ühes kohas määrata ning pärast seda määrangut kasutada. Liiatigi on nõnda võimalik kogu kasvõi suurema lehestiku põhikujundust hiljem muuta ilma, et peaks ükshaaval kõiki kohti läbi käima.
HTMLi varasemates versioonides oli hulk käsklusi kujundamise tarbeks. Leiti aga, et keelt tasuks lihtsamaks teha, kuna muidu on tülikas mobiilseadmetele ja muudele väiksema arvutusvõimsusega masinatele HTML-i lugejaid teha. Samas ei tahetud loobuda mitmekülgsetest kujundusvõimalustest. Nõnda koos XHTMLi tulekuga 1999ndal aastal otsustatigi enamik kujunduskäsklusi HTMLi keele seest välja visata või vähemasti ebasoovitavaks muuta ning selle asemel soovitatakse kasutada laadi - ehk stiililehtede võimalusi. Kui seade suudab sealseid kujundussoovitusi arvestada, siis ta arvestab . Kui mitte, siis mitte. Aga vähemasti põhitekst on igale kasutajale nähtav. Samuti on CSSi juures kujunduskäsklusi ja -võimalusi tunduvalt rohkem kui ennist HTMLi küljes.

Näite kopeerimine

Õppida ja katsetada aga on kindlam näite peal. Siis saab proovida ja vaadata, mis toimub. Võtame aluseks eelmises peatükis valminud koolipeo kuulutuse näite. Kui tahta, et vana näide tervikuna alles jääb ja uue peal rahus katsetada võib, siis on vanast hea koopia teha. Ning siinse veebirakenduse puhul tasub koopia teha tervest kataloogist. Enne tal nimeks koolipidu, uueks nimeks paneme koolipidu2. Tervikrakenduse avamiseks aitab Web Developeri failimenüü käsklus „ Open Web Site“.

Pildi suuruse muutmine

Kui rakendust piiluda, siis lehe algusesse ongi keskkond juba ühe stiili genereerinud, paistavad olema märgitud pildi mõõdud.
.style1 {
width: 134px;
height: 165px;
Tasub proovida neid muuta ja veenduda, et pilt ka rakenduse juures ekraanil muutub.
width: 50px; height: 165px juures näiteks pressiti pilt kokku
width: 50px; juures aga määratakse laius kindalt paika, kõrgus võetakse proportsioonis vastavalt laiusele.

Käskluste valik

Laadikäskluse võib aga pea iga elemendi külge kirjutada. Ning keskkond on piisavalt tark, et sinna võimalikke käske juurde pakkuma hakata. Ehk siis kui esimese lõigu juurde sai kirjutatud style=““ , siis sinna juurde tekkis valikmenüü päris mitmesuguste käskudega, millest saab hakata omale sobivaid kombineerima. Nagu aimata võib – backgroundiga algavad käsud määravad tausta , borderiga jooned, color seab esiplaani värvi, font ja tekst teksti fondi, suuruse ja joondusega seotu .
Määrasin näiteks kuulutuselõigule omadused, et kaugus vasakust servast on 20 pikslit (ekraanipunkti), tekst on suur (large) ning värv roheline.
Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende ristimise pidu. Kogu koolirahvas oodatud!
Tulemust näeb pildil:

Valmisnäidete kasutamine

Edasi on juba proovimise ja katsetamise asi. Hulga ilusaid näiteid leiab veebiõpetuste lehelt w3schools.com aadressilt http://www.w3schools.com/css/css_examples.asp . Tuleb vaid omale sobiv jupp leida ning töötavana oma lehele üle kanda.
Muude hulgas paistab teksti joondamise näide ( align the text)
Sealt leiab järgneva näite
h1 {text-align: center }
h2 {text-align: left }
h3 {text-align: right}

This is header 1

This is header 2

This is header 3

Edasi tuleb nuputada, kuidas näitest omale kasulik rida ära näpata. Siin paistavad laadid olema kirjas lehe päiseosas (head). Kui praegu aga katsetame vaid ühele lõigule omaduste andmist, siis on meil vaja vaid sobiv käsklus õigesse kohta tõsta. Siin on märgitud kolme taseme pealkirjad. Ning ülal on igaühele neist määratud, kus ta paikneb. Teksti paremale joondamise käsuks on siis järelikult text-align:right. Tahtes näiteks tööjaotuse ja ilmateate lõigu paremale joondada, kopeerime vastava käsu sinna lõigu juurde.
Peo osaliste tööjaotus
Vaata ilmateadet ja vali enesele sobiv riietus!
ning pärast salvestamist võibki alumist teksti nõnda paremale joondatult vaadata.

Elementide omaduste määramine päises

Elementide omadused aga saab määrata ka lehe päiseosas – samuti nagu w3schools.com näite juures tehti. Selleks head osa sisse element style, sinna määratava kujundusega HTMLi käskude loetelu ning iga elemendi taha looksulgudes ja semikoolonitega eraldatult need käsud, mis vastava elemendi külge tahetakse panna.
body{background-color: Yellow }
h1{text-align: center; color: Red}
teatab siis, et lehe sisu (body) on kollase taustaga. Esimese taseme pealkiri (h1) asetseb keskel ning on punast värvi.
Ning selguse huvides ka kogu avalehe kood:
.style1 {
width: 134px;
height: 165px;
body{background-color: Yellow}
h1{text-align: center; color: Red}

Koolipidu

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende ristimise pidu. Kogu koolirahvas oodatud!
Peo osaliste tööjaotus
Vaata ilmateadet ja vali enesele sobiv riietus!

Laadileht eraldi failis

Lihtsa teksti puhul piisab kujunduse määramisest lõigu või sõna juures. Pikemal lehel tasub vähemasti korduvate elementide sõnad panna päisesse. Kui aga tahta sarnast kujundust kasutada mitme lehe juures, siis on viisakas kujunduskäsud tõsta eraldi faili ning need siis igal lehel sisse lugeda. Nii mõjuvad kujundusfaili käsud kogu lehestikule ning näiteks kõigi lehtede taust on kerge asendada sobivaga. Viimatises näites on määratud lehe taust ning esimese taseme pealkirja andmed.
body{background-color: Yellow}
h1{text-align: center; color: Red}
Nende jaoks tekitamegi eraldi faili. Solution Explorer -> paremklõps rakenduse nimel -> Add New Item -> Style Sheet ning nimeks näiteks kujundus.css. Viimasesse on juba „seemneks“ pandud body-elemendi nimi. Kopeerin aga julgesti kogu olemasolevad kaks kujundusrida sinna faili ning algsest kustutan ära.
Nõnda läheb ülal määratud kujundus esimese hooga veebilehelt kaduma. Nii et veebilehitsejas paistab endine valge taustaga kuulutus, kus pealkiri on vasakul.
Edasi aga aitab käsklus
kujunduse eraldi failist sisse lugeda.
Tulemuseks siis taas kujundatud leht.
Kui nüüd soovida sama kollase tausta ja punase pealkirjaga kujundus panna ka tööjaotuse lehele, pole muud, kui sama link -käsklus ka sinna lisada.
Peo vastutajad

Peo korralduse eest vastutajad

10. klass
Rebased
11. klass
Võistluste ja katsumuste läbiviijad
12. klass
Muusika eest hoolitsejad
Avalehele

Kujundusklass

Kujundusomadusi saab määrata elemenditüüpide kaupa nagu eelnenud näitest näha: kõik esimese taseme pealkirjad paigutati keskele ja värviti punaseks. Mõningaid omadusi aga soovitakse panna ainult mõnede vastavate elementide juurde või siis sootuks erisuguste elementide külge. Näiteks soovitakse kõik uued teated lehel eraldi ära märkida sõltumata sellest, kas teated on tabeli, loetelu, lõigu või mõne muu tehnilise vahendi abil lehele kuvatud. Siinses väljamõeldud näites sobib eraldi rõhutada vastavast klassist osalejate roll. 10. klassi rahvas on rebased, 11. klassi omad peo võistluste läbiviijad. Kujundusfailis võib defineerida rolli klassi, edasi juba määrata, milline sõna või lõik selle klassi järgi kujundatakse. Ning kui juhtub, et kujundusklass tahetakse kinnitada osa külge, mis pole eraldi elemendiga piiritletud , siis piiritlemiseks sobib element nimega span . Element ise ei tee midagi, küll aga saab sinna külge kujunduskäsklusi ja – klasse kinnitada. Lisan kujundusfaili rea
.roll{text-decoration: underline;}
ning vastutajate loetelu juures märgin ära, millised kohad tähistavad rolli.
10. klass
Rebased
11. klass
Võistluste ja katsumuste
läbiviijad
12. klass
Muusika eest hoolitsejad
Nagu näha, mõistab arenduskeskkond olemasoleva(d) klassi(d) ise välja pakkuda.
Ning ongi rolli tähistavad kohad alla joonitud.
Ülesandeid

• Loo oma korvpallimeeskonna lehestikust koopia või koosta ise väike lihtne lehestik.
  
• Värvi mõni lõik ja mõne lõigu taust, katseta teksti suuruse ja paigutusega.
  
• Tutvu www.w3schools.com css-i näidetega. Katsu sealt vähemasti kümmekond enesele üle võtta (nt borderi abil jooned koos värvi ja laiusega, joondus, rasvasus (font- weight )).
  
• Määra lehe taust ja vaba serva laius ( margin -left) päises. Katseta.
  
• Tõsta need määrangud eraldi laadifaili. Veendu, et algsest lehest on kujundus kadunud.
  
• Ühenda veebileht ja laadifaili @ import käsu abil
  
• Ühenda sama laadifail ka teise veebilehega ning veendu, et kujundus tuli mõlemasse üle.
  
• Muuda laadifailis lehe tausta ja veendu, et see mõjub mõlemale lehele.
  
• Loo klass nt. noortemeeskondade tähistamiseks. Sealne tekst rohelise värviga. Tähista noortemeeskondade nimed vastava klassiga. Veendu, et kõikidel lehtedel on nende nimed rohelised. Muuda noortemeeskondade klassi nõnda, et roheline pole mitte tekstivärv vaid taustavärv. Veendu muutuse toimumises.
  
• Koosta täiesti uus lehestik näiteks kavandatava matka kohta. Märgi paberile üles teemad, mis võiksid lehestikus olla. Koosta paberile struktuur, kust lehelt kuhu võiks liikuda, mõtle lehtedele sobivad pealkirjad ning failinimed. Joonista valmis eskiisid, millised võiksid lehed välja näha – st. kas kõik lehed ühesuguse plaaniga või nt. avaleht ja menüülehed teistest erinevad. Koosta iga lehetüübi jaoks blankett . Stiilikäsklused koonda eraldi kujundusfaili, mis igasse blanketti imporditakse. Tee blankettidest iga lehe jaoks koopia, kuhu ainult märgitakse teema, näiteks „siia tuleb matka teise päeva söögikoha kirjeldus“. Seo lehed omavahel viidetega. Joonista matka marsruut kaardile ning pane ka see leht lehestikku. Palu naabril otsida üles soovitud leht ning vaata, kui kergesti ta selle menüüde kaudu leidis. Vajadusel lisa selgitusi või keerukamal juhul muuda oma lehestiku struktuuri. Mängi kujundusfailiga, et lehestik võimalikult meeldiv välja näeks. Täida lehed võimalikult meeldivalt ja usutavalt. Ning lõpetuseks – kui lehestik võimalikult hea ja nii omale kui ka sõpradele huvitav, siis tasub see matk võimaluse korral ka teoks teha :-)
  

Programmeeritavad veebilehed

Eelnevas peatükis kokku pandud veebilehti nimetatakse staatilisteks. See tähendab, et ükskõik kes või millal seda lehte vaatab – leht on ikka sama sisuga. Ning alles siis, kui autor midagi muudab võib lehe peal uut sisu nägema hakata. Nagu näha, nii peokuulutuse kui matkalehe kannatab sellisena täiesti kokku panna ning sageli polegi teabe edastamiseks rohkemat vaja. Selline veeb oli aga küllalt viisakal tasemel juba 1997ndaks aastaks olemas, edasi on jõudsalt mitmesuguseid lisavõimalusi arendatud, et just konkreetsele kasutajale meelepärane olla, või siis kasutajate sisestatud andmeid töödelda nõnda, et sellest midagi suurt ja ilusat sünniks. Kogu ASP.NET on taoliste võimaluste tarbeks loodud. Staatilisi lehti võiks südamerahus kirjutada ükskõik millega ja panna üles ükskõik kuhu. Visual Web Developeri juures on „ hariliku “ lehe kujundusvahendid lihtsalt üks killuke paljude programmeerimisvahendite hulgas.
Programmeeritaval veebilehel e. aspx lehel on samuti võimalik kasutada staatilisi HTML elemente, kuid lisaks neile avaneb võimalus kasutada programmelt kontrollitavaid ja hallatavaid ASP.NET elemente e. ServerControl’e

Kellaaeg

Programmeerimisvahendite katsetamiseks loon uue tühja veebiprojekti (failimenüü  New Web Site  Empty Web Site, nimeks programmeerimine ). Solution Explorerist taas New Item, aga sedakorda Web Form. Nimeks kellaaeg.aspx. Keeleks siinse konspekti edasise järgimise huvides Visual C# ning hoolitsen, et „ Place code in separate file“ juures ei oleks linnukest – sedaviisi ei teki esialgu tarbetut lisafaili.
Keeleks C#!
Tekkis ilus lehe blankett, kuhu saab tasapisi omi andmeid kirjutama hakata.
Lähemal uurimisel paistab, et sealne kood nagu oleks HTML ja nagu ei oleks ka. !DOCTYPE on täiesti olemas. Samuti oma alguse ja lõpuga . Ja ja . Aga üles on ilmunud salapärane rida
Ning päris mitmel pool on juures runat=“server“. Nende järgi võib aimata, et tõenäoliselt on tegemist ASP.NETi lehega . Ehk pea kõik, mis on HTMLina, saadetakse otse veebilehitsejasse. Kus aga juures kirjas runat=“server“, selle osaga võib lehe serveerimise käigus midagi juhtuda – sinna võidakse miskit programmikoodi abil juurde kirjutada või seal midagi muuta. Samuti on võimalik otse HTMLi koodi programmi kaudu midagi juurde kirjutada. Viimast võimalust ei peeta küll kuigi viisakaks. Aga kuna vanem ASP just nõndaviisi käis ning nii on lihtsaid asju kerge näidata, siis vastav alustusnäide ka siia. DateTime.Now annab praeguse kellaaja, Kell on abil trükitakse see just sinna kohta lehele. Nii et siinne lihtne lehe kood
Kell on
annab kokku lehe, kus nähtaval praegune kellaaeg.
Tegemist siis kõige ehtsama dünaamilise veebilehega – iga kord kui avad, on sisu uus.

Arvutav veebileht

Inimeselt andmete kättesaamiseks tuleb luua sisestuskoht. Üsna lihtne vahend selleks on tekstiväli. Sisestus - ja muid elemente saab valida tööriistakastist ( Toolbox ). Kui seda pole parajasti näha, siis View-menüüst saab selle esile kutsuda. Lohistades tekstikasti lehel sobivasse kohta, ilmub sinna tekst, mille abil ASP.NET teab veebilehe avamisel tekstikasti HTML-käskluse kuvada.
Automaatselt pannakse elementidele ka id-d. Nende järgi on hiljem programmikoodis võimalik nende poole pöörduda. Ning runat=“server“ jällegi iga elemendi külge, et server sellega midagi peale hakata tohiks. Kui unikaalne id ei taha tekkida, siis tasub tekstikast lehele lohistada disainivaates.
Tollide arv:
Sentimeetrites oleva tulemuse vaatamiseks piisab kohast, kuhu programmiga pääseb kirjutama. Tekstiväli lubab üldjuhul ka inimesel andmeid sisestada. Paljalt andmete näitamiseks on aga loodud element nimega Label. Selle siis lehele lohistamegi ning tulemuseks on järgnev koodilõik:
Tollide arv:
Sentimeetrite arv:
Et millegi peale oleks võimalik arvutama hakata, selleks tasub lehele lisada nupp – element tüübist Button . Ning et vastusesildile ei jääks sõna „Label“ vaid midagi selgitavamat, siis määrasin sinna teksti „Teadmata“, samuti nupule teksti „Arvuta“.
Tollide arv:
Sentimeetrite arv:
Nagu aimata, ei juhtu nupuvajutuse peale veel midagi – arvutile tuleb enne kõik asjad ette öelda. Saab küll tekstivälja kirjutada ning nupule vajutada, aga vastust ekraanile ei ilmu.
Vastuse leidmiseks tuleb nupu külge programmikoodi lõik siduda. Lihtsaimaks mooduseks on minna disainivaatesse ning vajutada nupule topeltklõps.
Tulemuse peale tehti koodis mõningad automaatsed täiendused.
protected void Button1_Click( object sender, EventArgs e)
Tollide arv:
Sentimeetrite arv:
Kui teraselt algse versiooniga erisusi piiluda, siis paistab, et ülesse script -ossa on tekkinud alamprogramm nimega Button1_Click. Ning veebilehe sisuosas on nupu külge tekkinud juurde sündmuse kirjeldus ="Button1_Click" . Viimane tähendab, et kui nupule hiirega vajutatakse, siis käivitub märgitud nimega käsklus. Erinevalt mõnest muust programmeerimiskeelest ei ole siin kohustuslikku seost käskluse (funktsiooni) nime ning vajutatava nupu (või muu elemendi) nime vahel. Mõnikord võib panna ka mitmed elemendid sama käsklust välja kutsuma ning funktsiooni parameetrite (nime järel sulgudes olevate andmete) kaudu saab teada, millisele nupule tegelikult vajutati. Aga kuna praegu meil ainult üks nupp, siis pole mõtet lugu segaseks ajada.
Nupuvajutuse juurde siis programmikood, mis sammu kaupa teeb kõik vajalikud toimingud , et tähtedena (tekstina, stringina) sisestatud tollide arvust saaks vastusesse ka tähtedena sentimeetrite arv. Aga vahepealsete arvutuste juures on vaja andmetüüpi muuta, sest tekstidega ei saa C# keeles matemaatilisi tehteid ette võtta. Küll aga on arvude jaoks loodud omaette andmetüübid. Komadega hakkama saavaks arvutüübiks on double , ainult täisarve tunnistavaks tüübiks int. Levinumate andmetüüpide (nagu näiteks string ja int ja double) omavaheliseks tüübiteisenduseks sobivad klassi Convert käsklused. Rida
double TollidArvuna = Convert.ToDouble(TollidTekstina);
võtab tekstina olevad tollid , teisendab nad arvutimälus ümber reaalarvuna kirjutatavateks andmeteks ning jätab tulemuse meelde muutuja (märksõna) TollidArvuna alla. Viimase saab juba koefitsiendiga läbi korrutada, tulemuse tekstiks muundada ning vastusesildi peal näidata.
protected void Button1_Click(object sender, EventArgs e)
string TollidTekstina = TextBox1.Text;
double TollidArvuna = Convert.ToDouble(TollidTekstina);
double koefitsient = 2.54;
double SentimeetridArvuna = TollidArvuna * koefitsient;
string SentimeetridTekstina = Convert.ToString(SentimeetridArvuna);
Label1.Text = SentimeetridTekstina;
Kes Excelis