Web Component Development Information Technology UMY

LARAVEL CHAPTER 3
(UML Diagram For Web Development)

A. Use Case Diagram

Use Case diagram merupakan diagram yang menggambarkan hubungan antara aktor dengan
sistem. Use Case diagram bisa mendeskripsikan sebuah interaksi antara satu atau lebih aktor
dengan sistem yang akan dibuat. Use Case diagram juga bisa digunakan untuk mengetahui fungsi
apa saja yang ada di dalam sebuah sistem dan bisa juga mempresentasikan sebuah interaksi
aktor dengan sistem. Use Case diagram mempunya 3 komponen yaitu :

1. Sistem
Menyatakan batasan sistem dalam relasi dengan aktor-aktor yang menggunakannya (di
luar sistem) dan fitur-fitur yang harus disediakan (dalam sistem).

2. Aktor
Aktor adalah segala hal diluar sistem yang akan menggunakan sistem tersebut untuk
melakukan sesuatu. Bisa merupakan manusia, sistem, atau device yang memiliki peranan
dalam keberhasilan operasi dari sistem.

3. Use Case
Use Case sendiri adalah gambaran fungsional dari sebuah sistem. Dengan demikian,
antara konsumen dan juga pengguna pada sistem tersebut, akan mengerti atau paham
mengenai fungsi sistem yang tengah dibangun.

Use Case diagram juga mempunyai beberapa tipe Relasi, yaitu :

1. Association
Teknik mengindentifikasi interaksi yang dilakukan oleh actor tertentu dengan use case
tertentu. Hal ini digambarkan dengan garis antara aktor terhadap use case tersebut.

2. Generalization
Mendefinisikan relasi antara dua aktor atau dua use case yang mana salah satunya meng-
inherit dan menambahkan atau override sifat dari yang lainnya.

1|Web Component Development

Web Component Development Information Technology UMY

3. Dependency
Dependency ini terbagi menjadi 2 macam, yaitu include dan juga extend.
Include berfungsi untuk mengindentifikasi hubungan antara 2 use case, dimana use case
yang satu akan memanggil use case yang lainnya.
Extend digunakan ketika use case menambahkan langkah ke use case kelas satu lainnya.

Berikut contoh Use Case Diagram :

2|Web Component Development

Web Component Development Information Technology UMY

B. Entity Relationship Diagram (E-R-D)

Basis data atau kerap disebut ”database” merupakan kumpulan informasi yang disimpan secara
sistematis dalam perangkat komputer sehingga dapat dicari dan diperiksa melalui suatu program
komputer saat informasi tertentu sedang dibutuhkan.

Ketika mendokumentasikan data atau proses hingga menjadi database, kamu dapat
meningkatkan pemahaman atas sistem tersebut dengan melihatnya dari beberapa perspektif.

Oleh karena itu, agar dapat menjadi sistem database yang rapi dan terstruktur, kamu
membutuhkan Entity Relationship Diagram (ERD), yaitu sebuah model untuk menyusun
database agar dapat menggambarkan data yang mempunyai relasi dengan database yang akan
didesain. Ada 3 komponen dalam E-R Diagram :

1. Entitas
Kumpulan objek yang dapat diidentifikasikan secara unik atau saling berbeda. Simbol
dari entitas biasanya digambarkan dengan persegi panjang.

2. Atribut
Setiap entitas pasti mempunyai elemen yang disebut atribut yang berfungsi untuk
mendeskripsikan karakteristik dari entitas tersebut. Atribut kunci merupakan hal pembeda
atribut dengan entitas. Gambar atribut diwakili oleh simbol elips dan terbagi menjadi
beberapa jenis :

a. Key Attribute : atribut yang digunakan untuk menentukan entitas secara unik.
Contoh: NPWP, NIM (Nomor Induk Mahasiswa).

b. Simple Attribute : atribut bernilai tunggal yang tidak dapat dipecah lagi (atomic).
Contoh: Alamat, tahun terbit buku, nama penerbit.

c. Multivalue Attribute : atribut yang memiliki sekelompok nilai untuk setiap

entitas instan. Contoh: nama beberapa pengarang dari sebuah buku pelajaran.

d. Composite Attribute : atribut yang terdiri dari beberapa atribut yang lebih kecil
dengan arti tertentu. Contoh: nama lengkap yang terbagi menjadi nama depan,
tengah, dan belakang.

e. Derivative Attribute : atribut yang dihasilkan dari atribut lain dan tidak wajib
ditulis dalam diagram ER. Contoh: usia, kelas, selisih harga.

3|Web Component Development

Web Component Development Information Technology UMY

3. Relasi
Hubungan antara sejumlah entitas yang berasal dari himpunan entitas yang berbeda.
Gambar relasi diwakili oleh simbol belah ketupat. Relasi juga terbagi menjadi beberapa
jenis :

a. One to one : setiap entitas hanya bisa mempunyai relasi dengan satu entitas lain.
Contoh: siswa dengan nomor induk siswa.

b. One to many : hubungan antara satu entitas dengan beberapa entitas dan sebaliknya.
Contoh: guru dengan murid dan sebaliknya.

c. Many to many : setiap entitas bisa mempunyai relasi dengan entitas lain, dan
sebaliknya. Contoh: siswa dan ekstrakurikuler.

Berikut contoh Entity Relationship Diagram :

4|Web Component Development

Web Component Development Information Technology UMY

C. Class Diagram

Class Diagram adalah salah satu jenis diagram yang paling berguna di UML, hal ini karena dapat
dengan jelas memetakan struktur sistem tertentu dengan memodelkan kelas, atribut, operasi serta
hubungan antar objek.

Class Diagram menggambarkan serta deskripsi atau penggambaran dari class, atribut, dan objek
disamping itu juga hubungan satu sama lain seperti pewarisan, containment, asosiasi dan lainnya.

Class Diagram mampu memberikan kita pandangan yang lebih luas mengenai suatu sistem
dengan cara menunjukkan kelas serta hubungan-hubungannya. Diagram class dapat dikatakan
bersifat statis, alasannya karena diagram kelas tidak menggambarkan apa yang terjadi jika
mereka berhubungan melainkan menggambar hubungan apa yang terjadi.

Ada beberapa komponen dalam Class diagram :

1. Class
Blok - blok pembangun pada pemrograman berorientasi obyek.Sebuah class digambarkan
sebagai sebuah kotak yang terbagi atas 3 bagian. Bagian atas adalah bagian nama dari
class. Bagian tengah mendefinisikan property/atribut class. Bagian akhir mendefinisikan
methodmethod dari sebuah class.

2. Association
Sebuah relationship paling umum antara 2 class dan dilambangkan oleh sebuah garis
yang menghubungkan antara 2 class. Garis ini bisa melambangkan tipe-tipe relationship
dan juga dapat menampilkan hukum-hukum multiplisitas pada sebuah
relationship.(Contoh: One-to-one, one-to-many,many-to-many).

3. Composition
Jika sebuah class tidak bisa berdiri sendiri dan harus merupakan bagian dari class yang
lain, maka class tersebut memiliki relasi Composition terhadap class tempat dia
bergantung tersebut. Sebuah relationship composition digambarkan sebagai garis dengan
ujung berbentuk jajaran genjang berisi/solid.

4. Dependency
Kadangkala sebuah class menggunakan class yang lain. Hal ini disebut dependency.
Umumnya penggunaan dependency digunakan untuk menunjukkan operasi pada suatu
class yang menggunakan class yang lain. Sebuah dependency dilambangkan sebagai
sebuah panah bertitik-titik.

5|Web Component Development

Web Component Development Information Technology UMY

5. Aggregation
Aggregation mengindikasikan keseluruhan bagian relationship dan biasanya disebut
sebagai relasi.

Berikut contoh Class diagram :

D. Tugas

Silahkan buat Use Case, Entity Relationship dan Class Diagram dari Website E-
Commerce sederhana. Setelah itu submit Screenshot dari Use Case Diagram, ER Diagram
dan Class Diagram yang sudah dibuat di situs https://myklass-eng.umy.ac.id/ pada
Assignment Tugas 3 mata kuliah Pengembangan Komponen Web.

Format : Tugas3_NIM_Nama.pdf

6|Web Component Development