Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

PHP / MySQL Tutorial: Progressbar leicht gemacht [Script]



Ranking: +2   Kommentare: 8   |   Bewertung: Keine Berechtigung!  

Vorwort



In diesem Tutorial zeige ich euch, wie man mit php (GD) und ein paar Grafiken eine Progressbar (Fortschrittsbalken) dynamisch erzeugt.
Diesem Tutorial baut auf dieses auf: Progressbar-leicht-gemacht.


Schritt 1



Zuerst prüfen wir ein paar Variablen, die wir brauchen um anständig arbeiten zu können.

Code:




switch($_GET['color']){

    case "red":

        $color = 'red';

    break;

    

    case "yellow":

        $color = 'yellow';

    break;

    

    default:

        $color = 'green';

    break;

}



In unserem Fall übergeben wir die Farbe der Leiste via GET. Nun prüfen wir, ob die Farbe rot, gelb oder standardmäßig grün sein soll. Selbstverständlich kann jede beliebige andere Farbe verwendet werden.

Auch übergeben wir die Prozentangabe mit GET.

Code:




if(isset($_GET['percent']) && is_numeric($_GET['percent'])){

    $percent = $_GET['percent'];

    

    // Prozent heißt pro Hunder... narf

    if($percent>100){

        $percent = 100;

    }

}

// nicht gesetzt, muss also 0 sein

else{

    $percent = 0;

}



Zuerst prüfen wir in einem if-statement ob $_GET['percent'] überhaupt gesetzt ist. Falls das zutrifft wird über das logische "und" (&&) auch geprüft, ob die Variable numerisch, also eine Zahl ist.
Zusätzlich prüfen wir, ob der Wert den Rahmen sprengt. Eine Zahl größer 100 macht einfach keinen Sinn, da ja Prozent pro Hundert bedeutet.
Falls nichts gesetzt wurde nehmen wir den Wert 0 an.

Schritt 2



Nachdem die wichtigen Überprüfungen abgeschlossen sind, erzeugen wir nun 3 GB streams.

Code:




$im = @ImageCreate (102, 10) or die ("Could not create a GD-Stream!");



$colored = imagecreatefrompng('./images/'.$color.'.png') or die("Could not create a GD-Stream!");



$grey = imagecreatefrompng('./images/grey.png') or die("Could not create a GD-Stream!");



ImageCreate(x, y) erzeugt ein neues Bild mit der Breite x und der Höhe y. Das @ unterdrück Fehler und das or die("..") beendet die Ausführung des Scripts falls ein Fehler auftritt.
imagecreatefrompng(Pfad) erzeugt ein GD stream von einem bereits vorhanden Bild.

Schritt 3



Nachdem das geschafft ist. füllen wir das ganze Bild mit einer Farbe, die später den Rahmen darstellt.

Code:




ImageColorAllocate ($im, 117, 117, 117);



ImageColorAllocate(Bild-Stream, R, G, B) die Farbe wird in RGB angegeben.

Nun füllen wir den bereits abgeschlossenen Teil mit der übergebenen Farbe.

Code:




for($i=1; $i<=$percent; $i++)

    imagecopy($im,$colored,$i,1,0,0,1,8);



Die for-Schleife sollte selbsterklärend sein. Wir starten bei 1, weil auf dem 0. Pixel ja der Rahmen liegt.
imagecopy(Bild-Ziel, Bild-Quelle, Ziel-x, Ziel-y, Quelle-x, Quelle-y, Breite des Ausschnitts, Höhe des Ausschnitts) damit füllen wir das Bild.

Schritt 4



Jetzt ist der Hintergrund noch schwarz, was ja nicht ganz Sinn und Zweck ist.

Code:




$percent2 = $percent+1;



for($i=$percent2; $i<101; $i++)

    imagecopy($im,$grey,$i,1,0,0,1,8);



$percent2 gibt die verbleibende Anzahl der Prozente an. Sie wird um 1 inkrementiert, da wir ja bei der nächsten Prozentzahl anfangen und nicht etwas übermalen wollen.
Ansonsten ist imagecopy oben bereits erklärt.

Schritt 5 (opt.)



Falls ihr auf dem Bild auch noch die Prozentzahl stehen haben wollt:

Code:




$text_color = ImageColorAllocate ($im, 255, 255, 255); // weiß

$text_color2 = ImageColorAllocate ($im, 0, 0, 0); // schwarz



ImageString ($im, 2, 46, -1, $percent."%", $text_color);

ImageString ($im, 2, 45, -2, $percent."%", $text_color2);



Wir nehmen einmal weiß als Farbe und einmal schwarz. Die weiße benutze ich, um der schwarzen Schrift einen Schatten zu geben. Ich denke ImageColorAllocate erklärt sich selbst, die Farben werden wieder in RGB angegeben.
ImageString(Bild-Stream, Schriftart, x, y, Text, Farbe) zeichnet anschließen eine Zeichenkette auf dem Bild.
Damit benutzt man Standardfonts, man kann natürlich auch andere Fonts verwenden. Siehe hierzu: php.net/imagegettftext

Schrit 6



Code:




header ("Content-type: image/png");



ImagePNG ($im);



Wir setzen den Header und schicken das Bild mit ImagePng auf den Weg.

Sourcecode



Code:




<?php



/**

 * @author Andreas Burchert

 * @email a.burchert@scasoft.de

 * @website http://www.scasoft.de

 * @version 1.0

 * 

 * @desc This is a script to show a progressbar with a given percentage and optionaly a given color.

 *          Normally the color is choosen by the calling snippet.

 * 

 * @license GNU-GPL v3

 */





// create an empty image

$im = @ImageCreate (10210) or die ("Could not create a GD-Stream!");

      

// black background, will be the border

$background_color ImageColorAllocate ($im117117117);



// the color of the finished part

switch($_GET['color']){

    case 
"red":

        
$color 'red';

    break;

    

    case 
"yellow":

        
$color 'yellow';

    break;

    

    default:

        
$color 'green';

    break;

}



// create an image source of the finished color

$colored imagecreatefrompng('./images/'.$color.'.png') or die("Could not create a GD-Stream!");



// create an image source of the grey part

$grey imagecreatefrompng('./images/grey.png') or die("Could not create a GD-Stream!");



// check the GET var

if(isset($_GET['percent']) && is_numeric($_GET['percent'])){

    
$percent $_GET['percent'];

    

    
// percent means per cent, per hundred... narf

    
if($percent>100){

        
$percent 100;

    }

}

// hm, none given, so must be 0

else{

    
$percent 0;

}



// okay, copy the finisehd part

for($i=1$i<$percent$i++)

    
imagecopy($im,$colored,$i,1,0,0,1,8);

    

$percent2 $percent+1;



// copy the proceeding part

for($i=$percent2$i<101$i++)

    
imagecopy($im,$grey,$i,1,0,0,1,8);



// create 2 colors for printing the percentage

$text_color ImageColorAllocate ($im255255255);

$text_color2 ImageColorAllocate ($im000);



// print the percentage twice to make it better readable

ImageString ($im246, -1$percent."%"$text_color);

ImageString ($im245, -2$percent."%"$text_color2);



// set the header

header ("Content-type: image/png");



// and show the bar

ImagePNG ($im);



?>




Die Kommentare sind auf Englisch und das Snippet habe ich für MODx erstellt. Demnächst gibts die Veröffentlichung auf der Seite dazu.

Schlusswort



Ich hoffe ihr könnt damit was anfangen und konntet es auch verstehen.
Stehe etwas neben mir, also verzeiht bitte typografische und grammatikalische Fehler.

Grüße,
Scarya
http://www.scasoft.de

Veröffentlicht von: Scarya
Veröffentlicht am: 29 Feb. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: dynamisch Fortschrittsbalken gd PHP Progressbar


Themenverwandte Tutorials


Kommentar(e) (8)


Scarya sagt:

Zitat SpaceEsel:

Kann das jemand vielleicht Hochladen, das Script?


Wie du meinen? Brauchst es doch nur kopieren...

22 Oct. 2009 05:34:02 • Antworten


SpaceEsel sagt:

Kann das jemand vielleicht Hochladen, das Script?

21 Oct. 2009 23:25:59 • Antworten


sunTsun sagt:


Danke für den Beitrag

2 Mar. 2008 22:52:23 • Antworten


Scarya sagt:

Face: das hatte ich ursprünglich gemacht, wollte aber einfach bisschen mit GD arbeiten. Mit xhtml+css ist das natürlich wesentlich performanter und einfacher.

1 Mar. 2008 14:56:49 • Antworten


Face sagt:

mmmmh an sich ja nicht schlecht aber meinste nicht, dass es besser wäre 5 verschiedene 1px breite grafiken zu erstellen (also verschiedene Farben) und dann die breite mit css und xhtml anzupassen als jedes mal ne neue grafik zu erzeugen?

1 Mar. 2008 14:28:05 • Antworten


Scarya sagt:

Jesse V.: Jop, da hast du recht. ctype_digit() wäre besser.

Marit: Hm, das hätte ich dazu schreiben können. Mit php geht das auch, nur muss man auch mit Javascript arbeiten. Gibt da afaik bereits ein Script zu.
http://www.silverspider.com/2005/php-progre ss-bar/

1 Mar. 2008 12:13:38 • Antworten


Marit sagt:

das dient jetz dazu, dass man, z.b. wenn man einen neuen bereich auf seiner seite eröffnen will, im admin menü eine prozentzahl eintippen kann, wie weit man schon ist und der balken dann sofort angepasst wird, anstatt, dass man immer nen neues bild erstellen und hochladen muss, oder?

hab anfangs nämlich gedacht, dass würde jetzt sone progressbar werden, die erscheint wenn die seite geladen wird, aber das ist wohl schlecht umzusetzen mit php ^^

1 Mar. 2008 11:59:12 • Antworten


Spread sagt:

Hab das Ganze nur überfloge und mir ist ein kleines Manko aufgefallen: is_numeric() - ctype_digit() würde in diesem Fall denke ich besser passen.

29 Feb. 2008 21:07:15 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder