Software Design Document (SDD)

Kelompok 4

Toko Depot Gas Dan Galon Toko Agus

Dokumen Rancangan Perangkat Lunak

Nama Penyusun:

- Simon Leonardo Simanjuntak (Project Manager)

- Steven Meibi Saputra (Ketua Sistem Analisis)

- Johanes Dikael Agung Sinaga (Ketua Designer)
- Demas Afta Firjatullah (Technical Writer)
- Ryan Fakhri Rahmawan (Ketua Programmer)
- Aditia Rido Maulana (Testing Program)

Tanggal: 10 November 2025

Daftar Isi

1. PENDAHULUAN 2

1.1 Tujuan 2
 1.2 Ruang Lingkup 2

1.3 Ikhtisar 2

1.4 Referensi Material 2

1.5 Definisi dan Singkatan 2

2. GAMBARAN UMUM SISTEM 2

3. ARSITEKTUR SISTEM 2

3.1 Rancangan Arsitektur 2

3.2 Deskripsi Dekomposisi 3

3.3 Alasan Rancangan 3

4. RANCANGAN DATA 3

4.1 Deskripsi Data 3

4.2 Kamus Data 3

5. RANCANGAN KOMPONEN 3

6. RANCANGAN ANTARMUKA 4

6.1 Gambaran Umum Rancangan Antarmuka 4

6.2 Tampilan Layar 4

 6.3 Tampilan Layar dan Tindakan 4

7. MATRIKS PERSYARATAN 4

8. LAMPIRAN 4

1. PENDAHULUAN

Toko Agus adalah mitra terpercaya dalam memenuhi kebutuhan rumah tangga seperti air
minum dalam kemasan dan gas LPG. Toko Agus digunakan dalam proses pemesanan dan
pengelolaan persediaan stok. Sistem ini dirancang untuk membantu dalam pencatatan data
produk,menerima pesanan pelanggan,memantau jumlah stok barang, serta mengurangi kesalahan
dan pencatatan yang sering terjadi pada sistem manual. Ruang lingkup pada toko Agus adalah
membuat perancangan dan pembangunan sistem aplikasi pemesanan dan pengelolaan persediaan
stok berbasis website

1.1 Tujuan

Tujuan dari Toko Agus tersebut adalah untuk menghasilkan sebuah sistem aplikasi
berbasis web yang dapat digunakan dalam proses pemesanan dan pengelolahan persediaan
stok pada Toko Agus. Dengan adanya sistem ini, proses operasional toko diharapkan
menjadi lebih terorganisir, sehingga pelayanan kepada pelanggan dapat dilakukan secara
lebih cepat dan akurat. Tujuan SDD pada Toko Agus tersebut adalah mendefinisikan
struktur sistem secara detail, menjabarkan fungsionalitas sistem, menjadi acuan teknis.
SDD ini ditujukan untuk dua kelompok utama pengguna yaitu pengguna internal (Admin/
Toko Agus), pengguna eksternal (Pelanggan).

1.2 Ruang Lingkup

Berikan deskripsi dan ruang lingkup perangkat lunak dan jelaskan tujuan, sasaran, dan manfaat
proyek. Hal ini akan memberikan dasar untuk deskripsi singkat tentang produk proyek.

Ruang lingkup dari Toko Agus adalah membuat perancangan dan pembangunan sistem aplikasi
pemesanan dan pengelolaan persediaan stok berbasis web pada Toko agus, yang khusus ditujukan
untuk melayani warga Rusun Rawa Bebek. Sasaran pada proyek ini adalah pihak internal (pemilik
dapat mengelola stok serta transaksi dengan lebih efisien),dan pihak eksternal (pelanggan Toko
Agus agar dapat melakukan pemesanan secara cepat dan transparan tanpa harus datang langsung
ketoko). Manfaat yang dihasilkan dari pengembanan sistem ini yaitu ada tiga 3 pihak yaitu:

[Link] pemilik toko (Admin)

● Mengurangi potensi kesalahan dalam pencatatan manual.

● Mempercepat proses pelayanan pelanggan
● Laporan penjualan dapat diakses dan dicetak dengan cepat.
 2. Bagi pelanggan

● Dapat melakukan pemesanan dengan mudah melalui web kapan pun

● Mendapat informasi stok dan harga produk secara real-time
● Dapat memantau status pesanan tanpa perlu menghubungi toko langsung

[Link] sistem bisnis

● Meningkatkan efisiensi operasional dan daya saing UKM.

● Mendorong digitalisasi usaha mikro agar lebih modern dan teritegrasi

1.3 Ikhtisar

1. Pendahuluan : Berisi latar belakang, ruang lingkup, tujuan, ikhtisar, referensi material dan
definisi & singkatan..

2. Gambaran Umum Sistem : berisi fungsi dan cara kerja sistem.

3. Arsitektur Sistem : Berisi Rancangan arsitektur, deskirpsi dekomposisi, alasan rancangan.

4. Rancangan Data : Deskripsi data, kamus data.

5. Rancangan Komponen : berisi struktur dan hubungan antarbagian utama dalam sistem.

6. Rancangan Antarmuka : Berisi rancangan umum antarmuka, tampilan layar, tampilan layar dan
tindakan.

7. Matriks persyaratan : berisi untuk memetakan kebutuhan sistem.

8. Lampiran : berisi bukti pendukung hasil penelitian atau pengembangan sistem.

1.4 Referensi Material

 Bagian ini memuat daftar dokumen, sumber, atau referensi yang digunakan sebagai acuan
dalam penyusunan serta pelaksanaan rencana pengujian sistem aplikasi. Referensi ini
digunakan untuk memastikan metode pengujian, teknologi, dan pendekatan yang
digunakan sesuai dengan standar dan teori yang berlaku.

Daftar referensi material nya menggunakan SDLC Model Waterfall, Panduan pengujian
blackbox Testing.

1.5 Definisi dan Singkatan

ISTILAH DEFINISI

SDD( Sofware Dokumen yang menjelaskan rancangan atau

Design Description) desain perangkat lunak secara detail sebelum
diimplementasikan.

SDLC (Software Metodologi pengembangan perangkat lunak

Development Life yang mencakup tahap perencanaan, analisis,
Cycle) perancangan, implementasi, pengujian, dan
pemeliharaan.

Waterfall Model Model pengembangan perangkat lunak yang

bersifat berurutan (linear), di mana setiap
tahap dilakukan secara bertahap dari analisis
hingga pengujian

Front-End Bagian dari aplikasi web yang berinteraksi

langsung dengan pengguna, meliputi tampilan
antarmuka (UI).

Back-End Bagian dari aplikasi yang mengatur logika,

 pemrosesan data, dan koneksi ke database di
sisi server.

2. GAMBARAN UMUM SISTEM

Deskripsi Umum Proyek

Proyek ini berfokus pada perancangan dan pembangunan sistem aplikasi pemesanan serta
pengelolaan persediaan stok berbasis web pada Toko Agus, sebuah usaha kecil menengah
(UKM) yang bergerak di bidang penjualan air minum dalam kemasan dan gas LPG di Rusun
Rawa Bebek, Jakarta Timur. Sebelum adanya sistem ini, seluruh aktivitas pemesanan dan
pencatatan stok di Toko Agus masih dilakukan secara manual menggunakan buku catatan. Hal
tersebut sering menimbulkan masalah seperti kesalahan pencatatan, keterlambatan pemrosesan
pesanan, serta kesulitan dalam membuat laporan penjualan. Oleh karena itu, dibutuhkan solusi
digital yang dapat membantu pemilik toko dalam mengelola kegiatan operasional secara efisien,
akurat, dan terorganisir.

3. ARSITEKTUR SISTEM

3.1 Rancangan Arsitektur

Sistem Toko Agus dirancang menggunakan arsitektur client–server berbasis web. Bagian front-
end ditujukan untuk pengguna eksternal (pelanggan) dan bagian back-end untuk pengguna
internal (admin/toko).
 ● Client (Front-End):
Berupa tampilan web yang diakses melalui browser.
Dibangun menggunakan HTML, CSS, dan PHP dengan logika sederhana untuk
menampilkan produk, melakukan pemesanan, dan mengirim data ke server.
● Server (Back-End):
Menggunakan PHP sebagai bahasa pemrograman utama untuk mengelola proses bisnis,
autentikasi pengguna, manajemen produk, dan pesanan.
● Database:
Menggunakan MySQL untuk menyimpan data produk, pelanggan, pesanan, dan bukti
pembayaran.

Struktur Modul Utama:

● Modul Otentikasi (login/[Link])

- Mengelola proses masuk dan keluar admin.
- Memverifikasi kredensial pengguna terhadap data di database.
● Modul Produk ([Link], tambah_produk.php, edit_produk.php,
hapus_produk.php)
- Menyediakan CRUD (Create, Read, Update, Delete) untuk data produk seperti air galon
dan gas LPG.
● Modul Pesanan ([Link], [Link], cek_pesanan.php)
- Mengatur alur pemesanan pelanggan dari input pesanan hingga konfirmasi pembayaran.
● Modul Laporan ([Link])
- Menyediakan rekap transaksi dan laporan stok untuk pemilik toko.
● Modul Informasi ([Link], [Link])
- Menyediakan informasi umum mengenai toko, alamat, dan kontak.

3.2 Deskripsi Dekomposisi

Sistem Toko Agus dibangun dengan pendekatan berbasis fungsional dan dipecah menjadi
beberapa subsistem (modul) utama agar pengelolaan kode dan pengembangan lebih
terstruktur. Setiap modul memiliki tanggung jawab tertentu, namun tetap saling
berhubungan untuk menjalankan keseluruhan proses bisnis toko — mulai dari pengelolaan
produk hingga pemesanan dan laporan.
 3.2.1 Dekomposisi Subsistem (Functional Decomposition)

Nama Subsistem Deskripsi Fungsi Utama Interaksi dengan Modul lain

Modul Autentikasi Mengelola proses autentikasi Terhubung ke modul

(login/logout) dan otorisasi admin. Dashboard dan Produk setelah
Menjamin hanya admin login berhasil.
terdaftar yang bisa mengakses
dashboard.

Modul Produk Menyediakan fitur CRUD Berinteraksi dengan database

(Create, Read, Update, Delete) tabel produk dan modul
untuk menambah, Pesanan untuk menampilkan
menampilkan, dan stok produk.
memperbarui data produk
(galon & gas LPG)

Modul Pesanan Menangani input pemesanan Berinteraksi dengan tabel

pelanggan, menyimpan data pesanan dan tabel bukti, serta
pesanan, menampilkan status dapat diakses oleh admin
pesanan, serta unggah bukti melalui Dashboard.
pembayaran.

Modul Laporan Menghasilkan rekap Mengambil data dari tabel

penjualan, stok, dan data pesanan dan tabel produk.
pelanggan untuk pemilik toko.

Modul Dashboard Admin Sebagai pusat kontrol bagi Menggabungkan semua modul
admin untuk memantau utama (Produk, Pesanan,
produk, pesanan, dan laporan. Laporan).

Modul Informasi Umum Menyediakan halaman Tidak terhubung langsung ke

“tentang kami” dan “kontak” database, hanya menampilkan
untuk pelanggan. informasi statis.

3.2.2 Dekomposisi Berorientasi Data

Dekomposisi berorientasi data menggambarkan bagaimana aliran data berpindah

antar proses di dalam sistem Toko Agus. Setiap proses memanipulasi data dari input
hingga menghasilkan output. Pendekatan ini digunakan untuk memodelkan
bagaimana data pesanan, produk, dan laporan diproses oleh sistem.

Entitas Utama
1. Admin
● Mengelola produk, stok, pesanan, dan laporan.
● Dapat menambah, memperbarui, dan menghapus data.

2. Pelanggan
 ● Melihat daftar produk dan melakukan pemesanan melalui form pemesanan.

3. Database
● Menyimpan semua data penting seperti produk, pesanan, dan bukti
pembayaran.

3.2.4 Hubungan antar Subsistem

● Modul Pesanan bergantung pada Produk, karena stok dikurangi ketika pesanan dibuat
● Modul Laporan mengambil data dari pesanan dan produk.
● Modul Dashboard menjadi penghubung utama antara admin dengan seluruh
subsistem.
● Modul Autentikasi menjadi pintu masuk wajib sebelum admin dapat mengakses
fungsi lainnya.

3.3 Alasan Rancangan

Pemilihan arsitektur sistem Toko Agus didasarkan pada kebutuhan untuk menghasilkan
sistem yang stabil, mudah dikembangkan, dan efisien dalam pengelolaan data serta interaksi
pengguna. Arsitektur yang digunakan adalah arsitektur berbasis client-server dengan
pendekatan Model-View-Controller (MVC).

1. Alasan Pemilihan Arsitektur

Arsitektur client-server berbasis MVC dipilih karena memiliki keunggulan berikut:

● Pemrosesan yang terpisah: Proses logika aplikasi dilakukan di sisi server, sedangkan
tampilan dan interaksi pengguna dikelola di sisi client. Ini membantu menjaga performa
aplikasi tetap cepat dan responsif.
● Struktur modular: Pola MVC memisahkan antara Model (data dan logika bisnis), View
(antarmuka pengguna), dan Controller (penghubung antara input pengguna dan sistem).
 Pemisahan ini membuat kode lebih mudah dikelola, diuji, dan dikembangkan di masa
depan.
● Kemudahan pemeliharaan: Jika terjadi kesalahan pada salah satu bagian (misalnya
tampilan atau database), pengembang dapat memperbaikinya tanpa memengaruhi seluruh
sistem.
● Keterbukaan terhadap pengembangan fitur baru: Penambahan modul baru seperti
sistem pembayaran digital atau laporan penjualan otomatis dapat dilakukan tanpa
mengubah struktur utama sistem.

2. Isu-Isu Kritis yang Dipertimbangkan

Dalam proses perancangan, beberapa isu kritis yang menjadi pertimbangan adalah:

● Keamanan Data: Karena sistem memuat informasi pelanggan, pesanan, dan stok
barang, maka dibutuhkan autentikasi pengguna (login admin dan pelanggan) serta
pembatasan hak akses.
● Konsistensi Data: Sistem harus menjamin bahwa setiap transaksi (pesanan atau
pengurangan stok) tercatat dengan benar dan tidak menimbulkan konflik data.
● Kemudahan Akses: Sistem berbasis web dipilih agar dapat diakses dari perangkat apa
pun tanpa perlu instalasi khusus.
● Performa dan Skalabilitas: Sistem harus tetap berjalan stabil meskipun jumlah
pelanggan meningkat, dengan pengolahan data yang efisien di sisi server.

3. Trade-Off yang Dipertimbangkan

Dalam menentukan arsitektur, beberapa alternatif dipertimbangkan dengan kelebihan dan

kekurangannya:

Arsitektur Kelebihan Kekurangan Keputusan

Monolitik Implementasi Sulit dikembangkan Tidak dipilih karena

mudah, semua dan diuji secara kurang fleksibel
modul dalam satu terpisah, perubahan
kesatuan kecil dapat
memengaruhi seluruh
sistem

Microservices Skalabilitas tinggi, Kompleks untuk Tidak dipilih karena

setiap layanan proyek kecil, terlalu kompleks
terpisah memerlukan untuk skala UKM
 pengelolaan server dan
komunikasi antar
layanan

Client-Server(MVC) Pemisah tanggung Membutuhkan Dipilih karena paling

jawab jelas, mudah koordinasi antar layer sesuai dengan
dikembangkan dan (Model, View, kebutuhan dan
dipelihara Controller) sumber daya tim

Arsitektur berbasis client-server dengan model MVC memberikan keseimbangan terbaik

antara kinerja, kemudahan pengembangan, keamanan, dan efisiensi untuk proyek Toko
Agus. Pendekatan ini juga sejalan dengan metodologi SDLC Waterfall, yang
memungkinkan setiap tahap pengembangan dilakukan secara terstruktur dan
terdokumentasi dengan baik.

4. RANCANGAN DATA

Desain data merupakan salah satu aspek penting dalam pengembangan sistem, karena
berfungsi untuk mengatur dan menyimpan data dengan efisien serta memastikan integritas antar
tabel.

Pada sistem Aplikasi Pemesanan dan Persediaan Stok Berbasis Web pada Toko Agus, terdapat
tiga entitas utama, yaitu Admin, Pesanan, dan Produk.

4.1 Deskripsi Data

1. Data Admin

● Deskripsi:
Tabel admin digunakan untuk menyimpan informasi pengguna (administrator) yang berhak
mengakses halaman pengelolaan data di sistem.
Admin memiliki peran untuk menambah, mengedit, dan menghapus produk, serta mengubah
status pesanan pelanggan.

● Relasi:
 Tabel ini tidak memiliki relasi langsung dengan tabel lain, namun berfungsi untuk otentikasi
akses ke sistem manajemen.

2. Data Produk

● Deskripsi:
Tabel produk menyimpan seluruh informasi tentang barang yang dijual di Toko Agus seperti
Aqua galon, Air Biru galon, Le Mineral 15 liter, Aqua Vit dus, dan gas LPG 3 kg.
Setiap produk memiliki nama, harga, stok, dan gambar produk yang ditampilkan di website.

● Relasi:
Tabel produk berelasi dengan tabel pesanan melalui kolom id_produk.
Satu produk dapat dipesan oleh banyak pelanggan (relasi one-to-many).

3. Data Pesanan

● Deskripsi:
Tabel pesanan menyimpan seluruh transaksi pemesanan dari pelanggan, termasuk informasi
produk yang dipesan, jumlah pesanan, alamat pengiriman, metode pembayaran, bukti
transfer (jika ada), serta status pesanan.

● Relasi:
Tabel pesanan memiliki relasi ke tabel produk melalui kolom id_produk, untuk menunjukkan
produk mana yang dipesan pelanggan.

4.2 Kamus Data

Kamus data berikut merupakan representasi teknis dari tabel-tabel utama yang digunakan dalam
sistem Toko Agus. Kamus ini melengkapi bagian 4.1 dengan menampilkan setiap atribut, tipe
data, panjang, serta fungsinya dalam database.

● Tabel Admin

Menyimpan informasi akun admin yang diperlukan untuk proses autentikasi saat login ke
dalam sistem.
Field Tipe Data Panjang Keterangan

id int 5 Primary key, auto increment

username varchar 33 Nama pengguna admin untuk login

password varchar 32 Kata sandi admin (dihash untuk kemanan)

● Tabel Pesanan

Menyimpan informasi detail mengenai pesanan yang telah dilakukan oleh pembeli,
termasuk nama produk, jumlah, metode pembayaran, dan yang lainnya.
 Field Tipe Data Panjang Keterangan

id int 5 Primary key, auto increment

id_produk int 5 Relasi ke ID produk yang dipesan

nama_pembeli varchar 20 Nama pelanggan yang melakukan

pemesanan

alamat text - Alamat lengkap tujuan pengiriman

jumlah int 11 jumlah produk yang dipesan

metode_pembayaran varchar 50 metode pembayaran yang digunakan

(cash atau transfer)

bukti varchar 50 Nama file bukti pembayaran

tanggal_pesan timestamp - Waktu Pemesanan dilakukan

created_at datetime - Waktu data pesanan dibuat

status enum - Status pesanan (Menunggu, Diproses,

Selesai)

● Tabel Produk

Menyimpan informasi lengkap mengenai berbagai produk yang tersedia di toko, termasuk
nama produk, harga, stok, dan gambar.
Field Tipe Data Panjang Keterangan

id int 5 Primary key, auto increment sebagai

identitas unik produk

nama_produk varchar 20 Nama produk yang dijual

harga decimal - Harga satuan produk

stok int 11 Jumlah stok produk yang tersedia

gambar varchar 50 Nama file gambar produk

Relasi Antar Tabel

1. Produk – Pesanan:

● Setiap pesanan berisi satu produk, dan satu produk dapat muncul di banyak pesanan.
 ● Relasi ini menggunakan kolom id_produk pada tabel pesanan yang merujuk ke kolom id
pada tabel produk.

2. Admin – (Tabel Lain):

● Admin tidak memiliki relasi langsung ke tabel lain, tetapi berperan penting dalam
mengelola data produk dan pesanan.

Kebijakan Data

● Keamanan Data:
Password admin disimpan dalam bentuk hash untuk mencegah akses tidak sah.
Informasi pelanggan seperti alamat dan nomor telepon dijaga kerahasiaannya sesuai
kebijakan privasi toko.

● Integritas Data:
Relasi antar tabel dijaga menggunakan foreign key agar data pesanan selalu merujuk ke
produk yang valid.

● Kinerja dan Skalabilitas:

Penggunaan indeks pada kolom id_produk membantu mempercepat proses query.
Struktur database dibuat fleksibel agar dapat menampung pertambahan data pesanan dan
produk seiring waktu.

5. RANCANGAN KOMPONEN

Bagian ini menjelaskan bagaimana sistem Toko Agus diuraikan ke dalam komponen-
komponen utama, beserta fungsi, tanggung jawab, dan interaksi antar komponennya.
Tujuan rancangan ini adalah agar setiap bagian sistem memiliki peran yang jelas dan
mudah dikembangkan di masa depan.

5.1 Gambaran Umum Komponen

Sistem Toko Agus terdiri dari dua lapisan utama:

● Lapisan Front-End (Client Side)

Menyediakan antarmuka yang digunakan oleh pelanggan dan admin untuk berinteraksi
dengan sistem.
● Lapisan Back-End (Server Side)
Menangani logika bisnis, pengelolaan data, dan komunikasi dengan database MySQL.
 Kedua lapisan ini terhubung melalui permintaan HTTP (request-response) dengan format
data yang diolah menggunakan PHP dan HTML.

5.2 Struktur Komponen Utama

Nama Komponen Deskripsi Fungsi Utama Interaksi dengan k

omponen lain

[Link] Komponen dasar yang Membuat koneksi dan Digunakan oleh semua
mengatur koneksi ke menanganni error koneksi PHP lain (produk,
database MySQL database pesanan, laporan, dll)

[Link] Modul autentikasi admin memverifikasi username dan Mengarahkan ke

password admin, mengatur [Link] bila
sesi login login sukses

[Link] Modul keluar sistem Menghapus sesi login admin Berinteraksi dengan
dan mengembalikan ke [Link]
halaman login

[Link] Halaman Utama Admin Menampilkan ringkasan data Mengambil data dari
produk, pesanan, dan laporan [Link] dan
[Link]

[Link] Modul manajemen Menampilkan daftar Produk, Terhubung ke tabel

Produk menambah, mengedit, dan tb_produk di database
menghapus data

tambah_produk.php Submodul produk Formulir untuk Menulis data ke

menambahkan produk baru tb_produk

edit_produk.php Submodul produk Memperbarui data produk Mengupdate data di

yang sudah ada tb_produk

hapus_produk.php Submodul produk Menghapus data produk dari Menghapus data di

database tb_produk

[Link] Modul pemesanan Formulir pemesanan Menyimpan data di

pelanggan (nama, alamat, tb_produk
produk, jumlah, pembayaran)

[Link] Modul daftar pesanan Menampilkan daftar pesanan Membaca data dari
pelanggan untuk admin tb_pesanan dan
tb_produk

cek_pesanan.php Modul Pelanggan Menampilkan status pesanan Membaca data dari

berdasarkan ID tb_pesanan

[Link] Modul Laporan Menyusun laporan transaksi Membaca data dari

penjualan dan stok produk tb_pesanan dan
tb_produk

[Link] Halaman Informasi Menampilkan profil dan Tidak terhubung

 umum sejarah Toko Agus dengan database

[Link] Halaman Kontak Menampilkan informasi Tidak terhubung

kontak dan lokasi Toko Agus dengan database

5.3 Hubungan Antar Komponen

Penjelasan :

● Komponen [Link] berfungsi sebagai pintu masuk sistem bagi admin.

● Setelah login berhasil, [Link] menjadi pusat navigasi untuk semua fitur
manajemen.
● Komponen [Link] dan [Link] merupakan inti dari sistem pengelolaan data.
● Komponen [Link] digunakan untuk menampilkan data transaksi yang telah
diproses.
● Komponen [Link] dan [Link] mendukung kebutuhan informasi publik.

5.4 Alur Komunikasi Komponen

 ● Admin melakukan login melalui [Link], sistem memverifikasi
kredensial di database.
● Setelah berhasil, admin diarahkan ke [Link] yang menampilkan
data ringkasan dari modul produk dan pesanan.
● Pelanggan dapat mengakses halaman [Link] dan melakukan pemesanan
lewat [Link].
● Data pesanan disimpan ke tb_pesanan, dan pelanggan bisa melihat
statusnya di cek_pesanan.php.
● Admin dapat memproses pesanan di [Link] dan memperbarui status
pesanan.
● Semua transaksi dicatat dan dapat direkap oleh [Link].

5.5 Kelebihan Rancangan Komponen

● Terstruktur: Setiap komponen memiliki tanggung jawab tunggal (Single
Responsibility).

● Modular: Penambahan fitur baru (misalnya notifikasi email atau ekspor laporan) dapat
dilakukan dengan menambah file modul baru tanpa memengaruhi modul lain.

● Reusable: Komponen seperti [Link] dapat digunakan di seluruh bagian sistem.

● Mudah Dipelihara: Kesalahan atau pembaruan dapat dilakukan di level file tanpa
mengganggu keseluruhan sistem.
6. RANCANGAN ANTARMUKA

6.1 Gambaran Umum Antarmuka

Antarmuka website Toko Agus dirancang dengan tampilan sederhana, informatif, dan mudah
digunakan. Tujuan utama desain ini adalah agar pelanggan dapat dengan cepat melihat produk yang
dijual (seperti air minum dan gas elpiji), melakukan pemesanan, serta mengakses informasi toko tanpa
kesulitan.

Secara umum, antarmuka menggunakan tema warna biru dan putih yang memberikan kesan
bersih dan profesional. Setiap halaman memiliki tata letak konsisten dengan navigasi utama di bagian
atas (header), konten utama di tengah, serta footer di bagian bawah yang menampilkan informasi hak
cipta.

6.2 Tampilan Layar

Bagian ini menjelaskan rancangan tampilan layar pada sistem Website Toko Agus yang terdiri
dari beberapa halaman utama, yaitu: halaman Home, Produk, Cek Pesanan, Tentang Kami, dan
Kontak. Setiap layar dirancang dengan tata letak sederhana agar mudah digunakan oleh pelanggan.

6.2.1 Home
 Halaman ini merupakan tampilan pertama saat pengguna membuka website. Fungsinya
adalah sebagai halaman sambutan bagi pengunjung dengan menampilkan latar belakang
bergambar tumpukan galon dan tabung gas.

Keterangan :

<Button 1> : Navigasi ke halaman Home

<Button 2> : Navigasi ke halaman Home

<Button 3> : Navigasi ke halaman Daftar Produk

<Button 4> : Navigasi ke halaman Cek Pesanan

<Button 5> : Navigasi ke halaman Tentang Kami

<Button 6> : Navigasi ke halaman Kontak

<image 1> :Gambar dari tempat usaha Toko Agus

<tittle 1> : Menampilkan “Selamat Datang di Toko Agus”

<text 1> : Menampilkan teks © 2025 Toko Agus

<Button 7> : Navigasi ke halaman Login Admin

6.2.2 Produk

Halaman produk menampilkan daftar barang dalam bentuk kartu yang berisi
gambar, nama produk, harga, stok, dan tombol Pesan. Tata letak disusun grid agar mudah
dilihat dan dibandingkan oleh pengguna.

Keterangan :

<heading 1> : Menampilkan judul “Daftar Produk”

<card img> : Menampilkan gambar produk

<card tittle> : Menampilkan nama menu dari gambar produk

<card price> : Digunakan untuk menampilkan harga dari gambar produk

<card stok> : Menampilkan stok barang

<Button 8> : Navigasi ke halaman Pesan

6.2.3 Form Pemesanan

Halaman pemesanan menampilkan detail produk di sisi kiri dan form pemesanan
di sisi kanan. Pembeli mengisi data seperti nama, alamat, jumlah, dan metode
pembayaran, lalu menekan tombol Kirim Pesanan. Tersedia juga tombol untuk kembali ke
daftar produk.

Keterangan :

<heading 2> : Menampilkan judul utama dari konten halaman yaitu “Form
Pemesanan”

<label 1> : Menampilkan teks Nama Pembeli

<Input 1> : Digunakan untuk memasukkan nama pembeli

<label 2> : Menampilkan teks Alamat

<Input 2> : Digunakan untuk memasukkan alamat pembeli

<label 3> : Menampilkan teks Jumlah

<Input 3> : Digunakan untuk memasukkan jumlah yang di beli

<label 4> : Menampilkan teks Metode Pembayaran

<Input 4> : Digunakan untuk memasukkan jenis metode pembayaran

<Button 9> : Digunakan untuk navigasi ke Kirim Pesanan

<Button 10> : Digunakan untuk navigasi ke Halaman Daftar Produk

6.2.4 Cek Pesanan

Halaman cek pesanan menampilkan data pesanan dalam bentuk tabel yang memuat informasi
seperti nama pembeli, produk, jumlah, metode pembayaran, tanggal, dan status.

Keterangan :

<heading 3> : Menampilkan judul “Daftar Semua Pesanan”

<field 1> : Menampilkan Field “No”

<field 2> : Menampilkan Field “Nama Pembeli”

<field 3> : Menampilkan Field “Produk”

<field 4> : Menampilkan Field “Jumlah”

<field 5> : Menampilkan Field “Pembayaran”

<field 6> : Menampilkan Field “Tanggal”

<field 7> : Menampilkan Field “Status”

6.2.5 Tentang Kami

Halaman Tentang Kami menampilkan informasi mengenai toko dalam bentuk teks judul dan
keterangan.

Keterangan :

<tittle 2> : Menampilkan judul “Tentang Kami”

<text 2> : Digunakan untuk menampilkan teks isi dari Tentang Kami

6.2.6 Kontak
 Halaman Kontak menyajikan informasi penting seperti nomor WhatsApp dan data rekening bank
untuk pembayaran.

Keterangan :

<tittle 3> : Menampilkan judul utama dari konten halaman yaitu “Hubungi Kami”

<button 11> : Digunakan untuk navigasi ke whatsapp

<Text 3> : Digunakan untuk menampilkan nomor whatsapp

<svg 1> : Digunakan untuk menampilkan logo bank BCA

<text 4> : Digunakan untuk menampilkan nomor rekening dan nama

6.3 Objek Layar dan Tindakan

Diskusi tentang objek layar dan tindakan yang terkait dengan objek tersebut.
 7. Matriks Persyaratan

Matriks persyaratan merupakan bagian yang berfungsi untuk memetakan keterkaitan antara kebutuhan
yang telah dijelaskan pada dokumen Software Requirement Specification (SRS) dengan komponen sistem,
modul, serta struktur data yang dirancang dalam sistem Toko Agus.

Melalui matriks ini, setiap kebutuhan fungsional dan non-fungsional dapat ditelusuri hingga tahap
implementasi, sehingga memastikan bahwa seluruh aspek kebutuhan pengguna telah diakomodasi dengan
baik di dalam sistem.

Pada sistem Toko Agus, kebutuhan fungsional mencakup kemampuan autentikasi untuk admin agar dapat
mengakses halaman pengelolaan, pengelolaan data produk yang mencakup proses tambah, ubah, dan
hapus, serta penyediaan daftar produk lengkap yang dapat dilihat oleh pelanggan secara langsung melalui
antarmuka web. Sistem juga harus memungkinkan pelanggan melakukan pemesanan, memeriksa status
pesanan, serta memungkinkan admin memperbarui status pesanan sesuai proses yang sedang berjalan.

Selain itu, sistem wajib memiliki kemampuan untuk menampilkan laporan transaksi penjualan dan stok
barang agar pemilik toko dapat memantau kinerja penjualan dengan mudah.

Sementara untuk kebutuhan non-fungsional, sistem Toko Agus dirancang berbasis web dengan arsitektur
client–server sehingga dapat diakses melalui browser tanpa perlu instalasi tambahan. Keamanan data juga
menjadi aspek penting, di mana sandi admin disimpan dalam bentuk terenkripsi untuk menjaga
kerahasiaan informasi. Antarmuka sistem dirancang sederhana, informatif, dan mudah digunakan baik
oleh pengguna internal maupun pelanggan.

Secara keseluruhan, seluruh kebutuhan yang tercantum dalam SRS telah diimplementasikan melalui
modul-modul seperti login, produk, pesanan, laporan, dan dashboard, yang saling terintegrasi dengan
database utama. Dengan demikian, matriks persyaratan ini menunjukkan bahwa sistem Toko Agus telah
memenuhi spesifikasi yang ditetapkan serta siap digunakan dalam operasional toko sehari-hari.

8. Lampiran (Bagian ini opsional)

 Lampiran ini berisi bukti, hasil pengujian, serta informasi tambahan yang mendukung
proses pengembangan dan implementasi sistem Aplikasi Pemesanan dan Persediaan Stok
Berbasis Web pada Toko Agus.

8.1 Struktur Direktori Program

Berikut struktur folder utama dari sistem Toko Agus:

No. Nama Folder / File Keterangan

1 /[Link] Halaman utama website Toko Agus

2 /[Link] Form login untuk admin

3 /[Link] Modul untuk keluar dari sistem

4 /[Link] Halaman utama admin berisi ringkasan data

5 /[Link] Halaman pengelolaan produk

6 /tambah_produk.php Form untuk menambah produk baru

7 /edit_produk.php Form untuk mengubah data produk

8 /hapus_produk.php Proses penghapusan data produk

9 /[Link] Form pemesanan untuk pelanggan

10 /[Link] Daftar pesanan pelanggan untuk admin

 11 /cek_pesanan.php Fitur untuk pelanggan melihat status pesanan

12 /[Link] Modul untuk menampilkan laporan transaksi

13 /[Link] Halaman profil dan informasi toko

14 /[Link] Halaman informasi kontak dan rekening toko

15 /[Link] File koneksi database MySQL

16 /assets/ Folder berisi file CSS, JS, dan gambar

17 /uploads/ Folder untuk menyimpan bukti pembayaran

pelanggan

Struktur di atas memperlihatkan pemisahan yang jelas antara file program utama, aset
pendukung (gambar, CSS, JavaScript), serta direktori upload untuk file bukti pembayaran
pelanggan.

8.2 Bukti Pengujian Sistem (Black Box Testing)

Metode pengujian yang digunakan adalah Black Box Testing, untuk memastikan sistem bekerja
sesuai dengan kebutuhan tanpa melihat kode program secara langsung.
Berikut hasil pengujian fungsi utama:

No. Fungsi yang Diuji Hasil yang Diharapkan Hasil Status

Aktual
 1 Login admin Admin berhasil masuk ke Sesuai Lulus
dengan kredensial halaman dashboard
valid

2 Menambah data Data produk tersimpan di Sesuai Lulus

produk baru database dan tampil di
halaman produk

3 Pelanggan Data pesanan tercatat di Sesuai Lulus

melakukan database
pemesanan

4 Menampilkan Status pesanan tampil Sesuai Lulus

status pesanan sesuai kondisi data
pelanggan

5 Menampilkan Laporan menampilkan Sesuai Lulus

laporan transaksi data sesuai hasil
penjualan

8.3 Teknologi yang Digunakan

Komponen Sistem Teknologi / Alat yang Digunakan

Bahasa Pemrograman PHP (Native)

Basis Data MySQL

Antarmuka Pengguna HTML, CSS

Model Pengembangan SDLC – Waterfall

 Arsitektur Sistem Client–Server dengan pola MVC sederhana

Metode Pengujian Black Box Testing

8.4 Tim Pengembang Proyek

No. Nama Anggota Peran / Jabatan dalam Proyek

1 Simon Leonardo Simanjuntak Project Manager

2 Steven Meibi Saputra Ketua Sistem Analisis

3 Johanes Dikael Agung Sinaga Ketua Designer

4 Demas Afta Firjatullah Technical Writer

5 Ryan Fakhri Rahmawan Ketua Programmer

6 Aditia Rido Maulana Testing Program

8.5 Kesimpulan Lampiran

Seluruh tahapan mulai dari perancangan, implementasi, hingga pengujian sistem Toko Agus
telah dilakukan sesuai dengan standar pengembangan perangkat lunak berbasis SDLC model
Waterfall. Sistem terbukti berjalan stabil, fungsionalitasnya sesuai dengan kebutuhan pengguna,
dan siap digunakan untuk menunjang operasional toko secara efisien dan terkomputerisasi.