APLIKASI PHOTO EDITOR BERBASIS WEB (PICFIIX) SEBAGAI ALTERNATIF APLIKASI BERBASIS DESKTOP ABSTRAK

Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III Yogyakarta, 3 November 2012

ISSN: 1979-911X

APLIKASI PHOTO EDITOR BERBASIS WEB (PICFIIX) SEBAGAI ALTERNATIF APLIKASI BERBASIS DESKTOP Ahmad Oriza Sahputra1), Andi Susilo2), Tiwi Nurhastuti3) Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Respati Indonesia Jl. Bambu Apus I No. 3 Cipayung Jakarta Timur E-mail: [email protected], [email protected], [email protected]

ABSTRAK Saat ini aplikasi pengolah foto berbasis desktop dengan konsentrasi fitur tertentu, sederhana, free (non lisensi/gratis), dan bersifat instant editing sulit dijumpai. Kebanyakan aplikasi photo editor berbasis desktop membutuhkan pembelajaran yang relatif rumit dikarenakan banyaknya tools dengan berbagai fungsinya yang harus dipelajari dengan seksama. Oleh karena itu diperlukan suatu terobosan baru sebagai alternatif pemecahan masalah tersebut sehingga dapat memberi peluang pengguna yang sangat awam dapat mengolah foto secara profesional. Picfiix merupakan aplikasi photo editor yang berjalan di lingkungan web (tidak perlu ada instalasi di sisi client). Arsitektur aplikasi didesain sederhana, tanpa memerlukan proses pendaftaran maupun autentikasi. Fitur yang dikembangkan dalam aplikasi diantaranya efek instan, perbaikan kualitas (kecerahan, kontras, dan noise), pengubahan ukuran, serta stiker. Metodologi System Development Life Cycle (SDLC) dengan pendekatan prototyping diterapkan pada pembuatannya. Bahasa pemodelan menggunakan Unified Modeling Languange (UML). Berdasarkan hasil pengujian, masing-masing fitur rata-rata berhasil dijalankan sesuai rencana. Picfiix dapat menjadi salah satu alternatif selain aplikasi photo editor berbasis desktop untuk keperluan yang merujuk kepada permasalahan yang telah dipaparkan sebelumnya. Adapun beberapa kekurangan yang harus diperbaiki kedepannya, diantaranya fitur stiker yang belum mampu mengolah citra digital berkompresi JPG dan tampilan aplikasi yang sedikit berbeda pada setiap perambah (Optimalisasi CSS). Kata kunci: Picfiix, Prototyping, Citra Digital, Photo Editor, UML

PENDAHULUAN Perkembangan teknologi saat ini begitu luar biasa. Mulai dari dewasa sampai anak-anak telah menggunakan perangkat teknologi dalam kehidupannya. Penerapan teknologi dalam segala aspek kehidupan menyebabkan manusia hidup dengan lebih efektif dan efisien. Salah satu contohnya adalah penggunaan sarana Internet. Informasi yang terkandung dalam jaringan Internet memicu munculnya kehidupan di luar alam nyata, yaitu dunia virtual atau dunia maya, dimana manusia satu dan yang lainnya dapat saling berkolaborasi atau sekedar berbagi informasi tentang kehidupan mulai dari pembahasan hiburan sampai bisnis. Data statistik terakhir dari situs berikut (http://www.Internetworldstats.com), pengguna Internet di dunia mencapai lebih dari 6 milyar. Lihat tabel 1. Tabel 1 Pengguna Internet Dunia

B-388


ISSN: 1979-911X

Sampai saat ini negara Indonesia termasuk ke dalam salah satu negara dengan pengguna Internet terbanyak di Asia yang menempati posisi keempat. Data dapat dilihat pada Gambar 1.

Gambar 1 Pengguna Internet Asia Website (http://www.wikipedia.com) adalah sejumlah halaman web yang memiliki topik saling terkait, terkadang disertai pula citra digital, bahkan video. Website ditempatkan di dalam suatu server web yang dapat diakses melalui alamat Uniform Resource Locator (URL) oleh para pengguna melalui perambah. Jika dilihat dari sisi pengembangan suatu website generasi 3.0 saat ini, perangkat lunak seperti perambah, bahasa pemrograman, framework, dan plugin ditujukan untuk memfasilitasi pembangunan dan penggunaan yang sangat bervariasi dan canggih. Salah satu implikasinya adalah memberi kemudahan para pengembang untuk membangun website yang lebih kaya akan fitur dengan “cita rasa” aplikasi desktop. Dewasa ini website tidak hanya dimanfaatkan untuk mengolah data dalam suatu Database Management System (DBMS), seperti sistem informasi, forum online, blog, atau profil perusahaan, tetapi bisa dimanfaatkan untuk mengolah berkas layaknya aplikasi desktop, seperti spreadsheet, word processor, presentation software, video chat, photo editor dan sebagainya. Photo editor, aplikasi ini pada umumnya telah banyak dikembangkan untuk lingkungan desktop untuk dijalankan dalam Personal Computer (PC). Aplikasi ini khusus dirancang untuk menangani berkas citra digital yang mengimplementasikan teknik pengolahan citra. Aplikasi secara umum bertujuan untuk memberi efek pada citra digital, menambahkan objek baru untuk memberi variasi pada citra digital, menciptakan objek baru, mengubah ukuran citra digital, dan sebagainya. Tingkat kerumitan pengembangan akan menghasilkan fitur yang beragam, mulai dari photo editing sederhana sampai yang rumit. Saat ini perangkat lunak atau aplikasi photo editor berbasis desktop dengan konsentrasi fitur tertentu seperti instant editing yang bersifat sederhana, sangat minim dijumpai. Kebanyakan aplikasi photo editor berbasis desktop membutuhkan pembelajaran yang relatif rumit, dikarenakan sangat kaya akan fitur yang harus dipelajari dengan seksama, ditambah lagi dengan biaya lisensi yang relatif mahal. Aplikasi photo editor berbasis desktop juga berpeluang bermasalah dalam hal pengaksesan, aplikasi hanya dapat diakses di satu komputer, tidak dapat diakses dimana dan kapan saja. Tentunya ini menjadi masalah baru dalam hal biaya. Dengan kata lain tidak fleksibel karena hanya terpasang di satu sumber daya. Salah satu cara untuk mengatasi permasalahan di atas adalah pengembangan aplikasi photo editor berbasis web (non desktop). Alasan mengapa harus dibangun di atas lingkungan web karena aplikasi berbasis web mendukung konsep sederhana yaitu aplikasi dapat didistribusikan secara cepat via Internet dan aplikasi tidak memerlukan instalasi khusus oleh pengguna, sehingga dapat menjadi nilai tambah. Pengguna dapat mengakses aplikasi kapan saja dan dimana saja dengan syarat harus terkoneksi Internet. Latar belakang itulah yang menjadi pemicu dibuatnya aplikasi Picfiix dengan melihat peluang yang ada sehingga menghasilkan ide sederhana yang diharapkan mampu tepat mengatasi masalah. B-389


ISSN: 1979-911X

Nama atau istilah “Picfiix” (Pic-fiix) diambil dari dua kata yaitu Picture (gambar) dan fix (memperbaiki). Pic merupakan potongan kata dari Picture sedangkan fiix merupakan kata fix yang diberi variasi tambahan huruf i. Sehingga secara keseluruhan mempunyai arti ‘memperbaiki gambar’. METODE Secara umum metodologi pengembangan perangkat lunak dalam pembuatan Picfiix adalah System Development Life Cycle (SDLC). Adapun teknik pengumpulan data yang digunakan yaitu: 1. Observasi Metode ini dilaksanakan dengan cara melakukan pengamatan langsung terhadap kendala-kendala yang dihadapi dalam pengembangan aplikasi. 2. Wawancara Metode ini melibatkan pihak yang biasa menggunakan aplikasi photo editor, baik dari sisi user interface yang baik maupun cara penggunaan fitur. 3. Studi literatur Metode dilakukan dengan cara mendapatkan informasi dan mengumpulkan data dengan melihat sumber kepustakaan seperti situs web, jurnal ilmiah, buku-buku, dan sebagainya yang tentunya dapat dipertanggung jawabkan untuk dijadikan bahan referensi dalam pembuatan aplikasi. PEMBAHASAN Picfiix merupakan sebuah aplikasi photo editor sederhana berbasis web untuk keperluan instant editing yang dibangun untuk menjadi alternatif selain aplikasi photo editor berbasis desktop. Gambar 2 menunjukan tampilan antarmuka halaman awal Picfiix yang diakses melalui perambah Google Chrome v22.0.1.

Gambar 2 Screenshot Homepage Picfiix Fitur-fitur yang terdapat dalam Picfiix adalah sebagai berikut: 1. Pemberian efek instan, secara teoritis adalah memberikan efek perubahan seketika terhadap citra digital dengan memanipulasi pixel pada gambar tersebut dengan fungsi tertentu, tanpa melibatkan konfigurasi dari pengguna aplikasi karena nilai dan pengaturan perubahan telah ditentukan oleh sistem. Ada 10 istilah efek instan yang diterapkan diantaranya Clarity, Cross Process, Jarques, Nostalgia, Grungy, Hazy Days, Lomography, Old Boot, Pinhole dan Love. 2. Fitur perbaikan kualitas citra digital (Image Enhancement), tujuan dari perbaikan kualitas citra adalah untuk melakukan pemrosesan terhadap citra agar hasilnya mempunyai kualitas relatif lebih baik dari citra awal untuk aplikasi tertentu. Ada 3 penerapan teknik perbaikan kualitas yang digunakan dalam Picfiix diantaranya pengaturan brightness, contrast, dan noise. 3. Fitur pengubahan ukuran, seperti pada umumnya fitur ini digunakan untuk mengubah ukuran gambar yang besar menjadi lebih kecil dan sebaliknya. Dalam perancangannya juga ditambahkan suatu fitur perhitungan lebar otomatis yang berhaluan pada ukuran gambar lama. B-390


ISSN: 1979-911X

4. Fitur stiker, cara kerja fitur ini dapat dianalogikan dengan kegiatan menempel stiker pada umumnya. Dengan tujuan menambahkan variasi pada suatu objek. Dalam kasus ini, pengguna Picfiix dapat menempelkan lebih dari satu objek pada gambar yang mereka unggah dan sunting. Adapun kategori yang ada adalah stiker objek bebas (emoticon) dan stiker objek bingkai. Diagram Activity Diagram aktivitas menggambarkan aktifitas sebuah sistem atau proses bisnis. Aktifitas sistem atau proses bisnis dalam aplikasi Picfiix hanya melibatkan satu aktor, yaitu pengguna aplikasi itu sendiri. Pengguna yang dimaksud bisa kita katakan sebagai pengguna akhir. Picfiix tidak menyediakan proses autentikasi ataupun pendaftaran dan hanya fokus terhadap penyediaan fitur photo editing yang dapat digunakan secara bebas dan praktis.

Gambar 3 Diagram Activity Diagram Use Case Use case diagram berfungsi untuk menggambarkan fungsionalitas yang diharapkan dari sebuah sistem. Sebuah use case merepresentasikan sebuah interaksi antara aktor dengan sistem. Adapun diagram use case dari Picfiix terlihat pada Gambar 4.

B-391


ISSN: 1979-911X

Gambar 4 Diagram Use Case Picfiix Akses dan Manajemen Data Untuk saat ini Picfiix fokus terhadap pengolahan berkas citra digital yang disajikan dalam lingkungan situs web, oleh karena itu dalam pengembangannya tidak membutuhkan struktur database yang besar. Picfiix hanya membutuhkan satu tabel untuk meyimpan data. Pengolahannya menggunakan Structured Query Language (SQL) dengan konsep relasional. Data tersebut adalah atribut-atribut yang mendeskripsikan gambar yang berhasil diunggah oleh pengguna, diantaranya : a. lbr_pic int (4) : data ukuran lebar gambar, maksimal 4 digit. b. tgl_upload date : data tanggal gambar diunggah bertipe date. c. id int (10) : data primary key dari gambar dengan ukuran panjang maksimal 10 nomor. d. nama_pic char (30) : data nama gambar dengan ukuran panjang maksimal 30 karakter e. tgi_pic int (4) : data ukuran tinggi gambar, maksimal 4 digit Program Efek Instan Program efek instan aplikasi Picfiix tidak dibuat dari nol, melainkan memanfaatkan pustaka Javascript Caman dan fitur tag canvas HTML5 yang dapat mengubah gambar yang dipanggil dalam suatu website menjadi gambar yang dapat dimanipulasi pixel-nya, sehingga pengolahan dapat dimungkinkan dijalankan di atas lingkungan web secara singkron. Untuk membuat suatu fungsi efek instan yang dapat diterapkan untuk memanipulasi pixel, dilakukan dengan cara membuat dan mendaftarkan (registration) gabungan fungsi-fungsi yang telah disediakan dalam pustaka Caman menjadi suatu fungsi baru dengan mengikuti kaidah pemrograman Javascript. Berikut ini contoh syntax pendaftaran yang diterapkan: Caman.Filter.register("love",function(){ this.brightness(5); this.exposure(8); this.contrast(4); this.colorize('#c42007',30); this.vibrance(50); return this.gamma(1.3); });

B-392


ISSN: 1979-911X

Setelah melakukan pendaftaran gabungan fungsi, selanjutnya adalah menerapkannya ke dalam kode sumber program Picfiix dengan cara memanggil fungsi filter tersebut. Nama fungsi filter yang menjadi pembeda saat fungsi efek instan dipanggil. Contoh nama tersebut dapat dilihat di dalam kode sumber di atas dengan huruf yang bercetak tebal dengan tambahan garis bawah. Secara utuh, untuk menerapkan fungsi efek instan kedalam program, dilakukan langkah sebagai berikut: 1. Mendaftarkan fungsi gabungan ke dalam pustaka Caman. 2. Menandai gambar yang dipanggil ke dalam website, yaitu gambar pengguna aplikasi dengan cara menambahkan identitas unik ke dalam tag HTML-nya yang sudah berbentuk canvas. 3. Membuat antarmuka, seperti tombol-tombol dengan label masing-masing nama fungsi efek instan 4. Menambahkan event handler ke dalam tombol. Ketika tombol diklik, maka fungsi sesuai label efek instan akan dijalankan untuk memanipulasi pixel gambar pengguna. 5. Menambahkan variasi dengan membuat suatu efek loading ketika proses filter berjalan. Efek loading dilakukan dengan memanggil animasi gambar terkompresi GIF disertai efek CSS Program Perbaikan Kualitas Masih dengan memanfaatkan fitur canvas HTML dan Caman, gambar pengguna dapat dimungkinkan untuk dimanipulasi nilai masing-masing pixel-nya dengan teknik Image Enhancing. Untuk fitur yang satu ini penulis melakukan langkah sebagai berikut: 1. Menandai gambar yang dipanggil kedalam website, yaitu gambar pengguna aplikasi dengan cara menambahkan identitas unik ke dalam tag HTML-nya yang sudah berbentuk canvas. 2. Membuat formulir yang berisi komponen seperti tombol-tombol, label dan slider dengan label masing-masing fungsi perbaikan kualitas diantaranya kecerahan, kontras, dan noise. 3. Menambahkan event handler kedalam tombol. Ketika tombol diklik, maka fungsi sesuai label image enhancing akan dijalankan untuk memanipulasi pixel gambar pengguna. Program Pengubah Ukuran Pembuatan suatu fitur pengubah ukuran gambar. Dilakukan dengan cara memanfaatkan kelas (class) berbasis PHP untuk mengolah grafis. Berikut ini algoritma untuk membuat program pengubah ukuran tersebut: 1. Mengambil nilai tinggi dan lebar gambar baru yang diinginkan pengguna, dengan cara mengambil POST data dari formulir telah dibuat. 2. Jika data masih kosong maka tampilkan pesan kesalahan, untuk memaksimalkan fungsi validasi data, menghindari galat program. 3. Jika data ada, maka assign data yang diterima kedalam variabel baru. 4. Perbaharui database tinggi dan lebar gambar pengguna dengan ukuran baru. 5. Buat objek resize gambar, lalu masukan parameternya dengan ukuran tinggi dan lebar baru. 6. Eksekusi objek resize gambar dan kemudian simpan hasil pemrosesan kedalam resource dimana gambar awal disimpan. 7. Sisipkan perintah redirect ke halaman editor kembali dan panggil gambar baru yang telah diubah ukurannya Cara yang telah dipaparkan adalah algoritma yang dilakukan jika ukuran tinggi dan lebar baru ditentukan oleh pengguna, sedangkan untuk perhitungan lebar otomatis dengan tujuan proporsionalitas gambar baru algoritmanya sedikit berbeda. Sebelum mengambil POST data dari formulir, ukuran lebar akan dihitung otomatis dengan rumus perbandingan. Modifikasi dilakukan dengan menambahkan satu komponen tombol yang telah disisipkan perintah Javascript untuk membangkitkan ukuran lebar baru. Berikut ini kode sumber event handler tombol tersebut: $("#tbl_auto_lbr").click(function(){ t1=/*mengambil tinggi lama*/ l1=/*mengambil lebar lama*/ t2=$("#tinggi_br").val();/*mengambil tinggi yg diinginkan*/ /*generate lebar baru dgn teknik perbandingan*/ l2 = t2 * l1; l2 = l2 / t1; /*masukan hasil ke input text lebar*/ $("#lebar_br").val(l2); });

B-393


ISSN: 1979-911X

Program Stiker Fitur stiker banyak menggunakan pustaka Jquery dan pustaka grafis PHP. Objek stiker dalam fitur ini memanfatkan gambar yang mendukung efek transparansi seperti gambar terkompresi PNG. Berikut ini langkah-langkah untuk membuat program stiker tersebut: 1. Membuat formulir HTML seperti biasanya, kemudian mengisi formulir tersebut dengan memanggil gambar yang telah disiapkan. Masing-masing gambar yang dipanggil dilengkapi dengan atribut kelas HTML untuk menandai bahwa gambar tersebut adalah gambar stiker yang akan dimanipulasi. 2. Membangun program untuk implementasi efek draggrable, resizable dan droppable dengan pustaka Jquery User Interface. Efek draggrable dan resizable ditujukan untuk gambar yang menjadi stiker, kemudian efek droppable ditujukan untuk gambar pengguna yang akan ditempeli oleh stiker. 3. Membangun formulir perotasi stiker dengan dilengkapi slider. Slider dilengkapi dengan event handler. Ketika digeser, stiker akan dirotasi sesuai nilai masukan slider yang memungkinkan rotasi 360 derajat. Setiap objek stiker memiliki perotasi sendiri. 4. Setelah semua formulir yang diperlukan dan persiapan efek telah rampung maka selanjutnya mempersiapkan tombol yang ditampilkan ketika stiker di drop kedalam gambar pengguna. Tombol tersebut berisi event handler untuk menggabungkan objek menjadi satu gambar. Setelah melakukan langkah di atas, dilanjutkan dengan membangun program untuk menangani penggabungan gambar yang dijalankan ketika tombol diklik. Berikut ini algoritma penggabungan gambar yang dibangun : 1. Hitung jumlah objek stiker yang di-drop. 2. Ambil semua data gambar baik stiker maupun gambar pengguna. 3. Konversi data gambar menjadi data Javascript Object Notation (JSON) dengan pustaka JSON Jquery untuk memungkinkan pengiriman gambar menuju berkas PHP di sisi server. 4. Terima data JSON gambar yang dikirim via komputer client. 5. Bangun background gambar (gambar pengguna) yang menjadi induk dari penyatuan gambar stiker dengan fungsi imagecreatefrompng yang diambil dari resource dimana gambar pengguna disimpan. 6. Bangkitkan gambar dari data diterima (data JSON) dengan menghitung koordinatnya untuk menentukan posisi stiker. 7. Gabungkan kedua gambar dan bangkitkan menjadi gambar baru dengan fungsi imagejpeg KESIMPULAN Aplikasi photo editor berbasis web (Picfiix) dapat menjadi salah satu alternatif selain aplikasi photo editor berbasis desktop untuk keperluan instant editing, sederhana, bebas, fleksibel dengan konsentrasi fitur tertentu yang mudah dipelajari berdasarkan hasil pengujian masing-masing fitur yang rata-rata berhasil dijalankan sesuai rencana pengembangan yang ditujukan untuk menyelesaikan permasalahan yang ada. DAFTAR PUSTAKA Adler, Mark, et al. (1996). “Portable Network Graphics Specification”. Massachusetts Institute of Technology, Massachusetts. Andi, Gutmans, et al. (2005). “PHP5 Power Programming”. Prentice Hall, Indianapolis. Bertalya. (2012). “Perbaikan Kualitas Citra”. Universitas Gunadarma, Jakarta. Chaffer, Jonathan, et al. (2011). “Learning Jquery”. Packt Publishing, Birmingham. Cofield, Melanie (2005). “Digital Imaging Basics”. University of Texas, Austin. Danny, Goodman, et al. (2004). “Javascript Bible”. Wiley, Indianapolis. Dennis, Alan, et al. (2005). “Systems Analysis and Design with UML Version 2.0”. Wiley, Indianapolis. B-394


ISSN: 1979-911X

Dharwiyanti, Sri. (2003). “Pengantar Unified Modelling Language”. IlmuKomputer.com, Jakarta. Meyer, Eric A. (2000). “Cascading Style Sheets”. O’Reilly, Indianapolis. Paul, Haine. (2006). “HTML Mastery (Semantics, Standards, and Styling)”. Apress, California. Tympanus, 2010, Tutorial Algoritma Penggabungan Gambar dengan PHP dan Javascript, 3 Juli 2012, http://tympanus.net/codrops/2010/03/22/interactive-image-vamp-up-with-jquery-css3-and-php/ Ryan LeFevre, 2012, Canvas Manipulation, 12 Juli 2012, http://camanjs.com

B-395

APLIKASI PHOTO EDITOR BERBASIS WEB (PICFIIX) SEBAGAI ALTERNATIF APLIKASI BERBASIS DESKTOP ABSTRAK

Recommend Documents