Apalagi fisika. Saya tidak pernah suka dengan pelajaran fisika. Alasan saya dulu kalau tidak salah, Fisika menggunakan banyak rumus yang harus dihafal. Jadi satu soal fisika, bisa menggunakan lebih dari 3 rumus, dan semua saling berkaitan. Dan bodohnya saya, saya pernah menganggap bodoh soal yang menghitung berapa meter sebuah kereta yang sudah ngerem dari posisi ngerem mendadak.

Kebodohan itu tidak lantas berhenti ketika saya mengambil jurusan Teknik Informatika waktu kuliah dulu. Mata kuliah Kalkulus yang sampai berderet 3 itu memang menyenangkan buat saya. Tapi hanya sekadar menyenangkan. Ketika ditanya tentang Kalkulus 1 lagi, saya pasti menyerah.

Sekarang saya sadar. Ketika saya mulai hobi membuat permainan (game), ada banyak operasi matematika turut serta, walaupun sampai sekarang ini hanya permainan-permainan sederhana yang saya buat. Coba tengok gambar di bawah ini untuk bisa mengerti, bahwa permainan sederhanapun akan mengikutsertakan operasi matematika.

Bagaimana dengan Fisika?

Banyak permainan berkategori arcade (apa bahasa Indonesianya?) seperti Angry Birds, atau Super mario menggunakan Fisika. Tak perlu yang muluk-muluk, untuk membuat sebuah objek melompat saja, pasti membutuhkan Fisika. Apalagi seperti Angry Birds yang menyertakan banyak rumus Fisika.

Jadi, sebelum keburu menyesal, saya mungkin akan mulai belajar Matematika dan Fisika dari pelajaran SMP. Kalau boleh, saya juga mau ikut deh belajar ke kelas. #halah.

Related posts:

1. Membedah theme Didats.net Menjadi seorang web designer tentunya punya beban dan ego yang...
2. Saya bermimpi jadi presiden Saya mungkin satu dari sekian banyak warga Indonesia yang risih,...

1. Ukuran total semua berkas harus kurang dari 10 Kilobyte;
2. Berfungsi sama di peramban-peramban modern seperti Mozilla Firefox 3.6, Peramban Webkit (Chrome dan Safari), dan juga Internet Explorer versi 9.
3. Librari Javascript yang boleh dipakai adalah JQuery, Prototype, dan Typekit.
4. Tidak boleh menggunakan pemrograman sisi server (server-side programming) seperti PHP, ASP dan teman-temannya. Aplikasi murni berjalan di sisi klien
5. Boleh menggunakan web service seperti Twitter, Google Web dan web service lain.

Membuat aplikasi web itu memang tantangan, tapi membuatnya sekecil-kecilnya itu yang agak sulit. Saya sampai menggunakan aplikasi kompresi file yang menghilangkan spasi dan whitespace di semua berkas yang saya buat.

Oh, iya, kenapa ada IE9 di sini? jangan heran, karena Microsoft adalah sponsor utamanya.

Jangan lupa cek juga aplikasi buatan saya yang sudah nebeng di sana.

Related posts:

1. KetaKetik dan Teektak ditutup sementara Terbaru: KetaKetik dan Teektak sudah pindah ke server baru. Atas...
2. KetaKetik di 10k Apart Salah satu aplikasi saya “How fast is your typing“, versi...
3. Codeigniter dan Facebook Graph API Saya ceritanya baru berhasil menggunakan Facebook Graph API dan Codeigniter....

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

Tak lain dan tak bukan, karena memang pengguna ie6 masih di ambang-ambang. Antara besar dan kecil. Diperkirakan ada sekitar 15% user yang masih menggunakan ie6. Angka yang cukup lumayan.

Tapi sayangnya, Microsoft sebagai si empunya yang harusnya punya andil dalam memberantas si ie6 ini. Mungkin dengan memberikan semacam alert kepada user untuk mengupgrade browsernya. Dengan peringatan-peringatan seperti itu, bisa jadi angka pengguna bisa berkurang secara drastis.

Berita buruknya, anda sedang bermimpi. Microsoft takkan melakukan itu.

Stop dukungan ie6!

Lalu, jika kita tak bisa berpangku tangan ke Microsoft, apa kita harus diam saja? Atau bahkan malah memanjakan mereka (pengguna ie6)?

Nah, maka dari itu saya membuat halaman khusus untuk ie6, dan memberikan semacam sedikit pengetahuan kepada usernya untuk segera update. Dan sebelum mereka upgrade browser mereka, sampai kapanpun mereka tak akan pernah bisa mengakses situs saya. Walaupun saya sadar, ke depan, saya akan kehilangan sekitar 10% pengunjung.

Bagaimana caranya?

Untuk pengguna wordpress, atau CMS apapun yang berbasiskan PHP, bisa menaruh kode di bawah ini di bagian header. Untuk wordpress, biasanya file header.php, sebelum tag body di mulai.


<?php if (ereg('MSIE 6',$_SERVER['HTTP_USER_AGENT'])) { ?>
<meta http-equiv="refresh" content="0;URL=http://url.di.sini/" />
<?php } ?>


Yuuuk! kita kampanye damai untuk stop ie6!

Related posts:

1. Codeigniter dan Facebook Graph API Saya ceritanya baru berhasil menggunakan Facebook Graph API dan Codeigniter....

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...

The terminology

Portfolio items is a post from wordpress. It just separated with the category. That’s why if you has subscribed my feed, all of the portfolio items showed.

I did the portfolio the same as Sideblog on the front page. I didn’t use any plugin, it just the category. The portfolio items are under portfolio category, and the sideblog items are under sideblog category.

What I did on the portfolio page is like this:

[source:php]<?php if($post->ID == 430) { ?>
<div id=”theportfolio”>
<?php
$i = 0;
$lastposts = get_posts(‘numberposts=20&category=19′);
foreach($lastposts as $post) :
setup_postdata($post);
?>
<div class=”portfolio-content”>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>
<div class=”portfolio-entry”>
<?php the_content() ?>
</div>
</div>
<?php endforeach; ?>
</div><!– /#theportfolio –>
<?php } ?>[/source]

Yes, first thing, you should know the ID of the page that you want to put the post items. You can see the ID for each page from the “Manage Page” menu on the admin panel of wordpress. Once you got the ID, you can put conditional scripts on page.php located on your theme directory.

[source:php]<?php if($post->ID == 430) { ?>[/source]

Then you can put your get_post code after the conditional scripts. Dont’ forget to close the area by putting this at the end of area:

[source:php]<?php } // conditional page ID ?>[/source]

Yes, that’s all.

Related posts:

1. Setelah Portfolio, saatnya WordPress Themes Halaman portfolio kini sudah menjadi bagian dari blog ini. Perlu...
2. Membedah theme Didats.net Menjadi seorang web designer tentunya punya beban dan ego yang...
3. Tutorial WordPress: Membuat daftar komentar lebih menarik Saya masih saja agak kesulitan untuk menulis tutorial baru tentang...

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...