Panduan Git untuk Pemula

Git adalah sistem manajemen riwayat pengembangan kode perangkat lunak, diciptakan pertama kali oleh Linus Torvalds, orang yang sama yang juga telah menciptakan sistem operasi Linux. Fungsi utama dari sistem manajemen kode ini adalah sebagai perekam riwayat pembaruan atau revisi kode sepanjang waktu. Git sama sekali tidak memiliki keterkaitan dengan GitHub, kecuali bahwa GitHub adalah situs web yang berfungsi untuk menyimpan riwayat pembaruan kode perangkat lunak secara daring melalui sistem kontrol riwayat (versi) berjenis Git. Beberapa jenis sistem manajemen riwayat kode selain Git adalah Subversion dan Mercurial, sedangkan beberapa situs web yang sejenis dengan GitHub adalah GitLab dan Bitbucket.

Ketika kamu telah terbiasa menggunakan Git, maka kamu bisa merasakan bahwa kegiatan revisi kode yang kamu lakukan sehari-hari akan tampak seperti ketika kamu sedang menulis jurnal pribadi atau mengeksekusi daftar rencana harian. Kenapa? Karena setiap kali kamu selesai melakukan sesuatu, dimulai dari membuat, menyunting, sampai dengan menghapus berkas, kamu harus membiasakan diri untuk selalu menuliskan pesan dan deskripsi singkat mengenai apa saja yang telah kamu lakukan. Kegiatan ini, dalam lingkungan Git akan disebut sebagai commit.

Karena awal mula penciptaan Git adalah untuk mengembangkan sistem kernel Linux, maka di sini Saya akan menjelaskan perintah-perintah Git melalui sistem operasi yang sama.

Kalau kamu adalah anak Windows sejak lahir, istilah “terminal” mungkin akan terdengar sangat asing di telinga. Terminal adalah aplikasi penerjemah baris-baris perintah dalam bentuk teks yang dituliskan oleh pengguna menggunakan papan ketik melalui tampilan baris perintah (CLI). Pada Windows, kalian akan mengenalnya sebagai Command Prompt atau MS-DOS. Ada beberapa perbedaan kecil dari segi penamaan perintah-perintah yang terdapat pada aplikasi Terminal dibandingkan dengan perintah-perintah pada aplikasi Command Prompt. Di sini Saya hanya ingin menjelaskan garis-garis besarnya saja, untuk keperluan pengoperasian aplikasi Git saja. Kalau kamu pakai Windows, tidak apa-apa. Kamu tidak berdosa. Konsep-konsep di bawah ini akan tetap berguna untuk dipelajari dan dipahami. Nanti akan Saya jabarkan secara lengkap padanan-padanan perintah untuk Command Prompt pada Windows yang setara dengan perintah-perintah Terminal pada Linux.

Kalau kamu baru pertama kali pakai Linux dan masih ragu untuk membuka aplikasi Terminal, mungkin ini adalah saat yang paling tepat untuk melakukan perbuatan dosa terbesar.

Jadi… bukalah aplikasi Terminal sekarang juga, dan mulailah untuk menjadi orang dewasa yang hina, dengan sejuta aib dan dosa yang tak akan mungkin bisa diampuni!

Membuka Aplikasi Terminal

Beginilah tampilan aplikasi Terminal pada Linux. Masing-masing distro mungkin akan memiliki gaya tampilan yang berbeda, akan tetapi konten pertama yang tampil selalu seperti ini, yaitu terdiri dari nama pengguna dan nama komputer, diikuti dengan lokasi direktori saat ini:

Tidak tahu di mana letak aplikasinya?

Kamu tukang bohong!

Pada tampilan di atas, taufik adalah nama pengguna dan linux adalah nama komputer yang sedang kamu pakai sekarang. Karakter ~/ yang muncul setelahnya menyatakan lokasi direktori saat ini. Simbol ~ menyatakan bahwa kamu sedang berada pada akar lokasi yang spesifik kepada pengguna yang sedang aktif, yaitu taufik. Tanpa itu, kamu akan berada pada lokasi akar utama untuk semua pengguna.

Perintah-Perintah Dasar Terminal

Mari kita berkenalan dengan perintah-perintah dasar Terminal terlebih dahulu. Dimulai dengan mengetik ls pada bidang perintah:

Perintah ini berfungsi untuk menampilkan daftar berkas dan folder di dalam direktori saat ini. ls adalah kependekan dari “list”.

Sekarang kita buat folder baru bernama Git dengan menuliskan perintah mkdir nama-folder. mkdir adalah kependekan dari “make directory”:

Coba masuk ke folder tersebut dengan menuliskan perintah cd nama-folder. cd adalah kependekan untuk “change directory”:

Untuk berpindah ke folder induk, tuliskan nama folder sebagai ... Kombinasikan dengan karakter / untuk berpindah-pindah lokasi folder beberapa tingkat sekaligus.

Untuk menghapus folder, gunakan perintah rmdir nama-folder. Perintah ini hanya bekerja pada folder-folder yang kosong saja. Untuk menghapus folder beserta isinya, gunakan perintah rm (untuk “remove”) dengan opsi -R (untuk “recursive”) yang aktif:

taufik@linux:~$ rm -R nama-folder

Untuk membuat berkas, gunakan perintah touch nama-berkas. Untuk menghapus berkas, gunakan perintah rm nama-berkas. Nanti akan Saya jelaskan di bawah.

Perintah-Perintah Dasar Git

Kembali ke folder Git. Di sini kita akan mencoba membuat repositori dengan nama yang sama seperti nama repositori yang pernah kamu buat sebelumnya melalui tampilan web GitHub. Coba kamu buat folder bernama blog dengan cara yang sudah Saya jelaskan sebelumnya, kemudian segera masuk ke folder tersebut.

Jadikan folder blog sebagai repositori lokal kita. Jalankan perintah git init pada folder tersebut. Jika muncul pesan kesalahan bahwa perintah git tidak ada, maka itu artinya aplikasi Git masih belum terpasang.

Untuk memasang aplikasi Git pada sistem operasi Linux, tuliskan perintah sudo apt-get install git (lokasi direktori saat ini tidak akan memberikan pengaruh apa-apa kepada perintah tersebut; aplikasi akan tetap terpasang secara global). Di situ kamu akan diminta untuk memasukkan kata kunci pengguna yang utama:

Tidak tahu kata kuncinya? Itu adalah kata kunci yang sama yang kamu gunakan untuk log masuk ke komputer.

Masih tetap tidak tahu juga kata kuncinya? Coba tanyakan ke mama kamu. Mama kamu pakai Linux? Mama kamu keren!

Aplikasi Git sudah terpasang? Bagus! Sekarang jalankan perintah git init. Jika berhasil, maka akan muncul pesan seperti ini:

Kamu mungkin juga akan diminta untuk menentukan nilai konfigurasi user.name dan user.email pada aplikasi Git. Pada bidang user.name, isikan dengan nama asli kamu. Pada bidang user.email, isikan dengan alamat surel yang aktif. Bagian ini sebenarnya tidak begitu penting ketika kamu hendak mengintegrasikan aplikasi Git dengan GitHub, karena GitHub memiliki sistem autentikasi tersendiri.

taufik@linux:~/Git/blog$ git config --global user.name "Taufik Nurrohman"
taufik@linux:~/Git/blog$ git config --global user.email "mail@example.com"

Ketika kamu melihatnya melalui tampilan penjelajah berkas, maka kamu akan melihat sebuah folder bernama .git telah ditambahkan ke dalam folder blog. Jika tidak tampak, coba aktifkan pilihan untuk memperlihatkan folder tersembunyi:

Sekarang coba kita buat sebuah berkas baru dengan menuliskan perintah touch nama-file:

Sebuah berkas bernama layout.css akan ditambahkan ke dalam folder blog seperti ini:

Untuk menyunting berkas tersebut, jalankan perintah sudo nama-editor nama-berkas. Editor teks primitif yang biasanya sudah ada secara otomatis pada setiap sistem operasi Linux adalah nano dan vi:

Editor vi adalah editor yang paling tua. Saya pribadi lebih nyaman menggunakan nano karena untuk berpindah-pindah kursor kita hanya perlu menggunakan panah atas, bawah, kanan dan kiri pada papan ketik. Tapi kalau kamu ternyata lebih suka tipe yang lebih tua ya silakan. Saya tidak akan menghakimi orientasi seksual kamu.

Tekan Ctrl + S untuk menyimpan perubahan, tekan Ctrl + X untuk keluar dari editor teks dan kembali ke tampilan terminal.

“Memangnya nggak bisa kalau kita langsung menyunting berkas layout.css menggunakan aplikasi GUI yang tersedia seperti jEdit atau Visual Studio Code?”

Bisa kok.

“Terus ngapain kita harus pusing-pusing menuliskan perintah sudo nano layout.css di terminal? Berarti untuk membuat dan menghapus folder atau berkas sebenarnya bisa dilakukan melalui tampilan penjelajah berkas juga kan?!”

HEHEHEHEHEHEHEHE.

Sampai di mana tadi?

Untuk mengecek perubahan yang telah dilakukan, jalankan perintah git status:

Di situ akan muncul pesan bahwa terdapat berkas yang belum ditambahkan ke dalam daftar rekaman. Jalankan perintah git add nama-berkas untuk menambahkannya ke dalam daftar. Kalau kamu memiliki lebih dari satu berkas dan ingin menambahkan semua berkas yang ada sekaligus, kamu bisa menuliskan semua nama berkas sebagai karakter titik:

taufik@linux:~/Git/blog$ git add .

Kalau kamu ingin menambahkan berkas-berkas tertentu sekaligus, kamu bisa memisahkannya menggunakan karakter spasi:

taufik@linux:~/Git/blog$ git add nama-berkas-1 nama-berkas-2 nama-berkas-3

Jalankan kembali perintah git status, di situ kamu akan melihat bahwa berkas layout.css sudah berhasil masuk ke dalam daftar berkas yang akan direkam perubahannya.

Langkah terakhir yang perlu kamu lakukan adalah menambahkan pesan dan deskripsi singkat mengenai apa yang sudah kamu lakukan pada berkas-berkas yang ada di dalam daftar tersebut dengan menjalankan perintah git commit -m "Pesan Riwayat":

Untuk menuliskan pesan dan deskripsi yang lebih kompleks, misalnya jika kamu ingin membuat pesan sebagai paragraf-paragraf yang panjang, gunakan perintah git commit -a.

Untuk membatalkan perekaman riwayat terakhir, gunakan perintah git reset ..

Melakukan Pembaruan

Sekarang kamu ingin menyunting berkas yang sudah ada. Kamu jalankan kembali perintah sudo nama-editor nama-berkas untuk menyunting berkas yang sudah ada:

Untuk melihat perubahan yang ada, jalankan perintah git diff. Kamu akan melihat deskripsi singkat mengenai baris mana yang akan dihapus (diawali dengan simbol -) dan baris mana yang akan ditambahkan ke dalam berkas (diawali dengan simbol +):

Jalankan perintah git add . dan git commit -m "Pesan Riwayat Baru" untuk merekam perubahan yang baru:

Seperti itu saja cara paling dasar untuk menggunakan aplikasi Git secara lokal.

Integrasi dengan GitHub

Jika merekam perubahan secara lokal dirasa masih belum cukup, kamu bisa memanfaatkan layanan GitHub untuk menyimpan repositori beserta daftar riwayat perubahan yang ada secara daring. Untuk bisa mengunggah repositori lokal kamu ke GitHub, kamu perlu membuat repositori secara manual melalui tampilan web GitHub seperti yang pernah Saya jelaskan sebelumnya. Hanya saja kali ini kamu tidak perlu menambahkan berkas apa-apa ke dalam repositori tersebut.

Tambahkan alamat remote berupa URL yang bisa kamu dapatkan pada repositori terkait:

Mendapatkan URL remote repositori.

Pilih salah satu. Di sini Saya menggunakan versi HTTPS karena jauh lebih praktis.

Jalankan perintah git remote add origin https://github.com/nama-pengguna/nama-repositori.git. Kamu cukup melakukan perintah tersebut sekali saja. Untuk menghapus pengaturan tersebut, gunakan perintah git remote remove origin. Untuk mulai mengunggah repositori lokal ke GitHub, jalankan perintah git push origin master. Kamu mungkin akan diminta untuk memasukkan nama pengguna dan kata kunci yang kamu punya pada akun GitHub:

origin adalah nama alias untuk URL remote yang barusan kamu tambahkan. Saya belum pernah mendengar ada nama lain yang bisa digunakan di GitHub selain origin dan upstream. master adalah nama cabang bawaan yang aktif. Kamu bisa menggunakan nama cabang yang lain jika ada. Penjelasan mengenai cara membuat cabang baru pada repositori mungkin akan Saya jelaskan pada artikel yang lain saja.

Melihat Perubahan pada Repositori GitHub

Kalau kamu membuka alamat https://github.com/nama-pengguna/nama-repositori di peramban, kamu akan melihat bahwa berkas layout.css dan daftar riwayat pembaruan telah tersimpan dengan rapi pada repositori tersebut:

Data repositori GitHub yang berhasil diperbarui melalui aplikasi Git.

---

Kenapa Harus Menggunakan Git?

Berikut ini adalah beberapa kelebihan menggunakan aplikasi Git dibandingkan dengan menggunakan tampilan web GitHub untuk merekam riwayat:

1. Tampilan lebih ringkas. Menyunting repositori serasa sedang menyunting berkas-berkas di komputer, seperti biasanya.
2. Lebih hemat kuota internet. Ketika menggunakan aplikasi Git, menguggah kode ke GitHub hanya akan dibebani oleh kuota sebesar ukuran berkas yang akan diunggah saja. Ini berbeda dengan ketika kita menggunakan tampilan web GitHub. Karena untuk membuat dan menyunting berkas melalui web GitHub secara langsung, kita perlu mengunduh halaman HTML GitHub berikut dengan semua berkas CSS dan JavaScript yang ada pada situs web tersebut.
3. Proses mengunggah akan jauh lebih cepat karena ukuran berkas yang diminta dan diberikan telah dikonversi ke dalam ukuran yang paling kecil.
4. Dapat mengunggah beberapa berkas sekaligus.
5. Tampilan web GitHub hanya mendukung perintah-perintah dasar saja seperti untuk membuat, menyunting dan menghapus berkas.

Git pada Windows

Menggunakan Git pada Windows tidak jauh berbeda dengan menggunakan Git pada Linux. Perbedaan hanya terdapat pada cara memasang aplikasi Git dan cara mengeksekusi perintah-perintah dasar untuk membuat, menyunting dan menghapus berkas dan folder.

Untuk memasang aplikasi Git pada Windows, kunjungi Git for Windows. Jalankan perintah-perintah Git pada aplikasi Command Prompt:

Berikut ini adalah perintah-perintah dasar untuk menangani berkas dan folder melalui tampilan baris perintah pada Windows:

Perintah	Linux	Windows
Menampilkan daftar berkas dan folder.	ls	DIR
Membuat folder.	mkdir nama-folder	MD nama-folder
		MKDIR nama-folder
Menghapus folder yang kosong.	rmdir nama-folder	RD nama-folder
		RMDIR nama-folder
Menghapus folder dan semua konten di dalamnya.	rm -R nama-folder	RD /S /Q nama-folder
		RMDIR /S /Q nama-folder
Membuat berkas baru.	touch nama-berkas	TYPE NUL >> nama-berkas
		ECHO >> nama-berkas
Menghapus berkas.	rm nama-berkas	DEL nama-berkas
Menyunting berkas.	sudo nano nama-berkas	NOTEPAD nama-berkas
Berpindah-pindah lokasi direktori.	cd nama-folder	CD nama-folder
		CHDIR nama-folder

Integrasi dengan “X”

Masing-masing situs web penyedia layanan penyimpanan riwayat pembaruan kode memiliki cara tersendiri untuk menghubungkan peladen mereka dengan repositori lokal di komputer kita. Yang paling penting untuk diperhatikan biasanya hanya ada pada perintah git remote add origin alamat-repositori-git. Sebagai contoh, GitLab menggunakan format URL yang sama dengan GitHub yaitu https://gitlab.com/nama-pengguna/nama-repositori.git, sedangkan Bitbucket menggunakan format URL https://nama-pengguna@bitbucket.org/id-workspace/nama-repositori.git.

Menggunakan GitHub Sebagai Media Penyimpanan Berkas CSS dan JavaScript Eksternal

GitHub

Kalian tidak perlu takut dengan GitHub, dan tidak perlu takut juga untuk membaca artikel ini, karena di sini Saya tidak akan membahas mengenai konsep-konsep manajemen kode perangkat lunak. Di sini Saya hanya ingin menunjukkan kepada para pemula yang sebelumnya tidak pernah menyentuh GitHub, bahwa sebenarnya terdapat begitu banyak peluang untuk menggunakan GitHub sebagai media penyimpanan berkas-berkas eksternal pada blog kalian.

Sebenarnya Saya sudah pernah membahas mengenai cara menggunakan Google Code untuk menangani kasus serupa sebelumnya, hanya saja karena sejak 25 Januari 2016 yang lalu, Google memutuskan untuk mematikan layanan Google Code mereka, maka artikel tersebut kini sudah tidak ada gunanya lagi.

GitHub, sebagaimana Google Code, pada mulanya hanyalah sebuah situs layanan penyimpanan daring yang berfungsi untuk menyimpan dan merekam segala revisi dalam kode-kode perangkat lunak sepanjang waktu yang dikombinasikan dengan fitur media sosial, untuk mempermudah para pengembang dalam berinteraksi satu sama lain. Tanpa GitHub, kita hanya bisa melakukan perekaman revisi kode melalui tampilan antarmuka baris perintah (command line interface).

Kita umpamakan saja GitHub sebagai “media sosial untuk para pengembang”, dimana anggota-anggota di dalamnya tidak mengunggah foto dan mengepos pembaruan status, melainkan mengunggah kode-kode perangkat lunak dan melakukan revisi secara rutin pada kode-kode tersebut. Yang kemudian revisi-revisi tersebut akan tampil sebagaimana pembaruan-pembaruan status yang biasa kalian lihat pada media sosial. Kalian bisa memberikan komentar, dan juga memberikan reaksi. Namun belakangan ini, GitHub lebih banyak beralih fungsi sebagai media untuk membuat web statis; menampilkan halaman-halaman web yang (biasanya) dibuat secara otomatis melalui alat pembangun seperti Jekyll, Hugo dan GatsbyJS. Ini berarti bahwa hanya dengan GitHub saja kalian sebenarnya sudah bisa menampilkan berkas-berkas web secara langsung tanpa melalui perantara. Berkas-berkas seperti HTML, CSS dan JavaScript adalah yang paling umum ada pada GitHub karena fungsi dasar GitHub yang memang untuk menyimpan kode. Namun itu bukan berarati bahwa kalian tidak bisa menyimpan berkas-berkas yang lain seperti berkas fon, musik, video dan gambar.

Membuat Repositori untuk Pertama Kali

Ini sudah tahun 2019, sebuah tahun dimana anak-anak sekolah dasar saja sudah bisa membuat akun Twitter sendiri. Saya tidak ingin bertele-tele menjelaskan tentang bagaimana cara mendaftarkan diri ke GitHub langkah demi langkah. Saya anggap kalian sudah paham itu dan Saya anggap sekarang kalian sudah punya akun GitHub dan sedang dalam kondisi log masuk.

Untuk mulai menyimpan berkas-berkas blog kalian, pertama-tama buat sebuah repositori baru dengan cara mengeklik tombol “tambah” pada pojok kanan atas, kemudian pada menu yang tampil, pilih New repository:

Membuat repositori baru.

Tambahkan nama dan deskripsi bila perlu, kemudian klik Create repository:

Menentukan nama.

Sebuah repositori baru yang kosong akan dibuat pada URL https://github.com/nama-pengguna/blog. Untuk menambahkan berkas, klik pada tombol atau tautan yang bertuliskan Create a new file:

Membuat berkas baru.

Mengisi bidang nama dan konten berkas.

Tip: Untuk membuat folder, ketik nama folder pada bidang nama berkas kemudian ketik /, maka sebuah folder akan dibuat dan bidang nama akan kosong kembali. Setelah itu kalian bisa menuliskan nama berkas yang sifatnya wajib.

Setelah berkas selesai dibuat, klik tombol Commit new file. Sebuah berkas baru bernama layout.css akan tampil pada daftar, namun berkas ini masih bersifat mentah dan tidak bisa diakses secara langsung. Kalaupun memang bisa (dengan mencari tombol Raw pada berkas terkait), tipe MIME yang diberikan nanti adalah berupa text/plain sehingga berkas tersebut tidak akan bisa digunakan sebagai berkas CSS karena peramban menganggap berkas tersebut sebagai berkas teks biasa. Untuk mengatasi masalah tersebut, kalian perlu mengaktifkan fitur GitHub Pages.

Mengaktifkan Fitur Halaman GitHub

Untuk mengaktifkan fitur halaman GitHub, klik tab Settings kemudian temukan set bidang yang memiliki judul GitHub Pages. Pada bidang Source, ubah nilainya dari none menjadi master:

Mengaktifkan fitur halaman GitHub.

Fitur halaman sudah aktif. Sekarang kalian bisa mengakses akar repositori sebelumnya secara langsung melalui URL https://nama-pengguna.github.io/blog. Dan karena berkas layout.css berada pada akar halaman, maka kalian bisa mengaksesnya melalui URL https://nama-pengguna.github.io/blog/layout.css. Seperti ini hasilnya:

Melihat tipe MIME melalui tab Network pada alat pengembang.

Kalian bisa memuat URL tersebut pada elemen <link> dan <script> di dalam kode HTML tema seperti ini:

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> … </title>
    <link href="https://nama-pengguna.github.io/blog/layout.css" rel="stylesheet">
  </head>
  <body>
    …
    …
    <script src="https://nama-pengguna.github.io/blog/layout.js"></script>
  </body>
</html>

Memaksimalkan Performa

Saya tidak begitu yakin bahwa berkas yang diakses secara langsung melalui URL halaman GitHub akan disimpan sebagai tembolok dalam jangka waktu yang lama karena GitHub sangat kerap dengan aktivitas pembaruan kode. Jangka waktu tembolok yang lama agaknya tidak akan menguntungkan dari sisi pengguna. Akan selalu ada kemungkinan para pengguna mengalami kebingungan karena berkas yang sudah diperbarui ternyata tidak mengalami perubahan juga ketika dimuat ulang (kecuali dengan memuatnya secara paksa menggunakan kombinasi kunci Ctrl + R pada papan ketik). Untuk berkas-berkas yang biasa dimuat secara langsung seperti berkas HTML dan XML mungkin masih terbilang mudah untuk dipaksa, tapi bagaimana dengan berkas-berkas yang dimuat di dalam kode HTML seperti berkas CSS dan JavaScript? Hal ini yang membuat keputusan untuk memberikan jangka waktu tembolok yang pendek pada GitHub menjadi tampak lebih bijaksana.

Bandingkan waktu pada bidang Last-Fetched dengan waktu pada bidang Expires.

Akan tetapi, untuk memuat berkas CSS dan JavaScript pada situs web versi produksi dengan jangka waktu tembolok yang pendek tentu akan mengurangi performa situs web karena setiap kali halaman diakses, berkas-berkas CSS dan JavaScript yang ada akan selalu dianggap baru oleh peramban dan oleh karena itu mereka akan selalu dimuat melalui peladen GitHub dan tidak pernah bisa dimuat melalui tembolok yang telah tersimpan di peramban pada komputer masing-masing pengguna.

Ada sebuah situs web layanan pihak ke tiga yang sangat sesuai untuk menangani masalah ini yaitu Statically. Untuk menggunakannya, cukup tempelkan URL berkas versi mentah GitHub pada bidang URL repositori yang ada dan kemudian gunakan URL versi produksinya pada halaman web kalian:

Statically

Pada URL versi produksi tersebut selalu terdapat commit hash yang dapat digunakan sebagai penanda versi sebagaimana ketika kalian menambahkan parameter ?v=1.x.x di belakang URL berkas CSS dan JavaScript untuk memperbarui tembolok secara paksa. Setiap kali berkas direvisi, maka hash baru akan dibuat. Pastikan untuk menempelkan kembali URL berkas versi mentah yang baru pada bidang URL repositori untuk mendapatkan versi berkas yang sudah diperbarui. Setiap berkas yang dimuat melalui URL tersebut akan disimpan sebagai tembolok selama setahun:

Melihat tipe MIME melalui tab Network pada alat pengembang.

Yang Harus Diperhatikan

• Untuk menghindari hal-hal yang tidak diinginkan seperti pemblokiran akun oleh pihak GitHub, pastikan untuk menggunakan GitHub sebagai media penyimpanan berkas-berkas yang bersifat terbuka. Versi minified masih bisa diterima, versi packed dan obfuscated mungkin akan cenderung dicurigai dan oleh karena itu akan memiliki potensi yang lebih besar untuk diblokir.
• Meskipun bisa, Saya tetap tidak menyarankan kalian untuk menyimpan berkas-berkas dalam bentuk video dan musik karena sampai sekarang Saya masih belum pernah melihat berkas-berkas berjenis video dan musik di GitHub.
• Kalau kalian ingin menyimpan berkas fon untuk dimuat pada halaman web, pastikan dulu lisensi fon yang ada apakah memang boleh untuk digunakan pada halaman web secara legal. Beberapa fon, meskipun diketahui bersifat gratis namun ada juga yang tidak boleh dimuat sebagai fon untuk web.

Cara yang paling mudah untuk mengakali kebijakan dan layanan GitHub untuk privasi semacam ini adalah dengan menge-fork repositori publik milik orang lain (atau kalian juga bisa menge-fork repositori khusus Blogger milik Saya) dan kemudian menambahkan berkas-berkas pribadi kalian ke dalam repositori tersebut. Meskipun berkas-berkas pribadi kalian tidak ditujukan untuk komunitas kode sumber terbuka, setidaknya beberapa berkas yang lain dari hasil fork tersebut akan membuat repositori kalian seolah-olah adalah repositori yang “ramah” seperti repositori-repositori pada umumnya. Risiko ditanggung sendiri.

Cara Memanggil Data XML Blogger

Ada beberapa metode untuk memanggil data XML Blogger sehingga data tersebut dapat ditampilkan ke dalam HTML.

Sebagai Nilai Atribut

Tambahkan namespace expr: pada setiap atribut yang ingin Anda gunakan sebagai kontainer untuk menampilkan data sebagai nilai atribut dengan nama setelah expr::

<a expr:href='data:blog.url'/>
<a expr:href='data:blog.url + "#hash"'/>

<a href='data:blog.url'/>
<a href='data:blog.url + "#hash"'/>

Hasil:

<a href='http://example.com'></a>
<a href='http://example.com#hash'></a>

<a href='data:blog.url'></a>
<a href='data:blog.url + "#hash"'></a>

Sebagai Teks

Tampilkan data apa adanya dengan cara menuliskannya sebagai tag XML biasa:

<data:blog.url/>
<data:blog.url/>#hash

<b:eval expr='data:blog.url + "#hash"'/>

Hasil:

http://example.com
http://example.com#hash

http://example.com#hash

Mengenal Virtual Web Server

Server lokal atau localhost atau virtual web server atau virtual web hosting merupakan server web yang bersifat offline. Ketika sebuah situs web yang asli bisa diakses dengan cara mengetik alamat seperti http://www.example.com, maka sebuah situs web lokal pada umumnya dapat diakses dengan cara mengetik alamat http://localhost. Server lokal digunakan sebagai alat bantu untuk membuat situs web secara offline tanpa koneksi internet. Di dalam sebuah aplikasi server lokal biasanya sudah terdapat beberapa fitur yang ada di dalam server web online yang ada di internet pada umumnya seperti PHPMyAdmin, PHP, MySQL dan Apache. Aplikasi yang paling sering digunakan —terutama untuk menangani berkas-berkas dengan ekstensi .php— adalah WAMPSERVER dan XAMPP.

Proses instalasi sangat mudah: Unduh salah satu aplikasi tersebut sesuai dengan tipe Sistem Operasi yang Anda pakai (32 bits atau 64 bits). Buka berkas hasil unduhan, kemudian akan muncul jendela bimbingan instalasi aplikasi, setelah itu tinggal klik next… next… next… saja, I agree with the term of service… dan seterusnya sampai muncul tombol Finish.

Sebagai contoh, di sini Saya menggunakan WAMPSERVER sebagai server lokal. Yang paling penting untuk Anda perhatikan adalah ada pada folder www, selebihnya bisa Anda abaikan terlebih dahulu sebagai tahap awal latihan. Masing-masing aplikasi server lokal memiliki nama folder publik mereka sendiri. Sebagai contoh, XAMPP memiliki folder publik bernama htdocs. Tapi secara umum Anda akan dapat menemukan folder-folder publik pada aplikasi-aplikasi semacam ini dengan nama www, public_html dan htdocs. Ini juga akan Anda temukan pada server web yang asli, jadi Anda tidak perlu bingung.

Klik ikon WampServer yang ada di desktop komputer Anda, atau kalau tidak ada Anda bisa mencari programnya melalui tombol Start. Setelah itu akan muncul kotak dialog User Account Control. Klik tombol Yes. Lihat daftar ikon pada Taskbar atau Superbar di sebelah kanan bawah, di situ seharusnya akan muncul ikon WAMPSERVER berwarna merah, yang secara normal seharusnya akan berubah warna menjadi jingga dan kemudian menjadi hijau secara perlahan.

Buka peramban favorit Anda, lalu akses alamat http://localhost. Jika muncul halaman seperti ini, maka itu artinya proses instalasi telah berhasil dilakukan dan server lokal Anda sudah siap untuk digunakan:

Halaman awal server WAMP.

www

Kembali ke folder www. Jika sebelumnya Anda tidak mengubah-ubah pengaturan lokasi folder www pada saat instalasi, maka folder tersebut seharusnya akan terletak pada lokasi C:\wamp\www. Anda bisa dengan mudah mengakses lokasinya melalui menu:

Menu server WAMP.

Anda bisa membuang semua berkas yang ada di dalamnya, tapi untuk berjaga-jaga, Anda bisa membiarkan mereka seperti apa adanya sampai Anda cukup percaya diri untuk membuangnya. Di dalam folder ini Anda bisa memasukkan berkas-berkas web Anda untuk ditampilkan di layar peramban nantinya. Sebagai contoh, Anda membuat berkas bernama tes-halaman.php pada folder ini, maka Anda akan bisa mengakses berkas tersebut melalui alamat http://localhost/tes-halaman.php

Sebenarnya Anda bisa melakukan hal ini di lokasi mana saja di folder komputer Anda, hanya bedanya, Anda tidak akan bisa menerjemahkan kode-kode Hypertext Preprocessor menjadi HTML jika berkas tersebut tidak ditempatkan di dalam folder www. Misalnya Anda membuat berkas tes-halaman.php di desktop, maka Anda bisa membuka berkas tersebut dengan cara klik-kanan pada ikon berkas dan kemudian pilih Open with » Firefox (misalnya). Sehingga pada address bar akan tampil alamat seperti file:///C:/Users/DTE/Desktop/tes-halaman.php

Seperti itu saja dulu. Selanjutnya Anda bisa mencoba belajar bahasa pemrograman PHP atau sekedar mengetes CMS yang Anda unduh di dalam folder ini. Cukup salin dan tempel berkas saja seperti biasa. Target Saya membuat tutorial ini sebenarnya adalah untuk memperkenalkan CMS Mecha pada pembaca, tapi rilis versi stabil yang terakhir masih belum ada dan masih dalam tahap pengetesan.

Unduh Berkas Presentasi Perkenalan HTML untuk Pemula

Aslinya ini adalah tugas bebas yang Saya dapat dari kampus, akan tetapi karena Saya merasa berkas ini cukup bermanfaat jadi Saya bagikan saja untuk kalian.

Memahami `DOMContentLoaded`

DOM Ready… kebanyakan orang menyalahartikannya dengan DOM Loaded, padahal DOM Ready itu tidak sama dengan DOM Loaded. DOM Loaded atau onload adalah sebuah jenis event dalam JavaScript yang akan terpicu ketika seluruh halaman dan muatan yang ditransfer telah berhasil dimuat. Atau bahasa mudahnya adalah ketika indikator memuat pada peramban telah menghilang (atau berhenti berputar-putar, tergantung desain antarmuka peramban):

Indikator memuat pada peramban.

Sedangkan DOM Ready atau DOMContentLoaded adalah event yang akan terpicu ketika peramban telah berhasil membaca keseluruhan elemen DOM, yaitu dari bagian awal halaman web sampai ke akhir halaman. Dari elemen <html> sampai elemen penutupnya yaitu </html>, tapi tidak tergantung pada apakah semua muatan telah berhasil terpanggil atau tidak. Selama peramban telah berhasil membaca elemen HTML dari awal halaman sampai akhir halaman, itu saja sudah cukup untuk memicu event ini:

// Event `DOMContentLoaded` pada peramban-peramban moderen
window.addEventListener("DOMContentLoaded", function() {}, false);

// Event `onload` (hanya bekerja jika seluruh muatan halaman telah berhasil termuat)
window.onload = function() {};

Sebuah penerapan DOMContentLoaded dapat digambarkan sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>

    <script>
      window.addEventListener("DOMContentLoaded", function() {
        document.querySelector('#test-elem').style.border = "5px solid red";
      }, false);
    </script>

  </head>
  <body>

    <div id="test-elem">Test</div>

  </body>
</html>

Berdasarkan contoh di atas, sebuah elemen #test-elem seharusnya akan dikenai border berwarna merah setebal 5 piksel, namun tidak jika keadaannya seperti ini. Justru, keadaan ini malah akan menampilkan konsol error karena JavaScript tidak berhasil menemukan elemen yang dimaksud:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>

    <script>
      document.querySelector('#test-elem').style.border = "5px solid red";
      // TypeError: document.querySelector("#test-elem") is null
    </script>

  </head>
  <body>

    <div id="test-elem">Test</div>

  </body>
</html>

Berbeda dengan CSS, JavaScript hanya akan berhasil menyeleksi elemen jika elemen tersebut telah ada. Memicu fungsi untuk memberikan border pada elemen sebelum elemen tersebut berhasil terbaca tidak akan menghasilkan apapun. Untuk mengatasi masalah di atas, maka Anda cukup memastikan saja bahwa elemen yang ingin diseleksi telah terbaca oleh peramban sebelum JavaScript terpicu:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>

    <div id="test-elem">Test</div>

    <script>
      document.querySelector('#test-elem').style.border = "5px solid red";
    </script>

  </body>
</html>

Akan tetapi dalam keadaan tertentu, Anda mungkin tidak bisa mengkondisikan JavaScript dengan posisi seperti di atas (mungkin masalah CMS yang tidak mengizinkan, alasan efisiensi dengan cara menyatukan semua file JavaScript ke dalam satu file berukuran besar, atau karena hal yang lain). Jika memang karena suatu alasan Anda hanya bisa meletakkan JavaScript di area <head>, maka event DOMContentLoaded bisa menjadi solusi. Namun, mengingat event ini hanya diadakan pada peramban-peramban moderen, Anda perlu membuat fungsi penanganan untuk membuat event pengganti seperti event ini jika peramban yang digunakan tidak dilengkapi dengan event DOMContentLoaded. Beberapa sudah ada yang membuatnya, misalnya ini atau ini.

Pengguna JavaScript Library

Para pengguna perpustakaan JavaScript sepertinya tidak perlu begitu memikirkan mengenai ini karena sebagian besar library sudah dilengkapi dengan API untuk menangani event DOMContentLoaded:

• jQuery - .ready()
• MooTools - Window Event: domready
• YUI - DOM Lifecycle Events
• Prototype - The dom:loaded Event
• Glow - isDomReady
• Midori - Event - addEventListener

Jika Memang Tidak Harus

Jika Anda merasa tidak harus menggunakan event ini, maka cara yang paling praktis, aman, sesuai prosedur dan bisa bekerja pada semua peramban adalah cukup dengan meletakkan JavaScript sedekat mungkin dengan bagian akhir halaman, yaitu ketika tidak ada elemen HTML lagi di bawahnya kecuali tag penutup </body>. Hasilnya tidak jauh berbeda dengan DOMContentLoaded karena pada dasarnya keduanya akan memicu fungsi pada waktu yang hampir sama (hanya berbeda tipis):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>

    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    ...

    <script>
      alert('DOM is (almost) ready!');
    </script>

  </body>
</html>

Atau buat fungsi utama pada area <head> kemudian jalankan di bagian akhir halaman:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>

    <script>
      function myGlobalFunction() {
        alert('DOM is (almost) ready!');
      }
    </script>

  </head>
  <body>

    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    ...

    <script>myGlobalFunction();</script>

  </body>
</html>

---

Referensi Lain

• MDN - DOMContentLoaded
• MSDN - DOMContentLoaded

Modifikasi Widget Posting Populer Menjadi Berwarna-Warni

Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Klik Simpan Template. Begitu saja.

Membuat Tabel dengan HTML

Tutorial ini akan menjelaskan langkah-langkah singkat mengenai cara membuat tabel dengan HTML. Anda akan diberi beberapa penjelasan mengenai kerangka HTML tabel dari yang paling sederhana hingga menuju langkah-langkah modifikasi tampilan.

Lihat Semua Demo

Lihat demo-demo tabelnya terlebih dahulu:

Lihat Demo

Kerangka Tabel Paling Sederhana

Sebuah tabel sederhana terdiri dari elemen <table> yang diisi dengan beberapa <tr>, dimana setiap <tr> akan berisi beberapa <td>. <table> adalah table, <tr> adalah table row dan <td> adalah table data:

<table>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Header Tabel

Header tabel terbentuk dari elemen <th> (table header). Secara normal, tampilan teks di dalam header tabel akan secara otomatis bercetak tebal dan tersusun rata tengah:

<table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Menambahkan Border

tambahkan atribut border dengan nilai bukan 0 untuk menampilkan border pada tabel:

<table>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Atribut ini sebenarnya tidak begitu penting, karena akan lebih efektif jika kita menggunakan CSS untuk mengeset border pada tabel.

Caption/Judul Tabel

Tambahkan elemen <caption> tepat setelah kode <table> sebagai judul tabel:

<table>
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Menggabungkan Sel-Sel Tabel (Merge Cell)

Ada dua atribut yang bisa Anda gunakan, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan:

<table>
    <caption>Judul Tabel</caption>
    <tr><th colspan="2">Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Catatan: Karena sel tabel mendapatkan atribut colspan="2", maka dua buah posisi sel akan digabungkan. Jadi, sel di sebelahnya harus dibuang. Ini berlaku juga untuk rowspan, hanya saja penggabungannya secara vertikal:

<table>
    <caption>Judul Tabel</caption>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td rowspan="2">1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Mengubah Tampilan Tabel dengan CSS

Diutamakan untuk border, CSS akan membuat tampilan border pada tabel menjadi lebih baik dan lebih bisa dikendalikan:

table, th, td {
  border:1px solid purple;
}

Namun, karena border tabel secara normal tampak terpisah, kita harus mendeklarasikan border-collapse:collapse untuk merapatkan mereka:

table, th, td {
  border:1px solid purple;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

Setelah itu Anda bisa menentukan width, padding, background, font, color dan lain-lain. Beberapa properti CSS seperti vertical-align dan text-align juga nantinya akan dibutuhkan:

table {
  width:100%; /* lebar tabel menjadi sama dengan lebar kontainer */
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse; /* untuk menghilangkan jarak antar sel */
}

table caption {
  padding:.4em 0;
  font-style:italic;
  font-weight:bold;
  text-align:left;
  border-top:2px solid black;
}

table, th, td {
  border:1px solid black;
}

th, td {
  padding:1em 1.4em;
  vertical-align:top; /* membuat semua konten tabel menjadi rata atas */
  text-align:left; /* membuat semua teks di dalam tabel menjadi rata kiri */
}

th {
  background-color:#080;
  color:white;
}

Markup HTML Standar

Markup HTML tabel standar secara garis besar dapat disusun seperti ini:

<table summary="Tabel ini menjelaskan tentang perkembangan kelangsungan hidup umat manusia di tahun 2013">
    <caption>Tabel Kelangsungan Hidup Manusia</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Setiap kelompok baris yang mengandung elemen <th> akan dibungkus kembali dengan elemen <thead> sementara kelompok baris yang mengandung elemen <td> akan dibungkus dengan elemen <tbody>

Footer Tabel

Anehnya, footer tabel harus diletakkan di sebelah atas, lebih tepatnya sebelum <tbody>. Tapi jangan khawatir, karena hasil akhirnya nanti akan tetap tampil di bagian paling bawah:

<table>
    <caption>Judul Tabel</caption>
    <thead>
        <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    </thead>
    <tfoot>
        <tr><td>Total</td><td>XXX</td><td>YYY</td></tr>
    </tfoot>
    <tbody>
        <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
        <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
        <tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
        <tr><td>4.1</td><td>4.2</td><td>4.3</td></tr>
        <tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
    </tbody>
</table>

Berikut ini adalah salah satu uraian mengenai elemen <tfoot> dari W3:

TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.

Catatan Tambahan

Lawan border-collapse:collapse adalah border-collapse:separate

Tidak semua tabel harus dilengkapi dengan border. Lebih baik set deklarasi border hanya untuk elemen tabel yang memiliki atribut border="1":

table[border=1] {
  border-collapse:collapse;
  background-color:white;
}

table[border=1] th,
table[border=1] td {
  border:1px solid black;
  padding:1em 1.4em;
}

Dulu Saya pernah sekali mencatat beberapa kode CSS untuk HTML tabel. Anda bisa membacanya di sini. Mungkin itu akan berguna sebagai referensi tambahan.

CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal

CSS

div {
  width:100px; /* dimensi lebar */
  height:100px; /* dimensi tinggi */
  line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */
  text-align:center; /* posisi di tengah secara horizontal */
  background-color:maroon;
  color:white;
}

Markup HTML

<div>ABC</div>

Efek Animasi Loading dengan Event `beforeunload`

Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan:

Pertama, menyeleksi semua tautan internal dengan selektor atribut sebenarnya tidak begitu baik karena selektor atribut itu performanya buruk.

Ke dua, jika kita mengeklik tautan internal yang memiliki atribut target='_blank' di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi efek animasi memuat halaman justru terpicu pada halaman sebelumnya, padahal kita tidak menghendaki itu ⇒ #c8644667892985451185. Saya sudah berhasil mengakalinya dengan cara memfilter tautan internal tersebut dengan cara mengecualikan tautan yang memiliki atribut target='_blank' menggunakan jQuery .filter():

$internalLinks.filter(':not([target="_blank"])').click(function() {});

Tapi mulai sekarang lebih baik kita lupakan cara lama tersebut. Kita bisa menciptakan efek animasi perpindahan halaman dengan aman menggunakan event beforeunload.

beforeunload adalah event yang akan terpicu saat sebuah halaman mulai berpindah karena seorang pengguna mengeklik tautan tertentu (atau sekedar memuat ulang halaman dengan cara mengeklik tombol Reload pada peramban) yang memicu mereka untuk keluar dari halaman tersebut:

$(window).on("beforeunload", function() {
    // Menampilkan tabir animasi dengan efek `.fadeIn()`...
});

Kali ini tabir animasi ditampilkan bukan karena terpicu oleh aksi klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang tabir animasi perpindahan halaman dengan cara ini:

Anggaplah jQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas ]]></b:skin> atau </style>:

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas </body>:

<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Klik Simpan Template.

Demo

Lihat Demo

JavaScript Variabel

Variabel adalah media untuk menyimpan data. Cara kerjanya sama seperti halnya aljabar dalam matematika:

Jika X=5 dan Y=2, maka X+Y=7.

X dan Y adalah variabel. Nilai variabel bisa berupa angka, string, boolean, undefined, null, array, object bahkan fungsi:

Tipe	Contoh	Ciri/Pengertian
Number	1, 5, 10, 4.5	Tanpa tanda petik, dan bisa dikalkulasikan.
String	"Lorem Ipsum", 'Apel', "10"	Diliputi dengan tanda petik, baik petik tunggal maupun petik ganda. Tidak dapat dikalkulasikan meskipun bentuknya adalah angka yang diliputi dengan tanda petik.
Boolean	true, false	Boolean hanya terdiri dari true dan false. Umumnya digunakan untuk menyatakan “Ya” dan “Tidak”
Undefined	undefined	undefined artinya tidak memiliki nilai/nilai tidak didefinisikan.
Null	null	null artinya kosong (bukan 0).

Berikut ini adalah contoh penerapan variabel JavaScript yang sangat mendasar. Saya mulai dengan demo sederhana, yaitu menyatakan variabel beserta nilainya, kemudian menampilkan nilai variabel tersebut dengan document.write():

var x = 5;
var y = 2;

document.write(x);     // Hasil => `5`
document.write(x + y); // Hasil => `7`

Lebih lanjut:

var x = 5;
var y = 2;
var z = "2";

document.write(x + y);   // => `7`
document.write(x + z);   // => `52`
document.write(z + "3"); // => `23`
document.write(y + y);   // => `4`
document.write(z + z);   // => `22`

---

Lainnya

Syarat Variabel

Penulisan variabel diawali dengan var, kemudian diikuti dengan nama variabel. Nama variabel harus dimulai dengan karakter berupa huruf, $ atau _. Kombinasikan karakter-karakter yang diperbolehkan tersebut untuk menciptakan nama variabel yang mudah dimengerti oleh orang lain:

var name = "Taufik";
var $animal = "Cat";
var _default = null;
var firstName = "Taufik";
var last_name = "Nurrohman";
var object1 = "A";
var object2 = "B";

Case Sensitive

Variabel itu case sensitive (x berbeda dengan X):

var x = 5;

document.write(x); // Hasil => `5`
document.write(X); // Hasil tidak ada. Jika di-console, maka akan keluar pesan => `ReferenceError: X is not defined`

Meringkas Variabel

Meringkas variabel berjumlah banyak bisa dilakukan dengan cara menghapus awalan var pada nama-nama variabel yang tertulis berikutnya, kemudian kita kaitkan nama-nama variabel tersebut dengan nama variabel yang tertulis pertama kali menggunakan tanda koma.

Baris variabel ini:

var x = 5;
var y = 2;
var z = "2";

dapat diringkas menjadi:

var x = 5, y = 2, z = "2";

var x;

Menuliskan variabel tanpa nilai akan menghasilkan nilai undefined:

var x;
document.write(x); // Hasil => `undefined`

Bekerja dengan Kuota/Tanda Petik

Saat menuliskan variabel dengan nilai berupa string dimana di dalamnya berisi karakter berupa tanda petik, maka Anda bisa menggunakan beberapa cara ini untuk memastikan bahwa nilai variabel Anda valid dan tidak akan merusak fungsi-fungsi yang tertulis berikutnya:

// Menggunakan tipe kuota yang berbeda:
var x = "D'Javu";
var y = 'D"Javu';

// Menyisipkan `backslash` sebelum tanda petik yang merupakan bagian dari nilai variabel:
var x = 'D\'Javu';
var y = "D\"Javu";

// Menggunakan entitas HTML:
var x = 'D'Javu';
var y = "D"Javu";

Syntax Highlighter dengan PRISM

Meskipun di blog ini Saya menggunakan syntax highlighter dari Software Maniacs, tapi jika diminta untuk memilih dari segi kecepatannya, maka Saya akan menggunakan PRISM, sebuah syntax highlighter untuk HTML, CSS, Java dan JavaScript (bekerja juga untuk PHP dengan asumsi sebagai markup):

Lihat Demo

Proses instalasi hanya membutuhkan dua langkah. Pertama-tama masuklah ke halaman editor HTML Template Anda kemudian pilih Edit HTML dan klik Lanjutkan. Temukan kode ini:

]]></b:skin>

Salin kode CSS ini dan letakkan di atasnya:

/*
Tema pribadi => RDark
Saya buat berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html*/

pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}

code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}

pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}

code .token.punctuation {
  color:#83405A;
}

pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}

code .namespace {
  opacity:.8;
}

code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}

pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}

code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}

code .token.operator {
  color:#878A85;
}

code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}

code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}

code .token.comment {
  font-style:italic;
}

code .token.regex {
  color:#B43D3D;
}

code .token.important {
  font-weight:bold;
}

code .token.entity {
  cursor:help;
}

Setelah itu temukan kode ini:

</body>

Letakkan skrip ini di atasnya:

<script "//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/prism.min.js"></script>

Klik Simpan Template.

Cara Pemakaian

Setiap tipe bahasa memiliki kelasnya masing-masing:

• HTML, XML, PHP ⇒ language-markup
• CSS ⇒ language-css
• JavaScript ⇒ language-javascript
• Java ⇒ language-java

Kode yang ingin diberi efek harus berada di dalam tag pre > code seperti ini:

<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre><code class="language-java"> ... kode Java di sini ... </code></pre>

Tema-tema yang asli bisa Anda temukan di situs sumbernya, PRISM. Atau mungkin Anda mau membuatnya sendiri?

Dasar-Dasar Selektor CSS Bertingkat

Pertanyaan yang seringkali terlintas dalam kepala saat melihat ini adalah, elemen mana yang akan dikenai deklarasi display:block?

CSS Menu navigasi bertingkat

Oke. Pada dasarnya selektor CSS itu memiliki peraturan yang tidak jauh berbeda dengan kode HTML. Yaitu kita diminta untuk membaca dari luar menuju ke dalam, atau sebaliknya, dari dalam menuju ke luar dan bukan membaca dari atas ke bawah atau menyamping seperti saat membaca tulisan.

Katakan saja kita memiliki beberapa elemen <article>, <div> dan <span> yang tersusun seperti ini:

<article>
    <div class="post-body">
        <span>Lorem ipsum</span>
    </div>
    <span>Lorem ipsum</span>
</article>
<span>Lorem ipsum</span>

Kita akan memberikan warna merah pada tulisan "Lorem ipsum". Untuk melakukannya caranya sangat mudah. Cukup tuliskan:

span {color:red;}

Begitu saja! Tapi, setelah itu mungkin akan muncul keinginan lain. Misalnya, kita ingin warna merah diterapkan hanya pada teks yang berada di dalam elemen <span> yang berada di dalam .post-body. Untuk membuat selektornya menjadi lebih spesifik, maka kita tuliskan .post-body sebelum span seperti ini:

.post-body span {color:red;}

Kode di atas akan memberi warna merah pada teks yang berada di dalam elemen <span>, dimana elemen <span> tersebut harus berada di dalam elemen <div class="post-body">.

Ingin lebih spesifik lagi? Urutkan selektor CSS yang ditemukan berdasarkan posisi elemen seperti contoh di atas:

article .post-body span {color:red;}

Kesimpulannya adalah, pada dasarnya ketiga selektor di atas memiliki tugas yang sama persis, yaitu memberi warna merah pada teks di dalam elemen <span>. Hanya spesifikasinya saja yang berbeda-beda. Contoh lain:

li {color:blue;}
ul li {color:blue;}
nav li {color:blue;}
nav ul li {color:blue;}

Semua selektor di atas pada dasarnya memiliki target elemen yang sama, yaitu elemen <li>. Tapi, selektor pertama akan memberi warna biru pada semua elemen <li> tanpa terkecuali. Selektor ke dua akan memberi warna biru pada elemen <li> yang berada di dalam elemen <ul>. Selektor ke tiga akan memberi warna biru pada elemen <li> yang berada di dalam elemen <nav>. Selektor ke empat sama dengan selektor ke tiga, hanya saja lebih spesifik. Dia akan memberi warna biru pada elemen <li> yang berada di dalam elemen <ul>, dimana elemen <ul> tersebut berada di dalam elemen <nav>

Dasar-Dasar

Selektor Keturunan (Descendant Selector)

Baru saja Saya jelaskan di atas. Setiap selektor yang datang lebih awal adalah induk elemen dari selektor berikutnya. Selektor terakhir adalah elemen yang akan dikenai perintah. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan semua elemen <div> yang berada di dalam <article>:

Selektor Anak Terdekat (Child Selector)

Terbentuk dari dua atau lebih item selektor CSS yang dipisahkan oleh simbol >, berfungsi untuk menyeleksi anak terdekat dari elemen induk. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan elemen <div> yang menjadi lapisan dalam terdekat dari induk (anak terdekat dari artikel):

Selektor Bersebelahan (Adjacent Sibling Selector)

Terbentuk dari dua atau lebih item selektor CSS yang dipisahkan oleh simbol + atau ~, berfungsi untuk menyeleksi elemen yang berada setelah elemen yang menjadi subjek (selektor pertama).

Simbol + lebih spesifik dibandingkan simbol ~. Pada gambar di bawah, terlihat bahwa CSS akan menargetkan elemen <div> yang berada tepat setelah elemen <article> saat kita menggunakan pemisah berupa simbol + yang kemudian diikuti oleh selektor CSS berupa div, dan akan menyeleksi semua elemen <div> yang ditemukan bersebelahan setelah <article> saat kita menggunakan pemisah berupa simbol ~ yang kemudian diikuti oleh selektor div:

Coba Sendiri

Saya sudah membuat sebuah generator CSS sederhana untuk referensi ini. Cukup ganti selektor CSS sesuka hati berdasarkan contoh-contoh di atas dan lihat elemen mana yang akan dikenai garis batas berwarna merah. Beberapa contoh selektor CSS yang Saya sarankan:

article div {}
article > div {}
article + div {}
article ~ div {}
article .wrap-3 {}
article + div div {}
article ~ div > div {}
article + div > div {}
article .wrap-1 + div {}

Layar Penuh

Kesimpulan Pertanyaan Awal

Elemen mana yang akan dikenai deklarasi display:block pada gambar pertama?

Ini dia jawabannya:

CSS akan memberikan deklarasi display:block pada elemen <ul> yang berada tepat setelah elemen <a> yang terfokus (baru saja diklik), dimana elemen <a> terfokus tersebut berada di dalam elemen <li> yang berada di dalam elemen <ul> yang berada di dalam elemen <li> yang berada di dalam elemen <ul> yang berada di dalam elemen <li> yang berada di dalam elemen <ul> yang berada di dalam elemen <nav>, dimana elemen <nav> tersebut berada di dalam suatu elemen yang memiliki id="main"Kode CSS menu navigasi bertingkat untuk perangkat non-hover seperti Tablet PC :)

CSS3 Kolom

Sebelum CSS3, kita biasanya membuat layout kolom dengan bantuan CSS Float atau sistem grid. Tapi saat ini kita bisa menggunakan CSS untuk membelah paragraf menjadi kolom-kolom. Meskipun fiturnya masih terbatas, yaitu hanya bisa membelah, menentukan jarak antar kolom dan memberi garis pemisah, tapi secara keseluruhan, CSS kolom sudah bisa dikatakan sangat membantu terutama karena kemampuannya dalam mengisi setiap kolom dengan jumlah teks yang sama rata.

Sintaks CSS Kolom

p {
  -webkit-column-count:3; /* Chrome & Safari */
  -moz-column-count:3; /* Firefox */
  column-count:3; /* Standar CSS3 & Opera */
}

Kode di atas akan membelah paragraf menjadi tiga buah kolom sama besar.

Properti CSS kolom pada peramban Opera sudah mengikuti standar CSS3 dan tidak memerlukan prefiks -o- seperti pada umumnya. Sampai saat ini Internet Explorer masih belum mendukung CSS Kolom.

Lihat Demo

Jarak dan Pembatas

Selain menentukan jumlah kolom, CSS kolom juga bisa menentukan jarak antar kolom dan juga mengatur garis pembatas antar kolom. Berikut ini adalah contoh cara menentukan jarak antar kolom sebesar 100px:

p {
  -webkit-column-gap:100px;
  -moz-column-gap:100px;
  column-gap:100px;
}

Lihat Demo

Untuk menciptakan garis pembatas antar kolom, kita menggunakan properti column-rule yang pada dasarnya memiliki cara kerja sama persis dengan properti border:

p {
  -webkit-column-rule:5px solid #ccc;
  -moz-column-rule:5px solid #ccc;
  column-rule:5px solid #ccc;
}

Dan seperti halnya properti border, mereka juga bisa dibagi kembali menjadi tiga properti yang terpisah:

/* column-rule:column-rule-width column-rule-style column-rule-color; */
p {
  -webkit-column-rule-width:5px;
  -moz-column-rule-width:5px;
  column-rule-width:5px;
  -webkit-column-rule-style:solid;
  -moz-column-rule-style:solid;
  column-rule-style:solid;
  -webkit-column-rule-color:#ccc;
  -moz-column-rule-color:#ccc;
  column-rule-color:#ccc;
}

Lihat Demo

Membuatnya Menjadi Responsif

Meskipun CSS Kolom akan secara otomatis menyesuaikan lebar masing-masing kolom dengan ukuran lebar elemen pembungkus seperti halnya saat kita menggunakan satuan persentase, tapi saat ukuran layar menyempit, kolom-kolom di dalamnya juga akan ikut menyempit dan membuat kalimat-kalimat di dalamnya menjadi sulit untuk dibaca. Untuk menyiasatinya, kita bisa menggunakan media queries dan mengurangi jumlah kolom ketika ukuran layar sedang berada pada ukuran lebar tertentu:

/* Ubah jumlah kolom menjadi 2 saat lebar layar maksimal berada pada 800 piksel */
@media screen and (max-width:800px) {
  p {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
  }
}

/* Satukan semua kolom saat lebar layar maksimal berada pada 600 piksel */
@media screen and (max-width:600px) {
  p {
    -webkit-column-count:auto;
    -moz-column-count:auto;
    column-count:auto;
  }
}

Lihat Demo

Lebar Kolom Tetap

CSS Kolom juga memungkinkan Anda untuk menciptakan kolom-kolom dengan lebar yang tetap, yaitu dengan menggunakan properti column-width:

p {
  -webkit-column-width:150px;
  -moz-column-width:150px;
  column-width:150px;
}

Cara kerja properti ini adalah dia akan menciptakan kolom sebanyak mungkin dengan lebar masing-masing kolom sebesar 150 piksel (berdasarkan contoh di atas) selama masih ada ruang yang tersisa di sebelahnya.

Anda tidak perlu mendeklarasikan properti column-count jika Anda telah menggunakan properti ini. Jumlah kolom akan menyesuaikan diri terhadap lebar area yang tersisa. Untuk penerapan yang lebih mendetail bisa Anda baca di halaman ini ⇒ Efek Masonry Hanya dengan CSS

Membuat Komentar Slide Panel pada Template Blogspot

Menerapkan jQuery Slide Panel pada Komentar Blogger

Meskipun sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin menunjukkan bahwa ada satu cara yang lebih mudah untuk melakukan ini. Anda tidak perlu membongkar struktur template secara keseluruhan hanya untuk menambahkan elemen lain, biarkan jQuery yang mencarinya dan menyisipkan elemen-elemen yang kita butuhkan (dalam hal ini adalah tombol/pemicu panel):

Lihat Demo

Pertama-tama masuklah ke halaman editor HTML templat Anda kemudian temukan kode ini:

]]></b:skin>

Salin kode ini dan letakkan di atasnya:

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0;
  margin:0;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
  position:relative;
}

a.openpanel em {
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.openpanel.active {background-color:#900}

a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.paneline {
  height:0;
  border-bottom:4px solid #39b;
}

div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  margin:0 !important;
}

Kemudian temukan kode ini:

</head>

Salin kode ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Poskan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-slide-panel-comments.js'></script>

Ingat, kode yang Saya beri garis bawah adalah jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!

Klik Simpan Template.

Sudah, begitu saja.

---

Lebih Jauh Lagi

Berikut ini adalah isi dari skrip blogger-slide-panel-comments.js:

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('hompiPanel')
            .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
                .after('<div class="paneline"></div>');
    jQuery('a.openpanel').toggle(function() {
        jQuery(this).addClass('active').html(closePanelText + '<em></em>');
        jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
        jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});

Isinya sangat sedikit. Karena fungsi dari skrip ini memang hanya untuk mencari elemen #comments, kemudian setelah jQuery menemukannya maka dia akan menyisipkan elemen a.openpanel sebelum #comments dan elemen div.paneline setelah #comments:

jQuery(panelSelector).hide() // Menyembunyikan elemen panelSelector (dalam hal ini adalah "#comments")
    // Tambahkan class="hompiPanel" (untuk membuatnya menjadi lebih spesifik)
    .addClass('hompiPanel')
        // Sisipkan elemen a.openpanel sebelum panelSelector
        .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
            // Sisipkan elemen div.paneline setelah panelSelector (sekedar hiasan saja)
            .after('<div class="paneline"></div>');

Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan event .toggle() (pelajari di sini):

jQuery('a.openpanel').toggle(function() {
    jQuery(this).addClass('active').html(closePanelText + '<em></em>');
    jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
    return false;
}, function() {
    jQuery(this).removeClass('active').text(openPanelText + '<em></em>');
    jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
    return false;
});

Tentukan label tombol pada saat panel tertutup pada variabel openPanelText, lalu tentukan juga label tombol saat panel sedang terbuka pada variabel closePanelText.

Tentukan kecepatan efek .slideDown() pada variabel slideDownPanelSpeed dan kecepatan efek .slideUp() pada variabel slideUpPanelSpeed.

panelSelector adalah variabel untuk menentukan target yang akan dijadikan elemen panel. Sekali-kali cobalah untuk mengubah nilai "#comments" menjadi "#comment-editor" atau "div.post" dan lihat apa yang akan terjadi!