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: divamahendra@gmail.com

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