PEMBUATAN SISTEM PENJUALAN TERINTEGRASI FUR

PEMBUATAN SISTEM PENJUALAN TERINTEGRASI
BERBASIS WEB DAN MOBILE CROSS PLATFORM
UNTUK PRODUSEN KAOS ANAK

Laporan Proyek Minor
Diajukan sebagai salah satu syarat untuk menyelesaikan
Mata kuliah Information Technology Project (minor)

Disusun oleh:
Samuel Febrian (1510007)
Riko Ariyanto (1510006)

SEKOLAH TINGGI ILMU KOMPUTER BINANIAGA BOGOR
Jl. Mayor Oking No.27 Kota Bogor
2013

DAFTAR ISI

DAFTAR ISI .................................................................................................................. 2
LEMBAR PERSETUJUAN ............................................................................................ 3
KATA PENGANTAR ..................................................................................................... 5

DAFTAR TABEL ........................................................................................................... 6
DAFTAR GAMBAR ....................................................................................................... 6
DAFTAR ISTILAH ......................................................................................................... 8
ABSTRAK ..................................................................................................................... 9
A.

LATAR BELAKANG ......................................................................................... 11

B.

MASALAH PROYEK ........................................................................................ 12
1.

IDENTIFIKASI MASALAH............................................................................. 12

2.

POKOK MASALAH ....................................................................................... 12

3.

RUMUSAN MASALAH ................................................................................. 12

4.

KETERBATASAN ......................................................................................... 12

C. MAKSUD DAN TUJUAN PROYEK................................................................... 13
D. SIGNIFIKASI PROYEK .................................................................................... 13
E.

PENDEKATAN PROYEK ................................................................................. 13
1.

Feasibility ..................................................................................................... 13

2.

Penjadwalan ................................................................................................. 19

3.

Pemikiran Teoritis ......................................................................................... 19

4.

Kerangka Identifikasi Pemecahan Masalah .................................................. 23

5.

Analisis ......................................................................................................... 24

F.

PEMODELAN DAN STRUKTUR ...................................................................... 24
1.

ARSITEKTUR ............................................................................................... 24

2.

IMPLEMENTASI ........................................................................................... 26

G. IMPLIKASI ....................................................................................................... 43
H. DAFTAR PUSTAKA ......................................................................................... 44
I.

TENTANG PELAKSANA .................................................................................. 45

J.

LAMPIRAN....................................................................................................... 46

STIKOM BINANIAGA BOGOR |

2

LEMBAR PERSETUJUAN
PEMBUATAN SISTEM PENJUALAN TERINTEGRASI BERBASIS WEB DAN
MOBILE CROSS PLATFORM UNTUK PRODUSEN KAOS ANAK

Dilaksanakan Oleh :
Pelaksana 1

Pelaksana 2

Samuel Febrian

Riko Ariyanto

NIM. 1510007

NIM. 1510006
Disetujui dan disahkan Oleh :

Dosen Pembimbing

Pembimbing Proyek

Anggra Triawan, S.Kom

Aries Dwantoro Setyanto, S.E

Dosen ITPM

Ir. Hardi Jamhur
11393002

Penanggung Jawab Proyek

Ketua Program Studi

Anne Setia Fajarine, S.E.

Irmayansyah, S.Kom

(Pemilik)

NIP. 11304010

STIKOM BINANIAGA BOGOR |

3

Nomor

:

Bogor, 12 Desember 2013

Lampiran

:

Perihal

: Surat Keterangan Pelaksanaan Proyek

Kepada
Yth. STIKOM Binaniaga
Di Bogor

Dengan hormat,
Yang bertanda tangan di bawah ini :
Nama

: Anne Setia Fajarine, S.E.

Jabatan

: Pemilik Produsen Kaos Anak

Dengan ini menerangkan bahwa :
Nama

: Samuel Febrian

NPM

: 1510007

Program Studi

: Teknik Informatika, STIKOM Binaniaga Bogor

Nama

: Riko Ariyanto

NPM

: 1510006

Program Studi

: Teknik Informatika, STIKOM Binaniaga Bogor

Adalah benar mahasiswa yang telah melakukan proyek pada tanggal 15 Oktober 2013 s.d. 12
Desember 2013. Dengan judul proyek: Pembuatan Sistem Penjualan Terintegrasi Berbasis
Web Dan Mobile Cross Platform Untuk Produsen Kaos Anak.
Demikian surat keterangan ini bisa digunakan untuk keperluan sidang proyek mahasiswa

tersebut. Atas perhatiannya saya mengucapkan terima kasih.

Hormat saya,

Pemilik

Anne Setia Fajarine, S.E.
STIKOM BINANIAGA BOGOR |

4

KATA PENGANTAR

Puji syukur yang dalam kami sampaikan kepada Tuhan Yang Maha pemurah yang telah
memberikan rahmat serta karuniaNya sehingga kami berhasil menyelesaikan proyek tepat pada
waktunya dengan proyek yang berjudul “Pembuatan Sistem Penjualan Terintegrasi Berbasis
Web Dan Mobile Cross Platform Untuk Produsen Kaos Anak”. Laporan ini berisikan tentang
penjualan berbasis web dan mobile yang bersifat cross-platform di Produsen Kaos Anak.
Laporan ini diharapkan dapat digunakan sebagai bagian dari komponen dalam melakukan
evaluasi program penjualan yang dilakukan dalam bisnis. Evaluasi keterlaksanaan dari hasil

proyek dapat dilihat dari keberhasilan pencapaian kegiatan jual beli yang ditetapkan perlu
dianalisis untuk mendapatkan informasi tentang tingkat penjualan.
Dalam penyelesaian proyek ini, tidak terlepas dari dukungan berbagai pihak. Oleh sebab itu,
pada kesempatan ini pula, kami mengucapkan terima kasih yang sebesar-besarnya kepada :
Tuhan Yang Maha Esa, yang selalu memberikan kami kesehatan, kemampuan dan
kesempatan pada kami dalam menghadapi setiap tantangan yang ada dalam proyek ini.
Orangtua dan keluarga tercinta, yang selalu memberikan dukungan dalam bentuk kasih sayang
sehingga kami bisa menyelesaikan proyek ini dengan maksimal.
Bapak Ir. Hardi Jamhur, selaku dosen mata kuliah ITPM yang sangat berperan dalam
mengarahkan dan memberikan materi yang lengkap tentang proyek ini
Bapak Anggra Triawan, selaku dosen pembimbing yang berperan dalam memberikan masukan
terhadap setiap proses alur program dalam proyek ini.
Bapak Aries Dwantoro Setyanto, S.E, dan Ibu Anne Setia Fajarine, S.E. yang telah
memberikan ijin untuk menerapkan proyek ini di pabrik yang dipimpin beliau.
Akhirnya dengan mengucapkan Puji Syukur, mudah-mudahan karya kecil ini dapat bermanfaat
baik untuk bahan bacaan maupun bahan pertimbangan bagi yang berminat mengkaji lebih
mendalam tentang proyek ini. Penulis menyadari bahwa proyek ini masih jauh dari sempurna,
atas saran dan kritik yang membangun penulis ucapkan terima kasih.

Bogor, 12 Desember 2013
Penyusun

STIKOM BINANIAGA BOGOR |

5

DAFTAR TABEL
Tabel 1. Economic feasibility........................................................................................................14
Tabel 2. Kelayakan Operasional ..................................................................................................16
Tabel 3. Kelayakan Teknis ...........................................................................................................16
Tabel 4. Tabel data aktifitas proyek .............................................................................................17
Tabel 5. Tabel waktu yang diharapkan ........................................................................................18
Tabel 6. Perangkat Keras ............................................................................................................25
Tabel 7. Perangkat Lunak ............................................................................................................25

DAFTAR GAMBAR
Gambar 1 Penjadwalan ................................................................................................................19
Gambar 2 Kerangka Identifikasi Pemecahan Masalah ................................................................23
Gambar 3 Arsitektur .....................................................................................................................25
Gambar 4 Database .....................................................................................................................26
Gambar 5 Stored Procedure ........................................................................................................27
Gambar 6 Halaman Awal .............................................................................................................28
Gambar 7 Halaman Detail Produk ...............................................................................................29
Gambar 8 Halaman Konfirmasi ....................................................................................................30
Gambar 9 Halaman Tas Belanja ..................................................................................................30
Gambar 10 Halaman Login ..........................................................................................................31
Gambar 11 Halaman Informasi Pengiriman.................................................................................31
Gambar 12 Halaman Informasi Pembayaran ..............................................................................32
Gambar 13 Halaman Konfirmasi Pembayaran ............................................................................32
Gambar 14 Halaman Login Administrator ....................................................................................33
Gambar 15 Halaman Utama Administrator ..................................................................................33
Gambar 16 Halaman Input Produk .............................................................................................34
Gambar 17 Halaman Utama Versi Mobile ...................................................................................34
(pada emulator) ............................................................................................................................34
Gambar 18 Halaman Detail Produk Versi Mobile ........................................................................35
(pada emulator) ............................................................................................................................35
Gambar 19 Halaman Utama Mobile ............................................................................................35
Gambar 20 Halaman Detail Produk Mobile .................................................................................35
Gambar 21 Membuat Project Baru ..............................................................................................38
Gambar 22 Import Project Phonegap ..........................................................................................38
Gambar 23 Selesai Import ...........................................................................................................39

STIKOM BINANIAGA BOGOR |

6

Gambar 24 Isi Folder www...........................................................................................................40
Gambar 25 Menjalankan Aplikasi ................................................................................................40
Gambar 26 Hasil Implementasi Pada Perangkat Mobile .............................................................41
Gambar 27 Halaman Login Phonegap Build ...............................................................................41
Gambar 28 Upload File ZIP .........................................................................................................42
Gambar 29 Pembuatan Aplikasi ..................................................................................................42
Gambar 30 Pilih Proyek ...............................................................................................................42
Gambar 31 Unduh Installer ..........................................................................................................42

STIKOM BINANIAGA BOGOR |

7

DAFTAR ISTILAH
Berikut adalah istilah-istilah yang terdapat pada laporan proyek ini :
1. Sistem penjualan, yaitu perangkat unsur yg secara teratur saling berkaitan sehingga
membentuk suatu totalitas dari proses, cara, perbuatan menjual dan bisa disebut juga
tempat menjual. Atau “suatu kesatuan proses yang saling mendukung dalam usahanya
untuk memenuhi kebutuhan pembeli dan bersama – sama mendapatkan kepuasan dan
keuntungan”.
2. Web Hosting, yaitu salah satu bentuk layanan jasa penyewaan tempat di Internet yang
memungkinkan perorangan ataupun organisasi menampilkan layanan jasa atau
produknya di web / situs Internet. Tempat dapat juga diartikan sebagai tempat
penyimpanan data berupa megabytes (mb) hingga terabytes (tb) yang memiliki koneksi
ke internet sehingga data tersebut dapat direquest atau diakses oleh user dari semua
tempat secara simultan. Inilah yang menyebabkan sebuah website dapat diakses
bersamaan dalam satu waktu oleh multi user.
3. Mobile, yaitu media untuk menjangkau audiens Anda ke mana pun mereka pergi.
4. PhoneGap, yaitu sebuah kerangka kerja/framework open source yang dipakai untuk
membuat aplikasi cross-platform mobile dengan HTML, CSS, dan JavaScript.
PhoneGap menjadi suatu solusi yang ideal untuk seorang pengembang aplikasi web
yang tertarik dalam pembuatan aplikasi di smartphone. PhoneGap juga merupakan
solusi ideal bagi mereka yang tertarik untuk membuat sebuah aplikasi yang dapat
berjalan pada beberapa perangkat smartphone dengan basis kode yang sama. Artinya,
cukup hanya dengan 1 kali coding saja, anda dapat membuat aplikasi untuk
smartphone iPhone, Android, Blackberry, Symbian dan Windows Phone.
5. Cross Platform, yaitu istilah dalam teknologi informasi mengenai sebuah software yang
dapat digunakan di beberapa sistem operasi yang berbeda, misalnya : Microsoft
Windows , Mac OS,Linux,BSD dan lain-lain. Biasanya software yang memiliki
kemampuan antar platform adalah software open source . Salah satu contoh software
yang memiliki kemampuan antar platform adalah Apache HTTP Server,MySQL dan
PHP.

STIKOM BINANIAGA BOGOR |

8

ABSTRAK

Nama Proyek

: Pembuatan Sistem Penjualan Terintegrasi Berbasis Web
Dan Mobile Cross Platform Untuk Produsen Kaos Anak

Nama Penyusun

: Samuel Febrian (1510007)
Riko Ariyanto (1510006)

Kata Kunci

: sistem penjualan, web, android, mobile, cross-platform.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World
Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang
pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997[1])
dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan
HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia
terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web
Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis
dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML
4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbedabeda oleh banyak perangkat lunak pembuat web.
CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web
browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada
perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS
3, tidak perlu mengubah apapun. CSS 3 memiliki beberapa fitur baru, seperti: Animasi,
sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft
Silverlight, Beberapa efek teks, seperti teks berbayang, kolom koran, dan "word-wrap",
Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2
dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.
Android merupakan sebuah sistem operasi yang berbasis Linux yang dapat digunakan untuk
telepon pintar dan komputer tablet. Sistem operasi ini bersifat open source (terbuka) sehingga
para programmer dapat membuat aplikasi dengan mudah untuk digunakan oleh bermacam
perangkat bergerak yang sekarang ini banyak digunakan oleh banyak orang. Android terdiri dari
sistem operasi , perangkat lunak , dan aplikasi.

STIKOM BINANIAGA BOGOR |

9

Sistem penjualan berbasis web merupakan suatu teknik memasarkan produk melalui halaman
website dimana pembeli cukup mengunjungi website tersebut untuk memilih dan memesan
barang yang diinginkan kemudian setelah pembayaran dilakukan dalam waktu yang cukup
singkat produk atau barang tersebut sudah dapat diterima oleh pembeli. Inilah bentuk
perdagangan elektronik yang memberikan kemudahan bagi para konsumen maupun para
pengusaha dalam menjalankan kegiatan bisnisnya.
Dikarenakan Produsen Kaos Anak adalah yang sedang mengembangkan tingkat penjualan
dan perlunya pengelolaan proses transaksi yang cepat dan terkontrol, maka teknologi yang ada
pada perangkat bergerak Android, juga teknologi HTML 5 dan CSS3, dapat dijadikan media
yang mampu menawarkan produk kepada masyarakat secara luas dan menjadi sistem yang
mampu mengelola informasi stok dan pemesanan bagi pengguna secara online.
Dengan tujuan untuk membuat sistem penjualan yang mampu menawarkan produk barang
secara online kepada masyarakat luas, sistem penjualan yang menarik

dan sistem yang

mampu mengelola setiap transaksi, maka sistem penjualan ini diharapkan dapat menciptakan
kinerja yang terkontrol bagi pemilik dan menarik bagi konsumen.

STIKOM BINANIAGA BOGOR |

10

A. LATAR BELAKANG
Produsen Kaos Anak adalah yang sedang berkembang di dalam penjualan berbagai macam
kaos untuk anak-anak. Dengan adanya promosi melalui web dan aplikasi Android kepada
konsumen maka proses jual beli dapat dilakukan dengan mudah. Karena sistem penjualan
bersifat online, maka pengunjung di internet bisa lebih membandingkan banyak produk dari
hanya dengan katalog saja.
Kemudahan

informasi

yang

memberikan

kenyamanan

kepada

konsumen

mengenai

pembayaran yang dilakukan kepada pihak penjual akan membuat konsumen bisa mengontrol
keuangan lebih mudah karena penawaran lebih bersifat satu arah.
Internet saat ini telah menjadi bagian yang tidak terpisahkan dari kehidupan kita. Semua aspek
kehidupan telah mulai memanfaatkan fasilitas internet, tidak hanya perusahaan yang ingin
memasarkan produknya secara global, tetapi juga pemerintahan, organisasi, partai politik,
yayasan, lembaga, dan bahkan individu juga telah menggunakan internet untuk mendapatkan
kemudahan dalam memberikan layanan dan informasi, juga untuk kemudahan perluasan dan
pengembangan bisnis.
Setiap waktunya internet semakin memasyarakat di Indonesia, hal ini ditandai dengan semakin
banyaknya pengguna internet dari tahun ke tahun, dan akan terus bertambah. Diprediksikan
setiap tahunnya pengguna internet di Indonesia meningkat tajam. Ini sangat masuk akal
mengingat era globalisasi yang sudah mulai berjalan. Bahkan setiap pribadi lepas pribadi dapat
melakukan jual beli secara online.
Online shopping atau belanja online via internet, adalah suatu proses pembelian barang atau
jasa dari mereka yang menjual melalui internet. Sejak kehadiran internet, para pedagang telah
berusaha membuat sistem penjualan dan menjual produk kepada mereka yang sering
menjelajahi dunia maya (internet). Para konsumen dapat mengunjungi Sistem penjualan
dengan mudah dan nyaman, mereka dapat melakukan transaksi di rumah, sambil duduk di
kursi mereka yang nyaman dan di depan komputer. Bisnis online adalah juga sama seperti
kegiatan bisnis yang kita kenal sehari-hari. Bedanya dalam bisnis online ini adalah segala
kegiatan bisnis dilakukan secara online dengan menggunakan media internet.
Dengan memiliki website maka semua orang, semua pihak, dan semua komponen dari seluruh
penjuru Indonesia dan dunia dapat dengan mudah mendapatkan informasi mengenai produk
yang ditawarkan oleh yang memiliki banyak persedian barang di dalamnya.

STIKOM BINANIAGA BOGOR |

11

B. MASALAH PROYEK
1. IDENTIFIKASI MASALAH
Identifikasi masalah dalam pembuatan sistem penjualan terintegrasi berbasis web dan
mobile cross platform untuk produsen kaos anak adalah:
1. Kurangnya media promosi untuk meningkatkan penjualan.
2. Jangkauan promosi yang terbatas.
3. Pengelolaan stok barang tidak tepat.

2. POKOK MASALAH
Berdasarkan permasalahan diatas maka pokok masalah sebagai berikut :
1. Tidak adanya sistem penjualan yang mampu mengelola informasi persediaan
barang dan penjadwalan pengiriman barang.
2. Belum memiliki sarana teknologi yang mendukung promosi dan penjualan untuk
wilayah di luar kota Bogor.
3. Belum memiliki sarana yang dapat menjual produk secara mobile yang bisa
diakses kapan saja dan dimana saja.
4. Terhambatnya proses transaksi yang menyebabkan kurangnya kepuasan
konsumen.

3. RUMUSAN MASALAH
Dengan memperhatikan masalah proyek diatas serta berdasarkan hasil diskusi dengan
pihak Produsen Kaos Anak, maka dapat dirumuskan permasalahannya yaitu
Bagaimana menerapkan sistem penjualan berbasis web dan mobile di Produsen Kaos
Anak.

4. KETERBATASAN
Adapun keterbatasan dari penerapan ini adalah:
a. Beberapa konsumen lebih percaya datang langsung ke tempat penjualan.
b. Fisik dan kualitas barang terkadang tidak sesuai dengan yang diharapkan, karena
konsumen hanya dapat melihat melalui foto yang ada di website.
c. Tidak semua konsumen percaya dengan sistem toko online.

STIKOM BINANIAGA BOGOR |

12

C. MAKSUD DAN TUJUAN PROYEK
Maksud dan tujuan yang akan dicapai pada proyek ini adalah terciptanya sistem penjualan
yang mampu mengontrol stok barang, proses transaksi, serta adanya media yang dapat
menawarkan produk kepada konsumen secara luas, dari mana saja, dan kapan saja

D. SIGNIFIKASI PROYEK
Proyek ini dibangun karena adanya masalah dalam pengontrolan stok barang dan penjadwalan
pengiriman kepada konsumen

serta belum adanya media penjualan yang menarik untuk

membantu meningkatkan penghasilan pada Produsen Kaos Anak.
Proyek ini menekankan informasi mengenai jenis – jenis produk yang dijual pada Produsen
Kaos Anak, konfirmasi pembayaran dari konsumen, dan status pengiriman produk kepada
konsumen.

E. PENDEKATAN PROYEK
1. Feasibility
a. Kelayakan Ekonomi
II

Biaya-biaya

Tahun 0

Tahun 1

Tahun 2

Tahun 3

1. Biaya Pengadaan
a. Biaya pembelian perangkat keras

4.500.000

b. Biaya instalasi perangkat keras

200.000

c.

500.000

Biaya sewa web server
Total Biaya Pengadaan

5.200.000

2. Biaya Operasional
a. Biaya

perlengkapan

perangkat

lunak sistem
Total Biaya Operasional

1.000.000
1.000.000

3. Biaya Akomodasi
Akomodasi dan Transportasi

200.000

Total Biaya Akomodasi

200.000

Operasional
a. Biaya Dokumentasi

STIKOM BINANIAGA BOGOR |

13

Kertas, fotocopy, print

150.000

Total Biaya Dokumentasi

150.000

b. Biaya Penerapan Sistem
Biaya pelatihan admin

300.000

Total Biaya Penerapan Sistem

300.000

4. Biaya operasi dan perawatan
a. Biaya Personil
b. Biaya perawatan software
Total Biaya-biaya

II

6.850.000

Manfaat – manfaat

Tahun 0

300.000

500.000

600.000

1.400.000

1.500.000

1.800.000

1.700.000

2.000.000

2.400.000

Tahun 1

Tahun 2

Tahun 3

Keuntungan berwujud
a. Pengurangan biaya operasi

1.000.000

1.000.000

1.500.000

800.000

850.000

900.000

Pengurangan biaya persediaan

1.000.000

1.000.000

1.500.000

Total keuntungan berwujud

2.800.000

2.850.000

3.900.000

a. Peningkatan kinerja staff

2.500.000

3.000.000

4.000.000

b. Peningkatan kepuasan kinerja staff

1.500.000

1.500.000

2.000.000

c.

1.000.000

1.500.000

1.500.000

operasional
Total keuntungan tak berwujud

5.000.000

6.000.000

7.500.000

Total manfaat

7.800.000

8.850.000

11.400.000

6.100.000

6.850.000

9.000.000

b. Pengurangan kesalahan proses
c.

Keuntungan tak berwujud

Peningkatan

Selisih

total

pelayanan

manfaat

dengan

total biaya

Tabel 1. Economic feasibility

STIKOM BINANIAGA BOGOR |

14

Metode Return On Investment (ROI)
Persentase manfaat yang dihasilkan oleh proyek ini dibandingkan dengan biaya yang
dikeluarkannya atau besarnya keuntungan yang bisa diperoleh dalam(%) selama periode yang
telah ditentukan
Manfaat
manfaat tahun ke-1

= Rp. 7.800.000

manfaat tahun ke-2

= Rp. 8.850.000

manfaat tahun ke-3

= Rp. 11.400.000

Total Manfaat

= Rp. 28.050.000

Biaya
Biaya tahun ke-0

= Rp. 6.850.000

Biaya tahun ke-1

= Rp. 1.700.000

Biaya tahun ke-2

= Rp. 2.000.000

Biaya tahun ke-3

= Rp. 2.400.000

Total Biaya

= Rp. 12.950.000

ROI

=

Total Manfaat – Total Biaya * 100%
Total biaya

ROI

=

28.050.000– 12.950.000 *100%
12.950.000

=

15.100.000 *100%
12.950.000

=

1,17*100%

=

117%

Suatu proyek investasi yang mempunyai ROI (Return Of Investment) lebih besar dari 0 adalah
proyek yang dapat diterima. Pada nilai ROI proyek ini adalah 117%, maka akan dikatakan
proyek ini dapat diterima, karena proyek ini akan memberikan keuntungan sebesar 117% dari
biaya investasinya.

STIKOM BINANIAGA BOGOR |

15

b. Kelayakan Operasional
Item Penilaian

Penilaian

Ketersediaan teknologi

Mudah

Kemampuan menggunakan sistem operasi

Mudah

Kemampuan sistem informasi yang menghasilkan

Baik

Tabel 2. Kelayakan Operasional

Ketersediaan teknologi dalam pengembangan sistem penjualan untuk kelancaran
pengiriman promosi kepada konsumen dikatakan cukup layak dan mampu karena
ketersediaan yang ada mencakup semua komponen yang dibutuhkan untuk
menggunakan sistem penjualan dan juga kemampuan dalam menggunakan
sistem informasi sangat baik.

c. Kelayakan Teknis
Item Penilaian

Penilaian

1. Kebutuhan Perangkat Lunak :
Operating Sistem(OS)

: Semua Operating Sistem

Browser

: Mozila Firefox , Google
Chrome, Opera, Safari

Web Server

: WAMP Server

Programming Language

: Java Script, Ajax, PHP

Script Pendukung

: HTML5, CSS3

Mudah

2. Kebutuhan Perangkat Lunak Mobile
3. Operating Sistem(OS)

: Android 2.3 (Ginger Bread)
atau lebih

4.
Processor

: Snapdragon Prosesor atau
lebih

Ram

: 512 MB

Tabel 3. Kelayakan Teknis

STIKOM BINANIAGA BOGOR |

16

Semua komponen diatas mengenai spesifikasi kebutuhan akan penunjang sistem
mudah ditemukan diberbagai tempat komputer karena spesifikasi diatas adalah
spesifikasi standar untuk komputer.

d. Legal Feasibility (Kelayakan Legal)
Secara hukum sistem penjualan ini telah memenuhi aturan dan undang-undang
yang berlaku dikarenakan sistem ini menggunakan perangkat lunak legal.

e. Schedule Feasibility (Kelayakan Jadwal)
No

Kegiatan

Id Kegiatan

1.

Perencanaan

1

2.

- Identifikasi masalah

1.1

3.

- Perumusan masalah

1.2

4.

Analisis

2

5.

- Analisa kebutuhan sistem

2.1

6.

Perancangan

3

7.

- Design Database

3.1

8.

- Design System

3.2

4.

Implementasi

4

9.

- Pengujian

4.1

10.

- Dokumentasi

4.2

11.

- Delivery Product

4.3

12.

- Instalasi Sistem

4.4

13

- Perawatan dan Evaluasi

4.5

Tabel 4. Tabel data aktifitas proyek

STIKOM BINANIAGA BOGOR |

17

Id

No

Waktu

Waktu

Waktu

Waktu

optimistis

realistis

pesimistis

(a)

(m)

(b)

(ET)

Kegiatan

yang
diharapkan

1

1.1.

5

7

10

7.17

2

1.2

5

7

10

7.17

3

2.1

2

4

7

4.17

4

3.1

5

7

10

7.17

5

3.2

5

7

10

7.17

6

4.1

1

2

2

1.83

7

4.2

1

1

2

1.17

8

4.3

1

1

1

1.00

9

4.4

1

1

2

1.17

10

4.5

2

5

6

4.67

28

42

60

42.67

Total

Tabel 5. Tabel waktu yang diharapkan

ET =

( )

Keterangan Formula :
ET= Expected Time | a = Waktu optimis | b = Waktu Pesimis | m = Waktu Realistis

STIKOM BINANIAGA BOGOR |

18

2. Penjadwalan

Gambar 1 Penjadwalan

3. Pemikiran Teoritis
3.1. World Wide Web (WWW)
Awalnya intenet adalah sebuah proyek yang dimaksudkan untuk menghubungkan para
ilmuwan dan peneliti di Amerika, namun saat ini telah tumbuh menjadi media
komunikasi global yang dipakai semua orang di muka bumi. Pertumbuhan ini membawa
beberapa masalah penting mendasar, di antaranya kenyataan bahwa Internet tidak
diciptakan pada jaman graphical user interface (GUI) seperti saat ini. Internet dimulai
pada masa dimana orang masih menggunakan alat-alat akses yang tidak user-friendly
yaitu terminal berbasis teks serta peintah-perintah command-line yang panjang-panjang
dan sukar diingat, sangat berbeda dengan komputer dewasa ini yang menggunakan
klik tombol mouse pada layar grafik berwarna.

STIKOM BINANIAGA BOGOR |

19

3.2. Cross-Platform
Adalah istilah dalam teknologi informasi mengenai sebuah perangkat lunak yang dapat
digunakan di beberapa sistem operasi yang berbeda (Microsoft Windows, Linux, Mac
OS, BSD, aplikasi mobile, dan lainnya ). Umumnya perangkat lunak yang memiliki
kemampuan lintas platform adalah perangkat lunak bebas.
Contoh perangkat lunak yang memiliki kemampuan lintas platform ini antara lain:
• Apache HTTP Server
• MySQL
• PHP

3.3. Phonegap
PhoneGap adalah sebuah kerangka kerja/framework open source yang dipakai untuk
membuat aplikasi cross-platform mobile dengan HTML5, CSS3, dan JavaScript.
PhoneGap menjadi suatu solusi yang ideal untuk seorang pengembang aplikasi web
yang tertarik dalam pembuatan aplikasi di smartphone. PhoneGap juga merupakan
solusi ideal bagi mereka yang tertarik untuk membuat sebuah aplikasi yang dapat
berjalan pada beberapa perangkat smartphone dengan basis kode yang sama. Artinya,
cukup hanya dengan 1 kali coding saja, anda dapat membuat aplikasi untuk
smartphone iPhone, Android, Blackberry, Symbian dan Windows Phone. PhoneGap
juga tidak memerlukan coding secara terpisah untuk masing-masing platform. Dengan
PhoneGap kita dapat menghemat waktu dalam membuat aplikasi untuk beberapa
smartphone dengan sekaligus dan hanya dibekali pengetahuan tentang HTML5, CSS3,
dan JavaScript semua dapat menggunakan PhoneGap. Hal ini bisa disebut dengan
cross-platform karena PhoneGap dapat membuat aplikasi pada beberapa smartphone
dengan hanya 1 coding.

3.4. E-commerce
E-commerce merupakan satu set dinamis teknologi, aplikasi, dan proses bisnis yang
menghubungkan perusahaan, konsumen, dan komunitas tertentu melalui transaksi
elektronik dan perdagangan barang, pelayanan, dan informasi yang dilakukan secara
elektronik, David Baum (1999, pp. 36-34).
E-commerce sebagai suatu teknik penjualan secara elektronis, yang bisa dilakukan dari
jarak jauh (teknologi marketing) yang digunakan di luar toko. Untuk tempat yang jauh
sekalipun

tetap

dilakukan

perdagangan

dengan

memanfaatkan

e-commerce.

Perubahan cara dan bentuk perdagangan telah mengubah, menggeser dan
menaklukkan cara bisnis global yang tidak mengenal jarak dan waktu. Kegiatan yang

STIKOM BINANIAGA BOGOR |

20

dilakukan juga menjadi tidak banyak lagi diwakili oleh tenaga manusia di saat terjadi
peningkatan keterpaduan telekomunikasi dan komputasi secara integral. Berdagang
lewat elektronik merupakan tantangan dan ancaman bagi perdagangan tradisional.

3.5. Javascript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi
klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas.
Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi
masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript
bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

3.6. Pemrograman Database
Definisi dari database adalah kumpulan dari beberapa data dalam jumlah banyak,
saling berhubungan dan mempunyai arti tertentu (Riyanto, 2003). Database secara
global terdiri dari kumpulan tabel yang berisi baris dan kolom. Tiap baris dan tabel
mewakili satu unit data yang disebut dengan record dan kolom di dalam tabel (disebut
dengan field) merupakan keterangan dari masing-masing record.

3.7. Web Server
Web Server adalah sebuah perangkat lunak server yang berfungsi menerima
permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan
mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya
berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah Apache dan
Microsoft Internet Information Service (IIS). Apache merupakan web server antarplatform, sedangkan IIS hanya dapat beroperasi di sistem operasi Windows.

3.8. Toko Online
Pertama kali bermula pada tahun 1990 Tim Berners-Lee menciptakan browser web
WorldWideWeb yang mengubah jaringan telekomunikasi akademik menjadi sistem
komunikasi untuk semua orang setiap hari secara mengglobal yang dikenal dengan
nama Internet.
Pada awalnya penggunaan Internet bertujuan komersial dilarang dengan keras. Ini
dikarenakan adanya larangan commercial network traffic oleh National Science
Foundation’s (NSFNET) yang merupakan backbone Internet.

STIKOM BINANIAGA BOGOR |

21

Tahun 1991 NSF menghapus larangan untuk tujuan komersial dan saat itulah
membuka jalan bagi electronic commerce (e-commerce). Hanya saja, tidak semua
kebijakan mengenai komersial dicabut. Baru pada tanggal 30 April 1995, batasan
komersial yang paling terakhir dicabut.
Jika menelusuri sejarah, maka Pizza Hut-lah yang menjadi perusahaan paling pertama
mendirikan toko online. Mereka menyediakan fasilitas pemesanan online atau
pengiriman ke rumah untuk testing pada tahun 1994 di Santa Cruz, California. Pada
tahun 2007 seluruh daerah sudah mendapatkan opsi dalam sistemnya. Pada akhir
tahun 2000, banyak perusahaan Eropa dan Amerika menyediakan fasilitas pelayanan
melalui World Wide Web. Semenjak saat itulah, orang mulai mengasosiasikan istilah
“ecommerce” sebagai kemampuan untuk membeli berbagai produk melalui Internet.
Sekedar untuk diketahui, istilah ecommerce waktu zaman sebelumnya lebih mengarah
ke transaksi secara online/elektronik.
Berlanjut pada tahun 1995, Amazon muncul sebagai toko buku online. Belakangan
perusahan tersebut menyadari barang dagangan lainnya juga memiliki permintaan
yang tinggi, sehingga pada akhirnya mengadakan perluasan dengan menjual berbagai
komoditas. Sekarang perusahaan ini sudah memiliki 20.700 karyawan dengan
keuntungan net US$902 juta pada tahun 2009.
Sekarang, hampir toko nyata (di dunia nyata) memiliki toko online. Berkat semakin
cepatnya koneksi dan majunya teknologi, sektor penjualan online sangat berkembang
dan terkenal. Sekarang pun, orang terkadang lebih memilih membeli online daripada ke
toko karena alasan kenyamanan dan perbandingan harga yang menarik.
Berikut timeline perkembangan toko online:
1982 :
1987 :
1990 :
1992 :
1994 :

1995 :

1998 :
1999 :

France Telecom (Perancis) memperkenalkan Minitel yang digunakan untuk
pemesanan online.
Swreg mulai menyediakan account kepada pembuat software dan shareware
untuk menjual produk mereka.
Tim Berners-Lee menulis browser web pertama, WorldWideWeb, digunakan ke
komputer NeXT
J.H. Snider dan TerraZiporyn mempublikasi buku Future Shop:How New
Technologies Will Change the Way We Shop and What We Buy
Netscape merilis browser Navigator di Oktober dengan nama kode Mozilla.
Pizza Hut menyediakan fasilitas pemesanan online pada halaman web-nya.
Bank Online pertama dibuka
Jeff Bezos merilis Amazon.com dan merupakan stasiun radio internet,
komersial-gratis
24
jam.
Dell dan Cisco mulai menggunakan Internet untuk transaksi online secara
intensif.
eBay dibuat oleh Pierre Omidyar dengan nama AuctionWeb
Perangko pos elektronik dapat dibeli dan di-download untuk diprint dari web.
Business.com, yang dibeli seharga $149.000 di tahun 1997, dijual kepada

STIKOM BINANIAGA BOGOR |

22

2000 :
2002 :
2003 :
2007 :
2008 :

eCompanies
sebesar
$7.5
juta.
Filesharing peer-to-peer Napster diluncurkan.ATG Stores diluncurkan untuk
menjual barang dekorasi rumah secara online.
Terjadi dot-com bust.
eBay mengakuisisi PayPal sebesar $1.5 miliar.
Amazon.com mengumumkan profit tahunan pertama.
Business.com diakuisisi oleh R.H Donnelley sebesar $345 juta.
Penjualan US eCommerce dan Online Retail diproyeksikan akan mencapai
$204 miliar, meningkat sebesar 17% dari tahun 2007.
(Tim Penelitian dan Pengembangan Wahana Komputer Yogyakarta, 2006)
(Anggit Masri Mutsanni Aplikasi Online Diakses dari: http/repository.amikom.ac.id)
(http://www.computesta.com)

4. Kerangka Identifikasi Pemecahan Masalah
Pengembangan yang diterapkan pada sistem penjualan untuk Produsen Kaos Anak
adalah sebagai berikut :

Administrator

Halaman Input
Administrator

Database
Aplikasi Mobile
Halaman Pengguna

Pengguna

Gambar 2 Kerangka Identifikasi Pemecahan Masalah

4.1. Konsepsi
Perancangan sistem ini menggunakan bahasa pemrograman Javascript , Ajax dan PHP
untuk versi web dan menggunakan teknologi dari Phonegap Cordova untuk pembuatan
sistem pada perangkat mobile. Selain itu, proyek ini juga menggunakan mySQL
sebagai database,sehingga tewujud sebuah aplikasi terintegrasi yang mampu
mengolah data setiap transaksi yang dilakukan oleh pengguna baik via website maupun
mobile secara akurat.

STIKOM BINANIAGA BOGOR |

23

5. Analisis
5.1. Gambaran Umum Pabrik
Setelah lulus di Universitas Guna Dharma dua orang yang baru saja menikah bertekad
untuk berwirausaha. Aris Dwantoro dan Anne Setia Fajarine mulai menawarkan produk
pakaian dari pintu ke pintu dan dilanjutkan dengan pameran-pameran. Tidak berhenti
begitu saja, mereka mengembangkan melalui kerjasama di luar kota, seperti Surabaya
dan Bandung. Sampai pada akhirnya memiliki lokasi sendiri di Yasmin Bogor dengan
nama Pabrik : Produsen Kaos Anak.

5.2. Analisis Sistem
a. Pengumpulan data


Observasi (Pengamatan Lapangan), mengenai tata cara atau proses kinerja
setiap staff dalam memasarkan produk yang mereka jual.



Wawancara, menanyakan tentang kebutuhan staf administrator dan pabrik. Ini
merupakan data yang didapat dari hasil wawancara langsung tanpa diolah
terlebih dahulu.

b. Analisa data


Menganalisa jenis produk dan ukuran yang akan dijual.



Menganalisa frekuensi pembelian berdasarkan gender.

c. Persiapan proposal


Menyajikan analisis biaya.



Mempersiapkan proposal.



Menyajikan proposal.

F. PEMODELAN DAN STRUKTUR
1. ARSITEKTUR
Gambar

di

atas

menggambarkan

tatacara

yang

dilakukan

selama

proses

pengembangan, dengan rincian sebagai berikut :

STIKOM BINANIAGA BOGOR |

24

Database Server

Perangkat Mobile

Kabel USB
(proses pengembangan)

Personal
Computer

Gambar 3 Arsitektur

a. Perangkat Keras
No
1
2
3
4
5
6
7

Perangkat Keras
Prosesor
Memori
Layar
I/O Ports
HDD
Dell Streak 5
Kabel Data Dell

Spesifikasi
AMD Quad-Core A8-4500M up to 2.8 GHz
4GB DDR3
14’’ HD LED LCD 1366x768
USB 3.0
500 GB
5” 1GHz Snapdragon prosesor, 512 MB memori
USB 2.0

Tabel 6. Perangkat Keras

b. Perangkat Lunak
No
1
2
3
4
5

Perangkat Lunak
Sistem Operasi
Sistem Operasi Mobile
Aplikasi
Database
Driver

Spesifikasi
Windows 8.1 Enterprise 64 bit
Android 2.3 Gingerbread
Bluefish, Android Developer Tools
MySQL
Dell Streak USB Driver

Tabel 7. Perangkat Lunak

c. Jaringan
Dalam proses pengembangan proyek ini, pelaksana menggunakan koneksi lokal
selama proses pengembangan versi web, dan menggunakan koneksi wifi (WiFi
ADB), kabel USB untuk keperluan pengujian aplikasi ke mobile serta koneksi
internet (melalui webhosting) dalam pengujian database untuk aplikasi versi
mobile.

STIKOM BINANIAGA BOGOR |

25

2. IMPLEMENTASI
2.1 Implementasi Database
Proyek ini menggunakan database MySQL dalam penerapannya. Berikut adalah
informasi table yang digunakan dalam proyek ini:

Gambar 4 Database

STIKOM BINANIAGA BOGOR |

26

Pada versi web, proyek ini tidak menggunakan framework yang biasanya memiliki fitur
anti sql injection, karena bertujuan untuk membuat

isi website yang lebih ringan,

disamping itu, keamanan source code database kurang terjaga. Untuk mengatasi
masalah ini pelaksana menggunakan stored procedure di dalam setiap perintah akses
database. Berikut adalah daftar stored procedure yang terdapat pada proyek ini :

Gambar 5 Stored Procedure

STIKOM BINANIAGA BOGOR |

27

2.2. Implementasi Interface
2.2.1. Versi Web

Halaman di atas merupakan halaman awal ketika website kaosanak.hoashops.com di akses.
Pengguna dapat langsung melihat detail produk dengan cara mengklik gambar dari setiap
produk yang ditampilkan. Pelanggan juga dapat melakukan penyaringan produk sesuai
dengan harga, produk terbaru, dan kepopularitasan produk pada halaman ini.
Gambar 6 Halaman Awal

STIKOM BINANIAGA BOGOR |

28

Pada halaman ini keterangan dan gambar dari produk ditampilkan dengan lebih jelas
dan lebih detail, halaman ini juga memiliki fitur untuk mengecek lama pengiriman
produk ke tempat pengguna. Data pada database yang sampai saat proyek ini dibuat
merupakan data dari layanan JNE sebagai kurir yang digunakan oleh pemilik.
Gambar 7 Halaman Detail Produk

STIKOM BINANIAGA BOGOR |

29

Halaman ini merupakan halaman untuk konfirmasi kepada pengguna setelah
pengguna website melakukan pemilihan produk. Terdapat 2 pilihan, pilihan untuk
memilih produk lainnya atau selesai memilih produk dan melakukan proses
selanjutnya.
Gambar 8 Halaman Konfirmasi

Halaman ini merupakan perincian dari produk yang sudah dipilih oleh pengguna.
Pengguna website dapat menghapus produk yang sudah dipilih dan juga dapat
mengubahnya sesuai dengan keinginan.
Gambar 9 Halaman Tas Belanja

STIKOM BINANIAGA BOGOR |

30

Pada halaman ini pengguna diminta untuk login ke dalam sistem untuk dapat
melanjutkan proses selanjutnya.
Gambar 10 Halaman Login

Setelah login, informasi dari pengguna ditampilkan pada halaman ini. Halaman ini
merupakan halaman konfirmasi untuk alamat pengiriman produk.
Gambar 11 Halaman Informasi Pengiriman

STIKOM BINANIAGA BOGOR |

31

Halaman terakhir dalam proses pemesanan produk. Pelanggan diminta untuk
mencatat nomor pemesanan untuk keperluan konfirmasi jika pelanggan sudah
melakukan pembayaran ke produsen kaos anak.
Gambar 12 Halaman Informasi Pembayaran

Pelanggan yang sudah melakukan pembayaran wajib melakukan konfirmasi. Hal ini
dapat dilakukan melalui halaman di atas atau melalui sms. Setelah pelanggan
melakukan konfirmasi, maka pihak administrasi dari produsen kaos anak akan
mengurus pengiriman produk kepada pelanggan.

Gambar 13 Halaman Konfirmasi Pembayaran

STIKOM BINANIAGA BOGOR |

32

Gambar 14 Halaman Login Administrator

Gambar 15 Halaman Utama Administrator

STIKOM BINANIAGA BOGOR |

33

Gambar 16 Halaman Input Produk

2.2.2. Versi Mobile

Gambar 17 Halaman Utama Versi Mobile
(pada emulator)

STIKOM BINANIAGA BOGOR |

34

Gambar 18 Halaman Detail Produk Versi Mobile
(pada emulator)

Gambar 19 Halaman Utama Mobile

STIKOM BINANIAGA BOGOR |

Gambar 20 Halaman Detail Produk Mobile

35

2.3. Implementasi Phonegap Cordova

Pelaksana melakukan implementasi teknologi Phonegap Cordova di lingkungan sistem
operasi Android, dengan rincian sebagai berikut:

2.3.1. Perangkat Android Yang Didukung
Android 2.1
Android 2.2
Android 2.3
Android 3.x
Android 4.x

2.3.2. Instalasi SDK + Cordova



Download

dan

install

SDK

Android

di

http://developer.android.com/sdk/index.html


Download salinan terbaru dari PhoneGap dan ekstrak isinya.

2.3.3 Mengatur variabel lingkungan PATH di Windows


Dari Desktop, klik kanan My Computer dan klik Properties.



Klik tautan Advanced System Settings di kolom sebelah kiri.



Di bagian System Properties klik tombol Environment Variables.



Pilih variabel PATH dari bagian variable System.



Pilih tombol Edit.



Tambahkan path SDK Android direktori platform-tools dan tools. Di contoh
ini digunakan "C:\Android\android-sdk-windows" sebagai direktor dimana
SDK ter-install. Tambahkan teks berikut pada kotak teks:


;C:\ Android \android-sdk-windows\platform-tools;C:\ Android \android-sdkwindows\tools

STIKOM BINANIAGA BOGOR |

36



Simpan hasil perubahan. Tutup dialog Environment Variables.



Sebagai tambahan, mungkin perlu menambahkan %JAVA_HOME%\bin ke
PATH juga. Untuk memeriksa apakah hal tersebut diperlukan, eksekusi
perintah di command prompt dengan ketik java. Jika program tidak dapat
ditemukan maka tambahkan %JAVA_HOME%\bin ke PATH. Anda mungkin
perlu menyertakan path lengkap dibanding hanya menuliskan variabel
lingkungan %JAVA_HOME%.



Terakhir, mungkin butuh menyertakan %ANT_HOME%\bin ke PATH juga.
Untuk memeriksa apakah hal tersebut diperlukan, eksekusi perintah di
command prompt dengan ketik ant. Jika program tidak dapat ditemukan
maka tambahkan %ANT_HOME%\bin ke PATH. Anda mungkin perlu
menyertakan

path

lengkap

dibanding

hanya

menuliskan

variabel

lingkungan %ANT_HOME%.

2.3.4 Buat Project Baru


Buka terminal



Di sebuah terminal, arahkan ke direktori bin dalam sub-folder android dari
distribusi Cordova. Misalnya :

cd C:\Android\phonegap\lib\android\bin



Ketik create
kemudian tekan "Enter". Misalnya :

create C:\Android\project\itpm com.pka.kaosanak KaosAnak

adalah path ke proyek Android Cordova Android yang baru
adalah nama paket, misalnya. com.YourCompany.YourAppName
adalah nama proyek, misalnya YourApp

STIKOM BINANIAGA BOGOR |

37

Buka Eclipse/ADT, dan pilih menu Other :

Gambar 21 Membuat Project Baru

Gambar 22 Import Project Phonegap

STIKOM BINANIAGA BOGOR |

38

Gambar 23 Selesai Import

Pilih direktori yang tadi digunakan sebagai
Klik Finish.
Jika proyek anda memiliki tanda silang (X) merah yang menyatakan artinya ada
masalah, ikuti langkah-langkah berikut:

Klik kanan di folder proyek.
Di dialog Properties yang tampil pilih Android dari panel navigasi.
Untuk target pembangungan proyek pilih Android API level tertinggi dari yang telah terinstall.
Klik OK
Kemudian dari blok menu Project pilih Clean.
Seharusnya hal tersebut memperbaiki semua error di proyek.

STIKOM BINANIAGA BOGOR |

39

2.3.5 Implementasi teknologi HTML5, AJAX, JSON ke perangkat mobile
Selanjutnya adalah membuat aplikasi pada perangkat mobile sistem operasi
Android kemudian pada perangkat mobile lainnya seperti Blackberry dan iOS. Hal
tersebut dapat dilakukan hanya dengan sekali melakukan pemograman,
kemudian diimplementasikan pada ke 2 sistem operasi lainnya diatas.
Langkah-langkah implementasi adalah sebagai berikut:

1. Buka folder proyek dimana aplikasi phonegap cordova sebelumnya dibuat,
kemudian buka folder www seperti di bawah ini
C:\Android\project\itpm\assets\www
2. Kopikan seluruh file HTML5 dan lainnya di folder www seperti di bawah ini:

Gambar 24 Isi Folder www
Catatan : di dalam folder www harus terdapat file index agar phonegap cordova
berjalan.
3. Jika semua langkah sudah diterapkan, lakukan proses seperti di bawah ini:

Gambar 25 Menjalankan Aplikasi

STIKOM BINANIAGA BOGOR |

40

Gambar 26 Hasil Implementasi Pada Perangkat Mobile

Untuk mengimplementasikan pada perangkat mobile lainnya, dapat dilakukan melalui
website dengan cara login ke https://build.phonegap.com/ kemudian klik sign in.

Gambar 27 Halaman Login Phonegap Build

Buatlah zip file dari seluruh isi file yang ada di dalam foder www pada langkah
sebelumnya kemudian klik private-> upload a zip, pilih file zip tersebut untuk membuat
aplikasi baru.

STIKOM BINANIAGA BOGOR |

41

Gambar 28 Upload File ZIP
Setelah proses upload selesai, klik ready to build!

Gambar 29 Pembuatan Aplikasi
Kemudian klik icon nama proyek/ikon phone seperti di bawah ini :

Gambar 30 Pilih Proyek
Selanjutnya klik pada masing-masing ikon sistem operasi untuk unduh installer pada
masing-masing perangkat mobile yang sesuai dengan sistem operasinya.

Gambar 31 Unduh Installer

STIKOM BINANIAGA BOGOR |

42

2.3.6 Menjalankan aplikasi ke Perangkat
Pastikan USB debugging sudah diaktifkan di perangkat kemudian hubungkan ke
sistem anda dengan memastikan terlebih dahulu usb driver untuk perangkat telah
terinstall. Klik kanan di proyek kemudian pilih Run As > Android Application.

G. IMPLIKASI
1. Banyak bisnis yang mencoba untuk memperoleh keunggulan bersaing dengan
menggunakan teknologi web dalam berinteraksi dengan para konsumen. Oleh sebab
itu, teknologi yang terdapat pada web, khususnya HTML5 dan CSS 3 baik diterapkan
dalam website agar konsumen merasakan kenyamanan saat berbelanja, bukan hanya
keindahan yang diberikan oleh CSS 3 dalam membuat style halaman web, tetapi juga
halaman yang responsive dan animasi yang diberikan sehingga pengguna berkeinginan
kembali untuk mengunjungi website maupun aplikasi mobile Produsen Kaos Anak.
2. Proyek

ini

juga

menyediakan

solusi

bagi

pengguna

yang

lebih

suka

mengakses/berbelanja melalui perangkat mobile dengan teknologi Phonegap Cordova.

SARAN
Berdasarkan hasil penelitian yang telah dilakukan, teknologi yang sudah diterapkan pada
proyek ini tidak bisa berjalan dengan maksimal dalam hal desain dan animasi yang terdapat
pada versi web maupun versi perangkat mobile, jika dalam proses pengambilan gambar
produk tidak sesuai dengan resolusi yang sudah ditetapkan. Maka penulis memberikan saran
untuk :
1. Mengubah resolusi gambar produk sesuai dengan resolusi yang sudah ditentukan
sebelum diupload ke webhosting.
2. Memperhatikan besar setiap file yang di upload, karena akan menambahkan waktu
memuat pada halaman web maupun mobile.

STIKOM BINANIAGA BOGOR |

43

H. DAFTAR PUSTAKA
[1]http://wiki.phonegap.com/w/page/16494 772/FrontPageMeier, Get Started Guide.
[2]http://www.phonegap.com, Phonegap Overview.
[3]Jon Reid, jQuery Mobile, O’Reilly books, 2011.
[4]Meyer, Jeanine. Games to Learn HTML5 and JavaScript. New York: Friendsof, 2010.
[5]Akhmad Dharma Kasman, Kolaborasi Dahsyat ANDROID dengan PHP dan MySQL, 2013.

STIKOM BINANIAGA BOGOR |

44

I. TENTANG PELAKSANA

Samuel Febrian
Lahir di Bogor pada tanggal 21 Feb