RANCANG BANGUN WEBSITE ONLINE STORE MENGGUNAKAN TEKNIK“PHOTO SPIN 360° ROTATION” (Studi Kasus: Cova Computer) Diva Mahendra1) 1) Program Studi DIV Komputer Multimedia STIKOM Surabaya Email:
[email protected]
abstract WWW (World Wide Web) or better known by the acronym "Website" is an information space in which these resources are useful identified by global identifiers called Uniform Resource Identifier (URI) or also better known as the more popular Uniform Resource Locator (URL). WWW is often considered synonymous with the Internet as a whole, despite the fact that the WWW is just part of the internet (Adhi and Andy, 2005). WWW is also known as internet sites. The Internet is a user interface with a user other than to communicate, the Internet has its benefits for transaction processing. Convenience in the transaction process, making the buyer / buyers prefer to use the facilities instant and accurate, with an online shop / online store. The online store is a form of electronic commerce, where consumers buy goods or services directly from vendors through the Internet without an intermediary service (Ali, 2008). To open an online store with our fast and stable access, use AJAX programming techniques. AJAX (Asynchronouse JavaScript And XML) is a web-based programming techniques to create web applications more interactive and dynamic. There are several advantages of using AJAX, among other more interactive (high interactivity), update the data just reload the relevant page (High Usability) and faster (High Speed). Photo Spin 360 ° Rotation (Scott, 2010: 219) is a technique that rotates images of the object image, and is usually carried out in full 360 degrees, with the last frame looping toward the beginning of the first frame to be used continuously rotating effect. Photo spin 360 ° rotation can be combined with a way of making use of "ajax tool". Online store website created with the technique of "ajax tool", can facilitate the process of making a 360 ° spin rotation photo as playback of the left-right direction and magnification of objects more easily. Asynchronouse Ajax tool uses the data transfer (the HTTP request) between browser and web server, which allows web pages to request small bits of information or the entire server. Technique "ajax tool" to make Internet applications into smaller, faster and more user-friendly, can indirectly make the user more interested to see goods and even purchase goods. So that the specific instructional objectives can be successfully implemented. Keyword: Website, Online Store, Photo Spin 360 Degress Rotation, Ajax Tool
Internet adalah singkatan dari Interconnected Network. Internet merupakan sebuah sistem komunikasi yang mampu menghubungkan jaringan-jaringan komputer di seluruh dunia. Internet erat hubungannya dengan website, seperti yang diperjelas dalam sebuah buku kepustakaan (Adhi dan Andy, 2005) dijelaskan, “WWW (World Wide Web) atau lebih di
global yang disebut Uniform Resource Identifier
kenal singkatannya “Website” adalah suatu
internet.”
ruang informasi di mana sumber-sumber daya
“Bahwa video klip adalah bentuk komunikasi audio visual yang maknanya
yang berguna diidentifikasi oleh pengenal
(URI) atau juga lebih dikenal dengan istilah yang lebih popular Uniform Resource Locator (URL). WWW sering dianggap sama dengan internet sebenarnya
secara WWW
keseluruhan, hanyalah
walaupun bagian
dari
internet. WWW juga dikenal dengan istilah situs
1
diciptakan dengan membawa informasi seperti musik, lirik dan gambar yang bergerak.” Dari penjelasan tentang website dan internet di atas, dapat disimpulkan bahwa website dan internet saling berhubungan. Terlebih lagi, website lebih banyak dipergunakan setiap manusia hampir lebih dari 100 juta jiwa yang melakukan akses dan berkomunikasi 1 dengan yang lain. Oleh karena itu website sangat erat hubungannya dengan kehidupan sehari-hari terutam dalam hal karir dan berbisnis. Banyaknya bisnis online yang dikelola mulai dari perusahaan besar, seperti operator cellular, makanan, minuman, bahkan jual beli online. Kegiatan jual beli online merupakan proses bisnis ke konsumen atau transaksi online. Dalam buku elektronik (Anang, 2010) juga dijelaskan lebih lanjut bahwa, kegiatan jual beli online merupakan bentuk komunikasi baru yang tidak memerlukan komunikasi tatap muka secara langsung, melainkan dapat dilakukan secara terpisah dari dan ke seluruh dunia melalui media notebook, komputer, atau handphone yang tersambung dengan layanan akses internet. Online store (toko online) sekarang menjadi media perdagangan online/bisnis yang digunakan oleh banyak perusahaan distributor barang seperti perabotan rumah tangga, elektronik, telekomunikasi, dan teknologi. Salah satu contoh perusahaan yang digunakan sebagai subjek penelitian adalah Cova Computer. Cova Computer merupakan sebuah perusahaan bergerak di bidang jual-beli perangkat IT/Komputer dan Gadget. Cova Computer memiliki latar belakang perusahaan yang berasas kekeluargaan dan sudah berkembang selama 16 tahun lamanya, sehingga diperlukan suatu inovasi terbaru untuk mengembangkan usaha sebuah perusahaan, supaya icon atau nama perusahaan dapat dikenal oleh masyarakat secara umum dan khusus, di mana secara umum perusahaan ini bergerak untuk seluruh masyarakat yang membutuhkan kebutuhan IT/Komputer. Secara khusus, perusahaan tersebut menggunakan media website untuk menentukan targetnya dengan strategi pembeli yang berusia dewasa, golongan menengah ke atas dan
mengenal dunia teknologi internet. Inovasi yang digunakan berupa media website online store. Website online store yang di buat tidak sebatas memberikan informasi dan sistematis barter secara online, tetapi website ini memberikan visual produk secara detail dengan galeri produk yang berinovasi dan berbeda dengan online store lainnya yang hanya menampilkan produknya dengan 2D (2 dimensi/flat), yaitu dengan menerapkan konsep 3D galeri produk. TUJUAN Tujuan pembuatan website dengan judul Rancang
Bangun
Menggunakan
Website
Teknik
Online
Photo
Spin
Store 360°
Rotation pada Cova Computer ini adalah untuk website online store dapat menjadi suatu bentuk informasi
yang
dapat
mempengaruhi
masyarakat agar merasakan segi visual/tampilan sesungguhnya sebuah produk yang disajikan dalam website tersebut, dan seakan-akan dengan 3D galeri produk dapat memberikan argument kuat mengajak masyarakat membeli produk tersebut. Sehingga ke depan dengan teknis photo spin 360° rotation, dapat menjadi awal yang baik bagi para insan kreatif lainnya dalam mengembangkan web online store dengan menyuguhkan produk yang berkualitas dan inovatif kepada masyarakat.
METODE Wawancara Metode langsung
wawancara
untuk
ini
dilakukan
mendapatkan
informasi-
informasi lebih dalam mengenai perancangan desain website, sistem website, dan order barang bahkan penggunaan teknik photo spin 360° rotation, itu sendiri. Dari hasil wawancara didapat kesimpulan bahwa teknik photo spin 360° rotation merupakan teknik foto yang merotasi objek foto, dan biasanya dilakukan 360 derajat secara penuh, dengan frame terakhir
2
melakukan perulangan menuju awal ke frame
METODE PENELITIAN
pertama untuk digunakan efek berputar terus
Metode penelitian yang digunakan dalam
menerus. Teknik photo spin 360° rotation dapat
merancang bangun website online store ini
dipergunakan untuk membuat objek berputar
dilakukan
dan salah satu teknik yang masih jarang
Development
dipergunakan dalam pengaplikasian website,
didefinisikan oleh Dewan Perwakilan Rakyat
karena
AS sebagai sebuah proses pengembangan
teknik
tingkat kerumitan perpaduan antara foto
dengan
bahasa
pemrograman
Life
Cycle)
SDLC dimana
(System SDLC
software yang digunakan oleh analis sistem, untuk
website seperti Ajax.
berdasarkan
mengembangkan
sebuah
sistem
Ajax diperkenalkan oleh Jesse James
informasi. Tahapan-tahapan yang digunakan
Garret dari Adaptive Path pada tahun 2005. Ia
dalam SDLC diantara adalah planning atau
mendeskripsikan bagaimana mengembangkan
perencanaan,
web yang berbeda dengan metode tradisional.
(build and coding), pengujuan (testing), dan
AJAX (Asynchronouse JavaScript And XML)
pemeliharaan (maintenance).
analisa,
desain,
implementasi
adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web lebih interaktif dan dinamis. Aplikasi web yang berkerja dengan AJAX bekerja secara asynchronously, yang berarti mengirim dan menerima data dari user ke server tanpa perlu me-load kembali seluruh halaman, melainkan hanya melakukan penggantian pada bagian web yang hendak diubah. Penggunaan AJAX mulai popular ketika digunakan oleh Google pada tahun 2005. Penggunaan AJAX akan mendatangkan beberapa
keuntungan. Keuntungan tersebut
antara lain. -
High Interactivity: Aplikasi AJAX lebih
interaktif
dibanding
dengan
aplikasi web konvensional -
High Usability: Update data tidak mereload keseluruhan halaman, melainkan
Gambar 1 Diagram alur metode perancangan berdasarkan SDLC
hanya yang relevan. -
High Speed: Aplikasi AJAX lebih
PERANCANGAN KARYA
cepat dibanding dengan aplikasi web
1. Ide
konvensional.
Terdorong akibat melihat tampilan website yang monoton dengan gambar tampak 2D (flat) membuat user tidak nyaman hanya melihat objek dari 1 sisi saja. Dan muncul pemikiran
3
kreatif untuk mengembangkan website toko
3. Design Sistem
online yang berinovasi, dengan cara membuat 3D objek pada toko online, dan dapat dirasakan fasilitas yang interaktif. Sehingga, fasilitas website tersebut dapat dimanfaatkan mulai dari fungsi,
manfaat,
diaplikasikan
serta
dalam
nilai
guna
kehidupan
dapat
sehari-hari Gambar 2 Diagram Alur Rancangan Aplikasi
dalam hal barter atau bisnis.
2.Konsep Konsep
Maksud dari diagram alur gambar 2, yaitu: adalah
sebuah
rancangan
pemikiran dari ide dasar yang diterapkan terhadap proyek penelitian awal.
menggunakan
desain
dengan
gaya
minimalis, warna biru yang dominan menjadi latar belakang (background), website ini tidak terlalu banyak memakan space/tempat, karena kepadatan sebuah space membuat user tidak nyaman. Konsep ke dua, adalah media website ini mengutamakan tampilan galeri produk berbasis 3D, dengan navigasi 2 tombol sederhana, rotation dan zoom. Untuk fasilitas barter masih semi-manual, di mana konfirmasi transaksi melalui ATM (Automed Teller Machine). Konsep ke tiga, adalah media website ini terbatas dengan sistem keamanan (security) dan menggunakan sifat yang dinamis di bangun dengan bahasa pemrograman PHP & MySQL, CSS, dan pengembangan bahasa pemrograman terkini AJAX.
dapat melihat, bahkan mengisi beberapa inputan form. Salah satu form terpenting dan selalu ada
Konsep pertama, adalah media website ini
User adalah pengunjung website yang
dari setiap bagian website online store adalah order form. Tetapi, di dalam sistem ini pengunjung website tidak hanya diposisikan sebagai pembeli atau pelanggan perusahaan. Lebih dari itu pelanggan juga dijadikan sebagai sebuah alat pintar yang dapat menghasilkan informasi
bisnis
dan
beberapa
fasilitas
pemasaran,
menarik
yang
seperti dapat
dimanfaatkan user, yaitu: iklan baris, guestbook, contact.
Sehingga
fasilitas
tersebut
dapat
memudahkan interaksi antara user dengan admin, atau user dengan user. Iklan baris adalah fasilitas tambahan dari website online store yang digunakan untuk jalur penghubung user yang ingin menjual barang, mencari barang, membeli barang. Dengan mengisi form secara langsung, dan kontak user sebagai komunikatif yang menarik. Admin
adalah
seorang
pengendali
interaksi input-output antara data yang akan ditampilkan
di
website,
sampai
dengan
konfirmasi transaksi dari user, dan memiliki hak tertinggi untuk menghapus data yang dianggap berbau SARA, kotor (junk), spam.
4
Produk adalah berbagai jenis barang yang di \jual oleh perusahaan, dan ditampilkan secara 2 macam kategori, yaitu 2D dan 3D. 1.
3D produk, menampilkan statis objek hanya showing room saja, tetapi inovasi terbaru dari perusahaan, seperti barang yang baru (new product) dan barang yang paling banyak diminati user (hot sale).
2.
2D produk, menampilkan dinamis objek, yang di dalamnya terdapat fasilitas order
Gambar 4. Sitemap User Page dan Admin Page
untuk user memesan barang. Orderan adalah fasilitas penghubung
5. Desain Databases
dan
Gambar 5. merupakan struktur dari
untuk
diagram keseluruhan sistem website Cova
mudah,
Computer, dengan syncronize (menyamakan)
seperti tampak pada gambar 3 adalah dokumen
isi/field data pada tabel [covacomp.product] di
flow dan rancangan bagan pemesanan barang.
post (kirim) ke tabel data [covacomp.orderan]
antara
user
dikonfirmasi memesan
yang oleh
akan admin.
barang/produk
membeli Prosedur
sangatlah
sebagai fungsi pengenalan produk yang telah di order oleh user.
Gambar 3. Dokumen flow pemesanan barang
4. Sitemap Sitemap (Didik, 2008:332) adalah suatu file XML yang memuat daftar dan metadata URL
sebuah
situs.
Terlepas
dari
fungsi
utamanya untuk melakukan pemetaan, sitemap
Gambar 5. Desain Databases Cova Computer
sangat membantu crawler mesin pencari dalam melakukan tugasnya. Di mana sitemap website
IMPLEMENTASI
cova computer seperti gambar 4.
1. Halaman Admin Halaman admin adalah halaman bagian penerimaan keseluruhan data yang ditangani oleh operator untuk menerima inputan dari user, dan memelihara data master, menambahkan produk, meng-update event, memantau posting
5
(kiriman) user. Selain hal itu, halaman admin
awal ini terdapat 4 pembagian, yaitu header,
dilengkapi
navigation menu, content, dan footer.
fasilitas
untuk
melakukan
penerimaan order dari user, dan konfirmasi pembelian.
Header merupakan kepala dari website atau tampilan atas yang berfungsi untuk
Beberapa menu yang terdapat dalam
identitas
pengenal
website,
dan
memiliki
halaman admin diharapkan dapat memudahkan
tampilan desain seperti meja kerja (workbench),
bagian penerimaan dalam prosesnya sebagai
dan
penerima order, sehingga kinerja perusahaan
divisualkan secara 3d reality object. Pada sudut
dapat meningkat. Berikut adalah contoh bagian
kiri layar merupakan logo perusahaan yang
product input, pada halaman admin, dapat
menggantung dan merupakan navigasi button
dilihat pada gambar 6.
yang mengarahkan user menuju direct link ke
berisi
variasi
simbol
button
yang
home/halaman awal. Visual monitor Mac merupakan banner promosi dari perusahaan, dan Visual iPad merupakan iklan baris yang menampilkan text dari bawah ke atas bergerak berulang-ulang. Serta gambar mesin faksimili, sebagai simbol button untuk print, Gambar 6. Input Product - Admin Page
yang
nantinya digunakan untuk mencetak hasil dari orderan barang user, dan di atas mesin faksimili
2. Halaman User
terdapat customer service via YM. Pada header, juga terdapat 3 komponen yang menggantung di bagian sudut atas sampai ke arah kanan, yaitu kalender (event), piagam (awards), dan bingkai logo-logo perusahaan (cooperation). Kalender merupakan tombol untuk menuju ke event page yang berisi segala macam acara, informasi kegiatan yang sedang berlangsung diperusahaan
tersebut. Piagam
merupakan tombol untuk menuju ke awards page yang berisi prestasi dan penghargaan yang Gambar 7. Halaman User, Home – Cova Computer
telah diperoleh perusahaan. Bingkai logo-logo perusahaan merupakan tombol untuk menuju ke
Rancang bangun website online store website online store menggunakan “photo spin 360° rotation” pada perusahaan Cova Computer dimulai
dari
halaman
home/awal
www.covacomp.com yang dapat dilihat pada gambar 4.5. Pada halaman home atau halaman
cooperation page, yang berisi jalinan kerjasama dengan perusahaan lain/partner. Di bagian bawah header atau bawah meja kerja (workbench) tedapat navigasi menu, yang berisi support berbagai tombol sosial media dari perusahaan, seperti Facebook, Twitter, Google Plus, Yahoo, dan beberapa tombol bantuan
6
navigasi untuk menuju lokasi link tujuan, seperti home, produk, servis, kontak. Serta visual buku
“Single-row” film, adalah objek diputar
tamu dengan kertas terjatuh dan berlipat-lipat,
di depan kamera, dan dilihat dari satu tingkat
merupakan
atau
simbol
dari form
isian
yang
berfungsi menginput data user/buku tamu. Bagian tengah terdapat content/isi dari
posisi,
namun
objek
yang
diambil
gambarnya lebih dari satu tingkat (atau baris), sehingga dapat di lihat dari sisi kiri dan kanan
website, di halaman ini terdapat berbagai
bahkan
informasi lengkap dan details dari setiap data
merupakan teknik “multi-row”. Lebih mudah
website. Sebelah kanan content merupakan
menggunakan “single-row” daripada “multi-
tampilan dari alamat perusahaan berdomisili,
row”,
dan di bawah content terdapat footer yang
memungkinkan fotografer untuk memindahkan
digunakan untuk tanda pengenal legalitas dan
objek di depan kamera, daripada memindahkan
sponsor.
kamera di sekitar
sisi
atas
dikarenakan
dan
bawah
sebuah
sekaligus
meja
putar
objek (yang membuat
pengambilan bingkai pada objek). 3. Photo Spin 360° Rotation Photo Spin 360° Rotation (Scott, 2010: 219) adalah teknik foto yang merotasi objek foto, dan biasanya dilakukan 360 derajat secara penuh,
dengan
frame
terakhir
melakukan
perulangan menuju awal ke frame pertama untuk digunakan efek berputar terus menerus.
Gambar 10. Meja putar, alat sederhana yang dapat di buat sendiri, dan menghemat biaya
Proses pembuatan teknik photo spin 360° rotation dapat dilihat pada gambar 8-9 dan 11.
Peralatan pada gambar 10, kegunaan paling utama yaitu sejenis meja berputar yang berputar pada porosnya, dan dapat melakukan putaran 360 derajat penuh, di depan kamera. Pengambilan
gambar
memungkinkan
anda
untuk menunjukkan suatu objek dari berbagai sudut. Diperlukan pemotretan benda tersebut Gambar 8. Foto studio, photo spin 360° rotation
dari semua sisi, dan kemudian urutan gambargambar tersebut dapat ditampilkan di layar monitor, seakan-akan tampak interaksi secara virtual.
Gambar 9. Teknik single row pada photo spin 360° rotation
7
diimplemntasikan pada website online store sudah terpenuhi dan berjalan. 2.
Berdasarkan hasil test case kompatibilitas antara web browser Mozilla FireFox dengan resolusi monitor 1280 x 800, dan sistem AJAX tools, engine dapat bekerja sesuai dengan penggunaan pada website
Gambar 11. Teknik Alpha Channel, Selection dan Erase.
online store tersebut.
SARAN Hasil seleksi setelah pemotretan studio,
Saran yang dapat disampaikan dalam
adalah, 36 image yang masih mentah pada
pengembangan website online store Cova
background greenscreen yang harus di edit
Computer adalah website online store Cova
dengan mengatur RGB pada alfa channel,
Computer juga bisa dikembangkan ke arah
hilangkan
hanya
pemanfaatan mobile technology. Sehingga untuk
tampak warna Red & Blue atau agak ke ungu
pembelian produk, pengguna bisa menggunakan
dan pink. Kemudian simpan dalam bentuk jpg,
smartphone, handphone, android phone, PDA,
sehingga
putih.
dan berbagai macam jenis gadget mobile. Serta,
Kelompokkan dalam 1 folder dan dapat
tampilan website Cova Computer bisa dibuat
dikombinasikan dengan AJAX.
lebih reality, dengan 3D room objek, sehingga
channel
green,
background
sehingga
tampak
pengunjung lebih merasakan berada di dalam ruangan belanja yang sesungguhnya. Apabila telah menguasai tentang Action Script, hendaknya memanfaatkan teknik Action Script tersebut, karena teknik Action Script lebih ringan dan efisien dari pada harus menggunakan teknik frame by frame. Gambar 12. Pengelompokkan image hasil seleksi dalam 1 folder
KESIMPULAN Berdasarkan seluruh hasil uji coba yang telah berhasil dilakukan dapat disimpulkan sebagai berikut: 1.
Dari hasil pemetaan keterkaitan fitur-fitur pada website online store Cova Computer, didapatkan bahwa kebutuhan photo spin
DAFTAR PUSTAKA
Highton. Scott. 2010. Paper of Virtual Reality Photography - Creating Panoramic and Object Images. China: Library of Congress. Jeprie. Mohammad. 2012. 8 Tips Belajar Desain Web.
. (Di akses pada tanggal 08 Maret 2012).
360° rotation dan 3D gallery product yang
8
Kuswayatno. Lia. 2006. Mahir dan Terampil Berkomputer. Bandung: PT Grafindo Media Tama. Media. Laksamana. 2009. Membongkar Rahasia Keaslian Foto. Jakarta: Mediakita. Nugroho. Anang Tri. 2010. Sukses Bisnis Toko Online - Trip Melipatgandakan Pasar untuk Meraup Untung Lebih Besar. Jakarta: PT Gramedia Pustaka Utama.
Yuhefizar. Mooduto. dan Rahmat. 2009. Cara Mudah Membangun Website Interaktif Menggunakan Content Management System Joomla Edisi Revisi. Jakarta: PT Elex Media Komputindo. Zaki. Ali. 2008. 7 CMS Pilihan untuk Internet Marketing. Jakarta: PT Elex Media Komputindo.
Prasetyo. Didik Dwi. 2008. 101 Tip dan Trik Pemrograman PHP. Buku kedua. Jakarta: PT Elex Media Komputindo. Rachdian. Adhi dan Andy. 2006. Mastering CMS dengan Mambo/Joomla. Jakarta: PT Elex Media Komputindo. Ramadhan. Arief. 2005. SPK Internet dan Aplikasinya. Jakarta: PT Elex Media Komputindo. Sudjojo. Marcus. 2010. Tak – Tik Fotografi. Jakarta: Bukune. Sugiarto. Atok. 2006. Cuma Buat yang ingin Jago Foto. Jakarta: PT Gramedia Pustaka Utama. Sunyoto. Andi. 2007. Membangun Web dengan Teknologi Asyncronouse JavaScript dan XML. Yogyakarta: ANDI. Syafrizal. Malwin. 2005. Pengantar Jaringan Komputer. Jakarta: ANDI. Utomo. Eko Priyo. 2009. Meraup Kekayaan Lewat Internet dengan Toko Online. Yogyakarta: MediaKom. Widiatmoko. Destria dan Jimmy. 2006. 101 Tip dan Trik Dunia Fotografi dan Seni Digital. Jakarta: PT Elex Media Komputindo. Wong. Jony. 2010. Internet Marketing for Beginners. Jakarta: PT Elex Media Komputindo.
9
