BAB IV HASIL DAN PEMBAHASAN 4.1 Pengembangan Sistem Langkah pertama dalam mengembangkan sistem dari sebuah aplikasi adalah dimulai dari mengumpulkan data sesuai kebutuhan yaitu data admin, pelanggan/sohibul, paket hewan qurban dan data konfirmasi yang dibuat ke dalam bentuk basis data. Basis data berfungsi sebagai acuan data dalam menjalankan aplikasi, sehingga aplikasi dapat dioperasikan apabila sumber data tersedia dalam bentuk basis data. Setelah basis data sudah dibuat, maka langkah selanjutnya adalah mengimplementasikan sistem aplikasi dengan basis data dan desain User Interface aplikasi yang telah dibuat sebelumnya agar aplikasi dapat digunakan oleh pengguna sesuai kebutuhan. 4.2 Pembuatan Database 4.2.1 Web Hosting & Nama Domain Langkah pertama pada instalasi website adalah membuat akun pada web hosting dan nama domain. Untuk website ini peneliti menggunakan situs kuncihost.com untuk membuat web hosting dan nama domain. Untuk website PPHQ AMM Kotagede memilih domain.com dan hosting server singapore. Saat pemilihan hosting dan domain juga terdapat memori database yang akan digunakan, untuk website ini memilih memori 500Mb. Berikut tampilan home kuncihost.com Gambar 4.1 Tampilan home kuncihost.com 41
Setelah pembelian atau membuat akun web hosting dan nama domain, maka database MySQL akan terinstal otomatis dan dapat digunakan. Berikut tampilan database Gambar 4.2 Pembuatan database dengan phpmyadmin Gambar 4.3 Tabel data users 42
Gambar 4.4 Tabel data order 43
4.3 Instalasi Wordpress Pada cpanel Setelah memiliki domain dan hosting server, kemudia instalasi wordpress menggunkan CPANEL, dengan link pphqamm.com/cpanel. kemudian masukkan username dan password yang telah diberikan oleh penyedia hosting. Informasi tentang username dan password untuk masuk ke cpanel sudah terdapat pada email informasi aktivitas akun hosting yang akan dikirimkan setelah hosting diaktifkan. berikut tampilan cpanel Gambar 4.5 Login cpanel Setelah masuk ke dalam cpanel, kemudian memilih wordpress yang terdapat pada bagian softaculous apps installer di home cpanel atau saat pertama masuk. Berikut logo wordpress yang akan dipilih Gambar 4.6 softaculous apps installer 44
Kemudian akan muncul tampilan wordpress untuk penginstalan wordpress, sebelum instalasi wordpress, sebaiknya mengisi data data pada form penginstalan wordpress, antara lain : Choose protocol, pilih salah satu http:// atau http://www, dan apabila domain mendukung SSL, bisagunakan yang HTTPS. Namun jika belum paham maksud dari penggunaan protokol ini, lebih baik untuk awal-awal pilih yang HTTP biasa saja. Choose domain, pilih domain yang akan diinstal WordPress Site name, isi dengan nama atau judul situs Site description, berisi tagline atau penjelasan singkat akan situs Username, nama pengguna yang akan digunakan saat login ke halaman dashboard admin wordpress Password, kata sandi untuk login Email, gunakan alamat email yang masih aktif, karena nantinya segala notifikasi default yang berasal dari situs, akan dikirimkan ke alamat email ini Gambar 4.7 Instalasi wordpress 45
4.2 Antarmuka Untuk mengimplementasikan aplikasi, rancangan desain user interface harus diubah ke dalam Bahasa pemrograman yaitu menggunakan Bahasa pemrograman PHP. 4.2.1 Halaman Admin 4.2.1.1 Halaman Login Admin Halaman login digunakan oleh admin untuk dapat masuk ke halaman website, dengan memasukkan username atau email dan password yang telah dibuat saat pembelian hosting dan domain Berikut ini adalah halaman login dengan link pphqamm.com/wp-admin Gambar 4.8 Halaman login admin 46
4.2.1.2 Halaman Dashboard Admin Menu ini adalah tampilan pertama setelah berhasil login. Halaman ini biasanya berisi shortcut dimana dapat melihat versi wordpress, theme yang digunakan, jumlah postingan, dan lain-lain (info umum penggunaan CMS). Berikut tampilan dashboard untuk admin. Gambar 4.9 Halaman dashboard admin 47
4.2.1.3 Menu Post Menu post adalah menu yang berfungsi sebagai membuat dan merubah artikel postingan. Menu post pada dashboard terbagi menjadi beberapa sub menu penggunaannya berbeda yaitu sebagai berikut 1 All Post: berfungsi sebagai tempat daftar dan jumlah postingan 2 Add New: berfungsi untuk menambah post baru. 3 Categorie: berfungsi untuk petunjuk kategori tulisan pada blog. yang 4 Tags: Berbeda dengan kategori tags berfungsi sebagai penandaan yang hampir sama dengan kategori. Gambar 4.10 Menu post 48
4.2.1.4 Menu Media Menu media adalah menu yang berfungsi sebagai penyimpan file foto, musik, video, dan dokumen lainnya yang berekstensikan pdf, docx, xlsx dan lainnya. Menu media pada dashboard terbagi menjadi beberapa sub menu yang masing-masing sub menu mempunyai fungsi sebagai berikut: Library: berfungsi untuk mengetahui semua jumlah file yang di upload pada website yang dikelola. Add New: Berfungsi untuk tempat admin dapat menambahkan file, video, gambar, dll. Gambar 4.11 Menu media 49
4.2.1.5 Menu Pages Menu page berfungsi untuk membuat halaman yang sifatnya permanen. Menu ini memungkinkan untuk membuat hanya satu halaman postingan. Pages tidak bisa dibagi per category atau tags seperti menu Posts. Pages merupakan tampilan satu halaman, dan biasanya dijadikan menu-menu di tampilan frontend (halaman depan) website. Menu pages pada dashboard terbagi menjadi beberapa sub menu yang mempunyai fungsi sebagai berikut : All Pages: Berfungsi untuk melihat semua jumlah halaman Add New: Berfungsi untuk membuat Halaman baru. Gambar 4.12 Menu pages 50
4.2.1.6 Menu Comments Menu ini berfungsi untuk melihat semua komentar yang masuk ke wordpress. Seperti diketahui, wordpress telah dilengkapi dengan sistem komentar sehingga memudahkan pengguna untuk saling berinteraksi dengan pengunjung website. Di menu ini dapat memfilterisasi, delete, menyatakan komentar sebagai spam, dan approve komentar yang terpending. Gambar 4.13 Menu comments 51
4.2.1.7 Menu Appearance Menu ini mengatur semua tampilan halaman depan website. Bisa bergan tema, memasang header, logo, membuat susunan menu-menu website, mengatur background website, dan bahkan mengubah struktur coding themes yang sedang digunakan tanpa melalui cpanel hosting. WordPress memiliki fasilitas editor themes. Melalui menu ini juga dapat diatur widget/ sidebar website. Gambar 4.14 Menu appearance 52
4.2.1.8 Menu Plugins Menu ini berfungsi untuk menambahkan plugins atau script pendukung kemampuan WordPress. WordPress sangat fleksibel sebagai CMS opensource. WordPress didukung developer yang sangat banyak untuk membantu mengembangkan website. Plugins punya fungsi yang beragam, dan biasanya hal-hal yang dilakukan plugins tidak bisa dilakukan oleh packaging CMS WordPress yang ada. Plugins juga bisa berarti penambahan. Gambar 4.15 Menu plugins 53
4.2.1.9 Menu Users Menu ini tempat mengatur siapa saja yang menjadi admin website dan dapat juga menambah serta menghapus admin website. Pada menu ini dapat mengatur daya akses pengguna CMS. Menu users memungkinkan CMS wordpress bisa berlaku sebagai website forum atau portal berita atau situs e-commerce yang kompleks dengan sistem registrasi, user, dan hak akses.berikut penjelasan sub menu yang ada di menu users: All Users: Untuk melihat semua pengguna yang memeberikan kontribusi terhadap website. Add New: Menambahkan pengguna baru pada website. Your Profile: Melihat profil sendiri. Gambar 4.16 Menu users 54
4.2.1.10 Menu Tools Menu ini memungkinkan mengeksport semua data website dalam bentuk XML dan sebaliknya juga bisa mengimport data. Hal ini sangat membantu jika ingin pindah hosting atau ingin membackup data website. Gambar 4.17 Menu tools 55
4.2.1.11 Menu Settings Menu ini berfungsi mengatur semua data CMS wordpress yang telah terinstall ini. Baik itu mengatur tampilan frontend, bahkan fungsi backend. Biasanya plugin yang terinstall dan tambah ke wordpress, akan mempunyai menu pengaturan tersendiri. Menu pengaturan ini biasanya akan disisipkan developer ke Menu Settings di dashboard. Berikut fungsi sub menu yang ada di menu settings: General: pengaturan umum pada website seperti kata-kata, header website, gambar product, dll. Writting: pangaturan menulis yaitu pengaturan yang digunakan sebagai pengaturan media postingan seperti menu font, dll. Reading: pengaturan untuk para pembaca ketika membuka homepage website. Discussion: Untuk mengatur diskusi di website seperti comment pada postingan. Media: Pengaturan penyimpanan file yang di upload pada website. Permalinks: Pengaturan custom URL website. Gambar 4.18 Menu settings 56
4.2.1.12 Menu Contacs Menu contacs adalah menu tambahan yang digunakan untuk pengguna saat mengirimkan kritik dan saran kepada admin PPHQ AMM Kotagede, yang bertujuan untuk mengetahui kritik dan saran pelanggan terhadap perkembangan website PPHQ AMM Kotagede. Di menu contacs ini admin dapat menambah, menghapus dan merubah data yang ada Gambar 4.19 Menu contacs 57
4.2.1.13 Menu Testimoni Menu ini menampilkan testimoni pelanggan yang telah mengirimkan testimoni di halaman testimoni. Menu ini hampir sama dengan menu contacs, hanya perbadaanya kalau menu testimoni dihubungkan dengan http://docs.google.com/. Di menu testimoni ini admin dapat menambah, menghapus dan merubah testimoni yang ada Gambar 4.20 Menu testimoni 58
4.2.1.14 Menu Paket Di menu paket ini admin dapat menambah, merubah dan menghapus data paket hewan qurban yang tersedia. Menu ini menampilkan paket hewan qurban dengan berbagai tipe, bobot dan harga yang berbeda-beda. Gambar 4.21 Menu paket 59
4.2.2 Halaman Pelanggan/Sohibul 4.2.2.1 Halaman Home Berikut adalah halaman home yang merupakan tampilan utama dari website dan muncul saat pertama kali website terbuka. Terdapat banyak fitur seperrti search, social media dan fitur berlanggan. Gambar 4.22 Halaman home 60
4.2.2.2 Halaman Paket Halaman paket menampilkan berbagai paket harga hewan quraban seperti kambing, sapi dan 1/7 sapi. Halaman ini terdapat tombol order untuk memudahkan pelanggan saat ingin membeli hewan qurban. Gambar 4.23 Halaman paket 4.2.2.3 Halaman Tipe Hewan Qurban Halaman ini menampilkan tipe hewan qurban yang telah dipilih oleh pelanggan. Gambar 4.24 Halaman tipe hewan qurban 61
4.2.2.4 Form Order atau Form Pemesanan Form pemesanan muncul saat pelanggan menekan tombol order sekarang saat dihalaman tipe hewan qurban. Form ini menampilkan data untuk diisi seperti nama, email, nomor telepon, alamat dan info tambahan. Gambar 4.25 Form pemesanan 62
4.2.2.5 Halaman Cara Order Halaman ini menampilkan cara order atau cara pesan hewan qurban, serta ada penjelasan cara order dan konfirmasi pembayaran, untuk memudahkan pelanggan saat memesan hewan qurban. Terdapat tampilan logo instagram untuk melihat instagram PPHQ AMM Kotagede dan logo bank yang artinya pelanggan dapat menstransfer ke bank tersebut. Gambar 4.26 Halaman cara order 63
4.2.2.6 Halaman Fasilitas dan Layanan Halaman ini menampilakan berbagai fasilitas & pelayanan PPHQ AMM Kotagede yang diberikan kepada pelanggan. Supaya pelanggan semakin percaya dengan PPHQ AMM Kotagede Gambar 4.27 Halaman fasilitas dan layanan 64
4.2.2.7 Halaman Artikel Halaman ini menampilkan berbagai artikel yang ditulis oleh admin, yang berisi tentang informasi seputar kegiatan PPHQ AMM Kotagede, dan pelanggan dapat berlangganan artikel dengan mendaftar dihalaman home Gambar 4.28 Halaman artikel 65
4.2.2.8 Halaman Tuntunan Qurban Seperti tujuan awal pembuatan website ini adalah syiar dan dakwah berqurban, maka dari itu ada halaman tuntunn qurban untuk menginformasikan kepada publik tentang tuntunan berqurban yang benar dan dihalaman ini terdapat sejarah qurban serta hukum berqurban. Gambar 4.29 Halaman tuntunan qurban 66
4.2.2.9 Halaman Tentang Kami Dihalaman ini terdapat informasi tentang sejarah dan profil PPHQ AMM Kotagede, supaya pelanggan mengerti tentang sejarah dan tujuan didirikan PPHQ AMM Kotagede Gambar 4.30 Halaman tentang kami 67
4.2.2.10 Halaman Galeri Dihalaman ini berisi dokumentasi foto kegiatan PPHQ AMM Kotagede dari tahun ke tahun, dengan tujuan agar pelanggan mengetahui aktivitas PPHQ AMM Kotagede Gambar 4.31 Halaman galeri 4.2.2.11 Halaman Hubungi Kami Halaman hubungi kami terdapat alamat dan kontak PPHQ AMM Kotagede. Gambar 4.32 Halamn hubungi kami 68
4.2.2.12 Halaman Testimoni Halaman menampilkan testimoni pelanggan yang telah mengirimkan ke PPHQ AMM Kotagede, dengan harapan panitia PPHQ AMM Kotagede mendapat masukan, kritik saran, kesan dan pesan dari pelanggan. Gambar 4.33 Halaman testimoni 69
4.2.2.13 Halaman Kirim Testimoni Halaman ini dibuat untuk pelanggan yang ingin menyampaikan pesan dan kesan kepada PPHQ AMM Kotagede, form testimoni ini menggunakan docs.google.com Gambar 4.34 Halaman kirim testimoni 4.3 Pengujian Sistem Pengujian dilakukan bertujuan untuk melihat hasil eksekusi dan fungsionalitas berdasarkan analisis kebutuhan. Hasil pengujian sistem dapat dilihat pada tabel berikut Tabel 4.1 Tabel hasil pengujian No Kasus Uji Hasil yang Diharapkan Hasil yang Didapat Status 1. Tombol login pada halaman Login masuk Admin masuk ke dashboard wordpress diklik, admin dapat masuk ke dashboard wordpress 2. Tombol pencarian pada halaman home Pengguna masuk ke halaman pencarian diklik, pengguna dapat masuk ke halaman pencarian 70
No Kasus Uji Hasil yang Diharapkan Hasil yang Didapat Status 3. Tombol berlangganan pada halaman home Pengguna melakukan pengisian nama dan email berlangganan diklik, pengguna mendapat balasan email 4. Logo facebook pada halaman home masuk ke fanpage PPHQ AMM Kotagede diklik, pengguna dapat masuk kedalam fanpage PPHQ AMM Kotagede 5. Logo twitter pada halaman home masuk ke twitter PPHQ AMM Kotagede diklik, pengguna dapat masuk kedalam twitter PPHQ AMM Kotagede 6. Logo feed pada halaman home masuk ke halaman feed PPHQ AMM Kotagede diklik, pengguna dapat masuk kedalam feed PPHQ AMM Kotagede 7. Menu paket pada halaman home masuk ke halaman paket diklik, pengguna dapat masuk ke halaman paket 8. Menu cara order pada halaman home masuk ke halaman cara order diklik, pengguna dapat masuk ke halaman cara order 9. Menu fasiltas & layanan pada halaman home masuk ke halaman failitas & layanan diklik, pengguna dapat masuk ke halaman fasilitas & layanan 71
No Kasus Uji Hasil yang Diharapkan Hasil yang Didapat Status 10. Menu artikel pada halaman home masuk ke halaman artikel diklik, pengguna dapat masuk ke halaman artikel 11. Menu tuntunan qurban pada halaman home masuk ke halaman tuntunan qurban diklik, pengguna dapat masuk ke halaman tuntunan qurban 12. Menu tentang kami pada halaman home masuk ke halaman tentang kami diklik, pengguna dapat masuk ke halaman tentang kami 13. Menu galeri pada halaman home masuk ke halaman galeri diklik, pengguna dapat masuk ke halaman galeri 14. Menu hubungi kami pada halaman home masuk ke halaman hubungi kami diklik, pengguna dapat masuk ke halaman hubungi kami 15. Menu testimoni pada halaman home masuk ke halaman testimoni diklik, pengguna dapat masuk ke halaman testimoni 17. Menu kirim testimoni pada halaman home masuk ke halaman kirim testimoni diklik, dapat masuk ke halaman kirim testimoni 18. Tombol order pada halaman home masuk ke form order diklik, penggunan dapat masuk ke form order 72
No Kasus Uji Hasil yang Diharapkan Hasil yang Didapat Status 19. Tombol lihat semua paket pada halaman home masuk ke halaman paket diklik, pengguna dapat masuk ke halaman paket 20. Tombol send message pada halaman home mengirimkan kritik dan saran diklik pengguna dapat mengirimkan kritik dan saran 21. Tombol testimoni pad halaman home masuk ke halaman testimoni diklik, pengguna dapat masuk ke halaman testimoni 22. Tombol kontak pada halaman home masuk ke halaman hubungi kami diklik, pengguna dapat masuk kehalaman hubungi kami 23. Tombol paket pada halaman home masuk ke halaman paket diklik, dapat masuk ke halaman paket 24. Tombol kirim form pemesanan pada form order mengirimkan pesanan dan mendapat konfirmasi di email kirim form pemesanan diklik, pengguna mendapat konfirmasi di email 25. Tombol view on isntagram pada halaman galeri mengunjungi instagram PPHQ AMM Kotagede view on instagram diklik, dapat mengunjungi instagram PPHQ AMM Kotagede 26. Tombol kirim pada form testimoni mengirimkan testimoni Setalah tombol kirim diklik, dapat mengirimkan testimoni 73
No Kasus Uji Hasil yang Diharapkan Hasil yang Didapat Status 27. Login admin dengan username dan password salah Admin tidak dapat masuk ke dalam dashboard Peringatan muncul berupa kalimat Username atau Password Salah 28. Validasi kolom kosong pada form pemesanan Sistem dapat memberikan informasi apabila kolom tidak diisi Sistem dapat menampilkan informasi apabila kolom yang wajib diisi masih kosong 29. Validasi kolom kosong pada form testimoni Sistem dapat memberikan informasi apabila kolom tidak diisi Sistem dapat menampilkan informasi apabila kolom yang wajib diisi masih kosong 30. Validasi kolom kosong pada form berlangganan Sistem dapat memberikan informasi apabila kolom email tidak diisi Sistem dapat menampilkan informasi apabila kolom email masih kosong 31. Validasi kolom kosong pada form kritik dan saran Sistem dapat memberikan informasi apabila kolom tidak diisi Sistem dapat menampilkan informasi apabila kolom email dan nama masih kosong Website syiar dan dakwah ini dikembangkan dengan tujuan untuk mempromosikan dan memperkenalkan PPHQ AMM Kotagede ke publik atau masyarakat luas. Website ini juga ada fasilitas untuk sohibul yang ingin memesan hewan qurban secara online, untuk konfirmasi menggunakan email dan pembayaran dapat melalui ATM. Dengan seperti itu dapat membantu AMM kotagede dalam syiar dan dakwah berbasis webiste, sehingga dapat mencakup masyarakat luas, kemudian masyarakat dapat mengetahui informasi tentang pengetahuan berqurban, tata cara dan hukum berqurban, dapat melayani shohibul qurban dalam mendapatkan kambing dan lembu yang layak, syar i dan sehat, serta penjualan hewan qurban secara online. 74