-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
271 lines (246 loc) · 13.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet"
/>
<title>Package Diagram Kelompok Aman</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/fontawesome.css" />
<link rel="stylesheet" href="assets/css/templatemo-style.css" />
<link rel="stylesheet" href="assets/css/owl.css" />
<link rel="stylesheet" href="assets/css/lightbox.css" />
</head>
<body>
<div id="page-wraper">
<!-- Sidebar Menu -->
<div class="responsive-nav">
<i class="fa fa-bars" id="menu-toggle"></i>
<div id="menu" class="menu">
<i class="fa fa-times" id="menu-close"></i>
<div class="container">
<div class="image">
<a href="#"><img src="assets/images/Logo UNS.png" alt="" /></a>
</div>
<div class="author-content">
<h4>Kelompok Aman</h4>
<span>Package Diagram</span>
</div>
<nav class="main-nav" role="navigation">
<ul class="main-menu">
<li><a href="#section1">Pengertian & Fungsi</a></li>
<li><a href="#section2">Notasi </a></li>
<li><a href="#section3">Contoh Scenario</a></li>
<li><a href="#section4">Anggota Kelompok</a></li>
</ul>
</nav>
<div class="copyright-text">
<p>2024 || Kelompok Aman.</p>
</div>
</div>
</div>
</div>
<section class="section about-me" data-section="section1">
<div class="container">
<div class="section-heading">
<h2>PACKAGE DIAGRAM</h2>
<div class="line-dec"></div>
<span
>Package Diagram dalam Unified Modeling Language (UML) memiliki definisi dan fungsi yang sangat penting dalam rekayasa perangkat lunak, terutama dalam konteks desain sistem yang besar dan kompleks. Berikut ini penjelasan lebih detil mengenai definisi dan fungsi dari Package Diagram:</span
>
</div>
<div class="left-image-post">
<div class="row">
<div class="col-md-6">
<div class="left-image">
<img src="assets/images/part9.jpg" alt="" />
</div>
</div>
<div class="col-md-6">
<div class="right-text">
<div class="right-text" style="text-align: justify;">
<h4>Apa Itu Package Diagram?</h4>
<p>
Package Diagram adalah diagram struktural dalam UML yang digunakan untuk mengelompokkan elemen-elemen yang terkait menjadi paket. Paket ini berfungsi sebagai unit organisasi yang mengandung kelas, antarmuka, komponen, diagram lain, dan bahkan paket lainnya. Dalam esensi, paket merupakan cara untuk mengorganisir sistem yang kompleks ke dalam blok-blok bangunan yang lebih kecil dan lebih mudah dikelola, dengan cara yang mirip dengan direktori dalam sistem file komputer.
Elemen-elemen dalam satu paket biasanya memiliki keterkaitan fungsi, dependensi, atau namespace yang sama. Diagram ini tidak hanya tentang pengelompokan kelas-kelas tapi juga tentang menunjukkan hubungan dan ketergantungan antar paket, sehingga sangat membantu dalam visualisasi dan pemahaman struktur keseluruhan dari sistem.
</p>
</div>
</div>
</div>
</div>
<div class="right-image-post">
<div class="row">
<div class="col-md-6">
<div class="left-text" style="text-align: justify;">
<h4>Fungsi Package Diagram.</h4>
<p>
1. Strukturisasi Sistem: Membantu dalam pengorganisasian dan strukturisasi sistem perangkat lunak yang kompleks menjadi kelompok-kelompok logis yang lebih kecil dan lebih mudah untuk dikelola.<br>
2. Pengurangan Kompleksitas: Dengan membagi sistem ke dalam paket, kompleksitas sistem secara keseluruhan dapat dikurangi. Hal ini memudahkan para pengembang untuk memahami, mengembangkan, dan memelihara sistem.<br>
3. Pemisahan Kepentingan: Memungkinkan pemisahan kepentingan dalam pengembangan perangkat lunak dengan memungkinkan tim yang berbeda untuk fokus pada paket yang berbeda tanpa perlu terlalu memikirkan detail implementasi dari paket lain.<br>
4. Pengelolaan Ketergantungan: Menunjukkan dependensi antar paket, yang sangat penting untuk analisis, karena memungkinkan identifikasi cepat dari potensi masalah integrasi dan ketergantungan dalam pengembangan.<br>
5. Penggunaan Ulang: Fasilitasi penggunaan ulang kode dengan memungkinkan paket yang serupa atau sama untuk digunakan dalam proyek lain atau dalam bagian yang berbeda dari sistem yang sama, dengan sedikit atau tanpa modifikasi.<br>
6. Visualisasi dan Dokumentasi: Menyediakan cara visual untuk mendokumentasikan struktur dan desain sistem yang membuatnya lebih mudah dipahami bagi para stakeholder, termasuk pengembang, manajer proyek, dan analis.<br>
<br>Package Diagram sangat berguna dalam proses desain dan dokumentasi sistem, khususnya dalam proyek-proyek besar yang memerlukan tingkat organisasi dan strukturisasi yang tinggi untuk mengelola kompleksitas.
</p>
</div>
</div>
<div class="col-md-6">
<div class="right-image">
<img src="assets/images/part10.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section my-services" data-section="section2">
<div class="container">
<div class="section-heading">
<h2>Notasi </h2>
<div class="line-dec"></div>
</div>
<div class="row" style="text-align: center;">
<h3>Komponen dasar dari Package Diagram</h3>
<span>Komposisi sebuah Package Diagram relatif sederhana. Setiap diagram hanya mencakup dua simbol:</span>
<div class="col-md-4"><br>
<img src="assets/images/part 2.png" alt="" />
<div class="service-item">
<h4>Package</h4>
<p>Mengelompokkan elemen-elemen umum berdasarkan data, perilaku, atau interaksi pengguna
</p>
</div>
</div>
<div class="col-md-4"><br>
<div class="service-item">
<img src="assets/images/part 3.png" alt="" /><br><br><br><br><br><br><br>
<h4>Dependency </h4>
Menggambarkan hubungan antara satu elemen (paket, elemen bernama, dll) dengan elemen lain.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section my-work" data-section="section3">
<div class="container">
<div class="section-heading">
<h2>Contoh Scenario.</h2>
<div class="line-dec"></div>
</div>
<div class="left-image-post" style="text-align: justify;">
<div class="row">
<div class="isotope-wrapper">
</div>
<div class="isotope-box">
<div class="isotope-item" data-type="nature">
<div class="col-xl-12">
<div class="left-image" >
<img
src="assets/images/part8.jpg"
alt="sq-sample26"/>
<div class="line-dec"><br>
<p>
Package Diagram yang menggambarkan komponen-komponen dan dependensi antara mereka dalam konteks sistem bisnis yang melibatkan pemesanan, pengiriman, akuntansi, dan interaksi dengan bank. Berikut adalah penjelasannya:<br>
1. UI (User Interface): Ini adalah paket yang mungkin berisi kelas-kelas dan antarmuka pengguna yang diperlukan untuk interaksi pengguna dengan sistem.<br>
2. Ordering: Paket ini bertanggung jawab atas proses pemesanan. Ia memiliki dependensi ke CustomerDB, yang menunjukkan bahwa ia memerlukan data dari basis data pelanggan untuk beroperasi. Paket ini juga bergantung pada Shipping dan Accounting, yang menandakan bahwa proses pemesanan memerlukan interaksi dengan pengiriman dan akuntansi.<br>
3. CustomerDB: Paket ini adalah database yang berisi informasi tentang pelanggan. Paket Ordering bergantung pada paket ini untuk mengakses data pelanggan.<br>
4. Shipping: Paket ini mengelola logistik pengiriman barang. Ia memiliki dependensi terhadap StockDB, yang menunjukkan kebutuhan akan informasi stok untuk mengatur pengiriman.<br>
5. StockDB: Paket ini adalah database yang berisi informasi tentang inventaris atau stok barang. Shipping bergantung pada paket ini.<br>
6. Accounting: Paket ini mengelola fungsi akuntansi dan keuangan. Ini memiliki dependensi dari Ordering dan ke Bank, yang menunjukkan bahwa ia memproses informasi keuangan yang berasal dari pemesanan dan berinteraksi dengan bank untuk transaksi keuangan.<br>
7. Bank: Paket eksternal yang berinteraksi dengan sistem, terutama dengan paket Accounting, untuk mengelola transaksi keuangan.<br>
Panah yang menghubungkan paket-paket menunjukkan arah dependensi. Misalnya, panah dari Ordering ke Shipping menunjukkan bahwa paket Ordering membutuhkan paket Shipping. Panah berwarna merah bisa digunakan untuk menekankan hubungan penting atau kritis dalam sistem.<br>
Diagram ini berguna untuk memvisualisasikan bagaimana berbagai bagian dari sistem ini saling bergantung. Ini membantu dalam analisis dan desain sistem dengan menunjukkan bagaimana paket-paket terpisah berkomunikasi dan bagaimana perubahan pada satu paket dapat mempengaruhi paket lain.<br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section contact-me" data-section="section4">
<div class="container">
<div class="section-heading">
<h2>Anggota Kelompok.</h2>
<div class="line-dec"></div>
<span>
1. Abi Fariz Wahid (K3522001)<br>
2. Agil Raihan Majid (K3522005)<br>
3. Ega Zaky Janitra (K3522023)<br>
4. Taufiq Ali Fauzi (K3522081)<br>
5. Zidan Firkhan Ali (K3522085)<br>
</span><br>
<b>Mata Kuliah Rekayasa Perangkat Lunak</b><br>
Tahun Ajaran 2023/2024 <br>
Angkatan 2022 <br>
</div>
</div>
</div>
</section>
</div>
</section>
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/isotope.min.js"></script>
<script src="assets/js/owl-carousel.js"></script>
<script src="assets/js/lightbox.js"></script>
<script src="assets/js/custom.js"></script>
<script>
//according to loftblog tut
$(".main-menu li:first").addClass("active");
var showSection = function showSection(section, isAnimate) {
var direction = section.replace(/#/, ""),
reqSection = $(".section").filter(
'[data-section="' + direction + '"]'
),
reqSectionPos = reqSection.offset().top - 0;
if (isAnimate) {
$("body, html").animate(
{
scrollTop: reqSectionPos
},
800
);
} else {
$("body, html").scrollTop(reqSectionPos);
}
};
var checkSection = function checkSection() {
$(".section").each(function() {
var $this = $(this),
topEdge = $this.offset().top - 80,
bottomEdge = topEdge + $this.height(),
wScroll = $(window).scrollTop();
if (topEdge < wScroll && bottomEdge > wScroll) {
var currentId = $this.data("section"),
reqLink = $("a").filter("[href*=\\#" + currentId + "]");
reqLink
.closest("li")
.addClass("active")
.siblings()
.removeClass("active");
}
});
};
$(".main-menu").on("click", "a", function(e) {
e.preventDefault();
showSection($(this).attr("href"), true);
});
$(window).scroll(function() {
checkSection();
});
</script>
</body>
</html>