BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 IMPLEMENTASI Setelah melakukan analisa dan perancangan sistem pada bab 3 terhadap plugin yang akan dibuat, tahapan selanjutannya adalah implementasi dan pengujian terhadap plugin ini. Pada tahap implementasi meliputi spesifikasi kebutuhan system, yang meliputi perangkat lunak dan perangkat keras, dan akan di bahas mengenai implementasi pembuatan basis data serta implementasi perancangan antar muka. 4.1.1 SPESIFIKASI SISTEM Dalam pembuatan plugin ini spesifikasi kebutuhan system menggunakan dua buah perangkat yaitu, perangkat keras dan perangkat lunak. Spesifikasi kebutuhan system pada perancangan plugin ini adalah sebagai berikut : 1. Laptop (hardware) - Processor Intel Core I3 - RAM 4 GB - VGA Intel HD Graphics 2. Perangkat lunak (software) - Windows 7 - XAMPP 3.1.0 - Wordpress 3.5.1 - My SQL 5.5.27 - Google Chrome 31.0.1650.63 4.1.2 IMPLEMENTASI PEMBUATAN BASIS DATA Pada implementasi pembuatan basis data ini perangkat lunak yang digunakan yaitu MySQL. Pada implementasi ini menampilkan basis data dari 63
64 tabel-tabel yang fungsional seperti tabel album dan foto yang terdapat pada album. Keterangan dari masing-masing tabel telah dijelaskan pada tahap analisis dan perancangan bab 3. 4.1.2.1 IMPLEMENTASI PEMBUATAN BASIS DATA WP_CKP_ALBUM Implementasi pembuatan basis data pada tabel wp_ckp_album di tunjukkan pada gambar 4.1 berikut ini: Gambar 4.1 Implementasi pembuatan tabel wp_ckp_album Tampilan tabel wp_ckp_album seperti pada gambar 4.2 sebagai berikut: Gambar 4.2 Tampilan tabel wp_ckp_album 4.1.2.2 IMPLEMENTASI PEMBUATAN BASIS DATA WP_CKP_ALBUM_IMAGES Implementasi pembuatan basis data pada tabel wp_ckp_album_images di tunjukkan pada gambar 4.3 berikut ini:
65 Gambar 4.3 Implementasi pembuatan tabel wp_ckp_album_images Tampilan tabel wp_ckp_album_images seperti pada gambar 4.4 sebagai berikut: Gambar 4.4 Tampilan tabel wp_ckp_album_images 4.1.3 IMPLEMENTASI PERANCANGAN ANTARMUKA (INTERFACE) Implementasi antarmuka (interface) merupakan hasil dari perancangan user interface yang sebelumnya sudah dilakukan pada tahap perancangan. Pada implementasi antarmuka menampilkan rancangan halaman dari plugin dan berisi cara dari pemakaian dari plugin tersebut. 4.1.3.1 IMPLEMENTASI HALAMAN UTAMA PLUGIN Halaman utama dari plugin adalah halaman pertama yang di dapat oleh user yang telah berhasil install plugin tersebut ke dalam direktori wordpress. Gambar 4.5 merupakan halaman utama dari plugin sebagai berikut:
66 Gambar 4.5 Tampilan utama plugin Halaman ini merupakan halaman utama dari plugin CKP ALBUM. Halaman ini akan muncul setelah user membuka plugin pada menu wordpress. 4.1.3.2 IMPLEMENTASI HALAMAN TAMBAH ALBUM Halaman tambah album ini adalah halaman yang di mana user dapat membuat beberapa album foto. User akan otomatis masuk pada halaman ini jika klik tombol MULAI BUAT ALBUM pada halaman utama plugin atau bisa juga dengan mengklik menu plugin yang terdapat pada dashboard wordpress. Berikut adalah halaman tambah album:
67 Gambar 4.6 Tampilan halaman Tambah Album Gambar 4.7 Tampilan halaman Tambah Album pada album KFT TANGERANG STREET HUNTING Pada gambar 4.7 adalah tampilan halaman Tambah album yang telah di buat satu album yang diberi nama KFT TANGERANG STREET HUNTING. User dapat menambahkan beberapa album lagi jika ingin membuat suatu album yang berbeda 4.1.3.3 IMPLEMENTASI HALAMAN TAMBAH FOTO Halaman tambah foto ini adalah halaman yang digunakan untuk menambahkan beberapa foto kedalam album yang telah dibuat sebelumnya.
68 Pada halaman ini user dapat mengedit dan menghapus dari foto yang telah di masukkan ke dalam album. Berikut adalah tampilan halaman tambah foto: Gambar 4.8 Tampilan halaman Tambah Foto Pada gambar di atas merupakan halaman tambah foto yang masih kosong belum terdapat nama album yang akan di masukkan foto. Berikut adalah gambar yang telah terdapat nama album yang ingin di masukkan foto ke dalamnya: Gambar 4.9 Tampilan halaman Tambah Foto terdapat nama album Gambar 4.9 adalah halaman tambah foto yang telah terdapat nama album yang telah di buat pada halaman tambah album. Lalu setelah user memilih maka akan muncul form untuk mengupload foto dan memberikan beberapa informasi tentang foto tersebut, sebagai berikut:
69 Gambar 4.10 Tampilan form Tambah Foto pada album KFT TANGERANG STREET HUNTING Gambar 4. 10 adalah form tambah foto pada album KFT TANGERANG STREET HUNTING User di haruskan mengisi form tersebut jika ingin memasukkan foto ke dalam album tersebut. Dengan memasukkan foto yang di ingin kan, memberikan judul dari foto, memberikan deskripsi tentang foto dan memberikan nomor urut yang nanti nya akan di tampilkan lebiih awal. Gambar 4.11 Tampilan form Tambah Foto yang telah terdapat foto Pada gambar di atas merupakan tampilan halaman tambah foto yang telah di masukkan satu foto ke dalam album KFT TANGERANG STREET HUNTING. Dan selanjutnya user pun dapat menambah kan beberapa foto lagi ke dalamnya serta dapat mengedit dan menghapus foto. 4.1.3.4 IMPLEMENTASI FORM UPLOAD Pada form upload foto user dapat mengupload foto-foto di halaman tambah album pada bagian thumbnail nya dan juga di halaman tambah foto
70 pada bagian upload foto ke dalam album yang telah dibuat. User dapat mengupload sendiri melalui komputer, melalui URL, atau pun melalui library dari wordpress sendiri. Gambar 4.12 form upload melalui komputer Pada form ini user mengupload foto melalui foto yang ada pada komputer dan memasukkan foto tersebut ke dalam library wordpress.
71 Gambar 4.13 Form upload melalui URL Pada form upload melalui ini user dapat mengupload foto melalui URL dari foto yang telah diupload sebelumnya di tempat lain
72 Gambar 4.14 Form upload foto melalui library wordpress Pada form upload foto melalui library wordpress user hanya memilih foto yang telah ada pada library wordpress. Pada form yang sebelumnya yaitu, form upload melalui komputer foto yang telah di upload dapat muncul pada library wordpress karena foto yang diupload otomatis masuk ke dalam library wordpress. 4.1.3.5 IMPLEMENTASI HALAMAN PENGATURAN Pada halaman pengaturan ini user dapat mengatur pada tampilan pop up dari plugin tersebut. Pada popup tersebut akan menampilkan sebuah animasi slideshow yang terdapat foto-foto pada album yang ditampilkan. User dapat menyembunyikan / menampilkan thumbnail pada foto-foto yang di tampilkan pada animasi slideshow.
73 Gambar 4.15 Tampilan halaman Pengaturan 4.1.3.6 IMPLEMENTASI TAMPILAN POP UP ANIMASI SLIDESHOW Pada tahap implementasi ini, terlebih dahulu user harus memasukkan sebuah shortcode pada album yang telah dibuat pada halaman tambah album ke menu posts pada panel wordpress. Yang harus di lakukan user adalah masuk ke halaman tambah album pada menu plugin lalu pilih album yang ingin di masukkan ke dalam posts. Jika sudah pilih album yang ingin di masukkan lalu user tinggal menyalin ulang shortcode yang ada pada tabel album. Berikut tampilannya: Gambar 4.16 Tampilan shortcode yang akan di copy Setelah user memilih album yang ingin di masukkan, user hanya perlu menyalin ulang shortcode yang seperti gambar di atas lalu tempelkan ke dalam posts. Berikut tampilannya:
74 Gambar 4.17 Tampilan posts yang telah di masukkan shortcode Pada gambar 4.17 adalah dimana user telah memasukkan shortcode dari album yang telah dipilih yang ingin di tampilkan.user juga dapat memberikan beberapa kalimat pada isi posts tersebut jika ada tambahan kalimat-kalimat yang mendukung dari album nya. Dengan begini tahapan selanjutnya dengan mengklik tombol publish pada layar sebelah kanan. Lalu setelah di publish maka album telah masuk ke tampilan website. Gambar 4.18 Tampilan album yang telah di publish Setelah muncul seperti gambar di atas yang harus di lakukan user untuk melihat pop up yang berisi animasi slideshow adalah hanya dengan klik
75 foto pada album KFT STREET HUNTING. Lalu akan keluar pop up yang berisi animasi slideshow. Berikut tampilannya: Gambar 4.19 Tampilan animasi slideshow 4.2 IMPLEMENTASI PENGAMBILAN SHORTCODE Pengambilan shortcode pada album sehingga dapat menampilkannya di dalam post penulis menggunakan Shortcode API. Shortcode API telah diperkenalkan pada Wordpress versi 2.5. shortcode adalah tag khusus yang dapat dimasukkan ke dalam posting yang akan diganti dengan isi yang berbeda ketika benar-benar melihat posting di website. Shortcode ditulis dengan menyediakan fungsi pengendali. Pandangan shortcode pada umumnya menyerupai filter wordpress, mereka menerima parameter (atribut) dan mengambilkan hasil (output shortcode). Penamaan shortcode semua menggunakan huruf kecil dan menggunakan semua huruf, tetapi dengan memasukkan angka dan garis bawah dapat bekerja dengan baik juga. Berhati hatilah pada penggunaan tanda hubung (strip), akan lebih baik tidak menggunakannya. Pada wordpress versi 2.5 keatas sudah ditambahkan Shortcode API yaitu set of function to handle shortcode. Ketika menyimpan sebuah postingan, isi dari
76 postingan (post content) di parse dan secara otomatis Shortcode API mengambiil alih atau menghandle tugas ini dan Shortcode API mengubah bentuk shortcode tersebut menjadi bentuk yang seharusnya. Fungsi add_shortcode() digunakan untuk mendaftarkan handler shortcode. Dibutuhkan dua buah parameter yaitu nama shortcode dan nama fungsi callback. Panggilan API untuk mendaftarkan handler shortcode akan terlihat seperti gambar dibawah : Gambar 4.20 contoh panggilan API Shortcode API akan mengurai shortcode yang terdaftar seperti [myshortcode], terpisah dan mengurai atribut sehingga mereka sesuai dengan fungsi handler shortcode. String akan dikembalikan oleh handler shortcode yang nanti nya akan di masukkan ke dalam post di tempat shortcode yang terdapat dalam halaman plugin. Fungsi dari Shortcode API itu sendiri adalah mengembalikan teks yang akan digunakan untuk menggantikan shortcode tersebut. Hanya ada satu hook untuk setiap shortcode, yang berarti bahwa jika plugin lain memiliki shortcode yang sama maka itu akan menimpa mereka. Jadi dalam penamaan shortcode harus lah berbeda jika tidak ingin shortcode plugin saling menimpa plugin lain. 4.3 IMPLEMENTASI UPLOAD PLUGIN KE DIREKTORI PLUGIN WORDPRESS Manfaat dari mengupload plugin di direktori plugin wordpress adalah menyediakan lokasi terpusat bagi pengguna untuk mendownload plugin tersebut, meninggalkan komentar, dapat melihat statistic mengenai berapa banyak orang yang mendownload, dan lain lain. Untuk membantu mendapatkan arah sebelum memulai mengupload plugin ke direktori plugin wordpress, perhatikan gambaran sebagai berikut: Buat dan persiapkan plugin Siapkan file readme.txt
77 Daftar untuk akses ke Repositori Subversion Menunggu persetujuan dan akses informasi Subversion Gunakan software Subversion untuk mengupload file plugin Langkah pertama yang harus dilakukan adalah siapkan file plugin tanpa harus mengkompres apa apa dengan menggunakan zip ataupun tar karena system SVN akan melakukannya secara otomatis berdasarkan isi plugin tersebut. readme.txt adalah satu satu nya berkas lain yang sangat dibutuhkan karena jika memiliki beberapa file plugin mereka akan diupload dan dikelola bersama sama selama proses subversi. 4.3.1 MEMBANGUN BERKAS README.TXT File readme.txt plugin yang digunakan untuk isi dari berbagai halaman dalam daftar plugin yang baik struktur nya adalah sebagai berikut: 1. Nama plugin 2. Deskripsi 3. Instalasi 4. Faq 5. Screenshots 6. Catatan lain 7. Changelog 8. Statistic 9. Admin Pada dasar nya isi dari readme.txt adalah bagian bagian yang disebutkan diatas. Ada berbagai rincian yang diperlukan untuk bagian bagian tertentu, seperti pembukaan informasi Plugin Name, contoh yang lebih spesifik sebagai berikut :
78 Gambar 4.21 contoh file readme.txt Pada gambar 4.21 urutan dapat disusun sesuai dengan yang diinginkan, tetapi semua itu harus terdapat dalam file readme.txt dalam rangka mematuhi pedoman Wordpress dan lulus validasi readme. 4.3.2 SIAPKAN FILE PLUGIN Setelah membuat dan pengujian pada plugin, plugin harus diberikan lisensi. Berikut adalah lisensi yang harus dipenuhi dalam pembuatan plugin dalam Wordpress Codex: Plugin harus kompatibel pada GPLv2 Plugin tidak melakukan sesuatu yang illegal Harus benar benar menggunakan repository Subversion
79 Plugin tidak harus menanamkan link eksternal di situs umum (seperti powered by link) 4.3.3 APA ITU SUBVERSION Pada dasarnya, Subversion adalah perangkat lunak open source yang digunakan untuk lebih mudah mengelola file dan direktori yang berubah dari waktu ke waktu. Artinya adalah bahwa hal ini memungkinkan pengguna Subversion untuk mengembalikan versi sebelumnya dari data yang telah dibuat sebelumnya serta dapat memahami bagaimana hal hal yang telah berubah. Ini sangat berguna untuk mengelola hal hal yang seperti terus menerus mengubah source code dan membuat pengelolaan berbagai plugin jauh lebih mudah. Untuk menggunakan Subversion, disini hanya diperlukan Command Prompt untuk memberikan berbagai macam perintah. Sebagai contoh ada dua set file bekerja, yang pertama file local ( di computer ) dan file jarak jauh ( di server ). Untuk setiap set file, terdapat struktur direktori sebagai berikut : Gambar 4.22 struktur direktori Kebanyakan proyek perangkat lunak, termasuk Wordpress, menggunakan control versi untuk melacak kode sumber mereka dan revisi dibalik layar, dan merilis versi perangkat lunak secara berkala untuk kepentingan umum. Sejak Wordpress 1.5, Wordpress telah menggunakan instalasi Subversion sendiri untuk control versi. Sebagian besar pengguna Wordpress tidak akan menggunakan Subversion, karena mereka hanya akan menginstal versi rilis dari Wordpress. Namun, pengembang plugin dan tema
80 mungkin mereka ingin menguji perangkat lunak terhadap versi pengembangan terbaru dari Wordpress, dan orang orang yang tertarik berkontribusi untuk Wordpress dengan menguji atau memperbaiki bug juga akan perlu memiliki akses ke kode yang ada di pembangunan. Kode perkembangan ini tersedia di Subversion. Pada tahapan ini, peng upload telah diberikan akses ke repository SVN dan siap untuk meng upload file. Untuk memulai tugas ini, biasakan diri dengan dasar dasar penggunaan Subverssion dengan Wordpress. Untuk menggunakan Subversion, akan memerlukan beberapa software. Subversion menjalankan serangkaian perintah. melalui Terminal (pada Mac) atau Command Prompt (pada Windows). 4.3.4 DAFTAR UNTUK AKSES KE REPOSITORY PLUGIN Setelah plugin telah siap untuk digunakan, kunjungi halaman Sign up untuk mendaftar di wordpress Gambar 4.23 Form registrasi wordpress
81 Setelah account telah dikonfirmasi setup account tersebut dan atur repository. Dengan cara masuk ke Developer Center dan pilih Add your plugin. Pada tampilan berikutnya, akan terdapat sebuah inputan data-data plugin seperti nama plugin, deskripsi singkat tentang plugin serta URL plugin. Gambar 4.24 Form Add Your Plugin Pastikan nama plugin benar-benar final karena setelah diberikan akses ke repository maka tidak dapat mengubah nama. Jangan terlalu menghabiskan banyak waktu untuk menyusun deskripsi karena itu semua dapat diberikan secara detail dalam file README. URL untuk homepage plugin tidak harus berlaku tetapi pastikan bahwa URL yang ditentukan adalah homepage plugin benar-benar hidup 4.3.5 MENYIAPKAN REPOSITORY Setelah memberikan informasi tentang plugin dan mengirim permintaan untuk mengakses repository, langkah selanjutnya adalah
82 melakukan pemeriksaan awal repository. Penulis menggunakan TortoiseSVN dalam pemeriksaan awal repository ini. Jika plugin telah disetujui dan Wordpress Team telah mengirimkan email go ahead and get started ke email yang telah dibuat pada pembuatan account wordpress, langkah selanjutnya adalah buat sebuah folder untuk menyimpan plugin. Klik kanan pada folder yang telah dibbuat dan pilih SVN Checkout dari menu dropdown. Masukkan URL untuk repository plugin di kotak pertama dan pastikan pada kotak kedua terdapat nama folder plugin. Gambar 4.25 SVN Checkout Sekarang repository kosong telah siap dan menunggu plugin yang ingin dimasukkan ke dalam repository. Jika folder dibuka, maka akan terdapat tiga sub-folder Branches, Tags, dan Trunk. Gambar 4.26 Tampilan Sub-folder
83 Setelah itu masukkan file plugin ke dalam sub-folder trunk lalu tambahkan file plugin tersebut ke source control. Untuk melakukan perintah itu pilih perintah add Gambar 4.27 Add Source Control pada file plugin Perintah ini untuk menginstruksikan subversi untuk mulai memantau file plugin tersebut. Selanjutnya jalankan perintah Commit Gambar 4.28 Perintah Commit
84 Perintah Commit ini akan benar-benar menyerahkan basis kode plugin untuk repository plugin Wordpress. 4.4 PENGUJIAN Setelah tahap implementasi tahapan selanjutnya adalah tahap pengujian. Pada tahapan ini di uraikan mengenai scenario pengujian, dokumen hasil pengujian dan analisis hasil pengujian. 4.4.1 SKENARIO PENGUJIAN Skenario pengujian merupakan pengujian terhadap plugin ini yang di bangun menggunakan PHP dan jquery. Skenario pengujian meliputi pengujian perangkat lunak terhadap fungsionalitas plugin yang berfungsi menguji kesesuaian terhadap proses yang terjadi dalam system. Pengujian plugin ini menggunakan metode black box testing, yang dimana metode ini lebih menitik beratkan kepada kebutuhan fungsi dari plugin ini. Pengujian metode ini dilakukan dengan cara memberikan sejumlah masukkan kepada plugin yang kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk menghasilkan keluaran yang diinginkan. Apabila keluaran yang diberikan proses menghasilkan keluaran yang sesuai dengan spesifikasi yang telah di rancang, maka plugin ini telah dianggap benar. Akan tetapi apabila keluaran yang dihasilkan tidak sesuai dengan kebutuhan fungsionalnya, maka masih terdapat kesalahan kesalahan pada plugin tersebut. Skenario pengujian dapat di lihat pada tabel berikut ini : N o 1 2 3 Skenario Pengujian upload plugin ke direktori wordpress Aktivasi plugin Pengujian Tampilan Prosedur Pengujian Pilih add new plugin pada panel wordpress Pilih Activate pada kolom plugin Pilih tombol Muat Buat Album Hasil yang di harapkan Plugin berhasil di upload ke dalam direktori wordpress Plugin berhasil di aktivasi dan siap untuk digunakan Menampilkan halaman Tambah Album Hasil
85 4 5 6 7 8 Utama Pengujian halaman Tambah Album Pengujian halaman Tambah Foto Pengujian halaman Pengatura n Pengujian Menu Tab disetiap halaman Pengujian popup animasi slideshow Pilih tombol Upload Image Pilih tombol Simpan Album Pilih tombol Delete Album Pilih combobox Pilih Album Pilih tombol Upload Foto Pilih tombol Simpan Foto pada form Tambah Foto Pilih tombol Simpan Foto pada form Edit Foto Pilih tombol Hapus Foto Klik checkbox Pilih tombol Simpan Pilih Menu Tab Menampilkan foto yang akan diupload Album akan tersimpan ke database Album akan dihapus dari database Menampilkan form tambah foto dan edit foto Menampilkan foto yang akan diupload Menyimpan foto ke dalam Album dan database Menyimpan hasil edit ke dalam database Menghapus foto di Album dan database Menampilkan tanda ceklist pada checkbox Menyimpan pengaturan pada tampilan animasi slideshow Pindah ke halaman yang Menu Tab yang dipilih Menampilkan foto Pilih tombol Next selanjut nya dan dan Previous sebelumnya Pilih tombol Play Menampilkan slideshow Pilih tombol Expand Menampilkan ukuran foto image yang lebih besar Pilih tombol close Menutup tampilan popup Output thumbnail Menampilkan thumbnail foto X Output social Menampilkan tombol sharing share twitter Tabel 4.1 Skenario Pengujian 4.4.2 KESIMPULAN HASIL PENGUJIAN Kesimpulan dari hasil pengujian pada Tabel 4.1 adalah dari semua menu dan tombol telah berfungsi dengan yang di inginkan serta tampilan
86 popup animasi slideshow pun berfungsi dengan seharusnya walupun masih ada sedikit error pada output thumbnail pada animasi slideshow, itu terbukti dengan suksesnya seluruh percobaan pada metode black box yang telah dilakukan sebelumnya.