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

STIKOM BINANIAGA BOGOR |

2

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

STIKOM BINANIAGA BOGOR |

3

LEMBAR PERSETUJUAN

PEMBUATAN SISTEM PENJUALAN TERINTEGRASI BERBASIS WEB DAN

MOBILE CROSS PLATFORM UNTUK PRODUSEN KAOS ANAK

Dilaksanakan Oleh :

Disetujui dan disahkan Oleh :

STIKOM BINANIAGA BOGOR |

4

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

STIKOM BINANIAGA BOGOR |

5

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

STIKOM BINANIAGA BOGOR |

6

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

STIKOM BINANIAGA BOGOR |

7

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

STIKOM BINANIAGA BOGOR |

8

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.

STIKOM BINANIAGA BOGOR |

9

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 berbeda-beda 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.

STIKOM BINANIAGA BOGOR |

10

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.

STIKOM BINANIAGA BOGOR |

11

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.

STIKOM BINANIAGA BOGOR |

12

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.

STIKOM BINANIAGA BOGOR |

13

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.

a. Biaya pembelian perangkat keras 4.500.000

b. Biaya instalasi perangkat keras 200.000

c. Biaya sewa web server 500.000

Total Biaya Pengadaan 5.200.000

2. Biaya Operasional

a. Biaya perlengkapan perangkat lunak sistem

1.000.000

Total Biaya Operasional 1.000.000

3. Biaya Akomodasi

Akomodasi dan Transportasi 200.000

Total Biaya Akomodasi

Operasional

200.000

STIKOM BINANIAGA BOGOR |

14

Tabel 1. Economic feasibility

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 300.000 500.000 600.000

b. Biaya perawatan software 1.400.000 1.500.000 1.800.000

Total Biaya-biaya 6.850.000 1.700.000 2.000.000 2.400.000

II Manfaat – manfaat Tahun 0 Tahun 1 Tahun 2 Tahun 3

Keuntungan berwujud

a. Pengurangan biaya operasi 1.000.000 1.000.000 1.500.000

b. Pengurangan kesalahan proses 800.000 850.000 900.000

c. Pengurangan biaya persediaan 1.000.000 1.000.000 1.500.000

Total keuntungan berwujud 2.800.000 2.850.000 3.900.000

Keuntungan tak berwujud

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. Peningkatan pelayanan operasional

1.000.000 1.500.000 1.500.000

Total keuntungan tak berwujud 5.000.000 6.000.000 7.500.000

Total manfaat 7.800.000 8.850.000 11.400.000

Selisih total manfaat dengan

total biaya

STIKOM BINANIAGA BOGOR |

15

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

STIKOM BINANIAGA BOGOR |

16

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

2. Kebutuhan Perangkat Lunak Mobile

3. Operating Sistem(OS) : Android 2.3 (Ginger Bread)

4. atau lebih

Processor : Snapdragon Prosesor atau

lebih

Ram : 512 MB

Mudah

STIKOM BINANIAGA BOGOR |

17

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

STIKOM BINANIAGA BOGOR |

18

Tabel 5. Tabel waktu yang diharapkan

ET = ( )

Keterangan Formula :

STIKOM BINANIAGA BOGOR |

19

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

STIKOM BINANIAGA BOGOR |

20

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).

STIKOM BINANIAGA BOGOR |

21

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

antar-platform, 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

STIKOM BINANIAGA BOGOR |

22

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 : France Telecom (Perancis) memperkenalkan Minitel yang digunakan untuk pemesanan online.

1987 : Swreg mulai menyediakan account kepada pembuat software dan shareware untuk menjual produk mereka.

1990 : Tim Berners-Lee menulis browser web pertama, WorldWideWeb, digunakan ke komputer NeXT

1992 : J.H. Snider dan TerraZiporyn mempublikasi buku Future Shop:How New Technologies Will Change the Way We Shop and What We Buy

1994 : Netscape merilis browser Navigator di Oktober dengan nama kode Mozilla. Pizza Hut menyediakan fasilitas pemesanan online pada halaman web-nya. Bank Online pertama dibuka

1995 : 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

STIKOM BINANIAGA BOGOR |

23

eCompanies sebesar $7.5 juta.

Filesharing peer-to-peer Napster diluncurkan.ATG Stores diluncurkan untuk menjual barang dekorasi rumah secara online.

2000 : Terjadi dot-com bust.

2002 : eBay mengakuisisi PayPal sebesar $1.5 miliar. 2003 : Amazon.com mengumumkan profit tahunan pertama.

2007 : Business.com diakuisisi oleh R.H Donnelley sebesar $345 juta.

2008 : 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 :

Gambar 2 Kerangka Identifikasi Pemecahan Masalah

4.1. Konsepsi

STIKOM BINANIAGA BOGOR |

24

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

STIKOM BINANIAGA BOGOR |

25

Gambar 3 Arsitektur

a. Perangkat Keras

Tabel 6. Perangkat Keras

b. Perangkat Lunak

No Perangkat Lunak Spesifikasi

1 Sistem Operasi Windows 8.1 Enterprise 64 bit

2 Sistem Operasi Mobile Android 2.3 Gingerbread

3 Aplikasi Bluefish, Android Developer Tools

4 Database MySQL

5 Driver 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.

No Perangkat Keras Spesifikasi

1 Prosesor AMD Quad-Core A8-4500M up to 2.8 GHz

2 Memori 4GB DDR3

3 Layar 14’’ HD LED LCD 1366x768

4 I/O Ports USB 3.0

5 HDD 500 GB

6 Dell Streak 5 5” 1GHz Snapdragon prosesor, 512 MB memori

STIKOM BINANIAGA BOGOR |

26

2. IMPLEMENTASI

2.1 Implementasi Database

Proyek ini menggunakan database MySQL dalam penerapannya. Berikut adalah informasi table yang digunakan dalam proyek ini:

STIKOM BINANIAGA BOGOR |

27

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 :

STIKOM BINANIAGA BOGOR |

28

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.

STIKOM BINANIAGA BOGOR |

29

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.

STIKOM BINANIAGA BOGOR |

30

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.

STIKOM BINANIAGA BOGOR |

31

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.

STIKOM BINANIAGA BOGOR |

32

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.

STIKOM BINANIAGA BOGOR |

33

Gambar 14 Halaman Login Administrator

STIKOM BINANIAGA BOGOR |

34

Gambar 16 Halaman Input Produk

2.2.2. Versi Mobile

Gambar 17 Halaman Utama Versi Mobile

STIKOM BINANIAGA BOGOR |

35

Gambar 20 Halaman Detail Produk Mobile Gambar 18 Halaman Detail Produk Versi Mobile

(pada emulator)

STIKOM BINANIAGA BOGOR |

36

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:



STIKOM BINANIAGA BOGOR |

37

 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 :

 Ketik create <project_folder_path> <package_name> <project_name> kemudian tekan "Enter". Misalnya :

<project_folder_path> adalah path ke proyek Android Cordova Android yang baru

<package_name> adalah nama paket, misalnya. com.YourCompany.YourAppName

<project_name> adalah nama proyek, misalnya YourApp cd C:\Android\phonegap\lib\android\bin

STIKOM BINANIAGA BOGOR |

38

Buka Eclipse/ADT, dan pilih menu Other :

Gambar 21 Membuat Project Baru

STIKOM BINANIAGA BOGOR |

39

Gambar 23 Selesai Import

Pilih direktori yang tadi digunakan sebagai <project_folder_path>

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 ter-install.

Klik OK

Kemudian dari blok menu Project pilih Clean.

STIKOM BINANIAGA BOGOR |

40

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:

STIKOM BINANIAGA BOGOR |

41

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

STIKOM BINANIAGA BOGOR |

42

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.

STIKOM BINANIAGA BOGOR |

43

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.

STIKOM BINANIAGA BOGOR |

44

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.

STIKOM BINANIAGA BOGOR |

45

I. TENTANG PELAKSANA

Samuel Febrian

Lahir di Bogor pada tanggal 21 Februari 1990, anak pertama dari tiga bersaudara, seseorang yang selalu mengucap syukur karena memiliki keluarga yang istimewa. Baginya keluarga adalah kadoh yang paling istimewa yang pernah dia dapat. Seorang yang menyukai programming, teknologi dan olahraga sepakbola, suka mengikuti kuliah online yang sesuai minatnya untuk mengisi waktu, seorang yang tidak menyukai belajar, tetapi hobi mengupgrade diri, Berorientasi pada proses dan hasil. Selalu mengarahkan diri pada cita-citanya.

Mata kuliah favorit : Information Technology Project Minor & Interpersonal skill.