BAB IV PERANCANGAN SISTEM. bagian dengan tujuan untuk mengidentifikasikan suatu permasalahan serta

Transkripsi

1 BAB IV PERANCANGAN SISTEM 4.1 Analisis Sistem Analisis sistem merupakan pendefinisian suatu sistem menjadi beberapa bagian dengan tujuan untuk mengidentifikasikan suatu permasalahan serta mengevaluasinya agar didapatkan suatu sistem yang sesuai dengan kebutuhan Analisis Masalah Dalam melakukan pembangunan aplikasi resep makanan berbasis android ini terdapat beberapa masalah dan faktor faktor penting yang perlu diperhatikan. Faktor faktor yang akan dianalisa yaitu mengenai kebutuhan informasi resep bagi pengguna yang akan dijadikan sebagai acuan dalam pembangunan perangkat lunak aplikasi resep makanan berbasis android. 4.2 Perancangan Sistem Perancangan adalah suatu bagian dari metodologi pengembangan pembangunan suatu perangkat lunak yang dilakukan setelah tahapan untuk memberikan gambaran secara terperinci. 41

2 Berdasarkan uraian diatas perancangan sistem merupakan tahapan dari siklus pengembangan sistem yang didefinisikan dari kebutuhan-kebutuhan fungsional dan persiapan untuk rancang bangun implementasi yang menggambarkan bagaimana suatu sistem dibentuk, yang dapat berupa penggambaran, perancangan, dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi, juga menyangkut konfigurasi dari komponen-komponen perangkat keras dan perangkat lunak dari suatu sistem Tujuan Perancangan Sistem Tujuan dari pembuatan perancangan sistem Aplikasi Resep Makanan Berbasis Android adalah untuk menghasilkan suatu aplikasi mobile berbasis android yang mampu : 1. Membuat aplikasi resep makanan pada sistem operasi android. 2. Memberikan kemudahan dalam mendapatkan referensi resep makanan Gambaran Umum Sistem yang Diusulkan Pembuatan Aplikasi Resep Makanan diharapkan mampu menyediakan informasi resep makanan, cara pembuatan makanan dan juga sebagai media penyimpanan resep makanan yang akan diterapkan pada smartphone android. 42

3 4.2.3 Perancangan Sistem yang Diusulkan Proses perancangan ini adalah tahap awal dari perancangan aplikasi resep makanan berbasis android yang dilakukan sebagai pemecahan masalah yang ada pada proses aplikasi resep makanan ketika digunakan Use Case Diagram Resep Cake <<include>> <<include>> Resep Minuman Menu Resep <<include>> User <<include>> Resep Masakan Nabati Resep Masakan Hewani Gambar 4.1 Use Case Diagram Definisi Aktor oleh User. Definisi aktor berfungsi untuk menjelaskan proses yang dapat dijalankan 43

4 Adapun definisi aktor sebagai berikut : Tabel 4.1 Definisi Aktor No Aktor Deskripsi 1 User Aktor dapat menjalankan Menu Resep yang di dalamnya terdapat sub menu resep cake, resep minuman, resep masakan nabati dan resep masakan hewani Definisi Use Case Definisi Use Case berfungsi untuk menjelaskan proses yang terdapat pada setiap Use Case. Definisi Use Case dapat dilihat pada tabel berikut : Tabel 4.2 Definisi Use Case No Use Case Deskripsi 1 Menu Resep Sistem menampilkan menu Referensi Resep yang berisikan sub menu resep terdiri dari resep cake, resep minuman, resep masakan nabati dan resep masakan hewani 2 Resep Cake Sistem menampilkan menu Resep Cake yang berisikan berbagai resep cake 44

5 No Use Case Deskripsi 3 Resep Minuman Sistem menampilkan menu Resep Cake yang berisikan berbagai resep minuman 4 Resep Makanan Nabati 5 Resep Makanan Hewani Sistem menampilkan menu Resep Cake yang berisikan berbagai resep makanan nabati Sistem menampilkan menu Resep Cake yang berisikan berbagai resep hewani Skenario Use Case Skenario setiap bagian pada Use Case menunjukkan proses apa yang terjadi pada setiap bagian didalam Use Case tersebut, dimana user memberikan perintah pada setiap bagian dan respon apa yang diberikan oleh sistem kepada user setelah user memberikan perintah pada setiap bagian bagian Use Case. Berikut adalah Skenario Use Case yang terdapat pada aplikasi resep makanan : No Use Case : 01 Nama Use Case : Menu Resep Skenario : 45

6 Tabel 4.3 Skenario Use Case Menu Resep Aksi Aktor Reaksi Sistem 1. Memilih menu Resep 2. Menampilkan layar Menu Resep 3. Memilih jenis resep yang ingin ditampilkan 4. Menampilkan isi resep pilihan 5. Menerima resep pilihan 6. Klik menu Kembali 7. Menampilkan layar Menu Utama Nama Use Case : Menu Resep Cake Skenario : Tabel 4.4 Skenario Use Case Menu Resep Cake Aksi Aktor Reaksi Sistem 1. Memilih menu Resep Cake 2. Menampilkan layar Menu Resep Cake 46

7 Aksi Aktor Reaksi Sistem 3. Memilih jenis resep cake yang ingin ditampilkan 4. Menampilkan isi resep cake 5. Menerima isi resep cake 6. Klik menu Kembali 7. Menampilkan layar Menu Resep Nama Use Case : Menu Resep Minuman Skenario : Tabel 4.5 Skenario Use Case Resep Minuman Aksi Aktor Reaksi Sistem 1. Memilih menu Resep Minuman 2. Menampilkan layar Menu Resep Minuman 3. Memilih jenis resep minuman yang ingin ditampilkan 4. Menampilkan resep minuman yang dipilih 47

8 Aksi Aktor Reaksi Sistem 5. Menerima isi resep minuman yang dipilih 6. Klik menu Kembali 7. Menampilkan layar Resep Minuman Nama Use Case : Menu Resep Masakan Hewani Skenario : Tabel 4.6 Skenario Use Case Menu Resep Masakan Hewani Aksi Aktor Reaksi Sistem 1. Memilih menu Resep Masakan Hewani 2. Menampilkan layar Menu Resep Masakan Hewani 3. Memilih Resep Masakan Hewani yang ingin ditampilkan 4. Menampilkan isi Resep Masakan Hewani 48

9 Aksi Aktor Reaksi Sistem 5. Menerima isi Resep Masakan Hewani 6. Klik menu Kembali 7. Menampilkan layar Resep Masakan Hewani Nama Use Case : Menu Resep Masakan Nabati Skenario : Tabel 4.7 Skenario Use Case Referensi Resep Masakan Nabati Aksi Aktor Reaksi Sistem 1. Memilih menu Resep Masakan Nabati 2. Menampilkan layar Menu Resep Masakan Nabati 3. Memilih Resep Masakan Nabati yang ingin ditampilkan 4. Menampilkan isi Resep Masakan Nabati 49

10 Aksi Aktor Reaksi Sistem 5. Menerima isi Resep Masakan Nabati 6. Klik menu Kembali 7. Menampilkan layar Resep Masakan Nabati Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. Berikut adalah Activity Diagram yang terdapat pada aplikasi resep makanan: 50

11 1. Activity Diagram Menu Resep User Sistem Pilih Menu Resep Menampilkan Layar Menu Resep Memilih Jenis Resep Menampilkan Informasi Jenis Resep Menerima Jenis Resep yang dipilih Gambar 4.2 Activity Diagram Menu Resep 2. Activity Diagram Menu Resep Cake User Sistem Pilih Jenis Menu Resep Cake Menampilkan Layar Menu Resep Cake Memilih Resep Cake Menampilkan Resep Cake Menerima Resep yang dipilih Gambar 4.3 Activity Diagram Menu Resep Cake 51

12 3. Activity Diagram Menu Resep Minuman User Sistem Pilih Jenis Menu Resep Minuman Menampilkan Layar Menu Resep Minuman Memilih Resep Minuman Menampilkan Resep Minuman Menerima Resep yang dipilih Gambar 4.4 Activity Diagram Menu Resep Minuman 4. Activity Diagram Menu Resep Masakan Hewani User Sistem Pilih Jenis Menu Resep Masakan Hewani Menampilkan Layar Menu Resep Masakan Hewani Memilih Resep Masakan Hewani Menampilkan Resep Masakan Hewani Menerima Resep yang dipilih Gambar 4.5 Activity Diagram Menu Resep Masakan Hewani 52

13 5. Activity Diagram Menu Resep Masakan Nabati User Sistem Pilih Jenis Menu Resep Masakan Nabati Menampilkan Layar Menu Resep Masakan Nabati Memilih Resep Masakan Nabati Menampilkan Resep Masakan Nabati Menerima Resep yang dipilih Gambar 4.6 Activity Diagram Menu Resep Masakan Nabati 6. Activity Diagram Menu Tips User Sistem Pilih Menu Tips Menampilkan Layar Menu Tips Menerima Tips Menampilkan Tips Gambar 4.7 Activity Diagram Menu Tips 53

14 7. Activity Diagram Menu Petunjuk User Sistem Pilih Menu Petunjuk Menampilkan Layar Menu Petunjuk Menerima Petunjuk Menampilkan Petunjuk Gambar 4.8 Activity Diagram Menu Petunjuk 8. Activity Diagram Menu Tentang User Sistem Pilih Menu Tentang Menampilkan Layar Menu Tentang Menerima Menu Tentang Menampilkan Menu Tentang Gambar 4.9 Activity Diagram Menu Tentang 54

15 9. Activity Diagram Keluar User Sistem Pilih tombol Keluar Menutup Aplikasi Menerima tampilan default telepon genggam Menampilkan default telepon genggam Gambar 4.10 Activity Diagram Keluar Sequence Diagram Sequence Diagram menggambarkan interaksi antar objek di dalam dan disekitar sistem (termasuk user, display, dan sebagainya). Sequence Diagram terdiri atas dimensi vertical (waktu) dan dimensi horizontal (objek-objek yang terkait). Berikut adalah Sequence Diagram yang terdapat pada aplikasi resep makanan : 55

16 1. Sequence Diagram Menu Resep User Menu Resep 1 : Pilih Menu Resep() 2 : Panggil Resep() 3 : Menampilkan List Jenis Resep() 4 : Pilih Resep() 5 : Menampilkan Jenis Resep() 2. Sequence Diagram Resep Cake Gambar 4.11 Sequence Diagram Menu Resep User Menu Resep dbresep 1 : Pilih Menu Resep() 2 : Panggil Resep() 3 : Menampilkan List Jenis Resep() 4 : Pilih Resep() 5 : Menampilkan Jenis Resep() 6 : Pilih btncake() 7 : Menampilkan resepcake() Gambar 4.12 Sequence Diagram Resep Cake 56

17 3. Sequence Diagram Resep Minuman User Menu Resep dbresep 1 : Pilih Menu Resep() 2 : Panggil Resep() 3 : Menampilkan List Jenis Resep() 4 : Pilih Resep() 5 : Menampilkan Jenis Resep() 6 : Pilih btnminuman() 7 : Menampilkan resepminuman() Gambar 4.13 Sequence Diagram Resep Minuman 4. Sequence Diagram Resep Masakan Hewani User Menu Resep dbresep 1 : Pilih Menu Resep() 2 : Panggil Resep() 3 : Menampilkan List Jenis Resep() 4 : Pilih Resep() 5 : Menampilkan Jenis Resep() 6 : Pilih btnmasakanhewani() 7 : Menampilkan resepmasakanhewani() Gambar 4.14 Sequence Diagram Resep Masakan Hewani 57

18 5. Sequence Diagram Resep Masakan Nabati User Menu Resep dbresep 1 : Pilih Menu Resep() 2 : Panggil Resep() 3 : Menampilkan List Jenis Resep() 4 : Pilih Resep() 5 : Menampilkan Jenis Resep() 6 : Pilih btnmasakannabati() 7 : Menampilkan resepmasakannabati() Gambar 4.15 Sequence Diagram Resep Masakan Nabati 6. Sequence Diagram Menu Tips User Menu Tips 1 : Pilih Menu Tips() 2 : Panggil Tips() 3 : MenampilkanMenu Tips() Gambar 4.16 Sequence Diagram Menu Tips 58

19 7. Sequence Diagram Menu Petunjuk User Menu Petunjuk 1 : Pilih Menu Petunjuk() 2 : Panggil Petunjuk() 3 : Menampilkan Menu Petunjuk() Gambar 4.17 Sequence Diagram Menu Petunjuk 8. Sequence Diagram Menu Tentang User Menu Tentang 1 : Pilih Menu Tentang() 2 : Panggil Tentang() 3 : Menampilkan Menu Tentang() Gambar 4.18 Sequence Diagram Menu Tentang 59

20 9. Sequence Diagram Exit User Menu Exit 1 : Pilih Menu Exit() 2 : Panggil menu Exit() 3 : Menampilkan default telepon genggam() Gambar 4.19 Sequence Diagram Exit Class Diagram Class diagram digunakan untuk menampilkan kelas kelas dan paket paket di dalam sistem, class diagram memberikan gambaran relasi antar kelas. Kelas terdiri dari atribut dan operasi nya. 60

21 CategoriResep Database +nama_db: String +Database() +id() +getstringidcat() +getstringnamaresep() +getstringringkasan() +getstringbahan() +getstringcarabuat() +getstringcarahias() +getstringsumber() +getstringimage() ListViewResep +id_cat: String +nama_resep: String +image: String +ringkasan: String +getstringnamaresep() +getstringringkasan() +getstringimage() +setadapter() +setonitemclicklistener() +setcontentview() +findviewbyid() +dataay.length() +Operation1() +putextras() +startactivity() DetilResep +image: String +nama_resep: String +ringkasan: String +bahan: String +cara_buat: String +cara_hias: String +sumber: String +findviewbyid() +getstringnamaresep() +getstringringkasan() +getstringbahan() +getstringcarabuat() +getstringcarahias() +getstringsumber() +getstringimage() +getitemid() +getstringextra() +getintent() +getmenuinflater() +TextView() +settext() +ImageView() +Button Cake +Button Minuman +Button Nabati +Button Hewani +id_cat: String +TextView() +onclick() +ImageButton() +setcontentview() +setonclicklistener() +getmenuinflater() +getid() +getitemid() +putstring() +putextras() +startactivity() +show() +onoptionsitemselected() Adapter +Adapter() +ImageLoader() +getview() +getitemid() +getitem() +getcount() +LayoutInflater() +getsystemservice() +inflate() +LayoutInflater() +findviewbyid() +settext() +DisplayImage() ImageLoader +MemoryCache() +ImageLoader() +FileCache() +DisplayImage() +imageview() +setimagebitmap() +setimageresource() +getcontext() +getfile() +getbitmap() +PhotoToLoad() +PhotosLoader() +decodefile() +openconnection() +imageviewreused() +BitmapDisplayer() +clearcache() MenuUtama +categori_resep +tips: String +petunjuk: String +tentang: String +keluar: String +onclicklistener() +onclick() +setonclicklistener() +setcontentview() +getmenuinflater() +getitemid() +oncreate() +findviewbyid() +startactivity() +show() +inflate() +intent() +show() +maketext() +onoptionitemselected() +finish() Tips +TextView() +OnCreate() +setcontentview() +getmenuinflater() +getitemid() +oncreateoptionmenu() +maketext() +startactivity() +onoptionsitemselected() Tentang +TextView() +oncreate() +setcontentview() +getmenuinflater() +getitemid() +oncreateoptionmenu() +maketext() +startactivity() +onoptionsitemselected() Petunjuk +TextView() +oncreate() +setcontentview() +getitemid() +getmenuinflater() +oncreateoptionmenu() +maketext() +startactivity() +onoptionsitemselected() Gambar 4.20 Class Diagram Aplikasi Resep Makanan Object Diagram Diagram objek menggambarkan struktur sistem dari segi penamaan objek dan jalannya objek dalam sistem. Pada diagram objek harus dipastikan semua kelas yang sudah didefinisikan pada diagram kelas harus dipakai objeknya, karena jika tidak pendefinisian kelas itu tidak dapat dipertanggung jawabkan. 61

22 Ttg : Tentang Lsv : ListViewResep id_cat: cake nama_resep: Rainbow Cake image: rainbow ringkasan: rainbow cake CategoriResep id_cat: cake Button Cake MenuUtama categori_resep: Resep tips: Tips petunjuk: Petunjuk tentang: Tentang keluar: Exit Ptj : Petunjuk db : Database nama_db: Resep Ad : Adapter Tps : Tips Rr : DetilResep image: rainbow nama_resep: Rainbow Cake ringkasan: rainbow cake adalah bahan: Bahan cake: cara_buat: Cara buat: cara_hias: Cara hias: sumber: Buku Resep Il : ImageLoader Gambar 4.21 Object Diagram Aplikasi Resep Makanan Component Diagram Component Diagram dibawah ini menggambarkan struktur dan hubungan antar komponen piranti lunak Aplikasi Resep Makanan Berbasis Android dalam suatu package. 62

23 ResepCake.java ResepMinuman.java KategoriResep.java ResepMasakanNabati.java Tips.java ResepMasakanHewani.java MenuUtama.java Petunjuk.java Tentang.java Exit.java Gambar 4.22 Component Diagram Deployment Diagram Deployment Diagram dibawah ini menggambarkan komponen pada deploy dalam suatu infrastruktur sistem Aplikasi Resep Makanan Berbasis Android beserta hubungannya. Smartphone Cookingdroid.apk PC/Laptop Cookingdroid Project IDE Eclipse OS Android Gambar 4.23 Deployment Diagram 63

24 4.2.4 Perancangan Antar Muka Perancangan antarmuka dibutuhkan untuk mewakili keadaan sebenarnya dari aplikasi yang akan dibangun, berikut akan disajikan perancangan antarmuka dari aplikasi yang akan dibangun. Perancangan ini merupakan hasil transformasi dari analisa ke dalam perancangan yang nantinya akan di implementasikan Menu Utama Pada perancangan struktur menu Aplikasi Resep Makanan Berbasis Android memiliki 5 menu utama diantaranya Resep, Tips, Panduan, Tentang dan Keluar. Gambar 4.24 Perancangan Struktur Menu Utama Aplikasi 64

25 Menu Resep Pada menu resep terdapat pilihan jenis resep yang telah tersedia. Menu cake, minuman, masakan hewani dan masakan nabati. Gambar 4.25 Perancangan Menu Resep Tips Menu tips berisikan tips tips bagi pemula untuk memasak. 65

26 Gambar 4.26 Perancangan Menu Tips Panduan makanan ini. Menu petunjuk berisikan bagaimana cara mengoperasikan aplikasi resep Gambar 4.27 Perancangan Menu Panduan 66

27 Tentang Menu tentang berisikan hak cipta,tahun pembuatan, tentang aplikasi serta pembuat applikasi. Gambar 4.28 Perancangan Menu Tentang Detail Resep Detail resep merupakan form yang berisikan isi dari resep berupa gambar, nama resep, bahan pembuatan serta cara pembuatan. 67

28 Gambar 4.29 Perancangan Detail Resep 68