UML untuk Pengembangan Aplikasi Web.docx

UML untuk Pengembangan Aplikasi Web.docx

1. UML untuk Pengembangan Aplikasi Web
Dalam pengembangan aplikasi berbasis web, UML (Unified Modeling Language)
berperan penting sebagai alat bantu visual untuk merancang, mengorganisasi, dan
mendokumentasikan sistem. Berikut beberapa peran UML dalam pembuatan aplikasi
web:
1.Memodelkan Arsitektur Sistem: UML memungkinkan pengembang untuk
merancang struktur dan arsitektur aplikasi web. Misalnya, component
diagrams dapat digunakan untuk menggambarkan bagaimana berbagai bagian
sistem berinteraksi, termasuk hubungan antara front-end dan back-end.
2.Membantu Desain Aliran Proses: Dengan activity diagrams, pengembang
dapat mendefinisikan alur kerja dan proses pengguna dalam aplikasi, misalnya
langkah-langkah yang ditempuh dalam proses login atau transaksi.
3.Menggambarkan Interaksi Pengguna : Use case diagrams mempermudah
identifikasi interaksi utama antara pengguna (aktor) dan aplikasi. Ini membantu
dalam memahami kebutuhan dan skenario yang akan dialami pengguna.
4.Perancangan Struktur Database: UML class diagrams membantu merancang
dan memvisualisasikan struktur database, relasi antara tabel, serta memastikan
integritas data sesuai dengan model yang direncanakan.
5.Memodelkan Interaksi Sistem Internal: Sequence diagrams membantu
menggambarkan interaksi antara komponen-komponen sistem, seperti
bagaimana request diproses dari pengguna hingga menghasilkan respons dari
server.
6.Memfasilitasi Komunikasi Tim: Dengan UML, tim pengembang dapat bekerja
dengan pemahaman yang sama tentang struktur dan perilaku aplikasi.
Diagram-diagram UML menjadi bahasa visual standar yang membantu
menyatukan visi teknis seluruh anggota tim.
1

2. Pengembangan Perangkat Lunak dengan menggunakan UML
1. Identifikasi Kebutuhan Sistem (Requirement Analysis)
Tujuan: Memahami apa yang diinginkan oleh pengguna akhir dan stakeholder.
UML yang digunakan:
oUse Case Diagram: Membantu menggambarkan interaksi antara
pengguna (aktor) dan sistem. Ini memberikan gambaran tentang
fungsionalitas yang harus disediakan sistem.
oActivity Diagram: Menggambarkan alur kerja atau proses bisnis yang
lebih detail untuk setiap use case.
Contoh: Jika Anda membuat aplikasi perbankan, use case-nya bisa mencakup “Menarik
uang” atau “Melihat saldo”.
2. Desain Sistem (System Design)
Tujuan: Mengonseptualisasikan bagaimana sistem akan dibangun.
UML yang digunakan:
oClass Diagram: Menunjukkan struktur sistem dengan menggambarkan
kelas-kelas utama, atribut, metode, dan relasi antar kelas (seperti
asosiasi, pewarisan, dan agregasi).
oComponent Diagram: Menyediakan gambaran tentang bagaimana
perangkat lunak dibagi menjadi komponen-komponen fungsional dan
bagaimana mereka saling berinteraksi.
oDeployment Diagram: Menunjukkan bagaimana perangkat lunak akan
dideploy pada perangkat keras atau server, serta hubungan antara node
perangkat keras.
Contoh: Di aplikasi perbankan, diagram kelas bisa mencakup kelas-kelas seperti
Account, Transaction, dan Customer.
3. Rancang Interaksi Sistem (Interaction Design)
Tujuan: Mendesain bagaimana berbagai komponen sistem saling berinteraksi
satu sama lain.
UML yang digunakan:
oSequence Diagram: Menggambarkan urutan pesan atau interaksi
antara objek dalam sistem berdasarkan waktu.
oCommunication Diagram : Fokus pada interaksi antara objek, tetapi
lebih berfokus pada hubungan antar objek daripada urutan pesan.
2

3. Contoh: Sequence diagram untuk proses "Melakukan Transfer Uang" dapat
menggambarkan bagaimana objek Account berinteraksi dengan objek Transaction dan
sistem lain untuk menyelesaikan transaksi.
4. Rancang Perilaku Sistem (Behavioral Design)
Tujuan: Mendesain bagaimana sistem merespons peristiwa dan bagaimana
objek bergerak melalui status yang berbeda.
UML yang digunakan:
oState Diagram: Menunjukkan perubahan status objek selama siklus
hidupnya.
oActivity Diagram: Dapat digunakan untuk menggambarkan alur
aktivitas dalam proses bisnis yang lebih besar.
Contoh: State diagram untuk kelas Account dapat menunjukkan perubahan status
akun, seperti “Active”, “Frozen”, dan “Closed” setelah transaksi tertentu.
5. Implementasi Sistem
Tujuan: Mengimplementasikan kode sesuai dengan desain yang telah dibuat.
UML yang digunakan:
oPada tahap ini, UML lebih berfungsi sebagai panduan, tetapi beberapa
diagram seperti Class Diagram dan Sequence Diagram dapat
digunakan sebagai referensi dalam mengimplementasikan kode.
6. Pengujian dan Verifikasi (Testing and Validation)
Tujuan: Menguji apakah sistem berfungsi sesuai dengan spesifikasi yang telah
ditentukan.
UML yang digunakan:
oActivity Diagram dan Sequence Diagram dapat digunakan untuk
memverifikasi alur proses atau interaksi sistem yang diinginkan.
7. Pemeliharaan Sistem (Maintenance)
Tujuan: Melakukan perbaikan atau pembaruan terhadap perangkat lunak
setelah sistem diluncurkan.
UML yang digunakan:
oSelama tahap pemeliharaan, diagram seperti Class Diagram dan
Activity Diagram bisa diperbarui untuk mencerminkan perubahan yang
telah dilakukan pada sistem.
3

4. Rangkuman UML yang Umum Digunakan dalam Pengembangan Perangkat
Lunak:
1.Use Case Diagram – Untuk menggambarkan fungsionalitas sistem dan
interaksi dengan aktor.
2.Class Diagram – Untuk menggambarkan struktur statis sistem, termasuk kelas,
atribut, dan relasi.
3.Sequence Diagram – Untuk menggambarkan urutan pesan antara objek dalam
waktu.
4.State Diagram – Untuk menggambarkan perubahan status objek.
5.Activity Diagram – Untuk menggambarkan alur aktivitas dalam proses.
6.Component Diagram – Untuk menggambarkan struktur perangkat lunak pada
level komponen.
7.Deployment Diagram – Untuk menggambarkan distribusi perangkat lunak di
perangkat keras.
Praktik Baik dalam Menggunakan UML:
Mulai dengan Use Case: Mengidentifikasi kebutuhan fungsional adalah
langkah pertama yang baik, karena ini memberikan gambaran tingkat tinggi
tentang bagaimana sistem harus berfungsi.
Iterasi dan Refinement: UML harus digunakan secara iteratif. Anda mungkin
perlu memperbarui diagram saat proyek berkembang.
Keterlibatan Stakeholder: Gunakan UML sebagai alat komunikasi antara tim
pengembang dan stakeholder non-teknis untuk memastikan bahwa semua
pihak memahami bagaimana sistem akan bekerja.
4

5. Studi Kasus: E-Commerce Web Application
Deskripsi Proyek
Perusahaan XYZ berencana membuat aplikasi web e-commerce untuk menjual produk
elektronik. Aplikasi ini harus mendukung:
1.Pendaftaran dan autentikasi pengguna.
2.Pencarian produk berdasarkan kategori.
3.Proses pembelian termasuk pembayaran dan pengiriman.
4.Manajemen inventaris produk untuk admin.
5.Riwayat pembelian bagi pengguna.
Tahap 1: Analisis Kebutuhan dan Use Case
1.Kebutuhan Sistem:
Pengguna dapat membuat akun, masuk, dan keluar dari aplikasi.
Pengguna dapat melihat detail produk dan menambahkannya ke
keranjang belanja.
Pengguna dapat melakukan proses checkout dengan pembayaran yang
aman.
Admin dapat menambah, mengubah, dan menghapus produk.
2.Diagram UML: Use Case Diagram
Membuat use case diagram untuk menggambarkan skenario utama
aplikasi: pendaftaran, login, penelusuran produk, checkout, dan
manajemen produk oleh admin.
Tahap 2: Desain Sistem dengan UML
1.Diagram Kelas (Class Diagram):
Menggambarkan entitas utama aplikasi, seperti:
User (mempunyai atribut id, email, password, dll.)
Product (dengan atribut productId, name, price, description)
Order (dengan atribut orderId, orderDate, status)
Relasi antara entitas seperti User dan Order (satu user dapat
memiliki banyak pesanan).
2.Diagram Komponen (Component Diagram) :
Menggambarkan komponen utama seperti:
5

6. Frontend component untuk UI.
Backend component untuk logika bisnis.
Database component untuk penyimpanan data.
Mengidentifikasi hubungan antara komponen dan interaksinya.
3.Diagram Aktivitas (Activity Diagram):
Menggambarkan alur kerja penting, misalnya proses checkout:
1.Pengguna menambah barang ke keranjang.
2.Pengguna menekan tombol checkout.
3.Sistem memverifikasi detail pembayaran.
4.Jika verifikasi berhasil, pesanan dikonfirmasi dan detail
pengiriman disimpan.
4.Diagram Sekuens (Sequence Diagram) :
Menggambarkan interaksi antar objek dalam skenario tertentu.
Misalnya, saat pengguna melakukan proses pembelian:
1.Pengguna mengirim request untuk checkout.
2.Sistem backend mengakses database untuk memverifikasi stok.
3.Jika stok cukup, sistem melanjutkan proses pembayaran.
4.Setelah pembayaran berhasil, sistem mengonfirmasi pesanan dan
memberi tahu pengguna.
Tahap 3: Pengembangan dan Dokumentasi
1.Pengembangan Berdasarkan UML :
Tim developer menggunakan class diagram untuk membuat struktur
database dan entitas dalam kode.
Use case dan sequence diagram membantu memahami interaksi dan
alur antara frontend dan backend.
2.Dokumentasi Sistem:
Setiap diagram UML disimpan sebagai dokumentasi proyek.
Deskripsi tiap kelas, atribut, metode, dan relasi dalam class diagram
dijelaskan dalam dokumentasi.
Use case diagram digunakan untuk membuat dokumentasi skenario
pengguna dan alur kerja sistem.
6

7. Output Akhir UML:
1.Use Case Diagram - Menampilkan interaksi antara pengguna dan aplikasi.
2.Class Diagram - Merinci struktur data dan hubungan antar kelas.
3.Component Diagram - Menggambarkan struktur komponen dan arsitektur
aplikasi.
4.Activity Diagram - Menunjukkan alur proses checkout dan alur lainnya.
5.Sequence Diagram - Mengilustrasikan interaksi objek dalam skenario
pembelian.
1. Identifikasi Kebutuhan Sistem (Requirement Analysis)
Analisis Kebutuhan
1. Kebutuhan Fungsional
Autentikasi dan Manajemen Pengguna :
Pengguna dapat mendaftar akun baru.
Pengguna dapat login dan logout.
Pengguna dapat memperbarui profil mereka.
Manajemen Produk:
Pengguna dapat melihat daftar produk.
Pengguna dapat melihat detail produk.
Admin dapat menambah, mengubah, dan menghapus produk.
Proses Pembelian dan Checkout:
Pengguna dapat menambah produk ke keranjang belanja.
Pengguna dapat melihat dan mengedit keranjang belanja.
Pengguna dapat melakukan proses checkout dan memilih metode
pembayaran.
Sistem memverifikasi pembayaran dan memproses pesanan.
Riwayat Pembelian dan Detail Pesanan:
Pengguna dapat melihat riwayat pembelian.
Pengguna dapat melihat status dan detail dari setiap pesanan.
2. Kebutuhan Non-Fungsional
7

8. Keamanan: Sistem harus mengamankan data pribadi pengguna dan
memastikan transaksi pembayaran aman.
Responsivitas: Aplikasi harus berjalan lancar di perangkat desktop maupun
mobile.
Ketersediaan: Aplikasi harus tersedia 24/7 dengan downtime minimum.
Kinerja: Proses pemuatan halaman tidak boleh lebih dari 3 detik.
Use Case untuk Aplikasi E-Commerce
Berikut adalah diagram use case dalam format PlantUML untuk mengilustrasikan
interaksi antara aktor (User dan Admin) dengan aplikasi.
@startuml
actor User
actor Admin
rectangle "E-Commerce Application" {
User --> (Register Account)
User --> (Login)
User --> (Logout)
User --> (Update Profile)
User --> (Browse Products)
User --> (View Product Detail)
User --> (Add to Cart)
User --> (View Cart)
User --> (Edit Cart)
User --> (Checkout)
User --> (View Purchase History)
User --> (View Order Status)
Admin --> (Add Product)
Admin --> (Edit Product)
8

9. Admin --> (Delete Product)
}
@enduml
Software Requirement Specification (SRS) untuk Aplikasi E-Commerce
1. Pendahuluan
Tujuan: SRS ini menjelaskan fitur dan fungsi dari aplikasi E-Commerce Web
Application yang akan dibangun untuk memfasilitasi penjualan produk
elektronik.
Cakupan: Aplikasi ini melayani pengguna akhir yang ingin membeli produk, dan
admin yang mengelola produk di aplikasi.
2. Deskripsi Umum
Lingkungan Operasional: Aplikasi akan berjalan pada browser web modern,
kompatibel dengan perangkat desktop dan mobile.
Batasan: Pengguna perlu melakukan login untuk membeli produk dan
mengakses riwayat pembelian.
3. Persyaratan Fungsional
Manajemen Pengguna :
Register Account: Pengguna bisa membuat akun baru dengan
informasi dasar (nama, email, password).
Login/Logout: Pengguna bisa masuk atau keluar dari akun.
Update Profile: Pengguna bisa memperbarui profilnya.
Manajemen Produk:
Browse Products: Pengguna bisa melihat daftar produk yang tersedia.
View Product Detail: Pengguna bisa melihat detail dari masing-masing
produk.
Add/Edit/Delete Product (Admin): Admin bisa menambah, mengubah,
atau menghapus produk dari daftar.
Manajemen Keranjang Belanja:
Add to Cart: Pengguna bisa menambah produk ke keranjang.
View Cart: Pengguna bisa melihat produk yang ada di keranjang.
9

10. Edit Cart: Pengguna bisa mengubah kuantitas atau menghapus produk
dari keranjang.
Proses Pembelian:
Checkout: Pengguna bisa memproses pembayaran untuk pesanan yang
ada di keranjang.
Order Status: Pengguna bisa melihat status pesanan mereka.
Riwayat Pembelian:
View Purchase History: Pengguna bisa melihat riwayat pembelian
sebelumnya.
4. Persyaratan Non-Fungsional
Keamanan: Sistem harus melindungi data pengguna dan transaksi
pembayaran.
Kinerja: Aplikasi harus responsif, dengan waktu loading kurang dari 3 detik.
Ketersediaan: Aplikasi harus memiliki uptime minimal 99.9%.
Skalabilitas: Aplikasi harus mampu menangani peningkatan jumlah pengguna
tanpa penurunan performa signifikan.
10

11. Use Case Diagram
Diagram ini menggambarkan peran dan fungsi utama yang akan dilakukan oleh
pengguna aplikasi, termasuk User (pengguna umum) dan Admin.
@startuml
actor User
actor Admin
rectangle "E-Commerce Web Application" {
User --> (Register Account) : "Mendaftar akun baru"
User --> (Login) : "Masuk ke akun"
User --> (Logout) : "Keluar dari akun"
User --> (Update Profile) : "Memperbarui profil"
User --> (Browse Products) : "Melihat daftar produk"
User --> (View Product Detail) : "Melihat detail produk"
User --> (Add to Cart) : "Menambahkan produk ke keranjang"
User --> (View Cart) : "Melihat keranjang belanja"
User --> (Edit Cart) : "Mengubah isi keranjang"
User --> (Checkout) : "Proses pembayaran"
User --> (View Purchase History) : "Melihat riwayat pembelian"
User --> (View Order Status) : "Melihat status pesanan"
Admin --> (Add Product) : "Menambah produk baru"
Admin --> (Edit Product) : "Mengedit produk yang ada"
Admin --> (Delete Product) : "Menghapus produk"
}
@enduml
User Stories untuk Aplikasi E-Commerce
Berikut adalah beberapa user story yang menggambarkan kebutuhan pengguna dalam
aplikasi e-commerce.
11

12. 1.User Registration & Authentication
Sebagai pengguna, saya ingin dapat mendaftar akun baru sehingga saya
bisa menggunakan aplikasi untuk berbelanja.
Sebagai pengguna, saya ingin dapat masuk ke akun saya sehingga saya
bisa mengakses fitur yang memerlukan autentikasi.
Sebagai pengguna, saya ingin dapat keluar dari akun saya sehingga
privasi saya terjaga.
2.User Profile Management
Sebagai pengguna, saya ingin dapat memperbarui informasi profil saya
sehingga data saya selalu akurat.
3.Product Browsing & Details
Sebagai pengguna, saya ingin dapat melihat daftar produk yang tersedia
sehingga saya bisa memilih produk yang ingin saya beli.
Sebagai pengguna, saya ingin dapat melihat detail dari produk tertentu
sehingga saya bisa memahami spesifikasi produk tersebut.
4.Shopping Cart Management
Sebagai pengguna, saya ingin dapat menambahkan produk ke keranjang
belanja sehingga saya bisa mengumpulkan beberapa produk sebelum
checkout.
Sebagai pengguna, saya ingin dapat melihat keranjang belanja saya
sehingga saya bisa meninjau item yang akan saya beli.
Sebagai pengguna, saya ingin dapat mengubah kuantitas atau
menghapus produk dari keranjang belanja saya sehingga saya bisa
menyesuaikan pesanan saya sebelum checkout.
5.Checkout Process
Sebagai pengguna, saya ingin dapat melakukan checkout dan
menyelesaikan pembayaran sehingga saya bisa membeli produk yang
ada di keranjang belanja saya.
6.Order History and Status
Sebagai pengguna, saya ingin dapat melihat riwayat pembelian saya
sehingga saya bisa meninjau pesanan-pesanan sebelumnya.
Sebagai pengguna, saya ingin dapat melihat status pesanan saya
sehingga saya bisa mengetahui apakah pesanan saya sedang diproses
atau telah dikirim.
12

13. 7.Admin Product Management
Sebagai admin, saya ingin dapat menambahkan produk baru sehingga
saya bisa memperbarui inventaris produk di aplikasi.
Sebagai admin, saya ingin dapat mengedit informasi produk yang ada
sehingga data produk selalu up-to-date.
Sebagai admin, saya ingin dapat menghapus produk yang tidak tersedia
lagi sehingga daftar produk tetap relevan.
13

14. Activity Diagram
Berikut adalah activity diagram dalam format PlantUML untuk beberapa use case utama
dalam aplikasi E-Commerce Web Application. Diagram ini akan menjelaskan alur kerja
dan proses bisnis untuk setiap use case yang penting, yaitu:
1.Proses Registrasi Pengguna
2.Proses Login Pengguna
3.Proses Penambahan Produk ke Keranjang dan Checkout
4.Manajemen Produk oleh Admin
1. Activity Diagram untuk Proses Registrasi Pengguna
@startuml
start
:User membuka halaman registrasi;
:User mengisi informasi (email, password, dll.);
if (Informasi lengkap?) then (Yes)
:Sistem menyimpan data pengguna;
:Sistem mengirim email konfirmasi;
else (No)
:Sistem meminta pengguna melengkapi informasi;
:User melengkapi informasi;
back to Informasi lengkap?;
endif
:Registrasi selesai;
stop
@enduml
Penjelasan: Pada proses registrasi, pengguna akan membuka halaman registrasi,
mengisi informasi, dan sistem akan memeriksa kelengkapan informasi. Jika lengkap,
data akan disimpan dan email konfirmasi akan dikirim ke pengguna.
2. Activity Diagram untuk Proses Login Pengguna
14

15. @startuml
start
:User membuka halaman login;
:User memasukkan email dan password;
if (Data login valid?) then (Yes)
:Sistem mengizinkan akses ke akun;
else (No)
:Sistem menampilkan pesan kesalahan;
:User memasukkan ulang email dan password;
back to Data login valid?;
endif
:Login selesai;
stop
@enduml
Penjelasan: Diagram ini menunjukkan alur proses login di mana pengguna
memasukkan data login. Sistem akan memvalidasi data, dan jika valid, pengguna akan
diberi akses ke akun. Jika tidak valid, sistem meminta pengguna memasukkan ulang
data.
3. Activity Diagram untuk Proses Penambahan Produk ke Keranjang dan
Checkout
@startuml
start
:User melihat produk;
:User memilih produk dan menambahkannya ke keranjang;
repeat
:User memilih produk lain dan menambahkannya ke keranjang;
repeat while (User ingin menambah produk lagi?)
:User membuka keranjang belanja;
15

16. if (Keranjang sudah benar?) then (Yes)
:User melakukan checkout;
:Sistem menampilkan opsi pembayaran;
:User memilih metode pembayaran;
:Sistem memproses pembayaran;
if (Pembayaran berhasil?) then (Yes)
:Sistem mengonfirmasi pesanan;
:Sistem mengirim notifikasi kepada user;
else (No)
:Sistem menampilkan pesan gagal bayar;
endif
else (No)
:User mengedit keranjang;
back to Keranjang sudah benar?;
endif
:Checkout selesai;
stop
@enduml
Penjelasan: Pada diagram ini, pengguna menambah produk ke keranjang dan
melakukan checkout. Sistem memproses pembayaran dan mengonfirmasi pesanan
jika pembayaran berhasil.
4. Activity Diagram untuk Manajemen Produk oleh Admin
@startuml
start
:Admin membuka halaman manajemen produk;
:Admin memilih aksi (tambah, edit, atau hapus produk);
if (Aksi = Tambah Produk?) then (Yes)
:Admin mengisi informasi produk baru;
16

17. :Sistem menyimpan produk baru;
else (No)
if (Aksi = Edit Produk?) then (Yes)
:Admin memilih produk yang akan diedit;
:Admin mengubah informasi produk;
:Sistem memperbarui data produk;
else (Aksi = Hapus Produk)
:Admin memilih produk yang akan dihapus;
:Sistem menghapus data produk;
endif
endif
:Manajemen produk selesai;
stop
@enduml
Penjelasan: Diagram ini menggambarkan alur kerja admin dalam mengelola produk.
Admin dapat memilih untuk menambah, mengedit, atau menghapus produk. Untuk
setiap aksi, sistem melakukan penyimpanan, pembaruan, atau penghapusan data
produk.
17

18. Desain Sistem (System Design)
Class Diagram
Diagram ini menggambarkan struktur data utama dan relasi antar kelas untuk aplikasi
E-Commerce Web Application .
@startuml
class User {
- userId: int
- name: String
- email: String
- password: String
+ register(): void
+ login(): boolean
+ logout(): void
+ updateProfile(): void
}
class Product {
- productId: int
- name: String
- description: String
- price: double
- stock: int
+ updateStock(quantity: int): void
+ getDetails(): String
}
class Cart {
- cartId: int
18

19. - userId: int
- items: List<CartItem>
+ addItem(product: Product, quantity: int): void
+ removeItem(productId: int): void
+ calculateTotal(): double
}
class CartItem {
- productId: int
- quantity: int
+ getSubtotal(): double
}
class Order {
- orderId: int
- userId: int
- orderDate: Date
- status: String
- items: List<OrderItem>
- totalAmount: double
+ placeOrder(cart: Cart): void
+ cancelOrder(): void
+ viewOrderStatus(): String
}
class OrderItem {
- orderItemId: int
- productId: int
- quantity: int
19

20. - price: double
+ getTotalPrice(): double
}
class Payment {
- paymentId: int
- orderId: int
- amount: double
- paymentDate: Date
- paymentMethod: String
- status: String
+ processPayment(): boolean
}
class Admin {
- adminId: int
- name: String
- email: String
- password: String
+ addProduct(product: Product): void
+ editProduct(productId: int): void
+ deleteProduct(productId: int): void
}
User "1" -- "0..1" Cart : "has"
User "1" -- "0..*" Order : "places"
Order "1" -- "0..*" OrderItem : "contains"
Cart "1" -- "0..*" CartItem : "contains"
Product "1" -- "0..*" CartItem : "is part of"
20

21. Product "1" -- "0..*" OrderItem : "is part of"
Order "1" -- "0..1" Payment : "processed by"
Admin "1" -- "0..*" Product : "manages"
@enduml
Penjelasan Class Diagram untuk E-Commerce Web Application
Diagram di atas terdiri dari beberapa kelas utama dan hubungan antar kelas yang
menggambarkan fungsionalitas utama aplikasi E-Commerce Web Application:
1.User
Attributes: userId, name, email, password.
Methods:
register(): Untuk mendaftarkan pengguna baru.
login(): Untuk autentikasi pengguna.
logout(): Untuk mengakhiri sesi pengguna.
updateProfile(): Untuk memperbarui informasi pengguna.
Relasi: Setiap User dapat memiliki satu Cart dan dapat membuat
beberapa Order.
2.Product
Attributes: productId, name, description, price, stock.
Methods:
updateStock(quantity): Mengubah jumlah stok.
getDetails(): Mendapatkan detail produk.
Relasi: Product bisa menjadi bagian dari
beberapa CartItem atau OrderItem.
3.Cart
Attributes: cartId, userId, items.
Methods:
addItem(product, quantity): Menambahkan produk ke keranjang.
removeItem(productId): Menghapus produk dari keranjang.
21

22. calculateTotal(): Menghitung total harga semua produk dalam
keranjang.
Relasi: Cart terkait dengan User dan dapat memiliki beberapa CartItem.
4.CartItem
Attributes: productId, quantity.
Methods:
getSubtotal(): Menghitung subtotal berdasarkan kuantitas dan
harga produk.
Relasi: CartItem merupakan bagian dari Cart dan merujuk ke Product.
5.Order
Attributes: orderId, userId, orderDate, status, items, totalAmount.
Methods:
placeOrder(cart): Untuk membuat pesanan dari keranjang.
cancelOrder(): Untuk membatalkan pesanan.
viewOrderStatus(): Untuk melihat status pesanan.
Relasi: Order terkait dengan User, memiliki beberapa OrderItem, dan
bisa memiliki Payment.
6.OrderItem
Attributes: orderItemId, productId, quantity, price.
Methods:
getTotalPrice(): Menghitung total harga item berdasarkan jumlah
dan harga satuan.
Relasi: OrderItem merupakan bagian dari Order dan merujuk
ke Product.
7.Payment
Attributes: paymentId, orderId, amount, paymentDate, paymentMethod
, status.
Methods:
processPayment(): Untuk memproses pembayaran.
Relasi: Payment terkait dengan Order.
8.Admin
22

23. Attributes: adminId, name, email, password.
Methods:
addProduct(product): Menambahkan produk baru ke sistem.
editProduct(productId): Mengubah informasi produk.
deleteProduct(productId): Menghapus produk dari sistem.
Relasi: Admin mengelola beberapa Product.
23

24. Component Diagram
Diagram ini menggambarkan komponen utama yang terlibat dalam aplikasi dan
bagaimana komponen tersebut berinteraksi satu sama lain.
@startuml
package "E-Commerce Web Application" {

component "User Interface" {
[Login Page]
[Registration Page]
[Product Catalog]
[Product Detail Page]
[Shopping Cart Page]
[Checkout Page]
[Order History Page]
}

component "Backend Services" {
[Authentication Service]
[User Management Service]
[Product Management Service]
[Cart Service]
[Order Management Service]
[Payment Service]
[Notification Service]
}

component "Database" {
[User Database]
24

25. [Product Database]
[Order Database]
[Payment Database]
}
component "External Payment Gateway"
component "Email Service"
[User Interface] --> [Backend Services] : "HTTP Requests/Responses"

[Authentication Service] --> [User Database] : "User Data"
[User Management Service] --> [User Database]
[Product Management Service] --> [Product Database]
[Cart Service] --> [Product Database] : "Product Stock Check"
[Order Management Service] --> [Order Database]
[Payment Service] --> [Payment Database]

[Order Management Service] --> [Payment Service] : "Process Payment"
[Payment Service] --> [External Payment Gateway] : "Initiate Payment"

[Order Management Service] --> [Notification Service] : "Send Order Confirmation"
[Notification Service] --> [Email Service] : "Send Email"

[User Interface] --> [Email Service] : "Forgot Password"
}
@enduml
25

26. Penjelasan Component Diagram untuk E-Commerce Web Application
Diagram di atas menunjukkan arsitektur komponen utama dari aplikasi E-Commerce
Web Application. Setiap komponen memiliki peran spesifik dalam sistem untuk
mendukung fungsionalitas e-commerce, mulai dari tampilan pengguna hingga layanan
backend.
Komponen-Komponen Utama
1.User Interface
Komponen ini mencakup halaman-halaman antarmuka pengguna,
seperti:
Login Page: Tempat pengguna melakukan login.
Registration Page: Tempat pengguna melakukan registrasi.
Product Catalog: Tempat pengguna menelusuri produk.
Product Detail Page: Menampilkan detail produk.
Shopping Cart Page: Menampilkan isi keranjang belanja.
Checkout Page: Tempat pengguna menyelesaikan proses
pembayaran.
Order History Page: Menampilkan riwayat pesanan pengguna.
Komponen ini berinteraksi dengan Backend Services melalui HTTP
Requests untuk memanggil data dan memproses interaksi pengguna.
2.Backend Services
Layanan-layanan ini mengelola logika aplikasi dan menyediakan API
yang digunakan oleh antarmuka pengguna. Beberapa layanan penting
meliputi:
Authentication Service: Mengelola proses login dan logout.
User Management Service: Mengelola data profil pengguna.
Product Management Service: Mengelola data produk, termasuk
stok dan detail produk.
Cart Service: Mengelola isi keranjang belanja.
Order Management Service: Mengelola pemrosesan pesanan,
termasuk checkout.
Payment Service: Mengelola transaksi pembayaran.
Notification Service: Mengirim notifikasi pesanan ke pengguna.
26

27. Setiap layanan backend berinteraksi dengan database atau layanan
eksternal yang relevan.
3.Database
Database menyimpan data utama untuk aplikasi:
User Database: Menyimpan informasi pengguna.
Product Database: Menyimpan data produk, termasuk stok.
Order Database: Menyimpan data pesanan.
Payment Database: Menyimpan data transaksi pembayaran.
4.External Payment Gateway
Komponen ini adalah layanan eksternal yang digunakan oleh Payment
Service untuk memproses transaksi pembayaran. Layanan ini melakukan
autentikasi dan otorisasi pembayaran dari pengguna.
5.Email Service
Layanan ini digunakan untuk mengirimkan email, termasuk email
konfirmasi pesanan atau pemulihan kata sandi. Notification
Service berinteraksi dengan komponen ini untuk mengirim email setelah
pemesanan berhasil.
Alur Kerja Utama
1.Proses Autentikasi dan Registrasi
Pengguna mengakses halaman Login Page atau Registration
Page pada User Interface. Permintaan tersebut diteruskan
ke Authentication Service atau User Management Service, yang berinteraksi
dengan User Database.
2.Menelusuri dan Menambahkan Produk ke Keranjang
Pengguna menelusuri Product Catalog dan menambahkan produk
ke Shopping Cart Page. Permintaan diproses oleh Product Management
Service dan Cart Service untuk mengelola data produk dan memeriksa
stok.
3.Proses Checkout dan Pembayaran
Setelah menambahkan produk ke keranjang, pengguna melanjutkan
ke Checkout Page. Order Management Service membuat pesanan dan
memanggil Payment Service untuk memproses pembayaran
melalui External Payment Gateway.
27

28. Setelah pembayaran berhasil, Notification Service mengirimkan email
konfirmasi kepada pengguna menggunakan Email Service.
28

29. Deployment Diagram
Diagram ini menggambarkan pengaturan fisik atau infrastruktur dari aplikasi,
termasuk server, klien, database, dan layanan eksternal yang diperlukan.
@startuml
node "Client Device" {
[Web Browser] : Mengakses aplikasi melalui HTTP/HTTPS
}
node "Web Server" {
component "E-Commerce Application" {
[Frontend Module] : HTML, CSS, JavaScript (React, Vue, dll)
[Backend Module] : API dan logika bisnis (Node.js, Django, dll)
}
[Frontend Module] --> [Backend Module] : Mengirim Permintaan API
}
node "Application Server" {
component "Backend Services" {
[Authentication Service]
[User Management Service]
[Product Management Service]
[Cart Service]
[Order Management Service]
[Payment Service]
[Notification Service]
}
[Backend Module] --> [Authentication Service]
[Backend Module] --> [User Management Service]
29

30. [Backend Module] --> [Product Management Service]
[Backend Module] --> [Cart Service]
[Backend Module] --> [Order Management Service]
[Backend Module] --> [Payment Service]
[Backend Module] --> [Notification Service]
}
node "Database Server" {
database "User Database" {
[User Data]
}
database "Product Database" {
[Product Data]
}
database "Order Database" {
[Order Data]
}
database "Payment Database" {
[Payment Data]
}
}
node "External Services" {
[Payment Gateway Service]
[Email Service]
}
[Authentication Service] --> "User Database" : Membaca/Menulis data
[User Management Service] --> "User Database" : Membaca/Menulis data
30

31. [Product Management Service] --> "Product Database" : Membaca/Menulis data
[Cart Service] --> "Product Database" : Memeriksa stok
[Order Management Service] --> "Order Database" : Menyimpan data pesanan
[Payment Service] --> "Payment Database" : Menyimpan transaksi
[Payment Service] --> [Payment Gateway Service] : Proses Pembayaran
[Notification Service] --> [Email Service] : Kirim Konfirmasi Pesanan
"Client Device" --> "Web Server" : HTTP/HTTPS Request
"Web Server" --> "Application Server" : API Request
"Application Server" --> "Database Server" : Query Database
@enduml
Penjelasan Deployment Diagram untuk E-Commerce Web Application
Diagram ini menunjukkan pengaturan fisik atau deployment dari aplikasi e-commerce,
dengan menyoroti beberapa komponen utama dalam lingkungan  production. Setiap
komponen berada pada node tertentu yang merepresentasikan perangkat fisik atau
lingkungan terpisah untuk meningkatkan skalabilitas, keamanan, dan kinerja.
Node dan Komponen Utama
1.Client Device
Ini mewakili perangkat yang digunakan oleh pengguna akhir, seperti
komputer atau ponsel. Pengguna mengakses aplikasi melalui Web
Browser dengan protokol HTTP/HTTPS.
2.Web Server
Web Server ini meng-host Frontend Module dan Backend Module.
Frontend Module: Menyediakan antarmuka pengguna, dikembangkan
menggunakan HTML, CSS, dan JavaScript (misalnya, dengan framework
seperti React atau Vue).
Backend Module: Menyediakan API yang digunakan oleh antarmuka
pengguna untuk mengirimkan data ke layanan backend di Application
Server.
31

32. Frontend Module mengirimkan permintaan API ke Backend Module untuk
memproses data yang kemudian diteruskan ke Backend
Services di Application Server.
3.Application Server
Application Server menampung berbagai layanan backend
atau microservices yang bertanggung jawab untuk fungsionalitas utama
aplikasi.
Backend Services: Terdiri dari beberapa layanan utama:
Authentication Service: Mengelola login dan otentikasi pengguna.
User Management Service: Mengelola data profil pengguna.
Product Management Service: Mengelola data produk.
Cart Service: Mengelola isi keranjang belanja.
Order Management Service: Mengelola pesanan pengguna.
Payment Service: Mengelola transaksi pembayaran.
Notification Service: Mengirim notifikasi pesanan.
Setiap layanan ini berkomunikasi dengan database yang relevan atau
layanan eksternal seperti Payment Gateway.
4.Database Server
Server ini bertanggung jawab untuk menyimpan semua data aplikasi dan
terdiri dari beberapa database:
User Database: Menyimpan informasi pengguna.
Product Database: Menyimpan data produk dan stok.
Order Database: Menyimpan data pesanan pengguna.
Payment Database: Menyimpan informasi transaksi pembayaran.
Setiap layanan di Application Server mengakses database yang sesuai
melalui queries.
5.External Services
Beberapa layanan eksternal yang diperlukan termasuk:
Payment Gateway Service: Layanan pihak ketiga untuk
memproses pembayaran.
Email Service: Layanan yang mengirimkan email konfirmasi
kepada pengguna setelah pesanan berhasil diproses.
32

33. Alur Kerja Utama
1.Akses Pengguna:
Pengguna mengakses aplikasi melalui Client Device dan berinteraksi
dengan antarmuka di Web Server.
2.Permintaan Data:
Frontend Module mengirimkan permintaan API ke Backend Module, yang
kemudian meneruskannya ke Application Server.
3.Pengelolaan Data:
Application Server mengelola data dan berinteraksi dengan Database
Server untuk membaca atau menulis informasi pengguna, produk,
pesanan, dan pembayaran.
4.Proses Pembayaran dan Notifikasi:
Ketika pesanan diproses, Payment Service menghubungi Payment
Gateway untuk pembayaran dan Notification Service menghubungi Email
Service untuk mengirim konfirmasi ke pengguna.
33

34. Object Relational Mapping
Object Relational Mapping (ORM) yang mengubah class diagram tersebut menjadi
struktur tabel database.
1. Class Diagram untuk Aplikasi E-Commerce Web Application (Format PlantUML)
@startuml
class User {
+Integer userID
+String name
+String email
+String password
+String address
}
class Product {
+Integer productID
+String name
+String description
+Decimal price
+Integer stock
}
class Order {
+Integer orderID
+Date orderDate
+Decimal totalAmount
}
class OrderItem {
34

35. +Integer orderItemID
+Integer quantity
+Decimal price
}
User "1" --> "*" Order : places >
Order "1" --> "*" OrderItem : contains >
Product "1" --> "*" OrderItem : is contained in >
@enduml
Penjelasan Class Diagram
User: Menggambarkan pengguna aplikasi e-commerce. Setiap pengguna
memiliki atribut seperti userID (ID unik pengguna), name (nama
pengguna), email (alamat email), password (kata sandi), dan address (alamat
pengguna).
Product: Menggambarkan produk yang tersedia di toko online. Setiap produk
memiliki productID, name, description, price, dan stock (jumlah stok yang
tersedia).
Order: Setiap transaksi yang dilakukan oleh pengguna. Atributnya
termasuk orderID (ID unik pesanan), orderDate (tanggal pesanan),
dan totalAmount (total harga pesanan).
OrderItem: Merupakan item dalam suatu pesanan, menghubungkan produk
dengan pesanan. Atributnya termasuk orderItemID, quantity (jumlah produk
dalam pesanan), dan price (harga produk per unit).
Relasi Antar Kelas
Seorang User dapat memiliki banyak Order (1 ke banyak), karena satu
pengguna dapat melakukan beberapa pesanan.
Setiap Order dapat berisi banyak OrderItem, yang menghubungkan pesanan
dengan produk yang dibeli.
Setiap Product dapat muncul dalam banyak OrderItem, karena satu produk
bisa dipesan banyak kali oleh berbagai pengguna.
35

36. 2. Object Relational Mapping (ORM)
Setelah kita mendefinisikan class diagram, langkah berikutnya adalah mengonversi
objek-objek tersebut menjadi struktur tabel dalam database. Setiap kelas pada class
diagram akan diubah menjadi tabel dalam database, dan atribut kelas akan menjadi
kolom pada tabel tersebut. Berikut adalah contoh pemetaan tersebut:
Struktur Tabel Database
Tabel User
Kolom Tipe Data Keterangan
userID Integer Primary Key
name Varchar(255) Nama pengguna
email Varchar(255) Email pengguna
password Varchar(255) Kata sandi pengguna
address Varchar(255) Alamat pengguna
Tabel Product
Kolom Tipe Data Keterangan
productID Integer Primary Key
name Varchar(255) Nama produk
description Text Deskripsi produk
price Decimal(10,2) Harga produk
stock Integer Jumlah stok produk
Tabel Order
Kolom Tipe Data Keterangan
orderID Integer Primary Key
orderDate Date Tanggal pesanan
totalAmount Decimal(10,2) Total harga pesanan
userID Integer Foreign Key ke tabel User
Relasi: userID adalah foreign key yang menunjuk ke User, menggambarkan
bahwa setiap pesanan berhubungan dengan satu pengguna.
Tabel OrderItem
36

37. Kolom Tipe Data Keterangan
orderItemID Integer Primary Key
quantity Integer Jumlah produk dalam pesanan
price Decimal(10,2) Harga per item
orderID Integer Foreign Key ke tabel Order
productID Integer Foreign Key ke tabel Product
Relasi: orderID dan productID adalah foreign keys yang menunjuk ke
tabel Order dan Product, menggambarkan bahwa setiap item dalam pesanan
berhubungan dengan satu pesanan dan satu produk.
Penjelasan Proses ORM
Kelas User menjadi tabel User. Setiap atribut
kelas User seperti userID, name, email, password, dan address dipetakan
menjadi kolom pada tabel.
Kelas Product menjadi tabel Product. Setiap atribut
kelas Product seperti productID, name, description, price, dan stock dipetakan
menjadi kolom pada tabel.
Kelas Order menjadi tabel Order.
Atribut orderID, orderDate, totalAmount menjadi kolom dalam tabel ini. Foreign
key userID menghubungkan pesanan dengan pengguna yang membuatnya.
Kelas OrderItem menjadi tabel OrderItem.
Atribut orderItemID, quantity, price dipetakan ke kolom dalam tabel ini.
Kolom orderID dan productID bertindak sebagai foreign keys, yang
menghubungkan pesanan dengan produk.
Relasi Antar Tabel dalam Database
User - Order: Satu pengguna dapat memiliki banyak pesanan. Relasi ini
digambarkan dengan userID di tabel Order, yang merupakan foreign key yang
mengarah ke User.
Order - OrderItem: Satu pesanan dapat memiliki banyak item. Relasi ini
digambarkan dengan orderID di tabel OrderItem, yang merupakan foreign
key yang mengarah ke Order.
Product - OrderItem: Satu produk dapat ada di banyak item pesanan. Relasi ini
digambarkan dengan productID di tabel OrderItem, yang merupakan foreign
key yang mengarah ke Product.
37

38. 38

39. Desain UI dan UX
UML (Unified Modeling Language) memiliki peran yang sangat penting dalam
mendesain UI/UX untuk aplikasi web, meskipun UML lebih sering dikaitkan dengan
desain perangkat lunak yang lebih teknis seperti arsitektur, kelas, dan alur data.
Namun, beberapa diagram UML dapat sangat berguna dalam merancang pengalaman
pengguna dan antarmuka pengguna dengan cara yang sistematis dan terstruktur.
Berikut adalah beberapa cara UML dapat berperan dalam desain UI/UX untuk aplikasi
web:
1. Use Case Diagram (Diagram Kasus Penggunaan)
Peran dalam UI/UX: Use Case Diagram menggambarkan interaksi antara
pengguna (aktor) dan sistem aplikasi. Ini membantu untuk memahami apa yang
diinginkan oleh pengguna dan bagaimana aplikasi memenuhi kebutuhan
tersebut.
Fungsi: Use Case Diagram memberikan gambaran tentang berbagai skenario
pengguna, seperti "Mengelola Akun Pengguna", "Melakukan Pembelian", atau
"Melihat Produk". Hal ini memberikan dasar yang jelas untuk mendesain
antarmuka pengguna (UI) yang sesuai dengan setiap kasus penggunaan.
Manfaat: Membantu desainer UX memetakan fitur-fitur yang harus ada dalam
aplikasi web dan merancang elemen antarmuka sesuai dengan alur yang
diinginkan oleh pengguna.
Contoh:
Use case "Login" untuk pengguna biasa yang memiliki antarmuka login.
Use case "Pembelian Produk" untuk pengguna yang memerlukan desain
halaman checkout.
2. Activity Diagram (Diagram Aktivitas)
Peran dalam UI/UX: Activity Diagram menggambarkan urutan aktivitas dalam
proses atau alur kerja. Ini sangat berguna dalam memahami bagaimana
pengguna akan berinteraksi dengan aplikasi melalui berbagai tahap.
Fungsi: Diagram ini membantu menggambarkan langkah-langkah yang dilalui
pengguna ketika mereka berinteraksi dengan aplikasi, seperti langkah-langkah
dalam proses checkout, pemesanan, atau pengisian formulir.
Manfaat: Membantu desainer UX untuk menciptakan alur interaksi yang logis,
menghindari kebingungannya, dan memastikan bahwa setiap langkah dalam
alur kerja pengguna jelas dan mudah diikuti.
Contoh:
39

40. Alur aktivitas login, dari input username dan password hingga konfirmasi login
atau kesalahan.
Alur pembelian, dari memilih produk, memasukkan informasi pembayaran,
hingga menyelesaikan transaksi.
3. Wireframe & UI Diagrams (Menggunakan Class atau Component Diagram)
Peran dalam UI/UX: Meskipun UML bukan alat utama untuk wireframing, Class
Diagram dan Component Diagram dapat memberikan wawasan tentang
bagaimana elemen-elemen aplikasi web dibagi dan diorganisir, yang dapat
memengaruhi desain visual dan fungsional.
Fungsi: Dengan memahami struktur data aplikasi, desainer dapat merancang
antarmuka pengguna yang berfungsi dengan baik untuk menampilkan data
tersebut. Misalnya, jika ada relasi antara produk dan kategori dalam database,
komponen antarmuka akan diorganisir untuk menampilkan produk yang sesuai
dengan kategori di halaman.
Manfaat: Menyediakan peta yang lebih besar tentang bagaimana elemen
aplikasi terkait satu sama lain, yang memudahkan dalam merancang alur
informasi dan penempatan elemen UI di layar.
4. State Diagram (Diagram Status)
Peran dalam UI/UX: State Diagram menggambarkan berbagai keadaan atau
status aplikasi dan bagaimana aplikasi bertransisi antar status. Dalam konteks
UI/UX, diagram ini membantu menggambarkan perubahan status UI dan
bagaimana respons terhadap interaksi pengguna.
Fungsi: Diagram ini sangat berguna untuk menggambarkan perubahan status
elemen UI, seperti tombol yang berubah warna ketika diklik atau status formulir
yang menunjukkan apakah input sudah lengkap atau masih ada yang perlu
diperbaiki.
Manfaat: Membantu desainer UI memikirkan secara sistematis bagaimana UI
berperilaku berdasarkan interaksi pengguna, seperti transisi status pada
tombol, menu, atau form.
Contoh:
Status form pengisian yang berubah dari "kosong" ke "valid" setelah pengguna
mengisi informasi dengan benar.
Status notifikasi yang berubah dari "tersembunyi" ke "tampil" setelah
melakukan aksi tertentu (seperti pengisian formulir yang berhasil).
5. Component Diagram
40

41. Peran dalam UI/UX: Diagram komponen menggambarkan pembagian sistem
aplikasi dalam komponen-komponen yang lebih kecil dan bagaimana
komponen-komponen tersebut berinteraksi. Dalam konteks UI/UX, komponen-
komponen ini sering kali berhubungan dengan elemen UI, seperti header,
sidebar, kartu produk, dan footer.
Fungsi: Dengan memahami bagaimana berbagai bagian aplikasi terstruktur,
desainer UI dapat memastikan bahwa setiap komponen antarmuka dapat
diakses dengan mudah dan berfungsi dengan baik secara mandiri atau
bersama-sama.
Manfaat: Memberikan gambaran yang lebih jelas tentang bagaimana
antarmuka pengguna dipetakan ke dalam aplikasi, membantu pengembang
dan desainer untuk bekerja lebih terstruktur dalam pengembangan UI.
Bagaimana UML Mendukung UI/UX?
Komunikasi antar Tim: UML membantu tim pengembang dan desainer
berkomunikasi lebih efektif, baik dalam hal fitur yang perlu dikembangkan, alur
interaksi yang perlu diimplementasikan, atau alur pengambilan keputusan
dalam aplikasi.
Pemahaman Kebutuhan Pengguna : Diagram seperti use case dan activity
memberikan pemahaman yang lebih baik tentang apa yang dibutuhkan oleh
pengguna dan bagaimana mereka akan berinteraksi dengan aplikasi.
Perencanaan dan Pengujian: UML membantu dalam merencanakan alur
interaksi pengguna yang logis, memudahkan dalam pengujian untuk
memastikan bahwa alur tersebut intuitif dan sesuai dengan harapan pengguna.
Contoh Kasus: E-Commerce Web Application
Untuk aplikasi E-Commerce, UML dapat digunakan dalam mendesain UI/UX sebagai
berikut:
1.Use Case Diagram: Mendefinisikan fitur seperti "Login", "Lihat Produk",
"Tambahkan ke Keranjang", dan "Pembayaran" yang berfokus pada interaksi
pengguna.
2.Activity Diagram: Membantu menggambarkan langkah-langkah pengguna
dalam melakukan pembelian produk, dari memilih produk hingga
menyelesaikan pembayaran.
41

42. 3.State Diagram: Menunjukkan bagaimana status elemen UI seperti tombol "Add
to Cart" berubah dari "Add" ke "Remove" setelah produk ditambahkan ke
keranjang.
42

43. Untuk memetakan Use Case Diagram aplikasi E-Commerce Web Application ke
dalam User Interface (UI), kita perlu menghubungkan setiap use case dengan
elemen-elemen UI yang relevan. Setiap use case menggambarkan interaksi pengguna
dengan aplikasi, dan setiap interaksi ini akan digambarkan dalam bentuk elemen UI
yang dapat diakses dan digunakan oleh pengguna.
Langkah-langkah Pemetaan Use Case Diagram ke UI
Berikut adalah mapping dari Use Case Diagram untuk aplikasi E-Commerce Web
Application ke dalam komponen User Interface.
1. Use Case: Login
UI yang Terlibat: Halaman Login
Elemen UI:
Form input untuk email dan password.
Tombol Login.
Tautan Forgot Password?.
Opsi Register bagi pengguna baru.
Deskripsi: Pengguna yang sudah terdaftar akan memasukkan email dan kata
sandi mereka ke dalam form login. Jika data benar, mereka dapat mengakses
aplikasi, jika salah, pesan kesalahan akan ditampilkan.
2. Use Case: Lihat Produk
UI yang Terlibat: Halaman Daftar Produk
Elemen UI:
Grid atau daftar produk dengan gambar produk, nama
produk, harga, dan deskripsi singkat.
Fitur pencarian di atas halaman untuk mencari produk.
Filter produk berdasarkan kategori atau harga.
Tombol Lihat Detail untuk tiap produk.
Deskripsi: Pengguna dapat menelusuri berbagai produk yang tersedia di toko,
memfilter berdasarkan kategori atau harga, dan mengklik produk untuk melihat
detailnya.
3. Use Case: Tambahkan ke Keranjang
UI yang Terlibat: Halaman Detail Produk & Halaman Keranjang
Elemen UI:
43

44. Tombol Tambah ke Keranjang di halaman detail produk.
Ikon keranjang di header yang menampilkan jumlah item yang
ada di keranjang.
Halaman Keranjang Belanja yang menampilkan produk yang
sudah ditambahkan, dengan jumlah, harga, dan total.
Deskripsi: Setelah pengguna melihat detail produk, mereka dapat
menambahkannya ke keranjang belanja dengan tombol "Tambah ke
Keranjang". Ikon keranjang di header akan memperbarui jumlah produk yang
ditambahkan.
4. Use Case: Pembayaran
UI yang Terlibat: Halaman Checkout
Elemen UI:
Form input untuk alamat pengiriman.
Form input untuk informasi pembayaran (misalnya, kartu kredit
atau pilihan pembayaran lainnya).
Tombol Konfirmasi Pembayaran.
Ringkasan pesanan yang menunjukkan daftar produk, total
harga, dan biaya pengiriman.
Deskripsi: Pengguna dapat melanjutkan ke halaman checkout, memasukkan
informasi pengiriman dan pembayaran, serta meninjau ringkasan pesanan
sebelum mengonfirmasi pembayaran.
5. Use Case: Melihat Keranjang Belanja
UI yang Terlibat: Halaman Keranjang Belanja
Elemen UI:
Daftar produk yang sudah ditambahkan ke keranjang
dengan gambar, nama produk, jumlah, harga per unit,
dan total harga.
Tombol Hapus untuk menghapus item dari keranjang.
Tombol Lanjutkan ke Pembayaran.
Ringkasan harga total pesanan dan biaya pengiriman.
Deskripsi: Pengguna dapat melihat daftar produk yang ada di keranjang
mereka, mengubah jumlah, menghapus item, atau melanjutkan ke
pembayaran.
44

45. Diagram Pemetaan UI Berdasarkan Use Case
Berikut adalah gambaran umum UI untuk masing-masing use case yang dipetakan ke
dalam halaman atau elemen antarmuka pengguna:
@startuml
actor User
User -> (Login) : Mengakses halaman login
User -> (Lihat Produk) : Mengakses halaman produk
User -> (Tambah ke Keranjang) : Mengklik tombol "Tambah ke Keranjang"
User -> (Pembayaran) : Mengakses halaman checkout
User -> (Melihat Keranjang Belanja) : Mengklik ikon keranjang di header
(Login) --> (Form Login) : Email dan Password
(Lihat Produk) --> (Halaman Produk) : Menampilkan daftar produk
(Tambah ke Keranjang) --> (Halaman Keranjang) : Menambahkan item
(Pembayaran) --> (Halaman Checkout) : Mengisi informasi pembayaran
(Melihat Keranjang Belanja) --> (Halaman Keranjang) : Menampilkan daftar produk
@enduml
Deskripsi Visual Elemen UI Berdasarkan Use Case
1.Halaman Login:
Elemen: Form login dengan dua input (email dan password), tombol
login, dan opsi untuk registrasi.
Tampilan: Halaman pertama yang dilihat pengguna untuk masuk ke
aplikasi.
2.Halaman Daftar Produk:
Elemen: Grid produk, gambar produk, nama, harga, filter pencarian, dan
tombol detail produk.
45

46. Tampilan: Menampilkan berbagai produk yang dapat dipilih dan dilihat
lebih lanjut.
3.Halaman Keranjang Belanja:
Elemen: Daftar produk di keranjang, tombol hapus, tombol checkout,
dan ringkasan harga.
Tampilan: Halaman untuk melihat produk yang sudah ditambahkan dan
melanjutkan ke proses pembayaran.
4.Halaman Checkout:
Elemen: Form pengisian alamat pengiriman, informasi pembayaran, dan
tombol konfirmasi.
Tampilan: Halaman akhir untuk memasukkan informasi pembayaran
dan mengonfirmasi pesanan.
Penjelasan:
Login: UI ini harus sederhana dan mudah diakses oleh pengguna yang ingin
masuk ke akun mereka. Halaman ini akan menjadi titik awal sebelum pengguna
dapat mengakses aplikasi lebih lanjut.
Lihat Produk: Halaman ini menampilkan produk-produk yang dapat dipilih oleh
pengguna. Filter dan fitur pencarian membantu pengguna menemukan produk
yang mereka cari.
Tambah ke Keranjang: Tombol "Tambah ke Keranjang" memungkinkan
pengguna untuk memasukkan produk ke dalam keranjang mereka untuk
pembelian selanjutnya.
Pembayaran: UI ini perlu memberikan pengalaman yang mulus, memastikan
pengguna dapat memasukkan informasi pengiriman dan pembayaran tanpa
kebingungan.
Melihat Keranjang Belanja: UI keranjang belanja memungkinkan pengguna
untuk mengecek produk yang sudah dipilih, memperbarui jumlah atau
menghapus item, dan melanjutkan ke checkout.
46

47. 3- Rancang Interaksi Sistem (Interaction Design)
Sequence Diagram
Sequence Diagram adalah salah satu diagram dalam UML (Unified Modeling Language) yang
menggambarkan interaksi antar objek dalam sistem secara urut berdasarkan waktu. Sequence
Diagram digunakan untuk mendeskripsikan bagaimana objek dalam sistem berinteraksi satu
sama lain melalui pesan yang dikirimkan pada urutan waktu tertentu.
Kegunaan dan Fungsi Sequence Diagram:
1.Menjelaskan Alur Proses: Sequence diagram menggambarkan urutan peristiwa atau
alur kerja dalam sebuah proses, yang sangat berguna untuk memvisualisasikan
bagaimana objek berinteraksi dalam rangkaian waktu tertentu. Hal ini memungkinkan
pengembang dan desainer untuk memahami urutan langkah yang harus diambil untuk
mencapai suatu tujuan.
2.Memperjelas Interaksi antar Objek: Sequence diagram membantu untuk
menggambarkan komunikasi antara berbagai entitas dalam sistem, seperti objek, aktor,
atau komponen, serta pesan yang dipertukarkan antara mereka.
3.Meminimalkan Kesalahan Implementasi : Dengan mendokumentasikan alur interaksi
antar objek, sequence diagram dapat meminimalkan potensi kesalahan implementasi
karena pengembang dapat merujuk ke diagram untuk memastikan bahwa urutan
interaksi sudah benar.
4.Mendukung Kolaborasi Tim: Sequence diagram menjadi alat yang efektif untuk
berkomunikasi antar anggota tim, terutama antara pengembang dan desainer,
sehingga mereka bisa lebih mudah memahami bagaimana sebuah fitur bekerja secara
rinci.
5.Mendokumentasikan Fitur Aplikasi: Sequence diagram dapat digunakan untuk
mendokumentasikan fungsi-fungsi penting dalam aplikasi, sehingga memudahkan
pemeliharaan dan pengembangan lebih lanjut.
Contoh Sequence Diagram untuk Aplikasi E-Commerce Web Application
Berikut adalah contoh Sequence Diagram untuk aplikasi E-Commerce, menggambarkan alur
proses "Melakukan Pembelian Produk" oleh seorang pengguna.
Deskripsi Proses:
1.User (aktor) mengakses aplikasi untuk membeli produk.
2.User menambahkan produk ke keranjang.
3.User melanjutkan ke halaman checkout.
4.Sistem memverifikasi informasi pengguna dan pembayaran.
5.User mengonfirmasi pembayaran.
6.Sistem memproses pembayaran dan menampilkan konfirmasi pembelian.
47

48. Sequence Diagram (Format PlantUML)
@startuml
actor User
participant WebApp
participant ProductService
participant CartService
participant PaymentService
User -> WebApp : Buka Halaman Produk
WebApp -> ProductService : Tampilkan Daftar Produk
ProductService -> WebApp : Kirim Daftar Produk
User -> WebApp : Pilih Produk dan Tambah ke Keranjang
WebApp -> CartService : Tambah Produk ke Keranjang
CartService -> WebApp : Kirim Konfirmasi Penambahan Produk
User -> WebApp : Lanjut ke Checkout
WebApp -> CartService : Ambil Detail Keranjang
CartService -> WebApp : Kirim Detail Keranjang
User -> WebApp : Masukkan Alamat dan Pembayaran
WebApp -> PaymentService : Verifikasi Pembayaran
PaymentService -> WebApp : Konfirmasi Pembayaran
User -> WebApp : Konfirmasi Pembayaran
WebApp -> PaymentService : Proses Pembayaran
PaymentService -> WebApp : Konfirmasi Pembayaran Berhasil
WebApp -> User : Tampilkan Konfirmasi Pembelian
@enduml
48

49. Penjelasan Diagram:
1.User: Ini adalah aktor yang berinteraksi dengan sistem.
2.WebApp: Ini adalah aplikasi web yang mengelola interaksi pengguna, menangani
tampilan, dan menghubungkan layanan lainnya.
3.ProductService: Layanan ini bertanggung jawab untuk menyediakan daftar produk
yang tersedia untuk ditampilkan pada halaman produk.
4.CartService: Layanan ini menangani keranjang belanja pengguna, seperti
menambahkan produk ke dalam keranjang dan mengambil detail produk yang ada di
dalam keranjang.
5.PaymentService: Layanan ini memverifikasi dan memproses pembayaran pengguna.
Penjelasan Urutan Interaksi:
1.Buka Halaman Produk:
Pengguna membuka halaman produk di aplikasi web. Aplikasi web kemudian
mengirim permintaan ke ProductService untuk mendapatkan daftar produk.
ProductService mengirimkan daftar produk ke WebApp, yang kemudian
menampilkannya di antarmuka pengguna.
2.Pilih Produk dan Tambah ke Keranjang:
Pengguna memilih produk yang ingin dibeli dan menambahkannya ke
keranjang belanja.
Aplikasi web mengirim permintaan ke CartService untuk menambah produk ke
dalam keranjang.
CartService mengonfirmasi bahwa produk berhasil ditambahkan ke keranjang
dan mengirimkan balasan ke WebApp.
3.Lanjut ke Checkout:
Setelah produk ditambahkan ke keranjang, pengguna melanjutkan ke halaman
checkout.
WebApp meminta detail keranjang dari CartService untuk menampilkan
ringkasan produk yang ada di keranjang kepada pengguna.
4.Masukkan Alamat dan Pembayaran :
Pengguna memasukkan informasi pengiriman dan pembayaran pada halaman
checkout.
WebApp mengirimkan data pembayaran ke PaymentService untuk melakukan
verifikasi.
PaymentService memverifikasi pembayaran dan mengirimkan konfirmasi
kembali ke WebApp.
49

50. 5.Konfirmasi Pembayaran:
Pengguna mengonfirmasi pembayaran untuk melanjutkan proses pembelian.
WebApp mengirimkan perintah ke PaymentService untuk memproses
pembayaran.
PaymentService memproses pembayaran dan mengonfirmasi bahwa
pembayaran berhasil.
6.Tampilkan Konfirmasi Pembelian:
Setelah pembayaran berhasil diproses, WebApp menampilkan konfirmasi
pembelian kepada pengguna.
Communication Diagram
Communication Diagram  (sebelumnya dikenal sebagai Collaboration Diagram) adalah jenis
diagram dalam UML (Unified Modeling Language) yang menggambarkan interaksi antar
objek atau entitas dalam sistem. Diagram komunikasi menekankan pada interaksi antar
objek dan bagaimana pesan-pesan dikirimkan di antara mereka. Berbeda dengan Sequence
Diagram yang menampilkan urutan waktu, Communication Diagram  lebih fokus pada
bagaimana objek berinteraksi satu sama lain, dan mengurutkan pesan dengan nomor untuk
menggambarkan urutan interaksi.
Fungsi dan Kegunaan Communication Diagram:
1.Memvisualisasikan Interaksi: Diagram ini memudahkan pengembang untuk melihat
bagaimana objek atau komponen berkomunikasi untuk menyelesaikan suatu tugas.
2.Meningkatkan Pemahaman Arsitektur Sistem : Dengan menggambarkan komunikasi
antar objek, diagram ini membantu tim untuk memahami bagaimana bagian-bagian
sistem berinteraksi secara keseluruhan.
3.Mendokumentasikan Proses : Communication diagram sering digunakan untuk
mendokumentasikan interaksi antar objek dalam berbagai skenario aplikasi atau
sistem.
4.Menunjukkan Aliran Data dan Kontrol: Diagram ini memvisualisasikan aliran data dan
kontrol antar objek, memberikan gambaran lebih jelas tentang bagaimana operasi
dilakukan.
Perbedaan dengan Sequence Diagram:
Sequence Diagram fokus pada urutan waktu dan menggambarkan interaksi antar
objek berdasarkan urutan waktu.
Communication Diagram  fokus pada hubungan antar objek dan
menggambarkan interaksi antar objek berdasarkan pengiriman pesan, tanpa
memandang urutan waktu yang mendetail.
50

51. Contoh Communication Diagram untuk Aplikasi E-Commerce Web Application
Mari kita lihat contoh Communication Diagram  untuk proses "Melakukan Pembelian
Produk" dalam aplikasi E-Commerce.
Deskripsi Proses:
1.Pengguna memilih produk dan menambahkannya ke keranjang.
2.Pengguna melanjutkan ke halaman checkout untuk memasukkan alamat dan informasi
pembayaran.
3.Sistem memverifikasi pembayaran dan mengonfirmasi pembelian.
Communication Diagram (Format PlantUML)
@startuml
actor User
object WebApp
object ProductService
object CartService
object PaymentService
User -> WebApp : Buka Halaman Produk
WebApp -> ProductService : Tampilkan Daftar Produk
ProductService -> WebApp : Daftar Produk
User -> WebApp : Pilih Produk dan Tambah ke Keranjang
WebApp -> CartService : Tambah Produk ke Keranjang
CartService -> WebApp : Konfirmasi Penambahan Produk
User -> WebApp : Lanjutkan ke Checkout
WebApp -> CartService : Ambil Detail Keranjang
CartService -> WebApp : Kirim Detail Keranjang
User -> WebApp : Masukkan Alamat dan Pembayaran
51

52. WebApp -> PaymentService : Verifikasi Pembayaran
PaymentService -> WebApp : Konfirmasi Pembayaran
User -> WebApp : Konfirmasi Pembayaran
WebApp -> PaymentService : Proses Pembayaran
PaymentService -> WebApp : Pembayaran Berhasil
WebApp -> User : Tampilkan Konfirmasi Pembelian
@enduml
Penjelasan Diagram:
1.User (aktor) adalah pengguna yang berinteraksi dengan aplikasi.
2.WebApp adalah aplikasi web yang berfungsi sebagai penghubung antara
pengguna dan berbagai layanan lainnya.
3.ProductService adalah layanan yang menyediakan data produk untuk
ditampilkan kepada pengguna.
4.CartService menangani keranjang belanja pengguna, seperti menambah
produk ke dalam keranjang dan mengelola konten keranjang.
5.PaymentService adalah layanan yang memverifikasi dan memproses
pembayaran pengguna.
Penjelasan Urutan Interaksi:
1.Buka Halaman Produk:
Pengguna membuka halaman produk, dan  WebApp mengirimkan
permintaan ke ProductService untuk menampilkan daftar produk yang
tersedia.
ProductService mengembalikan daftar produk ke WebApp, yang
kemudian ditampilkan kepada pengguna.
2.Pilih Produk dan Tambah ke Keranjang:
Pengguna memilih produk yang ingin dibeli dan menambahkannya ke
dalam keranjang belanja.
WebApp mengirimkan permintaan ke CartService untuk menambahkan
produk ke dalam keranjang.
52

53. CartService mengonfirmasi bahwa produk berhasil ditambahkan dan
mengirimkan balasan ke WebApp.
3.Lanjutkan ke Checkout:
Setelah produk ditambahkan ke keranjang, pengguna melanjutkan ke
halaman checkout.
WebApp mengirimkan permintaan ke CartService untuk mengambil
detail keranjang belanja pengguna.
CartService mengirimkan data keranjang (produk, jumlah, harga)
ke WebApp.
4.Masukkan Alamat dan Pembayaran :
Pengguna memasukkan alamat pengiriman dan informasi pembayaran.
WebApp mengirimkan data pembayaran ke PaymentService untuk
memverifikasi informasi pembayaran.
PaymentService mengirimkan konfirmasi pembayaran kembali
ke WebApp.
5.Konfirmasi Pembayaran:
Pengguna mengonfirmasi pembayaran untuk melanjutkan ke proses
pembelian.
WebApp mengirimkan permintaan ke PaymentService untuk
memproses pembayaran.
PaymentService memproses pembayaran dan mengirimkan konfirmasi
bahwa pembayaran berhasil.
6.Tampilkan Konfirmasi Pembelian:
Setelah pembayaran berhasil diproses, WebApp menampilkan
konfirmasi pembelian kepada pengguna.
53

54. 4-Rancang Perilaku Sistem (Behavioral Design)
Behavioral design dalam konteks rekayasa perangkat lunak atau desain sistem
merujuk pada pendekatan untuk merancang dan mendokumentasikan  perilaku
sistem atau interaksi antar objek dalam sistem tersebut. Fokus dari behavioral
design adalah untuk memastikan bahwa sistem berfungsi dengan cara yang
diinginkan dan memenuhi persyaratan yang telah ditetapkan dalam hal interaksi,
respons, dan alur kerja.
Dalam desain perangkat lunak, perilaku mengacu pada bagaimana objek, entitas,
atau komponen berinteraksi satu sama lain dalam konteks aplikasi atau
sistem. Behavioral design tidak hanya mengatur apa yang dilakukan oleh sistem
(fungsi atau logika bisnis), tetapi juga bagaimana sistem bereaksi terhadap peristiwa,
input, atau kondisi tertentu.
Elemen Kunci dari Behavioral Design:
1.Interaksi antara objek: Behavioral design memodelkan interaksi antara
berbagai objek dalam sistem untuk mencapai hasil tertentu.
2.Alur kerja (workflow): Merancang bagaimana data atau kontrol mengalir
melalui berbagai komponen atau objek dalam sistem untuk mencapai tujuan.
3.Perilaku dinamis: Menentukan bagaimana sistem akan merespon perubahan
keadaan atau input yang diterima, baik oleh pengguna atau komponen lain.
4.State transitions: Desain ini juga mencakup bagaimana suatu objek beralih
dari satu status ke status lainnya selama siklus hidup objek tersebut.
Alat atau Diagram dalam Behavioral Design:
Untuk menggambarkan dan menganalisis perilaku sistem, sering digunakan beberapa
jenis diagram dalam UML (Unified Modeling Language) yang termasuk dalam
kategori behavioral diagrams:
1.Use Case Diagram: Untuk menggambarkan bagaimana aktor (pengguna atau
sistem eksternal) berinteraksi dengan sistem melalui kasus penggunaan.
2.Sequence Diagram: Menggambarkan urutan interaksi antar objek untuk
memenuhi suatu kasus penggunaan.
3.Activity Diagram: Menggambarkan alur kerja atau proses bisnis, sering
digunakan untuk menggambarkan langkah-langkah dalam sebuah alur kerja.
4.State Diagram: Menunjukkan bagaimana objek beralih antar status selama
interaksi atau siklus hidup objek.
54

55. 5.Communication Diagram : Fokus pada interaksi antar objek dalam urutan
waktu tertentu, tetapi lebih mengutamakan hubungan antar objek daripada
urutan waktu.
6.Interaction Overview Diagram: Memvisualisasikan alur interaksi antar objek
dalam konteks skenario tertentu.
Contoh Behavioral Design dalam Aplikasi:
Untuk aplikasi e-commerce, behavioral design bisa mencakup:
Proses Pembelian: Menggambarkan bagaimana pengguna memilih produk,
menambahkannya ke keranjang, kemudian melakukan pembayaran. Desain ini
menggambarkan urutan dan interaksi antara objek seperti pengguna,
keranjang belanja, sistem pembayaran, dan sistem konfirmasi.
Pengelolaan Status Produk: Misalnya, status produk bisa berubah dari
"Tersedia" ke "Stok Habis" atau "Tunggu Pembayaran". Desain perilaku ini akan
memodelkan peralihan status produk tersebut berdasarkan berbagai peristiwa
dalam sistem.
Kenapa Behavioral Design Penting?
Meningkatkan Klarifikasi Fungsi Sistem: Membantu para pengembang
memahami bagaimana sistem harus merespons berbagai input dan kondisi.
Mengurangi Kompleksitas: Membantu memecah sistem besar menjadi
komponen-komponen yang lebih kecil dan lebih mudah dipahami.
Menjamin Kinerja dan Keandalan: Memastikan bahwa interaksi antar objek
dan komponen dilakukan secara efisien, tanpa bug atau perilaku yang tidak
diinginkan.
Dengan kata lain, behavioral design berfokus pada perencanaan bagaimana aplikasi
atau sistem akan berperilaku secara dinamis selama siklus hidupnya.
55

56. State Diagram
State Diagram (atau State Machine Diagram) adalah salah satu jenis diagram
dalam UML (Unified Modeling Language) yang menggambarkan perubahan status
atau kondisi suatu objek atau entitas dalam sistem seiring berjalannya waktu.
Diagram ini digunakan untuk menggambarkan bagaimana suatu objek bertransisi
antara satu status ke status lainnya berdasarkan peristiwa atau aksi tertentu.
State diagram sangat berguna untuk menggambarkan behavior objek yang
bergantung pada status atau kondisi tertentu, serta peralihan antar status
berdasarkan input atau peristiwa tertentu yang terjadi.
Elemen-elemen dari State Diagram:
1.States (Status): Menunjukkan kondisi atau status tertentu yang dialami objek
selama siklus hidupnya.
2.Transitions (Peralihan): Menunjukkan perubahan status objek, sering kali
dipicu oleh peristiwa atau aksi tertentu.
3.Events (Peristiwa): Peristiwa yang menyebabkan objek berpindah dari satu
status ke status lainnya.
4.Actions: Tindakan yang terjadi saat transisi atau ketika objek berada dalam
status tertentu.
5.Initial and Final States: Titik awal dan akhir dari status objek dalam siklus
hidupnya.
Kenapa State Diagram Penting?
Membantu memodelkan dinamika sistem : State diagram memberikan
gambaran yang jelas tentang bagaimana objek berubah dari satu status ke
status lainnya.
Menjelaskan peralihan kondisi objek: Sangat berguna untuk
menggambarkan objek yang memiliki berbagai kondisi atau status, seperti
pesanan yang berada di aplikasi e-commerce, yang bisa memiliki berbagai
status (misalnya, "Dalam Proses", "Tunggu Pembayaran", "Terkirim").
Meningkatkan pemahaman interaksi : Memudahkan pengembang
memahami bagaimana sistem merespons berbagai peristiwa atau input
berdasarkan kondisi tertentu.
Contoh State Diagram untuk Aplikasi E-Commerce Web Application
56

57. Mari kita lihat contoh State Diagram untuk objek Pesanan (Order) dalam aplikasi e-
commerce. Diagram ini menggambarkan perubahan status pesanan berdasarkan
peristiwa yang terjadi selama siklus hidupnya.
Deskripsi Proses:
1.Order Created (Pesanan Dibuat): Status awal pesanan saat pengguna
menambahkannya ke keranjang dan melakukan checkout.
2.Pending Payment (Menunggu Pembayaran): Pesanan menunggu konfirmasi
pembayaran dari pengguna.
3.Payment Confirmed (Pembayaran Terkonfirmasi): Pesanan telah dibayar dan
siap untuk diproses.
4.Shipped (Dikirim): Pesanan telah dikirimkan ke alamat pengguna.
5.Delivered (Terkirim): Pesanan telah sampai dan diterima oleh pengguna.
6.Cancelled (Dibatalkan): Pesanan dibatalkan oleh pengguna atau sistem.
State Diagram (Format PlantUML)
@startuml
[*] --> OrderCreated
OrderCreated --> PendingPayment : Order Placed
PendingPayment --> PaymentConfirmed : Payment Processed
PaymentConfirmed --> Shipped : Order Processed
Shipped --> Delivered : Order Delivered
PendingPayment --> Cancelled : Payment Failed
PaymentConfirmed --> Cancelled : Payment Rejected
Shipped --> Cancelled : Order Returned
Delivered --> [*] : Order Complete
Cancelled --> [*] : Order Canceled
@enduml
Penjelasan Diagram:
1.[ * ]: Titik awal dan akhir dalam siklus hidup pesanan.
2.OrderCreated (Pesanan Dibuat): Ini adalah status awal saat pengguna
menambahkan barang ke dalam keranjang dan melanjutkan untuk checkout.
57

58. Transisi ke PendingPayment saat pesanan sudah ditempatkan dan
menunggu pembayaran.
3.PendingPayment (Menunggu Pembayaran): Pesanan berada dalam status
menunggu pembayaran.
Jika pembayaran berhasil diproses, pesanan berpindah
ke PaymentConfirmed.
Jika pembayaran gagal, pesanan dibatalkan dan berpindah ke Cancelled.
4.PaymentConfirmed (Pembayaran Terkonfirmasi): Setelah pembayaran
dikonfirmasi, pesanan siap diproses.
Pesanan berpindah ke Shipped setelah diproses dan dikirim.
Jika terjadi masalah dengan pembayaran (misalnya pembayaran ditolak),
status pesanan berpindah ke Cancelled.
5.Shipped (Dikirim): Pesanan sedang dalam proses pengiriman.
Setelah pesanan berhasil dikirim, status pesanan berpindah
ke Delivered.
Jika pengguna mengembalikan pesanan, status akan berpindah
ke Cancelled.
6.Delivered (Terkirim): Pesanan berhasil sampai dan diterima oleh pengguna. Ini
adalah titik akhir dari siklus hidup pesanan.
7.Cancelled (Dibatalkan): Status ini terjadi jika pesanan dibatalkan di berbagai
tahap proses (baik saat menunggu pembayaran, pembayaran gagal, atau
pengembalian pesanan).
Kesimpulan
State Diagram ini menggambarkan bagaimana status objek Pesanan (Order) dalam
aplikasi e-commerce berubah seiring berjalannya waktu, berdasarkan peristiwa dan
aksi yang terjadi pada setiap tahapannya. Diagram ini memberikan gambaran yang
jelas tentang bagaimana pesanan beralih antar status, seperti "Pesanan Dibuat",
"Menunggu Pembayaran", "Pembayaran Terkonfirmasi", "Dikirim", dan akhirnya
"Terkirim" atau "Dibatalkan".
58

59. Activity Diagram
Activity Diagram adalah jenis diagram dalam UML (Unified Modeling
Language) yang menggambarkan alur proses kerja atau aktivitas dalam suatu
sistem. Diagram ini memodelkan urutan kegiatan, keputusan, kondisi paralel,
dan transisi antar aktivitas dalam suatu proses bisnis atau alur kerja. Activity
Diagram sering digunakan untuk memodelkan fungsi dinamis dari sistem, dengan
fokus pada flow of control (alur kontrol) dan flow of data (alur data) selama proses
tertentu.
Activity Diagram sangat berguna untuk menggambarkan:
Proses bisnis yang dilakukan oleh berbagai aktor atau komponen dalam
sistem.
Langkah-langkah atau aktivitas yang harus diselesaikan untuk mencapai
tujuan tertentu.
Keputusan atau cabang dalam alur kerja berdasarkan kondisi tertentu.
Paralelisme dalam alur kerja (misalnya aktivitas yang berjalan bersamaan).
Elemen-elemen dalam Activity Diagram:
1.Initial Node: Titik awal dari diagram yang menandakan mulai dari aktivitas
pertama.
2.Activity/Action States: Aktivitas atau langkah-langkah dalam alur kerja.
3.Decision Nodes: Titik keputusan yang memecah alur kerja menjadi dua atau
lebih cabang berdasarkan kondisi tertentu.
4.Merge Nodes: Menggabungkan beberapa cabang menjadi satu alur kerja.
5.Fork Nodes: Menunjukkan aktivitas paralel yang dapat terjadi secara
bersamaan.
6.Join Nodes: Menggabungkan aktivitas paralel yang sebelumnya terpisah.
7.Final Node: Titik akhir dari diagram yang menunjukkan akhir dari alur kerja.
8.Transitions: Garis yang menghubungkan aktivitas atau keputusan, yang
menunjukkan alur eksekusi.
Kenapa Activity Diagram Penting?
Menggambarkan alur proses secara jelas: Memudahkan untuk memahami
langkah-langkah yang perlu dilakukan dalam suatu proses atau aktivitas.
59

60. Memodelkan paralelisme dan keputusan : Menunjukkan bagaimana beberapa
aktivitas bisa dilakukan secara bersamaan (paralel) atau bagaimana keputusan
dapat mempengaruhi alur proses.
Mempermudah komunikasi : Activity diagram dapat digunakan untuk
menjelaskan alur kerja kepada pemangku kepentingan yang non-teknis.
Contoh Activity Diagram untuk Aplikasi E-Commerce Web Application
Mari kita lihat contoh Activity Diagram untuk proses "Melakukan Pembelian
Produk" dalam aplikasi e-commerce. Diagram ini menggambarkan langkah-langkah
yang dilakukan oleh pengguna dan sistem untuk menyelesaikan pembelian.
Deskripsi Proses:
1.Pengguna memilih produk dan menambahkannya ke keranjang belanja.
2.Pengguna melanjutkan ke halaman checkout dan memasukkan alamat serta
informasi pembayaran.
3.Sistem memverifikasi pembayaran dan mengonfirmasi pembelian.
4.Jika pembayaran diterima, pesanan diproses dan dikirim.
5.Pengguna menerima konfirmasi pembelian.
Activity Diagram (Format PlantUML)
@startuml
|User|
start
:Browse Products;
:Select Product;
:Add to Cart;
:Proceed to Checkout;
|System|
:Display Cart;
:Enter Shipping Information;
:Enter Payment Details;
:Verify Payment;
|User|
60

61. :Confirm Payment;
|System|
:Process Payment;
:Confirm Purchase;
:Ship Order;
|User|
:Receive Confirmation;
stop
@enduml
Penjelasan Diagram:
1.[User]: Aktor yang berinteraksi dengan sistem (pengguna aplikasi).
2.Start: Titik awal dari proses pembelian.
3.Browse Products: Pengguna mulai menjelajah produk yang tersedia di aplikasi.
4.Select Product: Pengguna memilih produk yang ingin dibeli.
5.Add to Cart: Pengguna menambahkan produk yang dipilih ke dalam keranjang
belanja.
6.Proceed to Checkout: Setelah produk ditambahkan, pengguna melanjutkan ke
halaman checkout untuk menyelesaikan pembelian.
7.Display Cart: Sistem menampilkan keranjang belanja kepada pengguna yang
berisi produk yang telah dipilih.
8.Enter Shipping Information: Pengguna memasukkan informasi alamat
pengiriman.
9.Enter Payment Details: Pengguna memasukkan informasi pembayaran.
10.Verify Payment: Sistem memverifikasi apakah pembayaran yang dimasukkan
valid dan dapat diproses.
11.Confirm Payment: Pengguna mengonfirmasi pembayaran.
12.Process Payment: Sistem memproses pembayaran pengguna.
13.Confirm Purchase: Sistem mengonfirmasi bahwa pembelian berhasil dan akan
diproses.
14.Ship Order: Sistem mengirimkan produk yang telah dibeli ke alamat pengguna.
61

62. 15.Receive Confirmation: Pengguna menerima konfirmasi pembelian yang berisi
informasi pesanan dan pengiriman.
16.Stop: Proses selesai, dan pengguna mendapatkan konfirmasi pembelian.
Kesimpulan
Activity Diagram ini menggambarkan alur langkah-langkah yang dilakukan oleh
pengguna dan sistem dalam proses pembelian produk pada aplikasi e-commerce.
Diagram ini memperlihatkan bagaimana alur eksekusi berpindah dari satu aktivitas ke
aktivitas lainnya, termasuk interaksi antara pengguna dan sistem.
Dengan menggunakan Activity Diagram, kita dapat lebih mudah
menggambarkan proses bisnis secara visual, membantu pengembang dan pemangku
kepentingan lainnya memahami bagaimana setiap langkah dalam proses pembelian
dilakukan, serta bagaimana sistem merespons input dari pengguna.
62

63. 5-IMPLEMENTASI SISTEM
Peran Class Diagram dan Sequence Diagram dalam Implementasi Sistem
Dalam pengembangan perangkat lunak, Class Diagram dan Sequence
Diagram memainkan peran yang sangat penting untuk menggambarkan struktur dan
interaksi objek dalam suatu sistem. Keduanya digunakan dalam fase desain dan
implementasi untuk memastikan bahwa sistem dapat diimplementasikan dengan cara
yang terstruktur dan efektif.
1. Class Diagram
Class Diagram menggambarkan struktur statis dari sistem dan merupakan fondasi
dasar dalam object-oriented design (OOD). Diagram ini menunjukkan berbagai kelas
(class) dalam sistem, atribut-atributnya, metode (fungsi) yang dimiliki, serta hubungan
antar kelas tersebut.
Peran dalam Implementasi Sistem:
Mendeskripsikan Struktur Data: Class diagram membantu dalam
mendefinisikan bagaimana data disimpan dan diorganisasikan dalam sistem.
Setiap kelas menggambarkan entitas yang akan diimplementasikan dalam
kode, dengan atribut yang menyimpan data dan metode yang menyediakan
operasi terkait data.
Membantu Pengkodean Kelas : Dalam implementasi sistem, class diagram
menjadi pedoman untuk mendefinisikan kelas-kelas dalam kode, atribut-
atributnya, dan hubungan antar kelas. Kode untuk kelas-kelas ini, bersama
dengan relasi antar kelas (misalnya asosiasi, pewarisan, dan agregasi), dapat
langsung diimplementasikan berdasarkan diagram tersebut.
Menjamin Konsistensi: Class diagram membantu pengembang memastikan
bahwa struktur data dan interaksi antar objek didefinisikan dengan jelas dan
konsisten. Jika ada perubahan dalam desain sistem, class diagram dapat
diperbarui untuk mencerminkan perubahan tersebut, yang kemudian
diperbarui juga dalam kode.
Mendukung Pemeliharaan Sistem : Class diagram juga berguna saat
melakukan pemeliharaan sistem, karena diagram ini memberikan gambaran
yang jelas tentang bagaimana kelas dan objek berinteraksi di dalam sistem,
sehingga memudahkan perbaikan atau penambahan fitur.
Contoh Penggunaan:
Misalnya, dalam sistem e-commerce, class diagram dapat menggambarkan entitas
seperti:
Produk (Product): dengan atribut nama, harga, dan stok, serta
metode updateStock().
63

64. Pesanan (Order): dengan atribut tanggal, status, dan totalHarga, serta
metode calculateTotal().
Relasi antar kelas, seperti kelas User yang memiliki hubungan dengan
kelas Order (satu pengguna bisa memiliki banyak pesanan), dapat digambarkan
dengan asosiasi dalam class diagram.
2. Sequence Diagram
Sequence Diagram menggambarkan interaksi dinamis antara objek dalam sistem
berdasarkan urutan waktu. Diagram ini memodelkan bagaimana objek berkomunikasi
satu sama lain untuk menyelesaikan suatu tugas tertentu, serta bagaimana pesan atau
metode dipanggil antar objek secara berurutan.
Peran dalam Implementasi Sistem:
Menunjukkan Interaksi Antar Objek: Sequence diagram memberikan
gambaran yang jelas tentang bagaimana objek-objek dalam sistem berinteraksi
dalam urutan waktu. Ini membantu pengembang memahami bagaimana
metode atau operasi dipanggil antara objek untuk melaksanakan
fungsionalitas.
Menggambarkan Proses Eksekusi : Sequence diagram sangat berguna dalam
menggambarkan bagaimana  fungsi atau operasi sistem dieksekusi secara
berurutan dan bagaimana pesan dikirim antar objek dalam alur eksekusi
tertentu.
Menunjukkan Alur Kerja Dinamis: Diagram ini menggambarkan alur
logika dari aplikasi, yang dapat sangat membantu dalam implementasi karena
memberikan panduan tentang bagaimana berbagai komponen sistem
berinteraksi untuk menghasilkan hasil yang diinginkan.
Menyederhanakan Debugging dan Pemeliharaan : Sequence diagram
membantu dalam debugging dan pemeliharaan sistem karena diagram ini
memungkinkan pengembang untuk melacak alur interaksi antara objek, yang
dapat mengungkapkan potensi masalah dalam logika interaksi objek.
Contoh Penggunaan:
Misalnya, dalam proses checkout di aplikasi e-commerce, sequence diagram dapat
menunjukkan langkah-langkah berikut:
1.Pengguna memilih produk dan menambahkannya ke keranjang.
2.Pengguna melanjutkan ke checkout.
3.Sistem meminta informasi pembayaran dari Pengguna.
64

65. 4.Pengguna mengonfirmasi informasi pembayaran, dan Sistem memverifikasi
pembayaran.
5.Sistem mengonfirmasi pesanan dan mengirimkan produk ke Pengguna.
Pada sequence diagram, kita akan melihat bagaimana objek Pengguna, Sistem
Pembayaran, Keranjang Belanja, dan Sistem Pengiriman berinteraksi dalam urutan
waktu yang terdefinisi.
Kombinasi Keduanya dalam Implementasi Sistem
Class Diagram dan Sequence Diagram saling melengkapi dalam implementasi sistem
perangkat lunak:
1.Class Diagram memberikan dasar tentang struktur dan hubungan antara objek
dalam sistem. Pengembang dapat merujuk class diagram untuk menentukan
kelas-kelas yang perlu diimplementasikan dalam kode dan relasi antar kelas.
2.Sequence Diagram mengilustrasikan bagaimana objek berinteraksi satu sama
lain dalam eksekusi fungsionalitas sistem. Setelah kelas-kelas didefinisikan
dalam class diagram, sequence diagram menggambarkan bagaimana metode
atau fungsi dalam kelas tersebut dipanggil dan bagaimana objek
berkomunikasi.
Keduanya sangat penting untuk:
Memastikan konsistensi desain: Class diagram menunjukkan struktur data,
sementara sequence diagram menunjukkan bagaimana data dan fungsionalitas
bergerak dalam sistem.
Memfasilitasi implementasi dan pengujian: Keduanya menyediakan panduan
yang jelas untuk pengembang, membantu mereka dalam menulis kode,
menguji, dan memelihara sistem.
Kesimpulan
Class Diagram mendefinisikan struktur statis sistem, menggambarkan
bagaimana objek diorganisasi dan berinteraksi dalam hal atribut dan metode.
Sequence Diagram menggambarkan interaksi dinamis antar objek
berdasarkan urutan waktu, memvisualisasikan bagaimana objek saling
berkomunikasi untuk menyelesaikan sebuah tugas atau proses.
Keduanya bersama-sama membantu dalam  desain sistem, memberikan panduan
yang jelas tentang bagaimana struktur dan interaksi objek diimplementasikan dalam
kode dan bagaimana fungsionalitas sistem akan dieksekusi.
65

66. Class Diagram TO Code
Untuk mengubah Class Diagram menjadi kode program dalam sebuah aplikasi E-
Commerce Web Application, kita akan mulai dengan sebuah class diagram
sederhana yang menggambarkan entitas penting dalam aplikasi e-commerce
seperti User, Product, dan Order. Kemudian, kita akan menggunakan bahasa
pemrograman objektif (misalnya, PHP atau Java), untuk mengimplementasikan kelas-
kelas tersebut dalam bentuk kode.
Contoh Class Diagram Sederhana
Berikut adalah class diagram sederhana untuk aplikasi e-commerce:
User
Atribut:
id (int)
name (string)
email (string)
Metode:
createAccount()
login()
Product
Atribut:
productId (int)
name (string)
price (float)
stock (int)
Metode:
updateStock()
getDetails()
Order
Atribut:
orderId (int)
userId (int)
66

67. productList (array)
totalPrice (float)
Metode:
addProduct()
calculateTotal()
placeOrder()
Diagram dalam PlantUML (untuk referensi)
@startuml
class User {
+int id
+string name
+string email
+createAccount()
+login()
}
class Product {
+int productId
+string name
+float price
+int stock
+updateStock()
+getDetails()
}
class Order {
+int orderId
+int userId
+array productList
67

68. +float totalPrice
+addProduct()
+calculateTotal()
+placeOrder()
}
User "1" -- "many" Order : places
Order "many" -- "many" Product : contains
@enduml
Langkah Mengubah Class Diagram menjadi Kode Program
Mari kita mulai dengan mengimplementasikan class User, Product,
dan Order dalam PHP.
1. User Class
<?php
class User {
public $id;
public $name;
public $email;
// Constructor
public function __construct($id, $name, $email) {
$this->id = $id;
$this->name = $name;
$this->email = $email;
}
// Method to create an account
68

69. public function createAccount($name, $email) {
// Normally would save this to a database
echo "Account created for: $name with email $email\n";
}
// Method to login
public function login($email, $password) {
// Logic to verify email and password
echo "User $email logged in.\n";
}
}
?>
2. Product Class
<?php
class Product {
public $productId;
public $name;
public $price;
public $stock;
// Constructor
public function __construct($productId, $name, $price, $stock) {
$this->productId = $productId;
$this->name = $name;
$this->price = $price;
$this->stock = $stock;
69

70. }
// Method to update stock
public function updateStock($quantity) {
$this->stock -= $quantity; // Deduct from available stock
echo "Updated stock for product {$this->name}. Remaining stock: {$this->stock}\
n";
}
// Method to display product details
public function getDetails() {
return "Product: $this->name, Price: $this->price, Stock: $this->stock";
}
}
?>
3. Order Class
<?php
class Order {
public $orderId;
public $userId;
public $productList = [];
public $totalPrice = 0;
// Constructor
public function __construct($orderId, $userId) {
$this->orderId = $orderId;
$this->userId = $userId;
}
70

71. // Method to add product to order
public function addProduct(Product $product, $quantity) {
$this->productList[] = ['product' => $product, 'quantity' => $quantity];
$this->totalPrice += $product->price * $quantity;
}
// Method to calculate total price
public function calculateTotal() {
return $this->totalPrice;
}
// Method to place an order
public function placeOrder() {
echo "Order placed. Total Price: {$this->totalPrice}\n";
// Logic to save the order to a database
}
}
?>
Penjelasan Kode:
User Class: Kelas ini memiliki atribut id, name, dan email.
Metode createAccount() digunakan untuk membuat akun baru, dan
metode login() memungkinkan pengguna untuk login.
Product Class: Kelas ini berfungsi untuk mendeskripsikan produk dengan
atribut productId, name, price, dan stock. Metode updateStock() digunakan
untuk memperbarui stok produk, dan metode getDetails() digunakan untuk
menampilkan informasi produk.
Order Class: Kelas ini mendeskripsikan sebuah order (pesanan). Atribut-
atributnya termasuk orderId, userId, productList (daftar produk yang dipesan),
dan totalPrice (total harga pesanan). Metode addProduct() memungkinkan
produk ditambahkan ke dalam pesanan, calculateTotal() menghitung total
harga pesanan, dan placeOrder() menyelesaikan pemesanan.
71

72. 4. Contoh Penggunaan Kelas dalam Aplikasi E-Commerce
Berikut adalah contoh bagaimana kita bisa menggunakan kelas-kelas tersebut dalam
sebuah aplikasi web.
<?php
// Membuat objek User
$user = new User(1, "John Doe", "[email protected]");
// Membuat objek Product
$product1 = new Product(101, "Laptop", 1500, 10);
$product2 = new Product(102, "Smartphone", 800, 5);
// Membuat objek Order
$order = new Order(1, $user->id);
// Menambah produk ke pesanan
$order->addProduct($product1, 2); // Menambahkan 2 Laptop ke pesanan
$order->addProduct($product2, 1); // Menambahkan 1 Smartphone ke pesanan
// Menghitung total harga
$total = $order->calculateTotal();
echo "Total Order Price: $total\n";
// Memproses pesanan
$order->placeOrder();
// Mengupdate stok produk setelah pesanan
$product1->updateStock(2);
72

73. $product2->updateStock(1);
?>
Penjelasan Implementasi:
Instansiasi User, Product, dan Order: Kita membuat objek User, Product,
dan Order sesuai dengan data yang relevan.
Menambahkan Produk ke Pesanan : Kita menggunakan
metode addProduct() untuk menambahkan produk ke dalam pesanan dan
menghitung total harga menggunakan calculateTotal().
Menyelesaikan Pesanan: Setelah pesanan dihitung, kita
memanggil placeOrder() untuk menyelesaikan pemesanan.
Update Stok: Setelah pesanan berhasil, stok produk diperbarui menggunakan
metode updateStock().
Kesimpulan:
Proses mengubah class diagram menjadi kode program  melibatkan penerjemahan
struktur dan hubungan yang digambarkan dalam diagram kelas ke dalam kode nyata
dalam bahasa pemrograman yang dipilih. Dalam contoh ini, kita mengubah
kelas User, Product, dan Order dari class diagram menjadi implementasi PHP, yang
menggambarkan bagaimana entitas tersebut berinteraksi dalam sistem e-commerce
nyata.
73

74. Sequence Diagram TO Code
Mengubah Sequence Diagram menjadi kode program adalah langkah penting dalam
mengimplementasikan alur interaksi objek secara dinamis yang telah digambarkan
dalam diagram. Dalam contoh ini, kita akan menggunakan sequence diagram untuk
menggambarkan alur transaksi pemesanan produk dalam aplikasi E-Commerce Web
Application dan kemudian menerjemahkannya ke dalam  kode program.
1. Contoh Sequence Diagram untuk Proses Pemesanan Produk
Di bawah ini adalah contoh sequence diagram untuk proses pemesanan produk
dalam aplikasi E-Commerce:
Aktor: Pengguna
Objek: Produk, Keranjang Belanja, Pemesanan (Order), Pembayaran
Sequence Diagram (PlantUML)
@startuml
actor User
participant "Product" as Product
participant "Shopping Cart" as Cart
participant "Order" as Order
participant "Payment" as Payment
User -> Product: Select product
Product -> Cart: Add product to cart
Cart -> User: Display cart details
User -> Cart: Proceed to checkout
Cart -> Order: Create order
Order -> Cart: Get product details
Order -> Order: Calculate total price
Order -> Payment: Request payment details
Payment -> User: Enter payment details
74

75. Payment -> Order: Confirm payment
Order -> Cart: Update stock
Order -> User: Confirm order
@enduml
Penjelasan Sequence Diagram:
User memilih produk dari Product.
Produk ditambahkan ke Cart oleh User.
User melanjutkan untuk melakukan checkout, yang mengarah ke
pembuatan Order.
Order memproses informasi produk dari Cart, menghitung total harga, dan
meminta informasi pembayaran ke Payment.
Payment memverifikasi pembayaran dan mengonfirmasi transaksi.
Setelah transaksi selesai, Order memperbarui stok produk di Cart dan
mengonfirmasi pesanan ke User.
2. Mengubah Sequence Diagram menjadi Kode Program
Mari kita implementasikan alur yang digambarkan dalam sequence diagram ke
dalam kode PHP untuk aplikasi e-commerce.
1. Class User
class User {
public $id;
public $name;
public $email;
// Constructor
public function __construct($id, $name, $email) {
$this->id = $id;
$this->name = $name;
75

76. $this->email = $email;
}
// Method to select a product
public function selectProduct(Product $product) {
echo "User selected product: " . $product->name . "\n";
}
}
2. Class Product
php
Salin kode
class Product {
public $productId;
public $name;
public $price;
public $stock;
// Constructor
public function __construct($productId, $name, $price, $stock) {
$this->productId = $productId;
$this->name = $name;
$this->price = $price;
$this->stock = $stock;
}
// Method to get product details
public function getDetails() {
return "Product: {$this->name}, Price: {$this->price}, Stock: {$this->stock}";
76

77. }
}
3. Class Cart
class Cart {
public $items = [];
// Add product to cart
public function addProduct(Product $product) {
$this->items[] = $product;
echo "{$product->name} added to cart.\n";
}
// Display cart details
public function displayCart() {
foreach ($this->items as $item) {
echo $item->getDetails() . "\n";
}
}
}
4. Class Order
class Order {
public $orderId;
public $userId;
public $productList = [];
public $totalPrice = 0;
// Constructor
public function __construct($orderId, $userId) {
77

78. $this->orderId = $orderId;
$this->userId = $userId;
}
// Add product to order
public function addProduct(Product $product) {
$this->productList[] = $product;
$this->totalPrice += $product->price;
}
// Calculate total price
public function calculateTotal() {
return $this->totalPrice;
}
// Process the order
public function processOrder() {
echo "Order placed. Total price: {$this->totalPrice}\n";
}
}
5. Class Payment
class Payment {
// Method to request payment details
public function requestPaymentDetails() {
echo "Requesting payment details...\n";
}
// Method to confirm payment
public function confirmPayment(Order $order) {
78

79. echo "Payment confirmed for order ID: {$order->orderId}\n";
}
}
3. Contoh Penggunaan Kelas dalam Aplikasi E-Commerce
Berikut adalah contoh bagaimana kita menggunakan kelas-kelas tersebut untuk
memproses pemesanan produk berdasarkan sequence diagram yang telah dijelaskan.
<?php
// Membuat objek User
$user = new User(1, "John Doe", "[email protected]");
// Membuat objek Produk
$product1 = new Product(101, "Laptop", 1500, 10);
$product2 = new Product(102, "Smartphone", 800, 5);
// Membuat objek Keranjang Belanja
$cart = new Cart();
$cart->addProduct($product1); // Menambahkan Laptop ke keranjang
$cart->addProduct($product2); // Menambahkan Smartphone ke keranjang
// Menampilkan detil keranjang
$cart->displayCart();
// Membuat objek Order
$order = new Order(1, $user->id);
// Menambahkan produk ke pesanan
$order->addProduct($product1);
$order->addProduct($product2);
79

80. // Menghitung total harga
$total = $order->calculateTotal();
echo "Total order price: $total\n";
// Membuat objek Payment
$payment = new Payment();
// Meminta detail pembayaran
$payment->requestPaymentDetails();
// Mengonfirmasi pembayaran
$payment->confirmPayment($order);
// Memproses pesanan
$order->processOrder();
// Mengupdate stok produk setelah pemesanan
$product1->stock -= 1; // Stok Laptop berkurang 1
$product2->stock -= 1; // Stok Smartphone berkurang 1
?>
Penjelasan Kode:
1.User memilih produk: User memilih produk dari Product dan
menambahkannya ke Cart.
2.Cart menampilkan detil keranjang: Cart menampilkan produk yang ada
dalam keranjang dengan menggunakan metode  displayCart().
3.Order dibuat: Ketika pengguna melanjutkan ke checkout, objek Order dibuat,
dan produk yang dipilih ditambahkan ke dalam pesanan menggunakan
metode addProduct().
4.Total dihitung: Setelah produk ditambahkan, total harga dihitung
menggunakan metode calculateTotal().
80

81. 5.Pembayaran diproses: Setelah total dihitung, Payment mengonfirmasi detail
pembayaran dengan metode requestPaymentDetails() dan kemudian
mengonfirmasi pembayaran menggunakan  confirmPayment().
6.Pesanan diproses: Setelah pembayaran diterima, pesanan diproses dan stok
produk diperbarui.
Kesimpulan:
Mengubah Sequence Diagram menjadi kode program melibatkan penerjemahan
interaksi antar objek (seperti yang digambarkan dalam diagram) ke dalam
implementasi kode yang menggambarkan alur dinamis dari sistem. Dalam contoh
aplikasi E-Commerce ini, kita melihat bagaimana berbagai objek (User, Product, Cart,
Order, dan Payment) berinteraksi untuk memproses transaksi pemesanan produk.
Dengan demikian, sequence diagram memberikan panduan tentang urutan eksekusi
dan interaksi objek yang harus diimplementasikan dalam kode program.
81

82. 6-Pengujian dan Verifikasi (Testing and Validation)
Peran Sequence Diagram dan Activity Diagram dalam Testing and Validation:
Sequence Diagram dan Activity Diagram adalah dua jenis diagram dalam UML yang
memberikan gambaran visual mengenai bagaimana alur sistem bekerja, yang sangat
berguna dalam tahap testing dan validation dari pengembangan perangkat lunak.
Berikut adalah peran masing-masing diagram dalam konteks testing dan validation:
1. Sequence Diagram dalam Testing and Validation
Sequence Diagram menggambarkan interaksi antara objek-objek dalam sistem
sepanjang waktu, menunjukkan urutan pesan yang dikirim antara objek dalam suatu
skenario tertentu.
Peran dalam Testing:
Memvalidasi Logika Alur Proses: Sequence diagram membantu tester untuk
memverifikasi bahwa urutan tindakan (atau panggilan metode) dalam aplikasi
mengikuti alur yang diharapkan. Dengan memvisualisasikan interaksi antar objek,
tester bisa mengecek apakah aplikasi mengirimkan pesan atau permintaan dalam
urutan yang benar dan apakah respons diterima seperti yang seharusnya.
Menemukan Bug dan Anomali Alur : Sequence diagram memudahkan dalam
menemukan potensi masalah atau bug dalam alur interaksi antar objek. Jika pesan
dikirim dalam urutan yang salah, atau respons yang diterima tidak sesuai dengan yang
diharapkan, ini akan terlihat dengan jelas dalam sequence diagram.
Simulasi Pengujian Fungsionalitas: Dengan menggunakan sequence diagram, penguji
dapat lebih mudah menyusun test case berdasarkan urutan langkah-langkah yang ada
dalam diagram. Hal ini akan memastikan bahwa aplikasi memenuhi fungsionalitas yang
diharapkan.
Peran dalam Validation:
Validasi Kesesuaian Proses Bisnis: Dalam pengujian validasi, sequence diagram
memastikan bahwa sistem bekerja sesuai dengan proses bisnis yang diinginkan.
Diagram ini memungkinkan penguji untuk memeriksa apakah aplikasi berfungsi seperti
yang diinginkan oleh pemangku kepentingan (stakeholders).
Memastikan Interaksi Antarsistem: Sequence diagram juga memastikan bahwa
komunikasi antar subsistem atau antar komponen dalam sistem berjalan dengan benar
dan sesuai harapan, yang penting untuk validasi sistem yang melibatkan beberapa
layanan atau modul.
2. Activity Diagram dalam Testing and Validation
Activity Diagram menggambarkan alur aktivitas atau proses dalam sistem yang
menunjukkan langkah-langkah yang diperlukan untuk mencapai tujuan tertentu.
Diagram ini berfokus pada proses bisnis, serta kondisi yang perlu dipenuhi dalam alur
tersebut.
Peran dalam Testing:
Menyusun Test Case Berdasarkan Proses: Activity diagram sangat membantu dalam
penyusunan test case untuk memastikan bahwa setiap langkah dalam alur eksekusi
diuji dengan benar. Dengan diagram ini, penguji dapat merencanakan skenario
82

83. pengujian yang menguji berbagai kemungkinan jalur eksekusi (termasuk jalur normal
dan jalur alternatif).
Menguji Keterkaitan dan Pengalihan Proses: Activity diagram membantu dalam
memverifikasi pengalihan antara aktivitas, keputusan, dan kondisi dalam alur eksekusi.
Pengujian akan memastikan bahwa sistem mengikuti jalur yang benar berdasarkan
kondisi yang diberikan.
Mendeteksi Proses yang Tidak Tercover: Dengan melihat activity diagram, tester
dapat dengan mudah mengidentifikasi aktivitas yang mungkin terlewatkan dalam
skenario pengujian atau yang tidak tercakup dalam pengujian sebelumnya.
Peran dalam Validation:
Validasi Proses Bisnis dan Alur Kerja: Activity diagram memastikan bahwa proses
bisnis dan alur kerja yang diterapkan dalam sistem mencocokkan dengan yang
diinginkan. Jika alur sistem berjalan dengan cara yang berbeda dari yang direncanakan,
maka sistem akan dianggap tidak valid.
Validasi Keputusan dan Kondisi dalam Proses: Diagram ini juga memastikan bahwa
proses bisnis mengambil keputusan dengan benar berdasarkan kondisi yang ada. Ini
sangat penting untuk memastikan bahwa sistem berjalan sesuai dengan kebutuhan
pengguna dan fungsionalitas yang diinginkan.
Validasi User Flow: Activity diagram membantu untuk memverifikasi apakah alur
pengguna (user flow) yang ada dalam aplikasi sesuai dengan harapan dan dapat
dilaksanakan dengan mudah oleh pengguna akhir.
Contoh Penerapan dalam Testing dan Validation:
Misalkan kita memiliki aplikasi e-commerce, dan kita ingin memverifikasi
proses pembelian produk:
Sequence Diagram: Menampilkan bagaimana pengguna memilih produk,
menambahkannya ke keranjang, memeriksa detail pesanan, dan melanjutkan
pembayaran. Di sini, kita dapat menguji urutan pesan yang dikirimkan antara
objek User, Product, Cart, Order, dan Payment. Jika ada interaksi yang salah atau
urutan yang tidak sesuai, tester bisa langsung mengidentifikasi masalah tersebut.
Activity Diagram: Menggambarkan alur langkah demi langkah dari proses pembelian,
termasuk aktivitas seperti memilih produk, menambahkan produk ke keranjang,
melakukan checkout, memasukkan detail pembayaran, dan mengonfirmasi pesanan.
Dengan activity diagram, tester dapat memverifikasi bahwa setiap langkah eksekusi
sistem terjadi dengan urutan yang benar, dan kondisi tertentu (misalnya, stok produk)
dipertimbangkan dengan benar dalam setiap langkah.
Kesimpulan:
Sequence Diagram lebih fokus pada interaksi antar objek dan bagaimana pesan
dipertukarkan dalam sistem. Dalam testing, diagram ini digunakan untuk memvalidasi
alur interaksi dan urutan pesan, sedangkan dalam validation, digunakan untuk
memastikan bahwa alur tersebut sesuai dengan proses bisnis yang diinginkan.
Activity Diagram menggambarkan alur aktivitas dalam sistem,
memungkinkan testing untuk memverifikasi urutan aktivitas dan pengalihan alur yang
benar, serta memastikan validation bahwa sistem menjalankan proses sesuai dengan
kebutuhan dan harapan pengguna.
83

84. Kedua diagram ini sangat berperan penting dalam tahap testing dan validation,
karena membantu dalam memverifikasi dan memvalidasi fungsionalitas serta alur
sistem secara visual dan lebih terstruktur.
Untuk membuat test case yang sesuai dengan Activity Diagram dan Sequence
Diagram dalam aplikasi E-Commerce Web Application, kita harus mengacu pada
proses dan interaksi yang digambarkan dalam kedua diagram tersebut. Test case yang
baik akan mencakup skenario yang menguji alur normal dan alur alternatif, serta
kondisi yang relevan dengan fungsionalitas aplikasi.
1. Test Case Berdasarkan Activity Diagram
Misalnya, kita memiliki Activity Diagram untuk proses Pemesanan Produk dalam
aplikasi E-Commerce. Proses ini melibatkan langkah-langkah seperti memilih produk,
menambahkan ke keranjang, melakukan checkout, memasukkan detail pembayaran,
dan mengonfirmasi pesanan.
Activity Diagram - Proses Pembelian Produk
Start -> Select Product -> Add to Cart -> Proceed to Checkout
-> Enter Payment Details -> Confirm Order -> End
Test Case 1: Pembelian Produk dengan Proses Normal
Tujuan: Menguji proses pembelian produk yang normal.
Langkah:
1.Pengguna memilih produk.
2.Produk ditambahkan ke keranjang.
3.Pengguna melanjutkan ke checkout.
4.Pengguna memasukkan detail pembayaran yang valid.
5.Pembayaran berhasil dan pesanan dikonfirmasi.
6.Pengguna menerima konfirmasi pesanan.
Ekspektasi:
Produk yang dipilih muncul di keranjang belanja.
Total harga dihitung dengan benar.
Pembayaran diproses tanpa masalah.
Pesanan dikonfirmasi dan stok produk berkurang.
Pengguna menerima email konfirmasi.
Test Case 2: Pembelian Produk dengan Pembayaran Gagal
Tujuan: Menguji skenario ketika pembayaran gagal.
Langkah:
1.Pengguna memilih produk.
2.Produk ditambahkan ke keranjang.
3.Pengguna melanjutkan ke checkout.
4.Pengguna memasukkan detail pembayaran yang tidak valid (misalnya, kartu
kredit ditolak).
5.Sistem memberikan pesan kesalahan.
6.Pembayaran gagal, dan pesanan tidak diproses.
Ekspektasi:
Sistem menampilkan pesan kesalahan terkait pembayaran yang gagal.
Pesanan tidak dikonfirmasi.
Pengguna diminta untuk mencoba lagi atau memilih metode pembayaran lain.
84

85. 2. Test Case Berdasarkan Sequence Diagram
Misalnya, kita memiliki Sequence Diagram untuk proses Pemesanan Produk dan
Pembayaran dalam aplikasi E-Commerce. Proses ini melibatkan interaksi antara
pengguna (User), produk (Product), keranjang belanja (Cart), pesanan (Order), dan
pembayaran (Payment).
Sequence Diagram - Proses Pemesanan dan Pembayaran
User -> Product: Select product
Product -> Cart: Add product to cart
Cart -> User: Display cart details
User -> Cart: Proceed to checkout
Cart -> Order: Create order
Order -> Cart: Get product details
Order -> Order: Calculate total price
Order -> Payment: Request payment details
Payment -> User: Enter payment details
Payment -> Order: Confirm payment
Order -> Cart: Update stock
Order -> User: Confirm order
Test Case 3: Proses Pemesanan dan Pembayaran Sukses
Tujuan: Menguji alur pemesanan produk dan pembayaran yang sukses.
Langkah:
1.Pengguna memilih produk.
2.Produk ditambahkan ke keranjang.
3.Pengguna melihat detil produk dalam keranjang.
4.Pengguna melanjutkan ke checkout.
5.Sistem membuat pesanan berdasarkan produk dalam keranjang.
6.Sistem menghitung total harga pesanan.
7.Pengguna memasukkan detail pembayaran.
8.Sistem memverifikasi dan mengonfirmasi pembayaran.
9.Pesanan diproses, stok produk dikurangi.
10.Pengguna menerima konfirmasi pesanan.
Ekspektasi:
Pengguna dapat melihat produk di keranjang dengan harga yang benar.
Total harga dihitung dengan benar.
Pembayaran diproses dan dikonfirmasi tanpa error.
Pesanan dikonfirmasi, dan stok produk berkurang sesuai jumlah yang dibeli.
Test Case 4: Pembatalan Pemesanan
Tujuan: Menguji proses pembatalan pemesanan sebelum pembayaran.
Langkah:
1.Pengguna memilih produk dan menambahkannya ke keranjang.
2.Pengguna melihat keranjang dan melanjutkan ke checkout.
3.Sebelum memasukkan detail pembayaran, pengguna membatalkan
pemesanan.
85

86. 4.Sistem membatalkan pesanan dan mengembalikan pengguna ke halaman
utama.
Ekspektasi:
Produk yang ditambahkan ke keranjang tidak diproses lebih lanjut.
Sistem membatalkan proses pemesanan dan menghapus produk dari
keranjang.
Test Case 5: Pemesanan dengan Stok Habis
Tujuan: Menguji skenario ketika pengguna mencoba memesan produk yang stoknya
habis.
Langkah:
1.Pengguna memilih produk yang stoknya habis.
2.Produk ditambahkan ke keranjang.
3.Pengguna melanjutkan ke checkout.
4.Sistem mengecek stok produk dan menunjukkan bahwa produk tidak tersedia.
5.Pengguna diberitahukan bahwa produk tidak tersedia.
Ekspektasi:
Pengguna diberitahukan dengan jelas bahwa produk tidak tersedia.
Pengguna tidak dapat melanjutkan ke tahap pembayaran.
Kesimpulan:
Activity Diagram memberikan gambaran proses langkah demi langkah, yang
memudahkan dalam merancang  test case untuk memverifikasi alur eksekusi sistem,
termasuk alur normal dan alternatif.
Sequence Diagram menggambarkan urutan interaksi antar objek atau komponen
dalam sistem, yang membantu dalam membuat  test case untuk memverifikasi apakah
pesan dan data dipertukarkan dalam urutan yang benar, serta memastikan bahwa alur
transaksi berjalan sesuai dengan yang diharapkan.
Dalam contoh aplikasi E-Commerce, test case yang dibuat berdasarkan kedua diagram
ini akan memastikan bahwa seluruh proses, mulai dari pemilihan produk hingga
pembayaran, bekerja dengan benar dan mematuhi proses bisnis yang ditentukan.
86

87. 7-Pemeliharaan Sistem / Maintenance
Rencana pemeliharaan atau maintenance plan adalah bagian penting dari siklus hidup
aplikasi, karena memastikan bahwa aplikasi tetap berfungsi dengan baik, aman, dan memenuhi
kebutuhan pengguna setelah implementasi. Berikut adalah contoh rencana
pemeliharaan untuk aplikasi E-Commerce Web Application.
Rencana Pemeliharaan untuk Aplikasi E-Commerce Web Application
1. Tujuan Pemeliharaan
Pemeliharaan aplikasi E-Commerce bertujuan untuk:
Menjaga aplikasi tetap berjalan tanpa gangguan.
Memperbaiki bug dan masalah yang mungkin muncul setelah implementasi.
Memperbarui sistem agar tetap kompatibel dengan teknologi terbaru.
Menjaga keamanan dan integritas data pengguna.
Menyediakan fitur tambahan dan peningkatan fungsionalitas.
2. Jenis Pemeliharaan
Pemeliharaan aplikasi E-Commerce dapat dibagi menjadi beberapa jenis:
1.Pemeliharaan Korektif (Corrective Maintenance):
Memperbaiki bug dan masalah yang muncul setelah aplikasi digunakan.
Mengatasi gangguan teknis seperti downtime server, error pada proses
checkout, atau masalah integrasi dengan sistem pembayaran.
Contoh: Memperbaiki kegagalan sistem pembayaran atau kesalahan
perhitungan harga total.
2.Pemeliharaan Adaptif (Adaptive Maintenance):
Melakukan pembaruan aplikasi agar tetap kompatibel dengan perubahan
lingkungan eksternal, seperti pembaruan versi browser, sistem operasi, atau
integrasi dengan sistem pihak ketiga (misalnya, gateway pembayaran yang
diperbarui).
Contoh: Mengubah antarmuka agar kompatibel dengan versi terbaru dari
perangkat mobile atau pembaruan API pembayaran.
3.Pemeliharaan Perfomatif (Perfective Maintenance):
Meningkatkan fungsionalitas dan kinerja aplikasi untuk memenuhi kebutuhan
pengguna yang berkembang.
87

88. Menambahkan fitur baru seperti rekomendasi produk, sistem penilaian, atau
fitur pencarian yang lebih canggih.
Contoh: Menambahkan filter pencarian lebih lanjut atau meningkatkan
performa pencarian produk.
4.Pemeliharaan Preventif (Preventive Maintenance):
Melakukan tindakan untuk mencegah masalah sebelum terjadi, seperti
pembaruan keamanan dan optimasi kinerja.
Pemeliharaan rutin untuk memastikan server, database, dan kode aplikasi tetap
optimal dan aman.
Contoh: Memperbarui perangkat lunak server, mengoptimalkan query database,
dan membersihkan data yang tidak terpakai.
3. Langkah-Langkah Pemeliharaan
3.1. Pemeliharaan Harian
Memeriksa Kinerja Server: Memastikan server berjalan dengan baik, memonitor
penggunaan sumber daya, dan mengidentifikasi potensi bottleneck.
Pemeriksaan Keamanan : Memantau ancaman dan kerentanannya, seperti percakapan
login yang tidak sah, percakapan pada jaringan, dan serangan brute-force.
Pemantauan Error: Memeriksa error log untuk menemukan bug atau masalah yang
terjadi di aplikasi, baik di sisi klien maupun server.
3.2. Pemeliharaan Mingguan
Pencadangan Data: Melakukan pencadangan data produk, transaksi, dan data
pengguna secara rutin untuk memastikan data yang hilang bisa dipulihkan.
Pembaruan Konten: Memperbarui produk, harga, dan promosi pada halaman utama
dan halaman produk agar tetap relevan.
Pengujian Fungsionalitas: Melakukan pengujian regresi untuk memastikan fitur yang
ada tetap berfungsi dengan baik setelah pembaruan atau perbaikan.
3.3. Pemeliharaan Bulanan
Pembaruan Sistem: Memperbarui platform e-commerce, CMS, atau perangkat lunak
lainnya agar tetap aman dan teroptimasi.
Pemeriksaan Integrasi Pihak Ketiga: Memeriksa status integrasi dengan sistem
pembayaran, pengiriman, dan pihak ketiga lainnya untuk memastikan semuanya
berfungsi tanpa gangguan.
Audit Keamanan: Melakukan audit keamanan untuk mengidentifikasi potensi
kerentanannya, termasuk pemeriksaan penetrasi dan uji coba beban.
3.4. Pemeliharaan Tahunan
88

89. Pembaruan Teknologi: Memperbarui atau mengganti komponen sistem yang sudah
usang atau tidak lagi mendukung versi terbaru dari perangkat lunak.
Analisis Kinerja Aplikasi: Menganalisis kinerja keseluruhan aplikasi untuk memastikan
pengalaman pengguna yang lancar, mengidentifikasi area untuk perbaikan, dan
merencanakan peningkatan jika diperlukan.
Evaluasi Feedback Pengguna: Mengumpulkan umpan balik dari pengguna dan
pelanggan untuk merencanakan fitur baru, perubahan UI/UX, dan perbaikan.
4. Rencana Tanggap Darurat
Pemeliharaan yang berfokus pada pemulihan dari kegagalan atau insiden darurat yang dapat
memengaruhi aplikasi e-commerce:
Penyebab Umum : Server down, gangguan transaksi pembayaran, kebocoran data
pengguna, kesalahan integrasi dengan penyedia pihak ketiga.
Tanggap Darurat:
Jika server down, hubungi penyedia layanan hosting untuk pemulihan segera.
Jika ada masalah pembayaran, pastikan aplikasi bisa beralih ke metode
pembayaran lain dan informasikan pelanggan.
Jika ada pelanggaran keamanan, identifikasi dan perbaiki celah keamanan
dengan segera, lalu beri pemberitahuan kepada pengguna yang terdampak.
5. Alat dan Teknologi yang Digunakan dalam Pemeliharaan
Pemantauan Kinerja: Alat seperti New Relic, Datadog, atau Google Analytics untuk
memonitor kinerja aplikasi dan menganalisis trafik pengguna.
Pencadangan dan Pemulihan : Gunakan alat pencadangan seperti AWS S3, Google
Cloud Storage, atau alat pencadangan server internal.
Pengelolaan Keamanan: Sistem manajemen patch seperti Qualys, Nessus, atau alat
keamanan lainnya untuk mendeteksi dan mengatasi kerentanannya.
Pengujian Otomatis: Pengujian otomatis dengan Selenium atau Cypress untuk
memastikan fungsionalitas tetap terjaga setelah pembaruan atau perubahan kode.
6. Penanganan Bug dan Permintaan Fitur Baru
Bug Tracking: Gunakan sistem pelacakan bug seperti Jira atau Trello untuk mengelola
perbaikan bug yang ditemukan oleh pengujian atau pengguna.
Fitur Baru: Proses pengembangan fitur baru berdasarkan umpan balik pengguna atau
persyaratan bisnis baru, termasuk analisis dampak dan pengujian fungsionalitas.
89

90. 7. Tim Pemeliharaan
Pengembang (Developer): Bertanggung jawab untuk melakukan pemrograman ulang,
perbaikan bug, pembaruan fungsionalitas, dan optimasi kode.
Administrator Sistem (System Admin): Bertanggung jawab untuk memelihara server,
memastikan ketersediaan aplikasi, dan menangani pemeliharaan perangkat keras.
Tim Keamanan (Security Team): Melakukan audit keamanan, memperbarui protokol
keamanan, dan menangani insiden terkait data atau privasi.
Tim Dukungan Pelanggan (Customer Support) : Menangani masalah atau keluhan
pengguna yang terkait dengan pemeliharaan, termasuk pemecahan masalah
pembelian atau masalah pembayaran.
8. Estimasi Waktu dan Biaya Pemeliharaan
Pemeliharaan Rutin: Estimasi waktu: 5–10 jam per minggu, tergantung pada
kompleksitas dan jumlah pembaruan atau perbaikan.
Pembaruan Sistem: Estimasi waktu: 20–40 jam per bulan.
Audit Keamanan: Estimasi waktu: 10–15 jam per kuartal.
Anggaran: Tergantung pada skala aplikasi, biaya pemeliharaan bisa berkisar antara 10–
20% dari biaya pengembangan tahunan aplikasi.
9. Evaluasi dan Pengukuran Keberhasilan Pemeliharaan
Waktu Respons: Memastikan waktu respons terhadap masalah kritis (misalnya,
downtime atau masalah pembayaran) adalah 1-2 jam.
Tingkat Keberhasilan Pembaruan: Menilai apakah pembaruan atau perbaikan fitur
baru berhasil tanpa mengganggu fitur yang ada.
Umpan Balik Pengguna: Mengukur kepuasan pengguna melalui survei atau analitik
untuk menentukan apakah pemeliharaan berhasil memenuhi kebutuhan pengguna.
Untuk pemeliharaan sistem yang sesuai dengan class diagram dan activity diagram pada
studi kasus E-Commerce Web Application, kita akan merinci jenis pemeliharaan yang
diperlukan berdasarkan komponen sistem yang digambarkan dalam diagram tersebut.
Pemeliharaan sistem harus memastikan bahwa seluruh bagian aplikasi berjalan dengan
optimal, baik dari segi kinerja, keamanan, maupun fungsionalitas.
1. Pemeliharaan Berdasarkan Class Diagram
Class Diagram menggambarkan struktur sistem, termasuk objek-objek utama, hubungan antar
objek, serta atribut dan metode yang ada dalam sistem. Dalam konteks aplikasi E-Commerce
90

91. Web Application, beberapa kelas yang biasanya ditemukan
adalah Product, Order, Cart, User, Payment, dan Inventory.
Pemeliharaan pada Kelas-Kelas Utama
1.Kelas Product
Pemeliharaan:
Perbarui Data Produk: Menambahkan atau mengubah informasi
produk (harga, deskripsi, gambar, dan stok).
Optimasi Pencarian Produk: Meningkatkan algoritma pencarian
produk untuk meningkatkan pengalaman pengguna.
Pemeriksaan Konsistensi Stok: Memastikan stok yang ditampilkan
sesuai dengan data di database.
Keamanan: Melakukan validasi input produk untuk mencegah
penyalahgunaan atau kesalahan input.
2.Kelas Order
Pemeliharaan:
Validasi Status Order: Memastikan status pesanan (pending, dikirim,
dibatalkan) selalu akurat berdasarkan tindakan yang diambil oleh
pengguna atau admin.
Optimasi Pengelolaan Pesanan: Menangani pesanan dalam jumlah
besar dengan mengoptimalkan query untuk pengambilan data pesanan
dan status.
Audit Sistem Pemesanan: Memastikan bahwa semua pesanan tercatat
dengan benar dan dapat ditarik kembali jika terjadi kesalahan.
3.Kelas Cart
Pemeliharaan:
Pembaharuan Keranjang Belanja: Memastikan bahwa item yang
ditambahkan atau dihapus dari keranjang ditangani dengan benar.
Validasi Kupon dan Diskon: Memastikan bahwa kupon atau potongan
harga diterapkan dengan benar sebelum checkout.
Keamanan Transaksi: Menjaga agar data yang terkait dengan
keranjang belanja tidak hilang atau rusak selama proses checkout.
4.Kelas User
Pemeliharaan:
Keamanan Akun Pengguna : Melakukan audit dan peningkatan sistem
otentikasi pengguna (misalnya, dua faktor autentikasi atau enkripsi data
login).
91

92. Pengelolaan Pengguna: Memperbarui profil pengguna, mengelola hak
akses, dan menangani kasus pengguna yang lupa password.
Penyimpanan Riwayat Transaksi: Memastikan data riwayat transaksi
pengguna tersimpan dengan baik dan dapat diakses.
5.Kelas Payment
Pemeliharaan:
Perbarui Sistem Pembayaran: Mengintegrasikan metode pembayaran
baru atau memperbarui integrasi dengan pihak ketiga (seperti gateway
pembayaran).
Keamanan Pembayaran : Melakukan audit rutin terhadap sistem
pembayaran untuk menghindari potensi kebocoran data pembayaran
pengguna.
Perbaiki Masalah Pembayaran: Menangani masalah teknis terkait
transaksi yang gagal atau terputus.
6.Kelas Inventory
Pemeliharaan:
Pembaruan Stok Barang: Memperbarui stok produk setiap kali ada
transaksi atau perubahan dalam inventaris.
Integrasi dengan Gudang: Mengoptimalkan pengelolaan inventaris
agar dapat melacak stok secara real-time di gudang atau pemasok.
2. Pemeliharaan Berdasarkan Activity Diagram
Activity Diagram menggambarkan alur kerja atau proses bisnis secara detail, seperti proses
pembelian produk di aplikasi E-Commerce. Berdasarkan Activity Diagram, berikut adalah jenis
pemeliharaan yang perlu dilakukan untuk menjaga kelancaran dan keamanan proses-proses
utama dalam aplikasi.
Proses Pembelian Produk:
1.Pilih Produk dan Masukkan ke Keranjang
Pemeliharaan:
Penyegaran Cache Produk: Memastikan informasi produk yang
ditampilkan di keranjang selalu terbaru (termasuk harga, stok, dan
gambar).
Pengelolaan Keranjang: Memastikan item yang dipilih ditambahkan
atau dihapus dengan benar, dan sistem tidak terjadi duplikasi data.
2.Checkout
Pemeliharaan:
92

93. Keamanan Proses Checkout: Memastikan bahwa transaksi checkout
terlindungi dengan enkripsi data dan tidak ada kebocoran data
pelanggan (misalnya, alamat pengiriman).
Pemrosesan Pembayaran : Mengelola kegagalan atau penundaan
dalam proses pembayaran dengan sistem fallback yang aman dan andal.
Validasi Pembayaran: Memastikan bahwa data pembayaran yang
diberikan valid dan dapat diproses, baik itu kartu kredit, e-wallet, atau
metode pembayaran lain.
3.Masukkan Detail Pembayaran
Pemeliharaan:
Integrasi Pembayaran: Memperbarui atau memperbaiki sistem
pembayaran pihak ketiga untuk mendukung metode pembayaran
terbaru.
Keamanan Pembayaran : Meningkatkan sistem keamanan untuk
melindungi informasi sensitif pengguna, termasuk informasi kartu kredit
dan detail rekening bank.
4.Konfirmasi Pesanan
Pemeliharaan:
Email Konfirmasi Pesanan: Memastikan pengiriman email konfirmasi
pesanan kepada pengguna setelah pembayaran berhasil.
Pengelolaan Stok: Mengupdate stok produk setelah pesanan
dikonfirmasi untuk memastikan akurasi inventaris.
5.Pengiriman Pesanan
Pemeliharaan:
Integrasi dengan Sistem Pengiriman: Memastikan integrasi dengan
sistem kurir atau pengiriman berjalan dengan baik, dan pelacakan
pengiriman berfungsi sesuai rencana.
Pengelolaan Pengiriman: Memperbarui status pengiriman secara real-
time, memastikan bahwa pelanggan dapat melacak pesanan mereka
dengan benar.
3. Rencana Pemeliharaan untuk Aplikasi E-Commerce Web Application
Berdasarkan class diagram dan activity diagram, berikut adalah langkah-langkah
pemeliharaan sistem untuk aplikasi E-Commerce Web Application:
Pemeliharaan Rutin
Pembaruan Produk: Memperbarui informasi produk, harga, dan stok secara berkala.
93

94. Penyegaran Keranjang dan Pembayaran : Memastikan tidak ada gangguan pada alur
kerja checkout, dan transaksi pembayaran berjalan mulus.
Pemeliharaan Database: Optimasi query database untuk menghindari penurunan
kinerja seiring berkembangnya data produk, pesanan, dan pengguna.
Pemeliharaan Keamanan
Penyegaran Keamanan Akun Pengguna : Meningkatkan sistem otentikasi pengguna
dan menjaga kerahasiaan data pribadi.
Audit Sistem Pembayaran: Memastikan integrasi dengan sistem pembayaran pihak
ketiga aman dan tanpa gangguan.
Pemantauan Keamanan Server : Memastikan server yang digunakan dalam aplikasi
tidak rentan terhadap serangan DDoS, SQL injection, atau jenis serangan lainnya.
Pemeliharaan Fungsional
Fitur Pembaruan: Menambahkan fitur baru untuk memperbaiki pengalaman
pengguna, seperti pengingat keranjang belanja atau rekomendasi produk.
Peningkatan UI/UX: Berdasarkan umpan balik pengguna, melakukan peningkatan
antarmuka pengguna untuk pengalaman yang lebih lancar dan menyenangkan.
Pemeliharaan Performa
Optimasi Kecepatan Aplikasi: Memastikan bahwa halaman produk, checkout, dan
konfirmasi pesanan dapat dimuat dengan cepat tanpa keterlambatan.
Penyempurnaan Sistem Caching : Mengoptimalkan sistem caching untuk mengurangi
beban server dan mempercepat waktu respons aplikasi.
4. Kesimpulan
Pemeliharaan sistem yang efektif membutuhkan pendekatan yang terstruktur dengan fokus
pada keamanan, fungsionalitas, dan kinerja. Berdasarkan class diagram dan activity diagram,
rencana pemeliharaan ini akan menjaga aplikasi E-Commerce Web tetap berjalan lancar, aman,
dan relevan dengan kebutuhan pengguna yang terus berkembang. Pemeliharaan tidak hanya
terbatas pada perbaikan bug atau masalah teknis, tetapi juga pada penambahan fitur baru
yang dapat meningkatkan pengalaman pengguna dan daya saing aplikasi.
Berikut adalah tabel dan jadwal pemeliharaan sistem yang sesuai dengan class
diagram dan activity diagram untuk aplikasi E-Commerce Web Application. Pemeliharaan ini
akan mencakup pemeliharaan rutin, keamanan, fungsionalitas, dan performa sesuai dengan
komponen yang ada di dalam class diagram dan alur kerja yang dijelaskan dalam activity
diagram.
Tabel Pemeliharaan Sistem Aplikasi E-Commerce Web Application
94

95. Jenis
PemeliharaanDeskripsi Komponen yang Terlibat
Frekuens
i
Waktu
Pelaksanaa
n
Pemeliharaan
Rutin
Pembaruan
informasi
produk,
pembaruan
stok, dan
pengelolaan
keranjang
belanja.
Kelas Product, Cart, Invent
ory Bulanan
Minggu
pertama
setiap bulan
Penyegaran
Database
Optimasi query
untuk
meningkatkan
performa
pencarian
produk dan
pengelolaan
pesanan. Kelas Product, Order, User
Setiap 3
bulan
Minggu
kedua setiap
tiga bulan
Pemeliharaan
Keamanan
Pembaruan
sistem
otentikasi
pengguna dan
pemeriksaan
kerentanannya.Kelas User, Payment Bulanan
Minggu
ketiga setiap
bulan
Audit Sistem
Pembayaran
Memastikan
sistem
pembayaran
tidak rentan
terhadap
serangan,
mengintegrasik
an metode
pembayaran
baru. Kelas Payment, Order
Setiap 3
bulan
Minggu
keempat
setiap tiga
bulan
Validasi dan
Peningkatan
Keamanan
Pembayaran
Pemeriksaan
dan penguatan
enkripsi
pembayaran
serta
pengelolaan
data sensitif
pengguna. Kelas Payment
Setiap 3
bulan
Minggu
pertama
setiap tiga
bulan
95

96. Jenis
PemeliharaanDeskripsi Komponen yang Terlibat
Frekuens
i
Waktu
Pelaksanaa
n
Pengelolaan
Stok dan
Inventaris
Memperbarui
stok produk dan
melakukan
pemeriksaan
ulang pada
pengelolaan
inventaris. Kelas Product, Inventory
Minggua
n
Setiap hari
Senin
Pemeliharaan
Sistem
Pengiriman
Memastikan
integrasi
dengan sistem
pengiriman
berfungsi
dengan baik dan
update status
pengiriman
yang akurat. Kelas Order, Shipping Bulanan
Minggu
ketiga setiap
bulan
Penyempurnaa
n UI/UX
Meningkatkan
antarmuka
pengguna
berdasarkan
feedback
pengguna dan
pengujian
fungsionalitas.UI/UX Components
Setiap 6
bulan
Bulan Juni
dan
Desember
Penyempurnaa
n Fitur
Checkout
Menambah atau
memperbaiki
fitur terkait
checkout,
termasuk
validasi kupon
dan potongan
harga. Cart, Payment, Order
Setiap 3
bulan
Minggu
kedua setiap
tiga bulan
Audit Riwayat
Transaksi
Pengguna
Memeriksa
riwayat
transaksi
pengguna untuk
memastikan
data yang
tercatat tetap
konsisten dan
Kelas User, Order Setiap 6
bulan
Minggu
pertama
setiap enam
bulan
96

97. Jenis
PemeliharaanDeskripsi Komponen yang Terlibat
Frekuens
i
Waktu
Pelaksanaa
n
akurat.
Peningkatan
Performa
Aplikasi
Memperbarui
dan
mengoptimalka
n komponen
aplikasi untuk
mengurangi
waktu respons
dan
meningkatkan
kecepatan
pemrosesan.
Semua komponen yang
terlibat dalam transaksi
Setiap 3
bulan
Minggu
pertama
setiap tiga
bulan
Jadwal Pemeliharaan Sistem Aplikasi E-Commerce Web Application
Waktu Aktivitas
Komponen yang
Terlibat
Minggu
Pertama
Setiap Bulan
1. Penyegaran database produk dan
pembaruan informasi produk. Product, Inventory
2. Pembaruan dan validasi sistem otentikasi
pengguna. User, Payment
Minggu Kedua
Setiap Bulan
1. Optimasi query dan performa
pengelolaan pesanan dan data pengguna. Order, User
Minggu Ketiga
Setiap Bulan
1. Audit dan pengecekan keamanan
pembayaran dan pengiriman.
Payment, Order, Shippi
ng
2. Pembaruan sistem integrasi pengiriman
dan update status pengiriman. Shipping
Minggu
Keempat
Setiap Bulan
1. Perbaikan dan validasi integrasi sistem
pembayaran dan pengelolaan transaksi
pembayaran. Payment, Order
Setiap 3 Bulan
1. Pembaruan dan integrasi metode
pembayaran baru. Payment
2. Pemeriksaan ulang pengelolaan stok dan
produk. Product, Inventory
97

98. Waktu Aktivitas
Komponen yang
Terlibat
3. Optimasi dan audit sistem untuk
mengatasi bug dan meningkatkan
fungsionalitas checkout. Cart, Order, Payment
Setiap 6 Bulan
1. Penyempurnaan UI/UX berdasarkan
feedback pengguna dan analisis
pengalaman pengguna. UI/UX Components
2. Audit riwayat transaksi untuk memastikan
keakuratan data dan riwayat pengguna. User, Order
Setiap Tahun
1. Evaluasi dan pemeliharaan infrastruktur
server, serta penyegaran sistem pengelolaan
produk dan data transaksi. Semua komponen sistem
Penjelasan Pemeliharaan:
1.Penyegaran Database dan Informasi Produk : Pembaruan informasi produk seperti
harga, deskripsi, dan stok secara berkala sangat penting agar pelanggan dapat melihat
produk yang akurat.
2.Audit Sistem Pembayaran dan Keamanan : Sistem pembayaran harus selalu diperiksa
untuk menghindari potensi celah keamanan dan memastikan transaksi berjalan dengan
lancar.
3.Optimasi Kinerja dan Pembaruan Fitur: Pemeliharaan rutin seperti optimasi query
database, pemeliharaan komponen UI/UX, dan peningkatan kecepatan aplikasi sangat
penting agar aplikasi tetap responsif dan mudah digunakan.
4.Penyempurnaan UI/UX : Berdasarkan feedback pengguna, UI/UX aplikasi perlu
diperbarui agar lebih mudah digunakan, responsif, dan meningkatkan pengalaman
belanja online.
5.Penyegaran dan Perbaikan Fungsionalitas: Secara rutin menambah atau
memperbaiki fungsionalitas aplikasi seperti pengelolaan keranjang belanja dan
checkout memastikan proses pembelian yang lancar.
6.Pemeliharaan Sistem Pengiriman dan Stok: Pastikan bahwa proses pengiriman
berjalan lancar dan pengelolaan stok produk tidak bermasalah untuk menghindari
kesalahan dalam pemenuhan pesanan.
98