Aplikasi Photo Editor Berbasis Web Picfi
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: ahmadoriza@gmail.com, as@fti.urindo.ac.id, tiwi.nurhastuti@fti.urindo.ac.id
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
1
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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.
2
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
Latar belakang itulah yang menjadi pemicu dibuatnya aplikasi Picfiix dengan melihat peluang yang
ada sehingga menghasilkan ide sederhana yang diharapkan mampu tepat mengatasi masalah. 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’.
Metodologi Penelitian
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.
Hasil dan Pembahasan Penelitian
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.
3
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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.
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
4
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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.
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.
b.
c.
d.
e.
lbr_pic int (4) : data ukuran lebar gambar, maksimal 4 digit.
tgl_upload date : data tanggal gambar diunggah bertipe date.
id int (10) : data primary key dari gambar dengan ukuran panjang maksimal 10 nomor.
nama_pic char (30) : data nama gambar dengan ukuran panjang maksimal 30 karakter
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:
5
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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);
});
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.
6
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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);
});
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.
7
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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.
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
8
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: ahmadoriza@gmail.com, as@fti.urindo.ac.id, tiwi.nurhastuti@fti.urindo.ac.id
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
1
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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.
2
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
Latar belakang itulah yang menjadi pemicu dibuatnya aplikasi Picfiix dengan melihat peluang yang
ada sehingga menghasilkan ide sederhana yang diharapkan mampu tepat mengatasi masalah. 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’.
Metodologi Penelitian
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.
Hasil dan Pembahasan Penelitian
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.
3
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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.
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
4
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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.
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.
b.
c.
d.
e.
lbr_pic int (4) : data ukuran lebar gambar, maksimal 4 digit.
tgl_upload date : data tanggal gambar diunggah bertipe date.
id int (10) : data primary key dari gambar dengan ukuran panjang maksimal 10 nomor.
nama_pic char (30) : data nama gambar dengan ukuran panjang maksimal 30 karakter
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:
5
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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);
});
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.
6
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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);
});
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.
7
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
ISSN: 1979-911X
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.
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
8