FYSIKUMS WEBB- OCH MEDIAKURSER

Moderna webbsidor är dynamiska webbsidor

Du har kanske redan lärt dig skapa en webbplats med webbsidor kodade i sidstruktureringsspråket HTML. Det är ju förhållandevis enkelt att lära sig HTML och att skapa egna hemsidor är ju i dag lite av en folksport.

Men de webbsidor du kan skapa med HTML har en bekymmersam egenskap: sidorna ser exakt likadana ut varje gång någon tittar på dem i en webbläsare. Det är ju helt OK om dina sidor innehåller material som inte ändrar sig mer ofta än att du har tid att manuellt redigera dem, men för en så enkel sak som att automatiskt lägga in dagens datum duger inte vanlig HTML.

Inte heller räcker HTML om du vill ha någon av de många dynamiska företeelser som vi har vant oss ska finnas i en webbplats, som t.ex sökning, gästböcker, chattar, biljettbokning o.s.v. Sådana funktioner kräver ofta stöd av någon form av databas eller annan stödprogramvara, och du har inga möjligheter att anropa sådana program från en vanlig HTML-sida.

Man brukar kalla webbsidor som är enbart kodade i HTML för statiska webbsidor, medan sidor vars innehåll beror på vad besökaren gör eller fyller i något formulär sägs vara dynamiska webbsidor. I dag är i princip alla webbplatser med ambitioner dynamiska, så om du hittills bara lärt dig koda HTML är det hög tid att gå vidare.

SSI - en enkel illustration av teknikerna för dynamiska sidor

För att förstå hur dynamiska webbsidor fungerar, både innehållsmässigt och tekniskt, kan det vara bra för dig att börja med den kanske enklaste dynamiska tekniken av alla, den som kallas SSI - Server Side Includes. Du kan inte göra särskilt mycket med SSI, så fortsätt gärna senare med att lära dig mer kompetenta tekniker (som PHP). Det du kan göra med SSI är bl.a:

• Infoga innehållet från en separat textfil in i en webbsida.
• Infoga dagens datum och aktuell tid i en webbsida.
• Beräkna storlek för en fil och datum när filen senast ändrades.
• Ta reda på viss information om besökaren, bl.a datoradress och typ av webbläsare.
• Anropa separata program (vanligtvis CGI-program) eller operativssystemkommandon.

Det är antagligen den första av dessa funktioner hos SSI som gett tekniken sitt namn: möjligheten att infoga text från en extern fil in i en webbsida. Detta kan låta banalt, men tänk på hur praktiskt det vore att kunna ha en separat fil med t.ex HTML-koden för den sidfot (med kontaktadresser och navigeringslänkar) som ska finnas nederst på varje sida i din webbplats. I stället för att behöva kopiera och klistra in denna kod i alla de hundratals sidor som kanske finns på din webbplats lägger du bara in en liten SSI-kodsnutt i varje sida, och placerar sidfotskoden i en separat fil som länkas in av SSI-koden. På så sätt behöver du bara ändra på ett ställe när du t.ex ändrar kontaktadress, i stället för att behöva gå in och redigera samtliga sidor på webbplatsen. En enorm arbetsbesparing!

SSI och XSSI

SSI introducerades omkring 1995 med den då mest populära webbservern NCSA HTTPd. Tekniken har spritt sig, och alla moderna webbservrar kan i dag tolka SSI-kod. Din SSI-kod ska därför i princip vara flyttbar från en webbservermiljö till en annan.

Efterföljaren till NCSA-servern heter Apache, och är den webbserver vi koncentrerar oss på i Fysikums kurser. Apache är också den server som har hand om de flesta av världens webbplatser. Med versionen 1.2 av Apache-servern från juni 1997 lanserades ett antal utvidgningar av SSI-tekniken under namnet XSSI (eng. eXtended Server Side Includes). Nyheter var bl.a egendefinierade variabler och en enkel villkorssats. Ytterligare utvidgningar har introducerats med senare versioner av Apache. Liksom vanlig SSI har kommandona i XSSI spritt sig till de flesta andra webbservrar, och man pratar väl i dag egentligen inte om "XSSI", utan säger nog helt enkelt bara "SSI" om alla SSI-liknande kommandon.

SSI är ett exempel på servertolkad inbäddad kod

Tekniken SSI är ett av många exempel på s.k. servertolkad kod (eng. server parsed code) eller inbäddad kod (eng. embedded code).

Grundidén är enkel men mycket kraftfull. Serveradministratören börjar med att installera en extra komponent till webbservern, en s.k. skripttolk, i vårt fall en SSI-tolk, som kan tolka SSI-kod och översätta koden till HTML-kod. Tolken är vanligtvis en integrerad del av webbservern och laddas i minnet när servern startas. I webbservern Apache, som vi använder oss av i Fysikums kurser, är SSI-tolken rent tekniskt ett s.k. exportfilter (eng. output filter).

Webbplatsutvecklaren skapar sedan vanliga webbsidor med HTML-kod (och eventuellt stilmallar, javaskript eller andra klientsidestekniker). Infogad mellan vanlig HTML-kod kan sedan speciell SSI-kod placeras, t.ex med kommandon för att infoga dagens datum eller för att klistra in en extern fil.

När sedan slutligen en SSI-kompletterad webbsida efterfrågas av en surfare på vår webbplats märker servern av att webbsidefilen innehåller SSI-kod. Filen skickas därför först vidare till skripttolken för bearbetning innan resultatet returneras till surfarens webbläsare, där HTML-koden tolkas och översätts till en snygg webbsida i webbläsarfönstret.

Alltså: webbsidans fil på serverdisken innehåller en blandning av HTML-kod och SSI-kod. Den webbsida som slutligen skickas tillbaka till webbläsaren innehåller bara ren HTML, en del statiskt handkodad från filen, resten dynamiskt skapad genom tolkningen av SSI-koden.

Så här ser tolkningsproceduren ut, schematiskt:

1. En HTTP-förfrågan om en webbsida skickas till webbservern.
2. Servern hämtar den efterfrågade filen från dokumentrotkatalogen på hårddisken.
3. Servern upptäcker att filen innehåller inbäddad SSI-kod, och skickar filen vidare för behandling till SSI-tolken.
4. SSI-tolken bearbetar den inbäddade koden, som resultetar i ren HTML-kod som infogas bland den ursprungliga HTML-koden.
5. SSI-tolken skickar resultatfilen med endast HTML-kod till servern.
6. Filen skickas tillbaka till webbläsaren som del av ett HTTP-svar.

Hur vet servern att en viss fil innehåller SSI-kod som måste bearbetas? Det finns flera metoder för detta, och en vanlig är att ge SSI-kodade filer en särskild filnamnsändelse, t.ex .shtml i stället för .html men det finns även andra lösningar.

Ett litet SSI-kodexempel

I den ursprungliga webbsidefilen kan det stå så här, med en blandning av text, HTML-kod och SSI-kod:

Du känner igen SSI-koden på att den är innesluten i speciella klamrar <!--# och --> medan HTML-kod innesluts i de enklare klamrarna < och >. Det första SSI-kommandot "config timefmt" i exemplet definierar utskriftsformatet för datum, nämligen "ÅÅÅÅ-MM-DD", medan det andra kommandot "echo var" skriver ut dagens datum på det angivna formatet. Efter bearbetning av filen i SSI-tolken kan den resulterande rena HTML-koden i filen som skickas till webbläsaren se ut så här:

När filen når webbsurfarens webbläsare tolkas slutligen även HTML-koden, och i webbläsarens fönster syns bara följande formaterade text:

Tolkningen av SSI-kod är inte beroende av valet av webbläsare

En intressant slutsats man kan dra av beskrivningen ovan är att tolkningen av SSI och annan servertolkad skriptkod är helt oberoende av vilken webbläsare webbplatsbesökaren använder: tolkningen sker ju av servern innan något skickats till webbklienten.

Den HTML-kod som skapas vid tolkningen av skriptet är dock naturligtvis lika känslig för egenheter i olika webbläsare som vanlig handkodad HTML. Ibland ser man det felaktiga påståendet att man kan undvika problemen med inkompatibla webbläsare genom att använda dynamiskt skapade webbsidor i stället för statiskt kodade sidor, men låt dig alltså inte luras. HTML tolkas av webbläsare och endast där; alla program på serversidan bryr sig inte ett dugg om hur HTML-koden är formulerad.

Alternativ till SSI

Tekniken SSI är den kanske enklaste varianten av servertolkad kod, enkel både därför att det är lätt att lära sig SSI-kodning, men också enkel i betydelsen primitiv. Så fort du vill åstakomma mer med dina dynamiska sidor än att infoga datum eller externa filer kan du behöva övergå till mer fullfjädrade och kompetenta serversidestekniker.

I Fysikums webbkurser använder vi oss av skriptspråket PHP, som liksom SSI fungerar genom inbäddning av PHP-kod i HTML-filer, kod som sedan tolkas och konverteras till HTML av en PHP-tolk som serveradministratören installerat på servern. Andra populära tekniker för inbäddad kod är ASP, JSP och CFML.

En äldre men fortfarande vida spridd teknik är att låta webbservern anropa externa program som genererar den dynamiskt skapade HTML-koden. En av de äldsta teknikerna för att hantera kommunikationen mellan webbservern och sådana externa program är CGI.

Men i denna artikel håller vi oss till SSI/XSSI. Först några ord om hur serveradministratören aktiverar SSI-tolken på webbservern, sedan exempel på hur du infogar SSI-kod i dina webbsidor. Se gärna referensdelen för en fullständig förteckning över SSI-kommandon, och lästipsen för fler texter i ämnet SSI.