Tag: Tips & Tricks

Menukar Nilai Dua Variable Tanpa Perantara
Menukar nilai dua buah variable adalah salah satu algoritma dasar dalam struktur data. Biasanya untuk menulis fungsi swap ini, kita membutuhkan tambahan satu variable sebagai perantara. Berikut ini adalah algoritma untuk menukar nilai dua buah variable dengan perantara.
```
tmp = x;
x = y;
y = tmp;
```
Pada contoh di atas nilai variable x dan y bertukar melalui perantara tmp. Berikut ini adalah algoritma untuk menukar nilai dua buah variable tanpa perantara.
```
x = x ^ y;
y = x ^ y;
x = x ^ y;
```
Singkat dan sederhana, nilai variable x dan y sudah bertukar. Tanda caret ^ dalam bahasa pemrograman Java dan C adalah operator bitwise (logika) XOR (Eksklusif Or). Pada eksklusif or berlaku hukum alternatif, yaitu hanya salah satu saja yang boleh bernilai true. Perbedaannya dengan inklusif or (OR) adalah berlaku hukum kumulatif, yaitu boleh salah satu atau keduanya bernilai true.
```
x  y   OR  XOR
--------------
0  0    0   0
0  1    1   1
1  0    1   1
1  1    1   0
```
Penjelasan dari keajaiban pertukaran di atas adalah karena operator XOR memiliki dua sifat. Pertama, menggabungkan/mencampurkan informasi, dan kedua, mampu memisahkannya kembali (sekaligus menghapus jejak penggabungannya) dengan cara melakukan lagi operasi XOR kepadanya.

Pada baris pertama, nilai x dan y digabungkan sehingga membentuk suatu nilai hybrid di antara keduanya (sifat 1). Simpan nilai hybrid tersebut di x. Pada baris kedua nilai hybrid di-XOR-kan lagi dengan y yang akan memunculkan lagi nilai x semula (sifat 2). Simpan nilai x semula di y. Terakhir nilai hybrid di-XOR-kan dengan y (ingat y sekarang bernilai x semula) sehingga memunculkan lagi nilai y semula (sifat 2). Simpan nilai y semula di x.

Supaya lebih jelas lagi, kita coba dengan contoh. Misalnya int x bernilai 5 (0101) dan int y bernilai 9 (1001).
```
x = 5 = 0101;
y = 9 = 1001;

x = x ^ y; // x = 0101 ^ 1001 = 1100 = hybrid
y = x ^ y; // y = 1100 ^ 1001 = 0101 = 5
x = x ^ y; // x = 1100 ^ 0101 = 1001 = 9
```
Implementasi pertukaran nilai dengan operator logika XOR dalam bahasa pemrograman Java adalah sebagai berikut.
```
int x = 5, y = 9;

x ^= y; // x = hybrid
y ^= x; // y = 5
x ^= y; // x = 9
```
Begitulah cerita dibalik dua nilai variable yang tertukar :D. Pembahasan lebih mendalam tentang XOR Swap Algorithm bisa dibaca di Wikipedia.
September 7, 2012
5 Teknik Dasar HTML5 yang Wajib Anda Ketahui
Dalam berbagai artikel dan contoh kode pada blog ini sudah diterapkan beberapa fitur baru yang ada di HTML5. Saat ini sebagian besar browser terbaru sudah mendukung fitur-fitur tersebut. Berikut ini adalah 5 teknik dasar HTML5 untuk membuat dokumen HTML Anda menjadi lebih singkat dan bersih.

1. Penulisan doctype pada awal sebuah dokumen HTML yang lebih singkat dan sederhana.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
Dulu, hampir tidak mungkin ada seorang web developer yang hafal di luar kepala kode untuk menuliskan doctype di atas. Sekarang Anda dapat menggantinya dengan doctype berikut ini.
```
<!doctype html>
```
Sederhana sekali dan tidak perlu menuliskannya dengan huruf besar seperti orang sedang marah.

2. Penggunaan XML namespace dan atribut-atribut XML lain pada elemen html tidak diperlukan.
```
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
```
Pada HTML5 cukup ditulis:
```
<html lang="en">
```
3. Pada HTML5 diperkenalkan cara baru untuk menyebutkan charset dokumen.
```
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
```
Pada HTML5 menjadi:
```
<meta charset="utf-8">
```
4. Pada HTML5 kita bisa menulis tag script, style, dan link tanpa atribut type="text/javascript" dan type="text/css".
```
<script type="text/javascript">
  // kode javascript Anda di sini
</script>
```
Pada HTML5 cukup dituliskan seperti berikut:
```
<script>
  // kode javascript Anda di sini
</script>
```
5. Dokumen HTML5 tetap valid tanpa adanya slash ‘/’ pada self closing tag.
```
<img src="" alt="" />
<br />
```
Pada HTML5, tanda slash bisa dihilangkan.
```
<img src="" alt="">
<br>
```
Itulah 5 teknik dasar untuk membuat sebuah dokumen HTML5 yang valid dan memiliki syntax yang kompatibel dengan HTML4 dan XHTML1. Jadi tidak ada salahnya untuk menggunakannya dalam setiap website yang kita buat. Seperti yang Anda lihat, HTML5 membuat kode menjadi lebih singkat dan bersih, sehingga menghasilkan ukuran file yang lebih kecil. Ukuran file yang lebih kecil akan membuat website menjadi lebih ringan untuk diakses.
May 11, 2012
Mengeblok Flash dari Browser

Akhir-akhir ini semakin banyak website yang tidak beretika, menjejali pengunjungnya dengan iklan-iklan besar yang menutup hampir keseluruhan layar. Iklan yang muncul tiba-tiba dan menutup sebagian layar tidak hanya memakan bandwidth tetapi juga sangat mengganggu. Banyak sekali iklan bertebaran di situs-situs besar, baik yang berbentuk teks maupun gambar. Tapi di antara iklan yang paling menyebalkan tentunya adalah iklan berbentuk animasi Flash. Tidak hanya menampilkan gambar bergerak, terkadang iklan tersebut juga mengeluarkan suara yang mengagetkan.

Browser adalah pintu gerbang menuju dunia maya, maka sudah sewajarnya kita melindunginya dari hal-hal yang tidak diinginkan. Untuk mengatasi masalah yang cukup mengganggu ini, kita dapat memasang plugin flashblock pada browser. Khusus untuk Google Chrome ada sebuah pilihan yang dapat diaktifkan untuk mengeblok script-script yang tidak bisa dijalankan secara alami oleh browser, atau dengan kata lain script yang berjalan menggunakan plugin seperti Flash. Cara mengaktifkannya adalah dengan menuju ke menu settings -> Under The Hood -> klik pada tombol Content Settings pada bagian Privacy -> cari pada bagian Plug-ins -> lalu pilih Click to play.

Dengan pilihan ini, pengguna diharuskan mengeklik tulisan “click to run the Flash plug-in” pada browser ketika sebuah animasi Flash muncul. Tentunya kita hanya mengeklik pada media yang dipercaya dan tau isinya tidak akan membuang-buang waktu atau bandwidth, misalnya pada saat menonton video di Youtube. Kini kita bisa berselancar, membaca informasi di dunia maya dengan nyaman dan aman tanpa gangguan animasi Flash. Mungkin pada versi Firefox berikutnya pilihan ini juga akan disertakan. Di bawah ini adalah tampilan pada saat dijumpai animasi/video Flash pada browser.

May 2, 2012
Memahami SQL Join dengan Diagram Venn
Query JOIN pada bahasa SQL berfungsi untuk menggabungkan data dari 2 atau lebih tabel dalam sebuah database. Syntax SQL mempunyai 4 tipe JOIN, yaitu: INNER, OUTER, LEFT, dan RIGHT.

Diagram Venn adalah diagram yang menunjukan semua kemungkinan relasi logis antara sekelompok variabel yang berbeda. Di sekolah dasar, Diagram Venn dikenalkan pada saat mempelajari teori himpunan pada Matematika. Diagram Venn biasanya dilambangkan dengan 2 atau lebih lingkaran yang saling berpotongan (meskipun tidak harus selalu demikian).

Misalkan kita mempunyai 2 buah tabel pada database, TabelA dan TabelB. TabelA di sebelah kiri dan TabelB di sebelah kanan. Kemudian kita akan mengisi masing-masing dengan 4 buah data.
```
id nama       id  nama
-- ----       --  ----
1  Andik      1   Andik
2  Binta      2   Bambi
3  Carli      3   Conan
4  Didut      4   Didut
```
Sekarang kita coba gabungkan kedua tabel di atas menggunakan tipe-tipe JOIN yang ada.

1. INNER JOIN
```
SELECT * FROM TabelA INNER JOIN TabelB
ON TabelA.nama = TabelB.nama

id nama       id  nama
-- ----       --  ----
1  Andik      1   Andik
4  Didut      4   Didut
```
INNER JOIN hanya akan menampilkan data yang cocok satu sama lain (berpasangan) pada kedua tabel. Diagram Venn-nya adalah sebagai berikut.

2. OUTER JOIN
Pada dasarnya OUTER JOIN dibagi menjadi 3, FULL OUTER JOIN, LEFT OUTER JOIN, dan RIGHT OUTER JOIN.

2.a. FULL OUTER JOIN
```
SELECT * FROM TabelA FULL OUTER JOIN TabelB
ON TabelA.nama = TabelB.nama

id    nama       id    nama
--    ----       --    ----
1     Andik      1     Andik
2     Binta      null  null
3     Carli      null  null
4     Didut      4     Didut
null  null       2     Bambi
null  null       3     Conan
```
FULL OUTER JOIN menghasilkan semua data yang ditemukan dan cocok satu sama lain pada kedua tabel, jika ada yang tidak cocok, bagian yang tidak ada tersebut akan berisi null. Jadi bisa dikatakan FULL OUTER JOIN ini akan menampilkan semua data yang ada di kedua tabel termasuk yang tidak cocok satu sama lain. Diagram Venn-nya adalah sebagai berikut.

2.b. LEFT OUTER JOIN
```
SELECT * FROM TabelA LEFT OUTER JOIN TabelB
ON TabelA.nama = TabelB.nama

id    nama       id    nama
--    ----       --    ----
1     Andik      1     Andik
2     Binta      null  null
3     Carli      null  null
4     Didut      4     Didut
```
LEFT OUTER JOIN menghasilkan semua data yang ada pada TabelA (tabel sebelah kiri), dengan pasangannya (jika ada) pada TabelB (tabel sebelah kanan). Jika pasangannya tidak ditemukan, tabel sebelah kanan akan berisi null. Diagram Venn-nya adalah sebagai berikut.

Lalu bagaimana jika kita menginginkan data yang hanya ada pada TabelA (tabel sebelah kiri)? Untuk itu kita membutuhkan bantuan klausa WHERE.

2.c. LEFT OUTER JOIN dengan klausa WHERE
```
SELECT * FROM TabelA LEFT OUTER JOIN TabelB
ON TabelA.nama = TabelB.nama
WHERE TabelB.id IS null

id    nama       id    nama
--    ----       --    ----
2     Binta      null  null
3     Carli      null  null
```
Query LEFT OUTER JOIN di atas menghasilkan data yang hanya ada pada TabelA (tabel sebelah kiri). Diagram Venn-nya adalah sebagai berikut.

Untuk tipe RIGHT OUTER JOIN tidak perlu dijelaskan lagi karena hasilnya hanya kebalikan dari LEFT OUTER JOIN. Terakhir, ada satu bentuk diagram lagi, yaitu jika yang diinginkan hanya data yang tidak memiliki pasangan satu sama lain, alias data tersebut berada di luar bagian yang berpotongan.

2.d. FULL OUTER JOIN dengan klausa WHERE
```
SELECT * FROM TabelA FULL OUTER JOIN TabelB
ON TabelA.nama = TabelB.nama
WHERE TabelA.id IS null OR
TabelB.id IS null

id    nama       id    nama
--    ----       --    ----
2     Binta      null  null
3     Carli      null  null
null  null       2     Bambi
null  null       3     Conan
```
Query FULL OUTER JOIN di atas menghasilkan data yang unik (tidak ada yang berpasangan) dari TabelA dan TabelB. Diagram Venn-nya adalah sebagai berikut.

Artikel ini merupakan terjemahan bebas dari artikel yang ditulis oleh Jeff Atwood dengan ditambah penjelasan seperlunya.
April 8, 2012
Troubleshooting “Unexpected T_ECHO” pada Operator Ternary
Satu kesalahan yang kerap dijumpai pada penggunaan operator ternary adalah

Unexpected T_ECHO

Pesan kesalahan di atas akan muncul jika pada pernyataan kedua dan ketiga berisi perintah/eksekusi suatu pernyataan. Perhatikan contoh berikut:
```
<?php
$angka = 10;
$angka % 2 === 0 ? echo "genap" : echo "ganjil";
```
Pernyataan 2 dan 3 berisi perintah echo yang berfungsi mencetak tulisan “genap”/”ganjil” pada browser. Operator ternary tidak sepenuhnya identik dengan pernyataan if/else. Pada if/else kita dapat mengeksekusi suatu perintah, seperti yang ditunjukkan pada kode berikut:
```
<?php
$angka = 10;
if ($angka % 2 === 0)
  echo "genap"

else echo "ganjil";
```
Berbeda dengan if/else, setelah kondisi dievaluasi, operator ternary harus mengembalikan suatu nilai dari pernyataan 2 atau 3. Nilai di sini bisa berupa string, number, atau boolean. Jika masih ingin menggunakan operator ternary, kode di atas harus diubah menjadi sebagai berikut:
```
<?php
$angka = 10;
echo $angka % 2 === 0 ? "genap" : "ganjil";
```
February 24, 2012