IMPLEMENTASI

F. PEMODELAN DAN STRUKTUR

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 (pada emulator)

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:



;C:\ Android windows\platform-tools;C:\ Android

\android-sdk-windows\tools

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

sebelumnya kemudian klik private-> upload a zip, pilih file zip tersebut untuk membuat

aplikasi baru.

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.