Android Talk : Asynchronous HTTP Connections using Project Library

HTTP Connections adalah sebuah koneksi Request/Response based dan selalu diinisialisasi oleh client. Secara sederhana HTTP Connections dapat digambarkan ketika suatu aplikasi ingin mengambil data melalui sebuah URL, maka aplikasi itu akan menggunakan HTTP Connection.
Kebanyakan HTTP Connection berjalan sinkron dengan UI, jadi terkadang membuat UI Android menjadi tidak dapat menerima respon dari pengguna(Not Responding). Di tutorial ini kita akan belajar bagaimana cara membuat koneksi asinkron yang mengakses Twitter Public Timeline API.

Tutorial Details

  • Program : Eclipse, Android SDK,  AndroidConnections Lib
  • Topic : Asynchronous HTTP Connections using Project Library
  • Difficulty : Easy to Intermediate
  • Estimated Completion Time : About 15 minutes

Assumptions

  • Anda sudah menguasai dasar pemograman Android.
  • Anda sudah memahami basic Android Connection.
  • Anda memahami cara kerja Webservice merupakan sebuah nilai lebih.
  • Pernah menggunakan Twitter RESTful API dapat mempermudah anda dalam memahami tutorial ini.

Step 1. Creating a new project

Buatlah android project dengan spesifikasi seperti berikut:

  • Project Name : AndroidTutorialConn
  • Target/Build SDK : API 4
  • Min SDK : API 4

Continue reading

CodeIgniter Talk : Basic Image Uploader

Pengunggahan image pada suatu website nampaknya merupakan salah satu backbone aplikasi yang tak dapat dipungkiri lagi keberadaannya. Dengan adanya fungsi ini, suatu website dapat menyediakan banyak fungsi-fungsi lain yang berhubungan dengan image, e.g., Change Profile Picture, Change Avatar, Share Image, Picture Editor, etc. Tutorial ini dibuat sesuai dengan salah satu request dari pengunjung.

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : Basic Image Uploader
  • Difficulty : Easy to Intermediate
  • Estimated Completion Time : About 30 minutes

Assumptions

  • Anda sudah memahami cara kerja framework CodeIgniter.
  • Anda sudah mengerti bagaimana URL terbentuk dalam framework CodeIgniter.
  • Anda mengerti tentang penggunaan mod_rewite dalam CodeIgniter merupakan suatu nilai tambah.
  • Anda sedang mengalami kesulitan dalam pembuatan halaman yang dapat mengunggah image.

Step 1. Configuring CodeIgniter

Unduh framework CodeIgniter versi 2.1.0 disini dan extract di folder xampp/htdocs/. Setelah itu rename folder CodeIgniter_2.1.0 menjadi tutorial-ci-image-uploader. Buka dengan web browser halaman http://localhost/tutorial-ci-image-uploader, anda akan melihat halaman default CodeIgniter yang belum dikonfigurasi.

Untuk mengkonfigurasi CodeIgniter anda harus mengubah beberapa script PHP yang ada pada folder /tutorial-ci-image-uploader/application/config/.

Continue reading

CodeIgniter Talk : Pagination

Bagi kebanyakan website dinamis (e.g., blog, search engines, news, etc) memerlukan navigasi halaman. Navigasi ini akan terbentuk secara dinamis (ketika suatu halaman di-load) bergantung pada jumlah data yang tersimpan dalam database atau jumlah data yang dibentuk untuk sebuah report.  

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : Pagination
  • Difficulty : Easy to Intermediate
  • Estimated Completion Time : About 30 minutes

Assumptions

  • Anda sudah memahami cara kerja framework CodeIgniter.
  • Anda sudah mengerti bagaimana URL terbentuk dalam framework CodeIgniter.
  • Anda mengerti tentang penggunaan mod_rewite dalam CodeIgniter merupakan suatu nilai tambah.
  • Anda sedang mengalami kesulitan dalam pembuatan navigasi halaman(page navigation).

Step 1. Configuring CodeIgniter

Unduh framework CodeIgniter versi 2.1.0 disini dan extract di folder xampp/htdocs/. Setelah itu rename folder CodeIgniter_2.1.0 menjadi tutorial-ci-pagination. Buka dengan web browser halaman http://localhost/tutorial-ci-pagination, anda akan melihat halaman default CodeIgniter yang belum dikonfigurasi.

Untuk mengkonfigurasi CodeIgniter anda harus mengubah beberapa script PHP yang ada pada folder /tutorial-ci-pagination/application/config/.

  • Configuring config.php file

cari script seperti berikut :

$config['base_url'] = '';

dan diubah menjadi, Continue reading

CodeIgniter Talk : Mod Rewrite

CodeIgniter secara default akan meletakan index.php pada url website sebelum nama controller dan fungsinya. Index.php berperan sangat penting pada CodeIgniter karena ini merupakan front controller bagi framework CodeIgniter. Kita tidak dapat menghilangkan ini namun kita masih bisa mengambil index.php dari url aplikasi kita. Tentunya hal ini adalah suatu yang wajib bagi mereka yang menyukai simplisitas pada url website mereka.

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : Mod Rewrite
  • Difficulty : Intermediate to Insane
  • Estimated Completion Time : About 20 minutes

Assumptions

  • Anda sudah memahami cara kerja framework CodeIgniter.
  • Anda sudah mengerti bagaimana URL terbentuk dalam framework CodeIgniter.
  • Anda tidak suka dengan keberadaan index.php pada URL website anda. 🙂

Step 1 Adding .htaccess file

Untuk mengontrol url pada website kita, kita dapat menggunakan .htaccess file ini. Sekarang buatlah file ini di root folder aplikasi web anda. Setelah itu isikan dengan script dibawah ini,

Continue reading

CodeIgniter Talk : CRUD Part 2

Pada tutorial sebelumnya kita sudah menyelesaikan sebagian dari proses CRUD ini dari pengenalan CodeIgniter, Create database sampai pada Read database. Dikesempatan kali ini mari kita langsung saja menyelesaikan tutorial ini dengan menambahkan fitur Update berserta Delete-nya.

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : CRUD
  • Difficulty : Easy
  • Estimated Completion Time : About 15 minutes

Assumptions

  • Anda sudah menyelesaikan dengan baik tutorial CodeIgniter Talk : CRUD Part 1.
  • Anda sudah memahami bagaimana cara kerja CodeIgniter.
  • Anda sudah mengerti proses Create dan Read database dari framework CodeIgniter.
  • Anda ingin menyelesaikan tutorial berantai ini. 🙂

Step 1 (Updating a record)

Untuk dapat mengupdate database berdasarkan data yang ditampilkan, maka kita harus melakukan perubahan pada view, memberikan fungsi baru pada controller home dan membuat halaman baru untuk update.

  • Updating home_view.php

Bukalah file home_view.php lalu perhatikanlah html yang ada didalam tag. Ganti bagian itu dengan html berikut :
Continue reading

CodeIgniter Talk : CRUD Part 1

CodeIgniter menjadi terkenal karena kekuatannya sebagai framework PHP, namun masih banyak orang diluar sana yang belum mencoba keunggulannya. Pada kesempatan kali ini kita akan mencoba membuat aplikasi web sederhana dengan menggunakan framework CodeIgniter.

-Revisi tutorial karena kesalahan teknis, Sabtu 14 April 2012- 

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : CRUD, Getting Started with CodeIgniter
  • Difficulty : Easy
  • Estimated Completion Time : About 30 minutes

Introduction

Tutorial CRUD Codeiginter ini akan dibagi dalam beberapa tahapan yang akan membahas cara konfigurasi codeigniter sampai pada pengimplementasian aplikasi CRUD. CRUD sendiri adalah proses management database yang meliputi pembuatan data dalam database(Create), pembacaan data dalam database(Read), perubahan data dalam database(Update) dan penghapusan data dalam database(Delete). Pada part 1 ini kita akan memulainya dengan konfigurasi CodeIginter, pengenalan CodeIgniter sampai pada Create dan Read database.

Assumptions

  • Anda sudah mengenal fungsi-fungsi dasar Hypertext Preprocessor (PHP).
  • Anda sudah mengenal Object Oriented Programming (OOP)
  • Anda sudah menguasai basic knowledge dari Data Definition Language (DDL) dan Data Manipulation Language (DML)
  • Anda sudah menguasai basic knowledge dari HyperText Markup Language (HTML)
  • Anda sudah meng-install salah satu PHP All in One Package  program e.g, XAMPP, WAMP
  • Anda sedang tidak mengalami kegalauan 🙂

Step 1 (Configuring CodeIgniter )

Unduh framework CodeIgniter versi 2.1.0 disini dan extract di folder xampp/htdocs/. Setelah itu rename folder CodeIgniter_2.1.0 menjadi tutorial-ci-basic. Buka dengan web browser halaman http://localhost/tutorial-ci-basic, anda akan melihat halaman default CodeIgniter yang belum dikonfigurasi.

Untuk mengkonfigurasi CodeIgniter anda harus mengubah beberapa script PHP yang ada pada folder /tutorial-ci-basic/application/config/.

  • Configuring config.php file

cari script seperti berikut :

$config['base_url'] = '';

dan diubah menjadi, Continue reading

The Google trick “Let it Snow” – Replication

Sudahkah teman2 mencoba mengetikan keywords “Let it snow” tanpa petik di google? Trick google kali ini adalah yang paling mengagumkan (menurut saya).  Seketika juga saat anda tekan enter, hujan salju akan turun lalu diiringi oleh “membekunya” jendela browser anda. Ketika pembekuan sampai pada tahap akhir, anda bisa menuliskan sesuatu di jendela anda yang telah “membeku” itu. Dan untuk menghilangkan efeknya, cukup menekan tombol “Defrost”. Ehmm keren! Seketika saya mengetahui trick google ini, sayapun ingin membuat tiruannya.

Adakah dari teman2 yang sudah mengunjungi Christmas Card Website (2011) ? Website ini pertama kali di publikasikan desember tahun 2010. Dengan fitur awal adalah hujan salju, back sounds, ubah warna dan bentuk salju serta dapat memberikan komentar. Nah, diwebsite inilah tiruan the Google “Let it snow” dibuat. Ya memang jauh dari sempurna dibanding aslinya, wajar sajalah replikasi fitur “Let it snow” ini dibuat hanya kurang dari 12 jam.. @@ Replikasi inipun dapat ditulisi sesuatu saat mencapai pembekuan dan juga dapat di “Defrost”. Ehmm.. lumayan buat mempercantik tampilan website Christmas Card Website (2011). 🙂 mari berkunjung dan rasakan kemiripannya. hha salam blogger.. eSDhee

AJAX Talk : Submitting form on the fly

Pernahkan anda mengalami kesulitan dalam mengunggah form secara asinkron? Jika pernah, google tidak salah membawa anda ke halaman blog ini. 🙂

Terdapat banyak cara untuk memecahkan masalah tersebut, salah satunya dengan menggunakan AJAX(Asynchronous JavaScript and XML). Apakah istilah tersebut terdengar asing ditelinga teman2? Jika iya, silahkan ikuti dulu tutorial AJAX Talk: Simple XML HTTP Request Object Implementation. Jika sudah berkenalan dengan si AJAX(baca: ayaks) mari kita coba tutorial berikut ini.

1. Starter

Tutorial ini saya buat mengharuskan anda untuk membuat webserver local. Jika anda belum menginstalnya silahkan instal terlebih dahulu. Saya anjurkan anda menggunakan XAMPP. Silahkan lihat tutorialnya disini XAMPP Talk: How to instal XAMPP. Jika sudah menginstal, buatlah folder tutorialajax_submitform pada c:\xampp\htdocs. Buatlah juga beberapa file berikut:

  1. index.html digunakan sebagai homepage. Dimana kita akan membuat halaman ini sebagai halaman utama.
  2. config.php digunakan untuk mengkonfigurasi koneksi database.
  3. requestme.php file ini akan kita gunakan sebagai target file yang akan menerima hasil submit dari form yang ada di homepage secara asynchronous.
  4. jquery.js ini adalah jQuery library. Salah satu fungsi yang kita gunakan adalah $.ajax yang akan membantu kita dalam mengirikan form.

2.  Download jQuery Library

Jika anda belum mempunyai jQuery Library, silahkan download disini. Copy semua scriptnya dan paste pada file jquery.js. Jangan lupa untuk menyimpan file tersebut.

3. Membuat database

Continue reading

Pentingnya berpikir kompleks.

Mungkin ini hal yang simple nan sepele tapi sebenarnya cukup penting juga untuk kita refleksikan.

Sebenarnya apa sih berpikir kompleks yang gw maksud? | Berpikir kompleks disini yaitu kita memikirkan suatu hal yang ribet/kompleks padahal kita sudah menemukan pemikiran sederhananya.

Kenapa sih gw tertarik untuk membahas hal ini? | Ya karena gw termasuk dalam orang-orang yang sering berpikir kompleks dalam kondisi tertentu. Saking seringnya, temen gw sering nyeplos kyk gini, “kok pemikiran lu ribet banget sih!”, “ahh ribet loo!”, dan yang paling parah, “cape guaaa”, “bingung guaaa”. Ok mungkin itu sedikit kutipan omongan dari temen-temen gw. Sebenarnya gak enak juga sih diomongin kyk begitu, tapi apa boleh buat ya emang gw dari sononya dah begini. Mau diapain lagi coba? haha

Terus gak cape apa berpikir ribet terus? | Cape sih iya klo dipikir-pikir, tapi ya nama’a udah bawaan ya mau diapain juga? Hahaha

Berpikir kompleks tuh sering gak make sense gak sih? | Nah itu dia yang mau gw bahas disini, berpikir kompleks itu terkadang dibutuhkan dan membuahkan hasil yang bagus tapi terkadang sama sekali tidak dibutuhkan bahkan dapat menimbulkan sebuah bencana. Agak lebay sih, ya gak pa2 lah. Lebih jelasnya tentang berpikir kompleks tapi menimbulkan bencana, dapat kita saksikan divideo dibawah ini. Continue reading

jQuery Talk : jQuery Time Tree, a plugin to create tree of time

Pernahkan anda membuat aplikasi Business Intelligent berbasis web? Jika pernah, adakah kesulitan ketika anda ingin membuat sebuah drilldown dan roolup untuk time tree? (Time tree biasanya digunakan untuk menyajikan dimensi waktu sebagai navigasi saat report ditampilkan.)

Time Tree Example

Time Tree Example

Permasalahan diatas dapat dipecahkan dengan menggunakan plugin ini, jqTimeTree. jqTimeTree menyediakan navigasi waktu yang dapat digunakan saat menampilkan report. Dalam pre-release ini, jQTimeTree hanya menyediakan dimensi waktu dalam tahun, bulan dan minggu dalam tahun. Setiap node dalam time tree secara default akan menampilkan alert box berupa waktu yang sedang diklik. Fungsi default ini tentunya dapat dikostumasi dengan fungsi lain. e.g. anda ingin mengirimkan informasi waktu ini ke server dan mengambil report yang bersangkutan untuk ditampilkan kembali ke antarmuka user secara asinkron. Maka anda dapat menggunakan fungsi ajax yang sudah disediakan diframework jQuery.

Tentunya sebuah plugin harus mendukung sebuah kostumasi dan jqTimeTree pun sudah dapat dikostumasi. Sebagai contoh, laporan/report yang akan anda tampilkan berada dalam kurun waktu 2005-1-20 sampai dengan 2011-6-6, maka anda dapat dengan mudah mengatur kurun waktu tersebut pada saat jqTimeTree dibangun/built. Konfigurasi tersebut secara default akan seperti ini.

$(document).ready( function() {
jQuery('#jQueryTimeTree').jqTimeTree({
script: 'php_classes/jq.controller.php', //the default of php controller file
expandSpeed: 200, //the time of expanding tree in milliseconds
collapseSpeed: 200, //the time of collapsing tree in milliseconds
startDate: '2005-1-20 00:00:00', //this is would be the start of the time tree
endDate: '2011-6-6 00:00:00', //this is would be the end of the time tree
multiTree: true //make sure for startDate and endDate statement should be formatted like YYYY-MM-DD HH:MM:SS
}, function(time) {
//take an action to the clicked time in this function
//by the default, the clicked time will be shown on the alert box
alert(time);
//for further use, you can send this time to take a report from database or data warehause
//you can use ajax function to make an asynchronous http request });
});

jQTimeTree saat ini masih dalam pengembangan, diharapkan project ini dapat membantu teman-teman yang sedang mengembangkan aplikasi business intelligent berbasis web. Untuk demo, teman-teman dapat melihatnya diwebsite berikut, http://esdhee-art.eu5.org/jQueryTimeTree/. Untuk mengunduh plugin ini silahkan kunjungi GitHub. Plugin yang anda unduh sudah termasuk demo beserta penjelasan singkat. Seperti potongan code diatas.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee