BAB III ANALISIS DAN PERANCANGAN

BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Analisis atau bisa juga disebut dengan Analisis sistem (systems analysis) dapat didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahan-permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. 3.1.1 Analisis Masalah Sistem pembelajaran yang didapatkan saat ini baik di sekolah maupun di universitas dianggap masih sangat kurang. Untuk mendukung keberhasilan siswa dalam pelajaran tersebut khususnya Kalkulus Proposisi maka dibuatlah suatu media pembelajaran yang dapat diakses siswa kapanpun dan dimanapun. Maka solusi untuk permasalahan tersebut adalah media pembelajaran dengan memanfaatkan teknologi informasi, ada beberapa program yang bisa digunakan sebagai media pembelajaran tersebut yaitu menggunakan program Visual Basic atau bisa juga dengan system Web Based. Belakangan ini penulis mendapatkan program aplikasi yang digunakan sebagai Media Pembelajaran, yaitu Aplikasi Pembelajaran Kalkulus Proposisi (APPEMKALPRO) versi.1.0.0 yang dibuat oleh Saudara Agung Haryanto, S.Kom. APPEMKALPRO Ver.1.0.0 ini terbukti dapat diimplementasikan secara komputerisasi, memiliki kemampuan untuk menyelesaikan operasi kalkulus proposisi dengan maksimal 4 buah operand dan panjang proposisi maksimal 20 karakter, dapat menampilkan materi-materi pembelajaran baik dengan metode slideshow maupun per-halaman, memiliki keunggulan terutama dalam hal proses penyelesaian proposisi dengan menampilkannya tahap demi tahap, memiliki kemampuan untuk mendeteksi kesalahan struktur proposisi yang di-input. 44

45 Setelah mempelajari Aplikasi tersebut, Penulis tertarik untuk mengembangkan kedalam system Web Based, dengan menambahkan soal-soal dalam bentuk pilihan ganda. Soal-soal tersebut bisa ditampilkan secara acak (random) sehingga tidak akan muncul urutan-urutan pertanyaan yang sama dengan sebelumnya. Sebagai pelengkap dari pertanyaan tentunya ada berupa jawaban dan hasil dari berapa banyak jawaban yang benar (prosentase nilai kebenaran). Sebelumnya, penulis akan mengulas mengenai Kalkulus Proposisi beserta tahapan prosesnya. Kalkulus Proposisi pada hakekatnya adalah suatu metode dalam komputasi menggunakan proposisi atau menggunakan kalimat. Di sini, kalimat yang dimaksud merupakan kalimat deklaratif. Pada kalimat deklaratif tersebut dapat kita berikan nilai kebenarannya (truth value) yaitu salah satu dari Benar atau Salah. Kalimat seperti ini biasa disebut sebuah statemen atau pernyataan. Pada kalkulus proposisi ini, pembahasan ditekankan pada bagaimana cara mengkombinasikan statemen atau pernyataan sehingga terbentuk statemen atau pernyataan lain yang lebih kompleks. Pengkombinasian pernyataan akan menghasilkan pernyataan majemuk (compound statement). Nilai kebenaran dari suatu pernyataan majemuk tergantung pada nilai kebenaran pernyataan yang dikombinasikan serta tergantung pula operasi pengkombinasian mereka. 3.1.2 Tahapan Proses Kalkulus Proposisi Dalam penyelesaian kalkulus proposisi diperlukan beberapa tahapan proses secara terstruktur dan berurut sehingga hasil yang diperoleh sesuai dengan yang diharapkan. Tahapan-tahapan proses dalam penyelesaian kalkulus proposisi diantaranya adalah sebagai berikut: 1. Dilakukan pengecekan terhadap struktur dari proposisi yang di-input. 2. Membagi proposisi kedalam bentuk sub-sub proposisi. 3. Membuat tabel kebenaran dari proposisi langkah demi langkah.

46 Pengecekan terhadap struktur dari proposisi yang di-input berdasarkan teori dari operasi proposisi. Pembagian proposisi pada pembahasan Tugas Akhir ini menggunakan metode parsing top down, dimulai dengan simbol yang paling awal hingga simbol yang paling akhir. Dimana proses penurunan parsing dilakukan dengan cara left most derivation, yaitu jika kedudukan operator seimbang maka operator yang paling kiri diturunkan terlebih dahulu. Kedudukan operator-operator pada proposisi berdasarkan urutan prioritasnya dari yang tertinggi ke yang terendah. Urutan prioritas kedudukan operator-operator pada proposisi adalah sebagai berikut: 1. Tanda Kurung (delimiter). 2. Operasi Negasi (not). 3. Operasi Konjungsi (and). 4. Operasi Disjungsi (or). 5. Operasi Implikasi (if then). 6. Operasi Bi-Implikasi (if and only if). 7. Operasi NAND (not AND) 8. Operasi XOR (exclusive-xor) Sebagai contoh dari penggunaan atau penerapan dari urutan prioritas kedudukan operator-operator pada proposisi tersebut. Misalnya, diketahui sebuah proposisi ~ p ( q r ) s ( p r ), maka tahapan proses penyelesaian dari proposisi tersebut adalah: 3.1.2.1 Proses Pengecekan Dimulai dari proses pengecekan dengan melalui tahap-tahap sebagai berikut: 1. Pengecekan terhadap tanda kurung (delimiter). Hal yang perlu diperhatikan adalah jumlah tanda kurung buka ( harus sama dengan jumlah kurung tutup ). Dalam contoh ini, proposisi ~ p ( q r ) s ( p r ) terdapat 2 buah tanda kurung buka ( dan 2 buah tanda kurung tutup ). Maka, proposisi tersebut memenuhi syarat tanda kurung (delimiter) karena jumlah kedua tanda

47 kurung buka sama dengan jumlah tanda kurung tutup sehingga tidak terdapat kesalahan dan proses dapat dilanjutkan ke tahap berikutnya. 2. Penyederhanaan terhadap proposisi. Setelah pengecekan terhadap tanda kurung (delimiter) tidak ada kesalahan maka proses selanjutnya adalah penyederhanaan terhadap proposisi. Proses ini akan menyederhanakan operasi negasi (not) yang berurutan. Misalnya, ~ ~ p diubah menjadi ~ p. Tetapi jika penulisan diubah menjadi ~ ( ~ p ) maka proses tidak akan melakukan perubahan. 3. Pengecekan terhadap operator dan operand. a. Karakter pertama dari proposisi harus berupa karakter proposisi p, q, r, s, operator negasi (not) ~ atau tanda kurung buka (delimiter) (. Dalam proposisi ~ p ( q r ) s ( p r ) diawali oleh operator negasi (not) dengan simbol ~ sehingga tidak terjadi kesalahan dan proses dapat dilanjutkan. b. Karakter terakhir dari proposisi harus berupa karakter proposisi p, q, r, s atau tanda kurung tutup (delimiter) ). Dalam proposisi ~ p ( q r ) s ( p r ) diakhiri oleh tanda kurung tutup (delimiter) dengan simbol ) sehingga tidak terjadi kesalahan dan proses dapat dilanjutkan. c. Operand p, q, r dan s yang bukan merupakan karakter pertama dari proposisi, maka harus didahului oleh operator dengan simbol ~,,,, atau delimiter (. Dalam contoh proposisi ~ p ( q r ) s ( p r ), dengan kondisi: - Operand p didahului oleh operator not ~ dan delimiter (. - Operand q didahului delimiter (. - Operand r didahului oleh operator or. - Operand s didahului oleh operator implikasi. Dari kondisi tersebut di atas, maka tahapan proses ini tidak menemukan kesalahan dan proses dapat dilanjutkan. d. Operator not ~ yang bukan merupakan karakter pertama dari proposisi harus didahului oleh operator ~,,,,

48 atau delimiter (. Pada proposisi ~ p ( q r ) s ( p r ), operator not ~ yang bukan merupakan karakter pertama didahului oleh operator and, sehingga tidak terjadi kesalahan dan proses dapat dilanjutkan. e. Operator-operator,, dan harus didahului oleh operand p, q, r, s atau tanda kurung tutup (delimiter) ). Dalam contoh proposisi ~ p ( q r ) s ( p r ), dengan kondisi: - Operator and didahului oleh operand p. - Operator or didahului oleh operand q. - Operator implikasi didahului oleh delimiter ). - Operator bi-implikasi didahului oleh operand s. Dari kondisi tersebut di atas, maka tahapan proses ini tidak menemukan kesalahan dan proses dapat dilanjutkan. f. Tanda kurung buka (delimiter) dengan simbol ( yang bukan merupakan karakter pertama harus didahului oleh operatoroperator,,, atau delimiter ( itu sendiri. Pada contoh proposisi ~ p ( q r ) s ( p r ), dengan kondisi: - Delimiter ( yang pertama didahului oleh operator and, dan - Delimiter ( kedua didahului oleh operator bi-implikasi. Dari kondisi tersebut di atas, maka tahapan proses ini tidak menemukan kesalahan dan proses dapat dilanjutkan. g. Tanda kurung tutup (delimiter) dengan simbol ) harus didahului oleh operand-operand p, q, r, s atau delimiter ) itu sendiri. Proposisi ~ p ( q r ) s ( p r ), delimiter ) didahului oleh operand r, pada tahapan proses ini tidak menemukan kesalahan dan proses dapat dilanjutkan. Pada saat proses pembacaan, proposisi yang tidak sesuai dengan ketentuan struktur proposisi sebagaimana yang telah dibahas di atas, maka akan

49 menyebabkan terjadinya kesalahan. Kesalahan yang terdapat pada proposisi yang di-input akan menginformasikan kepada pengguna dan kesalahan yang terjadi harus diperbaiki terlebih dahulu oleh pengguna jika ingin melanjutkan ke tahapan proses selanjutnya, sebaliknya jika kesalahan yang terjadi tidak diperbaiki maka sistem tidak dapat melanjutkan proses ke tahapan berikutnya. 3.1.2.2 Proses Pembagian/Penurunan (Parsing) Setelah proses pengecekan terhadap struktur dari proposisi selesai dilaksanakan dan tidak ditemukan kesalahan, maka proses akan dilanjutkan dengan membagi proposisi ke dalam sub-proposisi. Dalam pembagian proposisi ke dalam sub-proposisi menggunakan metode left most derivation, yaitu pembacaan dimulai dari sebelah kiri sesuai dengan prioritas kedudukan operatoroperator proposisi. Seperti halnya pada ekspresi aritmatika, metode left most derivation digunakan untuk menurunkan (parsing) dari ekspresi aritmatika tersebut. Berdasarkan metode left most derivation, ekspresi aritmatika akan diperiksa dan diturunkan dari sebelah kiri ke sebelah kanan. Ekspresi aritmatika harus dipecahkan menjadi sub-sub ekspresi aritmatika yang paling sederhana supaya dapat diselesaikan. Pemecahan ekspresi aritmatika ke dalam bentuk subsub ekspresi aritmatika harus mengikuti urutan prioritas operasi. Operasi dengan prioritas yang lebih tinggi harus dikerjakan terlebih dahulu dan jika terdapat operasi yang memiliki prioritas yang sama, maka operasi yang terletak di sebelah kiri akan dikerjakan terlebih dahulu. Kemudian, bila ditemukan delimiter, berupa tanda kurung ( ), maka sub ekspresi aritmatika yang berada di dalam delimiter ini harus dikerjakan terlebih dahulu. Secara umum, algoritma metode left most derivation pada struktur ekspresi algoritma dengan algoritma left most derivation pada struktur proposisi adalah sama. Berikut ini adalah skema pembagian proposisi dengan metode left most derivation yang digunakan dalam Tugas Akhir ini.

50 Gambar 3.1 Pembagian proposisi dengan metode left most derivation Proposisi ~ p ( q r ) s ( p r ) dalam proses pembagian menjadi sub-proposisi menggunakan metode left most derivation, maka pembacaan proposisi dimulai dari sebelah kiri ke sebelah kanan dengan urutan sebagai berikut: 1. Pembacaan proposisi dari sebelah kiri ke sebelah kanan akan menemukan tanda kurung (delimiter) dari sub-proposisi ( q r ) dan di dalamnya terdapat operator disjungsi (or), maka operasi disjungsi (or) ini akan diturunkan terlebih dahulu dan hasil penurunannya diberi label P1 (baca: Proses pertama). 2. Selanjutnya, proses pambacaan ke sebelah kanan dan akan menemukan tanda kurung (delimiter) dari sub-proposisi ( p r ), maka sub-proposisi ( p r ) yang di dalamnya terdapat operator konjungsi (and) akan diturunkan terlebih dahulu dan hasil penurunan akan diberi label P2 (baca: Proses kedua). 3. Proses selanjutnya, menurunkan sub-proposisi ~ p dan diberi label P3 (baca: Proses ketiga). 4. Hasil penurunan sub-proposisi P1 dan P3 kemudian dilakukan operasi konjungsi (and), hasilnya diberi label P4 (baca: Proses keempat). 5. Hasil penurunan sub-proposisi P4 akan dilakukan operasi implikasi (if then) dengan operand s dan hasil penurunannya diberi label P5 (baca: Proses kelima).

51 6. Sampai dengan proses kelima, maka hasil penurunan sub-proposisi P5 dan hasil penurunan sub-proposisi P2 dilakukan operasi bi-implikasi (if and only if) atau bisa juga disebut dengan operasi ekivalensi antara P5 dengan P2, hasilnya diberi label P6 (baca: Proses keenam). Pada proposisi ~ p ( q r ) s ( p r ), proses pembagian ke dalam sub-sub proposisi dengan menggunakan metode left most derivation telah selesai dilakukan. Setelah proses pambagian proposisi menjadi sub-sub proposisi selesai dilakukan, langkah selanjutnya adalah proses pembuatan tabel kebenaran. 3.1.2.3 Proses Pembuatan Tabel Kebenaran (Truth Table) Untuk mengevaluasi apakah sebuah proposisi benar atau salah perlu dibuat tabel kebenaran (truth table). Tabel kebenaran adalah suatu tabel yang merupakan suatu metode untuk menunjukkan secara sistematis satu demi satu nilai kebenaran sebagai hasil kombinasi dari proposisi-proposisi dengan meng-interpretasi-kan setiap simbol proposisi dan menggunakan aturan-aturan semantik (semantic rules). Interpretasi adalah pemberian nilai kebenaran (benar atau salah) pada setiap simbol proposisi dari suatu kalimat logika. Sedangkan, Aturan Semantik adalah suatu aturan yang digunakan untuk menentukan arti suatu kalimat logika atau nilai kebenaran (truth value) dari suatu kalimat. Setiap kombinasi dari proposisi-proposisi atau variabel proposisional, nilainya tergantung dari jenis perangkai atau operator yang digunakan untuk mengkombinasikan proposisiproposisi. Tabel kebenaran merupakan cara yang paling jelas untuk membuktikan validitas dari suatu kalimat dengan menentukan kemungkinan nilai-nilai kebenaran yang diberikan pada simbol proposisinya. Jadi, bila suatu kalimat memuat simbol-simbol proposisi p dan q, ada empat kemungkinan interpretasi yang perlu diperhatikan, yaitu: 1. p bernilai benar dan q bernilai benar. 2. p bernilai benar dan q bernilai salah. 3. p bernilai salah dan q bernilai benar. 4. p bernilai salah dan q bernilai salah.

52 Proses tersebut dapat difasilitasi dengan suatu tabel, yang disebut tabel kebenaran (truth table). Dengan aturan semantik dapat ditentukan nilai kebenaran suatu kalimat kompleks untuk semua interpretasi yang mungkin. Jika terdapat n variabel, maka terdapat 2 n baris tabel kebenaran. Melanjutkan tahapan proses dari contoh proposisi, yaitu proses pembuatan tabel kebenaran dari proposisi ~ p ( q r ) s ( p r ) adalah sebagai berikut: 1. Pada proses pembuatan tabel kebenaran, yang pertama dilakukan adalah menghitung jumlah variabel atau operand dari proposisi. Jumlah operand dari proposisi ~ p ( q r ) s ( p r ) adalah sebanyak 4 buah, yaitu p, q, r dan s. Sehingga jumlah test case sebanyak 2 n = 2 4 = 16. Maka, tabel kebenaran yang dibuat memiliki 16 baris sebagaimana pada tabel kebenaran awal di bawah ini: Tabel 3.1 Tabel kebenaran awal p q r s B S B B S B B B S B B B S B S B S S S B B S S B S B S S S B B S S B S S S S B S S S S Sebagaimana pada tabel kebenaran awal di atas, bahwa terdapat 4 buah operand dan 16 baris yang masing-masing telah di-interpretasi-kan dengan nilai-nilai sebanyak 16 kemungkinan. 2. Setelah didapat tabel kebenaran awal, maka selanjutnya adalah membuat tabel kebenaran berdasarkan proposisi yang telah dibagi/diturunkan menjadi sub-sub proposisi berdasarkan pada tahap

53 parsing. Sub-proposisi yang pertama dikerjakan adalah P1 = q r, dengan tabel kebenaran di bawah ini: Tabel 3.2 Tabel kebenaran sub-proposisi q r q r q r B S B B S B S B B S B B S S S S S S B S B B S B S B B S B B S S S S S S Sub-proposisi pertama telah dibuat tabel kebenarannya, maka langkah selanjutnya adalah membuat tabel kebenaran berikutnya sesuai dengan urutan pada proses parsing. 3. Setelah tabel kebenaran pada sub-proposisi P1 = q v r dibuat, kemudian mengerjakan tabel kebenaran sub-proposisi P2 = p r, dengan tabel kebenaran di bawah ini: Tabel 3.3 Tabel kebenaran sub-proposisi p r p r p r S B S S B S

54 S S S S S S S B S S B S S S S S S S Sampai disini sudah sampai pada sub-proposisi kedua yang dibuat tabel kebenarannya, maka langkah selanjutnya adalah membuat tabel kebenaran berikutnya sesuai dengan urutan pada proses pada pembagian proposisi kedalam sub-proposisi, yaitu sub-proposisi P3. 4. Kemudian proses selanjutnya adalah tahapan proses pembuatan tabel kebenaran sub-proposisi P3 = ~ p, dengan tabel kebenaran seperti ditunjukkan pada tabel di bawah ini: Tabel 3.4 Tabel kebenaran sub-proposisi ~ p p ~p B S B S B S B S B S B S B S B S S B S B S B S B S B S B S B S B Sebagaimana terlihat pada Tabel 3.4 di atas, sub-proposisi P3 selesai dibuat tabel kebenarannya, maka langkah selanjutnya adalah membuat tabel kebenaran sesuai dengan urutan tahapan proses, yaitu subproposisi P4. 5. Selanjutnya, yang harus dikerjakan adalah membuat tabel kebenaran sub-proposisi P4 = P3 P1 = ~ p ( q r ). Sehingga tabel kebenarannya menjadi seperti di bawah ini:

55 Tabel 3.5 Tabel kebenaran sub-proposisi ~ p ( q r ) ~p q r ~p (q r) S B S S B S S B S S B S S B S S B S S S S S S S Sub-proposisi P3 dan P1 telah dibuat tabel kebenarannya dengan menggunakan operator konjungsi (and) yang diberi label P4, maka langkah selanjutnya adalah membuat tabel kebenaran untuk subproposisi P5. 6. Berikutnya, yang harus dikerjakan adalah membuat tabel kebenaran sub-proposisi P5 = P4 s = ~ p ( q r ) s. Sehingga tabel kebenarannya menjadi seperti di bawah ini: Tabel 3.6 Tabel kebenaran sub-proposisi ~ p ( q r ) s ~p (q r) s ~p (q r) s S B B S S B S B B S S B S B B S S B S B B S S B

56 S B B S S B Hasil penurunan sub-proposisi P4 = ~ p ( q r ) dilakukan operasi implikasi (if then) dengan operand s dan hasil penurunannya adalah sub-proposisi P5. Sub-proposisi P5 tersebut telah dibuat tabel kebenarannya sebagaimana terlihat pada Tabel 3.6 di atas, maka langkah selanjutnya adalah membuat tabel kebenaran berikutnya. 7. Setelah selesai membuat tabel kebenaran sub-proposisi P5, maka proses akan dilanjutkan dengan mengerjakan pembuatan tabel kebenaran P6 = P5 P2 = ~ p ( q r ) s ( p r ). Sehingga tabel kebenarannya menjadi seperti di bawah ini: Tabel 3.7 Tabel kebenaran ~ p ( q r ) s ( p r ) ~p (q r) s p r ~p (q r) s (p r) S S B S S B S S B Sub-proposisi P5 = ~ p ( q r ) s dan sub-proposisi P2 = p r dilakukan operasi bi-implikasi (if and only if), hasilnya adalah P6. P6 = ~ p ( q r ) s ( p r ) tersebut telah dibuat tabel kebenarannya sebagaimana terlihat pada Tabel 3.8 di atas, maka sampai pada langkah ini keseluruhan dari proposisi secara lengkap, yaitu ~ p ( q r ) s ( p r ) sudah menjadi tabel kebenaran

57 yang lengkap. Artinya, proses pembuatan tabel kebenaran dari proposisi ~ p ( q r ) s ( p r ) selesai dikerjakan tahap demi tahap dan hasil akhir sudah didapatkan. 3.2 Perancangan Aplikasi Perancangan Aplikasi merupakan rancangan pembuatan system perangkat lunak yang diinginkan. Bertujuan untuk merancang solusi dari permasalahan yang telah dianalisa sebelumnya. Pada tahap perancangan ini memberikan suatu algoritma dan model diagram yang lebih terperinci sebagai acuan dalam proses. 3.2.1 Perancangan Algoritma Algoritma merupakan urutan-urutan dari instruksi atau langkah-langkah logis untuk membantu dalam menyelesaikan suatu masalah berdasarkan pada pola pikirnya masing-masing, sebaiknya algoritma disusun sebelum membuat program. Algoritma memiliki kriteria-kriteria diantaranya: Ada input, ada output, ada proses, efektif, efisien dan terstruktur. Sifat algoritma tidak tergantung pada suatu bahasa pemrograman, notasi-notasinya dapat digunakan untuk seluruh bahasa manapun karena tidak menggunakan simbol atau sintaks dari suatu bahasa pemrograman. Algoritma dapat digunakan untuk merepresentasikan suatu urutan kejadian secara logis dan dapat diterapkan pada semua kejadian sehari-hari. Pada perancangan Aplikasi ini juga menggunakan algoritma-algoritma supaya hasilnya sesuai dengan yang diharapkan. Berikut langkah-langkah yang akan digunakan dalam Aplikasi Pembelajaran Kalkulus Proposisi: 1. Buka Browser Google Chrome dan ketik http://localhost/tataufik/ untuk memulai Aplikasi Pembelajaran Kalkulus Proposisi. 2. Isikan Username dan Password pada form sign-in. 3. Klik Sign-in untuk melanjutkan proses. 4. Pilih menu Simulasi untuk memasukkan proposisi yang akan diproses. 5. Sistem akan menjalankan tahapan proses kalkulus proposisi. 6. Hasil proses ditampilkan.

58 7. Pilih menu Materi untuk membuka materi kalkulus proposisi untuk dipelajari. 8. Pilih menu Latihan untuk mengerjakan soal latihan. 9. Pilih menu Nilai untuk melihat nilai dari hasil latihan yang dikerjakan. 10. Pilih menu Profil untuk melihat, merubah data dan mengganti password yang diinginkan Algoritma dalam Aplikasi Pembelajaran Kalkulus Proposisi di atas dapat juga dibuat dalam bentuk Flowchart Diagram seperti di bawah ini: Start Input Login Login Valid N Y Input Proposisi Tampilkan Main Menu Proposisi Valid N Y Y Pilih Simulasi N Sederhanakan Proposisi kedalam Sub Proposisi Pilih Materi Y Tampilkan Materi Proposisi Tampilkan Tabel Step by step N Pilih Latihan Y Tampilkan Latihan N Pilih Nilai Y Tampilkan Nilai N Y Input Lagi N Keluar dari Aplikasi N Y End Gambar 3.2 Flowchart Diagram Aplikasi Pembelajaran Kalkulus Proposisi

59 3.2.2 Perancangan Usecase Diagram Dalam proses perancangan Aplikasi Pembelajaran Kalkulus Proposisi ini dilengkapi dengan Usecase Diagram yang merupakan bagian dari perancangan konseptual. System Login <<extend>> Validasi Login Manajemen Materi <<include>> Manajemen Latihan <<include>> Manajemen User <<include>> <<include>> User Admin <<include>> Main Menu <<include>> Halaman Materi Halaman Latihan Halaman Nilai Halaman Profil Cek Struktur Proposisi Input Proposisi <<extend>> <<extend>> Jawaban Proposisi <<extend>> Ubah Proposisi ke Sub Proposisi Gambar 3.3 Usecase Diagram Aplikasi Pembelajaran Kalkulus Proposisi Tahap selanjutnya dalam merancang Aplikasi Pembelajaran Kalkulus Proposisi ini adalah membuat rancangan antar-muka Aplikasi atau biasa disebut iterface design.

60 3.2.3 Perancangan Activity Diagram dan Sequence Diagram Pada tahap perancangan ini, activity diagram dan sequence diagram dibuat secara bertahap dan dibagi pada setiap sub program yang sedang dirancang. Berikut ini activity diagram dan sequence diagram yang digunakan dalam perancangan Aplikasi Pembelajaran Kalkulus Proposisi. Activity diagram dan sequnce diagram dibawah ini diawali dari Klik Browser (Google Chrome), kemudian masukkan url: http://localhost/tataufik/ sampai dengan ditampilkannya Halaman Beranda, kemudian klik Form Masuk untuk sign-in pengguna dengan cara input username dan password. User System Klik Start Menu Browser Input Username dan Password Klik Form Masuk Halaman Beranda Gambar 3.4 Aktivity Diagram Mulai Aplikasi Sedangkan sequence diagram dari Mulai Aplikasi Pembelajaran Kalkulus Proposisi adalah sebagai berikut: User Browser Form Masuk Start Klik Form Masuk Tampilkan Form Sign-in Input Username, Password Gambar 3.5 Sequence Diagram Mulai Aplikasi

61 Activity diagram dan sequence diagram yang kedua merupakan lanjutan dari Mulai Aplikasi yaitu sub program untuk Sign-in. User System Input Username dan Password Submit Cek Username Tampilkan pesan 1 Cek Password Tampilkan Pesan 2 Validasi ke DB Username Valid Tampilkan Pesan 3 Password Valid Tampilkan Pesan 4 Tampilkan Main Menu Menu Simulasi Menu Materi Menu Latihan Menu Nilai Pilih Menu Gambar 3.6 Activity Diagram Sign-in Aplikasi Untuk sequence diagram dari sub program Sign-in adalah seperti terlihat pada gambar berikut ini:

62 User Form Masuk tataufik Main Menu Input Username, Password Validasi Username Username Valid Validasi Password Password Valid Aktifkan Main Menu Tampilkan Main Menu Tampilkan Menu Simulasi/Materi/Latihan/Nilai Pilih Menu Simulasi/Materi/Latihan/Nilai Gambar 3.7 Sequence Diagram Sign-in Aplikasi Pada tahap ini jika dilihat seperti pada visualisasi rancangan sub program sign-in diatas dapat dituliskan sebagai berikut: 1. Pengguna input username dan password untuk menggunakan Aplikasi. 2. Submit username dan password, kemudian system akan melakukan pengecekan dan validasi username dan password ke database tataufik dimana username dan password disimpan. 3. Jika username dan password sudah di submit dan valid, maka Main Menu akan ditampilkan beserta menu-menu yang disediakan. 4. Pengguna dapat menggunakan Aplikasi dan dapat memilih menumenu yang disediakan sesuai keinginannya. Selanjutnya, jika menu yang dipilih oleh pengguna adalah menu Simulasi, maka diagram activity-nya adalah sebagai berikut:

63 User System Pilih Menu Simulasi Tampilkan Form Simulasi Input Proposisi Cek Input Proposisi Tampilkan Pesan 1 Cek Struktur Proposisi Tampilkan Pesan 2 Sederhanakan Proposisi ke Sub Proposisi Buat Tabel Tampilkan Hasil Tahap demi Tahap Input Proposisi Lagi Close Gambar 3.8 Activity Diagram Menu Simulasi Sub program Input Proposisi dalam rancangan sequnce diagram sebagaiman terlihat pada gambar di bawah ini:

64 User Main Menu Menu Simulasi Pilih Menu Simulasi Aktifkan Form Simulasi Tampilkan Form Input Proposisi Input Proposisi Cek Struktur Proposisi Tampilkan langkah-langkah yang akan dikerjakan Sederhanakan Proposisi ke Sub Proposisi Buat Tabel Tampilkan Hasil Gambar 3.9 Sequence Diagram Menu Simulasi Dalam rancangan activity diagram dan sequence diagram sub program menu Simulasi ini, dapat dituliskan seperti dibawah ini: 1. Pengguna memilih menu Simulasi. 2. Form untuk Input Proposisi akan ditampilkan. 3. Pengguna dapat memasukkan Proposisi yang ingin diproses pada textbox Proposisi kemudian klik Submit untuk melanjutkan atau Cancel untuk membatalkan. 4. Jika pengguna memilih klik tombol Submit, maka proses dilanjutkan dengan melakukan pengecekan struktur proposisi yang dimasukkan. 5. Jika struktur proposisi valid, maka proses dilanjutkan dengan menyederhanakan proposisi yang dimasukkan menjadi sub proposisi. 6. Sistem akan menampilkan langkah-langkah penyelesaian dan pembuatan tabel kebenaran kalkulus proposisi. Selanjutnya, jika pada Main Menu pengguna memilih menu Materi maka yang akan diproses adalah halaman Materi yang berisi rangkuman materi kalkulus proposisi secara singkat.

65 User System Pilih Menu Materi Tampilkan Daftar Materi Pilih Menu per Judul Tampilkan Judul Yang Dipilih Pilih Tombol Next Tampilkan Halaman Berikutnya Pilih Tombol Prev Tampilkan Halaman Sebelumnya Lanjutkan Materi Close Gambar 3.10 Activiy Diagram Menu Materi Dari gambar activity diagram untuk sub program Materi di atas dapat digambarkan pula rancangan sequence diagram untuk sub program tersebut sebagaimana terlihat pada gambar berikut:

66 User Main Menu Daftar Materi Pilih Menu Daftar Materi Aktifkan Halaman Daftar Materi Tampilkan Daftar Materi Tampilkan Menu per Judul Pilih Menu per Halaman Tampilkan Materi Yang Dipilih Pilih Next Tampilkan Materi Berikutnya Pilih Prev Tampilkan Materi Sebelumnya Gambar 3.11 Sequence Diagram Menu Materi Dari rancangan sub program Daftar Materi seperti terlihat pada activity diagram dan sequence diagram di atas dapat dibaca sebagai berikut: 1. Pengguna memilih menu Daftar Materi. 2. Halaman Daftar Materi yang berisi materi kalkulus proposisi secara singkat ditampilkan. 3. Pada Daftar Materi terdapat judul-judul untuk melihat materi proposisi yang diinginkan. 4. Jika memilih tombol Next, maka halaman materi berikutnya akan ditampilkan. 5. Jika memilih tombol Prev, maka halaman materi sebelumnya akan ditampilkan. Tahap selanjutnya dalam merancang Aplikasi Pembelajaran Kalkulus Proposisi ini adalah membuat rancangan antar-muka Aplikasi atau biasa disebut interface design.

67 3.2.4 Rancangan Antar-muka Aplikasi (Interface Design) Pada tahap Rancangan Antar-Muka Aplikasi (Interface Design), yang dilakukan adalah merancang secara visual tampilan-tampilan antar-muka (interface) Aplikasi yang ingin dibuat. Interface pertama adalah Beranda. Beranda ini merupakan tampilan awal (home) yang merupakan kesan pertama bagi pengguna terdiri dari menu Beranda, Tentang, Daftar dan Masuk (sign-in). TA Taufik Beranda Tentang Daftar Masuk Selamat datang LOGO Aplikasi Pembelajaran Kalkulus Proposisi Gambar 3.12 Design Interface Beranda (Home) Interface yang dirancang berikutnya adalah Form Tentang (About), dimana pada menu ini akan ditampilkan deskripsi mengenai aplikasi yang penulis buat. TA Taufik Beranda Tentang Daftar Masuk LOGO Aplikasi Pembelajaran Kalkulus Proposisi (APPEMKALPRO Versi 2.0.0) Gambar 3.13 Design Interface Menu Tentang (about)

68 Interface yang dirancang berikutnya adalah Form Daftar (Register), dimana pada menu ini akan ditampilkan form daftar user fungsinya untuk melakukan proses pendataan bagi pengguna baru yang akan menggunakan Aplikasi Pembelajaran Kalkulus Proposisi tersebut. TA Taufik Beranda Tentang Daftar Masuk Register Full Name Email Address Password Retry Password Register Gambar 3.14 Design Interface Menu Register Interface yang dirancang berikutnya adalah Form Sign in, dimana pengguna diharuskan memasukkan email address dan password yang valid. TA Taufik Beranda Tentang Daftar Masuk Sign in Email Address Password Sign in Gambar 3.15 Design interface Form Sign-in Untuk dapat menggunakan Aplikasi Pembelajaran Kalkulus Proposisi, pengguna harus melakukan Sign-in terlebih dahulu dengan cara memasukkan

69 alamat e-mail pada textbox email address dan password pada textbox password yang valid dan klik Sign-in. Tombol Sign-in berfungsi untuk melakukan proses selanjutnya untuk menggunakan Aplikasi Pembelajaran Kalkulus Proposisi tersebut. Setelah melakukan Sign-in dan memasukkan Password dengan benar, maka tampilan interface-nya sebagai berikut: TA Taufik Beranda Tentang Daftar Masuk Sign in admin@taufik.com Sign in Gambar 3.16 Design Interface Form Sign-in User Admin TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Selamat datang Admin TA LOGO Aplikasi Pembelajaran Kalkulus Proposisi Gambar 3.17 Design Interface Form Beranda User Admin Pada halaman Menu Beranda sign-in sebagai User Admin, terdapat beberapa menu yang disediakan sehingga pengguna dapat memilih menu yang tersedia. Menu-menu yang disediakan diantaranya adalah sebagai berikut:

70 Menu Beranda, untuk menuju ke halaman utama/beranda. Menu Simulasi, untuk memasukkan sebuah proposisi yang akan diproses. Menu Users dengan sub-menu yang terdiri dari sub-menu daftar user dan sub-menu tambah user. Menu Materi dengan sub-menu, untuk melihat halaman-halaman materi baik secara berurut maupun acak (langsung ke materi yang diinginkan), Menu Latihan dengan sub-menu yang terdiri dari sub-menu daftar latihan dan sub-menu tambah latihan. Menu Nilai, untuk melihat nilai dari user yang telah mengerjakan soal-soal pada menu latihan. Menu Keluar, untuk selesai atau keluar menuju beranda atau halaman utama dari aplikasi. Interface selanjutnya adalah Halaman Simulasi, halaman ini menampilkan kolom inputan dilengkapi dengan tombol untuk memasukkan sebuah proposisi yang akan diproses. Gambar 3.18 Design Interface Halaman Simulasi Interface selanjutnya adalah Halaman Daftar User, halaman ini merupakan sub-menu dari Menu Users yang terdapat data dari beberapa user. User Admin bisa melakukan edit maupun delete terhadap data user tersebut.

71 TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Users / Daftar user / Data No. Nama Lengkap Email Rule Menu 1 Admin TA admin@taufik.com Admin Edit Delete 2 Iman iman@iman.net Member Edit Delete 3 M. Taufik taufik@taufik.com Member Edit Delete 4 Rahman rahman@taufik.com Member Edit Delete Gambar 3.19 Design Interface Halaman Daftar User Interface selanjutnya adalah Halaman Tambah User Baru, halaman ini merupakan sub-menu dari Menu Users yang merupakan halaman untuk menambahkan user baru. Pada halaman ini user Admin bisa menentukan rule pada user baru yang akan ditambahkan, rule tersebut terdiri dari admin atau member. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Users / Daftar user / Tambah User Baru / Form Tambah User Baru Full Name Email Address Password Retry Password Rule Submit Gambar 3.20 Design Interface Halaman Tambah User Baru

72 Interface selanjutnya adalah halaman Materi, halaman Materi ini berisi beberapa sub-sub yaitu: Daftar Materi, berisi judul materi dilengkapi dengan menu edit delete. Tambah Materi Baru, merupakan sub-menu yang difungsikan untuk menambahkan materi baru yang diinginkan. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Materi / Daftar Materi / Data No. Judul Menu 1 Materi A Edit Delete 2 Materi B Edit Delete 3 Materi C Edit Delete 4 Materi D Edit Delete. Gambar 3.21 Design Interface Halaman Daftar Materi. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Materi / Daftar Materi / Tambah Materi Baru / Form Judul Materi Isi Materi Submit Gambar 3.22 Design Interface Halaman Tambah Materi Baru

73 Interface selanjutnya adalah halaman Latihan, halaman Latihan ini berisi beberapa sub-sub yaitu: Daftar Latihan, berisi judul latihan dilengkapi dengan kunci jawaban dan menu edit delete. Tambah Latihan Baru, merupakan sub-menu yang difungsikan untuk menambahkan soal latihan baru yang diinginkan. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Latihan / Daftar Latihan / Data. No. Judul Kunci Jawaban Menu 1 Materi A A Edit Delete 2 Materi B B Edit Delete 3 Materi C C Edit Delete 4 Materi D D Edit Delete Gambar 3.23 Design Interface Halaman Daftar Latihan. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Latihan / Daftar Latihan / Tambah Latihan Baru / Form Judul Materi Pertanyaaan Kunci Jawaban Submit Gambar 3.24 Design Interface Halaman Tambah Latihan Baru

74 Interface selanjutnya adalah halaman Nilai, halaman Nilai ini berisi daftar nilai user yang telah melakukan latihan di menu latihan, dilengkapi dengan Score dan tanggal user melakukan latihan tersebut.. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Nilai / Daftar Nilai / Data No. Nama Lengkap User Score Date 1 User A 100 27 Mei 2013 2 User B 90 26 Mei 2013 3 User C 80 25 Mei 2013 4 User D 70 24 Mei 2013 Gambar 3.25 Design Interface Halaman Daftar Nilai Setelah pengguna/user admin selesai dan meng-klik Menu Keluar maka akan diarahkan pada tampilan sign-in kembali disertai dengan keterangan bahwa You have been log out. TA Taufik Beranda Tentang Daftar Masuk Sign in Email Address Password Sign in You have been log out Gambar 3.26 Design interface Form Sign-in setelah user keluar

75 Perancangan interface selanjutnya adalah sign-in sebagai user member. Setelah melakukan Sign-in dan memasukkan Password dengan benar, maka tampilan interface-nya sebagai berikut: TA Taufik Beranda Tentang Daftar Masuk Sign in taufik@taufik.com Sign in Gambar 3.27 Design Interface Form Sign-in User Member TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Selamat datang M. Taufik LOGO Aplikasi Pembelajaran Kalkulus Proposisi Gambar 3.28 Design Interface Form Beranda User Member Pada halaman Menu Beranda sign-in sebagai User Member, terdapat beberapa menu yang disediakan sehingga pengguna dapat memilih menu yang tersedia. Menu-menu yang disediakan diantaranya adalah sebagai berikut: Menu Beranda, untuk menuju ke halaman utama/beranda. Menu Simulasi, untuk memasukkan sebuah proposisi yang akan diproses.

76 Menu Materi dengan sub-menu, untuk melihat halaman-halaman materi baik secara berurut maupun acak (langsung ke materi yang diinginkan), Menu Latihan dengan sub-menu yang terdiri dari sub-menu daftar latihan dan sub-menu tambah latihan. Menu Nilai, untuk melihat nilai dari user yang telah mengerjakan soal-soal pada menu latihan. Menu Profil, untuk melihat data profil dari user member. Menu Keluar, untuk selesai atau keluar menuju beranda atau halaman utama dari aplikasi. Interface untuk Halaman Simulasi pada dasarnya tampilannya sama seperti pada sign-in sebagai user admin. Gambar 3.29 Design Interface Halaman Simulasi Sign-in User Member Interface selanjutnya adalah halaman Materi, halaman Materi ini berisi beberapa judul materi dilengkapi dengan fasilitas pencarian (searching) judul materi yang diinginkan..

77 TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Materi / Data Judul materi Search No. Judul Materi 1 Materi A 2 Materi B 3 Materi C 4 Materi D Gambar 3.30 Design Interface Halaman Materi Sign-in sebagai User Member Interface selanjutnya adalah halaman Latihan, halaman Latihan ini berisi latihan soal yang dilengkapi dengan waktu sebagai pembatas user untuk mengerjakan soal latihan. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Latihan / Soal TIMING Pertanyaaan Pilihan A Pilihan B Pilihan C Pilihan D Submit Gambar 3.31 Design Interface Halaman Latihan.

78 Interface selanjutnya adalah halaman Nilai, halaman Nilai ini berisi daftar nilai user setelah melakukan latihan di menu latihan, dilengkapi dengan Score dan tanggal user melakukan latihan tersebut.. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Nilai / Data No. Score Date 1 100 27 Mei 2013 2 90 26 Mei 2013 3 80 25 Mei 2013 4 70 24 Mei 2013 Gambar 3.32 Design Interface Halaman Daftar Nilai Interface selanjutnya adalah halaman Profil, halaman Profil ini berisi data user dan user bisa melakukan perubahan password yang diinginkan.. TA Taufik Beranda Simulasi Users Materi Latihan Nilai Keluar Profil / Data Profil M. Taufik taufik@taufik.com Password Retry Password Update Gambar 3.33 Design Interface Halaman Profil