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

Advertisements

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

Photoshop Talk : Photo Restoration and Manipulation

Mungkin teman-teman sering mendapatkan foto yang tidak enak dipandang, seperti foto dibawah ini. Dari foto dibawah ini, kita dapat melihat beberapa sisi cacatnya, e.g., fotonya terlalu bnyk noise, pewarnaan dan penerangan yang kurang, dan juga background yang tidak mendukung object. Dan mungkin object-nya juga yang kurang bagus.. Hahaha

Dari masalah yang kita dapatkan, mari kita coba memperbaiki foto diatas menjadi seperti foto dibawah ini(Lihat yang sebelah kanan). Jika teman-teman enggan menggunakan source foto diatas, teman-teman bisa mencoba tutorial ini dengan source foto lain.

Continue reading

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

Workshop dan Seminar Technopreneursip, UAJY.

Apa sih Technopreneursip itu?

Gimana sih caranya menjadi seorang Technopreneur?

Menurut Manuel Cereijo, Technopreneursip adalah sebuah ilmu yang menggabungkan technology dengan entrepreneurial skill. Entrepreneurial skill sendiri itu merupakan sebuah keterampilan yang dibutuhkan bagi Anda yang ingin menjadi entrepreneur.

Terdapat banyak Technopreneur didunia ini. Lihatlah sosok Bill Gates yang berhasil menjadikan Microsoft sebuah Super Star dalam bidangnya di seluruh dunia! Steve Jobs, menjadikan gadget ber-platform Apple mendarah daging diantara kalangan muda di seluruh dunia! Dan siapa yang tidak mengetahui perusahaan raksasa, Google, yang banyak meraih sukses dibeberapa produknya, e.g., Google Search Engine, Google Maps, YouTube dan Android yang merupakan hasil akuisisi dari perusahaan lain, dan masih banyak produk yang lainnya. Hal ini tidak lepas dari otak brilian Sergey Brin dan Larry Page. 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