GradientTop
PC
Vodeći IT časopis u Srbiji
PC #103 > Softver
ARHIVA BROJEVA | O ČASOPISU | POSTANI SARADNIK | PRETRAGA
preview
PCCD slagalica
Aleksandar Vacić
Počev od broja 99, uz časopis "PC" isporučujemo i CD sa programima, tekstovima, zabavnim materijalom... "Iza scene", ovaj CD se formira korišćenjem Web aplikacije postavljene na serveru SezamaPro, koja je saradnicima dostupna ma gde se nalazili. Kako sve to funkcioniše?
- PC #103 (Septembar 2004)
- U prodaji po ceni od 200 din

broj
pc103cd.zip
(623.53 KB)

PCCD slagalica

(kliknite za veću sliku)

Softver koji obezbeđuje pripremu CD-a, u našem žargonu „PCCD projekat“, sastoji se od dva segmenta. Prvi je CMS (Content Management System) aplikacija koja formira samu CD kompilaciju, a drugi je dizajn šablona, tj. različitih prezentacija izabranog materijala. Pošto je odlučeno da CD bude realizovan kao Web prezentacija, izbor tehnologije za drugi segment bio je sasvim jasan: XHTML i CSS. Na drugoj strani, u domenu CMS-a stvari nisu bile jednostavne...

Izbor tehnologije

Budući da CMS uglavnom podrazumeva „desetine i desetine različitih formulara“, najpre sam pomislio na ASP.NET. Ako kao primer uzimam select box (kakvih na PCCD-u ima mnogo) gde su jedna ili više opcija selektovana; čuvati selektovanost kroz razna stanja stranice u ASP-u predstavlja pravu muku. Nije neka mudrost, ali je zamoran i pipav posao, koji ASP.NET radi automatski. Drugi razlog za .NET svakako je i izazov rada sa novom tehnologijom – praktičan rad na konkretnom projektu predstavlja najbolju moguću „školu“.

ASP.NET ipak nije savršeno rešenje za ovu namenu. Prvo, alat – Visual Studio.NET. Slušao sam dosta hvalospeva od kolega o lakoći razvoja aplikacija, ali su to bile ili desktop aplikacije ili Web servisi, koji se izvršavaju na serveru. Kada sam video primer jednog (doduše izrazito komplikovanog) CMS-a kreiranog na bazi ASP.NET-a u pomenutom alatu, zgrozio sam se. Rezultujući HTML kod je predstavljao noćnu moru, koja se jedino može „održavati“ kroz VS.NET, slično onome što su radile prve verzije Front Page-a. Taj kod je sintaksno neispravan, pouzdano radi samo na Windows platformi i samo u Internet Explorer-u; u svim ostalim browser-ima je čista lutrija. Performanse su takođe slaba tačka – tu je bila čitava gomila nepotrebnog koda pa su stranice dva ili tri puta veće nego što je neophodno.

Pomislio sam da HTML kod (.aspx fajl) kreiram u nekom od svojih omiljenih tekst-editora a da logiku završim u VS.NET-u, ali je takva solucija brzo otpala. Osnovni problem je što je nemoguće ubediti VS.NET da ne menja već napisani kod. To se posebno odnosi na XHTML sintaksu koju ne podržava pa sve instance <br /> bivaju promenjene u <br>, što automatski znači neispravan kod. Mučio sam Google u nadi da postoji neki skriveni trik da se ovo spreči, ali bez rezultata. Čak da je rešenje tog problema i nađeno, ostaje sledeći: ako WebForms kontrole ne dodajem koristeći VS.NET, onda ću morati sam da pišem i odgovarajući kod za .cs fajl, a time poništavam (u najboljem slučaju) brzinu razvoja koju nudi ASP.NET.

Najzad sam se vratio ASP-u – prelomna tačka bila je Web stranica izvesnog programera koji se suočio sa istim problemom i zaključio da postoje samo dva rešenja. Prvi je da se napiše neka vrsta proxy servera koja će „čistiti“ kod pre nego što se pošalje browser-u, što daleko prevazilazi moje znanje programiranja, a i intuitivno mi se čini problematičnim za iole komplikovanije stranice. Drugi je da se svaka od ASP.NET kontrola „zavije“ u custom kontrolu koja će na serveru raditi istu stvar, ali će na klijentskoj strani kreirati isparavan (X)HTML kod. On je izabrao ovo drugo. Ja sam odustao od čitave priče. ASP.NET mnogo obećava kao Microsoft Windows platforma za Web, ali je u ovom trenutku nepogodna za bilo šta što na kraju treba poslati korisničkom browser-u.

CD prezentacija

(kliknite za veću sliku)

Paralelno sa ovim tehnološkim razmišljanjima tekao je niz e-mail poruka u kojima smo Dejan i ja razradili osnove buduće aplikacije, kao i „formulu“ CD-a. Njegov finalni izgled imate prilike da vidite u poslednjih nekoliko brojeva. U pozadini, srž CD-a čini skup HTML šablona od kojih se sklapaju HTML fajlovi. Dva najznačajnija šablona su naslovna i unutrašnja strana (slika 1) CD-a, koji sadrže zajednički kod HTML stranica (zaglavlje, početak i kraj body dela). Takođe sadrže specijalne kodove na koje se umeću glavna (PC Standard Pack, PC Fun, PC Plus itd.) i podređena (Impresum, Pretplata itd.) navigacija, a zatim i konkretni sadržaj Web stranice.

Na slici 2 dat je primer kreiranja glavne navigacije. Aplikacija prvo sakupi spisak komponenti CD-a i za svaku od njih (šablon A) umeće ime (npr. PC Fun) i link (html/PCFun.html). Dodatno se vodi računa o kontekstu stranice, ažuriranjem $SEC_CURRENT$ koda. Tako dobijeni HTML kod se zatim umeće umesto $SECTIONS$ u glavnom šablonu (B), a sve to zajedno se umeće u krajnju stranicu, na mesto specijalnog koda $PAGE_SECTIONS$. Podređena navigacija kreira se na isti način.

Konkretan sadržaj stranice kreira se slično, s tim što su šabloni za pojedinačni fajl, link ili tekst nešto komplikovaniji, sa više promenljivih delova (slika 3). Moja početna ideja bila je da svi CD-ovi koriste potpuno isti HTML kod, a da se dizajn menja isključivo promenom pridruženog CSS fajla. To bi bio najbolji primer mogućnosti CSS dizajna – koncept koji je popularisao www.CSSZenGarden.com. Nažalost, u ovom slučaju to nije bilo moguće. Organizacija samog sadržaja se više puta menjala, čak i nakon izlaska prvog CD-a iz štampe, a promena će biti i ubuduće. Ne znajući unapred tačnu strukturu finalnog HTML-a, nisam imao temelje na koje bih oslonio CSS. Dalje, i sam sadržaj nije precizno definisan. Veliki broj nepoznatih (slika 3) predstavlja i priličan broj mogućih iskakanja, te je svaki dizajn morao da bude fleksibilan i da „svari“ dugačka imena fajlova, postojanje ili nepostojanje velike slike (screenshot programa) i tome slično.

Zato svaki dizajn ima sopstveni set šablona, koji su u priličnoj meri slični, ali se razlikuju u detaljima koji omogućavaju lakše kalemljenje datog dizajna. Najveće razlike su upravo u globalnim šablonima (kao onaj na slici 1), to jest u načinu na koji su elementi raspoređeni. Bez obzira na tu razliku, trudio sam se da sadržaj ima logičan tok – stvarni sadržaj stranice na početku, a navigacija po CD-u na dnu.

Web aplikacija

(kliknite za veću sliku)

Organizacija CMS aplikacije je dvoslojna. Osnovni sloj je baza podataka koja sadrži sve moguće činioce CD-a. To su programi, linkovi, tekstovi, šabloni i komponente (PC Fun, PC Plus, PC Aplikacija itd.). Viši sloj omogućava izbor pojedinih činioca i njihovo grupisanje u celine na tekućem CD-u. Podaci u bazi se održavaju kroz interfejs sličan desktop aplikaciji (slika 4). Da bi simulacija bila vernija, aplikacija „hvata" svaki pritisak na strelice nadole i nagore (kada se kursor nalazi u nekom od polja) i premešta fokus na isto polje za naredni ili prethodni fajl.

Za implementaciju ove funkcionalnosti (srž koda je prikazan na slici 5), potrebno je da srodna polja imaju isto ime, čime automatski kreiraju JavaScript kolekciju (oDIcol), po kojoj se onda možete kretati numeričkim indeksom (oDI.ci = INDEX) koji se pridružuje svakom takvom polju (oDI). Tada se skloni fokus sa aktuelnog polja korišćenjem metoda blur() i prenese na susedno polje metodom focus().

Da bi se ubrzao unos programa, pojedina polja najlakše se mogu popuniti tako što Web kod pristupi fajlu na lokalnom disku (slika 6) i pročita ime i veličinu fajla kao i njegovu lokaciju u odnosu na početni direktorijum. Ova solucija je pogodna za unos pojedinačnih fajlova ali i dalje nepraktična za unos većeg broja fajlova, za čim je najveća potreba bila baš za prvi CD. Stoga postoji i automatski režim unosa (slika 7), kada je potrebno izabrati neki od direktorijuma na lokalnom disku, a aplikacija će pokupiti spisak fajlova u njemu i u svim njegovim poddirektorijumima i zatim ih uneti u bazu. Ono što ostaje je da se ažuriraju preostali podaci: ime, verzija, opis...

U realnom radu sa aplikacijom često se javlja potreba za snimanjem. Najlakše je to izvesti tako što se sadržaj formulara pošalje na server, izmeni i dodaci se snime, a zatim se korisnik vrati na istu stranu sa obaveštenjem o rezultatu. To povlači osvežavanje strane, što u situaciji kada sama stranica ima nekoliko desetina kilobajta neprijatno usporava rad. Ovaj problem je naročito vidljiv u režimu izmena, kada treba izmeniti nekoliko desetina fajlova. U Web aplikacijama nema nikakvih opcija za oporavak podataka ako nešto krene loše (prekid veze, smrzavanje browser-a ili celog računara), pa je najbolje s vremena na vreme snimati. Zbog toga sam slanje formulara umesto na glavni prozor prosleđivao na skriveni iframe. U njemu se obavljao posao na serveru i zatim uz pomoć JavaScript-a ubacivao rezultujuću poruku u prikazanu stranicu, bez njenog osvežavanja.

Na lokalnom disku

(kliknite za veću sliku)

Ukoliko ste se, na pomen pristupa lokalnom disku u prethodnim pasusima, zapitali „o čemu ovaj priča“, znajte da je pitanje sasvim na mestu. Opšte pravilo je da (iz sigurnosnih razloga) nijedan browser ne sme da dozvoli direktan pristup disku korisnika koji gleda Web prezentaciju. Najveći broj sigurnosnih propusta u ovom domenu ima Internet Explorer, što nije veliko iznenađenje s obzirom na blisku integraciju sa operativnim sistemom.

Ta integracija je istovremeno i najveća mana i najveća prednost ovog browser-a – sa jedne strane nepresušni izvor sigurnosnih rupa, ali sa druge omogućava da browser po potrebi pristupa lokalnom disku korisnika i time omogući kreiranje moćnih CMS aplikacija. Potreban sastojak je instaliran Windows Scripting Host, koji se isporučuje uz Windows 2000 i novije operativne sisteme, dok se za Windows 98 može preuzeti sa Microsoft-ovog sajta (ili sa našeg CD-a).

No, čak i tada će IE pri svakom instanciranju objekta postaviti sigurnosno pitanje. Da bi se to isključilo, potrebna je još jedna izmena u Tools / Internet Options meniju. Na Security tabulatoru, dok je selektovana zona Trusted sites, kliknite na Custom level i u dijalogu koji se pojavi pronađite Initialize and script ActiveX controls not marked as safe (slika 10). Predefinisana vrednost je Prompt – promenite na Enable i IE više neće postavljati nikakva pitanja, naravno samo za sajtove koje ste označili kao poverljive.

Kada ovo ne bi bilo moguće, jedini način da se barata sa fajlovima bi bio da su svi oni vidljivi sa Web servera. Što znači da bi Sezamov Web server mapirao neki disk (direktorijum) u PC Press-ovoj internoj mreži. Koliko bi sigurnosnih rupa otvorila takva varijanta, ne smem ni da pomislim.

Sastavljanje CD-a

(kliknite za veću sliku)

Grubo gledano, CD se sastoji od stalnih i promenljivih delova. U stalni deo spada uvodni tekst, impresum, informacija o pretplati i slični tekstovi koji su jednostavni i vremenom se malo menjaju. Pri tom se uglavnom sastoje od pasusa i pokojeg naslova. Promenljivi deo predstavlja sadržaj komponenti – fajlovi, linkovi i tekstovi. Ova tri entiteta mogu se kombinovati unutar komponente, a svaka komponenta može po potrebi da ima propratni tekst. Komponente se pune prostim izborom fajlova iz baze podataka (slika 11). Veličina trenutno izabranih fajlova se automatski računa (okvir ispod prvog select box-a), a veličina već izabranih fajlova (desni select box) očitava se u gornjem desnom uglu.

U bilo kom trenutku moguće je kreirati finalni image CD-a, što je zgodno za kontinualnu proveru rezultata. Kreirani image sadrži sve osim samih fajlova, koji se fizički dodaju na kraju. Aplikacija ima više opcija za proveru da li izabrani fajlovi zaista postoje na lokacijama pod kojima su zavedeni u bazi podataka, da bi se izbegle greške. Poslednja opcija je kreiranje batch fajla koji se izvršava na računaru korisnika i kopira sve izabrane fajlove u direktorijum files master-a budućeg CD-a, pri tom čuvajući staze. Dodatna mogućnost je da neki od tekstova vodi ka posebnom direktorijumu na CD-u ili pojedinim fajlovima koji nisu u bazi podataka.

Kao priličan problem se pokazalo kreiranje .html fajlova sa našim slovima. Iznenađujuće jer ASP/ADO kombinacija na IIS-u bez problema upisuje naša slova, uneta na Web formularu, u MSSQL server, i bez problema ih čita i prikazuje na ekranu. Međutim, kada sam pokušao da taj tekst upišem na disk koristeći FileSystemObject, sva naša slova su nestala ili bila zamenjena drugim (d umesto đ, z umesto ž i slično). Budući da je do tog momenta već bio razvijen dobar deo CMS-a, bio sam ozbiljno zabrinut da se cela stvar ne sruši. Kada sam već počeo da razmišljam o idejama tipa da „pretvorim tekst u binarni oblik pa...“, pronašao sam rešenje – ADO objekat Stream. On takođe ima mogućnost da upisuje fajlove na disk, po specificiranom kodnom rasporedu (slika 12). Ovim je poslednji veliki problem bio rešen – CD-ROM za broj 99 je finalizovan i otišao u proizvodnju...

Prilozi:

pc103cd.zip (623.53 kB)



.

PC
Twitter Facebook Feed Newsletter