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
kenal singkatannya “Website” adalah suatu
ruang informasi di mana sumber-sumber daya
yang berguna diidentifikasi oleh pengenal
global yang disebut Uniform Resource Identifier
(URI) atau juga lebih dikenal dengan istilah
yang lebih popular Uniform Resource Locator
(URL). WWW sering dianggap sama dengan
internet secara keseluruhan, walaupun
sebenarnya WWW hanyalah bagian dari
internet. WWW juga dikenal dengan istilah situs
internet.”
“Bahwa video klip adalah bentuk komunikasi audio visual yang maknanya
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 Website Online Store
Menggunakan Teknik Photo Spin 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.
METODEWawancara
Metode wawancara ini dilakukan
langsung untuk 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
pertama untuk digunakan efek berputar terus
menerus. Teknik photo spin 360° rotation dapat
dipergunakan untuk membuat objek berputar
dan salah satu teknik yang masih jarang
dipergunakan dalam pengaplikasian website,
karena tingkat kerumitan perpaduan antara
teknik foto dengan bahasa pemrograman
website seperti Ajax.
Ajax diperkenalkan oleh Jesse James
Garret dari Adaptive Path pada tahun 2005. Ia
mendeskripsikan bagaimana mengembangkan
web yang berbeda dengan metode tradisional.
AJAX (Asynchronouse JavaScript And XML)
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 me-
reload keseluruhan halaman, melainkan
hanya yang relevan.
- High Speed: Aplikasi AJAX lebih
cepat dibanding dengan aplikasi web
konvensional.
METODE PENELITIAN
Metode penelitian yang digunakan dalam
merancang bangun website online store ini
dilakukan berdasarkan SDLC (System
Development Life Cycle) dimana SDLC
didefinisikan oleh Dewan Perwakilan Rakyat
AS sebagai sebuah proses pengembangan
software yang digunakan oleh analis sistem,
untuk mengembangkan sebuah sistem
informasi. Tahapan-tahapan yang digunakan
dalam SDLC diantara adalah planning atau
perencanaan, analisa, desain, implementasi
(build and coding), pengujuan (testing), dan
pemeliharaan (maintenance).
Gambar 1 Diagram alur metode perancangan berdasarkan SDLC
PERANCANGAN KARYA
1. Ide
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
kreatif untuk mengembangkan website toko
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, serta nilai guna dapat
diaplikasikan dalam kehidupan sehari-hari
dalam hal barter atau bisnis.
3
2.Konsep
Konsep adalah sebuah rancangan
pemikiran dari ide dasar yang diterapkan
terhadap proyek penelitian awal.
Konsep pertama, adalah media website
ini 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.
3. Design Sistem
Gambar 2 Diagram Alur Rancangan Aplikasi
Maksud dari diagram alur gambar 2, yaitu:
User adalah pengunjung website yang
dapat melihat, bahkan mengisi beberapa inputan
form. Salah satu form terpenting dan selalu ada
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 pemasaran, seperti
beberapa fasilitas menarik yang 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.
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).
4
2. 2D produk, menampilkan dinamis objek,
yang di dalamnya terdapat fasilitas order
untuk user memesan barang.
Orderan adalah fasilitas penghubung
antara user yang akan membeli dan
dikonfirmasi oleh admin. Prosedur untuk
memesan barang/produk sangatlah mudah,
seperti tampak pada gambar 3 adalah dokumen
flow dan rancangan bagan pemesanan barang.
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
sangat membantu crawler mesin pencari dalam
melakukan tugasnya. Di mana sitemap website
cova computer seperti gambar 4.
Gambar 4. Sitemap User Page dan Admin Page
5. Desain Databases
Gambar 5. merupakan struktur dari
diagram keseluruhan sistem website Cova
Computer, dengan syncronize (menyamakan)
isi/field data pada tabel [covacomp.product] di
post (kirim) ke tabel data [covacomp.orderan]
sebagai fungsi pengenalan produk yang telah di
order oleh user.
Gambar 5. Desain Databases Cova Computer
IMPLEMENTASI
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
(kiriman) user. Selain hal itu, halaman admin
dilengkapi fasilitas untuk melakukan
penerimaan order dari user, dan konfirmasi
pembelian.
Beberapa menu yang terdapat dalam
halaman admin diharapkan dapat memudahkan
bagian penerimaan dalam prosesnya sebagai
penerima order, sehingga kinerja perusahaan
dapat meningkat. Berikut adalah contoh bagian
product input, pada halaman admin, dapat
dilihat pada gambar 6.
Gambar 6. Input Product - Admin Page
2. Halaman User
5
Gambar 7. Halaman User, Home – Cova Computer
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
awal ini terdapat 4 pembagian, yaitu header,
navigation menu, content, dan footer.
Header merupakan kepala dari website
atau tampilan atas yang berfungsi untuk
identitas pengenal website, dan memiliki
tampilan desain seperti meja kerja (workbench),
dan berisi variasi simbol button yang
divisualkan secara 3d reality object. Pada sudut
kiri layar merupakan logo perusahaan yang
menggantung dan merupakan navigasi button
yang mengarahkan user menuju direct link ke
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, yang
nantinya digunakan untuk mencetak hasil dari
orderan barang user, dan di atas mesin faksimili
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
telah diperoleh perusahaan. Bingkai logo-logo
perusahaan merupakan tombol untuk menuju ke
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
navigasi untuk menuju lokasi link tujuan, seperti
home, produk, servis, kontak. Serta visual buku
tamu dengan kertas terjatuh dan berlipat-lipat,
merupakan simbol dari form isian yang
berfungsi menginput data user/buku tamu.
Bagian tengah terdapat content/isi dari
website, di halaman ini terdapat berbagai
informasi lengkap dan details dari setiap data
website. Sebelah kanan content merupakan
tampilan dari alamat perusahaan berdomisili,
dan di bawah content terdapat footer yang
digunakan untuk tanda pengenal legalitas dan
sponsor.
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.
Proses pembuatan teknik photo spin 360°
rotation dapat dilihat pada gambar 8-9 dan 11.
6
Gambar 8. Foto studio, photo spin 360° rotation
Gambar 9. Teknik single row pada photo
spin 360° rotation
“Single-row” film, adalah objek diputar
di depan kamera, dan dilihat dari satu tingkat
atau posisi, namun objek yang diambil
gambarnya lebih dari satu tingkat (atau baris),
sehingga dapat di lihat dari sisi kiri dan kanan
bahkan sisi atas dan bawah sekaligus
merupakan teknik “multi-row”. Lebih mudah
menggunakan “single-row” daripada “multi-
row”, dikarenakan sebuah meja putar
memungkinkan fotografer untuk memindahkan
objek di depan kamera, daripada memindahkan
kamera di sekitar objek (yang membuat
pengambilan bingkai pada objek).
Gambar 10. Meja putar, alat sederhana yang dapat di buat sendiri, dan menghemat biaya
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
dari semua sisi, dan kemudian urutan gambar-
gambar tersebut dapat ditampilkan di layar
monitor, seakan-akan tampak interaksi secara
virtual.
Gambar 11. Teknik Alpha Channel, Selection dan Erase.
Hasil seleksi setelah pemotretan studio,
adalah, 36 image yang masih mentah pada
background greenscreen yang harus di edit
dengan mengatur RGB pada alfa channel,
hilangkan channel green, sehingga hanya
tampak warna Red & Blue atau agak ke ungu
dan pink. Kemudian simpan dalam bentuk jpg,
sehingga background tampak putih.
Kelompokkan dalam 1 folder dan dapat
dikombinasikan dengan AJAX.
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
360° rotation dan 3D gallery product yang
diimplemntasikan pada website online
store sudah terpenuhi dan berjalan.
7
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
online store tersebut.
SARAN
Saran yang dapat disampaikan dalam
pengembangan website online store Cova
Computer adalah website online store Cova
Computer juga bisa dikembangkan ke arah
pemanfaatan mobile technology. Sehingga untuk
pembelian produk, pengguna bisa menggunakan
smartphone, handphone, android phone, PDA,
dan berbagai macam jenis gadget mobile. Serta,
tampilan website Cova Computer bisa dibuat
lebih reality, dengan 3D room objek, sehingga
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.
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. <http://www.desaindigital.com/8-tips-belajar-desain-web/>. (Di akses pada tanggal 08 Maret 2012).
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.
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.
Yuhefizar. Mooduto. dan Rahmat. 2009. Cara Mudah Membangun Website Interaktif Menggunakan Content
8
Management System Joomla Edisi Revisi. Jakarta: PT Elex Media Komputindo.
Zaki. Ali. 2008. 7 CMS Pilihan untuk Internet Marketing. Jakarta: PT Elex Media Komputindo.
9