APLIKASI PHOTO EDITOR BERBASIS WEB PICFI (1)
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
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.
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
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
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.
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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
Prosiding Seminar Nasional Aplikasi Sains & Teknologi (SNAST) Periode III
Yogyakarta, 3 November 2012
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