BAB 3 METODOLOGI PENELITIAN

(1)

13

Rancang Bangun Sistem…, Faiq Syahbani Sulisno, Universitas Multimedia Nusantara

BAB 3

METODOLOGI PENELITIAN

3.1 Metodologi Penelitian

Metode penelitian yang akan dilakukan pada penelitian ini dijelaskan pada Gambar 3.1.

Gambar 3.1 Metodologi penelitian

1. Telaah Literatur

Telaah literatur merupakan hal pertama yang dilakukan pada penelitian ini.

Telaah literatur dilakukan untuk memahami lebih lanjut terhadap penelitian yang dilakukan dengan mencari jurnal, artikel, dan eBook yang tersedia pada situs yang kredibel. Data penilaian kriteria mechanical keyboard didapatkan dari survey yang dilakukan penulis melalui angket yang dibagikan.

(2)

14

2. Perancangan Sistem

Perancangan sistem meliputi kebutuhan sistem agar aplikasi dikerjakan dengan baik seperti sitemap flowchart, skema database, struktur database dan desain antarmuka.

3. Pembangunan dan Implemetasi Sistem

Pembangunan sistem sesuai dengan rancangan yang sudah dibuat sebelumnya. Sistem akan mengimplementasikan metode Simple Additive Weighting pada sistem pendukung keputusan pemilihan mechanical keyboard.

4. Testing dan Debugging

Testing dan debugging atau tahap pengujian sistem ini dilakukan untuk menemukan bug atau masalah pada sistem yang sudah dibuat dengan cara melakukan pemeriksaan pada source code yang kemudian akan diperbaiki sehingga aplikasi dapat digunakan dengan baik. Kemudian sistem akan diuji kembali menggunakan metode End-user Computing Satisfaction dengan faktor-faktor instrumen yang ada sehingga sistem dibangun sesuai dengan apa yang diharapkan. Sistem yang sudah dibangun akan digunakan oleh publik untuk mencari responden yang dapat memberikan feedback melalui angket yang dibagikan.

5. Revisi dan perbaikan

Revisi dan perbaikan dilakukan berdasarkan feedback dari survey yang dilakukan melalui angket yang dibagikan untuk para pengguna yang telah

(3)

15

mencoba sistem. Feedback berupa kepahaman pengguna terhadap sistem yang dibuat seperti kemudahan cara menggunakan sistem dan tampilan antar muka yang mudah.

6. Penulisan laporan dan konsultasi

Merupakan penulisan laporan terhadap sistem yang telah dibuat untuk dokumentasi. Seperti penulisan tahap perancangan sistem hingga selesainya tahap pembuatan sistem. Penulisan laporan dibantu dengan saran dosen pembimbing melalui sesi konsultasi.

3.2 Perancangan Sistem

Perancangan sistem bertujuan untuk memudahkan proses pembangunan sistem. Perancangan sistem berupa sitemap, flowchart, skema database, struktur database dan rancangan antar muka. Selain untuk memudahkan proses pembagunan, perancangan sistem juga dibuat sebagai penduan dalam pembangunan agar aplikasi terwujudkan dengan baik.

3.2.1 Sitemap

Sitemap dapat membantu pengguna dalam memberi gambaran konsep terhadap kerangka kerja website dan memungkinkan pengguna untuk menjadi lebih efisien dalam mencari informasi [15]. Sitemap dibuat terpisah untuk kedua bagian aplikasi yaitu sitemap halaman utama dan sitemap halaman admin.

(4)

16

A. Sitemap Halaman Utama

Halaman utama mempunyai tiga menu utama yaitu halaman utama, daftar keyboard dan rekomendasi. Sitemap dari halaman utama dijelaskan pada Gambar 3.1.

Gambar 3.2 Sitemap halaman utama

Sitemap halaman utama pada Gambar 3.1 menunjukkan seluruh menu yang ada pada halaman utama aplikasi dan dapat melakukan perpindahan dari satu halaman ke halaman lainnya. Halaman utama merupakan tampilan awal dari aplikasi. Kemudian pada setiap halamannya menampilkan informasi yang berbeda.

Halaman utama menampilkan informasi seperti penjelasan singkat mengenai keyboard dan sistem rekomendasi. Pengguna dapat langsung

(5)

17

menggunakan fitur rekomendasi pada bagian paling bawah halaman setelah membaca penjelasan singkat mengenai keyboard. Dengan mengisi form yang telah disediakan, pengguna dapat langsung mendapatkan hasil rekomendasi yang diinginkan.

Daftar keyboard menampilkan sebuah fitur search dan daftar dari seluruh keyboard yang dimiliki oleh sistem aplikasi. Pengguna dapat melihat seluruh daftar keyboard yang ada dan dapat menggunakan fitur search untuk melihat daftar keyboard spesifik yang diinginkan. Dari daftar keyboard yang telah diberikan, user dapat menekan salah satunya yang kemudian aplikasi akan menampilkan halaman detail keyboard yang memberikan informasi keyboard yang pilih secara rinci.

Kemudian terdapat halaman admin login untuk proses autentikasi pengguna yang dapat diakses melalui footer aplikasi.

B. Sitemap Halaman Admin

Halaman utama mempunyai dua menu utama yaitu database keyboard, tambah keyboard. Sitemap dari halaman admin dijelaskan pada Gambar 3.2.

(6)

18

Gambar 3.3 Sitemap admin

Sitemap halaman admin pada Gambar 3.2 menunjukkan seluruh menu yang ada pada halaman utama aplikasi dan dapat melakukan perpindahan dari satu halaman ke halaman lainnya. Halaman database keyboard merupakan tampilan awal dari halaman admin. Kemudian pada setiap halamannya menampilkan informasi yang berbeda.

Sebelum mengakses halaman database keyboard dan halaman lainnya di admin, pengguna diharuskan untuk melakukan login untuk proses autentikasi user.

Kemudian halaman database keyboard akan menampilkan seluruh daftar

(7)

19

mechanical keyboard yang ada. Pengguna dapat menghapus dan melihat detail dari keyboard yang dipilih.

Halaman view detail keyboard diakses melalui halaman database keyboard saat pengguna menekan tombol view pada salah satu keyboard. Halaman akan menampilkan informasi detail dari keyboard yang dipilih. Dan pengguna dapat melakukan edit detail, menambah variasi, dan edit variasi dengan menekan tombol yang tersedia yang kemudian akan diarahkan ke halaman yang diinginkan.

3.2.2 Flowchart

Flowchart adalah sarana grafis untuk mendokumentasikan urutan operasi.

Flowchart berfungsi sebagai sarana bergambar untuk berkomunikasi dari satu orang ke orang lain tentang urutan waktu peristiwa atau tindakan [16]. Pada aplikasi ini terdapat dua bagian flowchart yaitu flowchart halaman utama dan flowchart halaman admin.

(8)

20

Gambar 3.4 Flowchart utama

Gambar 3.3 merupakan flowchart utama dari aplikasi yang dibangun, flowchart ini menjadi panduan dalam pembangunan aplikasi. Pertama kali, pengguna akan ditampilkan halaman utama lalu diberi beberapa menu untuk menentukan halaman apa yang ingin ditampilkan. Jika pengguna memilih salah satu menu, aplikasi akan mengarahkan ke modul yang ada.

(9)

21

A. Flowchart Halaman Utama

Pada halaman utama terdapat form rekomendasi yang dapat diisi oleh pengguna untuk mendapatkan hasil rekomendasi yang diinginkan. Flowchart dari halaman utama dijelaskan pada Gambar 3.4.

Gambar 3.5 Flowchart halaman utama

Gambar 3.4 merupakan flowchart dari halaman utama. Selain berisi informasi tentang mechanical keyboard, halaman utama juga menyediakan fitur rekomendasi yang berisikan form untuk pengguna isi. Setelah pengguna mengisi

(10)

22

form, algoritma Simple Additive Weighting akan dijalankan yang kemudian akan ditampilkannya hasil rekomendasi.

Gambar 3.6 Flowchart Simple Additive Weighting

Gambar 3.5 merupakan flowchart dari algoritma Simple Additive Weighting.

Algoritma Simple Additive Weighting dijalankan setelah pengguna mengisi form yang ada di halaman utama pada bagian rekomendasi. Yang kemudian hasil rekomendasi akan ditampilkan setelah menakan tombol yang ada.

(11)

23

Gambar 3.7 Flowchart halaman daftar keyboard

Gambar 3.6 merupakan flowchart pada halaman daftar keyboard. Sebelum halaman daftar keyboard menampilkan seluruh daftar keyboard, sistem akan mengambil data dari database. Halaman daftar keyboard juga mempunyai kemampuan untuk mencari keyboard yang diinginkan.

(12)

24

Gambar 3.8 Flowchart search

Gambar 3.7 merupakan flowchart search. Flowchart ini berjalan saat menggunakan fitur search atau pencarian keyboard yang ada pada halaman daftar keyboard. Setelah pengguna memasukkan input pada kolom search, sistem akan menggambil data yang dibutuhkan dari database, yang kemudian akan ditampilkan pada halaman daftar keyboard.

(13)

25

Gambar 3.9 Flowchart detail keyboard

Gambar 3.8 merupakan flowchart halaman detail keyboard. Halaman detail keyboard akan ditampilkan ketika pengguna memilih salah satu keyboard yang ada pada daftar keyboard. Data akan diambil dari database yang kemudian akan ditampilkan pada halaman detail keyboard.

(14)

26

Gambar 3.10 Flowchart halaman login

Gambar 3.9 merupakan flowchart dari halaman login admin. Pengguna admin dapat mengisi form yang ada untuk melakukan login. Setelah data login dimasukkan, sistem akan melakukan autentikasi pengguna, jika berhasil akan

(15)

27

diarahkan ke halaman selanjutnya, namun jika tidak, akan ditampilkannya kembali form login.

B. Flowchart Halaman Admin

Halaman admin muncul setelah pengguna admin melakukan login pada halaman login. Jika autentikasi pengguna benar halaman akan berpindah ke halaman database keyboard.

Gambar 3.11 Slowchart database keyboard

(16)

28

Gambar 3.10 merupakan flowchart halaman admin database keyboard.

Sebelum menampilkan seluruh daftar keyboard, halaman database keyboard mengambil data dari database. Yang kemudian pengguna admin akan diberi pilihan untuk menambah keyboard, melihat detail keyboard dan menghapus keyboard.

Setelah pengguna melakukan penambahan atau penghapusan keyboard, data pada database akan diperbarui. Dan jika pengguna ingin melihat detail keyboard, pengguna akan diarahkan ke halaman admin detail keyboard.

(17)

29

Gambar 3.12 Flowchart admin detail keyboard

Gambar 3.11 merupakan flowchart halaman admin detail keyboard.

Sebelum ditampilkan data keyboard yang dipilih, sistem akan mengambil data dari database. Kemudian pengguna akan diberikan pilihan untuk mengedit detail keyboard, menambah variasi keyboard, mengedit variasi keyboard dan menghapus

(18)

30

variasi keyboard. Setiap perubahan yang dilakukan, database sistem akan terupdate yang kemudian akan ditampilkan kembali pada halaman admin detail keyboard.

3.2.3 Skema Database

Skema database diperlukan untuk mempermudah implementasi hubungan antar tabel database. Skema database menampilkan seluruh konfigurasi database seperti tabel, relasi antar tabel, dan tipe data.

Gambar 3.13 Skema database

(19)

31

Gambar 3.12 merupakan skema database untuk aplikasi yang dibangun.

Pada skema database ini terdapat dua tabel yaitu tabel keyboard dan tabel variasi.

Dan kedua tabel ini saling berhubungan.

3.2.4 Struktur Database

Struktur database menjelaskan seluruh kolom database yang ada pada sistem yang dibangun. Penjelasan struktur database berupa nama kolom, tipe data dan keterangan. Pada sistem ini terdapat dua tabel yaitu tabel keyboard dan tabel varian.

A. Tabel Keyboard

Tabel keyboard adalah tabel yang berisi seluruh informasi dari mechanical keyboard.

Tabel 3.1 Tabel keyboard

No Nama Tipe Data Keterangan

1 id (PK) int Id keyboard

2 brand varchar Merek keyboard

3 type varchar Tipe keyboard

4 slug varchar URL unik keyboard

5 link varchar URL eCommerce

6 formfactor varchar Bentuk keyboard

7 connectivity varchar Konektifitas keyboard

8 keycaps varchar Keycaps keyboard

9 dimension varchar Dimensi keyboard

10 switch varchar Switch keyboard

11 price int Harga keyboard

12 durability int Tingkat durabilitas

13 customizability int Tingkat kostumisasi

14 mobility int Tingkat mobilitas

(20)

32

Tabel 3.1 merupakan struktur database dari tabel keyboard pada aplikasi yang telah dibangun. Deskripsi lengkap keyboard serta seluruh nilai kriteria disimpan pada tabel ini.

B. Tabel Varian

Tabel varian adalah tabel yang berisi seluruh informasi dari variasi warna mechanical keyboard.

Tabel 3.2 Tabel varian

No Nama Tipe Data Keterangan

1 id (PK) int ID variasi

2 keyboard_id (FK) int ID keyboard

3 slug varchar URL unik variasi

4 image varchar Gambar variasi

5 color varchar Warna variasi

Tabel 3.2 merupakan struktur database dari tabel varian pada aplikasi yang telah dibangun. Detail varian keyboard berupa gambar dan penamaan warna disimpan pada tabel ini. Pada tabel ini terdapat foreign key dari tabel keyboard sebagai varian yang dimiliki pada setiap keyboard.

3.2.5 Rancangan Antarmuka

Sebelum pembangunan aplikasi, antarmuka telah dirancang terlebih dahulu dengan menyesuaikan fungsi dan fitur yang akan diterapkan. Dengan memperhatikan beberapa aspek seperti informasi yang disajikan, tampilan yang diberikan, dan kemudahan penggunaan, antarmuka didesain sedimikianrupa untuk

(21)

33

memudahkan pengguna dalam mengoperasikan aplikasi. Rancangan antarmuka aplikasi yang dibangun akan dijabarkan secara lengkap berikut ini.

A. Rancangan Antar Muka Halaman Utama

Halaman utama merupakan tampilan utama saat pengguna membuka atau menggunakan aplikasi pertama kali.

Gambar 3.14 Rancangan halaman utama

Gambar 3.13 merupakan rancangan antarmuka halaman utama. Pada setiap halaman terdapat navigasi atau menu utama yang bertujuan untuk memindahkan posisi halaman yang dilihat pengguna. Menu yang dapat ditekan yaitu halaman utama, daftar keyboard dan rekomendasi. Kemudian terdapat informasi yang menjelaskan tujuan dari aplikasi yang dibuat, yaitu rekomendasi mechanical keyboard. Adapun dua tombol yang berguna untuk navigasi di satu halaman, yaitu

(22)

34

jelajah untuk berpindah ke bagian selanjutnya di halaman utama dan tombol rekomendasi untuk berpindah ke bagian rekomendasi.

Gambar 3.15 Rancangan halaman utama bagian 2

Gambar 3.14 merupakan bagian selanjutnya pada halaman utama yang memberikan informasi singkat mengenai kelebihan dari mechanical keyboard.

Bagian ini berguna bagi pengguna untuk memberikan wawasan tentang mechanical keyboard. Informasi yang diberikan seperti membandingkan mechanical keyboard dengan keyboard non-mechanical serta kelebihannya.

(23)

35

Gambar 3.16 Rancangan halaman utama bagian 3

Bagian halaman utama selanjutnya yaitu seperti Gambar 3.15 memberikan informasi mengenai faktor pemilihan keyboard. Informasi berupa penjelasan secara singkat kriteria yang digunakan dalam rekomendasi mechanical keyboard.

(24)

36

Gambar 3.17 Rancangan bagian rekomendasi

Gambar 3.16 merupakan bagian rekomendasi yang ada di paling akhir halaman utama, bagian ini juga dapat diakses melalui navigasi atau menu utama.

Terdapat sebuah form yang dapat diisi pengguna untuk mendapatkan hasil rekomendasi mechanical keyboard yang diinginkan. Setelah tombol “Temukan Mechanical Keyboardmu!” ditekan, akan ditampilkannya hasil rekomendasi yang telah dihasilkan oleh sistem.

B. Rancangan Antar Muka Daftar Keyboard

Halaman daftar keyboard ditampilkan setelah pengguna menekan daftar keyboard pada menu navigasi.

(25)

37

Gambar 3.18 Rancangan daftar keyboard

Gambar 3.17 merupakan rancangan halaman daftar keyboard yang menampilkan seluruh daftar keyboard yang dimiliki oleh aplikasi. Kolom search juga disediakan untuk mempermudah pengguna melakukan pencarian keyboard yang diinginkan.

(26)

38

Gambar 3.19 Rancangan halaman daftar keyboard bagian 2

Gambar 3.18 merupakan lanjutan dari halaman daftar keyboard. Pada daftar keyboard yang diberikan, informasi singkat mechanical keyboard diberikan untuk mempermudah pengguna dalam melihat daftar keyboard. Pengguna dapat melihat detail lebih lanjut mengenai mechanical keyboard yang dipilih dengan menekan area keyboard yang dipilih.

C. Rancangan Antarmuka Detail Keyboard

Halaman detail keyboard ditampilkan saat pengguna memilih salah satu keyboard pada halaman daftar keyboard.

(27)

39

Gambar 3.20 Rancangan halaman detail keyboard

Gambar 3.19 merupakan rancangan dari halaman detail keyboard. Halaman ini menampilkan informasi lengkap mengenai keyboard yang dipilih melalui daftar keyboard. Halaman ini juga menampilkan nilai kriteria yang telah diberi pengguna dan link menuju toko online untuk mempermudah pengguna mencari produk di toko online.

D. Rancangan Antar Muka Admin Login

Halaman admin ditampilkan saat pengguna menekan tombol logo user.

Logo user terdapat pada bagian footer halaman di bagian paling kanan.

(28)

40

Gambar 3.21 Rancangan halaman login admin

Gambar 3.20 merupakan rancangan halaman login admin. Halaman ini menyediakan form untuk pengguna admin isi serta tombol untuk login. Pengguna diharuskan mengisi identitas dan password yang telah ditetapkan.

E. Rancangan Antar Muka Database Keyboard

Halaman database keyboard ditampilkan saat user berhasil melakukan login pada halaman login.

(29)

41

Gambar 3.22 Rancangan halaman database keyboard

Gambar 3.21 merupakan rancangan halaman database pada bagian admin.

Halaman database keyboard menampilkan seluruh daftar keyboard yang dimiliki sistem. Data diperoleh langsung dari database. Tabel sudah memiliki fitur search dan sorting pada setiap kolomnya. Halaman ini juga dapat menambah, menghapus dan meihat detail keyboard yang dipilih.

F. Rancangan Antar Muka Tambah Keyboard

Halaman tambah keyboard ditampilkan saat user menekan tambah keyboard pada menu navigasi admin.

(30)

42

Gambar 3.23 Rancangan halaman tambah keyboard

Gambar 3.22 merupakan rancangan halaman tambah keyboard pada admin.

Halaman ini menyediakan form dengan sejumlah baris input sesuai dengan deskripsi lengkap keyboard yang dimiliki. Lalu dengan menekan tombol tambah keyboard, penambahan keyboard langsung ditambahkan ke database. Adapun terdapat tombol kembali untuk navigasi ke halaman sebelumnya.

G. Rancangan Antar Muka View Detail Keyboard

Halaman view detail keyboard ditampilkan saat pengguna admin menekan tombol view pada database keyboard.

(31)

43

Gambar 3.24 Rancangan halaman admin detail keyboard

Gambar 3.23 merupakan rancangan halaman detail keyboard pada admin.

Halaman ini menampilkan informasi terkait keyboard yang dipilih pada halaman database keyboard. Halaman ini terdapat tombol edit untuk mengubah detail keyboard, tombol tambah variasi untuk menambah variasi keyboard, tombol edit variasi untuk mengubah data variasi dan delete untuk menghapus variasi.

H. Rancangan Antar Muka Edit Detail Keyboard

Halaman ini ditampilkan ketika pengguna admin menekan tombol edit pada halaman detail keyboard.

(32)

44

Gambar 3.25 Rancangan halaman edit keyboard

Gambar 3.24 merupakan rancangan halaman edit keyboard pada halaman admin. Form pada halaman ini akan berisi data keyboard yang dipiih yang kemudian pengguna dapat mengubah data keyboard terkait. Lalu ada tombol ubah data untuk mengirimkan penrubahan data ke database. Dan ada tombol kembali untuk navigasi ke halaman sebelumnya.

I. Rancangan Antarmuka Tambah Variasi

Halaman ini ditampilkan saat pengguna admin menekan tombol tambah variasi pada halaman detail keyboard.

(33)

45

Gambar 3.26 Rancangan halaman tambah variasi

Gambar 3.25 merupakan rancangan halaman tambah variasi pada admin.

Tersedia form untuk menambahkan gambar dan menamai variasi yang ingin di tambahkan. Serta tombol tambah varian untuk mengirim data ke database. Dan ada tombol kembali untuk navigasi ke halaman sebelumnya.

J. Rancangan Antarmuka Edit Variasi

Halaman ini akan ditampilkan ketika pengguna admin menekan tombol edit pada bagian varian di halaman detail keyboard.

(34)

46

Gambar 3.27 Rancangan halaman edit varian

Gambar 3.26 merupakan rancangan halaman edit varian pada admin. Form akan berisi varian yang dipilih lalu pengguna dapat mengubah data varian yang ada.

Lalu ada tombol ubah data untuk mengirim data ke database. Dan ada tombol kembali untuk navigasi ke halaman sebelumnya.