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

XAMPP Talk : Web and Database Server Protection

Apakah Anda seorang web programmer?

Apakah Anda menggunakan XAMPP sebagai software PHP All in One Package?

Apakah Anda selama ini mengabaikan pentingnya proteksi pada server Anda?

Jika semua pertanyaan diatas Anda jawab dengan “ya”, maka benarlah komputer Anda membawa Anda kesini.

Pernahkah Anda membuka Apache Web Server Administration Page(XAMPP Pages) atau PhpMyAdmin dari komputer host(bukan komputer Server)? Jika proteksi belum diaktifkan, maka Web Administration atau PhpMyAdmin ini bisa diakses dari mana saja tanpa memerlukan sebuah otentifikasi username dan password. Dengan begitu, pihak diluar admin dapat mengubah konfigurasi dengan bebas pada Server anda kecuali proteksi. Tentunya Anda sebagai Administrator tidak menginginkan ini terjadi bukan?

Ada 3 hal yang perlu Anda perhatikan dalam masalah proteksi, yaitu:

  1. XAMPP pages (http://127.0.0.1/xampp/)
  2. MySQL admin Password (Database server Password)
  3. dan PhpMyAdmin (http://localhost/phpmyadmin/)

Untuk melihat status proteksi-proteksi diatas, Anda bisa mengaksesnya melalui situs ini. http://127.0.0.1/security/ atau memilih langsung menu Security dari Homepage XAMPP Pages Anda yang terletak di slidebar sebelah kiri. Jika Anda belum melakukan proteksi, maka status proteksi Anda akan seperti screen shot berikut ini.

Continue reading

PHP Talk: CRUD Part 4 (FINAL)

Hallo PHP Programmers… Sudah cukup lama saya merancang tutorial CRUD PHP ini, namun dikarenakan liburan akhir tahun saya yang lumayan panjang, jadi part terakhir dari tutorial ini menjadi tertunda. Kini saya sudah kembali ke kehidupan saya sebagai blogger dan juga mahasiswa, dan saatnya pula kita mulai men-sharing-kan ilmu kita kembali di Blog ini.

Pada PHP Talk: CRUD Part 3 kita telah membahas teknik CRUD sampai pada U(Update). Dan sekarang tibalah saatnya kita membahas tentang proses terakhir yaitu D(Delete). Tutorial terakhir ini cukup pendek dibandingkan dengan tutorial sebelumnya, jadi jangan malas dulu ya?.. Jika teman-teman belum mengikuti tutorial yang sebelumnya, silahkan ikuti terlebih dahulu. Berikut permalink dari rentetan tutorial ini:

Jika teman-teman sudah mengikutinya dan berakhir dengan kesuksesan, saatnya sekarang kita tuntaskan misteri dibalik CRUD ini.…

1. Starter

Untuk dapat menghapus sebuah data dalam data base, maka kita memerlukan suatu file .php yang bertugas untuk mengeksekusi permintaan penghapusan dari user. Sekarang buatlah file .php dengan nama delete.php pada folder tutorialphp. File ini nantinya akan menerima datakey dari halaman utama dan akan menghapus data mahasiswa yang sesuai dengan datakey yang dikirimkan tersebut.

2. Mengubah Halaman utama.

Continue reading

PHP Talk: CRUD Part 3

Pada PHP Talk: CRUD Part 2, kita telah membahas tuntas tentang proses Create pada aplikasi berbasis CRUD. Kali ini saya akan meneruskan pembahasan CRUD ini ke proses Update. Jika anda belum mengikuti tutorial yang sebelumnya, silahkan ikuti terlebih dahulu. Berikut permalink dari rentetan tutorial ini:

Jika teman-teman sudah mengikutinya dan sukses, mari kita lanjutkan tutorialnya…

1. Starter

Untuk mengedit/update data yang berada dalam database, kita memerlukan form tambahan dimana kita akan mengganti value dari setiap fieldnya. Maka buatlah folder “edit” pada folder C:\xampp\htdocs\tutorialphp.  Jika sudah buatlah 2 file .php dengan nama masing-masing:

  1. index.php, digunakan untuk mendisplay dan memasukan data yang baru.
  2. edit.php, digunakan untuk menangkap data hasil masukan user dan meng-update sebuah baris pada database sesuai dengan datakey-nya.

2. Mengubah Halaman utama.

Continue reading