Skip to main content

Alles für die Homepage... Scripte, Templates, Workshops und Support

Adventskalender erstellen

Alle Jahre wieder denkt man Ende November daran, dass man doch einen Adventskalender für die Webseite bräuchte. Hier ist nun die einfach anzupassende Lösung auf PHP Basis.

Die Features des Adventskalenderscriptes und ein Screenshot

Was kann das Script

  • Es ist konfigurierbar was die verlinkten Seiten des Adventskalenders betrifft
  • Parameter für Bildnamen, Abmessungen und Linktarget sind konfigurierbar
  • Das Ausgabetemplate für den Adventskalender kann leicht angepasst werden
  • Die Ausgabeseiten werden erst verlinkt wenn der Datum errreicht ist
  • Durch die Verwendung eines Assiozativen Arrays zur Datenhaltung sind Anpassungen/Erweiterungen der Ausgabedaten leicht realisiertbar

Das komplette Script mit Kommentaren

CODE:
<?php

// Konfiguration

// Monat
$monat     = 12;

// Tag aus getdate, = $datum['mday'] ist dieser 1 - 24 und der Monat ist 12
// wird das genutzt zur Pruefung, bzw. Erzeugung der Adventskalenderverlinkung
$datum     = getdate();

// Bildbreite und Hoehe der Adventskalenderbilder
$breite    = 121;
$hoehe     = 117;

// Verzeichnis der Bilder
$verz    = 'adventbilder';

// Bildprefix, daraus und aus der Tagzahl + der Endung wird der Bildname
// generiert (z.B. bild12.gif
$bildprefix = 'bild';

// Dateiendung der Bilder
$endung = 'gif';

// Ziel fuer Link (z.B. 'target="_blank"), kann auch leerbleiben
$linktarget = '';

// Array mit Daten, wichtig ist das die Zielseiten (z.B. e16ad1e95950ae31dcdcdcd696233ed1.html
// einen zufaelligen, nicht erratbaren Dateiname tragen. 

$advent = array(
'1' => array('1', 'e16ad1e95950ae31dcdcdcd696233ed1.html'),
'2' => array('2', '6ac21c0f9835a109fcd52cb115f8435f.html'),
'3' => array('3', '815e519dbf536064e64576340965a7fc.html'),
'4' => array('4', 'f3eef9b7afc8cd43806a26af8a28cacc.html'),
'5' => array('5', '92b9652f2459614b52029f4bdaeb1080.html'),
'6' => array('6', '9a99e96dc95410204abf3a71bff47b07.html'),
'7' => array('7', 'f67aae1293a3f07d599e8b7493ee4f40.html'),
'8' => array('8', '291e71482e71a0f12158ffb9154fdf5e.html'),
'9' => array('9', '2acebde041912c91399c9c76f10a5201.html'),
'10' => array('10', 'fc3dddbbf3c952706a6abc75813cee53.html'),
'11' => array('11', '043789a746d2f1917cf86b0bb97e3e21.html'),
'12' => array('12', 'c18d0a9cdb5679821bdfdd2a0336ab87.html'),
'13' => array('13', 'd4324d1455bd6bb2f864f87f98db74f6.html'),
'14' => array('14', '95fe95b08d46ef503e827a105a882d03.html'),
'15' => array('15', '62ff9fdeb65749e8b8adcca1f5ec2759.html'),
'16' => array('16', '959877082b53777c15188c298525b1b8.html'),
'17' => array('17', 'eb4a1a020a7976abf9efa7a713d8ecf8.html'),
'18' => array('18', '06556a34159b38f428c34c47216ed5cb.html'),
'19' => array('19', '23caab8a7b1338479516a9bd61675186.html'),
'20' => array('20', '5b9de87f6dc900abf2fa2160b703ec24.html'),
'21' => array('21', 'e65170314f6723141dd3aa5bbf921aa7.html'),
'22' => array('22', '2403cb355acfee1b7725d57ee9e5ccbe.html'),
'23' => array('23', '01be3d87e7f4fce455583fe26b0c55e0.html'),
'24' => array('24', '4f27762eb615ba5f38dca6f117d0ead4.html')
);


// Hier wird das Datenarray durchlaufen und je nachdem ob der Tag erreicht ist
// als Link zur Zielseite oder ohne zwischengespeichert

$adventslinks = array(0);

for ($i = 1; $i <= 24; $i++) {

    if($advent[$i][0] >= $datum['mday'] && $monat == 12) {
    $adventslinks[] .= '<a href="'.$advent[$i][1].'"'.$linktarget.'><img src="'.$verz.'/'.$bildprefix.''.$advent[$i][0].'.'.$endung.'" alt="" width="'.$breite.'" height="'.$hoehe.'" border="0"></a>';
    } else {
    $adventslinks[] .= '<img src="'.$verz.'/'.$bildprefix.''.$advent[$i][0].'.'.$endung.'" alt="" width="'.$breite.'" height="'.$hoehe.'" border="0">';
    }

}


// In dieser Tabelle werden die Arrayelemente ausgegeben. 
// Fuer eine gemischte Sortierung kann man hier die $adventslinks[1]
// auch anders anordnen. Diese Tabelle ist nur Beispielhaft, fuer die
// Ausgabe der Daten kann man sich hier sein ganz eigenes Template zusammenstellen.
 

$adventstable = '<table cellspacing="1" cellpadding="2" border="1">
<tr>
    <td>'.$adventslinks[1].'</td>
    <td>'.$adventslinks[2].'</td>
    <td>'.$adventslinks[3].'</td>
    <td>'.$adventslinks[4].'</td>
    <td>'.$adventslinks[5].'</td>
    <td>'.$adventslinks[6].'</td>
</tr>
<tr>
    <td>'.$adventslinks[7].'</td>
    <td>'.$adventslinks[8].'</td>
    <td>'.$adventslinks[9].'</td>
    <td>'.$adventslinks[10].'</td>
    <td>'.$adventslinks[11].'</td>
    <td>'.$adventslinks[12].'</td>
</tr>
<tr>
    <td>'.$adventslinks[13].'</td>
    <td>'.$adventslinks[14].'</td>
    <td>'.$adventslinks[15].'</td>
    <td>'.$adventslinks[16].'</td>
    <td>'.$adventslinks[17].'</td>
    <td>'.$adventslinks[18].'</td>
</tr>
<tr>
    <td>'.$adventslinks[19].'</td>
    <td>'.$adventslinks[20].'</td>
    <td>'.$adventslinks[21].'</td>
    <td>'.$adventslinks[22].'</td>
    <td>'.$adventslinks[23].'</td>
    <td>'.$adventslinks[24].'</td>
</tr>
</table>';

// nun ist alles fertig und kann ausgegeben werden...
echo $adventstable;
?>

Ausgabebeispiel:
xx

Auf der nächsten Artikelseite werden die Teilbereiche des Scriptes, sowie weitere nötige Arbeiten näher erklärt.

Die Adventskalenderdaten vorbereiten und anpassen.

Was wird benötigt?

  1. Ein Bild für den Adventskalender. Hier können Sie entweder ein großes Bild mit einem Grafikprogramm in 24 Einzelteile zerschneiden, oder Sie nutzen 24 Einzelbilder.
  2. Die Seiten die durch den Kalender aufgerufen werden
  3. Die Adventskalenderkonfiguration
  4. Die Adventskalenderdaten

Zu 1. Bilder für den Adventskalender
Speichern Sie die 24 Bilder in ein Verzeichnis ab, benutzen Sie dabei folgendes Dateinamensschema.

bild1.gif bis bild24.gif

Variablel ist dabei der Teil bild und die Endung, hier gif Es müssen aber alle Bilder den selben Dateinamensprefix und die selbe Dateiendung haben. Sie können also auch eine Bilderserie mit dem Schema advent1.jpg bis advent24.jpg erstellen.

Zu 2. Die Seiten die durch den Kalender aufgerufen werden
Hier können Sie 24 beliebige html/php Seiten für den Kalender anlegen. Als Dateiname wird der letzte Part des Arrays genommen (z.B. e16ad1e95950ae31dcdcdcd696233ed1.html) Dieses Dateinamenschema sorgt dafür das die Dateinamen nicht einfach erratbar sind.

Natürlich dürfen Sie nicht jedes Jahr die selben Dateinamen verwenden, mit dem nachfolgenden Codeschnipsel erstellen Sie das Adventskalender Datenarray neu. Dieses erzeugt 24 einmalige Zufallsdateinamen. Den Block brauchen Sie dann nur noch im Adventskalenderscript bei // hier einfügen einsetzen

CODE:
$advent = array(
// hier einfügen
);

Code zum erstellen des Datenarrays

CODE:
for ($j = 1; $j <= 24; $j++) {
$komma = $j < 24 ? ',' : '';
echo "'$j' => array('$j', '".md5(uniqid('', true)).".html')".$komma."<br>\n";
}

Beispielausgabe des ertellten Datenarrays

CODE:
'1' => array('1', 'e2d1f9d51af9e8a0c6f1a68a061f4d1a.html'),
'2' => array('2', 'c38aa86fda70e4f3fca055928d96864e.html'),
'3' => array('3', 'f0a5275d1683506560384a0349a2e83a.html'),
'4' => array('4', 'ac16068acc32a42361579339eb65615b.html'),
'5' => array('5', 'dea7b1cf860f2e9cd614a29192a53f23.html'),
'6' => array('6', '0eff6497aa57b2ab1bee19f272ec6278.html'),
'7' => array('7', '491683d696a4f210c38964de6bc754de.html'),
'8' => array('8', '12c2a05bd185513d714cc28833237af6.html'),
'9' => array('9', 'a9230c070dc3d38de86d38a143490e37.html'),
'10' => array('10', '4df705e2bac62a4be64827edfd4f2375.html'),
'11' => array('11', '01b1c3bac7d530769c999e719292d7be.html'),
'12' => array('12', 'feef009e69c4c552641dcdcfd2604b3f.html'),
'13' => array('13', 'c321d34fa1baa32e8a6523c056baad1a.html'),
'14' => array('14', 'dffcbef048977bab153d1055e16d1874.html'),
'15' => array('15', '8fd78dab13a5811bd18ff5184211f7c1.html'),
'16' => array('16', '9237b20d9a47ed6b8c7d18e35c9c0acc.html'),
'17' => array('17', 'e3ae16553ed3985ae493fa33cac7ead9.html'),
'18' => array('18', '001e99657fa101d2b7fe48f80e3c9196.html'),
'19' => array('19', '451744ea40dcd0f7dc06ec07a573e2dd.html'),
'20' => array('20', 'b3f580a6cb0259e47ae7e144589cb98f.html'),
'21' => array('21', 'e8898df7819001f75090129a1c7a7194.html'),
'22' => array('22', 'f59283481c6fd3055ef5b695a4ca40ff.html'),
'23' => array('23', '250e7bd71f4cadfaab65ace70e049f94.html'),
'24' => array('24', 'd7728c3cd7e01974e473025cd4dde906.html')

Wollen Sie für die verlinkten Seiten die Edung php verwenden, ändern Sie einfach in dem Codeschnipsel zur Datenerzeugung html zu php

CODE:
echo "'$j' => array('$j', '".md5(uniqid('', true)).".php')".$komma."<br>\n";

Zu 3. Die Adventskalenderkonfiguration

Anpassen der Adventskalenderkonfiguration, legen Sie hier die Setupwerte des Kalenders fest.

CODE:
// Bildbreite und Hoehe der Adventskalenderbilder
$breite    = 121;
$hoehe     = 117;

// Verzeichnis der Bilder
$verz    = 'adventbilder';

// Bildprefix, daraus und aus der Tagzahl + der Endung wird der Bildname
// generiert (z.B. bild12.gif
$bildprefix = 'bild';

// Dateiendung der Bilder
$endung = 'gif';

// Ziel fuer Link (z.B. 'target="_blank"), kann auch leerbleiben
$linktarget = '';

Anpassen des Ausgabelayoutes. Diese Tabelle stellt das Design des Kalenders da, Sie können natürlich auch andere Ausgabelayouts erstellen. Fügen Sie für die Kalenderausgaben dann einfach an passender Stelle die $adventslinks[x] Variablen ein.

CODE:
$adventstable = '<table cellspacing="1" cellpadding="2" border="1">
<tr>
    <td>'.$adventslinks[1].'</td>
    <td>'.$adventslinks[2].'</td>
    <td>'.$adventslinks[3].'</td>
    <td>'.$adventslinks[4].'</td>
    <td>'.$adventslinks[5].'</td>
    <td>'.$adventslinks[6].'</td>
</tr>
<tr>
    <td>'.$adventslinks[7].'</td>
    <td>'.$adventslinks[8].'</td>
    <td>'.$adventslinks[9].'</td>
    <td>'.$adventslinks[10].'</td>
    <td>'.$adventslinks[11].'</td>
    <td>'.$adventslinks[12].'</td>
</tr>
<tr>
    <td>'.$adventslinks[13].'</td>
    <td>'.$adventslinks[14].'</td>
    <td>'.$adventslinks[15].'</td>
    <td>'.$adventslinks[16].'</td>
    <td>'.$adventslinks[17].'</td>
    <td>'.$adventslinks[18].'</td>
</tr>
<tr>
    <td>'.$adventslinks[19].'</td>
    <td>'.$adventslinks[20].'</td>
    <td>'.$adventslinks[21].'</td>
    <td>'.$adventslinks[22].'</td>
    <td>'.$adventslinks[23].'</td>
    <td>'.$adventslinks[24].'</td>
</tr>
</table>';

Zu 4. Die Adventskalenderdaten

Die Daten in dem assiozativen Array werden über $advent[x][y] abgerufen. Das ermöglicht es auch den Kalender um weitere Datenparts zu erweitern.

[x] steht für den Arraykey 1 – 24

[y] steht für den Index des Elementes im Array

CODE:
'1' => array('1', 'e2d1f9d51af9e8a0c6f1a68a061f4d1a.html'),

$advent[1][1] ist dann e2d1f9d51af9e8a0c6f1a68a061f4d1a.html. Arrayindexe fangen bei 0 an!

So könnte man nun hingehen und das Datenarray erweitern:

CODE:
'1' => array('1', 'e2d1f9d51af9e8a0c6f1a68a061f4d1a.html', 'Ich bin ein Kalenderspruch für Tag 1'),

Über $advent[1][2] haben Sie dann Zugriff auf: Ich bin ein Kalenderspruch für Tag 1

In der for Schleife

CODE:
for ($i = 1; $i <= 24; $i++) {

// Daten

}

Können Sie über die Zählvariable $i so auf die Arrayelemente zugreifen

$advent[$i][y]

Den Kalender und die Dateien hochladen

Haben Sie alles angepasst laden Sie das Kalenderscript, die Kalenderseiten und die Bilder auf Ihren Webspace hoch. Ab 1.12 können dann Ihre Besucher die Kalenderseiten aufrufen.

Anzeige


Ähnliche Beiträge



Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *