03 Nov 11 Problem Solved jQuery Datepicker on Thickbox Page
KomunitasKami.com – Thickbox merupakan sebuah tools yang berbasis jQuery dimana dengan thickbox kita bisa membuat sebuah aplikasi katakanlah seperti input data namun dalam tampilannya dimuncul dalam sebuah dialog box, sehingga web page tidak berpindah tempat, misalnya diawal anda berada di index.php maka dengan thickbox untuk memunculkan page input.php, browser tidak akan me-refresh ke page input.php, namun page.php dimunculkan melalui sebuah dialog box (masih di index.php).
Adapun tampilan thickbox seperti dibawah ini:
Nah masalah yang muncul adalah bagaimana jika anda menggabungkan jQuery function seperti datepicker pada thickbox? Hal ini menjadi kendala bagi saya sehingga saya mencoba untuk mencari tau dan akhirnya menemukan solusinya di situs ini.
Ternyata permasalahan diatas sangat simple sekali pemecahannya,,, cukup menaruh function Datepicker jQuery pada page yang ingin dimunculkan dengan thickbox, hehehe…. akhirnya nemu juga.
Sekian dari cilphie…contributor yang aduhai wkakakaka….
26 Jul 11 Pangkas Load Time Dengan CSS
Meminimalkan load time akses sebuah website bisa dilakukan dengan penerapan teknik css, yang dikenal dengan nama css sprite. Css sprite adalah sebuah metode pengurangan permintaan akses gambar dari sebuah website dengan mengumpulkan beberapa gambar menjadi satu kesatuan gambar, sehingga user hanya perlu mengakses gambar sekali waktu saja.
Untuk menggabungkan beberapa image menjadi satu kesatuan image cukup mudah, anda bisa menggunakan Aplikasi Design dan bisa juga menggunakan tools online CSS Sprites Generator. Nah setelah mempunyai satu master image dan file “gambar palsu” gif.gif, sekarang masuk ke bagian yang mengasikkan, yakni modifikasi file CSS nya. Pada prinsipnya CSS Sprites ini memanfaatkan satu gambar untuk berbagai macam fungsi background. Gambar besar itu hanya digeser-geser agar memunculkan bagian yang tepat di tempat yang diinginkan. Proser geser-menggeser ini berlangsung di sisi browser client sehingga tidak ada lagi transfer file gambar, begitu gambar masternya sudah di download oleh client. Inilah yang mempercepat waktu loading yang dibutuhkan situs kita.
Sebagai contoh untuk background Header Blog saya, awalnya saya menggunakan
#header{background:#EDEBD6 url(images/header-bg.png) no-repeat scroll 100% 0pt;height:143px;width:930px;padding:0;}
kemudian saya ubah menjadi:
#header{background:transparent url(images/imggatzet.png) top left; background-position: 0px 0px; height: 133px; width: 930px; }
Bagian yang saya tebalkan itu adalah fungsi untuk menggeser gambar ke posisi yang diinginkan. background-position: 0px 0px menunjukkan posisi sudut kiri atas dari bagian gambar yang dimunculkan. Dan kemudian agar gambar lainnya tidak ikutan muncul di header, ukuran kotaknya harus dibatasi dengan parameter height: 133px; width: 930px; dengan demikian bagian gambar yang lainnya akan tersembunyi.
Contoh lainnya adalah untuk background footer. Sebelumnya saya menggunakan :
#footer{color:#FFFFFF;background:#EDEBD6 url(images/nfooter-bg.png) no-repeat scroll 100% 0pt;height:90px;clear:both;padding:25px;}
kemudian saya ubah menjadi
#footer{background:transparent url(images/imggatzet.png) top left; background-position: 0 -240px;height:90px;clear:both;padding:25px;}
Pada parameter ini ada angka -240px, karena posisi gambar untuk footer yang saya butuhkan berada di 240pixel dari sisi atas master image (untuk lebih jelasnya bisa mengacu ke contoh master image yang saya sertakan), dan perintah background position: 0px -240px ini bisa diartikan geser gambar 240 pixel ke bawah.
Contoh ketiga adalah untuk logo blog. Sebelumnya saya menggunakan image link biasa untuk memunculkan logo.
< img src="http://www.komunitaskami.com/WordPress/wp-...es/gatzet.png" alt="gatzet info" style="margin-left:20px;float:left;border:none;" width="338" height="110"/>
kemudian saya ubah menjadi
Disini gambar yang diload saya ganti menjadi gambar kosong berukuran 1×1 pixel untuk tidak menyalahi aturan HTML. Sedangkan gambar aslinya disertakan dalam fungsi
#titlepage{background:transparent url(images/imggatzet.png) top left; background-position: -210px -118px; height: 110px; width: 320px; margin:0 0 0 20px; float:left; border:none; }
Lagi-lagi di sini masih menggunakan gambar master yang sama, dan perhatikan juga nilai background-position yang berarti menggeser gambar 210 pixel ke kiri dan 118 pixel ke bawah.
Prinsip CSS Sprites ini bisa digunakan di semua bagian template situs kita yang membutuhkan gambar. Misalkan icon-icon untuk social network (digg, furl, delicious.. dsb, yang biasanya di load satu per satu) bisa digabungkan menjadi satu gambar saja.
Menurut saya, saat menggunakan CSS Sprites ini, hal yang paling melelahkan adalah menentukan posisi yang tepat untuk memunculkan gambar. Memunculkan alat bantu ruler di Photoshop atau GIMP yang saya gunakan memang sangat membantu, setidaknya untuk pedoman awal penentuan posisi gambar.
Namun tetap saja mesti dilakukan fine adjustment di semua bagian saat CSS Sprites sudah berada di server. Sehingga akan lebih baik jika untuk proses uji cobanya dilakukan di server lokal anda dulu, baru setelah semua sempurna bisa di upload ke server utama.
03 Jul 11 CloudFlare Teknologi Cloud Computing
Apa itu CloudFlare? CloudFlare adalah teknologi baru computasi awan atau Cloud Computing di internet. CloudFlare merupakan layanan dari pihak ketiga sebagai perantara antara pengunjung web dengan server web. Visitor –> cloudflare –> server website dimana CloudFlare berfungsi menjembatani antara pengunjung web dengan server web, hal ini bertujuan untuk menghindari dari attackers, crawlers & bots sehingga webserver tidak “bersentuhan” langsung dengan pengunjung web.
CloudFlare juga gratis, tapi ada opsi pro yang lebih advanced untuk layanan yang lebih baik. CloudFlare cukup menarik karena tidak hanya mendistribusikan content ke jaringan server CDN, tapi juga menambah security ke website kita. Hal ini juga akan membuat akses web lebih cepat dan aman, karena untuk konten yang sama pada web yang bersangkutan sudah tersedia di cloudflare, maka pengunjung berikutnya tidak perlu lagi untuk “mengambil” konten tersebut ke server web dibelakang cloudflare.
Cloudflare ini bermanfaat sekali untuk web popular dengan potensi attackers yang tinggi, selain untuk menjaga tetap aman dan cepat. Berikut gambaran perbandingan website yang menggunakan CloudFlare dengan tidak menggunakan CloudFlare.
Beberapa contoh website yang sudah menggunakan CloudFlare salah satunya ialah G-Land.
31 May 11 PHP Basic – Function Untuk Menambah Atau Mengurangi Hari
Kali ini belajar PHP yuk gan,,, sama2 belajar maksudnya hehehe…. Kali ini ane membahas sebuah function php dimana dengan function ini kita dapat dengan mudah sesuka hati menambah atau mengurangi tanggal.
Misalnya ente punya data nie, dengan tanggal 2010-05-31, nah kebetulan ente mo buat planning 3 hari kedepan mo lakuin apa gitu,,, nah dengan function ini agan cuman tambah hari dengan cara yang mudah.
Function ini juga memungkinkan agan menambah atau mengurangi tanggal baik itu harian bulanan atau tahunan terserah sie agan sebagai juragannya hehehe,,, adminnya maksudnya 
Listing function ini gak banyak kok gan, ane nemunya di PHP Manual resmi di www.php.net sub bagian date modify, atau singkat kate nieh ane kasi ente linknya:
http://id.php.net/manual/en/function.date-modify.php
Nieh klo juragan pengen liat listing programnya disini….,
<?php
function adddate($vardate,$added)
{
$data = explode("-", $vardate);
$date = new DateTime();
$date->setDate($data[0], $data[1], $data[2]);
$date->modify("".$added."");
$day= $date->format("Y-m-d");
return $day;
}
echo "Example : " . adddate("2010-08-01","+1 day");
//--hasil---- Example : 2010-08-02
?>
Nah agan tinggal atur aja tuch +1 day dengan berbagai macam ketentuan misalnya:
+1 day, +3 day, + 1 month, +1 year, -3 day, -10 day dan sebagainya dech hehehe….
Thanks to Studio Kami at http://id.php.net/manual/en/function.date-modify.php
13 Apr 11 Bermain Images Content di WordPress
Images Content WordPress – Adakalanya kita bila hendak bermain images dalam content sebuah blog berbasis wordpress, kita ingin mengambil salah satu images tersebut. Nah berikut ini sintak sederhana yang dapat digunakan untuk menarik image pertama dari sebuah content di wordpress blog.
Sintak ini enginenya ditaruh pada header.php dan menggunakan sintak pemanggil script di tempat dimana kita ingin memunculkan images tersebut. Sebagai contoh jika kita ingin membuat index wordpress blog kita dengan menggunakan fungsi the_excerpt()…, otomatis segala bentuk images akan tidak dimunculkan dan teks akan membentuk [...] sebagai petanda more content.
Berikut scriptnya yang ditulis dalam header.php :
*?php
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "http://komunitaskami.com/images-default.jpg";
}
return $first_img;
}
?>
Berikut listing code ditaruh sesuai keinginan untuk memanggil fungsi engine diatas :
*?php echo catch_that_image() ?>
Demikian sintak sederhana yang bisa digunakan untuk menarik image content dalam wordpress blog.
Community
