Cara menuliskan link html dalam beberapa folder

Jika kita ingin memberikan link didalam folder yang sama, hanya menggunakan namanya:

<a href="thefile.html">my link</a>

jika halamannya berada diluar folder:

<a href="../thefile.html">my link</a>

jika halamanya berada di folder lain:

<a href="subdir/thefile.html">my link</a>

15 shortcut keyboard yang mungkin anda tidak ketahui

Shortcut Keyboard, Mempercepat Kita Bekerja

Kebanyakan para pengguna komputer hanya tahu shortcut keyboard yang dasar saja, seperti menekan tombol Control (Ctrl) dengan tombol P pada keyboard untuk print sebuah dokumen.

Tapi tahukan anda, ada banyak tombol yang dapat difungsikan lagi. Untuk memperbesar tampilan di komputer anda secara cepat, untuk menutup window browser anda, semua shortcut ini akan membuat anda berada dalam halaman website atau masih banyak lagi hanya dengan tekanan jari saja.



Menambah/menyimpan sebuah Bookmark



Tombol AppleWaktu anda sedang browsing anda dapat dengan mudah menyimpan sebuah halaman web tersebut sebagai bookmark hanya dengan memencet tombol berikut ini.

PC : Ctrl + D

Mac : Command/tombol Apple (lihat sebelah kanan) + D



Hapus Selamanya

Ketika anda ingin menghapus sebuah file selamanya-------ketika anda tidak mau membuang ke recycle bin dulu-----tekanlah tombol dibawah ini.

PC: Shift + Delete




Menutup Browser Anda

Baik boss anda jalan mendekati meja kerja anda ketika kamu sedang membaca sebuah halaman blog gosip ataupun suami anda sedang mendekati ruang anda dimana anda sedang belanja hadiah buat dia secara online, tutuplah browser anda dengan cepat ,dengan shortcut berikut ini.

PC: Alt + F4

Mac: Ctrl + Q

Tombol Window




Tunjukkan Desktop (tampilan depan/utama komputer anda)
Jika anda lagi membuka banyak program di komputer anda dan anda ingin cepat-cepat ke tampilan halaman depan komputer anda------tanpa harus meng-minimize satu per satu program anda----- tekanlah tombol berikut ini.

PC : tombol Window (lihat sebelah kanan) +D

Mac : F11



Mencari file atau folder yang ada di komputer anda
Lupa dimana menyimpan file atau folder anda ketika ingin mencari file tersebut. Shortcut di bawah ini akan membantu anda dalam mencarinya.

PC : tombol Window + F

Mac : Command + F



Mengubah ukuran tampilan (zoom)
Baik ketika anda sedang bekerja di halaman Web atau di sebuah program untuk mengetik, Ubahlah ukuran tampilan anda dengan tombol berikut ini.

PC : Ctrl + gulir tombol roda mouse anda

Mac : Command + tanda plus ; Command + tanda minus



Membuka tab browser yang barusan anda tutup di browser anda
Pernahkah anda tidak sengaja menutup tab browser yang sedang anda lihat dan anda butuh waktu lama untuk mencari kembali halaman web yang anda tutup tersebut? Shortcut di bawah ini akan membantu anda membuka kembali halaman web yang ditutup tersebut hanya dalam waktu sekejap.

PC : Ctrl + Shift + T

Mac : Command +Z



Pindah-pindah diantara semua program yang sedang dibuka
Mengatur semua program yang sedang dibuka secara bersamaan akan membuat kita bingung. Permudahlah untuk pindah-pindah diantara semua program anda dengan trik cepat ini.

PC : Alt + Tab

Mac : Command + Tab



Mengambil foto dari tampilan layar kita
Ambilah sebuah foto dari tampilan layar komputer anda ------biasanya ini digunakan untuk halaman-halaman web, kamu bisa dengan mudah meng-copy atau meng-paste nya.

PC : Print Screen ( kemudian paste dengan menekan [Ctrol+V] di sebuah halaman word document)

Mac : Command +Shift +3


Refresh sebuah halaman web
Baik anda sedang menunggu sebuah email baru atau sebuah berita yang terbaru untuk ditampilkan di sebuah halaman web, cobalah meng-refresh halaman anda dengan mudah menggunakan tombol dibawah ini.

PC: F5, atau Ctrl + R

Mac: Command+ R



Kembali ke halaman sebelumnya di browser
Saatnya mencoba shortcut dibawah ini, dimana bisa membuat anda dengan cepat dapat melihat kembali halaman web yang anda buka sebelumnya.

PC : Alt + ←

Mac : Command + [



Memperbaiki Ejaaan Kata
Tidak boleh ada kesalahan : ejaan yang sempurna dan kata yang tepat hanya kurang satu huruf saja.

PC atau Mac : F7



Menambahkan “http://www” kedalam address bar di browser anda
Cara tercepat untuk menuju alamat online anda adalah dengan mengetik nama alamat yang akan kita tuju seperit contoh (ketik “Google” ), kemudian tekan tombol-tombol berikut ini untuk menambahkan “http://www” ke awalnya dan “.com “ ke bagian belakangnya.

PC : Ctrl + Enter

Mac : Command+ Enter


Memilih Address Bar
Ketika anda ingin cepat-cepat mengetik sebuah alamat URL yang baru di browser anda, shortcut di bawah ini akan memudahkan anda meng-highlight address bar untuk anda, jadi anda bisa memulai mengetik alamatnya tanpa harus mengerakkan mouse anda terlebih dahulu.

PC : Ctrl + L, atau F6

Mac: Command + L


Tampilkan Windows start menu
Hanya dengan menekan tombol ini anda akan dengan mudah dapat melihat tampilan pilihan Start menu anda .
PC : tombol Window, atau Ctrl + Esc

Efek Butiran - Butiran Air Membasahi Foto

Efek butiran - butiran air membasahi foto? tenang.. tenang.. ini cuman rekayasa photoshop aja, jangan dikira prakteknya menyiram foto dengan air betulan, nanti gak malah bagus eh jd rusak...

Ok, tanpa banyak chit-chat ini langkah-langkahnya:
1. Buka Gambar yang akan diedit dengan photoshop
Bisa foto kamu atau pemandangan alam, atau barangkali belum punya gambar untuk diedit? silahkan mencari di search engine, disini saya menggunakan gambar pantai...

(beautiful scene)

2. buat lingkaran dengan Elipse Tool 
catatan: foreground dan background harus putih

Hasilnya:

3. Selelah itu klik kanan dan pilih Rasterize Layer... 

4. Waktunya memberi efek...
Menu - Layer - Layer Style - Blending Options...
Centang Drop Shadow dan Inner Shadow 


dan

[OK]
Lalu pada pallete - ubah ke mode Multiply 


5. Yup Hasilnya...


Hehehe... Tinggal perbanyak aja tetesan airnya... beres dah...

dengan belajar photoshop Hasilnya????? anda bisa mengutak-atik lagi dan ini hasil dari penulis
Pantai yang indah... Hawaiii.... kapan bisa berlibur ke situ??? ;P 

Menambahkan Tulisan Berefek Komik Pada Foto

Pada photo efek kali ini kita akan menambahkan tulisan berefek komik pada foto anda sehingga membuatnya lebih berkesan ekspresif

Para disainer grafis mempunyai keahlian untuk mengedit dan mengubah style foto agar kelihatan lebih artistik, anda pun juga bisa karena yang diperlukan hanya aplikasi pintar yaitu photoshop

Langkah-langkahnya: 

1. Jalankan program photoshop. file --> Open atau tekan [ctrl] + [O] Setelah itu carilah gambar yang akan diubah, Sebagai contoh disini saya menggunakan foto




Ukuran 800 x 600 pixels 

2. Mulai membuat dialog box
caranya: klik Pada Pen tool berbentuk  seperti kepala pulpen lalu mulailah membuat garis-garis dengan menggunakan pen tool [tekan mouse sebelah kiri pada gambar/foto dan atur posisinnya]
Untuk hasil lebih rapih anda bisa gunakan Freeform pen tool  atau tekan [Alt] + [+] pada keyboard lalu potong dan selanjutnya terserah anda, mau buat seperti apa, yang lonjong, bullet , atau lancip.

Lalu masuk ke menu utama dan pilih Layer --> rasterize --> Shape
[hal ini perlu dilakukan karena layer anda masih dalam keadaan mask / bayangan] 
contoh hasil: 
Untuk mempertegas gunakan Layer --> Layer Style --> stroke...

3. Setelah itu lanjut ke Teks tool dan mulai menulis di dalam dialog box tadi, jika ingin memperbesar atau memperkecil dan memutar tulisan tekan [ctrl] + [T] atau atur di properties teks yang terletak di bawah menu utama 

Hasilnya
Ayo Belajar Photoshop Frens

Tutorial Foto Tua dan Efek Kuno

Tutorial Foto Tua dan Efek Kuno

Foto jaman sekarang diubah ke model foto jaman perjuangan? Mana bisa? tenang, coba dulu tutorial Adobe photoshop ini dijamin foto kamu yang full colour bisa jadi foto hasil jepretan masa lampau...tapi bagi pengguna android sih sudah banyak ya yang bisa pakai  aplikasi editing photo

Langkah - Langkahnya:

1. Download dulu gambar (artis idola saya Liv Tyler) di bawah ini

 

Tips!!
Atau jika anda ingin gambar yang lain bisa mencari foto2 artis idola anda di Google dengan memasukkan kata kunci nama artis idola anda...

2. Buka gambar hasil dowload dengan program photoshop, setelah itu kita ubah gambar ke mode hitam putih...
Caranya: Menu Utama pilih Image - Adjustment - Desarture
Hasilnya:
 

3. Setelah itu kita beri effek Film Grain
Caranya: Menu Utama pilih Filter - Filter Gallery - Film Grain 
Setting:
 
Maka Hasilnya:

Texture Gambar menjadi agak kasar 

4. Sekarang tinggal sentuhan terakhir yaitu menjadikannya terkesan KUNO
Caranya: Menu Utama pilih Image - Adjustment - Hue/Saturation 
Setting:
 
Dan.............

Dari hasil Tutorial disini akan didapat 
Hasilnya:
 
Wah Foto Kuno Niih ^_^ bisa masuk Museum...

Agar windows 7 ringan ditenteng netbook

Di netbook, Windows 7 perlu diatur agar tidak menyedot daya baterai banyak-banyak. Sekalian juga, bikin Windows 7 jalan lebih lancar dan optimal di layar yang kecil.

Biar Windows Tentukan yang Terbaik
Ada sebuah menu yang menampilkan beberapa pilihan untuk mengatur efek visual. Menu yang sudah ada seja Windows XP itu bikin kita tak repot mengatur efek visual satu per satu. Kita tinggal pilih mau bagaimana Windows-nya, nanti Windows akan mengatur efek visualnya.
Untuk netbook, pilihan yang cocok adalah mengatur efek visual agar kinerjanya bisa paling baik. Istilah yang Windows pakai adalah “Adjust for best performance”.
1. Klik “Start” lalu klik kanan pada “Computer”, lanjutkan dengan klik “Properties”.
2. Klik “Advanced System Settings”. Di bagian “Performance”, klik “Settings”.
3. Aktifkan “Adjust for best performance”. Klik “OK”.

Klasik Lebih Baik
Tampilan Windows 7 pakai Aero yang butuh hardware kartu grafis kelas berat. Karena netbook pakai kartu grafis kelas enteng, tampilan Windows 7 diubah ke tampilan klasik yang otomatis mematikan tampilan Aero.
1. Klik kanan di desktop, terus klik “Personalize”.
2. Pilih “Windows Classic”.
3. Tunggu sampai perubahan diterapkan.

Perkecil Menu Start
Tips ini bukan untuk bikin Windows berjalan lebih cepat – kalau efek sampingnya begitu sih, syukurlah.   Tips ini bertujuan agar Windows lebih enak dipandang. Perhatikan deh, taskbar Windows Vista, apalagi Windows XP. Itu karena ikonnya pun gede-gede.
Layar netbook kan kecil-kecil. Kalau ikonnya gede-gede, taskbar-nya gede, habislah tampilan layar monitor. Biar tampilan agak lega, perkecil taskbar-nya.
1. Klik kanan di taskbar, lalu klik “Properties”.
2. Beri tanda centang pada “Use Small Icons”.
3. Ubah “Taskbar buttons” jadi “Combine when taskbar is full”.
4. Buka tab “Start Menu”. Ubah “Power button action” jadi “Hibernate” atau “Sleep”.
5. Klik “Customize”. Beri tanda centang pada “Run Command” dan hilangkan tanda centang pada “Use Large Icons”.
6. Klik “OK” lalu klik “OK” lagi. Kecillah taskbar Windows 7.

Matikan Ikon Sistem
Lagi-lagi ada kosmetik yang tidak perlu yang bikin sempit tampilan layar netbook yang sudah pas-pasan. Banyaknya ikon di pojok kanan taskbar bikin taskbar jadi “pendek”. Ikon di pojok yang tidak dibutuhkan bisa dibuang.
1. Klik “Start > Control Panel”.
2. Klik “Appearance and Personalizion” lalu klik “Customize Icons on the taskbar”.
3. Klik “Turn System icons on or off”.
4. Matikan ikon yang Sahabat tak butuh, misalnya “Clock”, “Volume”, dan “Action Center”.
5. Klik “OK”.

Cara Menghitung Record -- MySQL COUNT PHP

Cara Menghitung Record -- MySQL COUNT PHP

Dalam MySQL terdapat fungsi count. Fungsi COUNT adalah fungsi agregat yang hanyamenghitung semua item yang berada dalam kelompok. "products" tabel yang ditampilkan di atas memiliki beberapa produk dari berbagai jenis. Salah satu penggunaan COUNT mungkinuntuk mengetahui berapa banyak item dari setiap jenis yang ada di meja.

Seperti yang kita lakukan dalam pelajaran pengenalan agregat, kita akan GROUP BY tipe untuk membuat empat kelompok: Music, Toy, Clothing dan Food. Untuk sedikit perubahantempo, mari kita menghitung nama kolom untuk menemukan berapa banyak produk ada per jenis.

Contoh Kode PHP & MySQL : 

<?php
// Make a MySQL Connection

$query = "SELECT type, COUNT(name) FROM products GROUP BY type"; 
  
$result = mysql_query($query) or die(mysql_error());

// Print out result
while($row = mysql_fetch_array($result)){
 echo "There are ". $row['COUNT(name)'] ." ". $row['type'] ." items.";
 echo "<br />";
}
?>

Tampilan Hasilnya adalah :

There are 2 Clothing items.
There are 1 Food items.
There are 3 Music items.
There are 2 Toy items. 

Cara Mendeteksi Input Username yang Sama dengan php

Cara Mendeteksi Input Username yang Sama dengan php

Bagaimana cara melakukan cek terhadap input username yang sama, karena username itu kan unik, artinya username tiap user harus berbeda?
Ya, betul sekali .. kalau dilihat dari struktur tabelnya, seharusnya username dijadikan sebagai kunci utama (Primary Key). Lihat gambar berikut:

Sehingga, misalnya ada user yang memasukkan username yang sudah dimiliki oleh user lain, maka data tersebut tentu tidak akan tersimpan di database. Mungkin, maksud Anda bagaimana cara memberitahukan user bahwa username tersebut sudah dimiliki oleh user lain dan berikan pemberitahuan kepadanya agar memasukkan username yang berbeda.

Oke, cara sederhananya bisa dilihat pada skrip berikut:

// Cek username di database
$cek_username=mysql_num_rows(mysql_query
             ("SELECT username FROM users
               WHERE username='$_POST[username]'"));
// Kalau username sudah ada yang pakai
if ($cek_username > 0){
  echo "Username sudah ada yang pakai. Ulangi lagi";
}
// Kalau username valid, inputkan data ke tabel users
else{
  mysql_query("INSERT INTO users(username,
                                 password,
                                 nama_lengkap,
                                 level)
                      VALUES('$_POST[username]',
                             '$_POST[password]',
                             '$_POST[nama_lengkap]',
                             '$_POST[level]')");
}

Cara Mudah Membuat Grafik Statistik dengan PHP dan CSS

Seperti yang saya janjikan pada status di Twittermaupun di Facebook bahwa saya berusaha akan menulis artikel tentang cara membuat grafik statistik dengan PHP dan CSS. Dan kini.. janji sudah terwujud.

Untuk membuat grafik chart, sebenarnya sudah banyak sekali package/library yang tersedia baik free maupun bayar. Salah satunya yang free adalah JpGraph. Cara penggunaan JpGraph ini pernah saya bahas sebelumnya, atau Anda bisa download tutorialnya di sini. Namun, untuk menjalankan library-library tersebut harus didukung oleh library yang lain juga misalnya GD library. Tanpa library tersebut, maka mustahil library grafik yang Anda peroleh dapat dijalankan. Di samping itu kita masih agak sedikit repot dengan cara penggunaannya, karena setiap library grafik berbeda penggunaannya.

Nah.. kini Anda tak perlu repot lagi untuk membuat grafik chart karena saya akan memberikan tutorial cara membuat grafik statistik hanya dengan perintah PHP sederhana dan ditunjang oleh CSS (Cascade Style Sheet). Memang sih.. untuk tampilan tidak semewah kalo kita menggunakan JpGraph atau yang lain, tapi paling tidak.. representasi grafiknya bisa dibaca dengan mudah dan bisa membuat keren website Anda 

OK.. untuk studi kasus kali ini, saya akan menerapkan hal ini untuk representasi data mahasiswa berdasarkan jenis kelaminnya. Andaikan kita memiliki tabel database dan datanya sebagai berikut:

view sourceprint?

1.CREATE TABLE `mhs` (

2.`nim` varchar(10),

3.`nama` varchar(10),

4.`jenisKelamin` varchar(10),

5.PRIMARY KEY  (`nim`)

6.);

view sourceprint?

1.INSERT INTO `mhs` VALUES ('A001', 'A', 'LAKI-LAKI');

2.INSERT INTO `mhs` VALUES ('A002', 'B', 'LAKI-LAKI');

3.INSERT INTO `mhs` VALUES ('A003', 'C', 'LAKI-LAKI');

4.INSERT INTO `mhs` VALUES ('A004', 'D', 'PEREMPUAN');

5.INSERT INTO `mhs` VALUES ('A005', 'E', 'LAKI-LAKI');

Untuk outputnya, kita nanti akan berusaha membuat script yang menampilkan grafik seperti di bawah ini

Perhatikan gambar di atas, bahwa ketika kita dekatkan mouse ke grafik batangnya maka akan muncul keterangan data statistiknya. Efek tersebut kita buat tanpa menggunakan script apapun, kecuali hanya CSS doang. Simpel tapi menarik bukan?

Trus.. gimana ide dasar membuat grafiknya? terutama membuat grafik batangnya? Dalam hal ini grafik batang kita buat menggunakan CSS sedangkan panjang pendeknya grafik batang tersebut tergantung jumlah data yang kita hitung menggunakan script PHP.

Untuk membuat sebuah batang dengan CSS, kita cukup membuat tag seperti ini:

view sourceprint?

1.<div style="height: 10px; width: 10%; background-color: red;"title="..."></div>

Atribut ‘height’ digunakan untuk mengatur lebar dari batang (dalam hal ini menggunakan satuan pixel). Selanjutnya ‘width’ untuk menentukan panjang batang. Anda bisa menggunakan satuan pixel maupun prosentase. Bila Anda menggunakan prosentase maka prosentase yang dimaksud adalah relatif terhadap panjang jendela browser. Misalkan diberikan ‘width: 10%’ maka panjang batang adalah 10% dari panjang jendela browser. Sedangkan atribut ‘background-color’ untuk mengatur warna batang, dan ‘title’ untuk memberikan title dari batang tersebut. Efek pemberian ‘title’ tampak seperti pada gambar output di atas yaitu akan muncul keterangan (tool tips) ketika mouse mengenai batang tersebut.

Nah… untuk selanjutnya kita hanya bermain-main pada atribut ‘width’ dan ‘title’ untuk membuat tampilan output seperti di atas. Kedua atribut ini nanti kita buat dinamis tergantung jumlah datanya.

Trus.. untuk mengatur panjang pendeknya batang gimana caranya? caranya adalah dengan menggunakan skala. Wah.. ada matematikanya ya? jelas donk… wah mentang-mentang yang nulis artikel ini orang matematika ya? he.. 3x nggak juga, karena kebetulan topik ini ada sangkut pautnya dengan matematika 

Nah.. bagaimana penggunaan skalanya? OK kita misalkan kita tentukan panjang grafik maksimum adalah 30% dari panjang jendela browser. Karena 30% ini panjang maksimum, maka kejadian ini akan terjadi ketika ada item data yang jumlahnya 100%. Sebagai contoh misalkan ada 10 mahasiswa, dan semuanya pria (prosentase pria 100%). Dengan demikian grafik batang untuk pria ini panjangnya adalah 30%. Nah.. dari asumsi ini, kita tinggal atur skalanya berarti untuk item data sejumlah n% maka panjang batangnya adalah (n*30/100)%. OK, paham ya idenya?

Dengan demikian, berdasarkan ide di atas berarti sebelum mulai membuat grafiknya, kita harus dapatkan dulu data prosentase setiap item data, dalam hal ini jumlah laki-lakinya berapa prosen begitu pula perempuannya. Setelah jumlah prosentase masing-masing diketahui, barulah kita gunakan untuk mengatur panjang grafik batang menggunakan skala di atas.

So.. script untuk membuat grafik statistik mahasiswa berdasarkan jenis kelamin kita buat sbb:

view sourceprint?

01.<?php

02. 

03.// koneksi ke mysql

04.mysql_connect("dbhost", "dbuser", "dbpass");

05.mysql_select_db("dbname");

06. 

07.// mencari jumlah laki-laki dari database

08.$query = "SELECT count(*) AS jumCowok FROM mhs WHERE jenisKelamin = 'LAKI-LAKI'";

09.$hasil = mysql_query($query);

10.$data  = mysql_fetch_array($hasil);

11.$jumCowok = $data['jumCowok'];

12. 

13.// mencari jumlah perempuan dari database

14.$query = "SELECT count(*) AS jumCewek FROM mhs WHERE jenisKelamin = 'PEREMPUAN'";

15.$hasil = mysql_query($query);

16.$data  = mysql_fetch_array($hasil);

17.$jumCewek = $data['jumCewek'];

18. 

19.// menghitung total mahasiswa

20.$total = $jumCowok + $jumCewek;

21. 

22.// menghitung prosentase laki-laki dan perempuan

23.$prosenCowok = $jumCowok/$total * 100;

24.$prosenCewek = $jumCewek/$total * 100;

25. 

26.// menentukan panjang grafik batang berdasarkan prosentase

27.$panjangGrafikCowok = $prosenCowok * 30 / 100;

28.$panjangGrafikCewek = $prosenCewek * 30 / 100;

29. 

30.?>

31. 

32.<h2>Statistik Mahasiswa Berdasarkan Jenis Kelamin</h2>

33. 

34.<p><b>Laki-laki</b> (Jumlah: <?php echo $jumCowok; ?> | <?phpecho $prosenCowok; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCowok; ?>%; background-color: red;"title="Laki-laki (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%)"></div></p>

35. 

36.<p><b>Perempuan</b> (Jumlah: <?php echo $jumCewek; ?> | <?phpecho $prosenCewek; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCewek; ?>%; background-color: red;"title="Perempuan (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%)"></div></p>

Nah.. mudah bukan membuatnya?

Oya.. satu lagi yang perlu saya tambahkan. Lantas.. bagaimana bila kejadiannya keseluruhan mahasiswanya laki-laki atau perempuan? pastilah nantinya ada prosentase yang 0% dan akibatnya grafik batangnya tidak muncul karena width nya ’0%’. Sebenarnya tidak apa-apa sih, namun.. kok kayaknya kurang seru. Meskipun prosentasenya 0%, tapi paling tidak kita munculkan sedikit grafiknya meskipun hanya dengan panjang 1%. Untuk membuat ini, kita harus tambahkan statement IF pada script di atas yaitu pada bagian penentuan panjang grafiknya, sehingga pada bagian tersebut menjadi:

view sourceprint?

1.if ($prosenCowok == 0) $panjangGrafikCowok = 1;

2.else $panjangGrafikCowok = $prosenCowok * 30 / 100;

3. 

4.if ($prosenCewek == 0) $panjangGrafikCewek = 1;

5.else $panjangGrafikCewek = $prosenCewek * 30 / 100;

OK?? begitu tutorial yang saya berikan ini, mudah-mudahan ada manfaatnya. Artikel ini terinsipirasi oleh plugin polling di WordPress yang saya pasang di blog ini yang menggunakan ide di atas.