PROJECT CHARTER

SISTEM INFORMASI PENJUALAN BERBASIS WEBSITE

Oleh:
MUHAMMAD SIDDIK, M.Kom
INSTITUT BISNIS DAN TEKNOLOGI PELITA INDONESIA

PELATIHAN DAN UJI SERTIFIKASI

JUNIOR SOFTWARE ENGINEER
PROGRAM SERTIFIKASI PENDIDIK DAN
TENAGA KEPENDIDIKAN DIREKTORAT
SUMBER DAYA
DIREKTORAT JENDERAL PENDIDIKAN TINGGI,
RISET DAN TEKNOLOGI KEMDIKBUDRISTEK RI
TAHUN 2023

1
 TABLE OF CONTENTS

PROJECT CHARTER ......................................................................................................................... 1

TABLE OF CONTENTS ...................................................................................................................... 2
SKKNI MAP.......................................................................................................................................... 3
A. Goals ............................................................................................................................................... 4
B. Domain Knowledge ....................................................................................................................... 4
C. Stakeholders................................................................................................................................... 5
D. Business Rules................................................................................................................................ 7
E. Operating Environment ................................................................................................................ 8
F. Functional Requirements ............................................................................................................. 8
G. Non-Functional Requirements ..................................................................................................... 9
H. High Level Design ....................................................................................................................... 10
1. Use Case Diagram .................................................................................................................. 10
2. Activity Diagram .................................................................................................................... 16
3. Sequence Diagram.................................................................................................................. 23
4. Class Diagram ........................................................................................................................ 28
I. User Interface / User Experience ............................................................................................... 29
J. System Architecture .................................................................................................................... 41

2
 SKKNI MAP

1. J.62SAD00.002.1 Melakukan Identifikasi Sumber Kebutuhan Perangkat Lunak

• Goals
• Domain Knowledge
• Stakeholders
• Business Rules
• Operating Environment
2. J.62SAD00.004.1 Melakukan Klasifikasi dan Alokasi Kebutuhan Perangkat Lunak
• Functional Requirements
• Non-Functional Requirements
3. J.62SAD00.006.1 Membuat Kebutuhan Dokumentasi Spesifikasi Perangkat Lunak
• High Level Design
4. J.62SAD00.008.1 Membuat Spesifikasi Kebutuhan Perangkat Lunak
• High Level Design
5. J.62SAD00.011.1 Merancang Struktur Perangkat Lunak
• System Architecture
6. J.62SAD00.013.1 Merancang User Interface (UI)
• UI / UX

3
A. Goals
Peran dari internet marketing pada sebuah bisnis tentu sangat penting, mengingat sekarang ini
semakin banyak perdagangan secara online di era digital. Perdagangan digital tidak bisa
dihindari dan akan terus berkembang seiring berjalannya waktu. Oleh karena itu, para pelaku
bisnis harus mempelajari penjualan secara online supaya bisa mempertahankan dan
mengembangkan bisnis yang sedang berjalan. Toko baju zahra melakukan inovasi penjualan
dulunya sifatnya konvensional dimana pengunjung datang langsung ke toko, dengan melihat
peluang perkembangan bisnis yang begitu pesat dengan hadirnya internet marketing kini toko
baju zahra mengambil peluang bisnis tersebut. Model pengembangan sistem informasi ini
menggunakan metode prototyping dengan cara menganalisa kekurangan dari sitem lama
sehingga menciptakan solusi pada sistem baru yang dirancang, sehingga nantinya sistem baru
ini diharapkan dapat mempermudah dan memaksimalkan penjualan pruduk serta meningkatkan
jasa pelayanan. Sedangkan tujuan dari adanya sistem informasi penjualan berbasis website ini
antara lain:
1. Dapat mempercepat proses transaksi artinya memungkinkan pelanggan untuk melakukan
pembelian dengan cepat dan mudah.
2. Mengotomatiskan proses penjualan untuk mengurangi kerja manual dan waktu yang
diperlukan dalam mengelola transaksi.
3. Mengurangi risiko kesalahan manusia dalam proses pencatatan dan pemrosesan data
penjualan.
4. Memberikan layanan pelanggan yang lebih baik dengan menyediakan informasi produk
yang lengkap, mendukung proses pemesanan.
5. Mendukung pelaksanaan promosi, penawaran khusus, dan pengelolaan diskon.
6. Data transaksi penjualan tercatat secara otomatis di dalam database sehingga proses
pembuatan laporan penjualan dapat bervariasi.
7. Dapat mengatasi penyebaran data yang tersimpan di dalam rak-rak buku, kini semua data
akan tersimpan di dalam media penyimpanan digital yaitu harddisk.

B. Domain Knowledge
Istilah-istilah yang digunakan dalam pekerjaan pengembangan sistem informasi
penjualan berbasis website yaitu:
1. Rekening bank adalah akun yang dibuka oleh individu atau perusahaan di bank atau
lembaga keuangan untuk menyimpan dan mengelola dana. Rekening bank memungkinkan
pemiliknya untuk menyimpan uang, melakukan transaksi keuangan, dan mengakses
berbagai layanan perbankan.
4
2. Nota belanja adalah bukti tertulis dari transaksi penjualan atau pembelian yang
mencantumkan detail tentang produk atau layanan yang dibeli, harga, jumlah, tanggal, dan
informasi penting lainnya. Nota ini penting bagi pelanggan sebagai bukti pembelian dan
untuk pelacakannya dalam manajemen keuangan pribadi atau bisnis.
3. Laporan penjualan adalah dokumen yang mencantumkan informasi rinci tentang aktivitas
penjualan suatu bisnis selama periode waktu tertentu. Laporan ini berguna untuk
memantau kinerja penjualan, mengidentifikasi tren, dan membuat keputusan bisnis yang
lebih baik.
4. Pembayaran online adalah proses melakukan transaksi keuangan menggunakan internet
atau jaringan komputer. Ini memungkinkan individu dan bisnis untuk membayar barang
dan jasa secara elektronik tanpa harus melakukan pertukaran fisik uang tunai.
5. File PDF adalah format dokumen elektronik yang paling umum digunakan untuk
menyimpan dan berbagi informasi dengan format yang konsisten dan dapat dibaca di
berbagai perangkat dan sistem operasi. PDF adalah singkatan dari "Portable Document
Format".
6. Ekstensi file .XLSX adalah format file yang digunakan untuk menyimpan data dalam
bentuk lembar kerja elektronik, dan ini adalah salah satu format yang paling umum
digunakan dalam pengolahan data dan spreadsheet. Format ini dikembangkan oleh
Microsoft dan digunakan dalam perangkat lunak spreadsheet seperti Microsoft Excel,
LibreOffice Calc, dan Google Sheets.

C. Stakeholders
Pekerjaan pengembangan sistem informasi penjualan berbasis website melibatkan
berbagai stakeholders seperti pada gambar struktur organisasi berikut ini:

5
Keterangan:
1. Pemilik: Memimpin dan mengendalikan jalannya toko, memberikan kebijakan-kebijakan,
menerima laporan-laporan transaksi penjualan dan bisa juga sebagai pengguna sistem
untuk mengelola persediaan, memantau penjualan, mencetak laporan penjualan dan dapat
melakukan berbagai tugas lainnya yang berhubungan dengan pengelolaan bisnis secara
keseluruhan.
2. Admin: Pengguna yang menjalankan proses bisnis dan bertugas dalam melakukan
pelayanan terhadap pelanggan seperti: mengelola pesanan produk yang dibuat oleh
pelanggan, mengecek transaksi penjualan, memberikan informasi pelayanan, mengelola
metode pembayaran dan mencetak laporan penjualan.
3. Pelanggan: pengguna yang mempunyai hak akses ke sistem untuk melakukan pemesanan
barang yang ditawarkan oleh toko serta dapat melakukan pembayaran secara online.

6
D. Business Rules
Sistem informasi penjualan berbasis website memiliki alur proses dan dokumen/data
terkait peran stakeholders yang sedang berjalan sebagai berikut:

Keterangan:
Dilihat dari proses bisnis yang ada, proses jual beli barang masih dilakukan secara
konvensional, dimana proses dimulai ketika pelanggan datang ke toko untuk membeli barang
jika barang yang dibeli ada persediaan dan tertarik untuk membeli maka pelanggan mendatangi
petugas admin. Petugas admin mencatat pesanan pelanggan dengan menggunakan scan
barcode untuk diinputkan data ke sistem sebagai transaksi penjualan dan informasi yang dicatat
ke dalam sistem berupa nama produk, harga, jumlah beli, jenis produk, dan rincian pelanggan

7
dan secara automatis sistem akan menghitung harga total berdasarkan harga produk dan jumlah
beli. Pelanggan melakukan pembayaran yang sesuai dengan cara tunai. Sistem menciptakan
nota belanja secara automatis yang mencantumkan detail pesanan, harga, jumlah pembayaran,
dan informasi penting lainnya. Dari proses bisnis yang ada sekarang ini akan dikembangkan
mengarah ke internet marketing dimana sistem dikembangkan ke arah penjualan online yang
berbasis website jadi disini nanti pelanggan bisa belanja secara online tanpa harus datang
langsung ke toko baju zahra, sedangan untuk metode transaksi pembayarannya dengan
menggunakan sistem transfer antar bank.

E. Operating Environment
Sistem informasi penjualan berbasis website akan berjalan di lingkungan sistem sebagai
berikut:
1. Sistem Operasi Windows 10 atau 11
2. Aplikasi yang dibangun berbasis website
3. Dalam mengakses halaman website bisa menggunakan web browser dan mobile
4. Database yang digunakan dalam memanajemen data adalah MySQL
5. Terhubung dengan jaringan internet dan webserver

F. Functional Requirements
Kebutuhan fungsional pengembangan sistem informasi penjualan berbasis website
dapat meliputi:
1. Menggunakan database MySQL dengan menambahkan kebutuhan tabel baru dan diakses
menggunakan jaringan internet
2. Hak Akses Pemilik
• Akses halaman utama website
• Fitur register
• Fitur login
• Fitur pengolahan data user
• Fitur pengolahan manajemen data barang
• Fitur input data penjualan
• Fitur melihat data penjualan
• Fitur membuka transaksi penjualan
• Fitur pengolahan data transaksi penjualan

8
 • Fitur rekap laporan penjualan format XLSX dan PDF
3. Hak Akses Admin
• Akses halaman utama website
• Fitur login
• Fitur membuka transaksi penjualan
• Fitur melihat data penjualan
• Fitur pengolahan data transaksi penjualan
• Fitur rekap laporan penjualan format XLSX dan PDF
4. Hak Akses Pelanggan
• Akses halaman utama website
• Fitur register
• Fitur login
• Fitur input data pembelian barang
• Fitur melihat data transaksi penjualan
• Fitur Pembayaran
• Fitur konfirmasi pembayaran

G. Non-Functional Requirements
Kebutuhan non fungsional pengembangan Sistem informasi penjualan berbasis website
dapat meliputi:
1. Waktu respon aplikasi maksimal 2 s.d 5 detik untuk menyimpan data
2. Membutuhkan teknologi scan barcode untuk mengindetifikasi kode barang kalau
pembayaran secara offline.
3. Membutuhkan jaringan internet untuk mengakses alamat web site dan pada saat melakukan
transaksi penjualan barang.
4. Proses pembayaran barang pesanan menggunakan sistem transfer melalui rekening antar
bank.

9
H. High Level Design
1. Use Case Diagram

Keterangan
• SIPenjualan: Sistem informasi penjualan berbasis website artinya si pengguna dapat
mengakses sistem informasi melalui web browser.

a. Definisi Aktor
No Nama Aktor Deskripsi
1. Pelanggan Pelanggan adalah seseorang mau membeli, memcoba ataupun
menggunakan suatu produk.
2. admin Pihak yang bertugas dalam melakukan pelayanan terhadap
pelanggan seperti: mengelola pesanan produk yang dibuat oleh
pelanggan, mengecek transaksi penjualan, memberikan informasi
pelayanan, mengelola metode pembayaran dan mencetak laporan
penjualan.
3. Pemilik Pemilik toko bertanggung jawab atas berbagai aspek operasional
dan manajemen bisnis, termasuk dalam mengatur persediaan
barang, pemasaran, penjualan, laporan transaksi penjualan yang
dilakukan secara berkala.

10
b. Definisi Use Case
Kode Usecase Deskripsi
UC_1 Register Proser registrasi dilakukan agar mendapatkan hak
akses ke sistem berupa user name dan password.
UC_2 Login Proses dimana pemilik, admin, pelanggan
melakukan login agar bisa menggunakan aplikasi.
Sedangkan pelanggan melakukan login agar dapat
melakukan pembayaran.
UC_3 Melihat Daftar Barang Proses dimana pelanggan dapat melihat seluruh
barang yang dijual di toko.
UC_4 Input Pembelian Proses penginputan transaksi pembelian barang yang
Barang dipesan oleh pelanggan.
UC_5 Membuka Transaksi Proses dimana admin akan mengecek dan
Penjualan memvalidasi data penjualan barang sesuai pesanan
pelanggan, menampilkan deskripsi dan harga barang
serta menghitung dan menampilkan jumlah total
harga penjualan, mengkonfirmasi metode
pembayaran kepada pelanggan melalui WA dan
email berupa no rekening bank untuk pembayaran
barang yang dipesan oleh pelanggan.
UC_6 Melakukan Proses pembayaran barang pesanan yang dilakukan
Pembayaran Barang oleh pelanggan secara online.
UC_7 Cetak Nota Proses pencetakan nota atau bukti tertulis dari
transaksi penjualan barang yang dibeli oleh
pelanggan.
UC_8 Manajemen Data Proses menambah/merubah data barang yang akan
Barang dijual kepada pelanggan.
UC_9 Laporan Transaksi Proses membuat laporan dengan format XLSX dan
Penjualan PDF.

c. Skenario Use Case

• Skenario UseCase: Register
Aktor: Pemilik
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Membuka halaman utama dan klik
register
2. Menampilkan form register
3. Melakukan proses register dengan
menginput data admin dan pemilik
4. Mengecek kelengkapan data admin dan
pemilik yang sudah terisi isi
5. Menyimpan data admin dan pemilik ke
database
Skenario Alternatif (Data pemilik dan admin tidak di isi lengkap)

11
 1. Mengisi form register tidak valid
2. Mengecek kelengkapan data admin dan
pemilik yang sudah di isi
3. Menampilkan pesan bahwa data yang
diisi belum lengkap
4. Kembali ke halaman register.
5. Mengisi data diri pada form dengan
lengkap
6. Mengecek kelengkapan data pemilik
dan admin yang sudah di isi
7. Menyimpan data pemilik dan admin ke
database

• Skenario UseCase: Register

Aktor: Pelanggan
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Calon pelanggan klik beli produk dan
selesai belanja
2. Menampilkan form pendaftaran
pelanggan
3. Mengisi data diri pada form
pendaftaran pelanggan
4. Mengecek dan validasi kelengkapan data
pelanggan yang sudah di isi
5. Menyimpan data pelanggan ke database
Skenario Alternatif (Data pelanggan tidak di isi lengkap)
1. Mengecek kelengkapan data pelanggan
yang sudah di isi
2. Menampilkan pesan bahwa data yang
diisi belum lengkap
3. Mengisi data diri pada form
pendaftaran pelanggan baru dengan
lengkap
4. Mengecek kelengkapan data pelanggan
yang sudah di isi
5. Menyimpan data pelanggan ke database

• Skenario UseCase: Login

Aktor: Pemilik, Admin
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Membuka halaman login
2. Menampilkan form login
3. Memasukkan username dan password

4. Mengecek username dan password

12
 5. Berhasil masuk ke dalam sistem
aplikasi penjualan
6. Menampilkan halaman utama
Skenario Alternatif (data username dan password tidak valid)
1. Memasukkan user name dan password
tidak valid
2. Memvalidasi data user name dan
password ke dalam database
3. Menampilkan peringatan dan kembali
ke halaman login

• Skenario UseCase: Login

Aktor: Pelanggan
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Pelanggan membuka halaman website
dan membeli barang yang diinginkan
2. Menampilkan halaman selesai belanja
3. Mengklik selesai belanja dan mengisi
user name dan password pada form
pelanggan
4. Mengecek user name dan password
pada database
5. Menampilkan halaman pembelian
barang
Skenario Alternatif (data username dan password tidak valid)
1. Menampilkan pesan username dan
password tidak sesuai
2. Mengisi user name dan password
dengan benar
3. Mengecek user name dan password
pada database
4. Menampilkan halaman pembelian
produk

• Skenario UseCase: Melihat Daftar Barang

Aktor: Pelanggan
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Pelanggan membuka halaman web
daftar barang yang di jual berdasarkan
kategori barang
2. Menampilkan halaman kategori barang
3. Pelanggan dapat melihat barang
berdasarkan kategori

13
• Skenario UseCase: Input Pembelian Barang
Aktor: Pelanggan
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Pelanggan membuka halaman barang
yang dijual
2. Menampilkan halaman barang
3. Pelanggan memilih barang yang dibeli
4. Menampilkan halaman login
5. Pelangan mengisi login pelanggan
6. Cek data login pelanggan
7. Pelanggan berhasil login dan memilih
barang serta mengklik “tombol beli”
8. Menampilkan halaman detail pembelian
barang
9. Pelanggan memilih selesai belanja
10. Sistem menyimpan data order barang
ke database
11. Pelanggan mendapatkan informasi
produk yang telah dibeli

• Skenario UseCase: Membuka Transaksi Penjualan

Aktor: Admin, Pemilik
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Membuka halaman login
2. Menampilkan halaman login
3. Melakukan login masukkan user name
dan password
4. Mengecek user nama dan password
5. Menampilkan halaman transaksi
penjualan
6. Masukkan tanggal order penjualan
7. Mengecek dan memvalidasi data
penjualan barang sesuai tanggal
pesanan.
8. Menampilkan deskripsi barang dan
harga barang serta perhitugan jumlah
total harga penjualan.
9. Admin membuka menu metode
pembayaran
10. Menampilkan no rekening bank untuk
proses pembayaran
11. Mengirimkan no rekening bank ke
pelanggan melalui nomor WA atau
email

14
• Skenario UseCase: Melakukan Pembayaran
Aktor: Pelanggan
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Pelanggan melakukan cek e-mail atau
WA
2. Pelanggan memilih metode
pembayaran transfer melalui no
rekening bank
3. Menampilkan metode pembayaran
yang dipilih
4. Pelanggan melakukan pembayaran
5. Menampilkan form konfirmasi
pembayaran
6. Mengisi form konfirmasi pembayaran
7. Cek kelengkapan data pembayaran
8. Pembayaran tersimpan di dalam
database
Skenario Alternatif
1. Menampilkan pesan data yang
dimasukkan tidak sesuai
2. Mengisi data form dengan data yang
sesuai
3. Mengecek kelengkapan data
pembayaran
4. Pembayaran tersimpan di dalam
database

• Skenario UseCase: Memanajemen Data Barang

Aktor: Pemilik
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Masuk kemenu utama dengan hak
akses pemilik
2. Menampilkan halaman utama
3. Pilih menu barang
4. Menampilkan halaman data barang
5. Menginput dan mengedit data barang
6. Menyimpan data yang telah
diperbaharui ke database
7. Pengecekan stok barang
8. Menampilkan data barang
Skenario Alternatif
1. Memasukkan hak akses tidak valid
2. Menampilkan peringatan dan kembali
ke halaman menu utama

15
 • Skenario UseCase: Laporan Transaksi Penjualan
Aktor: Pemilik, Admin
Aksi Aktor Reaksi Sistem
Skenario Normal
1. Membuka menu laporan
2. Menampilkan halaman menu laporan
3. Menginputkan tanggal laporan per
periode atau hari ini
4. Menampilkan laporan hasil transaksi
penjulan
5. Mencetak laporan transaksi penjualan
Skenario Alternatif (Data Transaksi tidak ada)
1. Menginputkan tanggal laporan per
periode atau hari ini tidak valid
2. Menampilkan pesan data transaksi pada
tanggal tersebut tidak adaa

2. Activity Diagram
a. Activity Diagram Register Pemilik
Diagram Aktivitas ini menunjukan aktivitas register data admin dan pemilik yang
diusulkan, adalah sebagai berikut ini

b. Activity Diagram Register Pelanggan

Diagram Aktivitas ini menunjukan aktivitas register data pelanggan yang diusulkan,
adalah sebagai berikut ini

16
c. Activity Diagram Login
Diagram Aktivitas ini menunjukan aktivitas login pemilik dan admin yang diusulkan,
adalah sebagai berikut ini

17
d. Activity Diagram Login
Diagram Aktivitas ini menunjukan aktivitas login pelanggan yang diusulkan, adalah
sebagai berikut ini

e. Activity Diagram Melihat Daftar Barang

Diagram Aktivitas ini menunjukan aktivitas pelanggan untuk melihat daftar barang, dan
yang diusulkan adalah sebagai berikut ini

18
f. Activity Diagram Input Pembelian Barang
Diagram Aktivitas ini menunjukan aktivitas input pembelian barang yang diusulkan,
adalah sebagai berikut ini

19
g. Activity Diagram Membuka Transaksi Penjualan
Diagram Aktivitas ini menunjukan aktivitas membuka transaksi penjualan barang yang
diusulkan, adalah sebagai berikut ini

h. Activity Diagram Melakukan Pembayaran

Diagram Aktivitas ini menunjukan aktivitas melakukan pembayaran yang diusulkan,
adalah sebagai berikut ini

20
i. Activity Diagram Memanajemen Data Barang
Diagram Aktivitas ini menunjukan aktivitas memanajeman data barang yang diusulkan,
adalah sebagai berikut ini

21
j. Activity Diagram Laporan Transaksi Penjualan
Diagram Aktivitas ini menunjukan aktivitas laporan transaksi penjualan yang
diusulkan, adalah sebagai berikut ini

22
3. Sequence Diagram
Sequence Diagram digunakan untuk menggambarkan interaksi antar objek dalam waktu
yang berurutan.
a. Sequence Diagram Register Pelanggan

b. Sequence Diagram Login Pelanggan

23
c. Sequence Diagram Pemesanan Barang

d. Sequence Diagram Membuka Transaksi Penjualan

24
e. Sequence Diagram Pembayaran Barang Pesanan

f. Sequence Diagram Manajemen Cek Stok Barang

25
g. Sequence Diagram Manajemen Data Tambah Barang

h. Sequence Diagram Manajemen Data Edit Barang

i. Sequence Diagram Manajemen Data Hapus Barang

26
j. Sequence Diagram Melihat Data Transaksi Penjualan

k. Sequence Diagram Laporan Penjualan Barang

27
4. Class Diagram

28
I. User Interface / User Experience
Sebagai simulasi protoype sistem informasi penjualan berbasis object-oriented
programming, berikut disajikan interaktif prototype, video dan screenshot
a. Simulasi interaktif Prototype:
https://www.figma.com/proto/UE1HHKUB2OEX7a3n3qbt1j/Online-Shop-Toko-
Zahra?type=design&node-id=1-2&t=ddsp6TuI6uL2pc1w-0&scaling=min-
zoom&page-id=0%3A1&starting-point-node-id=1%3A2
b. Screenshot Prototype
• Halaman Home Penjualan Produk

29
• Halaman Registrasi Pelanggan

• Halaman Login Pelanggan

30
• Halaman Home Penjualan produk setelah login

31
• Halaman Detail Produk Pesanan

• Halaman Detail Produk Pesanan Keranjang

32
• Halaman Detail Keranjang Checkout

• Halaman Konfirmasi Pembayaran

33
• Halaman Konfirmasi Pembayaran berhasil

• Menu Utama Pegelola SI >> Pemilik dan Admin

34
• Halaman Login Pengelola SI

• Halaman Utama Pemilik

35
• Halaman Input Data User

• Halaman Input Data Barang

36
• Halaman Data Transaksi Penjualan

• Halaman Utama Admin

37
• Halaman Buka Transaksi Pembayaran

• Halaman Cek Transaksi Pembayaran

38
• Halaman Menu Laporan Perpriode

• Laporan Penjualan Perhari

39
• Laporan Penjualan Perminggu

• Laporan Penjualan Perbulan

40
 • Laporan Penjualan Pertahu

J. System Architecture

41