Gör en enkel ASP-räknare

En besöksräknare som visar antalet besökare som text eller bilder

Du lär dig att göra en enkel besöksräknare som visar antalet besökare valfritt med text eller bilder. Observera att funktionen kräver tillgång till ASP-server. Filerna kan inte köras på en vanlig server utan ASP.

Filer som du behöver

Räknaren består i grunden av två filer:

rakna.asp Den här filen innehåller själva ASP-koden och den HTML-kod som visar antalet besökare.

raknare.txt Det här är en vanlig textfil, som skapas i till exempel Anteckningar. Om räknaren skall börja från 0 skriver du in 0 i textfilen, som inte får innehålla några andra tecken. Du kan också starta på ett annat värde, till exempel 320201. Då skriver du i stället detta värde i textfilen och sparar den.

Båda dessa filer skall ligga i samma mapp.

Bilder

Om du vill visa antalet besökare med "sifferbilder", behöver du dessutom en mapp för bilderna. Kalla mappen "bilder" och lägg den som undermapp till mappen med de båda andra filerna.

Till denna mapp gör du 10 bilder med siffrorna 0 – 9. Bilderna skall vara lika stora. Formatet kan vara *.gif, *.png eller *.jpg – i exemplet har jag valt *.jpg och alla bilder är 10 x 12 pixlar stora.

Formatet *.gif kan vara att föredra om du vill använda transparent bakgrund i bilderna.

Om du bara vill använda textvisning av besöksantalet, kan du slopa mappen "bilder" och bilderna helt. Det gör att det blir litet enklare att åstadkomma en snygg layout.

ASP-sidan

ASP-sidan skrivs i en vanlig textredigerare, som till exempel Anteckningar. Observera att filen måste sparas med filtillägget .asp för att det skall fungera.

Börja med grundkoden som i en vanlig HTML-sida.

<HEAD>
<TITLE>Besöksräknare</TITLE>
<LINK REL="stylesheet" HREF="text.css" TYPE="text/css">
</HEAD>

Anpassa sökvägen till stilmallen om du använder en sådan – annars tar du helt enkelt bort raden som börjar med <LINK REL.

Forsätt sedan med den grundläggande BODY-koden och den avslutande HTML-taggen:

<BODY topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="3">
<TR><TD width="100%">
<%
'Mellan dessa båda %-tecken skall ASP-koden placeras
%>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Nu kan du anpassa tabellens bredd och utseende som du vill, och till exempel placera den i mitten genom att lägga till

align="center"

i den inledande TABLE-taggen.

ASP-markörerna och kommentarer

All ASP-kod placeras mellan ASP-markörerna <% och %>.

Kommentarsrader inleds som ovan med ett enkelt citationstecken. Dessa rader hoppas över vid skriptkörningen. Du kan också placera kommentarerna i samma rad som ASP-koden, men efter denna – du ser det nedan på flera ställen.

Var flitig med kommentarer. Du kommer att ha nytta av det längre fram, när du kommer tillbaka till koden och vill förstå vad du gjorde. Man glömmer mycket fort!

Dimensionera variablerna

Det första vi nu skall göra är att dimensionera alla variabler som kommer att användas. Detta är inte alltid nödvändigt, men bra ändå eftersom det gör att man lätt kan hålla ordning på variablerna – missödet att man råkar kalla två variabler samma sak är annars besvärligt att redan ut. Alltså:

'Dimensionera alla variabler
Dim filObject   'File-objekt
Dim fsoObject   'FileSystemObject-objekt
Dim lngBesokare   'Innehåller antalet besökare
Dim SkrivBildsiffror   'Slingräknare för att med bilder visa antal besökare
Dim tsObject   'TextStream-objekt

Oftast kan man kalla variablerna vad man vill, men undvik för allt i världen å, ä och ö i variabelnamnen. Du gör det enklare för dig själv genom att ge variablerna "begripliga" namn – alltså namn som talar om vad variablerna innehåller.

Variabelnamnen får inte innehålla mellanslag – använd understreck om du vill ha "mellanrum", till exempel Skriv_Bildsiffror.

Efter varje variabelnamn gör du några mellanslag eller tabuleringar, skriver ett enkelt citationstecken och talar om vad variabeln är till för.

Du kan ange variablerna i vilken ordning du vill, men det är praktiskt att helt enkelt sortera dem i bokstavsordning. I större ASP-funktioner kan du ha 100 variabler eller ännu fler, och då blir det lättare att hitta dem när de är sorterade.

Hantera textfilen

Nu fortsätter vi till nästa kodavsnitt. För att kunna hantera textfilen som lagrar antalet besökare, använder vi FileSystemObject från Microsofts "Scripting Runtime Library". Detta objekt gör att vi kan läsa från och skriva till filerna på webservern.

I det här fallet skall vi läsa från filen raknare.txt coh sedan skriva till den. Med satsen nedan – raden under kommentarsraden – skapar vi en "instans" av FileSystemObject och låter variabeln fsoObject ta hand om den.

'Skapa en FileSystemObject-variabel
Set fsoObject = Server.CreateObject("Scripting.FileSystemObject")

Nu använder vi GetFile-metoden från FileSystemObject, och initierar File-objektet med den textfil som innehåller besökssiffran. Men för att kunna hämta textfilen raknare.txt måste vi ha sökvägen till filen på servern.

ASP innehåller objektet Server, som är till för att utföra specifika uppgifter på servern. Server-objektet har sju metoder, och av dem skall vi använda MapPath som returnerar den fysiska sökvägen och filnamnet på en resurs som anges i MapPath.

Eftersom vi lägger textfilen i samma mapp som asp-filen, behöver vi inte specifiera sökvägen.

'Initiera filobjektet med sökväg och namn på textfilen som skall öppnas
Set filObject = fsoObject.GetFile(Server.MapPath("raknare.txt"))

Nu när File-objektet är initierat med filen raknare.txt, kan vi utnytta TextStream-objektet. Detta har metoden OpenAsTextStream, som öppnar en angiven fil och returnerar ett TextStream-objekt. Detta kan användas för att läsa från och skriva till filen – i det här fallet filen raknare.txt.

'Öppna textfilen
Set tsObject = filObject.OpenAsTextStream

Nu har vi skapat ett TextStream-objekt. Med detta och metoden ReadAll läser vi in innehållet i raknare.txt i en variabel. Eftersom det som hämtas från textfilen är en textsträng, som vi vill omvandla till ett talvärde, utnyttjar vi VB Script-funktionen CLng.

'Läs in besöksantal från textfilen
lngBesokare = CLng(tsObject.ReadAll)

Variabeln lngBesokare har nu det antal som fanns i besöksfilen. Eftersom detta antal skall ökas med 1 – för den nya besökaren – lägger vi till 1.

'Öka besöksantalet med 1
lngBesokare = lngBesokare + 1

Med CreateTextFile-metoden från FileSystemObject, skapar vi nu en ny textfil med samma namn som den gamla – raknare.txt. Vi använder Server.MapPath på samma sätt som ovan för att få sökvägen, och låter den nya filen skriva över den gamla.

'Skriv över den gamla textfilen med en ny
Set tsObject = fsoObject.CreateTextFile(Server.MapPath("raknare.txt"))

Den nya textfilen är nu helt tom. I variabeln lngBesokare finns det nya tal som skall skrivas till textfilen, för att utnyttjas nästa gång en besökare kommer till sidan. Vi ser nu till att detta antal skrivs till textfilen.

Vi använder TextStream-metoden Write, och eftersom våra data består av ett talvärde använder vi VB Script-funktionen CStr för att göra en textsträng av talvärdet innan det sparas i textfilen.

'Skriv nya antalet till textfilen
tsObject.Write CStr(lngBesokare)

Variabeln lngBesokare innehåller fortfarande det talvärde vi behöver för fortsättningen. Men nu är vi färdiga med serverobjekten, så vi tömmer dem.

'Töm serverobjekten
Set fsoObject = Nothing
Set tsObject = Nothing
Set filObject = Nothing

Så här långt har vi:
  • Hämtat en textsträng ur en textfil
  • Omvandlat textsträngen till ett talvärde (numeriskt)
  • Ökat det numeriska värdet med 1
  • Tilldelat variabeln lngBesokare detta numeriska värde
  • Omvandlat det numeriska värdet till textvärde
  • Sparat textvärdet i textfilen
  • Tömt serverobjekten eftersom vi inte behöver dem längre

Och det vi har kvar efter allt detta är en enda variabel, som innehåller talvärdet. Med hjälp av denna variabel skall vi nu visa resultatet på sidan.

Skriva till webbsidan

ASP-objektet Response har en lång rad egenskaper och metoder. Bland dem finns metoder som gör att du direkt kan styra innehållet på en webbsida. Sidans innehåll skapas då på servern och skickas till klienten/besökaren.

Vi skall använda metoden Write, som enkelt uttryckt skriver ett strängvärde till en webbsida.

'Visa besöksräknaren som text
Response.Write(lngBesokare)

Detta betyder kort och gott: "Skriv innehållet i variabeln lngBesokare på webbsidan."

Nu gör vi en sammanfattning av hela ASP-koden så här långt:

<%
'Dimensionera alla variabler
Dim filObject   'File-objekt
Dim fsoObject   'FileSystemObject-objekt
Dim lngBesokare   'Innehåller antalet besökare
Dim SkrivBildsiffror   'Slingräknare för att visa antal besökare med bilder
Dim tsObject   'TextStream-objekt

'Skapa en FileSystemObject-variabel
Set fsoObject = Server.CreateObject("Scripting.FileSystemObject")

'Initiera filobjektet med sökväg och namn på textfilen som skall öppnas
Set filObject = fsoObject.GetFile(Server.MapPath("raknare.txt"))

'Öppna textfilen
Set tsObject = filObject.OpenAsTextStream

'Läs in besöksantal från textfilen
lngBesokare = CLng(tsObject.ReadAll)

'Öka besöksantalet med 1
lngBesokare = lngBesokare + 1

'Skriv över den gamla textfilen med en ny
Set tsObject = fsoObject.CreateTextFile(Server.MapPath("raknare.txt"))

'Skriv nya antalet till textfilen
tsObject.Write CStr(lngBesokare)

'Töm serverobjekten
Set fsoObject = Nothing
Set tsObject = Nothing
Set filObject = Nothing

'Visa besöksräknaren som text
Response.Write(lngBesokare)

%>

%> ovan betyder "här slutar ASP-koden". Allt som finns mellan <% och %> skall du placera mellan ASP-markörerna i HTML-koden. Resultatet kommer att se ut som nedan – jag gör indrag på ASP-koden så att den skall synas tydligare, men det är inget krav.

Dessutom bygger jag ut HTML-koden genom att lägga in en P-tagg, och jag lägger till ett " besökare" som skapar ett mellanrum innan ordet "besökare" skrivs efter besökarantalet:

<HEAD>
<TITLE>Besöksräknare</TITLE>
<LINK REL="stylesheet" HREF="text.css" TYPE="text/css">
</HEAD>
<BODY topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<TABLE border="0" width="100%" cellspacing="0" cellpadding="3">
<TR><TD width="100%">
<P>
  <%
    'Dimensionera alla variabler
      Dim filObject   'File-objekt
      Dim fsoObject   'FileSystemObject-objekt
      Dim lngBesokare   'Innehåller antalet besökare
      Dim SkrivBildsiffror   'Slingräknare för att med bilder visa antal besökare
      Dim tsObject   'TextStream-objekt

    'Skapa en FileSystemObject-variabel
      Set fsoObject = Server.CreateObject("Scripting.FileSystemObject")

    'Initiera filobjektet med sökväg och namn på textfilen som skall öppnas
      Set filObject = fsoObject.GetFile(Server.MapPath("raknare.txt"))

    'Öppna textfilen
      Set tsObject = filObject.OpenAsTextStream

    'Läs in besöksantal från textfilen
      lngBesokare = CLng(tsObject.ReadAll)

    'Öka besöksantalet med 1
      lngBesokare = lngBesokare + 1

    'Skriv över den gamla textfilen med en ny
      Set tsObject = fsoObject.CreateTextFile(Server.MapPath("raknare.txt"))

    'Skriv nya antalet till textfilen
      tsObject.Write CStr(lngBesokare)

    'Töm serverobjekten
      Set fsoObject = Nothing
      Set tsObject = Nothing
      Set filObject = Nothing

    'Visa besöksräknaren som text
      Response.Write(lngBesokare)
  %>
</P>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Bilder

Som du har sett, har vi ännu inte utnyttjat variabeln SkrivBildsiffror. Om du bara vill visa besökarantalet som vanlig text, behövs inte denna variabel. Men nu tänker jag förklara hur man visar besöksantalet grafiskt och då måste vi ha en slinga som lägger ut bilder av rätt siffor.

Gör bilderna

Gör 10 enkla bilder som visar siffrorna 0 – 9. Se till att alla bilder blir lika stora, och att siffrorna blir rätt placerade i bilden. I de flesta bildhanteringsprogram finns möjligheten att visa ett rutnät, vilket gör det lättare att placera alla siffror exakt i förhållande till bildkanterna. Spara dina bilder i en undermapp "bilder" till mappen där du sparar rakna.asp.

För att ha något att testa med kan du även kopiera bilderna nedan.

Visa bilderna

För att visa antalet besök som bilder i stället för som text, börjar vi med att ta bort de båda sista raderna i ASP-koden ovan:

'Visa besöksräknaren som text
Response.Write(lngBesokare)

Dessa skall ersättas med kodavsnittet som följer nedan.

Först gör vi en For ... Next-slinga som koden skall gå igenom lika många gånger som det finns siffror i värdet lngBesokare.

Antalet siffror, eller med andra ord antalet tecken i variabeln, får vi fram med uttrycket Len. Om lngBesokare innehåller värdet 12345 betyder "1 to Len(lngBesokare)" således 1 to 5 – slingan körs igenom 5 gånger.

'Slinga för att visa bilder för siffrorna
For SkrivBildsiffror = 1 to Len(lngBesokare)

Citationstecknen eller fnuttarna

Eftersom den följande kodraden skall skriva HTML-koden för att visa bilderna, och vi kommer att behöva diverse citationstecken i denna kod, kan ASP-koden lätt bli ganska rörig. Även den innehåller ju citationstecken.

I Response.Write innebär citiationstecknen ungefär "börja skriva här" och "sluta skriva här". Dessa citationstecken behåller vi. Men där citationstecknen är till för HTML-koden ersätter vi dem med chr(34). Det gör att det blir mycket lättare att kontrollera att alla citationstecken hamnar på rätt plats.

Var och en som sysslar med någon typ av skript eller programmering som kräver citationstecken (fnuttar) på rätt plats och av rätt sort, upptäcker snart hur bökigt det kan vara att hitta de felaktiga fnuttarna. I JavaScript kan man växla mellan enkelfnuttar (') och dubbelfnuttar (") för att få till det rätt. Det går inte alltid i ASP-kod, eftersom enkelfnuttarna kan tolkas som "resten av raden är en kommentar som inte skall utföras".

Ett exempel

<IMG align="left" src="bilder/1.jpg" width="8" height="11" alt="1">

Här finns 10 citationstecken som skall finnas med i HTML-koden, men som rör till det i ASP-koden.

Vi skriver nu detta som det skulle se ut i ASP-koden, med ASP-kodens citationstecken inlagda men med HTML-kodens citationstecken borttagna – observera att jag lägger in de mellanslag som bör finnas med:

"<IMG align=" & "left" & " src=" & "bilder/1.jpg" & " width=" & "10" & " height=" & "12" & " alt=" & "1" & ">"

Här har vi 11 par av citationstecken och i varje par står det första citationstecknen för "börja skriva här" medan det andra betyder "sluta skriva här". Tecknen & mellan paren betyder "fortsätt med".

Den HTML-kod som den här ASP-koden skulle skriva saknar helt citationstecken och fungerar inte.

På varje plats där det i HTML-koden skall finnas ett citationstecken, petar vi nu in ett sådant men med teckenkoden för citationstecken. Dessutom lägger vi till &-tecknen för "fortsätt med". Resultatet blir det här:

"<IMG align=" & chr(34) & "left" & chr(34) & " src=" & chr(34) & "bilder/1.jpg" & chr(34) & " width=" & chr(34) & "10" & chr(34) & " height=" & chr(34) & "12" & chr(34) & " alt=" & chr(34) & "1" & chr(34) & ">"

Tio sådana kodade citationstecken finns nu på plats och koden som den skrivs till sidan kommer att se ut så här:

<IMG align="left" src="bilder/1.jpg" width="10" height="12" alt="1">

Det vill säga precis sådan som vi ville ha den.

Om det bara var den kodraden som skulle skrivas till sidan, hade det naturligtvis varit enklare att avsluta ASP-koden först och sedan klämma in den rena koden.

Men vi skall inte skriva en enda sådan rad, utan så många som det finns tecken i variabeln lngBesokare. Dessutom skall värdet i "scr" och "alt" ändras beroende på vilka siffror som finns i lngBesokare.

Vi utgår från den färdigfnuttade kodraden ovan. För att hitta rätt talvärde i variabelvärdet, använder vi funktionen Mid från VB Script.

Den hämtar talvärdet som står från och med den plats som "varvet" i For ... Next-slingan anger. I fjärde varvet hämtar den alltså talvärdet 45, men eftersom vi bara vill ha den första siffran anger vi detta med ett ,1.

Ordern vi ger blir då "hämta ett talvärde från och med fjärde positionen", när slingan befinner sig i fjärde varvet.

Den färdiga ASP-koden ser ut så här:

'Visa besöksräknaren som bilder - hela Response.Write skrivs som en rad
Response.Write("<IMG align=" & chr(34) & "left" & chr(34) & " src=" & chr(34) & "bilder/" & Mid(lngBesokare, SkrivBildsiffror, 1) & ".jpg" & chr(34) & " width=" & chr(34) & "10" & chr(34) & " height=" & chr(34) & "12" & chr(34) & " alt=" & chr(34) & Mid(lngBesokare, SkrivBildsiffror, 1) & chr(34) & ">")

Slutligen talar vi om att For ... Next-slingan skall börja om tills den har gåtts igenom så många gånger som det finns positioner i variabeln lngBesokare.

Next

Det färdiga bildvisningspaketet, som skall ersätta raderna för textvisning:

'Slinga för att visa bilder för siffrorna
For SkrivBildsiffror = 1 to Len(lngBesokare)

'Visa besöksräknaren som bilder - allt det här skrivs som en rad
Response.Write("<IMG align=" & chr(34) & "left" & chr(34) & " src=" & chr(34) & "bilder/" & Mid(lngBesokare, SkrivBildsiffror, 1) & ".jpg" & chr(34) & " width=" & chr(34) & "10" & chr(34) & " height=" & chr(34) & "12" & chr(34) & " alt=" & chr(34) & Mid(lngBesokare, SkrivBildsiffror, 1) & chr(34) & ">")

Next

Glöm inte att avsluta ASP-koden med ett %>

Lägg in räknaren på webbsidan

För att ASP-räknaren skall fungera, måste den finnas på en sida som har filändelsen .asp. Det enklaste sättet att koppla ihop räknaren med din redan befintliga webbsida är att placera den i en ram.

I index-filen, där ditt ramdokument finns, lägger du helt enkelt till en ram och anger att den skall visa rakna.asp.

© SupportData.Net