Catatan ini kiranya bisa berguna buat teman-teman yang lain atau yang mungkin di kemudian hari dapat proyek ini. Juga sebagai catatan saya, biar nanti kalau ada proyek lain saya tinggal melihat dokumentasi yang saya buat.

Yang perlu disiapkan adalah 1 librari dan 1 file controller dan 1 file view. Tidak perlu unduh (download) yang lain. Facebook Graph API ini memang jauh lebih simpel. Dan saya sangat menikmati proses belajar ini. Dan perlu diketahui, bahwa tutorial kali ini tidak akan mencakup banyak hal. Saya hanya mengharapkan anda mengerti konsep baru yang ditawarkan Facebook ini.

Sebelum memulai, pastikan beberapa hal berikut ini:

1. Versi PHP yang dipakai adalah versi 5
2. Pengetesan skrip tidak bisa dilakukan di server lokal. Jadi anda harus punya hosting dan harus online
3. Codeigniter yang saya pakai 1.7.2, saya kurang tahu apa tetap akan sama jika menggunakan versi lama

Langkah pertama, buat aplikasi

Ini adalah langkah wajib. Karena dengan mendaftarkan aplikasi kita, Facebook akan memberikan 3 hal penting yang nantinya kita butuhkan. Yaitu Application ID, Application Secret dan API Key. [Klik link ini untuk mendaftarkan aplikasi anda]. Yang perlu anda isi adalah Application Name dan Connect->Connect URL.

Langkah kedua, unduh librari Curl

Librari Curl yang saya pakai ini memang hebat. Mudah sekali pakainya. Bisa diunduh dari link ini: http://codeigniter.com/wiki/Curl_library/

Langkah ketiga, konfigurasi

Buka file /application/config/config.php, lakukan beberapa hal berikut ini:

1. Index page dibuat kosong. $config['index_page'] = ""; (baris 26)
2. URI Protocol dibuat jadi ORIG_PATH_INFO. $config['uri_protocol'] = "ORIG_PATH_INFO"; (baris 44)
3. On-kan pilihan query string. $config['enable_query_strings'] = TRUE; (baris 151)

Langkah keempat, htaccess

Karena konfigurasi codeigniter saya tidak menggunakan “index.php”, maka saya butuh berkas (file) htaccess. Berikut isinya:

RewriteEngine on
RewriteCond $1 !^(index\.php|assets)
RewriteRule ^(.*)$ /projects/fbci/index.php/$1 [L]

Sesuaikan path ini:/projects/fbci/index.php dengan aplikasi anda.

Langkah kelima, controller

Kita hanya punya 1 berkas controller. Saya menggunakan controller yang diberikan Codeigniter saat kita instalasi, yaitu controller Welcome.

Controller itu nantinya akan punya 2 method, yang pertama sebagai gerbang pertama sebelum pengguna (user) masuk ke Facebook. Dan yang kedua sebagai penerima data dari Facebook. Berikut adalah gambar perjalanan aplikasi kita yang berkomunikasi dengan Facebook (semoga ngerti, saya kurang bisa gambar).

Dari gambar di atas, berikut detail yang bisa saya berikan:

1. Ketika pengguna mengeklik sebuah tautan di aplikasi kita (bisa berupa link, tombol, atau apa saja)
2. Aplikasi kita mengarahkan pengguna untuk login dulu ke Facebook dan atau menerima konfirmasi tentang informasi apa saja yang akan aplikasi kita butuhkan. Tautan itu seperti ini:
   https://graph.facebook.com/oauth/authorize?client_id=[client_app_id]&redirect_uri=[redirect_uri]
3. Dari tautan di atas, [client_app_id] diambil dari kode aplikasi ketika kita selesai mendaftarkan aplikasi di Facebook. Sedangkan [redirect_uri] adalah URL yang akan kita gunakan untuk menangkap kode dari Facebook berupa $_GET['code']. Maka dari itu, aplikasi kita harus menerima query string (lihat bagian konfigurasi di atas).
4. Setelah Facebook mengirim kode, kita perlu akses token untuk mendapatkan data-data pengguna Facebook. Untuk mendapatkan akses token, kita perlu menghubungi lagi Facebook dengan mengirim data kode (yang kita dapat di nomor 2), [redirect_uri] dan [secret_code].
5. Setelah itu Facebook akan mengirimkan akses token dalam format JSON.
6. Setelah punya akses token, kita bisa bebas meminta data-data pengguna ke Facebook.

Langkah keenam

Ini adalah langkah terakhir tutorial kali ini, yaitu mengunduh berkasnya. Saya sadar bahwa tidak ada keterangan yang lengkap sekali untuk level pemula. Tapi percayalah, saya hanya bisa mengarahkan dan sedikit memberitahu cara kerja Graph API ini. Dokumentasi Graph API lebih lengkap dan siap disantap.

Berikut adalah kode untuk Controller:

<?php
 
class Welcome extends Controller {
 
	// beberapa detail aplikasi kita
	// ini semua harus diisi.
	var $fb_appid = "";
	var $fb_secret = "";
	var $fb_api = "";
 
	function Welcome()
	{
		parent::Controller();	
		$this->load->helper("url");
	}
 
	function index() {
		$data['app_id'] = $this->fb_appid;
		$this->load->view('welcome_message', $data);
	}
 
	function fb() {
		$this->load->library("curl");
		// method untuk redirect balik dari facebook
		// setelah pemanggilan pertama, facebook mengirimkan sebuah kode 
		// yang bisa kita tangkap lewat $_GET['code']
 
		// cek dulu, apa $_GET['code'] ada
		if(isset($_GET['code'])) {
			// buat url untuk mengambil token
			$url = 'https://graph.facebook.com/oauth/access_token?client_id='.$this->fb_appid.'&redirect_uri='.site_url("/welcome/fb").'&client_secret='.$this->fb_secret.'&code='.$_GET['code'];
 
			// ambil token lewat curl
			$token_data = $this->curl->simple_get($url);
 
			// ambil kode token saja, dengan regular expression
			// arti tanda ([^&]+) adalah:
			// ambil semua karakter asal bukan tanda &
			preg_match("/access_token=([^&]+)/",$token_data,$token);
 
			// kode token ada di variabel token[1]
			$access_token = $token[1];
 
			// pengambilan token selesai, sekarang ambil userid, nama
			$uri = 'https://graph.facebook.com/me?access_token='.$access_token;
			$data = $this->curl->simple_get($uri);
 
			// decode data
			$fb = json_decode($data);
			$fb_id = $fb->id;
 
			// ambil nama dan foto pengguna
			$fb_userdata = $this->curl->simple_get("https://graph.facebook.com/".$fb_id."?fields=name,picture&access_token=".$access_token);
 
			//echo "https://graph.facebook.com/".$fb_id."?fields=name,picture&access_token=".$access_token;
 
			$fb_user = json_decode($fb_userdata);
 
			$data = array();
			$data['fbuser'] = array('id'=>$fb_id, 'avatar'=> $fb_user->picture, 'nama'=> $fb_user->name);
 
			//print_r($data);
 
		}
		elseif(isset($_GET['error_reason'])) {
			// untuk menangkap user yang klik "Dont Allow" atau "Cancel di Facebook"
			// buat variabel untuk ditampilkan di view
			$data['tolak'] = "Uh oh, saya ditolak T_T";
		}
 
		$this->load->view("welcome_message",$data);
	}
}
?>

Related posts:

1. Belajar Javascript lebih lanjut dengan JQuery (2) Membuat form dengan AJAX Membuat form adalah hal biasa dalam...
2. KetaKetik dan Teektak ditutup sementara Terbaru: KetaKetik dan Teektak sudah pindah ke server baru. Atas...
3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...

Kuwait: Punya sumber daya alam minyak, mereka bikin perusahaan sendiri, lalu meng-hire orang-orang minyak dari negara lain. Termasuk orang Indonesia.

Indonesia: Memberikan sumber daya alam minyak ke perusahaan lain dengan negosiasi kontrak. Dan mendapatkan persenan tiap jangka waktu tertentu.

Efeknya

Rakyat Kuwait: Harga minyak murah di negara sendiri, Makmur, jaya, sentosa, kaya raya, digaji pemerintah. Kalo ngutang atau kredit mobilnya macet, dibayarin pemerintah.

Rakyat Indonesia: Harga minyak mengikuti harga dunia. Yang miskin tambah miskin, yang kaya tambah kaya. Ketika harga minyak dunia naik, bertambah orang miskin di Indonesia.

SDM

Rakyat Kuwait: Banyak yang males, cari orang pintar susah, cari orang gendut gampang. Akhirnya, cari orang dari negara lain lagi.

Rakyat Indonesia: Orang pinter banyak, yang keblinger juga banyak. Cari orang gendut banyak, yang kurus juga banyak. Orang pintar lokal dihargai sepertiga harga dari orang luar. Makanya banyak yang kabur ke negara lain. :P

Jadi sebenernya bisa ga sih kalo orang-orang Indonesia di luar negeri pulang semua serentak, terus membangun Indonesia dari nol lagi…?

Related posts:

1. Bertambah lagi orang Indonesia di Kuwait Alhamdulillah. Ini Kuwait emang negara super kaya. Jadi walaupun cuaca...
2. TKW Indonesia di Kuwait Saya sudah lama tidak memberi kabar tentang bagaimana keadaan para...
3. Blognya orang-orang Indonesia di Kuwait Berada di “dunia lain” seperti Kuwait memang sebuah pengalaman yang...

Hasil dari tutorial ini adalah membuat kotak komentar menjadi warna strip. Bahasa gampangnya, punya warna berbeda di nomor ganjil dan genapnya. Selain itu, saya juga membahas bagaimana membuat komentar dari sang author atau sang empunya blog berbeda sendiri dari warna-warna lain seperti di blog ini.

Comments.php

Daftar-daftar komentar dan form komentar biasanya berada di file comments.php di theme wordpress yang sedang digunakan. Saya harapkan jangan berbuat hal yang macam-macam jika anda tidak tahu apa yang sedang anda lakukan. Seperti komentar di bagian bawah file comments.php, if you delete this the sky will fall on your head. Hehehe…

Buka comments.php di editor kesayangan anda. Jangan tanya saya editornya. Yang terpenting adalah, anda bisa mengubahnya. Mau pakai software apa saja, itu tergantung kesukaan.

Setelah membukanya, carilah kode di bawah ini

[source:php]foreach ($comments as $comment) :[/source]

Kode diatas bermaksud mencoba membaca semua komentar yang ada dengan menggunakan teknik iterasi (perulangan). Jadi proses yang berada di dalam kode tersebut, dieksekusi secara terus menerus sampai dengan komentar untuk post yang bersangkutan habis.

Membuat warna strip

Untuk membuat warna strip di blok komentar, anda membutuhkan sebuah variabel penunjuk status. Kita bisa membuat variabel sendiri bernama katakanlah, j. Jadi, ubah kode foreach di atas menjadi seperti ini kira-kira.

[source:php]<?php
$j=0;
foreach ($comments as $comment) :
?>[/source]

Artinya, kita mulai membuat sebuah variabel bernama j dan langsung memberikannya sebuah nilai 0.

Lalu tambahkan kode ini persis di bawah baris foreach:

[source:php]if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;[/source]

Artinya, jika nilai j habis dibagi dengan angka 2 (artinya nilai adalah genap) maka kita membuat sebuah variabel $class yang berisi “comment-1″. Selain itu (artinya nilai adalah ganjil) maka variabel $class kita isi dengan “comment-2″. Setelah itu, nilai $j ditambahkan satu.

Dengan kode di atas, maka kita membuat 2 buah blok komentar dengan masing-masingnya punya keunikan tersendiri dari nama class.

Kemudian ubah blok komentar anda dengan melakukan penambahan class seperti di bawah ini:

<div class="comments <?php echo $class ?>" id="comment-<?php comment_ID();?>">

Situasi blok komentar mungkin bisa saja berbeda, tapi yang jelas, biasanya ada di semua theme wordpress. Diperhatikan saja pola-nya. Pada prinsipnya, hanya untuk menambahkan sebuah class unik di setiap blok ganjil dan genap.

Dan sudah, halas, bas, finish. Itu saja. Gampang? oh iyaaa…

Membuat style sendiri untuk admin blog

Tidak jauh berbeda dengan bagian atas, untuk bagian ini hanya perlu membutuhkan kondisi saja. Konsepnya, anda cuma butuh mencocokkan email yang anda gunakan untuk verifikasi sebagai admin.

Langkah pertama, buat dulu sebuah variabel tepat di bawah variabel $j yang sudah kita tulis di bagian atas. Lengkapnya jadi begini.

[source:php]<?php
$j=0;
$author_class = “”;
foreach ($comments as $comment) :
?>[/source]

Kemudian, tinggal menaruh kondisi tepat di bawah kondisi nilai genap dan ganjil yang sudah kita buat di atas. Lengkapnya jadi begini:

[source:php]if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;
if($comment->comment_author_email == “didats@dimanasaja.com”) $author_class = “byauthor”;[/source]

Nah, langkah terakhir tinggal bagaimana kita menaruh variabel $author_class di bagian blok komentar. Tinggal edit saja bagian atas menjadi seperti ini:

[source:php]<div class=”comments <?php echo $class.” “.$author_class ?> ” id=”comment-<?php comment_ID();?>”>[/source]

Lengkapnya, jadi seperti ini:

[source:php]<?php
$x=0;
$author_class = “”;
foreach ($comments as $comment) :
if($j%2==0) $class=”comment-1″;
else $class=”comment-2″;
$j++;

if($comment->comment_author_email == “didats@dimanasaja.com”) $author_class = “byauthor”;
?>
<div class=”comments <?php echo $class.” “.$author_class ?> ” id=”comment-<?php comment_ID();?>”>[/source]

Bagian CSS

Memanipulasi theme wordpress sudah, sekarang saatnya kita memberikan sebuah penyelesaian akhir atas manipulasi yang telah kita buat. Yang perlu diingat, akan ada 3 buat class baru yang harus kita definisikan di file style.css yang ada di theme aktif. Yaitu, class comment-1, comment-2, dan byauthor.

Buka file style.css, dan tempatkan kursor di bagian paling akhir. Tulis seperti ini:

[source:css].comment-1 {
background:#F1F0DC;
}
.comment-2 {
background:#F7F7F7;
}
.byauthor {
background:#EFEFEF !important;
border-top:1px solid #999;
border-bottom:1px solid #999;
}[/source]

Artinya, kita membuat blok komentar yang bernilai genap dengan background berwarna agak orange, dan blok komentar yang ganjil dengan background berwarna abu-abu terang. Sedangkan untuk si author, memberi warna abu-abu terang yang lebih gelap sedikit dari blok ganjil, serta menambahkan border di atas dan di bawah.

Ternyata memang mudah, kan? :P

Related posts:

1. Tutorial: Membuat template WordPress (1) Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat...
2. Tutorial: Membuat template WordPress(3) – Header Lanjut lagi. Setelah membahas masalah desain, kini kita berlanjut ke...
3. Tutorial: Membuat template wordpress (2) – Desain template Yeah, akhirnya tutorial bagian pertama dilanjutkan. Dari beberapa komentar dan...

Bukan sekali dua kali, setelah selesai proses design, dan setelah puas, lalu beristirahat sebentar. Setelah beberapa menit kembali di depan macbook kesayangan, ternyata hati sudah berubah. Design yang tadi sudah dibuat, seakan-akan jadi design yang paling jelek sedunia. Halah. Ganti lagi lah jadinya. Hehehe.

Nah, mumpung lagi doyan nulis, maka yang ada di kepala saya, akan saya tuliskan semua. Tak perduli sudah berapa komentar yang masuk, juga tak perduli berapa orang yang baca. Yang penting nulis aja dulu…

Export data ke WordPress

Setelah mempelajari struktur database WordPress, akhirnya saya memberanikan diri untuk pindah ke WordPress. Kebetulan struktur datanya tidak banyak perbedaan dengan blog hasil buatan saya. Proses pemindahan data tidak memakan banyak waktu di kode PHP. Hanya banyak memakan waktu saat mencocokkan data dari Didats.net yang dulu ke WordPress. Lebih tepatnya, faktor mempelajarinya itu yang butuh waktu.

Terminologi Blog Didats.net

Saya punya dua kategori utama untuk setiap post yang saya tulis. Yaitu Blog dan Sideblog. Penggunaan sideblog di sebelah kanan pada halaman depan tidak menggunakan plugin apa-apa. Hanya mengandalkan kategori Sideblog saja.

Bagaimana memisahkan antara sideblog dan post?

Saya biasanya menggunakan fungsi get_post yang ada di wordpress. Untuk menampilkan post terakhir, saya menuliskannya sebagai berikut:

[source:php]<?php
$lastposts = get_posts(‘numberposts=1&category=3′);
foreach($lastposts as $post) :
setup_postdata($post);
?>[/source]

Maksud dari perintah di atas adalah, “tampilkan 1 post terakhir dengan kategori id adalah 3″. Kategori ID nomor 3 sendiri adalah kategori Blog. Jadi, kategori blog adalah hal wajib ketika saya ingin menampilkannya sebagai sebuah post, bukan sebagai sideblog.

Previous Post

Untuk Previous post, saya menggunakan query_post. Tidak ada bedanya menggunakan query_posts atau get_posts. Parameter untuk menampilkan previous post adalah seperti di bawah ini:

[source:php]<?php
$i = 0;
$lastposts = query_posts(‘showposts=5&cat=3&orderby=post_date’);
foreach($lastposts as $post) :
setup_postdata($post);
$i++;
if($i==1) continue;
?>[/source]

Penjelasannya, query_post akan menghasilkan 5 buah post terakhir dengan kategori ID adalah Blog. Nah, saya menampilkan 5 post, tapi kenapa yang keluar cuma 4?

Perlu diketahui, 5 buah post terakhir, juga berarti post yang sudah saya tampilkan sebelumnya di bagian atas. Jadi, untuk tidak mengikutsertakan post terakhir, maka saya menggunakan variabel penunjuk $i.

Jadi, sebelum ada perulangan foreach, saya mendaftarkan sebuah variabel bernama i yang bernilai 0. Di dalam perulangan, saya langsung menambahkan variabel i tersebut dengan 1 (ditandai dengan $i++). Setelah adanya penambahan, saya langsung memberikan kondisi. Kondisinya, jika nilai variabel i adalah 1, maka perulangan pertama akan diabaikan, dan langsung memulai perulangan kedua.

Dan untuk menampilkan preview gambar di setiap post, saya menggunakan bahasa Regular Expression yang mengambil gambar pertama yang ada di post, dengan kode di bawah ini:

[source:php]$the_content =$wpdb->get_var(“SELECT post_content FROM $wpdb->posts WHERE ID = $id”);
$pattern = ‘/<img\s+src=”(?P<image>[^"]+)”[^>]*>/i’;
preg_match_all($pattern, $the_content, $matches);
$image_src = $matches['image'][0];[/source]

Dari kode di atas, saya mencoba untuk langsung berinteraksi dengan database menggunakan bahasa SQL. Dengan kode SQL “SELECT post_content FROM $wpdb->posts WHERE ID = $id“, maka saya akan mendapatkan isi konten dari post yang sedang diakses.

Isi kontent tersebut akhirnya saya proses untuk mencari tag image. Saya sendiri hanya mengambil tag image pertama yang ada di dalam isi konten. Lalu URL image saya masukkan ke dalam variabel $image_src.

Nah, dari situ kita bisa langsung menampilkan gambarnya dengan tag IMG, tapi terlebih dahulu kita cek, apakan gambar di temukan. Jika tidak, maka tidak perlu ditampilkan. Berikut perintahnya:

[source:php]<?php if($image_src!= “”) {?>
<img src=”<?php echo $image_src?>” alt=”image” class=”img-posts” />
<?php } ?>[/source]

Nah, gampang kan? :p

Sideblog tanpa plugin

Untuk menampilkan sebuah sideblog tanpa menggunakan plugin, saya hanya menggunakan kode berikut ini:

[source:php]<?php
$lastposts = get_posts(‘numberposts=8&category=14′);
foreach($lastposts as $post) :
setup_postdata($post);
?>[/source]

Artinya, Tampilkan 8 post terakhir dari kategori ID 14. Kategori ID nomor 14 sendiri adalah Sideblog. Penggunaan sideblog tanpa plugin berarti mempermudah saya untuk mengkategorisasi setiap post yang mau saya publish.

Dan dengan banyak kostumisasi dari WordPress, maka memungkinkan kita membuat apapun yang kita inginkan dari sebuah wordpress saja. Memang ada beberapa kelemahan, tapi saya pikir kelemahan itu bisa kita tutup dengan pengetahuan yang kita punya tentang wordpress.

Related posts:

1. Published My Portfolio Finally, My Portfolio page has published. It’s quite hard to...
2. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...
3. Belajar Javascript lebih lanjut dengan JQuery (2) Membuat form dengan AJAX Membuat form adalah hal biasa dalam...

Membuat form adalah hal biasa dalam sebuah pemograman web. Dan AJAX, sebagai metode yang baru-baru ini mencuat ke permukaan, menjadikan dunia web lebih beragam dan lebih dinamis. Perlu diingat, tutorial ini menggunakan bahasa pemrograman PHP.

AJAX, bukanlah sebuah bahasa sendiri. Dia hanya sebuah metode bagaimana mengirimkan data-data yang ada di sebuah form ke server tanpa melalui proses refresh. Prosesnya sendiri dikendalikan oleh browser lewat pintu belakang. Dan sebelum adanya JQuery, AJAX adalah hal yang cukup rumit diwujudkan. Ketika JQuery muncul, AJAX cuma seujung jari kelingking. Hehe… :D

HTML Form dengan CSS

Untuk mempersingkat waktu, saya tidak akan membahas HTML Form dan CSS. Karena fokus kita saat ini adalah di bagian Javascript, dan sedikit bagian server. Untuk itu, halaman HTML Form dan CSS bisa di download sendiri.

[Download HTML Form, CSS dan Loader image]

Sebagai preview HTML Form-nya yang akan kita bahas di tutorial ini, bisa dilihat di kode di bawah ini:

[source:html]
<div id=”contactform”>
<h2>Contact Form</h2>
<form name=”frm” action=”#” method=”post”>
<div class=”form-item”>
<label>Your Name*</label>
<input type=”text” name=”txtname” />
<br class=”clear” />
</div>
<div class=”form-item”>
<label>Email Address*</label>
<input type=”text” name=”txtemail” />
<br class=”clear” />
</div>
<div class=”form-item”>
<label>Website</label>
<input type=”text” name=”txtwebsite” />
<br class=”clear” />
</div>
<div class=”form-item”>
<label>Messages*</label>
<textarea name=”txtmessages” rows=”10″ cols=”40″></textarea>
<br class=”clear” />
</div>
<br class=”clear” />
<input type=”button” class=”submit” name=”cmdsubmit” value=”Submit” />
</form>
</div>
[/source]

Langkah pertama, tambahkan JQuery line

Buka file index.html yang sudah anda download, dan tempatkan kursor anda di antara tag <head>, dan tambahkan baris yang sangat wajib jika ingin menggunakan JQuery seperti di bawah ini:

<script src="jquery.js" type="text/javascript"></script>

Langkah kedua, mulai berkreasi dengan JQuery

Setelah menambahkan baris wajib, sekarang kita butuh menambahkan baris ini. Ini juga hal yang wajib ketika menggunakan JQuery.

[source:html]<script type="text/javascript">
$(document).ready(function() {
// ... start jquery from here
}
</script>[/source]

Bentuk umum JQuery sendiri adalah seperti ini: $(nama_objek).properti(); Nama objek, hampir sama ketika kita memperlakukan objek HTML di CSS.

$(document).ready(function() { ... }); adalah sebuah kode yang mengecek apakah sebuah halaman sudah siap untuk dikomandoi kode JQuery.

Langkah ketiga, Validasi Form

Sebelum mengirimkan dokumen, akan lebih baik jika kita memvalidasi masukan dari user terlebih dahulu. Hal ini untuk menghindari kesalahan ketika data akan diproses. Tapi tentu saja hal ini tidak akan berguna, ketika Javascript di browser user dimatikan. Dan saya sekarang ini tidak membahas tentang browser yang tanpa javascript.

Sebagai awalnya, kita akan memeriksa apakah tombol submit sudah di klik.

[source:javascript]$("input[@name=cmdsubmit]").click(function() {
return false;
});[/source]

$("input[@name=cmdsubmit]") berarti, mencari sebuah tag input, yang mempunyai nama cmdsubmit. Ini tentunya bisa dimodifikasi menyesuaikan dengan form yang dibuat. Kata kunci click berarti menunggu sampai objek di klik. Penggunaan return false; dimaksudkan untuk tidak dulu mengirimkan data.

Validasi kosongnya inputbox

[source:javascript]$("input[@name=cmdsubmit]").click(function() {
// Telusuri semua objek inputbox
var i = 0;
$("input[@type=text]").each(function() {
if($(this).val() == "") {
alert($(this).attr("name") + " Ngga boleh kosong");
return false;
}
else i++;
});
if(i==3) {
alert("Validasi berhasil");
}
});[/source]

Penjelasan

Logika sederhananya, di form yang sudah saya sediakan terdapat 5 objek, yang terdiri dari 3 Input berupa teks, 1 Textarea, dan 1 tombol submit. Nah, untuk belajar memvalidasi awal, maka semua input berupa text wajib diisi.

Karena kita punya 3 input berupa teks, maka kita bisa menelusuri satu persatu objek tersebut dengan kata kunci each di JQuery seperti di bawah ini:

[source:javascript]$("input[@type=text]").each[/source]

Karena objek yang bertipe teks ada 3, maka kita dimungkinkan mengakses 1 persatu objek dengan properti each. Setelah dapat mengakses objek masing-masing, kita sekaligus mengecek, apakah objek tersebut masih kosong dari isian user dengan baris kode di bawah ini:

[source:javascript]if($(this).val() == "")[/source]

Objek $(this) merujuk ke objek yang sedang di akses oleh JQuery. Properti val() berarti mengakses isi dari objek tersebut. Ketika kondisi di atas benar (yaitu, ketika isian objek teks kosong), maka kita bisa mengeluarkan peringatan dengan perintah alert. Dan perintah return false; berarti kita keluar dari peng-aksesan tiap objek teks. Ini demi meringankan beban kerja browser yang user pakai.

[source:javascript]alert("Semua ngga boleh kosong");
return false;[/source]

Sedangkan variabel i, adalah variabel penunjuk yang bisa memberitahukan kita, apakah semua form sudah di isi. Buktinya, di luar properti each, kita bisa mengecek, apakah variabel i sudah mengakses sebanyak 3 objek input teks.

[source:javascript]if(i==3) {
alert("Validasi berhasil");
}[/source]

Untuk sementara ini, segini dulu tutorialnya. Besok-besok di lanjut. Sudah malam ini. Mau tidooor…

Saya sendiri gag tau, apakah yang baca ngerti apa ngga. Tapi saya sudah berusaha untuk menggunakan bahasa manusia yang sebenar-benarnya. Kalau memang masih ada yang ngga ngerti, berarti itu salah saya. Ternyata saya belum bisa menjadi seorang manusia… :p

Lihat Demonya aja deh kalo gag ngerti.

Related posts:

1. Belajar Javascript lebih lanjut dengan JQuery (1) JQuery akhir-akhir ini selalu menjadi pilihan saya jika ingin berkreasi...
2. Playing CSS under Javascript Tired with different result between IE and the other browsers?...
3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...

Apa itu Javascript Framework?

Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.

Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.

Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.

JQuery dan kemudahannya

JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.

Mari kita tengok bagaimana JQuery mempermudah kita.

Jika kita punya halaman HTML seperti ini:

<div id="container">This is container</div>


Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("#container").append("<strong>Ini hasil tambahan dari JQuery</strong>");
</script>

Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya sendiri.

Cukup sudah perkenalannya, sekarang saya akan tunjukkan bagaimana kita bisa melakukan banyak hal dengan JQuery. Sebagai perkenalan, mari kita lihat dulu contohnya di sebuah web yang baru saja selesai saya buat dengan menggunakan Codeigniter dan JQuery. Untuk tutorial selanjutnya, saya akan membahas bagaimana kita bisa mengubah Radio Button dan Checkbox menjadi lebih “menjual”… :D

Silahkan ditengok.

Related posts:

1. Belajar Javascript lebih lanjut dengan JQuery (2) Membuat form dengan AJAX Membuat form adalah hal biasa dalam...
2. Playing CSS under Javascript Tired with different result between IE and the other browsers?...
3. Belajar CSS yuk (1) Entah, saya bingung, sudah mencoba menulis, tapi tetap saja, tulisan...

Sekarang, sematik mulai bicara. Penggunaan menu navigasi dibuat dengan menggunakan list-item tag. Jujur saja, awalnya cukup bingung melihat kode list-item yang biasa menampilkan daftar list bisa berubah menjadi menu navigasi. Yuk, kita lihat bagaimana CSS bekerja dengan list-item ini.

Tag list-item

<ul class=”menu”>
<li><a href=”home.html”>home</a></li>
<li><a href=”about.html”>about</a></li>
<li><a href=”contact.html”>contact</a></li>
</ul>

Hasil tanpa menggunakan CSS:

• home
• about
• contact

Mungkin diantara kita sudah tahu, semua elemen HTML akan dianggap sebuah elemen kotak oleh CSS. Berikut kira-kira penggambaran kotak dari kode list-item di atas.

Membuat menu navigasi

Menu navigasi yang akan kita buat adalah yang versi horizontal. Jika teori dasar membuat menu sudah dikuasai, rasanya tidak terlalu masalah untuk membuat menu vertikal. Langkah pertama yang akan kita lakukan adalah menghapus margin dan padding yang secara default dimiliki tag ul.

ul.menu {
margin:0px;
padding:0px;
}

Kode CSS di atas berpengaruh terhadap elemen kotak list-item. Kira-kira elemen kotak akan berubah menjadi seperti gambar di bawah ini.

Hapus lingkaran di setiap item

Kita tidak memerlukan lingkaran hitam di setiap item. Untuk itu kita akan membuangnya lewat kode CSS. Berikut kodenya.

ul.menu li {
list-style:none;
}

Teori kata kunci float

Kata kunci float mempunyai 3 nilai, left, right, dan none. Nilai none berada pada posisi default. Kira-kira teori float digambarkan pada ilustrasi di bawah ini.

Yang perlu diperhatikan, antara nilai float left dan right sama saja. Hanya berbeda arah saja.

Nomor 1
Jika terdapat 3 kotak bernilai float:left, maka ketiga kotak tersebut akan berada sejajar dengan kotak sebelumnya.

Nomor 2
Jika 3 kotak yang berada di nomor 1 mempunyai pembatas yang juga berupa kotak. Eh, tambah satu lagi deh kotaknya. Ada 3 kotak dengan lebar 100 piksel tiap kotaknya, sedangkan kotak pembatas hanya mempunyai lebar 350 piksel. Itu berarti kurang 50 piksel lagi. Untuk itu kotak terakhir turun ke baris berikutnya.

Got it? Harus!

Kita kembali ke menu navigasi. Karena kita akan membuat menu horisontal, maka teori dasar dengan kata kunci float bisa kita gunakan. Kita lihat kode CSS-nya.

ul.menu li {
list-style:none;
float:left;
}

Dari kode CSS di atas, maka elemen kotak sekarang berubah. Lihat perubahannya. Besarnya kotak ternyata tergantung dari lebar isi kotak.

Sekarang kita tentukan lebar kotak.

ul.menu li {
list-style:none;
float:left;
width:100px;
}

Jangan lupa, posisi text harus di tengah

ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
}

Sekarang kita akan tentukan tingginya. Untuk menggunakan tinggi, akan lebih baik menggunakan kata kunci line-height daripada padding.

ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
line-height:25px;
}

tapi akan lebih baik lagi jika kita menggunakan tag font. Lihat kodenya baik-baik.

ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
}

Tapi sayang, cara ini kurang berhasil di IE. Untuk itu, kita perlu menambahkan 2 baris kode yang membuat kode CSS kita berjalan dengan baik.

ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}

Loh, kok bisa? silahkan lihat lagi tutorial yang pernah aku tulis sebelumnya. Dan inilah hasilnya setelah kita tambahkan tinggi.

Link Menu

Jika kita lihat lagi tag list-item, kita lihat ada sebuah link yang ditandai dengan tag a. Maka kita juga perlu untuk membuatkan CSS-nya. Tapi sebelumnya, mari kita lihat bagaimana bentuk kotak tag a sejauh ini. Di gambar di bawah ini, kotak tag a ditandai dengan kotak berwarna abu-abu.

Yang menjadi pertanyaan, kenapa tag a tidak secara penuh mengisi tag list? Ya, salah satunya, karena ELEMEN KOTAK LEBARNYA BERGANTUNG PADA ISI (kecuali untuk tag div) CMIIW. Untuk itulah kita perlu menambahkan kode CSS yang membuat elemen kotak link memenuhi ruang yang ada. Oh iya, sekaligus menghilangkan garis bawah yang dipunyai setiap link.

ul.menu li a {
display:block; /* buat kotak link memenuhi ruang yang ada */
text-decoration:none; /* hapus garis bawah */
background:#EFEFEF;
color:#000000;
}

Nah, kode CSS akan berubah menjadi seperti gambar di bawah ini.

Nah, sekarang sebenarnya kita sudah selesai. Tapi rasanya kurang lengkap jika kita tidak merubah warna background saat mouse berada di atas salah satu kotak. Maka dari itu kita tambahkan kode berikut ini.

ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}

Selesai!

Jadi, secara lengkap bisa kita tuliskan berikut ini:

<ul class="menu">
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>

Dan inilah kode CSS-nya:

ul.menu {
margin:0px;
padding:0px;
}
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
ul.menu li a {
display:block;
text-decoration:none;
background:#EFEFEF;
color:#000000;
}
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}

Lihat hasil akhirnya.

Ayo dong, kasih usul apalagi tutorial berikutnya. Kalau review design orang (seperti yang diusulkan mas Firman), sepertinya aku ini udah paling jago aja, padahal mah kagak. Drupal (seperti yang diusulkan Fany)? wekekeke… kagak bisa. Belum mulai belajar karena belum ada projek pakai drupal… :D

Related posts:

1. Tutorial: Membuat 2 kolom sama tinggi tanpa bantuan image Perhatian: Tulisan ini sangat panjang. Lebih baik invite aan sebelum...
2. Flickr tutorial: How to styling a badge Switch to Bahasa IndonesiaAs you may know, Flickr is one...
3. Tutorial: Membuat template WordPress (1) Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat...

But sorry, this tutorial only available in English. Even my English still worst! Hehehe….. If anyone want to translate this tutorial in Indonesia, just give me the link, and I will put it on this page.

Ok, we start!

If we have a CSS code that shown below:

#wrap {
background:#000;
color:#FFF;
width:100px;
height:100px;
}

From the code above, we can use javascript to replace those codes:

var idwrap = document.getElementById("wrap");
idwrap.style.background = "#000";
idwrap.style.color = "#FFF";
idwrap.style.width = "100px";
idwrap.style.height = "100px";

Got the point? Ok, if you have a basic knowledge about programming languange, you’ll be understand the code above. If not, let me explain it to you.

First step, create the object

var idwrap = document.getElementById("wrap");

Explain to the javascript, that you’ll be editing an element, which is element that used WRAP as an ID. The object that we have created, will be known as IDWRAP variable. Feel free to change the variable name. That’s only a variable name.

Second step, specify the style

If you want to specify the CSS property under javascript, follow this method:

object_name.style.css_property = “css_property_value”;

So, from the method above, we want to specify the wrap ID to give the black (#000) background. This is the code:

idwrap.style.background = "#000";

Got it? if not, read carefully! If my languange hard to understand, feel free to give me a correction, or ask me directly.

The javascript events

Events are the beating heart of any Javascript application. The simple way to understand is, Javascript will running after the trigger has started. Review the button below.

How to hide an element?

The CSS code to hide an element use display property. This is the CSS code.

#wrap {
display:none;
}

So, we can use javascript to hide an element. The syntax is still the same with the code that i’ve explained above. But on this part, we will create a function that will hide the ID that we’ve specify already.

function HideID(which_id) {
var obj_id = document.getElementByID(which_id);
obj_id.style.display = "none";
}

See the example of that function.

That’s it! easy, eh? Feel free to ask me directly about this tutorial. If you want an example of a weblog that used this method, see blogombal. Look carefully the lines on the bottom part. All the lines has line up. Want to see more? see Water and Stone website. That what I called 100% height javascript technique… :D

Any idea, what will be the next tutorial?

Related posts:

1. Belajar Javascript lebih lanjut dengan JQuery (2) Membuat form dengan AJAX Membuat form adalah hal biasa dalam...
2. Belajar Javascript lebih lanjut dengan JQuery (1) JQuery akhir-akhir ini selalu menjadi pilihan saya jika ingin berkreasi...
3. Flickr tutorial: How to styling a badge Switch to Bahasa IndonesiaAs you may know, Flickr is one...

Register your self

Flickr was an independent site, until Yahoo has bought in 2005. This mean you can use your Yahoo account to login at Flickr. Don’t forget to login before you continue this tutorial.

Create a badge

Click this page http://flickr.com/badge_new.gne

On that page, you will see there is 2 choices, HTML or Flash badge. To follow this tutorial, you have to choose HTML Badge, so we can give a style. If you use Flash badge, we cannot edit the code. Click the next button to continue.

Choose which photos you’d like to display.

Step 2 is, you will choose the photos. You can display your photos and other photos too. If you only want to display your photos, you can directly click the next button in the bottom area.

Set the layout options.

There is 5 questions at that page. Choose NO for the first question, SQUARE for fourth question, and NONE for the last question. The rest is up to you.

Choose colors for your badge.

Since we want to create the layout and background by our self, we don’t need the color or background from flickr. So, you can tick NO BACKGROUND and NO BORDER.

Get the code

This is the last step to get the code from flickr. You will get the weird code from flickr. Most of the code is rubbish. We only need the javascript part to put in our blog. See the weird code below:

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/

#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial,
Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit
!important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans
serif !important; color:#666666 !important;}
</style>
<div id=”flickr_badge_uber_wrapper”><a href=”http://www.flickr.com”
id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span
style=”color:#ff1c92″>r</span></strong>.com</a><div
id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=user&user=30227699%40N00″></script>
</div></div>
<!– End of Flickr Badge –>

Designing

I have made 5 backgrounds that we can use it. You have to remember before create the background, which is the dimension of thumbnail. The default value is 75 pixel. You can use Macromedia Fireworks, or other application that similar like Adobe Photoshop to made it.

The javascript

As i mentioned above, we only need the javascript part from the code that flickr gave to us. And this is the code from the javascript. Each thumbnail will be wrap by div structure that have a class flickr_badge_image

<div class=”flickr_badge_image” id=”flickr_badge_image1″>
<a href=”http://www.flickr.com/photos/didats/250546038/”>
<img src=”http://static.flickr.com/113/250546038_bb793f0505_s.jpg”
alt=”A photo on Flickr” title=”Flamengo” height=”75″
width=”75″>
</a>
</div>

From the picture, i will explain each step. You can find the my explanation below.

Step 1, didn’t give a style yet

For your information, if there is a div (the red line) on a page, the width of that div will expand until 100%. You can see the illustration at the picture above.

Step 2, we give a float property on the div

After we put float:left, the div will be match with the image (the gray box). Same condition if we put float:right on the div.

Step 3, make it center

At the picture above, there is a red text and gray text. The red text is for div, and the gray text is for the image.

First, we give a padding to div, so there will be a space in the div.
Second, we put position relative to the image, so we can move the image to match the div box. We can put left property and top property. Remember, we can also put minus value to match.

Step 4, yes! we did it!

Aha! the thumbnail ready to put on your blog now.

You can see the result and copy paste the css property into your blog’s stylesheet. Background 1, Background 2, Background 3, Background 4, Background 5.

This tutorial is not finish yet, we will continue later…. :D Feel free to give me a correction.

Switch to EnglishSeperti yang mungkin kita tahu, Flickr adalah salah satu situs layanan penyimpan foto. Jika anda melihat bagian atas situs ini, ada 3 buah photo yang langsung terhubung ke flickr. Nah, yang akan kita bahas di sini adalah bagaimana mempercantik tampilan foto-foto tersebut di blog kita.

Daftarkan diri anda

Flickr yang tadinya adalah situs independen, akhirnya diakuisisi oleh Yahoo pada tahun 2005. Itu berarti, untuk anda yang sudah mempunyai account Yahoo, bisa langsung login dengan user account Yahoo.

Buat Badge

Klik halaman http://flickr.com/badge_new.gne

Pada halaman tersebut, anda dihadapkan pada 2 pilihan. HTML badge atau Flash badge. Nah, untuk terus mengikuti tutorial ini, anda harus memilih HTML Badge untuk bisa kita manipulasi. Jika anda menggunakan Flash Badge, kita tidak akan bisa mengeditnya. Jika sudah, klik tombol next di bagian bawah.

Choose which photos you’d like to display.

Step 2 is, you will choose the photos. Selain menampilkan foto-foto yang ada di account Flickr kita, ternyata bisa juga untuk menampilkan foto lain. Jika tidak ada perubahan, maka klik next di bagian bawah.

Set the layout options.

Ada 5 pertanyaan yang diajukan pada halaman ini. Pilih NO untuk pertanyaan pertama, pilih SQUARE untuk pertanyaan keempat, dan pilih NONE untuk pertanyaan terakhir. Pertanyaan lain, terserah anda. Jika sudah, klik next di bagian bawah.

Choose colors for your badge.

Pada bagian ini, tick bagian NO BACKGROUND dan NO BORDER, kemudian klik next di bagian bawah. Kita memang tidak perlu bagian ini, karena nantinya kita sendiri yang akan menentukan tampilan dan layoutnya.

Get the code

Inilah langkah terakhir. Anda akan mendapatkan kurang lebih kode-kode aneh yang mungkin saja bisa merusak mata anda. Padahal, dari kode-kode yang kita dapat, rata-rata adalah sampah!

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/

#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial,
Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit
!important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans
serif !important; color:#666666 !important;}
</style>
<div id=”flickr_badge_uber_wrapper”><a href=”http://www.flickr.com”
id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span
style=”color:#ff1c92″>r</span></strong>.com</a><div
id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=user&user=30227699%40N00″></script>
</div></div>
<!– End of Flickr Badge –>

Dari kode-kode di atas, yang kita butuhkan hanya bagian script javascript saja. Mulai dari kode . Yang lain? hapus saja! kita tidak membutuhkannya.

Designing background

Di bawah ini ada beberapa alternatif background yang sudah aku buat. Untuk membuatnya, kita harus ingat, bahwa ukuran thumbnail foto sebesar 75 piksel berbentuk kotak. Tools yang aku gunakan adalah Macromedia Fireworks. Tidak menutup kemungkinan bisa juga di buat di program sejenis lain.

Kode yang tersusun dari halaman javascript adalah seperti di bawah. Tiap foto berada di dalam sebuah div yang mempunyai class flickr_badge_image.

<div class=”flickr_badge_image” id=”flickr_badge_image1″>
<a href=”http://www.flickr.com/photos/didats/250546038/”>
<img src=”http://static.flickr.com/113/250546038_bb793f0505_s.jpg”
alt=”A photo on Flickr” title=”Flamengo” height=”75″
width=”75″>
</a>
</div>

Terus bagaimana?

Ini bagian yang agak sulit untuk seorang pemula sepertiku. Heheh… *PLAK*

Dari gambar di atas, aku akan mencoba menjelaskan tiap langkahnya.

langkah 1, belum ada style

Sekedar informasi, jika ada sebuah div (yang bergaris merah) di sebuah halaman, lebar div tersebut akan tergantung dari area yang ada. Lihat ilustrasinya pada gambar

langkah 2, kita beri nilai float

Setelah kita beri kata kunci float:left, div akan mencocokkan diri dengan lebar image (kotak abu-abu). Sama seperti float:right. Hanya berbeda posisi saja.

langkah 3, taruh di tengah

Pada illustrasi di atas, ada tulisan berwarna merah dan berwarna abu-abu. Yang berwarna merah untuk div, dan yang berwarna abu-abu untuk image.

Pertama, kita beri div nilai padding. Jadi, akan ada ruang kosong di antar kotak dan image.
Kedua, kita taruh position:relative pada image. Jadi, kita bisa menggerakkan posisi image agar cocok dengan kotak div. Anda juga bisa memberikan nilai negatif jika memang dirasa perlu.

langkah 4, jadi!

Nah, sekarang foto-foto itu siap kita taruh di blog.

Anda bisa melihat langsung untuk tiap background pada file-file yang sudah aku buat. Background 1, Background 2, Background 3, Background 4, Background 5.

Tutorial ini masih belum selesai, karena masih ada beberapa hal yang akan kita bahas.

Duh! capek nulis 2 bahasa gini!

Related posts:

1. Tutorial: Buat menu navigasi yuk Dulu, saat era sebelum CSS mulai booming, menu navigasi dibuat...
2. Tutorial: Membuat 2 kolom sama tinggi tanpa bantuan image Perhatian: Tulisan ini sangat panjang. Lebih baik invite aan sebelum...
3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...

Setelah membahas masalah desain, kini kita berlanjut ke kode-kode aneh kepunyaan WordPress. Sebenarnya untuk membuat template WordPress tidak diperlukan pengetahuan PHP tingkat lanjut. Yang terpenting adalah pengetahuan HTMl dan CSS saja.

Langkah pertama

Kita tidak akan membuat template dari awal. Kita akan coba merubah file yang ada saja. Karena akan lebih sulit menerangkan setiap bagian, lagipula butuh waktu yang cukup panjang. Aku berasumsi PHP dan MySQL sudah terpasang dan bisa diaktifkan, juga instalasi wordpress sudah selesai. Bagi yang belum tahu bagian ini silahkan install terlebih dahulu.

Copy-paste direktori default

Direktori default adalah kepunyaan Kubrick, terlihat standar memang, tapi paling tidak aku bisa memberikan sesuatu yang standar terlebih dahulu, baru kemudian dikembangkan masing-masing. Mungkin keterangan di pada gambar bisa membantu. Setelah selesai proses copy-paste, ganti nama direktori hasil copy-paste menjadi pertamax.

Hapus isi file style.css

File style.css adalah file CSS yang merupakan jantung setiap template. Karena semua informasi yang berkaitan dengan template ditampung di sini. Setelah menghapus semua isi file (ingat, yang dihapus isi file, bukan file-nya), maka tulis kode di bawah ini di bagian paling atas file style.css

/*
Theme Name: Pertamax
Theme URI: http://url-anda.com/
Description: My first wordpress template
Version: 1.0
Author: Didats Triadi (Isi dengan nama anda)
Author URI: http://url-anda.com/
*/

Hapus isi direktori images

Kita tidak lagi memerlukan file-file gambar yang ada di direktori tersebut, untuk itu kita harus menghapusnya terlebih dahulu, agar terlihat lebih bersih. :)

Buka file header.php

Untuk membuka file header.php, akan lebih baik membukanya dengan editor khusus PHP seperti Dreamweaver, PHPEdit, Notepad++ atau program editor lain kesukaan anda. Jangan menyiksa diri dengan Notepad, Wordpad, atau Microsoft word. Ingat, anda mengedit skrip, bukan mau mengetik. :D

Kita mulai dengan bagian header

Setelah file header.php terbuka, hapus bagian yang tidak perlu mulai
dari <style type=”text/css” media=”screen”> sampai penutupnya,
</style>.

Tambahkan kode berikut ini untuk mengoptimalkan search engine. Kode di bawah ini bermaksud menyuruh Google untuk mengindex semua konten yang ada di blog dan berkunjung kembali tiap 2 hari sekali. Pada 3 baris pertama menjelaskan tentang isi blog kita. Perlu diingat, kode di bawah ini ditambahkan diantara tag header.

<meta name="author" content="Didats Triadi" />
<meta name="description" content="Deskripsinya diisi terserah
deh. " />
<meta name="keyword" content="Jangan, lupakan, untuk, mengisi,
keyword" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="revisit-after" content="2 days" />
<meta name="expires" content="never" />

Lalu kita berpindah ke bagian setelah tag body. Seperti yang sudah kita bahas kemarin, struktur div yang akan kita pakai adalah seperti di bawah ini. Jika masih bingung, lebih baik baca lagi bagian kedua.

<div id="wrap_header">
<div id="header">
</div>
</div>
<div id="wrap_menu">
<div id="menu">
</div>
</div>

Template Tags

Setelah struktur selesai, kini kita lanjut ke bagian tag-tag khusus WordPress. Semua daftar tag bisa dilihat di situs resmi. Sayangnya, kita harus online dengan internet untuk melihatnya. Aku sudah mengambil semua daftar tag, dan bisa dilihat secara offline. Sayang, ukurannya sampai dengan 40 MB, jadi agak susah di share disini. Untuk mengambilnya sendiri, bisa menggunakan HTTrack.

Dan inilah kode HTML yang sudah ditambahkan tag WordPress, tentunya masih dalam lingkungan header saja.

<div id="wrap_header">
<div id="header">
<h1 id="title"><a href="<?php echo get_settings('home');

?>/"><?php bloginfo('name'); ?></a></h1>
<h2 id="description"><?php bloginfo('description'); ?></h2>
</div>
</div>
<div id="wrap_menu">
<div id="menu">
<ul>
<li <?php
if (((is_home()) &&
!(is_paged())) or
(is_archive()) or
(is_single()) or
(is_paged()) or
(is_search()))
{ echo "class="active""; }
?> >
<a href="<?php echo get_settings('home'); ?>" ><?php
_e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
</div>
</div>

Keterangan:

Header

<h1 id="title"><a href="<?php echo get_settings('home');

?>/"><?php bloginfo('name'); ?></a></h1>

Penggunaan h1 untuk header sangat dianjurkan, karena setiap search engine
menganggap penting penggunaan header tag dari h1 sampai dengan h7. Ini juga termasuk
dalam optimisasi search engine. Tag yang digunakan adalah get_setting
dan bloginfo bisa dilihat keterangannya di situs resminya.

Menu

<li <?php
if (((is_home()) &&
!(is_paged())) or
(is_archive()) or
(is_single()) or
(is_paged()) or
(is_search()))
{ echo "class="active""; }
?> >
<a href="<?php echo get_settings('home'); ?>" ><?php
_e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

Kode di atas bermaksud untuk memberikan menu Home dan atribut class active. Keterangan
tag silahkan dilihat di situs
resmi. Tidak memungkinkan untuk menjelaskan di sini semuanya.

Sampai disini dulu tutorial ini. Untuk selengkapnya, silahkan lihat file lengkapnya.

Hidup Itali! Aku memang sudah tahu Itali akan juara tahun ini! :D

Related posts:

1. Tutorial: Membuat template wordpress (2) – Desain template Yeah, akhirnya tutorial bagian pertama dilanjutkan. Dari beberapa komentar dan...
2. Tutorial: Membuat template WordPress (1) Siapapun yang punya blog dengan mesin WordPress tentunya ingin membuat...
3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...