Jumat, April 29, 2011

Membuat Badge Kalender Menggunakan PHP

Iseng sore ini saya berkunjung ke salah satu blog sahabat. Di bilah sisinya, saya melihat ada badge (lencana) yeng menampilkan tanggal hari ini. Langsung saja terlintas dalam pikiran saya (ngoprek mode on) bagaimana kalau saya membuat badge serupa. Tanpa menunggu lama, langsung saja saya membuka Geany dan...ngoding pun dimulai.

Cukup sederhana untuk membuat badge seperti itu. Yang kita butuhkan hanyalah gambar latar. Sisanya, serahkan saja pada fungsi bawaan PHP. Oya, karena badge ini memanfaatkan scripting PHP, jadi yang kita butuhkan juga web server yang mendukung PHP dan PHP-GD.

Tanpa perlu banyak basa-basi, langsung saja kita simak barisan kode di bawah ini. Kita simpan kode ini dengan nama tanggal.php. Untuk gambar latarnya, anda bisa mendapatkannya di sini, serta hurufnya di sini dan di sini.

<?php
// Inisiasi tanggal, bulan, dan tahun
date_default_timezone_set('UTC+7');
$penanggalan = getdate();
$hari = $penanggalan[wday];
$tanggal = $penanggalan[mday];
$bulan = $penanggalan[mon];
$tahun = $penanggalan[year];

// Konversi nama bulan
if($bulan==1){ $namabulan = "Januari";}
if($bulan==2){ $namabulan = "Februari";}
if($bulan==3){ $namabulan = "Maret";}
if($bulan==4){ $namabulan = "April";}
if($bulan==5){ $namabulan = "Mei";}
if($bulan==6){ $namabulan = "Juni";}
if($bulan==7){ $namabulan = "Juli";}
if($bulan==8){ $namabulan = "Agustus";}
if($bulan==9){ $namabulan = "September";}
if($bulan==10){ $namabulan = "Oktober";}
if($bulan==11){ $namabulan = "November";}
if($bulan==12){ $namabulan = "Desember";}

// Konversi nama hari
if($hari==0) { $namahari = "Minggu"; }
if($hari==1) { $namahari = "Senin"; }
if($hari==2) { $namahari = "Selasa"; }
if($hari==3) { $namahari = "Rabu"; }
if($hari==4) { $namahari = "Kamis"; }
if($hari==5) { $namahari = "Jum'at"; }
if($hari==6) { $namahari = "Sabtu"; }

// Pembuatan output gambar berformat PNG
header("Content-Type: image/PNG"); 
$img = imagecreatefromPNG("kalender.png");
$fontfile = "YKL.otf";
$fontfiletebal = "YKLB.otf";
$putih = imagecolorallocate($img, 255, 255, 255);
imageTTFText($img, 10, 0, 5, 45, $putih, $fontfile, $namahari);
$hitam = imagecolorallocate($img, 0, 0, 0);
$batas = imageTTFbbox(40, 0, $fontfiletebal, $tanggal);
$x = imageSX($img)/2 - ($batas[0] + $batas[2] + $batas[4] + $batas[6]) / 4;
imageTTFText($img, 40, 0, $x, 100, $hitam, $fontfiletebal, $tanggal);
$batas = imageTTFbbox(10, 0, $fontfile, $namabulan);
$x = imageSX($img)/2 - ($batas[0] + $batas[2] + $batas[4] + $batas[6]) / 4;
imageTTFText($img, 10, 0, $x, 118, $hitam, $fontfile, $namabulan);
$batas = imageTTFbbox(10, 0, $fontfile, $tahun);
$x = imageSX($img)/2 - ($batas[0] + $batas[2] + $batas[4] + $batas[6]) / 4;
imageTTFText($img, 10, 0, $x, 133, $hitam, $fontfile, $tahun);
imagePNG($img);
imagedestroy($img);
?>

Terlihat dari kode di atas bahwa kita hanya memanfaatkan fungsi tanggal yang sudah tersedia pada PHP. Kemudian untuk menghasilkan badge berupa gambar, kita membutuhkan PHP-GD untuk meng-embed keluaran kode tadi ke gambar latar yang sudah disertakan. Selanjutnya, kita hanya perlu meletakkan berkas tanggal.php dan gambar latar tadi ke web server. Cukup dengan mengakses tanggal.php melalui web server, dan tralala...ini dia hasilnya. Anda juga bisa melihat hasilnya pada sidebar blog ini.

Cukup mudah bukan?

Nah, untuk memasang badge tersebut pada blog maupun situs kita, yang perlu kita lakukan adalah meletakkan berkas tanggal.php dan gambar latarnya ke dalam web server publik. Kemudian, dengan menggunakan tag html, kita siap memasang badge buatan sendiri ke dalam blog atau situs kita. Tag html-nya adalah sebagai berikut.

<img style="float:center;" src="http://rabitya.with-linux.com/blog/tanggal.php" alt="Tanggal hari ini" title="Tanggal hari ini" />

Kalau anda malas ngoding, saya sudah menyiapkan berkasnyas di sini.

Keren kan kalau buatan sendiri? Anda bisa mengkreasikan sesuka hati anda. Mulai dari merubah warna, gambar latar, ukuran huruf, maupun jenis huruf. Selamat berkreasi. :)

1 komentar:

  1. Makasih sudah berkunjung ke blog saya...
    Salam kenal kembali.
    -----------------------
    Dulu saya pernah pasang kalender pakai kode ini, tapi nggak kepikiran ngasih background...

    BalasHapus