Upload dan Cropping Image ala jQuery

Dalam website jejaring sosial seperti Facebook dan Twitter, biasanya terdapat fitur untuk upload sekaligus melakukan cropping (pemotongan) gambar sesuai dengan ukuran yang ditentukan user. Contohnya bisa dilihat pada gambar disamping kiri tulisan ini.


Tujuan fitur tersebut agar gambar/foto yang di upload bisa berukuran kecil dan tidak membebani website, karena gambar yang terlalu besar ukurannya akan memperlambat akses. Fitur tersebut bisa kita buat dengan bantuan plugin jQuery yang bernama imageAreaSelect, karena plugin ini dapat membantu web developer dalam hal cropping gambar dengan area seleksi berupa kotak atau persegi panjang. Adapun plugin imageAreaSelect bisa di download di http://odyniec.net/projects/imgareaselect/.


Mari kita mulai, namun sebelumnya siapkan dulu sebuah folder dengan nama crop, kemudian buat lagi 3 buah folder didalam folder crop dan beri nama foldernya upload, css, dan js. Untuk lebih jelasnya, silahkan lihat struktur isi folder crop pada gambar berikut:


folder-crop


Folder upload sebagai tempat penyimpanan gambar yang di upload maupun gambar yang sudah di crop. Folder css untuk meletakkan file imgareaselect-default.css dan 4 gambar bawaan dari plugin imageAreaSelect. Dan folder js untuk meletakkan file jquery.1.4.2.min.js dan file jquery.imgareaselect.pack.js yang berasal dari plugin imageAreaSelect.


Nantinya, ada dua file PHP yang akan kita buat, yaitu index.php dan gambar_ajax.php, dimana kedua file PHP tersebut akan menangani proses upload dan cropping image. Untuk mempersingkat tulisan pada posting ini, silahkan download source code-nya dulu melalui link berikut:


[ DOWNLOAD SOURCE CODE ]


Sekarang kita akan mengujinya di browser, ketikkan http://localhost/crop/. Untuk mencobanya, silahkan klik tombol Browse, lalu cari salah satu gambar di komputer Anda, kemudian klik tombol Submit, maka gambarnya akan tampil di browser. Selanjutnya, lakukan Select & Drag pada area gambar untuk melakukan proses cropping, kalau sudah dirasa pas croppingnya, klik tombol OK pada kotak dialog thumbnail yang ditampilkan, maka proses cropping-pun berjalan. Lihat gambar berikut:


proses-cropping
Catatan: nanti yang tersimpan di folder upload ada dua gambar, yaitu gambar dengan ukuran aslinya dan gambar thumbnail (hasil cropping). Lihat gambar berikut:


hasil-cropping


(Sumber Buku : Membuat Sendiri Website Pertemanan dengan PHP dan jQuery oleh Akhmad Dharma)

Baca Juga

65 Komentar

  • lokomedia lovers | 13 Oktober 2012 - 11:57:05 WIB

    Tutorial yang sangat ditunggu-tunggu nih...

    Jgn lupa dapatkan info terbaru lokomedia lewat fanpage facebook @cmslokomedia

  • Ando | 13 Oktober 2012 - 12:12:29 WIB

    keren tutorialnya., :)

  • nuris akbar | 13 Oktober 2012 - 14:30:43 WIB

    nunggu updatean cms lokomedia

    ^_^

  • Aryo | 13 Oktober 2012 - 14:42:51 WIB

    Buku dengan judul Membuat Sendiri Website Pertemanan dengan PHP dan jQuery oleh Akhmad Dharma), kapan terbinya?

  • Jack | 13 Oktober 2012 - 16:23:58 WIB

    Wah, ada buku baru lagi nih..kira-kira kapan terbitnya ya?

  • Humaidi | 13 Oktober 2012 - 19:50:59 WIB

    Ditunggu terbitan bukunya neh.....

  • fauzi | 13 Oktober 2012 - 22:58:48 WIB

    mantap ditunggu updetan cms lokomedia selanjutnya

  • iwan pijay | 13 Oktober 2012 - 23:40:08 WIB

    Keluar juga tutorial terbarunya,,, he,heee

  • dan# | 14 Oktober 2012 - 10:00:45 WIB

    wah mantep croppingnya..
    ngomong2, ane juga pake lokomedia.

    ni ane bagiin geratis template web ane, kunjungin aja
    http://bangwildan.web.id/statis-5-templatelokomedia .html

    dijamin gretongan ;)

  • dan# | 14 Oktober 2012 - 10:02:54 WIB

    #maap yang atas linknya kurang, yang bener yang ini :

    http://bangwildan.web.id/statis-5-templatelokomed ia.html

    dijamin gretongan ;)

  • dan# | 14 Oktober 2012 - 10:05:31 WIB

    bahh hebat sekarang link html gk bisa masuk.. link ane jadi ada spasinya..

    pokoknya main aja ke web ane ya gan ^_^

    disitu ada template enstein gratis

  • kharisma | 14 Oktober 2012 - 17:07:23 WIB

    Numpang Info,
    http://tripleji.com
    Web kerangka dasar dari tokolokomedia, tapi ane rubah dari tampilan dan script, tinggal 20% dari yang asli, ane kembangin pake bootstrap dan Jquery,Ajax

  • anwar romadhon | 14 Oktober 2012 - 23:47:31 WIB

    bisa tidak saya pesan buku "membuat sendiri web site pertemanan dengan PHP dan Jquery"..!!

  • anwar romadhon | 15 Oktober 2012 - 00:13:08 WIB

    Mas Lukman,boleh saya minta alamat email Anda..?

  • Download aplikasi web untuk TA dan Skripsi | 15 Oktober 2012 - 10:11:42 WIB

    mantap bermanfaat. maju terus lokomedia.

  • poeji | 15 Oktober 2012 - 15:04:27 WIB

    Waduh sayang sekali bukunya dah beredar duluan ya padahal mau buat seperti ini jg ^_^

    Buku yang wajib di beli nih.... ^_^

  • burhan bariton | 15 Oktober 2012 - 18:35:00 WIB

    Disini ada yang pernah kerjasama dengan Rizal Faizal? Ada yang pernah dirugikan?
    Silakan dikomen juragan

  • Mks | 15 Oktober 2012 - 19:04:27 WIB

    Bagi yang mengaku hebat web coba hack web gue kalau agan2 memang hebat web

  • andi | 15 Oktober 2012 - 22:31:29 WIB

    @burhan bariton knp dengan rizal faizal mas bro anda ada masalah dengan sa tuch org ?

  • Rizal Faizal | 16 Oktober 2012 - 03:04:26 WIB

    @burhan bariton: ngapain mas nanyain saya... sejak kapan mas ada kerjasama dengan saya?? selama ini sy gak pernah kerjasama dgn siapapun...jadi jangan main fitnah mas.. klo mo nanya ...tanya ke saya langsung telpon saya 021. 329 72 759.

  • Jogja | 16 Oktober 2012 - 03:29:43 WIB

    Kalau komen jangan saling fitnah sodara sodara, @Burhan Bariton hati hati mas kalau komen ya. OK bro..sip deh

  • palgunadi | 17 Oktober 2012 - 07:54:53 WIB

    Buku "Membuat Sendiri Website Pertemanan dengan PHP dan jQuery" statusnya masih dalam proses cetak atau dah siap didistribusikan, barangkali penerbit bisa ngasih tahu ....salam all lokomedia lover

  • lukman | 17 Oktober 2012 - 09:35:30 WIB

    @all: buku Membuat Sendiri Website Pertemanan dengan PHP dan jQuery masih dalam proses cetak, perkiraan terbit tanggal 20 Oktober 2012.

  • TEWEDE | 17 Oktober 2012 - 11:31:44 WIB

    Hasilnya kok gak sesuai dengan regtangle yang di setting ya?

  • Giri021 | 17 Oktober 2012 - 14:39:09 WIB

    Pak Lukman Kenapa gak buat buku mencakup CMS lokomedia versi terbaru, supaya yang pada baru nyimak ngerti arsitektur CMS,Struktur cms. Mungkin Lokomedia yang dulu ma sekarang udah berbeda. Semoga bisa di tindak lanjuti. Kitab suci CMS Lokomedia.

  • brother | 17 Oktober 2012 - 14:57:44 WIB

    broher lukman.... kpn tulisan ente terbit lagi...., kutunggu tulisanmu.. :)

  • rheanime | 17 Oktober 2012 - 16:50:58 WIB

    temen2 sekalian.. pernah gak website nya yang pakai engine lokomedia, sering kena spam gak ya..

  • cauza | 18 Oktober 2012 - 09:07:53 WIB

    Buku baru lagi nih...

  • dan# | 18 Oktober 2012 - 20:26:28 WIB

    @rheanime, kyknya gk pernah ada spam soalnya klo mau komen ada captcha.nya

    oia, di website ane ada template lokomedia bagus nih, ada2: hevaonline template, sama albert einstein template.

    bisa di download geratis...
    ditunggu komennya yah ^_^

  • rorik | 19 Oktober 2012 - 01:36:35 WIB

    mas lukman bukunya di tunggu terbitnya, sudah gak sabar ni mau beli bukunya.

  • ane | 19 Oktober 2012 - 08:05:51 WIB

    Dan@ web e biasa wae ngono mas di promosikne,....

  • adi | 20 Oktober 2012 - 08:25:34 WIB

    Pak Lukman bukunya hari sudah jadi belon ane mau beli,..

  • Lowongan Kerja Terbaru | 20 Oktober 2012 - 14:08:32 WIB

    Thx Pak Lukman, saat ini saya memang membutuhkan hal ini untuk dimasukkan ke website saya.

  • lukman | 20 Oktober 2012 - 21:14:09 WIB

    @brother,Giri021 : terimakasih atas ide dan sarannya, itu sangat berarti buat saya, semoga akhir tahun 2012 ini saya akan kembali menulis lagi.

  • cah gaptek | 21 Oktober 2012 - 11:08:46 WIB

    buku untuk membuat pertemanan udah keluar belum

  • bayu | 21 Oktober 2012 - 20:25:49 WIB

    Pak Lukman bukunya udah keluar belom,..

  • dan | 22 Oktober 2012 - 08:55:44 WIB

    pak Lukman bukunya terbitnya tgl berapa,katanya tgl 20 oktober sekarang sudah lewat 2 hari mohon mohon info nya pak biyar kita gk nunggu & jelas,.mksih,.

  • lukman | 22 Oktober 2012 - 09:46:48 WIB

    @all : buku Membuat Sendiri Website Pertemanan dengan PHP dan jQuery sudah terbit hari ini tanggal 22 Oktober 2012, sudah saya posting sinopsisnya di website ini.

  • lirik lenka ost.Win 8 | 10 November 2012 - 21:37:33 WIB

    mantap ni infonya

  • wisnu | 14 November 2012 - 21:25:39 WIB

    lokomedia the best dah...tapi aku rada kecewa, di gramedia samarinda gk semua buku lokomedia ada. terus pembelian online di www.bukulokomedia.com juga kok gak bisa-bisa gitu...

  • Berita Karir Lowongan Kerja | 24 November 2012 - 14:39:19 WIB

    Thx atas ilmunya Pak Lukman

  • Arie Wardhana | 26 November 2012 - 13:09:31 WIB

    keren, tapi kalo tutorialnya ditamabah: tag image, tambah keren lagi... :-)

  • BAGI ILMU | 27 November 2012 - 07:39:07 WIB

    WAHHHH KEREN

  • term papers | 27 November 2012 - 17:23:50 WIB

    Lifting the financial burden means there would be less pressure to overcharge passengers. So, the public get an end to overcharging and increasing numbers of owner drivers who take pride in their clean and well maintained autos, which are now their personal assets.

  • moko | 11 Desember 2012 - 22:38:06 WIB

    keren... , kalau bikin watermark image.. khusus cms loko ada tutornya gan gan..,

  • Lokomediers | 13 Desember 2012 - 20:04:45 WIB

    Teman2 cms lokomedia, saya mau tanya dan minta bantuannya nih. Kenapa ya saya tdk bisa inpur dan edit berita/artikel? Tampilan kesalahannya seperti dbwh ini:

    Forbidden

    You don't have permission to access /lokomedia/modul/mod_berita/aksi_berita.php on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


    Mohon bantuannya. Terima kasih...

  • college essay services | 17 Desember 2012 - 15:30:18 WIB

    The level of debt and risk was concealed by the unintelligibility, but also by the secrecy and opacity, of many banking practices.

  • rushessay | 18 Desember 2012 - 15:05:39 WIB

    I agree it's frustrating trying to upload something.

  • Survival Equipment | 19 Desember 2012 - 09:32:51 WIB

    Another prominent force in this Industry is Insurance. They provide a large portion of the revenue into the industry so they cannot be ignored, but they are of course large corporations with corporate processes and corporate systems, so they are culturally vastly different to the repairers.

  • informasi bisnis | 19 Desember 2012 - 20:34:13 WIB

    mantab tutorny. sukses slalu

  • informasi bisnis | 19 Desember 2012 - 20:36:48 WIB

    mantab tutorny. sukses slalu

  • jasa desain murah | 22 Desember 2012 - 02:44:49 WIB

    sudah dicoba dan hasilnya luar biasa
    salam kenal pak

  • Lokomedia Fans | 27 Desember 2012 - 07:02:00 WIB

    Asyik langsung saya coba nih boss.

  • rahasia hidup sehat | 31 Desember 2012 - 11:49:21 WIB

    cara yang sederhana dengan hasil yang memuaskan :)

  • sekolah belajar forex fbs indonesia | 13 Februari 2013 - 17:35:35 WIB

    Terima Kasih pak Lukman, update terus lokomedia

  • bangwil | 18 Februari 2013 - 15:09:53 WIB

    template lokomedia gratis nih download di website gue:

    www.bangwildan.web.id

    template terbaru metroui, kyk windows 8

  • kafy | 24 Februari 2013 - 18:12:47 WIB

    1000 jempol buat www.bukulokomedia.com.,

  • sinergi | 05 April 2013 - 20:32:29 WIB

    mantap bukunya, di tunggu yah

  • meika kurniawan | 05 April 2013 - 22:35:21 WIB

    maaff pak luk
    ini kok yang crop yang kecil namanya hanya itu trus?

  • Karla | 13 September 2013 - 17:50:33 WIB

    makin lengkap aja buku dari lokomedia
    semangat terus dalam berbagi ilmu pengetahuan :)

  • EXPOSEinBERITA | 07 Januari 2014 - 14:49:01 WIB

    kalau untuk blogspot agar bisa langsung otomatis cropping giman mas?

  • dunia remaja | 12 September 2014 - 11:03:42 WIB

    semakil komplit aja dah buku lokomedia ini
    salam sukses semuga makin majua

  • Smartphone Android | 20 September 2014 - 23:23:31 WIB

    banyak referensi yang saya dapatkan dari lokomedia terutama masalah pemprograman. maju terus pak Lukman. Buku baru ditunggu..

  • rizki | 11 Oktober 2014 - 10:41:23 WIB

    saya sudah coba, tapi malah muncul

    Notice: Undefined variable: gambar in G:\xampp\htdocs\crop\index.php on line 77. mohon penjelasannya

  • ENDANG | 03 Februari 2015 - 20:49:03 WIB

    Yang tanya seputar tutorial malah gak di balas...sabar mas @RIZKI..ilmu mah datang dari mana aja...