Pada kesempatan kali ini saya akan menjelaskan cara upload dan crop gambar dengan Jquery. Sebelum menjelaskan lebih jauh, apa itu Jquery ? Jquery adalah Framework atau kerangka kerja JavaScript yang di mana untuk membantu memudahkan dalam penggunaan JavaScript. Jquery membutuhkan banyak tugas umum yang memerlukan banyak baris kode JavaScript untuk di selesaikan, dan membungkus nya menjadi satu metode yang dapat di hubungkan dengan satu baris kode, selain itu JQuery juga menyederhanakan banyak hal yang rumit dari JavaScript, seperti pemanggilan AJAX dan manipulasi DOM.

Berikut beberapa fitur yang tersedia di Jquery :
  • HTML/DOM manipulasi
  • CSS manipulasi
  • HTML event dan methods
  • Effects dan animasi
  • AJAX
  • Utilities

Kenapa harus Jquery ?

Diluar sana terdapat berbagai macam kerangka kerja JavaScript, namun untuk saat ini jQuery paling populer karena penggunaan nya yang tidak rumit dan dapat terus berkembang seiring waktu kedepan nya dan banyak perusahaan-perusahaan besar di Web menggunakan jQuery, seperti:

  • Microsoft
  • IBM
  • Google
  • dll

Dalam penjelasan ini saya menggunakan beberapa library, diantaranya:

  1. Bootstrap : yang akan digunakan untuk membuat layout atau template dan form halaman.
  2. Form Ajax : yang akan digunakan untuk menangani submit Ajax form.
  3. Library jQuery : merupakan library dasar untuk mendukung Plugin jQuery lainnya.
  4. Plugin Imgareaselect : yang akan digunakan untuk menentukan koordinasi crop dan crop gambar.
Berikut tahapan nya:
  1. Download terlebih dahulu file tersebut, extract dan letakan folder lib sejajar dengan file index.php
  2. Buatlah satu buah file dengan nama index.php, dimana file ini nantinya adalah file utama yang akan menampilkan layout HTML, beserta form profil tersebut, ketikan kode seperti di bawah ini:

  1. Masih di file yang sama, untuk membuat form profil, tambahkan seperti kode di bawah ini:

Untuk pembahasan selanjutnya, akan saya jelaskan cara upload dan crop gambar dengan jQuery part-2 di sesi berikutnya, semoga bermanfaat.