Skapa en besöksräknare med ASP.NET
Förord
Alla har vi någon gång besökt en hemsida som innehålligt en räknare som visar hur många besökare sidan totalt haft. Denna typ av räknare är ingen teknisk innovation och har implementeras med praktiskt taget alla klient och serverspråk som finns tillgängliga vid webbutveckling. Men hur gör man en med hjälp av ASP.NET? Denna artikel visar hur man skapar en enkel besöksräknare till sin webbsida. Artikeln visar hur man använder färdiga bilder för varje individuell siffra och slår samman dessa till en stor bild som skickas tillbaka till webbsidan när någon besöker den.Innehåll
»»
»
Relaterade artiklar
» Använd global.asa för din webbserver i asp
Inledning
Bilderna är 16 pixlar breda och 18 pixlar höra. Samtliga bilder är av typen Gif och har samma namn som den siffra den representerar.Valet att använda individuella bilder för varje siffra, istället för att rita ut texten med ett valfritt typsnitt, är inget annat än demonstrativt. Valet att använda bilder betyder också att man väldigt enkelt kan byta ut bilderna för att få ett annat tema på sin räknare, utan att behöva ändra i koden.
Vidare vill jag påpeka att denna artikel inte behandlar hur man lagrar antalet besökare i någon form av datakälla, som en SQL Server. Ett fast värde används som ett fiktivt besökarantal, dock visar jag ett lämpligt ställe att placera denna kod.
Det första vi gör är att skapa en ny asp.net webbsida som vi kallar för Counter. Denna sida kommer att innehålla all kod för att skapa bilden till vår räknare. Nästa steg är att skapa en metod som innehåller koden för att generera vår bild.
Skapa bilden
Metoden bör lämpligen ta emot en parameter som anger det tal som skall skrivas ut på bilden. För att utsöka funktionaliteten lite mer så lägger vi även till en parameter som anger hur många tecken som räknaren skall bestå av. [C#]
private Bitmap CreateImage(int count, int digits)
{
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
End Sub
För att enklare kunna gå från siffra till bild så konverterar vi besöksantalet till en sträng vilket kommer att ge oss möjlighet att enkelt plocka ut ett tecken åt gången. Om besökarantalet innehåller färre siffror än den längd som vi vill att bilden skall innehålla så fyller vi på med nollor från höger.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,null 0');
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
End Sub
Nästa steg är att skapa den bild som vi skall skicka tillbaka till webbsidan. Eftersom vi vet hur många tecken som bilden skall innehålla samt hur stor varje bild är, så är det inte svårt att räkna ut hur stor den slutgiltiga bilden måste vara.
Givetvis skulle vi kunna skriva koden så att den själv läser ut hur stor varje bild är för en siffra för att låta oss skapa en mer flexibel lösning, men för att hålla koden enkel och lätt läst har jag valt att inte göra det. Den flitiga läsaren kan själv utsöka funktionaliteten på det sätt som önskas.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
End Sub
För att kunna rita på en bild måste vi skapa ett grafikobjekt för bilden. Grafikobjektet kommer att förse oss med funktionaliteten för att rita ut våra sifferbilder på den slutgiltiga bilden.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
' Skapa ett grafikobjekt för bilden som vi kan rita på.
Dim Gfx As Graphics = Graphics.FromImage(OutputImage)
End Sub
Ett av de viktigaste momenten I vår metod är att plocka ut varje individuell siffra för sig själv så att vi kan hämta rätt bild och rita ut den på den slutgiltiga bilden. Vi sätter upp en loop som går lika många varv som siffror vi vill att bilden skall innehålla.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
// Loopa igenom och skapa bilden.
for(int index = 0; index <= (countString.Length - 1); index++)
{
}
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
' Skapa ett grafikobjekt för bilden som vi kan rita på.
Dim Gfx As Graphics = Graphics.FromImage(OutputImage)
' Loopa igenom och skapa bilden.
For Index As Integer = 0 To (CountString.Length - 1)
Next
End Sub
Nu är det dags att hämta ut varje siffra. För att göra detta så använder vi oss av möjligheten att plocka ut ett tecken från en sträng på ett valfritt ställe i en sträng med hjälp av ett index.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
// Loopa igenom och skapa bilden.
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
for(int index = 0; index <= (countString.Length - 1); index++)
{
// Hämta ut nästa siffra som skall ritas ut
char siffra = countString[index];
}
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
' Loopa igenom och skapa bilden.
For Index As Integer = 0 To (CountString.Length - 1)
' Hämta ut nästa siffra som skall ritas ut
Dim Siffra As Char = CountString.Chars(Index)
Next
End Sub
När vi väl har plockat ut en siffra så kan vi slå upp rätt bild att rita ut. Samtliga bilder i detta exempel ligger i en egen katalog som heter images.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
// Loopa igenom och skapa bilden.
for(int index = 0; index <= (countString.Length - 1); index++)
{
// Hämta ut nästa siffra som skall ritas ut
char siffra = countString[index];
// Läs in bilden för den aktuella siffran.
string fullPath =
Path.Combine(Server.MapPath(null), string.Format(@"images\{0}.gif", siffra));
Bitmap digitBitmap = new Bitmap(fullPath);
}
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
' Skapa ett grafikobjekt för bilden som vi kan rita på.
Dim Gfx As Graphics = Graphics.FromImage(OutputImage)
' Loopa igenom och skapa bilden.
For Index As Integer = 0 To (CountString.Length - 1)
' Hämta ut nästa siffra som skall ritas ut
Dim Siffra As Char = CountString.Chars(Index)
' Läs in bilden för den aktuella siffran.
Dim ImagePath As String = _
Path.Combine(Server.MapPath(Nothing), String.Format("images\{0}.gif", Siffra))
Dim DigitBitmap As Bitmap = New Bitmap(ImagePath)
Next
End Sub
När bilden är hämtad är det dags att rita ut den på rätt ställe på bilden som skall skickas tillbaka till webbsidan. Bilderna för siffrorna skall alltid ritas ut överkant medens den horisontella positionen räknar vi fram med hjälp av indexet på den siffra vi behandlar och det faktum att vi vet att varje siffra är 16 pixlar bred.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
// Loopa igenom och skapa bilden.
for(int index = 0; index <= (countString.Length - 1); index++)
{
// Hämta ut nästa siffra som skall ritas ut
char siffra = countString[index];
// Läs in bilden för den aktuella siffran.
string fullPath =
Path.Combine(Server.MapPath(null), string.Format(@"images\{0}.gif", siffra));
Bitmap digitBitmap = new Bitmap(fullPath);
// Rita ut sifferbilden på den nya bilden.
gfx.DrawImage(digitBitmap, 16*index, 0);
}
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
' Skapa ett grafikobjekt för bilden som vi kan rita på.
Dim Gfx As Graphics = Graphics.FromImage(OutputImage)
' Loopa igenom och skapa bilden.
For Index As Integer = 0 To (CountString.Length - 1)
' Hämta ut nästa siffra som skall ritas ut
Dim Siffra As Char = CountString.Chars(Index)
' Läs in bilden för den aktuella siffran.
Dim ImagePath As String = _
Path.Combine(Server.MapPath(Nothing), String.Format("images\{0}.gif", Siffra))
Dim DigitBitmap As Bitmap = New Bitmap(ImagePath)
' Rita ut sifferbilden på den nya bilden.
Gfx.DrawImage(DigitBitmap, 16 * Index, 0)
Next
End Sub
Det som kvarstår att göra är att skicka tillbaka bilden från metoden så att vi slutligen kan skicka tillbaka den till webbsidan.
[C#]
private Bitmap CreateImage(int count, int digits)
{
// Skapa en sträng som ser ut som den text som
// bilden kommer att visas på webbsidan.
string countString =
Convert.ToString(count).PadLeft(digits,0);
// Skapa en bild med rätt storlek
Bitmap outputImage = new Bitmap((16 * digits), 18);
// Skapa ett grafikobjekt för bilden som vi kan rita på.
Graphics gfx = Graphics.FromImage(outputImage);
// Loopa igenom och skapa bilden.
for(int index = 0; index <= (countString.Length - 1); index++)
{
// Hämta ut nästa siffra som skall ritas ut
char siffra = countString[index];
// Läs in bilden för den aktuella siffran.
string fullPath =
Path.Combine(Server.MapPath(null), string.Format(@"images\{0}.gif", siffra));
Bitmap digitBitmap = new Bitmap(fullPath);
// Rita ut sifferbilden på den nya bilden.
gfx.DrawImage(digitBitmap, 16*index, 0);
}
// Skicka tillbaka den färdiga bilden.
return outputImage;
}
[VB.NET]
Private Function CreateImage(ByVal Count As Integer, ByVal Digits As Integer) As Bitmap
' Skapa en sträng som ser ut som den text som
' bilden kommer att visas på webbsidan.
Dim CountString As String = _
Convert.ToString(Count).PadLeft(Digits, "0")
' Skapa en bild med rätt storlek
Dim OutputImage As Bitmap = New Bitmap((16 * Digits), 18)
' Skapa ett grafikobjekt för bilden som vi kan rita på.
Dim Gfx As Graphics = Graphics.FromImage(OutputImage)
' Loopa igenom och skapa bilden.
For Index As Integer = 0 To (CountString.Length - 1)
' Hämta ut nästa siffra som skall ritas ut
Dim Siffra As Char = CountString.Chars(Index)
' Läs in bilden för den aktuella siffran.
Dim ImagePath As String = _
Path.Combine(Server.MapPath(Nothing), String.Format("images\{0}.gif", Siffra))
Dim DigitBitmap As Bitmap = New Bitmap(ImagePath)
' Rita ut sifferbilden på den nya bilden.
Gfx.DrawImage(DigitBitmap, 16 * Index, 0)
Next
' Skicka tillbaka den färdiga bilden.
Return OutputImage
End Sub
Visa bilden på webbsidan
Ett av problemen att lösa är hur vi skall få ut bilden till webbsidan. Lösningen på detta är enkelt då man ange en webbsida som bildnamn på en webbsida. Detta betyder att när webbsidan skall visa bilden så skickas det ett anrop till webbsidan som står som bildnamn och det är på denna sida som vi får skicka tillbaka vår nya bild som svar.För att implementera denna funktionalitet så placerar vi koden för att anropa metoden för att skapa bilden, samt att returnera den till webbsidan i page load händelsen för vår sida. Den viktigaste biten i denna koden är den sista raden som sparar bilden till den ström av information som skickas tillbaka till webbläsaren från servern.
[C#]
private void Page_Load(object sender, System.EventArgs e)
{
// Kod för att uppdatera räknaren i t.ex en databas,
// här används ett fast värde i demonstrationssyfte.
int visitorCount = 12345;
// Kod för att läsa antalet tecken som skall visas,
// hät används ett fast värde i demonstrationssyfte.
int numberOfDigits = 8;
// Skapa och skicka tillbaka bilden till webbsidan.
Bitmap outputImage =
(Bitmap)this.CreateImage(visitorCount, numberOfDigits);
outputImage.Save(this.Response.OutputStream, ImageFormat.Gif);
}
[VB.NET]
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' Kod för att uppdatera räknaren i t.ex en databas,
' här används ett fast värde i demonstrationssyfte.
Dim VisitorCount As Integer = 12345
' Kod för att läsa antalet tecken som skall visas,
' hät används ett fast värde i demonstrationssyfte.
Dim NumberOfDigits As Integer = 8
' Skapa och skicka tillbaka bilden till webbsidan.
Dim OutputImage As Bitmap = _
DirectCast(Me.CreateImage(VisitorCount, NumberOfDigits), Bitmap)
OutputImage.Save(Me.Response.OutputStream, ImageFormat.Gif)
End Sub
Vi har nu skapar en webbsida som kan anropas för att returnera en bild som innehåller antalet besökare som besökt sidan. Det som kvarstår att gör är att skapa en sida som anropar webbsidan.
[HTML]
Som jag tidigare nämnde så lämnar denna typen av lösning väldigt mycket utrymme för förbättringar och ökad funktionalitet. Det är min förhoppning att du nu har en tillräckligt bra utgångspunkt för att kunna implementera en egen besöksräknare som både ser ut och fungerar exakt så som du vill att den skall göra.
All kod i denna artikel finns tillgänglig att ladda ner i Programarkivet:Skapa en besöksräknare i ASP.NET
Pelle Johansson
Hej, tycker det är en jättebra artikel. Här påvisar du styrkan med .net's flora med inbyggda funktioner. Keep up the good work.