PRENOVA SPLETNIH STRANI RADIA KRANJ

Transcription

1 UNIVERZA V MARIBORU FAKULTETA ZA ORGANIZACIJSKE VEDE Smer Informatika v organizaciji in managementu PRENOVA SPLETNIH STRANI RADIA KRANJ Mentor: red. prof. dr. Miro Gradišar Kandidat: Iztok Golob Kranj, Oktober 2007

2 ZAHVALA Zahvaljujem se mentorju red. prof. dr. Miru Gradišarju Hvala Tomažu Kvedru iz Centra mladih za pomoč in nasvete pri izdelavi diplomskega dela

3 POVZETEK Diplomska naloga obravnava posodobitev spletne predstavitve Radia Kranj s pomočjo programa Dreamweaver 2004 MX (v nadaljevanju DW). Program DW ponuja vrsto učinkovitih orodij za implementacijo in stilizacijo podobe, za povezovanje s podatkovnimi zbirkami in pisanje poizvedovalnih stavkov, za izdelovanje dinamičnih vsebin, administrativnih strani, vnosnih obrazcev in še bi lahko naštevali. Spletna stran Radia Kranj bo omogočala prikazovanje dinamičnih vsebin, hkrati pa poslušalcem ponujala tudi možnost, da bodo s svojimi prispevki aktivno sodelovali v določenih oddajah. KLJUČNE BESEDE Dreamweaver MX 2004, podatkovna zbirka, poizvedba, SQL.

4 SUMMARY This diploma work deals with renovation of Radio Kranj web page by using Dreamweaver 2004 MX. This software offers a lot of very efficient tools for implementation and stylization of a graphic design, for handling databases and writing queries, for building dynamic pages, input forms etc. Radio Kranj web page will offer many dynamic and interactive features which will enable visitors also to actively participate in some radio shows. KEYWORDS Dreamweaver MX 2004, database, query, SQL.

5 1. UVOD IZBIRA ORODIJ DREAMWEAVER MX MICROSOFT ACCES ADOBE PHOTOSHOP ADOBE IMAGE READY METODA DELA GRAFIČNA PODOBA STATIČNI DEL DINAMIČNI DEL PODOBA SPLETNE STRANI V DW OBLIKA OSREDNJI MENI OSREDNJI VSEBINSKI DEL REP PRIPRAVA IN ZAČETEK DELA UVOD BREZ LOKALNEGA STREŽNIKA NE GRE ODPIRANJE PROJEKTA V DW UPORABA TABEL ZA POSTAVLJANJE VSEBINE IN PODOBE CSS UVOD DOLOČANJE CSS V DW PODATKOVNA ZBIRKA UVOD KAKO SE LOTITI PODATKOVNE ZBIRKE REŠITEV TABELA INFO TABELA FOTOALBUM TABELA TEXTI TABELA ZVOCNA TABELA MARKETING TABELA EKIPA TABELA OSI_ODDAJ TABELA GLAVAODDAJ POVEZAVA DW S PODATKOVNO ZBIRKO PRIKAZ DINAMIČNIH VSEBIN POIZVEDBE IZDELAVA POIZVEDB TESTIRANJE POIZVEDBE UMEŠČANJE NA SPLETNO STRAN ŠE VEČJA DINAMIČNOST IZDELOVANJE DINAMIČNIH POVEZAV GO TO DETAIL PAGE GO TO RELATED PAGE ZUNANJE POIZVEDBE V PRAKSI...41

6 9.11. VNAŠANJE PODATKOV ZAKLJUČEK SLIKOVNO GRADIVO TABELE LITERATURA...48

7 1. UVOD Naročnik Radio Kranj razmišlja o prenovi spletne strani. Tako zunanje podobe kot funkcionalnosti. Ob primarnem cilju, zagotoviti dodaten servis informacij, sicer objavljenih v etru, želi Radio Kranj poslušalcem omogočiti tudi sodelovanje v posameznih oddajah in rubrikah. Delno to spletna stran Radia Kranj sicer že omogoča, vendar pa je obstoječa podatkovna zbirka preveč elementarna, da bi dovoljevala smiselno in učinkovito nadgradnjo. Vsaka rubrika ima svojo tabelo, ki pa med seboj niso povezane. Obnova podatkovne zbirke je nujna tudi, ker Radio Kranj v prihodnosti razmišlja o intranetu, ki bi bil neposredno povezan z vsebinami spletne predstavitve, zato je priprava temeljev za nadgradnjo tudi eden od ciljev diplomske naloge. Cilj diplomske naloge je: nova podoba spletne strani Radia Kranj prenovljena podatkovna zbirka hitro, pregledno interaktivno in nenazadnje zabavno prikazovanje vsebin predstavitev vseh oddaj, rubrik in aktualnih vsebin oblikovanje spletne predstavitve tako, da bo poslušalcem in obiskovalcem omogočala sodelovanje v oddajah in rubrikah omogočiti poslušanje programa preko interneta pripraviti spletno predstavitev na nadgradnjo Z drugimi besedami, naročnik želi prepoznavno spletno predstavitev, ki bo hkrati privlačna, enostavna za uporabo in tudi hitra, ter bo v isti sapi ponujala vse vsebine objavljene v etru. Prenovljena spletna predstavitev Radia Kranj bo tako vsebovala: - posodobljene in kategorizirane novice - dnevno posodobljen spored - opise in vsebine oddaj - slikovni in zvočni arhiv - interaktivne rubrike kot so Mali oglasi in Izgubljeni hišni ljubljenčki, Izgubljeni predmeti, Obvestila, Napovedi dogodkov - prostor za propagandni material - komercialno ponudbo Iztok Golob: Prenova spletne strani Radia Kranj 7

8 2. IZBIRA ORODIJ 2.1. DREAMWEAVER MX 2004 Splet se ves čas razvija in širi, tako v velikosti kot kompleksnosti, vsak nov dan naplavi nekaj novega in celo urejevalce osebnih, kaj šele profesionalnih spletnih strani, sili, da poznajo več programskih jezikov in strežniških tehnologij hkrati. Dreamwreaver MX 2004 (v nadaljevanju DW) slovi ne le po tem, da sledi večini, še več, z vsako novo različico uspeva slediti spremembam in držati stik z novostmi, ko gre za programiranje spletnih vsebin. DW obvlada več tehnologij kot katerikoli njegov predhodnik, ne glede na to ali služi za oblikovanje bolj enostavnih HTML 1 strani, ali pa je z njim spisana kompleksnejša spletna predstavitev, temelječa na orodju CSS 2 (McFarland, 2004, Introduction). Vešči in šolani razvijalci znajo oblikovati pestre spletne predstavitve že z uporabo najbolj enostavnih urejevalnikov teksta, kot so Wordpad, Notepad ali ConTEXT, kar pa ne pomeni, da si z DW nimajo kaj pomagati. Ravno nasprotno, DW je profesionalni urejevalnik, ki lahko izšolanim prihrani ogromno časa, nadvse pa je prijazen do začetnikov, ki lahko brez posebnega znanja programskega jezika ustvarijo tudi bolj zahtevne in kompleksnejše predstavitve. Uporaba je namreč s pomočjo grafičnega vmesnika in metode WYSIWYG 3 zelo enostavna. DW ponuja uporabniku cel kup različnih tehnologij, ki izkušnjo izdelovanja spletnih strani z vsakim korakom dvigajo na višjo raven. HTML, CSS, XHTML 4, XML 5, Javascript, pogled na kodo ali obliko, ali oboje hkrati, avtomatično lektoriranje in še bi lahko naštevali. Začetnikom bo še posebej pri srcu dejstvo, da za sorazmerno zahtevno stran ni potrebno ročno napisati niti črke kode, izkušenejši in bolj izučeni uporabniki pa prisegajo prav na možnost kombiniranja. Z grafičnim vmesnikom si pomagajo, ko gre za oblikovanje elementov, ki zahtevajo zamudno pisanje kode, v pogledu na kodo pa ročno izpišejo bolj zapletene programske stavke, ki jih DW, v drugače bogati izbiri orodij in priključkov, ne ponuja. 1 HyperText Markup Language 2 Cascading style sheets - Nabori stilov 3 What You See Is What You Get Kar vidiš to dobiš V Računalniškem žargonu je to priljubljen izraz za programiranje z grafičnim vmesnikom, kjer na delovni površini vidiš kakšen bo končni izdelek. 4 Extensible HyperText Markup Language 5 Extensible Markup Language Iztok Golob: Prenova spletne strani Radia Kranj 8

9 Pri izdelavi spletne strani Radia Kranj se bom poslužil tako grafičnega vmesnika kot tudi ročnega kodiranja. Spletna stran Radia Kranj bo skupek med seboj povezanih dokumentov*, med katerimi si bodo številni delili iste vire. DW je tako oblikovalsko, kot tudi upravljavsko orodje, tako da ga bom uporabil tako za izdelovanje posameznih dokumentov, kot tudi za celotno spletno predstavitev MICROSOFT ACCES Microsoft Access ( v nadaljevanju MS Access) je del programskega paketa Office, namenjen izdelovanju podatkovnih zbirk. Lahko bi izbral tudi drugo tehnologijo, saj je DW povezljiv tudi z drugimi podatkovnimi zbirkami, vendar pa, prednost MS Accessa v primeru spletne rešitve Radia Kranj je njegova praktična uporaba. MS Access je pregleden, sorazmerno enostaven za uporabo, omogoča hitro in pregledno urejanje in brskanje po bazi, ter pisanje poizvedovalnih stavkov. Dopušča hitro in enostavno polnjenje tabel z vsebinami, kar pomeni, da administrativne strani v tej fazi razvoja ne bodo potrebne ADOBE PHOTOSHOP Za izris grafične podobe bom uporabil popularen program Adobe Photoshop. Tudi na tem področju je izbira pestra, na voljo je celo brezplačni Gimp, pa Corelov paket grafičnih orodij, vendar pa izbira je temeljila predvsem na trenutni izurjenosti, znanju in potrebah spletne predstavitve Radia Kranj. Adobe Photoshop ponuja široko paleto orodij za delo s fotografijami, ki bodo imele v spletni predstavitvi Radia Kranj pomembno mesto ADOBE IMAGE READY Adobe ImageReady (v nadaljevanju IR) bo služil le razrezu osnovne grafične podobe. Več o tem v poglavju Grafična podoba. Pravzaprav bi moral v poglavju izbira orodij dodati tudi svinčnik, saj bom prenovo spletne strani Radia Kranj pravzaprav začel z osnovnim pisalom, s katerim bom na listu papirja izrisal osnovno grafično podobo, strukturo same strani, nenazadnje pa bo najprej na papirju postavljen tudi osnutek podatkovne zbirke. * ko govorim o spletni strani, govorim o celotni spletni predstavitvi, posameznim dokumentom pa bi lahko rekli tudi podstrani Iztok Golob: Prenova spletne strani Radia Kranj 9

10 3. METODA DELA Kljub želji, da bi kar hitreje prešel k prvim konkretnim korakom prenove spletne predstavitve Radia Kranj, velja poudariti, da se vsak projekt izgradnje spletne strani, pa naj se zdi pot do cilja še tako enostavna in samoumevna, začne s pogovorom z naročnikom. Informacije tistih, ki bodo izdelek prvi ocenjevali, so lahko v fazi snovanja, načrtovanja in izdelave še kako dobrodošle. Od splošnih, denimo komu bo spletna predstavitev namenjena ali kakšni so cilji, do zelo natančnih, denimo katera pisava je naročniku všeč, velikost črk, barve (Optimizacija in uporabnost) Na podlagi pridobljenih podatkov sledi grob izris osnutka, ki ni nič drugega kot delo s svinčnikom na listu papirja. Morda se bo komu v dobi digitalizacije zdela uporaba tradicionalnih delovnih sredstev smešna, ampak tako osnovno postavitev, kot podatkovno zbirko, je smiselno najprej izrisati na listu papirja, kjer sta eksperimentiranje in piljenje idej časovno precej manj zamudna in bolj smotrna, kot na računalniku v nekem programskem okolju. Drugače rečeno za snovanje osnutkov grafične podobe in podatkovne zbirke porabimo precej manj časa s svinčnikom v roki in kosom papirja, kot pa v še tako zmogljivem programu. Šele, ko bom z osnutkoma na papirju zadovoljen sam, še bolj pa seveda naročnik, se bom lotil prvih konkretnih korakov na računalniku. Najprej grafične podobe v Photoshopu, potem podatkovne zbirke v MS Accessu. Preden bom odprl projekt v DW se bom odločil še za enotno velikost fotografij in kvaliteto zvočnih posnetkov. Tako velikost slik, kot kvaliteta zvočnih datotek bosta namreč vplivali na hitrost prikazovanja spletnih strani, zato bosta nujna kompromis med hitrostjo in kvaliteto. V DW bom najprej pripravil tiste elemente, ki se bodo ponavljali na vseh straneh in se ne bodo od strani do strani spreminjali, torej glavo, levi meni in rep, šele zatem se bom usmeril v izdelavo osrednjih dokumentov, kjer bodo vsebine dinamične. Vstopna ali začetna datoteka bo index.asp. 4. GRAFIČNA PODOBA Osnovna podoba bo torej sestavljena iz več delov, ki jih lahko združimo v dva glavna sklopa: 1. Statični; ta se ne bo se veliko spreminjal in bo, kot že rečeno vseboval glavo, meni in rep. 2. Dinamični; jedro spletne predstavitve bo povezano s podatkovno zbirko in prepleteno z bogatim slikovnim, tekstovnim kot tudi zvočnim materialom, ki se bo dnevno spreminjal. Statični del bo na prvi pogled zelo skop in enostaven. Vzrok za preprostost osnovne grafične podobe leži v želji naj imata bistveno vlogo dinamična vsebina in hitrost njenega prikazovanja. Drugače rečeno, naročnik Radio Kranj želi, naj poslušalca Iztok Golob: Prenova spletne strani Radia Kranj 10

11 prvenstveno pritegne hitro prikazana vsebina in ne kozmetika. S tem seveda pomen privlačne podobe ne bo zanemarjen. Spomniti velja, da bo dinamična podoba ves čas polna tekstovnega, slikovnega in zvočnega gradivo. Z všečno in domiselno postavitvijo bodo omenjeni trije elementi že sami po sebi dovolj velik magnet za obiskovalce, zato je pretiravanje z oblikovalskimi vragolijami, obremenjevanje internetnih povezav in strojnih zmogljivosti, odvečno STATIČNI DEL V sam način izdelave grafične podobe se ne bom preveč spuščal, ker to niti ni predmet naloge, pa vseeno poglejmo nekaj namigov. Statični del bo kot že rečeno izrisan v orodju Photoshop, potem pa prenesen v DW. Mimogrede, vsi kosi statičnega dela grafične podobe bodo shranjeni v formatu gif 6. To pa zato, ker bo podoba zrisana. Format.gif ima pri risanih podobah precej učinkovitejši algoritem stiskanja, in izrisane slike optimizira bolje, kot algoritem formata.jpg. Obratno velja za fotografije. V primeru fotografij je pri optimizaciji precej bolj učinkovit format.jpg. Podobo bom v DW prenesel s pomočjo razreza. V grafičnem programu bom čez sliko potegnil mrežo, s tem bom dobil več manjših polj, ki jih bom razrezal, izrezke pa shranil kot ločene datoteke (Razrez). Manjše datoteke se preko spleta prenesejo in na obiskovalčevem računalniku naložijo hitreje, kot ena velika (Davis, pog. 14). Kosi osnovne grafične podobe bodo shranjeni v mapi Images, fotografije pa v mapi Slike. Mere posameznih polj v DW, kamor bomo grafično podobo prenesli, morajo biti identične meram kosov, ki nastanejo z razrezom podobe v grafičnem programu. Medtem, ko bo podoba izrisana v Photoshopu, bo razrezana v programu IR. Lahko bi jo sicer tudi v Photoshopu, vendar ponuja IR paleto Slice select tool 7, ki zelo poenostavi in pohitri prenos v DW. S pomočjo palete je namreč že med rezanjem moč posameznim kosom grafične podobe dodati kakšen efekt in jim hkrati določiti tudi pot, kamor bo obiskovalce popeljala določena povezava. Drugače rečeno, v IR programu bom s pomočjo ene palete, na enem mestu, grafično podobo zrezal na manjše dele, program bo vsakemu elementu podobe avtomatično določil svoje ime, hkrati pa bom posameznim kosom določil tudi namembnost in HTML povezavo, če so za to predvideni. 6 Graphic Interchange Format grafični format 7 Orodje za razrez Iztok Golob: Prenova spletne strani Radia Kranj 11

12 4.2. DINAMIČNI DEL Dinamični del spletne predstavitve bo v celoti narejen v programu DW. Pri razporeditvi vsebin se bom še naprej opiral na tabeliranje. DW omogoča nastavljanje tabel s točno določenim številom vrstic in stolpcev, kot tudi združevanje posameznih polj, bodisi v vrsticah ali stolpcih, ali kar oboje hkrati. Na ta način je možna, ne le bolj drzna razporeditev vsebine na delovni površini, pač pa tudi večji nadzor na dejanskim prikazovanjem na internetu. Tu velja še enkrat poudariti nujnost priprave osnutka na navadnem listu papirja, saj je lahko naknadno popravljanje tabel zelo zamudno, da ne govorim o zmedi, ki jo lahko pretirano popravljanje tabel povzroči v kodi. 5. PODOBA SPLETNE STRANI V DW 5.1. OBLIKA Smiselnost in praktičnost ločevanja grafične podobe na več delov se v polni luči pokaže prav z implementacijo v DW. Naj še enkrat spomnim, da bo podoba spletne predstavitve razdeljena na štiri dele: Glava z zgornjim menijem Rep Glavni meni Osrednji, vsebinski del Temu primerno bo prav vsak del tudi ločen dokument. Tri, ki se bodo spreminjali le občasno, bom poimenoval glava.asp 8, meni.asp in rep.asp. Osrednji, vsebinski del bo poimenovan glede na vsebino. Tako bo podstran z novicami dokument novice.asp, podstran z malimi oglasi pa bo dokument malioglasi.asp. Taka delitev je zelo uporabna. Že majhna sprememba, denimo menija, lahko povzroči precej sivih las in odvečnega dela, če je treba spremembo vnesti v vsak dokument posebej. Tako pa se z enim posegom sprememba avtomatično pokaže na vseh podstraneh. Razdelitev spletne predstavitve sicer resda poveča število dokumentov na strežniku, vendar pa bodo s tem zmanjšani obsegi ostalih, pridobim pa tudi na hitrosti nalaganja in funkcionalnosti. 8 Active server pages - Aktivne strežniške strani Iztok Golob: Prenova spletne strani Radia Kranj 12

13 5.2. OSREDNJI MENI V osrednjem meniju, ki bo vertikalen in bo stal klasično levo, bodo povezave do strani, namenjenih najbolj poslušanim in pogosto obiskanim oddajam kot so: mali oglasi, izgubljene živali, lestvica radia Kranj, kaj za kosilo, gremo na potep. Mimogrede ta meni bi izdelan z orodjem CSS, ki ga DW zelo dobro podpira, o uporabi pa več besed v nadaljevanju OSREDNJI VSEBINSKI DEL Napolnjen bo le z dinamično vsebino: teksti, slikami, zvočnimi dokumenti, ki bodo priklicani iz podatkovne zbirke. Primer: dokument Mali oglasi bo vseboval le kodo, ki bo iz podatkovne zbirke priklicala vse iskane zapise REP V repu se bodo nahajale nekatere manj uporabljene povezave, elektronska pošta administratorja, avtorske pravice, pogoji uporabe. Dokumenti glava, meni in rep bodo shranjeni v mapi /inc, z osrednjim vsebinskim dokumentom pa bodo povezani preko ukaza Include. Vrstni red sestavljanja v celoto bo identičen našemu načinu pisanja, torej od leve proti desni in od zgoraj navzdol. Vzrok je preprost, na ta način namreč tudi programiramo. Drugače rečeno, namesto, da bi osrednji, vsebinski del klical ostale podrejene statične elemente, bo glava dokumenta klicala meni, meni, meni pa bo priklican s strani vsebinskega dinamičnega dokumenta, ki pa bo na koncu priklical še rep. 6. PRIPRAVA IN ZAČETEK DELA 6.1. UVOD Spletna predstavitev Radia Kranj bo izdelana v tehnologiji.asp. Brez strežnika predogled.asp dokumentov ni možen, zato je, za lažje spremljanje napredka, oziroma dober pregled nad storjenim, postavitev lokalnega strežnika zelo priročna. Vsi dokumenti in mapi bodo nameščeni v krovni mapi z imenom Radio Kranj, ki bo ležal na disku C: v mapi Inetpub in podmaži wwwroot, ki se samodejno ustvarita ob zagonu Microsoftovega strežnika Internet information services 10 (v nadaljevanju (IIS). Iztok Golob: Prenova spletne strani Radia Kranj 13

14 6.2. BREZ LOKALNEGA STREŽNIKA NE GRE V Windows XP ga je moč zagnati v nadzorni plošči, z dodajanjem novih komponent in označitvijo ISS. Prednost lokalnega strežnika je v tem, da lahko delovanje spletne predstavitve preverjam še preden dokumente objavim na spletu. Poenostavljeno rečeno, dokler se stran na lokalnem, torej testnem, strežniku ne obnaša tako, kot bi se morala, se tudi na spletu ne bo ODPIRANJE PROJEKTA V DW DW seznanimo z lokacijo lokalnega strežnika in lokalne spletne predstavitve s pomočjo zavihka Site definition 11, ki se nahaja v meniju Site pod opcijo Site management. V zavihku je pravzaprav osem kategorij, v katerih določimo ime spletne predstavitve, lokacijo dokumentov disku, lahko tudi lokacijo slikovnih dokumentov, strežnik za testiranje in še bi lahko naštevali. Zavihek Definicija strani (Site definition) kaže slika 1. Slika 1. Zavihek Definicija strani Z nastavitvijo parametrov, so postavljeni temelji za delo s prvimi dokumenti. Spletna predstavitev Radia Kranj bo dinamična, zato bom temu primerno izbral tudi možnost, ki jo DW pri odpiranju ponuja. 10 Internetni informacijski strežnik 11 Definicija strani Iztok Golob: Prenova spletne strani Radia Kranj 14

15 Mimogrede ponudba DW je bogata. Z odpiranjem vsakega novega dokumenta ali strani namreč vnaprej ponuja vrsto možnosti: HTML, CSS, ASP (Vbscript in Javascript), ASP.NET, PHP, Cold Fusion in JSP in še bi lahko naštevali. Način izbire dokumenta in pestro ponudbo prikazuje slika 2. Slika 2. Odpiranje dokumenta v DW Spletna predstavitev Radia Kranj bo zgrajena s pomočjo spletne tehnologije ASP Vbscript, pri čemer DW z gumbom Create odpre delovni list, na katerem lahko začnemo ustvarjati. Kot že rečeno, ponuja DW tako ročno programiranje, kot tudi objektno programiranje. Temu primerno lahko preklapljamo med dvema pogledoma z dobro vidnimi gumbi nad delovno površino. Pogled na kodo med drugim odkrije, da DW, hkrati ko odpremo nov delovni list, že sam zapiše nekaj osnovnih vrstic. Kako DW z odpiranjem dokumenta sam ustvari nekaj osnovnih vrstic, ter pogled na delovno površino za ročno kodiranje prikazuje slika 3. Slika 3. Delovna površina za ročno programiranje in prve vrstice kode, ki jih z odpiranjem dokumenta ustvari kar DW sam. Iztok Golob: Prenova spletne strani Radia Kranj 15

16 6.4. UPORABA TABEL ZA POSTAVLJANJE VSEBINE IN PODOBE Kdor vsaj nekoliko pozna HTML ve, da se vsebina, ne glede ali gre za tekst, slike, ali katerokoli vsebino, pomika od leve proti desni, dokler površine, kamor vnašamo vsebino, ne omejimo z nekimi mejami. V DW lahko širino površine omejujemo s tabelami. S tabelami lahko v DW zelo enostavno postavimo vsebine tako, kot smo si jih zamislili ob snovanju na listu papirja. Ob enostavnosti uporabe je prednost tudi združljivost. Tabele prepozna večina internetnih brskalnikov. Vanje lahko vstavljamo karkoli, slike, tekste, poizvedovalne stavke, ki kličejo podatke iz podatkovne zbirke, bistveno pa je, da se nam pri tem ni treba bati, da bi se nam celotna podoba popačila ali celo podirala. Drugače rečeno, s premišljenim načrtovanjem tabel lahko v DW postavimo nek element kamorkoli na površino, brez da bi se bali, da na ekranu obiskovalca ne bo stal na istem mestu. (DW Tutorials, str. 7) V DW lahko kreiramo tabele tako z ročnim programiranjem kot tudi s pomočjo grafičnega vmesnika. Slednji omogoča precej hitrejše in bolj pregledno delo. Poudariti velja, da omogoča DW tudi tabele znotraj tabel, res pa je, da se pretiravanje pri večini brskalnikov ne obnese ravno najbolj. Nekateri imajo denimo težave s skrivanjem robov. Vnašanje tabel je v DW z grafičnim vmesnikom enostavno. Bodisi preko menija ali z gumbom na orodni vrstici. Oba ponudita zavihek, v katerem lahko nastavimo širino tabele, število vrstic in stolpcev, širino robov in notranji odmik. Zavihek za vnašanje tabel in določanje parametrov kaže slika 4. Slika 4. Vnašanje tabel in določanje parametrov tabel Iztok Golob: Prenova spletne strani Radia Kranj 16

17 Podobno kot vnašanje, je z grafičnim vmesnikom v DW enostavno tudi urejanje in spreminjanje tabel, saj lahko s paleto Properties 12 določamo velikost celic, lego vsebine v celicah, obarvamo robove in notranjost celic, jih cepimo, združujemo ali pa v njih vnašamo slike. Zavihek Properties prikazuje slika 5. Slika 5. Zavihek Properties za delo s tabelami oziroma teksti Vnašanje slik v celice je zelo priročna možnost za natančno prikazovanje grafične podobe. Pri vnašanju podobe v tabelo je zelo pomembno, da imajo celice tabele enake mere (širino in višino), kot kosi grafične podobe, ki jih v tabelo vnašamo. V nasprotnem primeru obstaja verjetnost, da se celotna slika ne bo prikazovala pravilno. V primeru dokumenta glava.asp bo imela denimo tabela štiri vrstice. V prvi, tretji in četrti bosta dva stolpca, v drugi pa pet. Vsi grafični elementi se bodo v obliki grafičnih dokumentov nahajali v mapi Images, imenovali pa se bodo po polju v katerem se bodo nahajali. Srček na desni bosta denimo sestavljali datoteki f1.gif in f2.gif. Številke označujejo vrstice, črke pa stolpce. Vnašanje kosov grafične podobe prikazuje slika 6. Slika 6. Vnašanje kosov grafične podobe 12 Lastnosti Iztok Golob: Prenova spletne strani Radia Kranj 17

18 Poudariti velja, da je prihranek na času za prikazovanje spletne predstavitve zelo pomemben, zato si velja pri vnašanju in zaključevanju grafične podobe pomagati tudi z raznimi triki. Vrstica 4 je denimo vsa zelena. Zeleno barvo lahko sicer vnesem kot identično veliko sliko, vendar obstajata načina, kako prihraniti na času. Namesto slike prvotnih mer, lahko shranim in v DW prikličem le pixel te slike, pri čemer bo HTML pri izrisovanju podobe avtomatično ponavljal ta pixel dokler ga celica s svojimi merami ne bo omejila. Druga, še enostavnejša in hitrejša možnost pa je seveda, da celico obarvam kar v HTML, pri čemer pa mora biti odtenek barve isti kot v programu Photoshop. 7. CSS 7.1. UVOD HTML je bil nekdaj edini programski jezik, potreben za izdelavo spletnih strani. Z njim je sicer še vedno moč postaviti zelo barvite spletne predstavitve, spreminjati barvo, velikost, debelost tekstov, dodajati slike, tabele, določati robov in posamezna polja. Vendar, z leti je postal HTML močno pomanjkljiv, tako da si spletne predstavitve, brez orodja CSS, skorajda ne da več predstavljati. CSS je jezik, s katerim lahko storimo vse kar zmore HTML, pa še marsikaj več. (Meyer, pog. 1) Medtem, ko HTML vse bolj prevzema vlogo orodja, s katerim organiziramo spletno predstavitev, oziroma definiramo njeno strukturo, CSS prevzema oblikovalsko oziroma kozmetično plat spletne vsebine, jo olepša in naredi bolj privlačno (Schmitt, str. 26). Razloga, da na področju oblikovanja prevzema vlogo HTML, sta predvsem dva. Prvi se enostavno skriva v precej večji paleti možnosti, s katerimi lahko vplivamo na podobo spletne predstavitve. Vsaj tako pomembno pa je tudi dejstvo, da je CSS pri popravljanju ali spreminjanju precej bolj učinkovit. HTML je namreč, prav ko gre za popravljanje in spreminjanje razvpit zaradi okornosti. Če je imela spletna predstavitev naslove prvotno zamišljene v neki barvi in velikosti, pa so naročniki začutili potrebo po spremembi, je bilo treba kratko malo skočiti v vsak dokument posebej in spreminjati font s katerim so bili naslovi označeni. Pri CSS zadostuje, da font popravimo le v naboru. Nabori se lahko nahajajo kjerkoli, še najbolje pa, če kar v posebnem.css dokumentu. CSS na kratko rečeno postaja nekakšen zakonik, ki spletnemu brskalnik narekuje kako naj prikaže določen element spletne predstavitve. Jasno denimo določa kako velik in kakšne barve naj bo katerikoli tekst znotraj neke definicije (DW Tutorials, str. 39). Vendar to ni vse. Z njim lahko dodajamo meje, spreminjamo odmike med odstavki, določamo, kje točno naj se nahaja določen element predstavitve, ali celo ustvarjamo vizualne efekte, kot je denimo popularni rollover image*. * Dvojna slika; efekt pri katerem se osnovna sličica, ki služi kot internetna povezava, ob prehodu z miško, zamenja z nadomestno sličico, ki je glede mer popolnoma ista, kot osnovna, vizualno pa se od osnovne razlikuje, bodisi po barvi, bodisi po kakšnem dodanem motivu, s čimer poudari izbrano povezavo. Iztok Golob: Prenova spletne strani Radia Kranj 18

19 Bistveno pri vsem tem je, da lahko z DW grafičnim vmesnikom sloge enostavno oblikujem in shranim v dokument.css. Med delom so preko enega od zavihkov ves čas na delovni površini in na voljo za uporabo, po potrebi pa jih lahko tudi urejam, bodisi ročno ali preko grafičnega vmesnika DOLOČANJE CSS V DW Ena bistvenih prednosti, ki jih prinaša CSS je enostavno urejanje programske kode, ki zadeva kozmetično plat predstavitve. Denimo, da si naročnik vse naslove tekstov, namesto v fontu Verdana, zaželi v fontu Sans serif, spletna predstavitev pa obsega 100 dokumentov. V jeziku HTML bi to pomenilo ročno popravljanje kode v vseh 100 dokumentih. Zdaj ko je na voljo CSS, je dovolj, da popravimo zgolj eno vrstico, pa bo do sprememb prišlo povsod. DW nudi pri izdelavi CSS stilskih naborov ogromno pomoči. V primeru spletne strani Radia Kranj bom v ta namen odprl poseben dokument, ki ga bom poimenoval enostavno css.css, hkrati pa ga bom za boljšo preglednost shranil še v posebno mapo CSS. V tem dokumentu bom definiral nekaj osnovnih slogov: Naslov, Podnaslov, Tekst, Blok in jim bom v css.css določil pripadajoče parametre. Primer:.naslov { font-family: "Times New Roman", Times, serif; font-size: 20px; font-style: normal; font-weight: bolder; } Ko je slog enkrat definiran, ga v praksi uporabim tako, da ga prikličem v dokument. Da prikličem želeni slog iz dokumenta css.css, moram naprej celoten dokument povezati s spletno predstavitvijo. To spet storim z ukazom Include, ki ga postavim kar v dokument glava.asp, saj bo tako veljal za vse podstrani in ga ne bo treba klicati večkrat. S tem, ko so dokumenti spletne predstavitve povezani s CSS slogi, jih je treba v želeni slog samo še odeti. Primer: <span class="naslov">tole je enostaven primer kako močno je orodje css </span> Ko obiskovalec obišče spletno stran, vidi naslednji zapis: Tole je enostaven primer kako močno je orodje css V primeru, da bi naročnik želel drugačen font naslova, bo dovolj zgolj ustrezna sprememba parametra v pripadajočem naboru v datoteki css.css. Delovno površino s CSS kodami in zavihek za izdelavo prikazuje slika 7. Iztok Golob: Prenova spletne strani Radia Kranj 19

20 Slika 7. Delovna površina s CSS nabori, desno pa plavajoči zavihek Design, ki nam pomaga določati sloge in njihove parametre. Za konec poglavja o CSS pa še tole. Čeprav ponuja DW, kot tipičen WYSIWYG program, iz različice v različico bolj kompleten vizualni nadzor nad razvojem CSS slogov, vseeno ne bo profesionalno orodje za izdelavo CSS nikoli. Najbolj očarljive, sveže in drzne rezultate daje namreč še vedno predvsem ročno programiranje. Je pa res, da nudi DW veliko pomoč predvsem začetnikom in tistim, ki se v skrivnosti CSS nimajo časa poglabljati. Za razvoj spletne strani Radia Kranj bo to zadostovalo. 8. PODATKOVNA ZBIRKA 8.1. UVOD Obstaja cela vrsta tehnologij, na katerih temeljijo spletne predstavitve. Nekatere zahtevajo več truda, druge manj, dejstvo pa je, da velikokrat niso primerno izrabljene. Še posebej, če kljub vloženemu trudu, obiskovalci spletno predstavitev zgolj preletijo. Razlogov za to je več. Denimo, spletna predstavitev: ne počne nič posebnega je sicer mikavna in barvita, vendar brez zanimive vsebine ni univerzalna (v vseh brkljalnikih se ne prikazuje pravilno) je grda, počasna in dolgočasna Slaba izkoriščenost internetnih tehnologij niti ni presenetljiva, če številni razvijalci večino truda vlagajo v podobo, namesto v vsebino. Obiskovalci si po drugi strani bolj kot umetniških mojstrovin, želijo novic, nasvetov, spletnih trgovin, upravljanja z bančnimi računi in še bi lahko naštevali. Za to pa so potrebni dobro organizirani in lahko dostopni podatki, ter tehnologije, s katerimi te podatke urejamo (Riordan, str. 17). Iztok Golob: Prenova spletne strani Radia Kranj 20

21 Za urejanje in razvrščanje podatkov spletne predstavitve Radia Kranj bom, kot že rečeno, uporabil program MS Access, v navezi z jezikom SQL 13. SQL je v svetu podatkovnih zbirk najpomembnejši jezik, tako, ko gre za vnašanje, kot seveda tudi, ko gre branje podatkov (Molinaro, Preface). DW sicer omogoča pisanje poizvedovalnih SQL stavkov, s katerimi brskamo po Accesovi bazi, hkrati pa si lahko izposodi kar MS Accessove. Bistvena prednost je hitrost izvedbe, saj številni razvijalci ocenjujejo, da je, pri daljših in bolj zapletenih poizvedovalnih stavkih, izvajanje želene MS Accesove poizvedbe hitrejše, kot če bi ta isti stavek zapisali v DW. Sicer pa o obeh možnostih več kasneje. Kakorkoli že, podatkovna zbirka je zagotovo pomemben del dinamične spletne strani in zahteva temeljit premislek in načrt. Iskanje bližnjic lahko povzroči podobno škodo, kot gradnja hiše brez načrtov (Riordan, str.). Potem, ko ima podatkovna zbirka že kar nekaj vnosov, lahko pomeni kakršnakoli sprememba precejšnjo izgubo časa KAKO SE LOTITI PODATKOVNE ZBIRKE Pri spletni predstavitvi Radia Kranj prevladujejo teksti, naročnik pa bi rad vpletel tudi tonski arhiv in slikovnega. V idealnem primeru bo torej vnos vseboval naslednje podatke: Kategorijo, ki ji vnos pripada (fotoalbum, oddaja, novica, rubrika ) Naslov (oddaje, fotoalbuma) Osebno izkaznico (avtor, slika avtorja, dolžina oddaje, kratek opis ) Poglavja (naslove poglavij) Datum vnosa Datum dogodka Tekste Slike Tonsko gradivo Najlažja rešitev bi bila ena obsežna tabela, ki bi vsebovala vse naštete podatke, vendar pa ne bi bila smiselna. Medtem, ko je prvih pet parametrov vedno prisotnih, za druge velja, da lahko, od vnosa do vnosa odvisno, tudi izostanejo. Sicer je najmanj verjetno,da bo vnos brez teksta, lahko pa se zgodi, da bo brez tonskega ali slikovnega gradiva, ali kar obeh. V tem primeru je ena velika tabela nesmotrna, saj bi se določeni podatki, denimo osebna izkaznica ponavljali, po drugi strani pa bi lahko tudi cel sklop polj, zaradi izostanka podatkov, ostal prazen. 13 Structural query language - Programski jezik za dostop in manipuliranje s podatkovnimi zbirkami Iztok Golob: Prenova spletne strani Radia Kranj 21

22 Programerji že desetletja poznajo koncept relacijskih podatkovnih zbirk. Relacijske podatkovne zbirke niso nič drugega kot smiselno povezane tabele, ki omogočajo smotrno in učinkovito ravnanje s podatki. Smotrno v smislu, da se ne podvajajo, da izpisi ne begajo, učinkovito pa v smislu, da so podatki varni pred izgubo ali okvaro, zahtevajo zelo malo človeških in strojnih resursov in so nenazadnje znotraj določenih pravil igre lahko dostopni (Riordan, Relational model) REŠITEV Namesto ene velike tabele, bo torej več manjših, med seboj povezanih tabel. Obstajala bo krovna tabela z osnovnimi podatki o vnosu, specifične podatke pa bo črpala iz manjših namenskih tabel. Krovno tabelo kaže tabela številka TABELA INFO Info Id Naslov Link IdFotoalbum IdText IdZvok IdGlava DatumVnosa DatumDogodka Autonumber text text number number number number Date/time Date/time Tabela 1. Tabela Info, levo so imena stolpcev, desno za kakšne vrste vnose bo šlo V tabelo Info bom vnašal osnovne podatke o vnosu. Naslov vnosa, denimo oddajo»gremo na potep«, ali fotoalbum»14. rojstni dan Radia Kranj«Link določi kateremu poglavju vnos pripada, bodisi novicam, oddajam, fotoalbumu. Na ta način lahko vnose potem med sabo ločim že po kategoriji z enostavnim SQL poizvedovalnim stavkom SELECT * FROM Info WHERE Link = 'parameter' (oz prikaži vse vnose iz tabele info, ki imajo v stolpcu link izbrano kategorijo). Identifikacijske številke pripadajočih fotografij, tekstov, zvočnih dokumentov in podnaslovov omogočajo relacijo oziroma dostop do tabel s pripadajočo vsebino Identifikacijska številka vnosa bo avtomatični primarni ključ DatumVnosa bo prav tako avtomatski in bo omogočal sortiranje glede na datum vnosa Datum dogodka bo vnesen ročno in bo določal, kdaj se mora vnos izvršiti Iztok Golob: Prenova spletne strani Radia Kranj 22

23 TABELA FOTOALBUM Stolpec IdFotoalbum iz tabele Info bo neposredno povezan s tabelo Fotoalbum, ki bo vsebovala naslednje stolpce. Prikazuje jo tabela 2. Fotoalbum IdFotoalbum Rubrika ImeSlike SlikaM SlikaV autonumber text text text text Tabela 2. Tabela Fotoalbum V stolpcih SlikaM in SlikaV bodo shranjena imena in lokacije pripadajočih slik. Denimo,»slike/imeslike.jpg«. Poševnica loči ime slike od mape, pri čemer je pred poševnico ime mape, za poševnico pa ime slike. V stolpcu IdFotoalbum bo identifikacijska številka, identična številki v tabeli info, na podlagi katere bo program vedel, kateremu vnosu v tabeli info pripada vsebina vrstice v tabeli fotoalbum. V primeru, da vnos ne bo imel vsaj ene od obeh slik, bo polje IdFotoalbum v tabeli info ostalo prazno, tabela fotoalbum pa nedotaknjena. S tem se bom torej v podatkovni zbirki izognil praznim poljem, povezavo dveh tabel pa omogočil preko identifikacijske številke TABELA TEXTI Isto velja tudi za tabelo Texti, ki bo vsebovala naslednje stolpce. Prikazuje jih tabela 3. Texti IdText Naslov Text00 Text01 Text02 Text03 Text04 Autonumber text Text Text Text Text Text Tabela 3. Tabela Teksti Relacija med tabelama Info in Texti izhaja iz povsem iste logike, kot v primeru tabel Info in Fotoalbum. Kadar bodo nek vnos spremljali teksti, bodo vneseni v tabelo Texti, s tabelo info pa bodo povezani preko pripadajoče identifikacijske številke. Ustrezen tekst bo pokazan, če bo imel vnos v tabeli Info, v stolpcu IdText, identifikacijsko številko, in če bo našel isto identifikacijsko številko tudi v tabeli Iztok Golob: Prenova spletne strani Radia Kranj 23

24 Texti. Ko bo našel identično številko, bo upošteval in uporabil zgolj vsebino v tej vrstici TABELA ZVOCNA Podobno velja tudi za tabelo Zvocna, ki je s tabelo Info povezana preko stolpca IdZvok. Spremlja jo povsem ista logika kot zgornji dve, prikazuje pa jo tabela 4. Zvocna IdZvok Zvok1 Zvok2 Zvok3 Zvok4 Zvok5 Zvok6 Autonumber Text Text Text Text Text Text Tabela 4. Tabela Zvocna TABELA MARKETING Tabela Marketing bo za razliko od prej omenjenih samostojna in ne bo povezljiva z ostalimi tabelami. Prikazuje jo tabela 5. Marketing Id Oznaka Kategorija Text Tocke Cena Autonumber Text Text Text Text Text Tabela 5. Tabela Marketing Naročnik Radio Kranj predvideva, da bo v njej cenik reklamnih sporočil in storitev, razdeljenih v več kategorij. Od rednega EPP do oglaševanja na spletnih straneh in produkcije. Vsi parametri, razen identifikacije bodo navadni teksti. Iztok Golob: Prenova spletne strani Radia Kranj 24

25 TABELA EKIPA Tabela Ekipa bo prav tako samostojna. Prikazuje jo tabela 6. Ekipa Id Moderator Slika Termin Autonumber Text Text Text Tabela 6. Tabela Ekipa Naročnik predvideva, da bodo v njej voditelj programa, njegova slika, ter termin. Tudi tu bodo vsi parametri razen identifikacijske številke teksti. Vsaka oddaja ima osebno izkaznico, na kateri se med drugim nahajajo ime avtorja, njegov elektronski naslov, opis oddaje itd. Osebne izkaznice posameznih oddaj bodo vpisane v tabelo Osi_Oddaj. Ti podatki se le redko spreminjajo TABELA OSI_ODDAJ Tabela OsIOddaj nosi osnovne podatke o oddajah. S tabelo Info bo povezana preko stolpca Naslov (oddaje). Kadar si bo obiskovalec želel ogledati vsebino določene oddaje, se mu bo avtomatično prikazala tudi pripadajoča osebna izkaznica, spet na podlagi identičnih identifikacijskih številk v tabeli Info in tabeli Osi_Oddaj. V tabeli OsiOddaj se bodo nahajali naslednji stolpci. Kaže jih tabela 7. Osi_Oddaj ID_Glava Naslov Opis Urednik eposta Termin Traja logo Fotka Autonumber text text text text text text text text Tabela 7. Tabela Osi_Oddaj 13 Ekonomsko propagandni program Iztok Golob: Prenova spletne strani Radia Kranj 25

26 Stolpec IdGlava je povezan s tabelo GlavaOddaj. V tej tabeli se nahajajo naslovi poglavij ali odstavkov posameznih oddaj. Vsebine različnih oddaj se med seboj močno razlikujejo. Medtem ko ima denimo oddaja Gremo na potep poglavja: Destinacija, Opis in Avtor, ima Avtomobilistična oddaja takih odstavkov več: Ime vozila, Moč motorja, Pospeški, Cena, Uvoznik. V tabeli GlavaOddaj bodo podobno kot pri Osi_Oddaj vnaprej določene vrednosti, ki jih bo moč priklicati preko povezave med dvema tabelama in s pomočjo identifikacijske številke. V praksi bo to pomenilo, da bo strežnik pri izpisu vsebine Avtomobilistične oddaje, preko identifikacijske številke potegnil iz tabele IdGlava še naslove posameznih poglavij oziroma odstavkov. Stolpce v tabeli GlavaOddaj prikazuje tabela TABELA GLAVAODDAJ GlavaOddaj Id_Glava Naslov01 Naslov02 Naslov03 Naslov04 text text text text text Tabela 8. Glava oddaj Spodaj na sliki 8 je moč videti, kako so zamišljene povezave med tabelami, brez tabel Marketing in Ekipa, ki sta povsem samostojni. Slika 8. Povezave med tabelami Iztok Golob: Prenova spletne strani Radia Kranj 26

27 Skupaj bo med seboj povezanih šest tabel. Mimogrede, zasnovane so tako, da bodo omogočale tudi nadgradnjo v Intranet, ko bo Radio Kranj v obstoječo podatkovno zbirko vključil tudi obračunavanje honorarjev, bolj napredno vodenje in oblikovanje programske sheme in jo izkoriščal za vodenje različnih evidenc POVEZAVA DW S PODATKOVNO ZBIRKO Z zagonom IIS strežnika in umestitvijo mape Radio Kranj v mapo C:/Inetpub/wwwroot/ je pravzaprav kar nekaj dela pri povezovanje podatkovne zbirke in DW že opravljenega. Da se bo spletna predstavitev lahko sporazumevala z MS Accessovo podatkovno zbirko, bo treba zagnati tudi ODBC 14 gonilnik in določiti ime DSN 15. To storim tako, da 1. v operacijskem sistemu Windows (2000 ali XP) odprem nadzorno ploščo 2. izberem Administrative tools in zaženem ODBC 3. izberem MS Access in pritisnem configure 4. določim DSN ime (radiokranj) in pritisnemo select označimo dokument z podatkovno zbirko DW povežem z bazo s pomočjo zavihka databases, ki leži med plavajočimi meniji na desni. Zavihek Application 16 z menija Databases kaže slika 9. Slika 9. Zavihek Databases 17 z menija Aplication preko katerega projekt povežemo s podatkovno zbirko shranjeno v formatu mdb. 14 Open DataBase Connectivity Odprta povezava s podatkovno zbirko 15 Data Source Name Ime vira podatkov 16 Aplikacija 17 Podatkovne zbirke Iztok Golob: Prenova spletne strani Radia Kranj 27

28 Postopek je enostaven in razumljiv S pritiskom na znak»+«izberem vir podatkov. Ker sem v ODBC že določil povezavo za Radio Kranj je izbira enostavna. Povezavi še nadenem ime RadioKranj. Določanje ustrezne podatkovne zbirke preko zavihka Data Source Name kaže slika 10. Slika 10. Zavihek Data Source Name za povezavo projekta z podatkovno zbirko S pritiskom na OK se zdaj v zavihku pod menijem Application pokaže želena podatkovna zbirka z ustreznimi tabelami, kot kaže slika 11. Slika 11. Podatkovna zbirka z ustreznimi tabelami v zavihku Podatkovne zbirke S tem je orodje pripravljeno za umeščanje dinamičnih vsebin na delovno površino v DW. Samo umeščanje omogoča sosednji zavihek Bindings 18. V tem zavihku je moč določiti vse dinamične akcije, ki se bodo dogajale na spletnih straneh. 18 Vezi; na delovno površino ne prenesemo dejanskih podatkov, temveč zgolj pot do njih v podatkovni zbirki. Od tod ime Vezi. Iztok Golob: Prenova spletne strani Radia Kranj 28

29 9. PRIKAZ DINAMIČNIH VSEBIN Čeprav je podatkovna zbirka izdelana in povezana s projektom, zastavljenim v programu DW, ni iz nje na spletni strani še niti enega podatka. Da se bodo podatki prikazovali je treba najprej določiti: katere zapise iz baze sploh želimo videti kje na spletnih straneh naj se zapisi prikazujejo Ker lahko podatkovne zbirke vsebujejo zelo veliko vsemogočih podatkov, je ena od pomembnejših nalog priklicati le tiste, ki jih na nekem mestu spletne predstavitve res potrebujemo. Spletna stran Radia Kranj ni v tem nobena izjema. Pomembno je, da so želeni podatki pravilno filtrirani in razvrščeni POIZVEDBE Za prikazovanje informacij iz podatkovne zbirke bom ustvaril več recordsetov 19. Poizvedba sicer ni nič drugega kot v SQL jeziku zapisan poizvedovalni stavek, sestavljen iz kriterijev, ki opredelijo, kateri podatki naj se izpišejo. Te podatke potem uporabim kot vir informacij za dinamične strani spletne predstavitve Radia Kranj (Macromedia, str. 50). V primeru poizvedbe gre torej za ukaz podatkovni zbirki naj pokaže točno določeno informacijo. Ukaz torej, s katerim v DW udejanjimo naše želje (MacFarland, ). V prostem jeziku bi denimo zahtevali naj se prikažejo vsi vnosi izgubljenih hišnih ljubljenčkov zadnjih 24 ur, na podoben način pa delujejo tudi SQL poizvedbe. Prosti jezik je nasploh pri snovanju in pisanju poizvedovalnih stavkov nepogrešljiv. Poizvedbe so lahko zelo preproste, lahko pa so tudi zapletene. Ena najbolj opaznih prednosti programskega orodja DW je prav enostavno ustvarjanje poizvedb. Tu nalašč uporabljam besedo ustvarjati, saj DW s svojim vmesnikom omogoča, da jih ustvarjamo brez kakršnegakoli poznavanja jezika SQL. Dovolj je, da v vmesniku poimenujemo poizvedbo, izberemo tabelo in kriterije, pa DW sam sproti proizvede oziroma izpiše ustrezno kodo. (Macromedia, str. 50). Na kratko rečeno, programer v DW ne potrebuje nobenega znanja o SQL, pa bo poizvedbe lahko ustvarjal brez težav. Poizvedbe nam pomagajo priklicati vsebino točno določenih stolpcev tabele, omogočajo urejanje izpisov po abecedi, padajoče ali naraščajoče. Še več, izpišejo lahko točno določen podatek, ki ga iščemo s pomočjo iskalnika. Verjetno ni potrebno posebej poudarjati, da so pri tem tudi zelo hitre. 19 Poizvedbe. Iztok Golob: Prenova spletne strani Radia Kranj 29

30 9.2. IZDELAVA POIZVEDB Poizvedbe začnemo ustvarjati s pritiskom na gumb»+«v zavihku Bindings, s katerim se nam odpre obrazec za poizvedbo. Kaže ga slika 12. Slika 12. Obrazec za poizvedbo za določanje dinamičnih vsebin Obrazec omogoča zelo enostavno ustvarjanje in popravljanje poizvedovalnih stavkov. Najprej je poizvedbo potrebno poimenovati, v primeru Ekipe bo njeno ime EkipaRS. V okencu SQL bi sicer lahko želeni poizvedovalni stavek napisal ročno, vendar pa to lahko naredi tudi s pomočjo DW. S tem, ko bom v spodnjem okencu Database items 20 poiskal tabelo Ekipa in pritisnil gumbek Select, se bo v okencu SQL samodejno izpisal poizvedovalni stavek. Glede na to, da želim prikazati le tistega voditelja, ki je trenutno na programu, datum nastopa je shranjen v stolpcu danes, označim dan, pritisnem na gumbek»where«in dodam filter. 20 Predmeti podatkovne zbirke Iztok Golob: Prenova spletne strani Radia Kranj 30

31 Enostavno izpolnjevanje obrazca za poizvedbe in določanje poizvedovalnih SQL stavkov kaže slika 13. Slika 13. Izpolnjevanje obrazca za poizvedbo, nastajanje SQL poizvedovalnih stavkov in določanje dinamičnih vsebin 9.3. TESTIRANJE POIZVEDBE Obrazec nam ves čas omogoča tudi testiranje poizvedbe, s čimer opozori na morebitne napake ali pomanjkljivosti. Pred nadaljevanjem dela in umeščanjem zadetkov na spletno stran je to zelo dobrodošla možnost. Aktiviramo jo preprosto z gumbkom Test. Slika 14 prikazuje testiranje poizvedovalnih SQL stavkov. Slika 14. Testiranje SQL stavkov Iztok Golob: Prenova spletne strani Radia Kranj 31

32 9.4. UMEŠČANJE NA SPLETNO STRAN Od tu naprej je umeščanje podatkov iz podatkovne zbirke na spletno stran le še vprašanje določanja položaja na delovni površini. Pod zavihkom Bindings odprem posamezno poizvedbo, v kateri so razvidna imena stolpcev tabele v podatkovni zbirki.če želim denimo vnesti sliko iz poizvedbe EkipaRS, sliko označim in pritisnem Insert 21. Seveda se je treba prej postaviti na izbran položaj na delovni površini. Lahko pa z miško enostavno tabelo zgrabim in jo nesem na izbrano mesto. Slika 15 prikazuje umeščanje elementa poizvedbe na delovno površino v DW. Slika 15. Vnašanje in umeščanje zadetkov na delovno površino Zavihek Bindings, pod jezičkom Server Behaviour, omogoča tudi določanje števila izpisanih zadetkov in pisanje pogojnih stavkov. Pomaga nam razporediti zadetke na več strani in še bi lahko naštevali vnaprej pripravljene funkcije DW, ki bi jih morali sicer kodirati ročno. Poudariti velja, da se na delovni površini v DW rezultati poizvedbe ne pokažejo, temveč le imena vezi, denimo EkipaRS.Slika in EkipaRS.Moderator. Z opisanim postopkom resda določimo katere podatke in kje jih bomo izpisovali, sami podatki, ki jih kličemo, pa se na delovno površino DW ne prenesejo. Zgolj vezi do podatkovne zbirke, s pomočjo katerih strežniku povemo, kje bo želene podatke našel in pod kakšnimi pogoji jih bo pokazal na spletu. 21 Vstavi Iztok Golob: Prenova spletne strani Radia Kranj 32

33 Mimogrede, koliko zadetkov želimo prikazati lahko določimo bodisi ročno v poizvedovalnem stavku, bodisi z ukazom Repeat 22, DW pa, v opozorilo, vsebino, namenjeno ponavljanju, uokviri in označi z nalepko Repeat. Slika 16 že prikazuje izpis poizvedbe EkipaRS na internetu Slika 16. Izpis poizvedbe EkipaRS na internetu 9.5. ŠE VEČJA DINAMIČNOST Moč DW pri izdelavi dinamičnih spletnih strani se s tem še zdaleč ne konča. Izkoristiti ga je moč še v precej večji meri, kot zgolj za osnovno prikazovanje podatkov iz podatkovne baze. Če ostanemo za trenutek pri sliki 16, in si bolj pozorno ogledamo levi meni, se na prvi pogled zdi logično, da vsaka od povezav vodi do svojega dokumenta oziroma strani. V primeru spletne predstavitve Radia Kranj to ne drži, saj bosta za prikaz seznama in naprej vsebine oddaj, ali fotoalbuma, zadostovala zgolj dva dokumenta. Na tem mestu bi še enkrat spomnil na strukturo podatkovne zbirke in medsebojno povezanost tabel. Ločeni dokumenti za vsako oddajo in fotoalbum posebej, bi bili sicer mogoči, vendar potratni, saj bi jih imeli na strežniku več deset, temu primerno bi zasedali več prostora in nalagali več dela. Dokument za izpis naslovov oddaj in fotoalbumov se bo imenoval Seznam.asp, za vsebino posameznih oddaj in fotoalbumov pa Vsebina.asp. Ali se bo na dokumentu Seznam. asp prikazal seznam oddaj ali seznam fotoalbumov bo odvisno od obiskovalca oziroma njegove izbire. Poenostavljeno rečeno, če bo kliknil na povezavo Oddaje, se bo na dokumentu Seznam.asp, na katerega bo avtomatično skočil, pokazal le seznam oddaj. Enako bo od njegove izbire v nadaljevanju odvisna vsebina dokumenta Vsebina.asp. Od izbire primerno se bo obiskovalcu na dokumentu Vsebina.asp bodisi pokazala vsebina oddaje Kaj za kosilo, bodisi Gremo na potep itd. Poudariti velja, da tudi izgradnja dinamičnih dokumentov v DW ne zahteva nobenega poznavanja jezika asp, saj DW ponuja v pomoč pregledne in lahko razumljive obrazce, ustrezno kodo pa proizvede izbiri primerno. 22 Ponovi Iztok Golob: Prenova spletne strani Radia Kranj 33

34 Za lažje razumevanje poglejmo sliko 17, kako izgleda nekaj tipičnih vnosov v MS Accessovi tabeli info. Slika 17. Pogled na vnose v tabeli info Tabela Info kaže, da sta v stolpcu Link definirana bodisi Fotoalbum ali Oddaja. Da bi v dokumentu Seznam.asp pokazali bodisi seznam naslovov Fotoalbumov, bodisi Oddaj, je potrebno oblikovati poizvedovalni stavek, ki bo upošteval parameter. Kot že rečeno si pri oblikovanju poizvedovalnih stavkov lahko precej pomagamo kar s prostim jezikom in ga potem prevedemo v SQL. Denimo: Izpiši naslove, ki imajo v stolpcu Link parameter Seznam oddaj. Najprej je treba seveda odpreti dokument Seznam.asp, ga povezati s podatkovno zbirko in odpreti obrazec za izdelavo poizvedbe. Sledi izdelava poizvedbe, v konkretnem primeru, jo bom poimenoval SeznamRS, izbral tabelo Info, potreben pa je še filter, zaradi katerega se bo na spletni strani izpisoval bodisi seznam oddaj, bodisi fotoalbum. Pogoj, ki bo osnova za pravilno izpisovanje zadetkov na internetu, mi bo spet s svojim obrazcem Recordset pomagal spisati DW. V ta namen ponuja opcijo Simple 23. Slika 18 že prikazuje obrazec Simple, zato gumbka ni videti, se pa nahaja na istem mestu kot Advanced Preprosto 24 Napredno Iztok Golob: Prenova spletne strani Radia Kranj 34

35 Slika 18 prikazuje pogled na obrazec Simple v obrazcu za poizvedbe. Slika 18. Obrazec Simple Uporaba je podobna, razlika je le pri tem, da pogled Simple pomaga pri filtriranju, ki ga potrebujemo, Advanced pa omogoča ročno pisanje ali dodajanje SQL. V primeru dokumenta Seznam.asp torej določim, da je filter Link. S pritiskom na gumb Test, se namesto zadetkov pokaže novo okence, ki zahteva parameter. Okence kaže slika 19. Slika 19. Okence za vpis parametra V primeru, da vpišemo Seznam oddaj, se nam bodo na izpisu pokazale le oddaje oziroma le tisti vnosi, ki imajo v podatkovni zbirki, pod stolpcem Link vnos Seznam oddaj. Kot kaže slika 20. Iztok Golob: Prenova spletne strani Radia Kranj 35

36 Slika 20. Testni izpis po določitvi parametra Poizvedba s filtrom Seznam oddaj pokaže cel kup zadetkov, pri čemer se naslovi oddaj večkrat ponovijo, torej naloga še ni povsem dokončana. Da bi se na strani Seznam.asp pokazali le naslovi posameznih oddaj in ne vsi vnosi, ki so v podatkovni zbirki, se bom vrnil v obrazec Advanced in ročno dopolnil SQL poizvedovalni stavek z ukazom DISTINCT. Z njim bom poizvedbi ukazal, naj istih naslovov ne ponavlja. Slika 21 prikazuje ročno dopolnjevanje SQL poizvedovalnega stavka. Slika 21. Ročno dopolnjevanje SQL stavka 9.6. IZDELOVANJE DINAMIČNIH POVEZAV S tem, ko je poizvedba, ki bo bodisi nanizala naslove oddaj bodisi naslove fotoalbumov, oblikovana, je potrebno na delovni površini dokumenta Seznam.asp določiti mesto, kjer se bodo zadetki iz podatkovne zbirke izpisali, poudariti pa velja, da izpisi za zdaj še niso dinamični in denimo ne omogočajo skoka naprej, kar kaže slika 22. Iztok Golob: Prenova spletne strani Radia Kranj 36

37 Slika 22. Testni izpis na internetu brez dinamične povezave naprej Dinamični prikaz seveda ne bi bil smiseln, če ne bi bili izpisi avtomatično tudi povezava naprej. Drugače rečeno, izpisani naslovi oddaj morajo sedaj služiti tudi kot povezava do dokumenta Vsebina.asp. Samo ime pove, da se bo na njej izpisovala vsebina tiste oddaje ali fotoalbuma, katerih naslov bo obiskovalec izbral. Povezovanje dveh dokumentov oziroma podstrani na spletu spet opravi programsko orodje DW, pri čemer od nas zahteva, da izpolnimo dva obrazca. Go to Detail page 25, in Go to related page 26. Oba sta pod znakom + na že uporabljenem jezičku Server behaviours GO TO DETAIL PAGE Obrazec Go to detail page je treba izpolniti v dokumentu Seznam.asp, torej v tistem dokumentu, s katerega bo obiskovalec skočil na dokument Vsebina.asp. Povezavo DW spiše sam, obrazec zahteva le ciljni dokument. Ker bo obiskovalec z dokumenta Seznam.asp skočil na Vsebina.asp, pod Detail page določim Vsebina.asp. Izberem tudi izpis, v katerem sem določil, kateri podatki naj potujejo naprej, ter določil parameter, ki služi kot povezava. V tem primeru je to naslov oddaje. Označiti je potrebno še, da gre za URL parameter. Slika 23 prikazuje obrazec Go to Detail page. Slika 23. Obrazec Go to detail page 25 Skoči na določen dokument 26 Določi soroden dokument Iztok Golob: Prenova spletne strani Radia Kranj 37

38 Izpisi na spletu so po potrditvi že dinamični in omogočajo skok naprej na dokument Vsebina.asp, o čemer priča klasična podčrtanost. Slika 24 kaže razliko, kjer izpisi v dokumentu Seznam.asp zdaj že omogočajo dinamično povezavo. Slika 24. Izpisi so dinamični in omogočajo povezavo Z drugimi besedami, če želim skočiti na Vsebina.asp in tam pokazati vsebino izbrane oddaje ali fotoalbuma, najprej določim dokument Vsebina.asp kot cilj, izberem poizvedbo, v kateri sem določil naj se prikazujejo naslovi, in nenazadnje določim parameter, ki podatke filtrira. V primeru strani Vsebina.asp, želim podatke ločiti po naslovu oddaj GO TO RELATED PAGE Še manj dela načelno zahteva obrazec Go to related page. Načelno zaradi tega, ker zahteva za vzpostavljanje stika med dvema dokumentoma le potrdilo od kod podatki prihajajo, torej iz dokumenta Seznam.asp in potrditev, da gre za URL parameter. Slika 25 prikazuje obrazec Go to related page. Slika 25. Obrazec Go to related page Iztok Golob: Prenova spletne strani Radia Kranj 38

39 Preden pretok podatkov steče, je potrebno tudi v dokumentu Vsebina.asp določiti poizvedbo, ki bo s pomočjo poizvedovalnega stavka in kriterijev priklicala želene podatke. Če so v dokumentu Seznam.asp poklicani le naslovi oddaj iz tabele info, bodo v dokumentu Vsebina.asp klicani podatki razvrščeni v več različnih tabel, povezanih z identifikacijskimi Id številkami. Temu primerno bolj zapleten bo tudi poizvedovalni stavek, na podlagi katerega bodo ustrezni podatki priklicani. Drugače rečeno, namen dokumenta Vsebina.asp pravzaprav ni zgolj filtriranje oddaj po naslovih in ustvarjanje še enega seznama, temveč povedati še kaj več o samih vnosih. Vsebinski podatki se skrivajo v tabelah teksti in fotoalbum, da bi prišel do njih, moram torej v poizvedbi VsebinaRS poizvedovalni stavek razširiti na tri tabele in jih povezati med sabo. To je v orodju DW treba storiti ročno. Slika 26 prikazuje poizvedovalni stavek, ki omogoča poizvedovanje po več tabelah hkrati. Slika 26. SQL poizvedovalni stavek po več tabelah hkrati Izbor vsebin za izpis se je zdaj torej razširil na tekste in fotografije, da bi jih dejansko videli tudi na spletu, pa jih je treba umestiti in razporediti na delovni površini. Kot kaže slika 27. Slika 27. Razpored dinamičnih vsebin na delovni površini Iztok Golob: Prenova spletne strani Radia Kranj 39

40 9.9. ZUNANJE POIZVEDBE Zgornji primer je pokazal, da je pisanje zapletenejših poizvedovalnih stavkov v obrazcu Recordset sicer možno, vendar nam DW pri tem ne zna pomagati. Predvideva pa možnost, da poizvedovalni stavek uvozimo kar iz MS Accessa, ki sicer služi kot podatkovna zbirka. Poudariti velja, da pisanje enostavnih poizvedovalnih stavkov v MS Accessu ni smiselno, pri zapletenejših poizvedbah, kot je zgornja, pa pride možnost še kako prav. Po ocenah se zahtevnejša poizvedba izvrši precej hitreje v podatkovni zbirki, kot pa če jo izvrši DW skripta. Prednost je tudi ta, da je lahko uporabljena večkrat, s čimer omogoča tudi lažje vzdrževanje Obrazec za izdelovanje poizvedb ponuja omenjeno možnost izrabe MS Accesovih poizvedb v okencu Database Items, pod vrstico Views. Izberemo jih enostavno tako, da označimo želeno poizvedbo in pritisnemo Select. Ker so pogoji znotraj poizvedbe VsebinaQ že spisani ni treba v polju za pisanje poizvedovalnih stavkov ničesar dodajati. Vključevanje zunanjih poizvedovalnih stavkov kaže slika 28. Slika 28. Vključevanje zunanjih SQL stavkov Iztok Golob: Prenova spletne strani Radia Kranj 40

41 9.10. V PRAKSI Če se torej vrnem nazaj na dokument Seznam.asp, dobim s klikom na internetno povezavo Fotoalbum torej seznam naslovov fotoalbumov, kot to kaže slika 29. Slika 29. S klikom na povezavo Fotoalbum skočimo na stran Seznam.asp, kjer se izpišejo vsi fotoalbumi Pritisk na povezavo Seznam oddaj pokaže na strani Seznam.asp vnose, ki imajo v bazi podatkov, v tabeli info, v stolpcu link, kriterij Seznam oddaj. Kot kaže slika 30. Slika 30. S klikom na povezavo Seznam oddaj skočimo na stran Seznam.asp, kjer se izpišejo vsi naslovi oddaj Namesto več strani, zadostuje torej za posamezna poglavja le en dokument Seznam.asp, ki pa omogoča skok naprej na stran»vsebina.asp«. Tam se, odvisno od pritisnjenega naslova pokaže vsebina. Tako se v primeru izbire povezave Najtežji Gorenjec 2003 pokažejo teksti in slike, ki imajo v tabeli info, pod stolpcem Naslov vpis Najtežji Gorenjec Slika 31. Iztok Golob: Prenova spletne strani Radia Kranj 41

42 Slika 31. S klikom na povezavo Najtežji Gorenjec skočimo s Seznam.asp na Vsebina.asp in dobimo fotoalbum Najtežji Gorenjec s pripadajočimi podatki in slikami. Isto bi prišli tudi do posameznih oddaj. Če bi izbrali Seznam oddaj in bi se nam na strani Seznam.asp pojavil seznam z naslovi oddaj, bi denimo s klikom na Kaj za kosilo dobili vse vnose s tem naslovom, kot to kaže slika 32.. Slika 32. S klikom na povezavo Kaj za kosilo skočimo na stran Vsebina.asp in dobimo zadetke z naslovom Kaj danes za kosilo. Iztok Golob: Prenova spletne strani Radia Kranj 42

43 Primerjava slik 31 in 32 pokaže še nekaj dinamičnih elementov. Na vrhu se denimo samodejno in odvisno od izbrane povezave prikazujeta naslova rubrik, bodisi Seznam oddaj, ali Fotoalbum. Prav tako se odvisno od rubrike Fotoalbum ali Seznam oddaj prikazujejo naslovi odstavkov. V primeru fotoalbuma so naslovi odstavkov denimo: Nespregledano Datum Fotograf PS V primeru oddaje Kaj za kosilo se pokažejo: Uvod Sestavine Priprava Avtor Poudariti velja, da bi bili naslovi odstavkov v primeru, da bi izbrali povezavo Avtomobilistična oddaja drugačni. Spletna predstavitev izbere ustrezne naslove odstavkov na podlagi povezave tabele info s tabelo Glavaoddaj. Vnosu v tabeli info namreč preko identifikacijske številke določim tudi, katere naslove iz tabele Glava oddaj naj upošteva. Podobno velja tudi za vizitko, ki na sliki 32 leži levo od zadetkov. Spletna stran najprej ugotovi ali naj vizitko sploh prikaže, pri fotoalbumih je denimo ne, potem pa prav tako na podlagi identifikacijske številke v tabeli info in pripadajoče v tabeli OsI Oddaj pobere ustrezne vrednosti VNAŠANJE PODATKOV Podatke bo moč v bazo vnašati na dva načina. Lokalno, s pomočjo programa MS Accesss in preko internetnih obrazcev, ki bodo na voljo obiskovalcem. Program DW ponuja sicer tudi pri izdelavi obrazcev za vnašanje podatkov v bazo zelo učinkovito paleto orodij, popestreno z orodji za izdelavo strani za popravljanje in brisanje podatkov v bazi. Edina resna pomanjkljivost je vnašanje v več tabel hkrati. V primeru spletne predstavitve Radia Kranj se vsak vnos razporedi v več tabel, ki so med seboj povezane z identifikacijsko številko, zato je orodje za izdelavo obrazca, ki ga ponuja DW neuporabno in bo potrebno ročno kodiranje. Za primer bom uporabil obrazec Mali oglas, ki bo na voljo širši javnosti. Obiskovalec bo izbral ustrezno rubriko, ob malih oglasih bosta na voljo še izgubljeni predmeti in izgubljeni hišni ljubljenčki in vpisal ustrezen tekst. Rubrika se bo ob pritisku na gumb Pošlji razporedila v polje Naslov v tabeli info, tekst pa v polje Tekst00 v tabeli Texti. Nevede bo obiskovalec avtomatično v tabelo info dodal še identifikacijsko številko vnosa in datum vnosa, ter identifikacijsko številko samega teksta. Ostala polja bodo ostala prazna. Obrazec bo torej enostaven, z dvema vnosnima poljema. Oblikoval ga bom z grafičnim vmesnikom programa DW, kodo pa bom spisal ročno. Za izvedbo bosta potrebna dva dokumenta, oglas.asp in oglasarhiv.asp. Dokument Oglas.asp bo vseboval obrazec prikazan na sliki 33. Iztok Golob: Prenova spletne strani Radia Kranj 43

44 . Slika 33. Javni obrazec za vnos malega oglasa Obrazec za vnos oglasa v dokumentu oglas.asp bom izdelal s pomočjo orodja Insertion record form 27. Od nas zahteva ime povezave, ime tabele, v katero vnašamo, vpraša nas po dokumentu kamor po vnosu skočimo, ter ponudi okence, v katerem izberemo stolpce, v katere bodo podatki vneseni. Obrazec za vnašanje prikličem s pritiskom na jeziček Insert -> Aplication object --> Insert Record. Kaže ga slika 34. Slika 34. Insertion form za preprosto oblikovanje obrazca DW sicer v obrazec vključi vse določene stolpce, kot kaže slika Obrazec za vnašanje Iztok Golob: Prenova spletne strani Radia Kranj 44

45 Slika 35. Obrazec, ki ga DW ustvari na podlagi parametrov izbranih v Insertion form. Obrazec na tem mestu še ni končan. Vnosnemu polju Naslov bom določil vrednosti: Mali oglas Izgubljene živali Izgubljeni predmeti Vrstico z vnosnim poljem Link sem preprosto zbrisal, ker ni potrebna, vnosno polje Datum dogodka pa preimenoval v Tekst in ga povečal v več vrstično vnosno polje. Vse to omogočajo DW orodja preko grafičnega vmesnika. Insertion form na sliki 34 od nas zahteva tudi ciljno datoteko, kar pomeni, da preko obrazca zgolj sprejme podatke, vendar pa jih pošlje v obdelavo drugemu dokumentu, Oglasarhiv.asp. Ta bo podatke poslal v podatkovno zbirko in jih razvrstil v dve ločeni tabeli Info in Texti. Ker DW pri programiranju kode, ki bo razvrščala podatke v več tabel hkrati ne ponuja nobene pomoči, je treba kodo spisati ročno. Na prvi pogled se zdi rešitev zelo zapletena, vendar pa v resnici sorazmerno enostavna. Dokument bo programiran tako, da bo najprej v tabelo Texti vnesel tekst. Ukaz za to kaže slika 36. <% set INS = Server.CreateObject("ADODB.Command") INS.ActiveConnection = MM_RadioKranj_STRING INS.CommandText = "INSERT INTO texti (Text00) VALUES ('" + Replace(INS P1, "'", "''") INS.CommandType = 1 INS.CommandTimeout = 0 INS.Prepared = true INS.Execute() %> Slika 36. Koda potrebna za vnos oglasa v tabelo Teksti Iztok Golob: Prenova spletne strani Radia Kranj 45