227 lines
12 KiB
PHP
227 lines
12 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
require_once __DIR__ . '/store.php';
|
|
|
|
$plantumlSource = <<<'PLANTUML'
|
|
@startuml
|
|
left to right direction
|
|
skinparam packageStyle rectangle
|
|
skinparam shadowing false
|
|
skinparam actorStyle awesome
|
|
|
|
actor "User" as User
|
|
actor "Admin" as Admin
|
|
|
|
rectangle "Sistem Penjualan Kue Online\nSekut Bakery" {
|
|
usecase "Login User" as UC1
|
|
usecase "Melihat Produk" as UC2
|
|
usecase "Memasukkan Produk\nke Dalam Keranjang" as UC3
|
|
usecase "Checkout Keranjang\nPembelian" as UC4
|
|
usecase "Mengirim Bukti\nPembayaran" as UC5
|
|
usecase "Login Admin" as UC6
|
|
usecase "Mengolah Data\nKategori" as UC7
|
|
usecase "Mengolah Data\nProduk" as UC8
|
|
usecase "Mengolah Data\nPembelian" as UC9
|
|
usecase "Mencetak Laporan\nPembelian" as UC10
|
|
usecase "Mengelola Data\nPelanggan" as UC11
|
|
}
|
|
|
|
User --> UC1
|
|
User --> UC2
|
|
User --> UC3
|
|
User --> UC4
|
|
User --> UC5
|
|
Admin --> UC6
|
|
Admin --> UC7
|
|
Admin --> UC8
|
|
Admin --> UC9
|
|
Admin --> UC10
|
|
Admin --> UC11
|
|
@enduml
|
|
PLANTUML;
|
|
|
|
store_page_start(
|
|
'Use Case Diagram',
|
|
'Dokumentasi use case diagram versi pertama untuk Sistem Penjualan Kue Online Sekut Bakery, menampilkan aktor User dan Admin beserta fungsi utamanya.',
|
|
['noindex' => true]
|
|
);
|
|
?>
|
|
<section class="hero-panel mb-4 mb-lg-5">
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col-lg-7">
|
|
<span class="eyebrow">Dokumentasi Proyek</span>
|
|
<h1 class="display-title">Use case diagram versi pertama sudah tayang di web.</h1>
|
|
<p class="lead-copy">
|
|
Halaman ini menampilkan blueprint fungsional level tinggi untuk Sistem Penjualan Kue Online Sekut Bakery.
|
|
Versi yang dipasang memakai asosiasi langsung antara aktor dan use case, tanpa relasi <code><<include>></code> atau <code><<extend>></code>.
|
|
</p>
|
|
<div class="d-flex flex-wrap gap-2 mt-4">
|
|
<a class="btn btn-dark btn-lg" href="#diagram-use-case">Lihat diagram</a>
|
|
<a class="btn btn-outline-secondary btn-lg" href="index.php">Kembali ke katalog</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<aside class="documentation-note h-100">
|
|
<strong>Catatan implementasi</strong>
|
|
<p>
|
|
Ini adalah halaman dokumentasi analisis sistem untuk kebutuhan presentasi/laporan.
|
|
Beberapa use case di diagram merepresentasikan arah pengembangan aplikasi, jadi tidak selalu identik dengan fitur MVP yang sudah live saat ini.
|
|
</p>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="diagram-use-case" class="section-block pt-0">
|
|
<div class="section-heading mb-4">
|
|
<span class="eyebrow">Diagram Utama</span>
|
|
<h2 class="section-title">Use case diagram Sistem Penjualan Kue Online Sekut Bakery.</h2>
|
|
<p class="section-copy mb-0">
|
|
Diagram di bawah mengikuti versi pertama yang paling sederhana: dua aktor utama, satu system boundary,
|
|
dan relasi asosiasi langsung ke setiap use case inti.
|
|
</p>
|
|
</div>
|
|
|
|
<figure class="diagram-showcase mb-0">
|
|
<div class="diagram-scroll" aria-label="Diagram use case Sistem Penjualan Kue Online Sekut Bakery">
|
|
<svg viewBox="0 0 1200 760" role="img" aria-labelledby="useCaseTitle useCaseDesc" xmlns="http://www.w3.org/2000/svg">
|
|
<title id="useCaseTitle">Use case diagram versi pertama Sekut Bakery</title>
|
|
<desc id="useCaseDesc">Diagram dengan aktor User dan Admin yang terhubung langsung ke sebelas use case utama di dalam system boundary.</desc>
|
|
|
|
<rect class="diagram-boundary" x="250" y="48" width="700" height="664" rx="28" />
|
|
<text class="diagram-title" x="600" y="94" text-anchor="middle">Sistem Penjualan Kue Online</text>
|
|
<text class="diagram-boundary-label" x="600" y="120" text-anchor="middle">Sekut Bakery</text>
|
|
|
|
<circle class="diagram-actor" cx="116" cy="148" r="28" />
|
|
<line class="diagram-actor" x1="116" y1="176" x2="116" y2="258" />
|
|
<line class="diagram-actor" x1="72" y1="206" x2="160" y2="206" />
|
|
<line class="diagram-actor" x1="116" y1="258" x2="76" y2="320" />
|
|
<line class="diagram-actor" x1="116" y1="258" x2="156" y2="320" />
|
|
<text class="diagram-actor-label" x="116" y="360" text-anchor="middle">User</text>
|
|
|
|
<circle class="diagram-actor" cx="1084" cy="148" r="28" />
|
|
<line class="diagram-actor" x1="1084" y1="176" x2="1084" y2="258" />
|
|
<line class="diagram-actor" x1="1040" y1="206" x2="1128" y2="206" />
|
|
<line class="diagram-actor" x1="1084" y1="258" x2="1044" y2="320" />
|
|
<line class="diagram-actor" x1="1084" y1="258" x2="1124" y2="320" />
|
|
<text class="diagram-actor-label" x="1084" y="360" text-anchor="middle">Admin</text>
|
|
|
|
<ellipse class="diagram-node" cx="432" cy="170" rx="128" ry="36" />
|
|
<text class="diagram-node-label" x="432" y="176" text-anchor="middle">Login User</text>
|
|
|
|
<ellipse class="diagram-node" cx="432" cy="260" rx="128" ry="36" />
|
|
<text class="diagram-node-label" x="432" y="254" text-anchor="middle">Melihat Produk</text>
|
|
<text class="diagram-node-label--small" x="432" y="276" text-anchor="middle">Produk bakery</text>
|
|
|
|
<ellipse class="diagram-node" cx="432" cy="350" rx="144" ry="42" />
|
|
<text class="diagram-node-label" x="432" y="344" text-anchor="middle">Memasukkan Produk</text>
|
|
<text class="diagram-node-label--small" x="432" y="366" text-anchor="middle">ke Dalam Keranjang</text>
|
|
|
|
<ellipse class="diagram-node" cx="432" cy="450" rx="144" ry="42" />
|
|
<text class="diagram-node-label" x="432" y="444" text-anchor="middle">Checkout Keranjang</text>
|
|
<text class="diagram-node-label--small" x="432" y="466" text-anchor="middle">Pembelian</text>
|
|
|
|
<ellipse class="diagram-node" cx="432" cy="560" rx="144" ry="42" />
|
|
<text class="diagram-node-label" x="432" y="554" text-anchor="middle">Mengirim Bukti</text>
|
|
<text class="diagram-node-label--small" x="432" y="576" text-anchor="middle">Pembayaran</text>
|
|
|
|
<ellipse class="diagram-node" cx="768" cy="150" rx="128" ry="36" />
|
|
<text class="diagram-node-label" x="768" y="156" text-anchor="middle">Login Admin</text>
|
|
|
|
<ellipse class="diagram-node" cx="768" cy="240" rx="138" ry="42" />
|
|
<text class="diagram-node-label" x="768" y="234" text-anchor="middle">Mengolah Data</text>
|
|
<text class="diagram-node-label--small" x="768" y="256" text-anchor="middle">Kategori</text>
|
|
|
|
<ellipse class="diagram-node" cx="768" cy="340" rx="138" ry="42" />
|
|
<text class="diagram-node-label" x="768" y="334" text-anchor="middle">Mengolah Data</text>
|
|
<text class="diagram-node-label--small" x="768" y="356" text-anchor="middle">Produk</text>
|
|
|
|
<ellipse class="diagram-node" cx="768" cy="440" rx="138" ry="42" />
|
|
<text class="diagram-node-label" x="768" y="434" text-anchor="middle">Mengolah Data</text>
|
|
<text class="diagram-node-label--small" x="768" y="456" text-anchor="middle">Pembelian</text>
|
|
|
|
<ellipse class="diagram-node" cx="768" cy="540" rx="148" ry="42" />
|
|
<text class="diagram-node-label" x="768" y="534" text-anchor="middle">Mencetak Laporan</text>
|
|
<text class="diagram-node-label--small" x="768" y="556" text-anchor="middle">Pembelian</text>
|
|
|
|
<ellipse class="diagram-node" cx="768" cy="640" rx="152" ry="42" />
|
|
<text class="diagram-node-label" x="768" y="634" text-anchor="middle">Mengelola Data</text>
|
|
<text class="diagram-node-label--small" x="768" y="656" text-anchor="middle">Pelanggan</text>
|
|
|
|
<line class="diagram-connector" x1="160" y1="202" x2="304" y2="170" />
|
|
<line class="diagram-connector" x1="160" y1="214" x2="304" y2="260" />
|
|
<line class="diagram-connector" x1="160" y1="224" x2="288" y2="350" />
|
|
<line class="diagram-connector" x1="160" y1="234" x2="288" y2="450" />
|
|
<line class="diagram-connector" x1="160" y1="244" x2="288" y2="560" />
|
|
|
|
<line class="diagram-connector" x1="1040" y1="202" x2="896" y2="150" />
|
|
<line class="diagram-connector" x1="1040" y1="214" x2="906" y2="240" />
|
|
<line class="diagram-connector" x1="1040" y1="224" x2="906" y2="340" />
|
|
<line class="diagram-connector" x1="1040" y1="234" x2="906" y2="440" />
|
|
<line class="diagram-connector" x1="1040" y1="244" x2="916" y2="540" />
|
|
<line class="diagram-connector" x1="1040" y1="254" x2="920" y2="640" />
|
|
</svg>
|
|
</div>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="section-block pt-0">
|
|
<div class="row g-4">
|
|
<div class="col-lg-6">
|
|
<article class="actor-panel">
|
|
<div class="actor-panel__head">
|
|
<div>
|
|
<span class="card-kicker">Aktor 01</span>
|
|
<h3>User</h3>
|
|
</div>
|
|
<span class="actor-badge">User</span>
|
|
</div>
|
|
<p>Pelanggan berfokus pada alur pembelian: masuk ke sistem, melihat produk, mengisi keranjang, checkout, lalu mengirim bukti pembayaran.</p>
|
|
<ul class="usecase-list">
|
|
<li><span>1</span><div><strong>Login User</strong><br><small>Masuk ke sistem sebelum memulai transaksi.</small></div></li>
|
|
<li><span>2</span><div><strong>Melihat Produk</strong><br><small>Menjelajahi daftar produk kue yang tersedia.</small></div></li>
|
|
<li><span>3</span><div><strong>Memasukkan Produk ke Dalam Keranjang</strong><br><small>Menambah item pilihan ke keranjang belanja.</small></div></li>
|
|
<li><span>4</span><div><strong>Checkout Keranjang Pembelian</strong><br><small>Menyelesaikan transaksi dan membuat pesanan.</small></div></li>
|
|
<li><span>5</span><div><strong>Mengirim Bukti Pembayaran</strong><br><small>Mengunggah/menyerahkan bukti pembayaran setelah checkout.</small></div></li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<article class="actor-panel">
|
|
<div class="actor-panel__head">
|
|
<div>
|
|
<span class="card-kicker">Aktor 02</span>
|
|
<h3>Admin</h3>
|
|
</div>
|
|
<span class="actor-badge">Admin</span>
|
|
</div>
|
|
<p>Admin berfokus pada pengelolaan sistem: login ke dashboard lalu mengatur kategori, produk, pembelian, laporan, dan data pelanggan.</p>
|
|
<ul class="usecase-list">
|
|
<li><span>1</span><div><strong>Login Admin</strong><br><small>Mengakses area pengelolaan sistem.</small></div></li>
|
|
<li><span>2</span><div><strong>Mengolah Data Kategori</strong><br><small>Tambah, ubah, atau hapus kategori produk.</small></div></li>
|
|
<li><span>3</span><div><strong>Mengolah Data Produk</strong><br><small>Mengelola katalog produk yang dijual.</small></div></li>
|
|
<li><span>4</span><div><strong>Mengolah Data Pembelian</strong><br><small>Memeriksa dan memproses transaksi pelanggan.</small></div></li>
|
|
<li><span>5</span><div><strong>Mencetak Laporan Pembelian</strong><br><small>Menyusun laporan transaksi untuk kebutuhan operasional.</small></div></li>
|
|
<li><span>6</span><div><strong>Mengelola Data Pelanggan</strong><br><small>Memonitor data customer yang tersimpan di sistem.</small></div></li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-block pt-0">
|
|
<div class="surface-panel">
|
|
<div class="section-heading mb-4">
|
|
<span class="eyebrow">PlantUML</span>
|
|
<h2 class="section-title">Kode sumber diagram versi pertama.</h2>
|
|
<p class="section-copy mb-0">Kode ini sama dengan versi pertama yang sebelumnya sudah dipilih, jadi bisa langsung disalin untuk laporan atau digenerate ulang di PlantUML.</p>
|
|
</div>
|
|
<details class="code-panel" open>
|
|
<summary>Lihat kode PlantUML</summary>
|
|
<pre><code><?= h($plantumlSource) ?></code></pre>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
<?php store_page_end(); ?>
|