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

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