TYPE THE COMPANY NAME (1)

[TYPE THE COMPANY NAME]

[Type the document title]

[Type the document subtitle]

Asus [Pick the date]

2

ANALISIS KEBUTUHAN SISTEM

1.1 Tujuan Praktikum

2. Praktikan mampu mendefinisikan pengertian analisis sistem.

3. Praktikan mampu menjelaskan peran para ahli yang akan terlibat dalam pengembangan sistem.

4. Praktikan mampu memahami dan mendefinisikan problem st at ement.

5. Praktikan mampu mendefinisikan proses identifikasi kandidat obyek-obyek bisnis. 6. Praktikan mampu menjelaskan peran dan fungsi dari Use case diagram.

7. Praktikan mampu membuat Use case Form dan mampu menjelaskan skenario untuk setiap use case.

Analisis sistem adalah penelitian atas sistem yang telah ada dengan tujuan untuk merancang sistem baru atau diperbaharui. Kegiatan analisis sistem adalah kegiatan untuk melihat sistem yang sudah berjalan, melihat bagian mana yang bagus dan tidak bagus, dan kemudian mendokumentasikan kebutuhan yang akan dipenuhi dalam sistem yang baru. Pada proyek sistem informasi, proses analisis dan desain sering berjalan bersama-sama agar lebih mudah mendefinisikan kebutuhan jika user telah melihat gambar rancangan sistem yang baru. Adapun beberapa tahap untuk melakukan analisis sistem yaitu:

Menetapkan masalah awal yang ada pada sistem, menetapkan ruang lingkup untuk pengembangan sistem,mengkomunikasin rencana proyek.

2. Analisis masalah

Menganalisis masalah dan kesempatan serta menganalisa proses bisnis selanjutnya menentukan tujuan perbaikan sistem untuk sistem baru dan sistemm yang ditingkatkan.

5. Analisis keputusan

Fase ini menekankan bagaimana sistem baru dapat diimplementasiakn dengan teknologi.

1.3.2

Problem Statement

Problem st at ement merupakan dokumen yang mendeskripsikan kebutuhan-kebutuhan cust omer sistem dalam suatu proyek sebagai basis untuk mengidentifikasi domain problem. Dimana suatu problem st at ement harus menjelaskan secara jelas, yaitu:

1. Semua informasi yang dibutuhkan dalam analisis dan perancangan sistem. 2. Batasan‐batasan yang harus dipertimbangkan selama pengembangan sistem. 3. Aliran informasi yang ada pada sistem.

4. Pengguna dari sistem yang akan dikembangkan. 5. Masukan dan keluaran sistem.

1.3.4

Problem Domain

4

1.3.5 M enentukan Kandidat Obyek dan Kelas

Dalam fase analisis ini dilakukan identifikasi daftar obyek dan kelas yang diperlukan di sistem yang akan dikembangkan. Identifikasi ini dilakukan mulai dari problem st at ement, cara untuk mengidentifkasi kandidat obyek dan kelas 3 yaitu dengan menggaris bawahi kata benda dan frase kata benda dari problem statement.

Contoh peminjaman buku di perpustakaan:

Setiap mahasiswa IT Telkom mempunyai kartu pinjam perpustakaan, dimana setiap mahasiswa dapat meminjam buku dengan alur, pertama mahasiswa login dengan KTM ke dalam sistem, kemudian mahasiswa dapat memilih buku yang diinginkan dengan melihat katalog buku di sistem, setelah dapat, mahasiswa membawa buku tersebut ke merupakan model bisnis untuk mengawali identifikasi dalam menganalisis masalah.

1.3.6 M enentukan Form Kandidat Obyek dan Kelas

1.3.7 M embuat Usecase Diagram

Merupakan gambaran fungsionalitas yang diharapkan dari sebuah sistem yang ditekankan adalah “apa” yang diperbuat sistem bukan “bagaimana” sistem mengerjakannya. Usecase menggambarkan kebutuhan sistem dari sudut pandang user, menggambarkan hubungan antara usescase dan actor. Secara umum usecase mempunyai beberapa bagian penting seperti:

1. Usecase

Merupakan fungsionalitas yang disediakan sistem sebagai unit-unit yang saling bertukar pesan antar unit atau aktor, biasanya dinyatakan dengan menggunakan kata kerja. Dinotasikan dengan gambar horizontal elipse dan tidak boleh ada 2 atau lebih nama usecase yang sama. Simbolnya seperti ini:

6

2. Act ors

 Menggambarkan orang, sistem,atau external entitas yang menyediakan atau menerrima informasi dari system.

 Aktor menggambarkan sebuag tugas atau peran dan bukan jabatan.  Aktor memberikan input atau menerima informasi.

 Aktor biasayan menggunakan kata benda.

 Tidak boleh ada komunikasi langsung antar actor.  Meletakkan aktor utama di pojok kiri atas. Simbolnya seperti dibawah ini:

3. Syst em Boundary

 Digambarkan dengan kotak disekitar usecase, untuk menggambarkan jangkauan sistem.

 Digunakan apabila memberikan beberapa alternatif sistem yang dapat dijadikan pilihan.

4. Relat ionship

 Asosiasi bukan menggambarkan aliran data / informasi.

 Asosiasi digunakan untuk menggambarkan bagaimana aktor terlibat dalam usecase.  Terdapat 4 jenis relasi yang timbul pada usecase diagram yaitu:

 Asosiasi antara aktor dan usecase.

 Ujung panah pada asosiasi mengindikasin siapa / apa yang meminta interaksi dan bukannya mengindikasin aliran data.

 Menggunakan garis tanpa panah.

 Jika asosiasi mengguankan panah terbuka untuk mengindikasi bila aktor berinteraksi secara pasif dengan sistem.

 Asosiasi antar usecase.

8

 Termasuk didalam usecase lain / required / diharuskan ada.

 Cara penggambaran association include secara horizontal.

 <<extends>>

 Perluasan dari usecase lain jika kondisi atau syarat terpenuhi.

 Tanda panah terbuka harus terarah ke parent / base usecase.

 Gambaran association extend secara vertikal 7.

 Generalisasi/ inheritance antara usecase.

 Digambarkan dengan garis berpanah tertutup pada salah satu ujungnya yang menunjukkan lebih umum.

 Cara penggambarannya secara vertical dengan inheriting usecase dibawah parent usecasenya.

 Generalisasi / inheritance antara actor.

 Gambarkan secara vertikal dengan inherit ing aktor dibawah parent usecase.

1.3.8 Use case Form

Digunakan untuk menulis ringkasan setiap usecase. Usecase form bukan bagian dari uml. Tidak ada form standar atau definitive sehingga pengembang dapat membuat versi form masing-masing.

1.4 Getting Started Perancangan Use Case Diagram dengan Pow er Designer

10

 Untuk merancang Use Case, gunakan kotak [Palette].

12

 Demikian pula dalam merancang use case yaitu klik icon [ ] klik pada area perancangan use case diagram. Untuk mengganti nama pada actor dan use case klik double

pada actor atau use case. Untuk asosiasi antara actor dengan use case klik icon [ ],

1.5 Praktikum

Studi Kasus

Perpustakaan Nastar merupakan perpustakaan milik negara yang berpusat di Bandung. Perpustakaan ini mempunyai jumlah anggota dan juga jumlah buku yang sangat banyak. Untuk menangani data mengenai anggota, administrasi, dan pengelolaan buku, maka diperlukan suatu sistem untuk mengatur jalannya transaksi data mengenai hal-hal tersebut. Perpustakaan Nastar juga mempunyai beberapa officer yang bertugas untuk menginputkan data peminjaman buku, penginputan anggota baru, penginputan data buku. Anggota perpustakaan juga dapat mencari buku yang dicari melalui sistem tanpa harus melakukannya secara manual. Anggota perpustakaan yang ingin meminjam buku harus membawa kartu anggota dan memperlihatkannya kepada officer. Anggota hanya dapat meminjam 3 buku sekali pinjam, dan tidak dapat melakukan peminjaman apabila masih ada buku yang dipinjam namun belum dikembalikan. Jika melewati batas peminjaman, maka anggota akan dikenakan denda. Officer yang melayani peminjaman buku, setelah mendapatkan kartu anggota dari anggota dan akan mengecek status peminjaman dari anggota tersebut dengan cara memasukkan ID anggota, apabila anggota tersebut masih dalam peminjaman buku, maka tidak dapat dilakukan peminjaman, sedangkan jika tidak, maka dapat dilanjutkan untuk penginputan data buku yang dipinjam oleh user tersebut. Apabila ada buku baru yang masuk, maka officer akan menginputkannya ke dalam sistem, lengkap dengan stok, dan informasi lainnya mengenai buku tersebut. Officer juga dapat melayani orang yang ingin menjadi anggota perpustakaan dengan menginputkan data-data calon anggota ke dalam sistem.

Dari studi kasus di atas:

16

PERANCANGAN TAHAP ANALISIS DAN

DATABASE SISTEM

2.1 Tujuan Praktikum

1. Praktikan mampu memahami macam-macam perancangan obyek dan kelas di tahap analisis. 2. Praktikan mampu membuat int erface sistem.

3. Praktikan mampu menganalisis kebutuhan data.

4. Praktikan mampu membuat dat abase syst em secara Concept ual Dat a M odel (CDM) dan

2.3.1 Perancangan Obyek dan Kelas Tahap Analisis

2.3.1.1 Inheritance

Inheritance merupakan suatu cara untuk menurunkan suatu class yang lebih umum menjadi suatu class yang lebih spesifik. Class utama disebut superclass, sedangkan class turunan disebut subclass.Suatu class boleh memiliki beberapa subclass, tetapi suatu class tidak boleh memiliki lebih dari satu superclass.

Catatan : panah dengan kepala segitiga menuju kearah superclass.

2.3.1.2 Generalisasi dan Spesialisasi

Generalisasi adalah konsep ketika beberapa class yang telah ada dalam class diagram memiliki fungsionalitas, struktur dan tujuan umum.

18

2.3.1.3

Polymorphism

Polymorphism merupakan kemampuan suatu class untuk mempunyai beberapa bentuk class yang berbeda.Polymorphism bisa disamakan dengan overload method, dimana sebuah class terdapat beberapa method dengan nama yang sama.

2.3.1.4

Abstract class

Abst ract classmerupakan class yang memiliki fungsi yang tidak komplit dan tidak bisa di instantiasi. Class yang meng-ext endsclass abstract mewarisi semua methodnya (termasuk method abstrak). Ketika subclass menulis kembali method superclass-nya, maka subclass ini me-overridemethod superclass-nya.

Notasi UML untuk abstract class :

Catatan :

 Class abstract ditulis italic atau ditulis setelah nama class dengan kurung kurawal {abstract}

 Semua method abstract yang ada pada class tersebut juga ditulis dengan cara yang sama

2.3.1.5

Role Name

Role namemerupakan peran diantara class. Pada UML, masing-masing kelas pada ujung suatu asosiasi perlu mempunyai role name.

2.3.1.6

Association

(Asosiasi)

Asosiasi menggambarkan relasi antar dua kelas di class diagram. Asosiasi aktualnya menggambarkan tipe relasi antara dua kelas. Asosiasi terbagi menjadi dua depedency yaitu aggregat iondan composit ion.

Perhatikan contoh berikut ini :

 Associat ion: Juru masak menggunakan pisau (uses)

 Aggregat ion: Mobil memiliki radio (has)

 Composit ion: Mobil selalu berisi mesin (alw ayscontain)

a. Aggregat ion

Aggregat ion mempunyai hubungan tidak kuat. Contohnya adalah mobil dan radio, mobil masih bisa hidup tanpa ada radio. Disimbolkan dengan tanda diamond putih (kosong)

b. Composition

Composition mempunyai hubungan yang kuat.Contohnya adalah mobil dengan mesin, mobil tidak dapat hidup tanpa mesin.Disimbolkan dengan tanda diamond hitam.

2.3.1.7

Propagation

20

2.3.1.8

Delegation

Delegat ionadalah konsep menyerahkan operasi ke kelas lain yang terasosiasi dengannya. Terjadi bila keseluruhan operasi yang user atau sistem mohon pada class benar-benar berlangsung di dalam obyek asosiasi.

2.3.2 Interface Sistem

Beberapa bahasa pemrograman berorientasi objek, misalnya C++, membolehkan suatu kelas memiliki dua atau lebih superclass. Hal ini disebut pewarisan ganda (mult iple inherit ance).Pewarisan ganda seperti ini tidak diperbolehkan pada Java. Desainer Java ingin menjaga agar bahasa Java tetap sederhana, dan mereka merasa pewarisan ganda ini sangat kompleks dengan keuntungan yang tidak begitu besar. Akan tetapi, Java memiliki fitur lain yang bisa digunakan seperti halnya pewarisan berganda, yaitu antar muka (int erface).

Int erface adalah kumpulan met hod yang hanya memuat deklarasi dan struktur met hod, tanpa detail implementasinya. Int erface merupakan kelas yang paling abst ract, hanya berisi daftar deklarasi met hod, artinya semua met hod belum mempunyai implementasi Sedangkan detail dari met hodberada pada classyang mengimplementasikan int erfacetersebut. Int erfacedigunakan bila Anda ingin mengaplikasikan suatu met hodyang spesifik, yang tidak diperoleh dari proses inherit ance. Tipe data yang boleh pada int erface hanya tipe data konstan. Sebagai analoginya akan digambarkan sebagai berikut.

M engapa membutuhkan interface?

 Memecahkan bagian yang rumit dan spesifik. Dengan menggunakan classatau int erface oleh vendor maka dalam pembuatan perangkat lunak menjadi lebih cepat.

 Keterbatasan inherit ance pada Java. Int erface menjawab kebutuhan untuk melakukan mult iple inherit ance

Syarat sebuah interface:

 Tidak memiliki obyek (tidak ada instansiasi)

 Tidak memiliki at ribut e(hanya memiliki konstanta)

 Tidak memiliki modifierstatik

 Tidak ext ends dari kelas lain namun boleh ext ends dari int erface lain bahkan boleh ext endske lebih dari satu int erfacelain.

 Tidak implemen dari kelas lain.

Perbedaan interfacedengan abstract classsebagai berikut:

Contoh 1:

Berikut ini kita akan menggambarkan notasi UML untuk int erface Engine dan kelas NewEngine yang mengimplementasikannya

Pembuatan kelas interfacemenggunakan pow er design: 1. Buka Power Designer 12.

2. Klik File -> New .

3. Pilih Object Oriented M odel. 4. Pilih Class Diagram.

22

24

8. Untuk membuat asosiasinya pilih simbol “dependency” pada palet t e, kemudian hubungkan pada masing-masing kelas.

9. Edit simbol dependencytadi dengan memilih “line st yle” pada toolbar.

10. Diagram telah selesai dibuat.

Contoh 2:

26

2.3.3 Analisis dan Pembuatan

Database

Sistem

Dat abasesistem yang dibuat menggunakan konsep ERD. ERD (Ent it y Relat ionship Diagram) digunakan untuk memodelkan struktur data dan hubungan antar data. Dengan ERD, model dapat diuji dengan mengabaikan proses yang dilakukan. Di dalam Power Designer, terdapat dua konsep dalam merancang ERD yaitu Concept ual Dat a M odel(CDM) dan Physical Dat a M odel(PDM).

a.

Conceptual Data Model

(CDM )

Model yang dibuat berdasarkan anggapan bahwa dunia nyata terdiri dari koleksi obyek-obyek dasar yang dinamakan entitas (ent it y) serta hubungan (relat ionship) antara entitas-entitas itu. Biasanya direpresentasikan dalam bentukEnt it y Relat ionship Diagram (ERD). Manfaat Penggunaan CDM dalam perancangan database :

 Memberikan gambaran yang lengkap dari struktur basis data yaitu arti, hubungan, dan batasan-batasan

 Alat komunikasi antar pemakai basis data, designer, dan analis.

b.

Physical Data Model

(PDM )

2.3.3.1 Analisis Kebutuhan Data

Studi Kasus peminjaman buku di perpustakaan :

Setiap mahasiswa IT Telkom mempunyai kartu pinjam perpustakaan, dimana setiap mahasiswa dapat meminjam buku dengan alur, pertama mahasiswalogin dengan KTM kedalam sistem, kemudian mahasiswa dapat memilih buku yang diinginkan dengan melihat catalog buku di sistem, setelah dapat, mahasiswa membawa buku tersebut ke petugas perpustakaan dengan menyerahkan kartu pinjam dan KTM. Identitas buku direkap oleh petugas setelah itu buku dapat dipinjam mahasiswa.Mahasiswa harus mengembalikan buku tersebut sesuai tanggal yang ditentukan, jika tidak maka mahasiswa harus membayar denda.

28

1. Data Aktor : untuk merekam data detail peminjam dan petugas. a. Mahasiswa

b. Petugas

2. Data Buku : Untuk menampung data detail dari buku. Terdapat pula data penulis dan data penerbit buku.

3. Data Peminjaman Buku : menampung data siapa peminjam, siapa petugas yang melayani dan buku apa yang dipinjam beserta tanggal buku harus kemabali.

4. Data Pengembalian Buku : merekam data peminjam yang telah mengembalikan buku dan denda pengembalian.

2.3.3.2 Pembuatan Conceptual Data M odel

Langkah-langkahnya sebagai berikut.

1. Buka Power Designer v. 12

2. Klik File-> New

5. Pilih Entitypada Palette

6. Buat 3 ent it y pada w orkspace, beri nama masing-masing ent it y yaitu Mahasiswa, Buku dan Petugas.

30

b. Pada Tab Attributes, atur atributnya.

8. Isikan atribut pada ent it ylainnya.

9. Setelah seluruh ent it y selesai dibuat, maka klik Palet t e Relat ionshipuntuk membuat relat ionship(hubungan) antar entitas.

32

12. Klik kanan pada relationship peminjaman_pengembalian, pilih Change to Entity. Setelah itu akan muncul entitas baru yang masih kosong. Entitas tersebut merupakan entitas baru gabungan dari kedua entitas yang memiliki kardinalitas many t o many.

13. Selanjutnya, tambahkan atribut pada entitas peminjaman_pengembalian.

14. Untuk membuat relasi antara entity petugas dengan entity peminjaman_pengembalian, dapat dengan menarik relat ionshipantara kedua entity tersebut.

16. Untuk melakukan pengecekan terhadap kebenaran CDM yang telah dibuat, klik Tools -> Check M odel -> OK. Apabila tidak ada error maka muncul kotak dialog seperti di bawah ini.

2.3.3.3 Pembuatan

Physical Data Model

Dalam membuat Physical Dat a M odel(PDM), cukup meng-generat ehasil dari ERD CDM. Langkah-langkahnya sebagai berikut :

1. Pilih tools -> Generate Physical Data M odel

2. Pada tab General, pilih Generate New Physical Data M odel

Pada pilihan DBM S, pilih dat abase yang akan digunakan, misal Oracle version 10g (sesuaikan dengan database yang akan digunakan). Isikan Namedengan PDMperpus. 3. Pada tab Detail, tulis Table prefixdengan tb_ dan pada referencesganti Delete rule

34

4. Setelah itu bentuk ERD akan berubah menjadi gambar ini. Inilah yang disebut bentuk PDM.

2.4 Praktikum

Perpustakaan Nastar merupakan perpustakaan milik negara yang berpusat di Bandung. Perpustakaan ini mempunyai jumlah anggota dan juga jumlah buku yang sudah cukup banyak. Untuk menangani data mengenai anggota, administrasi, dan pengelolaan buku, maka diperlukan suatu sistem untuk mengatur jalannya transaksi data mengenai hal-hal tersebut.

Perpustakaan Nastar memiliki officeryang bertugas berbeda-beda, seperti menginputkan data peminjaman buku, penginputan anggota baru, penginputan data buku perpustakaan.

Setiap Anggota perpustakaan yang ingin meminjam buku harus membawa kartu anggota dan memperlihatkannya kepada officer. Anggota hanya dapat meminjam 3 buku sekali pinjam, dan tidak dapat melakukan peminjaman apabila masih ada buku yang dipinjam namun belum dikembalikan. Jika melewati batas peminjaman, maka anggota akan dikenakan denda.

Perpustakaan Nastar berisi berbagai item yang dapat dijadikan anggota perpustakaan sebagai sumber pengetahuan mereka, dan setiap media memiliki peraturan berbeda. Perpustakaan Nastar memiliki buku, artikel ilmiah, cd, majalah, dll. yang masing-masing media memiliki peraturan masing-masing, seperti buku dapat dipinjam pulang dengan bebas, artikel ilmiah hanya bisa dipinjam di tempat, dll Apabila terdapat item baru yang masuk, maka officer akan menginputkannya ke dalam sistem, lengkap dengan stok, dan informasi lainnya mengenai item tersebut.

Setelah membaca studi kasus diatas, silahkan :

1. Buatlah Objek Diagram dari kasus tersebut dengan mengikuti langkah-langkah yang ada pada modul!

36

M EM ODELKAN M ODEL DINAM IS DI

TAHAP ANALISIS DAN PERANCANGAN

BAGIAN 1

3.1 Tujuan Praktikum

1. Praktikan mampu memahami konsep permodelan dinamis menggunakan UML baik ditahap analisis maupun tahap perancangan.

2. Praktikan mampu menggambarkan alur sistem ke dalam act ivit y dansequencediagram.

3. Praktikan mampu memahami alur kodingan sistem yang akan dibuat dan menggambarkannya dalam bentukact ivit ydan sequencediagram.

3.2 Perlengkapan Praktikum

1. Software Power Designer. 2. Modul 3 Praktikum APSI.

3.3 Landasan Teori

3.3.1 M odel Dinamis

Setelah model obyek dibuat, langkah selanjutnya di fase analisis adalah memodelkan cara sistem dan obyek-obyek di dalamnya beroperasi dan bekerja sama satu sama lain. Pemodelan ini disebut pemodelan dinamis. Pemodelan dinamis terdiri dari dua hal, yaitu :

●

Pemodelan selama tahap analisis secara logik (memastikan bahwa setiap operasi mungkin dilakukan di dalam sistem);

●

Pemodelan selama tahap perancangan secara fisik (mendefinisikan method di kelas-kelas yang sesuai).

UML menyediakan empat diagram dasar untuk memodelkan dinamika alur informasi di dalam sistem, yaitu sequence diagram, collaborat ion diagram, st at e t ransit ion diagram, dan

act ivit y diagram. Dalam praktikum modul 4 hanya membahas mengenai sequence diagram dan act ivit y diagram.

3.3.2

Sequence Diagram

Sequence Diagram digunakan di UML untuk menggambarkan deskripsi setiap skenario di dalam Use Case. Sequence Diagrammemodelkan obyek-obyek yang mengambil peranan di dalam skenario dan menggambarkan interaksinya. Selama fase analisis, sequence diagram mencerminkan suatu interkasi. Selama fase perancangan, setiap interaksi dikonversi ke dalam pemanggilan met hod sesuai dengan bahasa pemroraman yang dipilihnya.

Setiap sequence diagram :

●

mendeskripsikan use case atau satu skenario di dalam sebuah use case secara diagramatik;

●

mengidentifikasi obyek-obyek yang terlibat di setiap proses;

●

mengidentifikasi aksi atau peristiwa yang terjadi di setiap proses;

●

mengidentifikasi informasi apa saja yang harus dikirim di sekitarnya untuk setiap proses;

●

mengidentifikasi respon-respon apa saja yang diperlukan setelah setiap aksi atau peristiwa.

38

Gambar

Pada Gambar

Sebagai bagian dari aktifasi ini, obyek ini dihapus setelah t ask3 pada object 3 untuk dibutuhkan oleh Object 1 sebagai persegi panjang Namun, karena aktornya tak akan pernah berakhir

tersebut berstatus aktifasi yang berk

3.3.3

Activity Diagram

Act ivit y Diagram

mendeskripsikan pemrosesan secara paralel. Setiap Aktifitas juga dapat disebut sebagai sebuah

Simbol dalam act ivit y diagr

Gambar 1 Struktur Model Sequence Diagram

Gambar 1 Act or1 memanggil t ask1 pada object 1 (instan Sebagai bagian dari aktifasi ini, object 1harus memanggil t ask2pada object 2,

setelah met hod t ask2 diselesaikan. Object 1 selanjutnya untuk menyelesaikan transaksi. Object 3 tidak perna Object 1 untuk memanggil t ask3.Garis hidup aktor di atas persegi panjang yang tidak terputus. Penggambaran ini tidaklah

aktornya berupa orang atau sistem eksternal lain, maka berakhir pada konteks sistem ini. Hal ini diasumsikan bahwa tersebut berstatus aktifasi yang berkelanjutan.

Diagram menggambarkan keterkaitan obyek dengan mendeskripsikan pemrosesan secara paralel. Setiap use casememiliki satu Aktifitas juga dapat disebut sebagai sebuah met hodatau kelompok met hod.

act ivit y diagram:

(instan dari Class1). object 2,dengan segera selanjutnya memanggil

pernah ada sebelum di atas digambarkan ini tidaklah bersifat wajib. maka garis hidupnya diasumsikan bahwa aktor‐aktor

dengan alur kerja dan memiliki satu Act ivity diagram.

Gam

musim, tanggal, atau peristiwa tertentu. Tamu kamar untuk periode

petugas reservasi. Tamu

Gambar 2 Simbol

Act ivit y Diagram

Penjelasan Singkat

Bandung membutuhkan paket piranti lunak komputer otomatisasi beberapa pekerjaan yang saat ini dilakukan secara manual oleh s

hotel yang disewakan ke tamu hotel. Informasi yang relevan untuk

Occupancy Maksimum

Tipe Kamar (single, double, twin, executive, suite)

adalah harga kamar dasar dengan perubahan harga atau peristiwa tertentu. Tamu potensial dapat memesan satu periode tertentu menggunakan telepon. Reservasi ini

Tamu potensial meminta tipe ruangan, tanggal kedatangan, lunak komputer untuk ini dilakukan secara manual oleh staf hotel. Hotel ang relevan untuk setiap

harga untuk setiap memesan satu atau lebih

40

kamar kosong untuk tanggal

customer diberikan informasi tentang detil dan harga Jika diterima, reservasi

untuk durasi yang telah

sementara ini dimodifikasi menjadi dan dikonfirmasi. Reservasi

Penerima tamu juga

di tempat tanpa reservasi. Pembayaran deposit harus dibuat pada saat reservasi aw dicatat waktu tamu check customer diberikan informasi tentang detil dan harganya.

reservasi sementara dibuatkan. Reservasi sementara yang telah dimasukkan datanya oleh petugas reservasi. dimodifikasi menjadi reservasi tetap ketika pembayaran

dan dikonfirmasi. Reservasi tetap ini akan menjadi acuan tentang waktu reservasi awal. juga dapat membuat reservasi untuk tamu potensial yang

di tempat tanpa reservasi. Pembayaran deposit harus dibuat pada saat reservasi aw tamu check in dan waktu tamu check out. Telepon

diaktifkan/dinonaktifkan pada saat check in/check out dengan menggunakan logging panggilan telepon.

Use Case Diagram

Gambar 3.

Use Case Diagram

Sistem Hotel

kosong, selanjutnya

sementara ini disimpan reservasi. Reservasi tika pembayaran deposit diterima tentang waktu reservasi awal.

3.3.4.3

Use Case Form

42

3.3.4.4 M odel Dinamis Tahap Analisis

Gambar

Gambar 4 mengambarkan mengambil salah satu

digambarkan sequence diagram

amis Tahap Analisis

Gambar 4Act ivit y DiagramTahap Analisis

mengambarkan contoh activity diagram pada tahap satu use case yaitu input reservasi. Dalam tahap sequence diagram dengan alur sesuai dengan act ivit y diagram

3.3.4.5 M odel Dinamis Tahap Perancangan

Gambar 5Sequence DiagramTahap Perancangan new reservation

:GUI :ActionListener :RoomType :Price :NoReservation :DBAccess

44

3.3.5 Langkah-langkah Pembuatan

Sequence Diagram

1. Buka Pow er Designer 12. 2. Klik File New.

3. Pilih Object Oriented Model.

4. Pilih “Sequence Diagram”.

48

8. Pilih act ivat ionpada palet te.

9. Kemudian pilih ret urn M essage pada palet t e, kemudian klik 2x pada Panah Ret urn M essageuntuk mengganti nama dari Ret urn M essage.

3.3.6 Langkah-langkah Pembuatan

Activity Diagram

1. Buka Pow er Designer 12. 2. Klik File New.

3. Pilih Object Oriented Model.

4. Pilih “Activity Diagram”.

50

6. Pada palet t e, pilih Node St art, letakkan node st art pada organizat ion unit awal alur sistem dimulai.

52

9. Setelah seluruh aktivitas dibuat dan flowdibuat, akhiri dengan node “ end” .

3.4 Praktikum

anggota tersebut dengan cara memasukkan ID anggota, apabila anggota tersebut masih dalam peminjaman buku, maka tidak dapat dilakukan peminjaman, sedangkan jika tidak, maka dapat dilanjutkan untuk penginputan data buku yang dipinjam oleh user tersebut. Apabila ada buku baru yang masuk, maka officer akan menginputkannya ke dalam sistem, lengkap dengan stok, dan informasi lainnya mengenai buku tersebut. Officer juga dapat melayani orang yang ingin menjadi anggota perpustakaan dengan menginputkan data-data calon anggota ke dalam sistem.

Buatlah activity diagram dan sequence diagram di tahap analisis dan perancangan untuk use

54

M EM ODELKAN OBYEK DAN KELAS

SERTA M ODEL DINAM IS BAGIAN II

DI TAHAP PERANCANGAN

4.1. Tujuan Praktikum

1. Praktikan mampu memahami konsep permodelan dinamis menggunakan UML baik ditahap analisis maupun tahap perancangan.

2. Praktikan mampu menggambarkan alur sistem ke dalam class diagram, st at e t ransit ion diagram,deployment diagram, dan component diagram di tahap perancangan

3. Praktikan mampu memahami alur kodingan sistem yang akan dibuat dan menggambarkannya dalam bentuk class diagram, st at e t ransit ion diagramdan component diagram.

4.2. Perlengkapan Praktikum 1. Software Power Designer. 2. Modul 4 Praktikum APSI.

4.3. Landasan Teori 4.3.1. Enkapsulasi

Enkapsulasi adalah teknik yang digunakan untuk menyembunyikan atribut atau fieldyang dimiliki oleh sebuah class.

Cara melakukan enkapsulasi adalah dengan memberikan privat e modifierpada field yang dimiliki oleh class.

Tujuan dari adanya enkapsulasi bukan hanya menyembunyikan field, tapi juga

memberikan sebuah metode pengecekan valid atau tidaknya nilai yang akan di-inputke dalam fieldtersebut. Metode ini disebut “value validat ion”.

Pada beberapa orang desainer, semua fieldpada classbiasanya akan diberikan aksesor (get t er) dan mutator (set t er) namun sebaiknya tidak semua fielddiberikan aksesor dan mutator (Effective Java, 2008, Item:15) untuk mengurangi atau menghilangkan kemungkinan terjadinya mutasi objek.

4.3.2. Class Diagram

Class diagram adalah diagram yang digunakan untuk membentuk model konseptual sistem aplikasi dan memberikan detail model untuk diterjemahkan ke dalam kode program. Class diagrammemiliki 3 blok utama, yaitu :

Blok pertama adalah nama kelas.

Blok kedua adalah atribut atau field kelas.

Blok ketiga adalah met hodatau operasi yang dapat dilakukan kelas.

Beberapa aturan dalam class diagramadalah tentang visibilitas dan dan scope. Visibilitas pada class diagram digambarkan dengan simbol dibawah ini :

"+" Public

"-" Private

"#" Protected

""(tanpa simbol) Default

Scopedapat berarti jangkauan sebuah variabel atau met hoddapat diakses, namun pada class diagram,scope adalah cara mengakses sebuah method atau variabel.

Scope dapat dibagi menjadi dua, yaitu

Classifier members/method.

Member/method static, yaitu member atau method yang dapat

dipanggil tanpa harus melakukan instantiasi class.

Instance members.

Member/method non-static, yaitu member atau method yang

hanya dapat dipanggil atau digunakan jika telah melakukan

instiasi class.

Penulisan classifier member/ met hodpada class diagram adalah dengan memberikan garis bawah (underline) pada member ataumet hodstatis.

56

 Nama Class

Digunakan untuk membedakan antara satu kelas dan kelas yang lain. Contohnya : Kendaraan, Pegawai

 Attribute

Digunakan untuk menyimpan state, pada bahasa pemrograman ini berupa field. Bisa juga diartikan apa yang dimiliki oleh sebuah objek.

-

Contohnya : nama, alamat, usia, nim, warna

-

Aturan penggunaan :modifier nama_attribute : tipedata

-

Contoh penggunaan : nama : String dibaca attribute nama memiliki modifier private dengan tipe dataString

 Mengakses Atribut yang Terenkapsulasi

Karena atribut yang dienkapsulasi tidak dapat diakses langsung, maka diperlukan method untuk mengaksesnya. Untuk melakukan ini, perlu dibangun operasi‐operasi berikut ini :

-

Method untuk menyeting nilai atribut, sebagai contoh, setName, setAddress,setDateOfBirth, setAccountNumber;

-

Method untuk mengakses nilai dari atribut, mencakup derived attribute, sebagai contoh,getName, getAddress, getDateOfBirth, getAccountNumber;

-

Method untuk menanyakan pertanyaan dengan jawaban berupa true atau false,sebagai contoh isConnected, isSave.

 Kelas Event_dan Event Handler

tombol ditekan).

terpisah di mana setiap obyek melakukan satu tugas

4.3.3. Component Diagram

Component diagram adalah diagram yang digunak ketergantungan komponen

memodelkan komponen objek.

Component diagrammemiliki beberapa hubungan ant inherit ance, int erface dan port .

ditekan). Teknologi Java menyediakan framework untuk programmer dapat membuat sendiri struktur event untuk event Handler diinstansiasi dengan link interaksi ke obyek

human interface.Sebagai contoh, Obyek event handler dapat tem.Ketika obyek MenuItem dipilih, method actionPerforme handler dipanggil.Event Handler dapat menyalin data dari obyek

GUI atau melakukan prosedur sebaliknya, yaitu menyalin bisnis. Prosedur dapat dilakukan dengan obyek yang sama terpisah di mana setiap obyek melakukan satu tugas spesifik.

Kelas‐kelas Event Handler

adalah diagram yang digunakan untuk menggambarkan organisasi ketergantungan komponen-komponen soft w are sistem. Component diagram

memodelkan komponen objek.

memiliki beberapa hubungan antar komponen, seperti depe port .

untuk Swing/AWT event untuk event non obyek‐obyek bisnis dan handler dapat didaftarkan actionPerformed pada byek‐obyek bisnis ke menyalin data dari GUI ke yang sama atau obyek

an untuk menggambarkan organisasi dan ram berguna untuk

58

Component diagram menggambarkan struktur dan hubungan antar komponen peranti lunak, termasuk ketergantungan (dependency) diantaranya. Komponen peranti lunak adalah modul berisi code, baik berisi source code maupun binary code, baik library maupun executable, baik yang muncul pada compile time, link time maupun run time.

Pada umumnya komponen terbentuk dari bebrapa class dan/atau package, tapi dapat juga dari komponen-komponen yang lebih kecil. Komponen dapat juga berupa interface, yaitu kumpulan layanan yang disediakan sebuah komponen untuk komponen lain.

Penggambaran diagram komponen pada fase perancangan dilakukan dengan cara berikut :

1.

Tinjau ulang diagram kelas dan identifikasi kelompok kelas dengan menggunakan teknik coupling dan cohesion

2.

Gambarkan dengan sata stuktur komponen UML kelompok-kelompok kelas tersebut di diagram component

3.

Notasi komponen UML digambarkan sebagai empat persegi panjang dengan dua empat persegi panjang yang lebih kecil di sisi kirinya

4.

Masing-masing tipe komponen harus diberi nama pada diagramnya

5.

Jika terdapat satu instan dari komponen di dalam sistem, maka intasn tersebut harus punya nama

Bentuk pada UML versi 1

Bentuk pada UML versi 2

atau

Atau

<< co m p one nt N am a com pon ent

Stereotypes yang dapat digambarkan pada bentuk component

<<application>>,kumpulan aplikasi system <<executable>>,component yang jalan di client <<file>>, data file

<<infrastructure>>, technical component didalam system <<source code>>, source file

<<table>>, table data dalam sebuah database <<UI>>, User interface (screen, pages, report) 4.3.3.1. Dependency

Contoh adanya dependendy antara konsumen dan pemasok

Menggunakan dependency jika :

 Menghubungkan 2 package yang menunjukkan ada ketergantungan antara elemen model dalam package konsumen dengan elemen model pada package pemasok  Menunjukkan hubungan antar kelas yang sifatnya bergantung, bukan asosiasi. Dalam

contoh dependendy konsumen dan pemasok, kelas konsumen menggunakan komponen yang ada pada kelas pemasok, misalnya :

a. Kelas konsumen menggunakan kelas pemasok yang memiliki lingkup global

b. Kelas konsumen menggunakan kelas pemasok sebagai parameter untuk salah satu operasinya

c. Kelas konsumen menggunakan kelas pemasok sebagai variabel lokal untuk salah satu operasinya

4.3.3.2. Inheritance

Dependency inherintance digunakan

 Inheriting/child component diletakkan dibawah parent component, dengan arah panah menuju ke parent component

60

4.3.3.3. Interface

Interfaces adalah kumpulan >=1 methode dan >=0 attribute yang dapat dipakai pada class tanpa menjadi behavior suatu class.

Jenis interface ada 2 macam yaitu :

 Provide, digambarkan dengan bentuk lollipop  Required, digambarkan dengan bentuk socket

Penggambaran interfaces dapat juga dilakukan dengan menambah bagian component seperti contoh dibawah ini :

bentuk Lolipop

4.3.3.4. Port

Port adalah bentuk object yang menjelaskan interaksi antara object dan lingkungannya, Digambarkan sebagai kotak kecil di pinggiran component :

Assembly connector

 Penghubung antara 2/lebih component dimana sebuah/beberapa component provides interfaces dan component lain required interfaces

Contoh :

4.3.4. Deployment Diagram

Deployment diagramadalah diagram gambaran fisik arsitektur sebuah infrastruktur sistem. Deployment Diagram menggunakan gambaran kotak 3 dimensi untuk menggambarkan masing-masing platform. Diagram ini akan dihubungkan dengan garis-garis yang menggambarkan koneksi jaringan antar platform yang memungkinkan komponen suatu sistem berkomunikasi. Garis tersebut dapat di beri label dengan protokol jaringan yang digunakan untuk erkomunikasi. Tanda M ult iplicit y yang sama dengan diagram kelas dapat digunakan untuk menggambarkan jumlah mesin yang di ijinkan berkomunikasi dengan sistem .

Contoh :

62

4.3.5. State Transition Diagram

St at e t ransit ion diagram menggambarkan cara satu obyek berubah state-nya dalam selang waktu tertentu ketika method-nya dipanggil oleh method obyek lain.

Pada st at e t ransit ion diagramada 2 komponen utama, yaitu st at edan event.

4.3.5.1. State

Semua obyek memiliki keadaan atau st at e. St at e yang sedang terjadi dari setiap obyek dicatat nilainya dan disimpan atributnya. Atribut yang dimaksud disini sama dengan atribut dan nilai pada class diagram. Jika diberi contoh st at e t ransit ion diagram pada seorang pelari 100 meter , maka st at e-nya adalah bersiap, berlari dan berhenti.

4.3.5.2. Event

Event adalah pemicu berpindahnya st at e satu ke st at elainnya. Jika kembali pada contoh pelari seperti pada st at e, contoh event adalah juri yang memulai pertandingan yang menyebabkan st at epelari berubah dari bersiap menjadi berlari. Event lain adalah pelari menyentuh garis finish yang menyebabkan pelari berubah st at e dari berlari menjadi berhenti.

Contoh State Diagram

Ketika obyek printer diinstansiasi, maka state-nya di-set menjadi idle. Dari state ini printer dapat melakukan pekerjaan seperti menerima file untuk dicetak (suatu event yang

menyebabkan perubahan state menjadi busy) atau obyek printer tersebut dihapus dari sistem. Berdasarkan pada diagram ini, tidak boleh ada operasi untuk menghapus obyek printer ketika state-nya dalam keadaan busy.

4.4. Contoh Kasus 4.4.1. Permasalahan

Anda diminta oleh sebuah institusi pendidikan untuk membuat sebuah aplikasi berbasis web untuk menentukan lokasi geladi, yang memiliki fungsi :

1. Dapat menampilkan daftar lokasi geladi.

2. Dapat menyimpan data pilihan mahasiswa berdasarkan id login.

3. Dapat melakukan edit data diri (username, pass) data yang ada diambil dari database geladi.

4.4.2. Langkah Pengerjaan

Pada soal, kita diminta untuk membuat sebuah solusi web. Asumsikan kita menggunakan pattern MVC (Model, View, Controller).

4.4.2.1. Pembuatan Class Diagram

4.4.2.1.1. PerancanganClass Diagram

64

sehingga dapat diabaikan, sedangkan lokasi geladi dan mahasiswa akan berinteraksi langsung pada sistem ini dan tidak dapat diabaikan. Dengan demikian, yang tersisa hanya class lokasi dan mahasiswa. 2 class ini yang akan dibuat pada model.

Berikutnya analisis atribut pada model tersebut. Anggaplah class lokasi memiliki atribut id yang berupa nomor lokasi, atribut kota dan alamat dan mahasiswa akan memiliki atribut NIM, username danpassw ord. Normalnya semua atribut akan di-set sebagai read-only variable. Atribut yang bersifat read-only akan di-set saat pembuatan object, atribut tersebut memiliki visibilitas privat edan hanya memiliki get t er. Namun pada soal meminta agar mahasiswa dapat melakukan edit username dan passw ord data diri, sehingga perlu dibuat adanya get t er pada passw orddan username.

Agar objek mahasiswa dan lokasi bersifat “loosely coupled”, maka dibuatlah kelas penengah. Pada contoh ini disebut “lokasi mahasiswa” yang hanya memiliki atribut lokasi geladi dan NIM mahasiswa.

Pada tahap ini, analisis modelselesai dan kita akan melanjutkan pada cont roller.

Cont roller adalah sebuah susunan logic yang berfungsi untuk mengatur request dari client sehingga menjadi sebuah view setelah melalui bussiness logic.

Dari soal, kita dapat menarik kesimpulan bahwa dibutuhkan 3 fungsi utama, yaitu : - Menampilkan daftar lokasi geladi

- Menyimpan data lokasi pilihan mahasiswa

- Melakukan edit usernamedan passw ordmahasiswa

Karena itu, pada cont rollerakan ada met hodyang mendukung fungsionalitas tersebut.

Pada contoh class diagram disini, met hod yang tertera diatas akan ditulis sebagai getLokasiGeladi, postLokasiMahasiswa dan postDataMahasiswa.

Setelah cont rollerselesai, viewakan didesain sesuai dengan keinginan pembuat, Pada class diagram dapat ditampilkan hanya sebagai halaman html atau jsp. 4.4.2.1.2. M endesain Class Diagram pada Pow er Designer

2. Setelah itu, karena kita akan menggunakan pola MVC, maka kita mulai dari membuat packagemodel, viewdan cont roller.

Pilih opsi packagepada pallet e seperti contoh dibawah.

66

4. Berikutnya klik kanan pada package model, pilih open diagramdan buat class diagram untuk model.

5. Kembali ke diagram awal, lalu masuk ke packagecont rolleruntuk membuat servlet. Cara masuk ke packagecont rollersama seperti saat masuk ke package model.

68

6. Isilah servlet dengan method yang ditemukan pada fase analisis (getLokasiGeladi, postDataMahasiswa dan postLokasiMahasiswa).

4.4.2.2. Pembuatan Component Diagram

4.4.2.2.1. Perancangan Component Diagram

Dari hubungan antar class, kita dapat menyimpulkan bahwa kelas mahasiswa dan kelas lokasi ber-agregasi dengan kelas lokasi mahasiswa.

Sehingga dapat dibuat component mahasiswa, lokasi dan lokasi mahasiswa.

Hubungan antar classdapat berupa dependencyatau asosiasi yang memiliki int erface. Pada class diagramtidak ditemukan adanya int erfaceclasssehingga kita menggunakan

hubungan dependencyuntuk classlokasi mahasiswa terhadap class lokasi dan class mahasiswa. Setelah componenttelah dibuat, kita akan membuat port . Portadalah cara atau metode agar pengguna dapatmelakukan akses terhadap sistem.

Dari desain cont roller padaclass diagram, maka akses yang akan dibutuhkan adalah

getLokasiGeladi, postLokasiMahasiswa dan postDataMahasiswa sehingga 3 met hodtersebut akan menjadi port padacomponent diagram.

70

2. Pada palet t e, pilih ikon component.

3. Masukkan component kedalam diagram, lalu hubungkan dengan panah dependency.

4.4.2.3. Pembuatan State Transition Diagram

4.4.2.3.1. Perancangan State Transition Diagram

St at e t ransit ion diagramdidapat dari perilaku yang dilakukan selama userberada pada sistem. Yang dapat dilakukan userpada sistem ini adalah melihat daftar lokasi geladi, menyimpan data lokasi pilihan mahasiswa dan meubah usernameatau passw ord.

4.4.2.3.2. M endesain State Transiti 1. Buatlah st at eyang telah didefini

data lokasi pilihan dan meub palet t edan hubungkan. Se

2. Berilah nama pada hubungan antar state d alt +ent er.

Kemudian isi nama hubungan pad

M endesain State Transition Diagram pada Pow er Designer

yang telah didefinisikan dalam perancangan, yaitu lihat daftar lokasi, simpan data lokasi pilihan dan meubah usernameatau passw ordmenggunakan st at et ool

dan hubungkan. Setelah itu hubungkan dengan t ool t ransit ionpada

Berilah nama pada hubungan antar state dengan cara klik pada garis hubungan, l

Kemudian isi nama hubungan pada kotak Flow Type.

daftar lokasi, simpan st at et oolpada pada palet t e.

72

3. Hasil akhir st at e t ransit ion dia

4.4.2.4. Pembuatan Deployment Diagram

4.4.2.4.1. Perancangan Deployment Diagra

Pada soal yang diberikan, tidak diberikan kebutuhan dapat mengasumsikan hardw are

sesuai keinginan kita.

4.4.2.4.2. M endesain Deployment Dia 1. Pada palet t e, pilih ikon

fungsi clientatau fungsi

st at e t ransit ion diagramcontohnya seperti dibawah ini :

Pembuatan Deployment Diagram

Perancangan Deployment Diagram

Pada soal yang diberikan, tidak diberikan kebutuhan hardw areyang digunakan se

hardw areyang digunakan seminimal mungkin dan kita dapat berkreasi

M endesain Deployment Diagram pada Pow er Designer

, pilih ikon nodeuntuk menandakan posisi fisik dari sebuah titik fungsi (misalnya atau fungsi server)

yang digunakan sehingga kita mungkin dan kita dapat berkreasi

2. Masuk kedalam diagram te

3. Buatlah beberapa component yang dimiliki Contoh :

4. Buatlah dependencydi dalam Contoh :

Masuk kedalam diagram tersebut dengan menggunakan pilihan open diagram.

Buatlah beberapa component yang dimiliki oleh node tersebut.

di dalam nodedan antar node(dependency ada pada palet t e open diagram.

74

4.5. Praktikum

4.6.

Perpustakaan Nastar merupakan perpustakaan milik negara yang berpusat di Bandung.

Perpustakaan ini mempunyai jumlah anggota dan juga jumlah buku yang sangat banyak.

Untuk menangani data mengenai anggota, administrasi, dan pengelolaan buku, maka

diperlukan suatu sistem untuk mengatur jalannya transaksi data mengenai hal-hal

tersebut. Perpustakaan Nastar juga mempunyai beberapa officer yang bertugas untuk

menginputkan data peminjaman buku, penginputan anggota baru, penginputan data

buku. Anggota perpustakaan juga dapat mencari buku yang dicari melalui sistem tanpa

harus melakukannya secara manual. Anggota perpustakaan yang ingin meminjam buku

harus membawa kartu anggota dan memperlihatkannya kepada officer. Anggota hanya

dapat meminjam 3 buku sekali pinjam, dan tidak dapat melakukan peminjaman apabila

masih ada buku yang dipinjam namun belum dikembalikan. Jika melewati batas

peminjaman, maka anggota akan dikenakan denda. Officer yang melayani peminjaman

buku, setelah mendapatkan kartu anggota dari anggota dan akan mengecek status

peminjaman dari anggota tersebut dengan cara memasukkan ID anggota, apabila

anggota tersebut masih dalam peminjaman buku, maka tidak dapat dilakukan

peminjaman, sedangkan jika tidak, maka dapat dilanjutkan untuk penginputan data

buku yang dipinjam oleh user tersebut. Apabila ada buku baru yang masuk, maka officer

akan menginputkannya ke dalam sistem, lengkap dengan stok, dan informasi lainnya

mengenai buku tersebut. Officer juga dapat melayani orang yang ingin menjadi anggota

perpustakaan dengan menginputkan data-data calon anggota ke dalam sistem.

4.7.

Buatlah class diagram, component diagram, deployment diagram dan state transition

PERANCANGAN ANTAR M UKA

5. 1. Tujuan Praktikum

1. Praktikan dapat memahami Perancangan Antar Muka (GUI) Sistem.

2. Praktikan dapat merancang antar muka sistem yang sesuai dengan diagram-diagram yang telah dibuat sebelumnya.

5.3.1 Definisi dan Karakteristik Antar M uka (

Interface

)

Int erface atau lebih sering disebut dengan antar muka adalah sebuah media yang dapat menjembatani antara user dan sistem untuk melakukan komunikasi. Antar muka mempunyai dua (2) tugas pokok yaitu untuk menterjemahkan semua aksi yang diberikan user sehingga dimengerti sistem serta menampilkan hasil operasi dari sistem kedalam bentuk yang dimengerti oleh user. Antar muka banyak sekali kita jumpai di kehidupan, tidak hanya dalam soft w are.Contoh int erface: tombol start dan Window Explorer dalam OS Windows, remote TV, panel kontrol listrik, dan tombol on/of lampu.

Pada modul ini hanya akan membahas tentang antar muka yang digunakan dalam lingkungan soft w are. Pada saat ini antar muka yang paling sering digunakan pada sebuah soft w are adalah menggunakan GUI (Graphical User Int erface), karena mempunyai beberapa keuntungan:

76

1. Mudah dipelajari oleh pengguna yang cukup minim pengalaman dalam menggunakan komputer.

2. Memungkinkan user untuk dapat berpindah dari satu layar ke layar yang lain tanpa kehilangan informasi yang dibutuhkan.

3. Dapat melakukan akses penuh pada layar untuk menjalankan beberapa macam tugas/keperluan dalam waktu yang singkat.

Beberapa karakteristik dari GUI dan penjelasannya dapat dilihat pada Tabel berikut ini.

Karakteristik Penjelasan

Window Sebuah obyek yang digunakan untuk menampilkan informasi-informasi yang dibutuhkan oleh user.

Icon Sebuah obyek yang digunakan untuk mewakili sebuah informasi tertentu, contoh: icon untuk file, icon folder, dan icon yang mewakili program tertentu.

M enu Sebuah obyek yang menyimpan daftar perintah yang disusun sedemikian rupa dan digunakan untuk mempermudah user saat akan melakukan tugas tertentu.

Point ing Alat penunjuk seperti mouse untuk memilih sebuah obyek pada layar.

Graphic Gambar yang biasanya dicampur dengan teks untuk menyajikan informasi tertentu kepada user.

5.3.2 Prinsip-Prinsip Perancangan Antar M uka

Ada 17 prinsip yang harus dipahami seorang perancang sistem, agar bisa mendapatkan hasil maksimal dari antar muka yang dibuat.

1. User Compatibility,

2. Product Compatibility,

istilah ini mengartikan bahwa produk aplikasi yang dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa, baik untuk useryang awam maupun yang ahli.

3. Task Compatibility,

berarti fungsional dari t ask/tugas yang ada harus sesuai dengan tampilannya. Misal untuk pilihan report, orang akan langsung mengartikan akan ada ditampilkan laporan. Sehingga tampilan yang ada bukan lagi tampilan dari tipe data(dari sisi pemrogram).

4. Work Flow Compatibility,

satu tampilan layar aplikasi dapat digunakan untuk melakukan berbagai macam pekerjaan. Misal untuk mengirimkan email kita tidak harus membuka halaman lain untuk memilih penerima, karena sudah disediakan combo box untuk memilih penerima di layar tersebut.

5. Consistency,

konsisten. Contohnya, jika anda menggunakan istilah saveyang berarti simpan, maka gunakan terus istilah tersebut.

6. Familiarity,

gunakan simbol-simbol yang familiar dengan user. Contoh, gunakan icondisket untuk mewakili perintah save (simpan).

7. Simplicity,

aplikasi telah menyediakan pilihan default untuk suatu pekerjaan. Selanjutnya tergantung user akan mengubahnya atau tetap menggunakan pilihan default tersebut.

8. Direct Manipulation,

manipulasi secara langsung. Misalnya untuk mempertebal huruf, cukup dengan ctrl+B.

9. Control,

berikan kontrol penuh pada user, tipikal user biasanya tidak mau terlalu banyak aturan.

10. W YSIW YG,

78

ijinkan user untuk melakukan perubahan (kustomisasi) terhadap tampilan mereka sendiri.

12. Responsiveness,

tampilan yang dibuat harus bisa memberikan report/respon kepada usersecara real t ime. misal, yang sering kita lihat ketika ada tampilan please w ait... 68%...

13. Invisible Technology,

user tidak penting mengetahui algoritma apa yang digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui algoritma yang digunakan programmer(max sort, bubble sort, quick sort, dst)

14. Robustness,

handal. Dapat mengakomodir kesalahan yang dilakukan oleh user. Jangan malah error, apalagi sampai crash.

15. Protection,

melindungi userdari kesalahan yang umum dilakukan. Misalnya dengan memberikan fitur backatau undo.

1. Direct manipulation

Merupakan interaksi langsung dengan obyek pada layar, misalnya melakukan delet e dengan memasukkan sebuah obyek ke dalam t rash.

Kelebihan :waktu pembelajaran usersangat singkat, feedback langsung dapat diberikan pada saat usermencobanya.

Kekurangan :int erfacetipe ini sangat rumit untuk dibuat oleh seorang perancang sistem.

2. Menu selection

Merupakan pilihan dengan bentuk menu. User tinggal memilih commandyang sesuai dengan cara memilih menu yang telah disediakan. Misalnya saat klick kanan dan user dapat memilih aksi yang dikehendaki.

Kelebihan :user tidak perlu ingat nama perintah, pengetikan minimal., serta tingkat kesalahan rendah.

Kekurangan :tidak ada logika AND atau OR. Perlu ada struktur menu jika banyak pilihan. M enudianggap lambat oleh expert userdibanding command language.

3. Form fill-in

Merupakan interaksi dengan bentuk pengisian pada suatu form. Misalnya saat user melakukan pengisian data pendaftaran (register) pada suatu aplikasi.

Kelebihan :proses masukan data sederhana, mudah dipelajari.

Kekurangan :memerlukan banyak tempat di layar, harus menyesuaikan dengan form manual dan kebiasaan user.

4. Command language

Meruapan interaksi dengan cara menuliskan perintah yang telah disediakan. Misalnya menuliskan perintah pada shell OS (command prompt-Windows, terminal-linux). Kelebihan :perintah diketikan langsung pada sistem. Misal UNIX, DOS command.

Bisa diterapkan pada terminal yang merupakan int erfacebawaan dari sistem operasi.

80

5. Natural language

Merupakan interaksi dengan menggunakan bahasa alami (bahasa sehari-hari). Misalnya pengetikan kata kunci (keyw ord) pada mesin pencari (search engine) di internet.

Kelebihan :usertidak perlu belajar mengenai perintah yang harus digunakan. Kekurangan :tidak semua sistem cocok menggunakan tipe ini, terutama sistem untuk

pemrosesan data transaksional.

5.3.4 Penyajian Informasi (Information Presentation)

Sistem yang interaktif pasti menyediakan cara untuk menyajikan informasi untuk pengguna. Penyajian informasi bisa berupa penyajian langsung dari input yang diberikan (seperti teks pada w ord processing) atau disajikan dengan grafik. Beberapa faktor berikut adalah hal yang perlu diperhatikan sebelum menentukan bentuk penyajian informasi: 1. Apakah pengguna perlu informasi dengan ketepatan tinggi atau data yang saling

berhubungan?

2. Seberapa cepat nilai informasi berubah? Harus ada indikasi perubahan seketika? 3. Apakah pengguna harus memberi respon pada perubahan?

4. Apakah pengguna perlu melakukan perubahan pada informasi yang disajikan? 5. Apakah informasi berupa teks atau numerik? Nilai relatif perlu atau tidak?

Informasi bisa bersifat statis atau dinamis ketika disajikan, masing-masing dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula:

1. St at ic informat ion:

a. Ditentukan saat awal sesi.

b. Tidak berubah selama sesi berjalan.

c. Bisa berupa informasi numeris atau teks Chart di MS-Excel.

d. Disajikan dengan jenis huruf khusus yang mudah dibaca atau diberi highlight dengan warna tertentu atau menggunakan icon yang mewakili

2. Dynamic informat ion:

a. Perubahan terjadi selama sesi berlangsung dan perubahan harus dikomunikasikan/ditunjukkan ke user.

Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan hubungan antar gambar, data bisa berubah dengan cepat.

5.3.5 Penggunaan W arna pada Desain Interface

Warna menambah dimensi ekstra pada suatu int erfacedan membantu user memahami struktur yang kompleks. Warna juga dapat dipakai untuk memberikan tanda penting berupa highlightpada hal-hal khusus.

Kesalahan umum dalam penggunaan warna pada desain UI:

1. Menggunakan warna untuk mengkomunikasikan arti, merah bisa jadi peringatan atau ada kesalahan.

2. Terlalu banyak menggunakan kombinasi warna.

Dalam menggunakan warna pada desain int erface ada beberapa petunjuk yang dapat diikuti seperti berikut ini:

1. Hindari penggunaan terlalu banyak warna. 2. Gunakan kode warna untuk mendukung operasi. 3. Gunakan warna secara konsisten.

4. Hindari pasangan warna yang tidak cocok/norak. 5. Gunakan warna untuk menunjukkan perubahan status.

5.3.6 User Guidance

User guidance merupakan fasilitas sistem untuk mendukung user termasuk on-line help, error messages, dan user manual. User guidance perlu disatukan dengan UI untuk membantu user saat membutuhkan informasi tentang sistem atau saat ada kesalahan yang dilakukan sistem dan tidak dimengerti oleh user. Syst em help dan syst em message (pesan kesalahan) adalah bentuk dari user guidance. Error M essages sangat penting, karena error message yang buruk cenderung ditolak oleh user maka error message sebaiknya berpedoman pada faktor-faktor dibawah ini.

82

pengguna baru, pesan yang pendek membingungkan. User guidance perlu menjawab kebutuhan ini.

Skill level Pesan dibuat sesuai dengan kemampuan pengguna dan pengalamannya.

Style Harus bersifat positif. Lebih baik bersifat aktif dari pada pasif. Harus sopan, tidak menghina, atau bergurau.

Culture Jika mungkin, pesan disesuaikan dengan budaya. Mungkin kata atau warna yang digunakan disesuaikan dengan budaya setempat.

5. 4. Langkah-langkah praktikum

1. Klik StartAll ProgramsBalsamiq M ockups 2. Akan muncul tampilan utama dari Balsamiq Mockups

3. Klik Tab All  cari Rectangle / Canvas / Panel, kemudian drag ke Workspace. Atur size Rectangle / Canvas / Panel menjadi 800x1200.

84

5. Klik Tab M edia drag Icon and Text Label ke Workspace. Untuk Text tulis Logo Prodase, untuk Logo atur Icon pada menu pop-up.

7. Klik Tab Alldrag Rectangle / Canvas / Panel, atur size menjadi 750x200 pada menu popup.

86

10. Klik Tab Textdrag Title / Headline. Tuliskan : Modul V APSI.

11. Klik Tab Textdrag Text Area. Atur size 640x85 dan ketikkan tulisan dibawah ini.

12. Klik Tab All  drag Rectangle / Canvas / Panel. Atur size menjadi 460x310 yang akan digunakan untuk meletakkan form input nilai mahasiswa.

88

14. Drag Text dan ketikkan : DAFTAR NILAI MAHASISWA. Klik Tab Textdrag Data Grid / Table untuk membuat tabel.

Catatan : pisahkan dengan tanda koma (,) untuk mengisi field.

15. Drag Linkpada Tab Textuntuk membuat pagging. Tulis seperti gambar dibawah ini.

16. Klik Rectangle / Canvas / Panel, atur size menjadi 750x50.