BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Spesifikasi yang Diperlukan 4.1.1 Spesifikasi Piranti Keras Berikut merupakan spesifikasi piranti keras yang digunakan pada saat melakukan pengujian e-book reader berbasis Web: a. Spesifikasi piranti keras pada local server: Processor : Intel Pentium IV 1.8 Ghz Memory : 512 MB Hard Disk : 40 GB VGA Card : 32 MB Monitor dengan resolusi 1280 x 800 CD- ROM / DVD-ROM Keyboard Mouse Ethernet Card / Modem, koneksi internet b. Spesifikasi piranti keras pada client: Processor : Intel Pentium IV 1.8 Ghz Memory : 512 MB Hard Disk : 40 GB VGA Card : 32 MB Monitor dengan resolusi 1280 x 800 159
160 CD-ROM / DVD-ROM Keyboard Mouse Ethernet Card / Modem, koneksi internet 4.1.2 Spesifikasi Piranti Lunak Berikut merupakan spesifikasi piranti lunak yang digunakan pada saat melakukan pengujian e-book reader berbasis Web: a. Spesifikasi piranti lunak pada local server: Operating System : Microsoft Windows XP Professional Web Server : Apache 2.2.11 dalam paket XAMPP 1.7.1 Bahasa Pemrograman : PHP version 5.2.9 DBMS : MySQL version 5.1.33 b. Spesifikasi piranti lunak pada client: Operating System : Microsoft Windows XP Professional Web Browser : Mozilla Firefox version 3.0.17 Adobe Flash Player Plugin version 10.0.32.18 4.2 Panduan Instalasi 4.2.1 Panduan Instalasi pada Local Server Berikut merupakan tahap-tahap instalasi pada local server saat melakukan pengujian aplikasi:
161 a. XAMPP 1.7.1 (termasuk PHP 5.2.9, Apache 2.2.11 dan MySQL 5.1.33) 1. Langkah pertama, pilih bahasa yang akan digunakan selama tahap instalasi. Ada dua bahasa yang tersedia yakni english dan deutch. Setelah itu klik next. Gambar 4.1 Pilih Bahasa Instalasi 2. Langkah kedua, klik next pada halaman ini. Halaman ini merupakan halaman pembuka. Gambar 4.2 Halaman Pembuka Instalasi 3. Langkah ketiga, pilih lokasi instalasi. Secara default, lokasi instalasi akan ditempatkan pada c:\xampp. Untuk memilih lokasi yang
162 diinginkan, dapat mengetikkan langsung pada kotak yang tersedia atau menekan tombol browse untuk mencari lokasi. Gambar 4.3 Halaman Pilih Lokasi Instalasi 4. Langkah keempat, pilih/centang Install Apache as Service dan Install MySQL as Service pada bagian Service Section. Kemudian klik install untuk lanjut ke tahap instalasi. Gambar 4.4 Halaman Pilih Service
163 5. Langkah kelima, halaman ini adalah halaman instalasi. Halaman ini menunjukkan file-file yang diekstrak ke dalam komputer. Gambar 4.5 Halaman Proses Instalasi 6. Langkah keenam, muncul halaman pemberitahuan tahap instalasi selesai. Klik finish pada halaman ini. Gambar 4.6 Halaman Instalasi Berhasil
164 7. Langkah ketujuh, setelah proses instalasi berhasil, sistem memeriksa port yang dibutuhkan. Gambar 4.7 Halaman Pemeriksaan Port 8. Langkah kedelapan, klik OK pada halaman ini. Halaman ini merupakan halaman petunjuk agar user memakai xampp control panel untuk memanage service. Gambar 4.8 Halaman Petunjuk Penggunaan 9. Langkah terakhir, halaman ini merupakan halaman ucapan selamat atas keberhasilan instalasi serta pertanyaan apakah ingin segera memulai xampp service atau tidak. Tekan Yes untuk mulai segera, atau No untuk nanti. Gambar 4.9 Halaman Proses Instalasi Selesai
165 b..net Framework 2.0 (agar dapat melakukan instalasi MySQL Workbench) 1. Langkah pertama, halaman ekstraksi akan tampil. Halaman ini untuk mengekstrak file-file yang akan digunakan pada proses instalasi untuk sementara waktu ke dalam komputer. Gambar 4.10 Halaman Ekstraksi 2. Langkah kedua, pada halaman pembuka ini klik next untuk melanjutkan tahapan instalasi. Gambar 4.11 Halaman Pembuka Proses Instalasi
166 3. Langkah ketiga, klik install pada halaman persetujuan lisensi ini. Sebelumnya, centang pada kotak yang bertuliskan I accept the terms of the License Agreement. Gambar 4.12 Halaman Persetujuan Lisensi 4. Langkah keempat, menunggu proses instalasi selesai. Gambar 4.13 Halaman Proses Instalasi
167 5. Langkah terakhir, menekan/memilih tombol finish untuk mengakhiri proses instalasi. Gambar 4.14 Halaman Proses Instalasi Selesai c. MySQL Workbench 5.1.18 (tool untuk membantu mempermudah pengembangan program terutama dalam mengelola basis data) 1. Langkah pertama, klik next pada halaman pembuka ini. Gambar 4.15 Halaman Pembuka Proses Instalasi
168 2. Langkah kedua, pilih/centang pada tipe aturan instalasi complete untuk meng-install program secara default (dianjurkan). Untuk memilih lokasi instalasi atau memilih program yang ingin dan tidak ingin di-install, dapat memilih tipe aturan instalasi custom. Gambar 4.16 Halaman Pilih Tipe Aturan Instalasi 3. Langkah ketiga, menampilkan halaman yang berisi konfirmasi dari apa yang dipilih dari tipe aturan instalasi dan lokasi instalasi. Bila setuju klik install bila ingin merubah, klik back. Gambar 4.17 Halaman Konfirmasi
169 4. Langkah keempat, menunggu proses instalasi. Gambar 4.18 Halaman Proses Instalasi Program 5. Langkah terakhir, klik finish untuk mengakhiri proses instalasi program ini. Gambar 4.19 Halaman Proses Instalasi Selesai
170 d. Cara men-deploy kode sumber PHP untuk situs Digibook Untuk men-deploy, caranya tinggal meng-copy folder Digibook (folder yang berisikan kode sumber untuk situs Digibook) ke dalam folder xampp/htdocs. Untuk bisa menjalankan fungsi pengiriman email yang dibutuhkan oleh situs Digibook, buka file php.ini yang terdapat pada folder xampp/php. Cari kata-kata extension=php_openssl.dll, kemudian hilangkan tanda titik koma di depannya apabila ada. Jika konfigurasi url dan alamat koneksi basis data tidak seperti kondisi default, maka bisa mengganti konfigurasi base_url pada file config.php di folder Digibook/system/application/config. Untuk konfigurasi basis data, pada file database.php di folder Digibook/system/application/config. e. Cara memasukkan halaman e-book ke basis data (sebagai data dummy) 1. Buka halaman pada e-book sebagai sumber data. Gambar 4.20 Halaman E-book pada PDF
171 2. Kemudian copy teks yang terdapat pada halaman tersebut ke dalam salah satu fitur yang terdapat pada Flex, yaitu Rich Text Editor. Gambar 4.21 Tampilan Rich Text Editor pada Flex 3. Hilangkan enter pada teks, kemudian pilih font Arial, ubah ukuran tulisan menjadi 14, dan pilih posisi tulisan menjadi justify. Tambahkan indent agar awal paragraf menjorok ke dalam. Gambar 4.22 Tampilan Rich Text Editor Setelah Teks Dirapikan
172 4. Hilangkan property color pada teks HTML, hal ini dimaksudkan agar warna tulisan dapat diganti di dalam e-book reader nantinya. Dalam hal ini digunakan software bantuan Notepad++ untuk mempercepat proses penghilangan. Gambar 4.23 Tampilan Teks pada Notepad++ 5. Simpan gambar yang digunakan agar dapat dimasukkan juga ke dalam basis data. Gambar 4.24 Gambar dari Halaman PDF
173 6. Setelah gambar disimpan, maka tuliskan syntaks HTML agar gambar dapat ditampilkan. Gambar 4.25 Sumber Gambar dari Halaman PDF 7. Setelah itu copy seluruh teks HTML, kemudian paste di dalam database yang digunakan. Gambar di bawah merupakan tampilan yang akan dikeluarkan di e-book reader. Gambar 4.26 Tampilan Akhir di E-book Reader
174 f. Cara men-deploy basis data ke MySQL menggunakan teknik forward enginering 1. Buka file ERD.mwb Gambar 4.27 Halaman MySQL Workbench untuk File ERD.mwb 2. Pada menu, pilih Database, Forward Engineering. Akan muncul jendela seperti gambar di bawah. Pastikan beberapa item sudah dicentang seperti pada gambar. Kalau sudah lanjutkan dengan menekan next. Gambar 4.28 Halaman Opsi untuk Forward Engineering
175 3. Pastikan untuk mencentang opsi-opsi seperti pada gambar di bawah. Kalau sudah kembali tekan next. Gambar 4.29 Halaman Opsi untuk Forward Engineering 2 4. Akan muncul jendela yang menampilkan script yang akan dieksekusi oleh MySQL. Tekan next untuk melanjutkan. Gambar 4.30 Halaman Script untuk Dieksekusi oleh MySQL
176 5. Muncul jendela yang meminta parameter untuk koneksi ke MySQL. Secara default, tidak ada yang perlu diubah, cukup melanjutkan dengan menekan execute. Gambar 4.31 Halaman Isi Parameter untuk Koneksi ke MySQL 6. Jendela terakhir menunjukkan bahwa eksekusi dengan teknik forward engineering berhasil dilakukan. Basis data sudah terbentuk dan siap digunakan. Gambar 4.32 Halaman Berhasil Melakukan Forward Engineering
177 4.2.2 Panduan Instalasi Pada Client Berikut merupakan tahap-tahap instalasi pada client saat melakukan pengujian aplikasi: a. Mozilla Firefox version 3.0.17 1. Langkah pertama, menunggu sistem mengekstrak file-file yang dibutuhkan untuk proses instalasi ke dalam komputer. Gambar 4.33 Halaman Ekstraksi File-file 2. Langkah kedua, klik next untuk melanjutkan tahap instalasi pada halaman pembuka ini. Gambar 4.34 Halaman Pembuka
178 3. Langkah ketiga, pilih tipe aturan instalasi standard untuk meng-install program secara default (dianjurkan). Untuk memilih lokasi instalasi atau memilih program yang ingin dan tidak ingin di-install, dapat memilih tipe custom. Centang pada kotak yang bertuliskan Use Firefox as my default web browser. Kemudian klik next untuk melanjutkan proses instalasi. Gambar 4.35 Halaman Pilih Tipe Aturan Instalasi 4. Langkah keempat, klik install untuk memulai proses instalasi program ke dalam komputer. Halaman ini menunjukkan lokasi instalasi dari pemilihan tipe aturan instalasi yang sebelumnya dipilih. Gambar 4.36 Halaman Konfirmasi Lokasi Instalasi
179 5. Langkah kelima. Halaman ini merupakan halaman pengaturan shortcut. Bila ingin menampilkan shortcut pada desktop, start menu, dan quick launch bar, maka pilih/centang semua kotak yang tersedia. Kemudian pilih next. Gambar 4.37 Halaman Pengaturan Shortcut Program 6. Langkah keenam. Halaman ini menampilkan informasi mengenai di mana shortcut program ingin diletakkan di dalam start menu folder. Pilih lokasi secara default saja dengan mengklik next. Gambar 4.38 Halaman Pemilihan Start Menu Folder
180 7. Langkah ketujuh, menunggu proses instalasi selesai. Gambar 4.39 Halaman Proses Instalasi Berlangsung 8. Langkah terakhir, klik finish untuk mengakhiri proses instalasi dan menampilkan Mozilla Firefox browser. Gambar 4.40 Halaman Proses Instalasi Selesai b. Adobe Flash Player Plugin version 10.0.32.18 1. Klik dua kali pada file.exe nya lalu tunggu hingga proses selesai. Gambar 4.41 Halaman Proses Instalasi Program dari Awal Hingga Selesai
181 4.3 Cara Penggunaan Situs Digibook dan E-book Reader 4.3.1 Halaman Beranda Pengguna yang masuk ke situs Digibook akan berada pada halaman ini. Gambar 4.42 Halaman Beranda
182 4.3.2 Halaman Katalog Pengguna dapat melihat berbagai buku yang tersedia untuk dibaca berdasarkan kategori-kategorinya pada halaman katalog ini. Gambar 4.43 Halaman Katalog
183 4.3.3 Halaman Hubungi Kami Pengguna dapat mengakses halaman ini untuk mendapatkan berbagai cara untuk menghubungi Digibook. Gambar 4.44 Halaman Hubungi Kami
184 4.3.4 Halaman Buku Baru Halaman untuk menampilkan buku-buku baru yang terdapat pada situs Digibook. Gambar 4.45 Halaman Buku Baru
185 4.3.5 Halaman Rekomendasi Halaman untuk menampilkan buku-buku yang direkomendasikan. Gambar 4.46 Halaman Rekomendasi
186 4.3.6 Halaman Pengarang Halaman yang menampilkan daftar para pengarang yang bukunya tersedia pada situs Digibook. Gambar 4.47 Halaman Pengarang
187 4.3.7 Halaman Tentang Pengarang Halaman yang menampilkan informasi singkat tentang seorang pengarang. Gambar 4.48 Halaman Tentang Pengarang
188 4.3.8 Halaman Penerbit Digibook. Halaman yang menampilkan daftar penerbit yang bukunya tersedia pada situs Gambar 4.49 Halaman Penerbit
189 4.3.9 Halaman Tentang Penerbit Halaman yang menampilkan informasi singkat tentang suatu penerbit. Gambar 4.50 Halaman Tentang Penerbit
190 4.3.10 Halaman RSS Halaman untuk menampilkan RSS Feed. Halaman ini sangat bergantung pada RSS Reader milik pengguna. Contoh gambar di bawah merupakan contoh tampilan RSS pada RSS Reader bawaan browser Mozilla Firefox. Gambar 4.51 Halaman RSS Feed
191 4.3.11 Daftar Akun Baru (Registrasi) Para pengguna situs yang belum membuat akun sebelumnya dan ingin membuat akun, dapat melakukannya seturut langkah-langkah sebagai berikut: a. Pengguna mengklik link daftar akun baru yang terdapat pada setiap halaman situs. Form pendaftaran akan muncul dan pengguna mengisi data yang telah tersedia. Berikut penjelasan masing-masing data yang tersedia dan harus diisi oleh pengguna: o Nama pengguna Merupakan username dari pengguna yang akan digunakan pada saat login. o Sandi Merupakan kata sandi atau kode kunci yang dari pengguna yang akan digunakan pada saat login. o Ulang sandi Merupakan tahapan konfirmasi ulang dari sandi yang sudah pengguna masukkan. Tujuannya adalah untuk mencegah kesalahan pengguna dalam mengetikkan sandi yang dimaksudkan. o Nama depan Merupakan informasi nama depan yang harus diisi oleh pengguna yang kemudian akan ditampilkan pada situs sebagai ucapan salam. o Nama belakang Merupakan informasi nama belakang pengguna yang tidak harus diisi oleh pengguna.
192 o Tanggal lahir Merupakan informasi tanggal lahir pengguna yang wajib diisi oleh pengguna. o Provinsi Merupakan informasi tempat tinggal (provinsi) pengguna berada. o Email Pengguna diharuskan mengisi email yang masih berlaku. Hal ini dikarenakan segala informasi yang dibutuhkan sistem terhadap pengguna akan dikirimkan ke email pengguna. o Website Merupakan informasi yang tidak wajib diisikan oleh pengguna. Website ini hanya digunakan untuk menginformasikan bahwa pengguna memiliki website pribadi agar tiap pengguna lainnya dapat mengaksesnya bila perlu. o Kategori buku yang disenangi Kategori buku ini tidak wajib diisi oleh pengguna. Hal ini hanya dipergunakan untuk merekomendasikan buku-buku digital yang tersedia kepada pengguna sesuai dengan kategori buku yang disenangi oleh pengguna. o Kode keamanan Pengguna diberikan serangkaian huruf dan angka yang harus dibaca dan dimasukkan ke bagian konfirmasi kode keamanan. Data seperti ini diberikan untuk menghindari kejahatan spamming.