SISTEM INFORMASI POSKASIR BERBASIS WEBSITE

TOKO MAJU MART

Oleh :
IDA AYU MADE CEMPANA DWI ANJANI (200030248)
NI LUH PUTU MIRAH PATMADEWI (200030115)
I NYOMAN MASTRA (200030432)
KADEK AYU INTAN JAYANTI (200030391)
I MADE RAI ANDI PERMANA (200030195)

TOKO MAJU MART

JALAN RAYA KEROBOKAN KECAMATAN KUTA UTARA
KABUPATEN BADUNG BALI
2022
 KATA PENGANTAR

Puja dan puji syukur kami panjatkan kepada Tuhan Yang Maha Esa,
karena berkat dan rahmat beliau kami dapat menyelesaikan laporan yang
berjudul “ANALISA DAN PERANCANGAN SISTEM INFORMASI TOKO MAJU
MART BERBASIS WEBSITE” sesuai dengan waktu yang telah direncanakan.
Adapun tujuan dari penulisan laporan ini ialah untuk memenuhi tugas dari mata
kuliah Rekayasa Perangkat Lunak yang kami ambil pada semester ini.

Sebelum lebih jauh kami ingin mengucapkan Terima Kasih kepada:

1. Ibu NI NYOMAN SUPUWININGSIH, ST, M.Kom selaku dosen pangempu
dari matakuliah “Rekayasa Perangkat Lunak”.
2. Seluruh teman dan berbagai pihak yang memberikan dukungan dan bantuan
kami dalam penulisan laporan ini.

Akhir kata kami memohon maaf karena menyadari terdapat berbagai

kekurangan dalam penyusunan laporan ini, karena itu kami akan berusaha
menjadikan ini sebagai pelajaran dan memperbaiki diri kedepannya. Semoga
hasil penulisan laporan ini dapat bemanfaat bagi pihak yang berkepentingan.

Denpasar, 27 Mei 2022

Penulis

i
 DAFTAR ISI

KATA PENGANTAR.......................................................................................................i
DAFTAR ISI.....................................................................................................................ii
DAFTAR GAMBAR.......................................................................................................iv
DAFTAR TABEL............................................................................................................vi
BAB I................................................................................................................................1
PENDAHULUAN.............................................................................................................1
1.1 Latar Belakang...............................................................................................1
1.2 Rumusan Masalah.........................................................................................2
1.3 Tujuan..............................................................................................................2
1.4 Manfaat.............................................................................................................2
1.5 Ruang Lingkup...............................................................................................3
BAB II...............................................................................................................................4
LANDASAN TEORI........................................................................................................4
2.1 Pengertian Sistem.........................................................................................4
2.2 Pengertian Informasi....................................................................................4
2.3 Pengertian Sistem Informasi......................................................................4
2.4 Pengertian Website.......................................................................................4
2.5 HTML (HyperText Markup Language).......................................................5
2.6 CSS (Cascading Style Sheets)...................................................................5
2.7 Javascript........................................................................................................5
2.8 DFD (Data Flow Diagram)............................................................................5
2.9 ERD (Entity Relationship Diagram)...........................................................7
BAB III..............................................................................................................................9
METODE REKAYASA PERANGKAT LUNAK..........................................................9
3.1 Metode Waterfall............................................................................................9
BAB IV............................................................................................................................12
PEMBAHASAN.............................................................................................................12
4.1. Analisis Kebutuhan Sistem.......................................................................12
4.1.1. Analisis kebutuhan Fungsional.............................................................12
4.1.2. Analisis kebutuhan Non-Fungsional....................................................14
4.2. Perancangan Sistem...................................................................................14
4.2.1 Data Flow Diagram (DFD)...........................................................................15
4.2.2 Entity Relationship Diagram (ERD)..........................................................21

ii
 4.2.3 Struktur Tabel.............................................................................................22
4.3. Design Antarmuka.......................................................................................24
4.4 Implementasi Antarmuka..........................................................................34
BAB V.............................................................................................................................43
PENUTUP......................................................................................................................43
5.1. Kesimpulan...................................................................................................43
5.2. Saran..............................................................................................................43
DAFTAR PUSTAKA.....................................................................................................44

iii
 DAFTAR GAMBAR

Gambar 3. 1 Metode Waterfall..............................................................................9

Gambar 4. 1 DFD Level 0..................................................................................15
Gambar 4. 2 DFD Level 1 Login.........................................................................16
Gambar 4. 3 DFD Level 1 Kelola Data................................................................17
Gambar 4. 4 DFD Level 2 Kelola User................................................................18
Gambar 4. 5 DFD Level 2 Kelola Sales..............................................................18
Gambar 4. 6 DFD Level 2 Kelola Penerimaan Produk........................................19
Gambar 4. 7 DFD Level 2 Produk.......................................................................20
Gambar 4. 8 DFD Level 2 Supplier.....................................................................20
Gambar 4. 9 Entity Relationship Diagram...........................................................21
Gambar 4. 10 Halaman Login.............................................................................24
Gambar 4. 11 Halaman Dashboard Admin.........................................................25
Gambar 4. 12 Halaman Dashboard Karyawan...................................................25
Gambar 4. 13 Halaman Menu User....................................................................26
Gambar 4. 14 Halaman Tambah User................................................................27
Gambar 4. 15 Halaman Edit User.......................................................................27
Gambar 4. 16 Halaman Master Produk..............................................................28
Gambar 4. 17 Halaman Tambah Data Produk....................................................28
Gambar 4. 18 Halaman Edit Data Produk...........................................................29
Gambar 4. 19 Halaman Data Supplier................................................................29
Gambar 4. 20 Halaman Tambah Data Supplier..................................................30
Gambar 4. 21 Halaman Edit Data Supplier.........................................................30
Gambar 4. 22 Halaman Pos Kasir......................................................................31
Gambar 4. 23 Halaman Tambah Data Penerimaan Produk................................31
Gambar 4. 24 Halaman Laporan.........................................................................32
Gambar 4. 25 Halaman Edit Password...............................................................32
Gambar 4. 26 Halaman Edit Profil......................................................................33
Gambar 4. 27 Halaman Profil.............................................................................33
Gambar 4. 28 Implementasi Login......................................................................34
Gambar 4. 29 Implementasi Dashboard Admin..................................................34
Gambar 4. 30 Implementasi Dashboard Karyawan.............................................35
Gambar 4. 31 Implementasi Menu User.............................................................35

iv
Gambar 4. 32 Implementasi Tambah User.........................................................36
Gambar 4. 33 Implementasi Edit User................................................................36
Gambar 4. 34 Implementasi Master Produk........................................................37
Gambar 4. 35 Implementasi Tambah Data Produk.............................................37
Gambar 4. 36 Implementasi Edit Data Produk....................................................38
Gambar 4. 37 Implementasi Data Supplier.........................................................38
Gambar 4. 38 Implementasi Tambah Data Supplier...........................................39
Gambar 4. 39 Implementasi Edit Data Supplier..................................................39
Gambar 4. 40 Implementasi Pos Kasir...............................................................40
Gambar 4. 41 Implementasi Tambah Data Penerimaan Produk.........................40
Gambar 4. 42 Implementasi Laporan..................................................................41
Gambar 4. 43 Implementasi Edit Password........................................................41
Gambar 4. 44 Implementasi Edit Profil...............................................................42
Gambar 4. 45 Implementasi Profil.......................................................................42

v
 DAFTAR TABEL

Tabel 2. 1 DFD (Data Flow Diagram)....................................................................6

Tabel 2. 2 ERD (Entity Relationship Diagram)......................................................7
Tabel 4.1 Tabel user...........................................................................................22
Tabel 4. 2 Tabel produk......................................................................................22
Tabel 4. 3 Tabel sales.........................................................................................23
Tabel 4.4 Tabel supplier.....................................................................................23
Tabel 4. 5 Tabel bpb...........................................................................................23

vi
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan dan kemajuaan teknologi informasi dan komunikasi telah
berkembang dengan sangat pesat. Perkembangan teknologi yang demikian
pesat memudahkan untuk mendapatkan informasi yang kita dapatkan dari mana
saja, kapan saja dan siapa saja. Perkembangan bidang telekomunikasi saat ini
memungkinkan semua bidang kehidupan manusia dapat semakin ringan
dikerjakan dengan bantuan komputer. Di dalam segala bidang pekerjaan, usaha,
maupun organisasi, informasi merupakan bagian yang penting dan berharga.
Informasi yang akurat dan tepat waktu akan membantu dalam mengambil
keputusan dan menentukan langkah-langkah yang harus dilakukan untuk
mempertahankan dan mengembangkan organisasi serta usahanya. Informasi
juga mendukung kegiatan operasional dan manajerial organisasi. Dan untuk
semua itu dibutuhkan suatu pengolahan data yang handal, akurat, dan dapat
ditampilkan secara tepat dan mudah apabila setiap kali diperlukan. Sistem yang
masih bersifat manual atau pencatatan langsung tidak sesuai fungsinya akan
berjalan sangat lama dan memakan banyak waktu, dimana sistem manual masih
sangat mengandalkan pada pencatatan yang mengutamakan keteletian dan
pengamatan sebagai tumpuan utama pada proses pelaksanaannya. Dengan
demikian, bila manusia sebagai pelaksana mengalami kesalahan sedikit saja,
akan berakibat buruk dan menimbulkan ketidak-efektifan dalam pelaksanaan
kerja. Oleh karena itu kami membangun sebuah sistem informasi poskasir untuk
Toko Maju Mart yang beralamat di Jalan Raya Kerobokan Kecamatan Kuta
Utara Kabupaten Badung yang masih secara manual dalam melayani transaksi
dari konsumen. Maju Mart merupakan minimarket yang yang menjual
perlengkapan barang kebutuhan hidup sehari hari.
POS (Point of Sales) “POS bisa diterjemahkan secara bebas menjadi
sistem kasir, namun sistem POS juga mengatur dan menyimpan data-data
inventory dan penjualan. “(Aberle, 2010). Menurut PC Magazine, Point of Sales
mengacu pada penyimpanan data pada waktu dan tempat saat transaksi terjadi.

1
 PHP “PHP umumnya digunakan sebagai server-side scripting language.
Pengertian dari PHP (akronim dari PHP:Hypertext Preprocessor) adalah adalah
bahasa pemrograman web yang digunakan pada pemrograman web dinamis”.
(Lengstorf, 2009). Aplikasi-aplikasi yang dibangun oleh PHP pada umumnya
akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan
dijalankan di server. Pada prinsipnya server akan bekerja apabila ada
permintaan dari client. Dalam hal ini client menggunakan kode-kode PHP untuk
mengirimkan permintaan ke server.
MySQL “Mysql adalah sistem manajemen database untuk database
relasional. Sebuah database adalah sekumpulan koleksi data, bisa berupa text,
angka, atau file binary yang disimpan dan diatur oleh sistem manajemen
database” (Ullman, 2006).
Berdasarkan permasalahan diatas, maka dibuat sebuah sistem point-of-
sale berbasis website yang akan membantu Toko Maju Mart dalam pencatatan
data/stok barang serta laporan-laporan yang dibutuhkan oleh Toko Maju Mart.
Dengan adanya sistem ini, diharapkan Toko Maju Mart dapat mempermudah
kegiatan bisnis yang dilakukan sehari-harinya.

1.2 Rumusan Masalah

Dari latar belakang diatas, dapat dirumuskan permasalahan sebagai
berikut:
1. Bagaimana menganalisis dan merancang Sistem Informasi Poskasir
pada Toko Maju Mart?
2.
1.3 Tujuan
Adapun tujuan dari pembuatan website ini adalah:
1. Untuk membuat program poskasir berbasis website
2. Untuk membangun sistem agar dapat mempermudah dalam
pengelolaan laporan data dan penjualan pada Toko Maju Mart

1.4 Manfaat
Adapun manfaat yang dapat diperoleh dari pembuatan website ini ialah:
1. Penulis dapat mengaplikasikan ilmu dan keterampilan yang di peroleh
selama perkuliahan ini.

2
 2. Dapat membantu perusahaan untuk mengembangkan sistem yang
sudah ada sebelumnya.
1.5 Ruang Lingkup
Agar lebih fokus dan terarah mengenai permasalahan yang ada dan
menghindari semakin melebarnya pokok permasalahan yang keluar dari jalur,
maka penulis membatasi ruang lingkup yang lebih sempit, Adapun batasan
masalah tersebut meliputi :
1. User dari sistem ini dibagi menjadi dua ketegori yaitu dmn dan Karyawan.
2. Perancangan sistem ini menggunakan aplikasi XAMPP versi 8.0.12
sebagai Apache web server, Aplikasi Microsoft Visual Studio Code versi
1.62.2 sebagai text editor, serta menggunakan bahasa pemrograman
PHP, CSS, HTML, dan Javascript.
3. Perancangan alur sistem informasi poskasir menggunakan Data Flow
Diagram (DFD) bertujuan mengetahui alur data dan proses-proses yang
terjadi di dalam sistem.
4. Dalam perancangan sistem poskasier menggunakan metode rekayasa
perangkat lunak menggunakan metode Waterfall, namun hanya sampai
proses implementasi.

3
 BAB II

LANDASAN TEORI

2.1 Pengertian Sistem

Pengertian sistem adalah sekumpulan objek-objek yang saling berelasi dan
berinteraksi serta hubungan antara objek bisa dilihat sebagai satu kesatuan yang
dirancang untuk mencapai satu tujuan. Dengan demikian, secara sederhana
sistem dapat diartikan sebagai suatu kumpulan atau himpunan dari unsure
variabel-variabel yang saling terorganisasi, saling berinteraksi, dan saling
bergantung satu sama lain. (Rina & Fatkur, 2019).
Pengertian sistem menurut (Jeperson Hutahaean, 2016:2) dalam buku
yang berjudul Konsep Sistem Informasi, Sistem adalah suatu jaringan kerja dari
prosedur-prosedur yang saling berhubungan, berkumpul bersama-sama untuk
melakukan kegiatan atau untuk melakukan sasaran yang tertentu.

2.2 Pengertian Informasi

Menurut Agus Mulyanto (2009:12) informasi adalah data yang diolah
menjadi bentuk yang lebih berguna dan lebih berarti bagi yang menerimanya,
sedangkan data merupakan sumber informasi yang menggambarkan suatu
kejadian yang nyata. (Nur Azizah, Muhammad Fitra Syawall, & Deddy Chandra
Fikriansyah, 2016)

2.3 Pengertian Sistem Informasi

Menurut Jeperson Hutahaean (2016:15), sistem informasi adalah suatu
sistem didalam suatu organissi yang mempertemukan kebutuhan pengelolaan
transaksi harian, mendukung operasi, bersifat manajerial, dan kegiatan strategi
dari suatu organisasi dan menyediakan pihak luar tertentu dengan laporan-
laporan yang dibutuhkan.

2.4 Pengertian Website

Menurut Nur Azizah, Muhammad Fitra Syawall, dan Deddy Chandra
Fikriansyah (2016), website adalah fasilitas di internet yang menampilkan

4
informasi dalam bentuk teks, gambar, dan suara secara multimedia yang sangat
interaktif.

2.5 HTML (HyperText Markup Language)

Menurut Recky T. Djaelangkara, Rizal Sengkey, ST., MT, dan Oktavian A.
Lantang, ST., MTI (2015) HTML adalah sebuah bahasa markah yang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah penjelajah web internet dan 21 pemformatan hiperteks sederhana yang
ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang
terintegrasi.

2.6 CSS (Cascading Style Sheets)

Menurut Techterms, CSS dapat diartikan sebagai lembar berjenjang untuk
format tata letak halaman web. CSS merupakan sebuah temuan untuk
membantu pengembang web yang tadinya hanya bergantung pada HTML
sebagai bahasa web. HTML di awal mula digunakan untuk menandai objek di
halaman web seperti tabel, gambar, paragraf, dan sebagainya.
Secara Umum CSS merupakan bahasa untuk menggambarkan halaman
situs, termasuk warna, tata letak, dan font. Hal ini memungkinkan seorang
pengembang untuk mengadaptasi presentasi ke berbagai jenis perangkat,
seperti layar besar monitor, layar kecil tablet atau smartphone, hingga mesin
cetak (printer). 

2.7 Javascript
JavaScript adalah bahasa scripting untuk membuat konten dinamis di
halaman atau aplikasi web, game, serta membangun web server. Kita bisa
membuat elemen dinamis untuk interaksi user, seperti menu drop-down atau
grafik animasi.

2.8 DFD (Data Flow Diagram)

Data Flow Diagram (DFD) adalah “suatu gambaran yang menjelaskan
bagaimana menjelaskan bagaimana menggambarkan atau membuat model
komponen sistem”.DFD juga merupakan diagram yang menggambarkan sistem
secara terstruktur tengan membaginya beberapa level dan proses pararel pada
sistem serta menunjukan arus data, dan simpanan data. Dari beberapa definisi di

5
atas data diambil kesimpulan bahwa Data Flow Diagram merupakan suatu
metode yang digunakan untuk menggambarkan suatu model dari input, output,
dan proses transformasinya pada suta sistem sehingga muah dalam memahami
sistem tersebut . Terdapat beberapa simbol yang digunakan dalam Data Flow
Diagram.
Adapun notasi dari Data Flow Diagram (DFD) menurut Gane/Sarson dan
Yourdon/De Marco adalah sebagai berikut:

Tabel 2. 1 DFD (Data Flow Diagram)

Gane/Sarson Yourdon/De Marco Nama Keterangan

Menjelaskan suatu
Entitas entitas luar pada
sebuah DFD

Menjelaskan Proses
Proses transformasi data
dalam sebuah DFD

Menjelaskan arah
data/informasi
Aliran data
entitas,
proses, data srore

Menjelaskan tempat
Data store penyimpanan suata
data/informasi

Dalam pembuatan DFD harus memperatikan tahapan-tahapan

pembuatannya, adapun tahapan dalam pembuatan DFD, sebagai berikut:
1. Diagram Konteks (Level Top)
Diagram yang digunakan untuk menggambarkan sistem global atau
umum. Pada tahap ini menggambarkan lingkaran tunggal mewakili keseluruhan
sistem.
2. Diagram Nol (Level Nol)

6
 Diagram yang digunakan untuk menggambarkan tahapan-tahapan proses
yang ada dalam diagram konteks.
3. Diagram Detail (Level Satu)
Diagram yang digunakan untuk menggambarkan arus data secara detail
dari tahapan proses pada diagram nol. Dalam menggambarkan diagram detail
harus di perhatikan konsistensi jumlah input dan output yang ada pada diagram
nol dan detail. Bila level ini sudah tidak ada lagi yang perlu diuraikan, maka pada
proses dinamakan proses primitive.
4. Diagram Level 2
Pada diagram ini menggambarkan dan menjabarkan secara rinci mengenai
hasil dan atau proses yang mucul di bagian diagram sebelumnya dari sistem
yang diusulkan.

2.9 ERD (Entity Relationship Diagram)

ERD merupakan suatu model untuk menjelaskan hubungan antara data
dalam basis data berdasarkan objektif-objek hasar data yang mempunyai
hubungan antar data. Model tersebut digambarkan menggunakan beberapa
notasi dan simbol, seperti pada tabel berikut.
Tabel 2. 2 ERD (Entity Relationship Diagram)

NO SIMBOL NAMA KETERANGAN

Objek diluar
sistem yang
berkomunikasi
1 Entitas dengan sistem
sebagai sumber
maupun pemakai
informasi
Menunjukan
adanya hubungan
2. Relasi dari sebuah
entitas dengan
entitas lain

7
 Menunjukan
3. Atribut sebuah karakter
dari entitas

Garis
Relationship penghubung yang
2
line digunakan pada
diagram
Digunakan untuk
3 One symbol menunjukan relasi
ke satu
Digunakan untuk
4 Many symbol menunjukan relasi
ke banyak

8
 BAB III

METODE REKAYASA PERANGKAT LUNAK

Metode pengembangan perangkat lunak yang digunakan dalam

penelitian ini adalah metode waterfall. Metode ini dipilih karena metode waterfall
merupakan metode yang paling sering digunakan oleh developer dalam
pengembangan sebuah perangkat lunak. Metode ini merupakan salah satu jenis
pengembangan perangkat lunak yang menekankan pada fase yang berurutan
dan sistematis. Untuk pengembangannya dianalogikan seperti air terjun dimana
setiap tahap dikerjakan secara berurutan mulai dari atas hingga ke bawah.

3.1 Metode Waterfall

Metode Waterfall merupakan metode pengembangan perangkat lunak
tertua sebab sifatnya yang natural. Metode Waterfall merupakan pendekatan
SDLC paling awal yang digunakan untuk pengembangan perangkat lunak.
Urutan dalam Metode Waterfall bersifat serial yang dimulai dari proses
perencanaan, analisa, desain, dan implementasi pada sistem.
Ian Sommerville (2011) menjelaskan bahwa ada lima tahapan pada
Metode Waterfall, yakni Requirements Analysis and Definition, Sytem and
Software Design, Implementation and Unit Testing, Integration and Sistem
Testing, dan Operationa and Maintenance.

Gambar 3. 1 Metode Waterfall

9
Adapun tahapan dari metode ini adalah sebagai berikut:
1. Requirement
Pada tahap ini dibutuhkan analisis dari kebutuhan pengguna, dimana
untuk mendapatkan apa yang dibutuhkan pengguna bisa dengan cara deep
interview, group discussion, kuisioner, ataupun survei ke lapangan langsung.
Tahap ini terdiri dari analisa kebutuhan fungsional dan analisa kebutuhan
non-fungsional.
a. Analisa kebutuhan fungsional
Analisa kebutuhan fungsional digunakan untuk menguraikan fitur-
fitur yang ada dalam sistem yang akan dibangun. Dalam sistem
informasi poskasir yang akan dibangun terdapat beberapa
kebutuhan fungsional diantaranya, kebutuhan user dengan level
yang berbeda, kebutuhan penyimpanan data kedalam basis data,
dan kebutuhan menampilkan informasi sesuai kreteria tertentu.
b. Analisa kebutuhan non-fungsional
Analisa kebutuhan non-fungsional digunkan untuk menjelaskan
kebutuhan yang mendukung dalam proses pembangunan sistem.
Kebutuhan pendukung ini terdiri dari kebutuhan terhadap software
yang terdiri dari web browser, MySQL, XAMPP, Text Editor. Dan
kebutuhan terhadap hardware atu Personal Computer yang
memiliki spesifikasi Processor Core I5, RAM 8 GB, Hardisk
Internal 1TB, dan sebagainya.
2. Design
Tahap design dalam metode waterfall merupakan tahapan untuk
menggambarkan dan meguraikan proses-proses yang terdapat dalam sistem
yang akan dibangun. Tujuan dari tahap design ini adalah untuk membantu
dan mempermudah dalam tahapan selanjutnya yaitu tahap implementation.
Dalam tahap design akan dirancang sistem yang akan dibangun
menggunakan Perancangan Data Flow Diagram (DFD) dan Perancangan
basis data sistem menggunakan Entity Relationship Diagram (ERD).
3. Implementation
Tahap implementation merupakan tahapan dilakukannya penulisan kode atu
pengkodean sesuai dengan design sistem yang telah dirancang pada tahap
desgn. Dalam pembangunan sitem informasi poskasir ini dilakukan
menggunakan Microsoft Visual Studio Code sebagai text editor, bahasa

10
 pemrograman yang digunakan adalah PHP dan Javascript, MySQL sebagai
database atau basis data, dan web browser digunakan sebagai uji coba
sistem.
4. Testing
Pada bagian ini, sistem yang sudah selesai dibuat akan diujikan, pengujian
ini dilakukan oleh perancang kemudian akan dilakukan uji kepada user juga
untuk mengetahui kekurangan dari sistem yang dibuat.
5. Maintenance
Pada bagian ini, sistem yang sudah selesai pada tahap pengujian dan
publikasi serta akan dijadwalkan untuk perbaikan rutin. Penjadwalan ini
dilakukan atas kesepakatan antara perancang dan kostumer.

11
 BAB IV

PEMBAHASAN

4.1. Analisis Kebutuhan Sistem

Analisis kebutuhan sistem digunakan untuk menganalisis kebutuhan
sistem yang akan dikembangkan. Analisis kebutuhan sistem meliputi analisis
kebutuhan fungsional dan analisis kebutuhan non-fungsional. Berikut dapat
diuraikan kebutuhan fungsional dan non-fungsional dari Sistem Informasi
Poskasir.

4.1.1.Analisis kebutuhan Fungsional

Kebutuhan fungsional dari sistem yang dikembangkan mencakup
kebutuhan terhadap pengguna, kebutuhan terhadap data, serta kebutuhan untuk
menyediakan informasi. Kebutuhan fungsional tersebut dapat diuraikan sebagai
berikut.
1. Kebutuhan Pengguna (User)
Analisis kebutuhan pengguna bertujuan untuk menganalisa siapa saja
pihak yang akan menggunakan dan mengoperasikan sistem. Termasuk di
dalamnya menguraikan hal-hal apa saja yang dapat dilakukan oleh para
pengguna (user). Terdapat 2 jenis pengguna (user) dalam sistem yang
akan dikembangkan yaitu sebagai berikut :
a. Admin
Merupakan user mengelola sebagian besar proses yang terjadi
pada sistem dan mengoperasikan sistem dari sisi server. Adapun
hal-hal yang dapat dilakukan admin adalah sebagai berikut:
1) Login ke sistem,
2) Mengelola profil,
3) Mengelola data user,
4) Mengelola data master produk,
5) Mengelola data supplier,
6) Mengelola poskasir,
7) Mengelola penerimaan produk,

12
8) Melihat laporan.

13
 b. Karyawan
Merupakan pengguna dari sistem yang levelnya berada di bawah
admin. Adapun hal-hal yang dapat dilakukan admin adalah
sebagai berikut:
1) Login ke sistem,
2) Mengelola profil,
3) Mengelola poskasir,
4) Mengelola penerimaan produk,
5) Melihat laporan.

2. Kebutuhan Data
Analisis kebutuhan data bertujuan untuk menguraikan data-data yang
diperlukan sebagai penyusun sistem yang akan dikembangkan. Adapun
kebutuhan terhadap data tersebut meliputi:
a. Data Pengguna
Data pengguna yang diperlukan meliputi informasi umum seperti
nama, alamat, nomor telepon, foto, email, dsb.
b. Data Produk
Data yang diperlukan meliputi informasi umum seperti nama
produk, merk produk, harga pokok pembelian, harga jual, dan
sebagainya.
c. Data Supplier
Data supplier yang diperlukan meliputi informasi umum seperti
nama supplier, alamat, dan nomor telepon.

3. Kebutuhan Proses
Analisis kebutuhan proses dilakukan untuk menguraikan proses-
proses apa saja yang dapat dijalankan oleh sistem. Proses-proses
tersebut diantaranya:
a. Login /logut.
b. Mengelola profil,
c. Mengelola data user,
d. Mengelola data master produk,
e. Mengelola data supplier,
f. Mengelola poskasir,

14
 g. Mengelola penerimaan produk,
h. Melihat laporan.

4.1.2. Analisis kebutuhan Non-Fungsional

Analisis kebutuhan non-fungsional bertujuan untuk menguraikan
kebutuhan-kebutuhan yang diperlukan untuk menunjang pengembangan Sistem
Informasi Poskasir. Analisis kebutuhan non-fungsional meliputi kebutuhan
terjadap perangkat lunak dan perangkat keras.
1. Kebutuhan Perangkat Lunak
Adapun perangkat lunak serta spesifikasi yang dibutuhkan dalam
pengembangan sistem ini meliputi :
a. Sistem Operasi Windows 10.
b. XAMPP.
c. Microsoft Visual Studio Code.
d. Web Browser (Google Crome, Mozila Firefox, atau Opera).

2. Kebutuhan Perangkat Keras

Dalam mengembangkan dan mengimplementasikan sistem, penulis
menggunakan perangkat keras dengan spesifikasi sebagai berikut:
a. PC dengan Processor Intel® Core™ i5-6200U CPU @ 2.30GHz.
b. RAM 8 GB.
c. Hardisk 1 TB.
d. Mouse & Keyboard.

4.2. Perancangan Sistem

Perancangan sistem dilakukan untuk mengetahui alur data serta proses-
proses yang terjadi pada sistem. Perancangan sistem dilakukan dengan
menggunakan Diagram Konteks dan Data Flow Diagram (DFD). Hasil dari
perancangan akan dijadikan model dalam pengimplementasian sistem.

15
4.2.1 Data Flow Diagram (DFD)
Dalam perancangan kali ini kami mengusulkan tiga level Data Flow Diagram
yaitu:

1. Data Flow Diagram (DFD) Level 0

Data Flow Diagram (DFD) level 0 merupakan penggambaran proses yang
terjadi di dalam sistem secara umum. Pada Data Flow Diagram level 0 ini
terdapat proses-proses yang terjadi pada sistem beserta alur data dan
informasinya. Pada Data Flow Diagram level 0 perancangan Sistem Informasi
Poskasir terdapat dua external entity yaitu Admin dan Karyawan. Kedua external
entity tersebut menjalankan dua proses utama yang terdapat pada sistem yaitu
Login, dan Kelola Data. Data Flow Diagram (DFD) level 0 untuk sistem yang
dikembangkan dapat dilihat pada Gambar 4.1 berikut.

Gambar 4. 1 Data Flow Diagram (DFD) Level 0

16
2. Data Flow Diagram (DFD) Level 1 Login
Data Flow Diagram (DFD) level 1 Proses Login merupakan penguraian dari
proses Login yang terdapat pada Data Flow Diagram (DFD) level 0. External
entity yang terlibat adalah Admin dan Karyawan. Proses ini melibatkan tabel
user. Data Flow Diagram (DFD) level 1 Kelola Data dapat dilihat pada Gambar
4.2 berikut.

Gambar 4. 2 Data Flow Diagram (DFD) Level 1 Login

3. Data Flow Diagram (DFD) Level 1 Kelola Data

Data Flow Diagram (DFD) level 1 Kelola Data merupakan penguraian dari
proses Kelola Data yang terdapat pada Data Flow Diagram (DFD) level 0.
External entity yang terlibat adalah Admin dan Karyawan. Proses ini melibatkan
tabel admin, customer, pemilik, guest house, bank, rekening, booking_list, dan
booking_success. Data Flow Diagram (DFD) level 1 Kelola Data dapat dilihat
pada Gambar 4.3 berikut.

17
 Gambar 4. 3 Data Flow Diagram (DFD) Level 1 Kelola Data

4. Data Flow Diagram (DFD) Level 2 Kelola User

Data Flow Diagram (DFD) Level 2 Kelola User merupakan penguraian dari
proses Kelola User pada Data Flow Diagram (DFD) Level 1 Kelola Data. External
entity yang terlibat yaitu Admin. Tabel yang terlibat yaitu tabel user. Data Flow
Diagram (DFD) Level 2 Proses Kelola User dapat dilihat pada Gambar 4.4
berikut.

18
 Gambar 4. 4 Data Flow Diagram (DFD) Level 2 Kelola User

5. Data Flow Diagram (DFD) Level 2 Kelola Sales

Data Flow Diagram (DFD) Level 2 Kelola Sales merupakan penguraian dari
proses Kelola Sales pada Data Flow Diagram (DFD) Level 1 Kelola Data.
External entity yang terlibat yaitu Admin dan Karyawan. Tabel yang terlibat yaitu
tabel sales. Data Flow Diagram (DFD) Level 2 Proses Kelola Sales dapat dilihat
pada Gambar 4.5 berikut.

Gambar 4. 5 Data Flow Diagram (DFD) Level 2 Kelola Sales

19
6. Data Flow Diagram (DFD) Level 2 Kelola Penerimaan Produk
Data Flow Diagram (DFD) Level 2 Kelola Penerimaan Produk merupakan
penguraian dari proses Kelola Penerimaa Produk pada Data Flow Diagram
(DFD) Level 1 Kelola Data. External entity yang terlibat yaitu Admin dan
Karyawan. Tabel yang terlibat yaitu tabel bpb. Data Flow Diagram (DFD) Level 2
Proses Kelola Sales dapat dilihat pada Gambar 4.6 berikut.

Gambar 4. 6 Data Flow Diagram (DFD) Level 2 Kelola Penerimaan Produk

20
7. Data Flow Diagram (DFD) Level 2 Kelola Produk
Data Flow Diagram (DFD) Level 2 Kelola Produk merupakan penguraian
dari proses Kelola Produk pada Data Flow Diagram (DFD) Level 1 Kelola Data.
External entity yang terlibat yaitu Admin. Tabel yang terlibat yaitu tabel produk.
Data Flow Diagram (DFD) Level 2 Proses Kelola Sales dapat dilihat pada
Gambar 4.7 berikut.

Gambar 4. 7 Data Flow Diagram (DFD) Level 2 Kelola Produk

8. Data Flow Diagram (DFD) Level 2 Kelola Supplier

Data Flow Diagram (DFD) Level 2 Kelola Supplier merupakan penguraian
dari proses Kelola Supplier pada Data Flow Diagram (DFD) Level 1 Kelola Data.
External entity yang terlibat yaitu Admin. Tabel yang terlibat yaitu tabel supplier.
Data Flow Diagram (DFD) Level 2 Proses Kelola Sales dapat dilihat pada
Gambar 4.8 berikut.

Gambar 4. 8 Data Flow Diagram (DFD) Level 2 Kelola Supplier

21
4.2.2 Entity Relationship Diagram (ERD)
Perancangan database untuk sistem yang dikembangkan menggunakan
Entity Relationship Diagram (ERD). Entity Relationship Diagram (ERD)
digunakan untuk menggambarkan relasi antar entitas yang terdapat pada sistem.
Pada Gambar 4.9 berikut dapat dilihat Entity Relationship Diagram (ERD) dari
sistem yang dikembangkan.

Gambar 4. 5 Entity Relationship Diagram (ERD)

Pada ERD ini produk memiliki relasi one to many dengan sales karena satu
jenis produk bisa dijual bebrapa kali dalam transaksi. Produk juga memiliki relasi
one to many dengan bpb (bukti penerimaan barang) karena satu produk bisa
diterima beberapa dari supplier. Produk juga memiliki relasi many to one dengan
supplier karena banyak produk bisa disupply dari 1 supplier.
Pada bagian user memiliki relasi one to many dengan bpb karena satu user
bisa memiliki proses bpb lebih dari satu. User juga memiliki relasi one to many
dengan sales karena satu user bisa menangani banyak sales.
Pada bagian supplier juga memiliki relasi one to many dengan bpb karena
satu supplier bisa menyerahkan banyak bpb pada toko.

22
4.2.3 Struktur Tabel
Berikut merupakan struktur dari tabel-tabel yang terdapat pada database
Sistem Informasi Poskasir.
1. Tabel user
Tabel user digunakan untuk menyimpan data-data yang berkaitan dengan
user.
Tabel 4. 1 Tabel user

Panjan
Nama Tipe Keterangan
g
Primary Key, Auto
id int 11
Increment
nip varchar 10 -
nama varchar 50 -
password varchar 255 -
level int 1 -
email varchar 50 -
password_update_at datetime -
created_at datetime -
foto varchar 10 -

2. Tabel produk
Tabel produk digunakan untuk menyimpan data-data yang berkaitan
dengan produk.
Tabel 4. 2 Tabel produk
Nama Tipe Panjang Keterangan
kode varchar 5 Primary Key
supp_id int 11 Foreign Key
nama_produk varchar 200 -
singkatan varchar 100 -
merk varchar 50 -
hpp int 25 -
harga int 25 -

23
 stock int 10 -

3. Tabel sales
Tabel sales digunakan untuk menyimpan data-data yang berkaitan
dengan sales.
Tabel 4. 3 Tabel sales
Nama Tipe Panjang Keterangan
Primary Key, Auto
id int 11
Increment
kode_produk varchar 5 Foreign Key
user_id int 11 Foreign Key
tanggal date -
kode_transaksi varchar 5 -
qty int 10 -

4. Tabel supplier
Tabel supplier digunakan untuk menyimpan data-data yang berkaitan
dengan supplier.
Tabel 4. 4 Tabel supplier
Nama Tipe Panjang Keterangan
Primary Key, Auto
supp_id int 11
Increment
nama_supplier varchar 100 -
alamat varchar 200 -
no_tlp varchar 25 -

5. Tabel bpb
Tabel bpb digunakan untuk menyimpan data-data yang berkaitan
dengan penerimaan barang.
Tabel 4. 5 Tabel bpb
Panjan
Nama Tipe Keterangan
g
id int 11 Primary Key, Auto

24
 Increment
supp_id int 11 Foreign Key
kode_produk varchar 5 Foreign Key
user_id int 11 Foreign Key
tanggal datetime   -
jumlah int 11 -

4.3. Design Antarmuka

1. Halaman Login
Berikut merupakan halaman login dari sistem. Pada halaman login user
diminta untuk menginputkan Email Address dan Password kemudian menekan
tombol Sign In.

Gambar 4. 6 Halaman Login

25
2. Halaman Dashboard Admin
Berikut merupakan halaman dashboard admin dimana pada halaman ini
admin dapat melihat menu secara lengkap seperti user, produk, supplier, kasir,
dll.

Gambar 4. 7 Halaman Dashboard Admin

3. Halaman Dashboard Karyawan

Berikut merupakan tampilan dari dashboard karyawan. Pada halaman ini
hampir sama seperti halaman admin hanya saja untuk askes karyawan lebih
sedikit dibandingkan admin.

Gambar 4. 8 Halaman Dashboard Karyawan

26
4. Halaman Menu User
Berikut merupakan tampilan dari halaman user. Pada halaman ini kita
dapat melihat daftar dari user dan kita juga dapat menambahkan user baru
dengan klik button tambah user.

Gambar 4. 9 Halaman Menu User

5. Halaman Tambah User

Berikut adalah halaman tambah user kita dapat mengimputkan data dari
user baru. Halaman ini hanya dapat diakses setelah menekan tombol “tambah
user”.

27
 Gambar 4. 10 Halaman Tambah User

6. Halaman Edit User

Berikut merupakan halaman edit user dimana kita dapat melakukan edit
pada data user. Halaman ini dapat diakses dengan menekan action edit pada
halaman user.

Gambar 4. 11 Halaman Edit User

28
7. Halaman Master Produk
Berikut merupakan halaman master produk. Pada halaman ini
menampilkan berbagai data produk yang dijual.

Gambar 4. 12 Halaman Master Produk

8. Halaman Tambah Data Produk

Berikut merupakan halaman tambah data produk. Halaman ini dapat
diakses dengan menekan button “Tambah Data Produk” pada halaman master
produk.

Gambar 4. 13 Halaman Tambah Data Produk

29
9. Halaman Edit Data Produk
Berikut merupakan halaman edit data produk yang dapat diakses dengan
menekan action edit pada halaman master produk. Karyawan dapat melakukan
perubahan pada data produk.

Gambar 4. 14 Halaman Edit Data Produk

10. Halaman Data Supplier

Berikut merupakan design dari halaman supplier. Pada halaman ini berisi
informasi lengkap mengenai supplier yang dimiliki perusahaan.

Gambar 4. 15 Halaman Data Supplier

30
11. Halaman Tambah Data Supplier
Berikut merupakah halaman tambah data supplier yang dapat diakses
dengan menekan “Tambah Data Supplier” pada halaman Data Supplier.

Gambar 4. 16 Halaman Tambah Data Supplier

12. Halaman Edit Data Supplier

Berikut tampilan desain antarmuka halaman Edit Data Supplier. Admin
dapat melakukan perubahan pada data supplier dengan menekan button action
“edit” pada halaman Data Supplier.

Gambar 4. 17 Halaman Edit Data Supplier

31
13. Halaman Pos Kasir
Berikut merupakan design tampilan dari Pos Kasir, dimana karyawan dapat
mengimputkan berbagai transaksi dari penjualan toko.

Gambar 4. 18 Halaman Pos Kasir

14. Halaman Tambah Data Penerima Produk

Berikut tampilan desain antarmuka halaman Tambah Data Penerimaan
Produk, yang terdapat dimenu “Penerimaan Produk”.

Gambar 4. 19 Halaman Tambah Data Penerimaan Produk

32
15. Halaman Laporan
Berikut merupakan tampilan design dari halaman Laporan. Halaman ini
berisi laporan dari penjualan toka yang digunakan oleh admin

Gambar 4. 20 Halaman Laporan

16. Halaman Edit Password

Berikut tampilan desain antarmuka halaman “Edit Password”. Halaman ini
digunakan jika user ingin melakukan perubahan password.

Gambar 4. 21 Halaman Edit Password

33
17. Halaman Edit Profil
Berikut tampilan desain antarmuka dari halaman Edit Profil. Halaman ini
diakses jika user ingin melakukan update profil.

Gambar 4. 22 Halaman Edit Profil

18. Halaman Profil

Berikut tampilan desain antarmuka halaman Profil setelah melakukan
editing profil dilakukan.

Gambar 4. 23 Halaman Profil

34
4.4 Implementasi Antarmuka

1. Implementasi Login
Berikut merupakan halaman login dari sistem. Pada halaman login user
diminta untuk menginputkan Email Address dan Password kemudian menekan
tombol Sign In.

Gambar 4. 28 Implementasi Login

2. Implementasi Dashboard Admin

Berikut merupakan implementasi dashboard admin dimana pada halaman
ini admin dapat melihat menu secara lengkap seperti user, produk, supplier,
kasir, dll.

Gambar 4. 29 Implementasi Dashboard Admin

35
3. Implementasi Dashboard Karyawan
Berikut merupakan tampilan dari dashboard karyawan. Pada halaman ini
hampir sama seperti halaman admin hanya saja untuk askes karyawan lebih
sedikit dibandingkan admin.

Gambar 4.30 Implementasi Dashboard Karyawan

4. Implementasi User Menu

Berikut merupakan tampilan dari halaman user. Pada halaman ini kita
dapat melihat daftar dari user dan kita juga dapat menambahkan user baru
dengan klik button tambah user.

Gambar 4. 31 Implementasi Menu User

36
5. Implementasi Tambah User
Berikut adalah halaman tambah user kita dapat mengimputkan data dari
user baru. Halaman ini hanya dapat diakses setelah menekan tombol “tambah
user”.

Gambar 4.32 ImplementasiTambah User

6. Implementasi Edit User

Berikut merupakan halaman edit user dimana kita dapat melakukan edit
pada data user. Halaman ini dapat diakses dengan menekan action edit pada
halaman user.

Gambar 4. 33 Implementasi Edit User

37
7. Implementasi Master Produk
Berikut merupakan halaman master produk. Pada halaman ini
menampilkan berbagai data produk yang dijual.

Gambar 4. 34 Implementasi Master Produk

8. Implementasi Tambah Data Produk

Berikut merupakan halaman tambah data produk. Halaman ini dapat
diakses dengan menekan button “Tambah Data Produk” pada halaman master
produk.

Gambar 4. 35 Implementasi Tambah Data Produk

38
9. Implementasi Edit Data Produk
Berikut merupakan halaman edit data produk yang dapat diakses dengan
menekan action edit pada halaman master produk. Karyawan dapat melakukan
perubahan pada data produk.

Gambar 4. 36 Implementasi Edit Data Produk

10. Implementasi Data Supplier

Berikut merupakan design dari halaman supplier. Pada halaman ini berisi
informasi lengkap mengenai supplier yang dimiliki perusahaan.

Gambar 4. 37 Implementasi Data Supplier

39
11. Implementasi Tambah Data Supplier
Berikut merupakah halaman tambah data supplier yang dapat diakses
dengan menekan “Tambah Data Supplier” pada halaman Data Supplier.

Gambar 4. 38 Implementasi Tambah Data Supplier

12. Implementasi Edit Data Supplier

Berikut tampilan desain antarmuka halaman Edit Data Supplier. Admin
dapat melakukan perubahan pada data supplier dengan menekan button action
“edit” pada halaman Data Supplier.

Gambar 4. 39 Implementasi Edit Data Supplier

40
13. Implementasi Pos Kasir
Berikut merupakan design tampilan dari Pos Kasir, dimana karyawan dapat
mengimputkan berbagai transaksi dari penjualan toko.

Gambar 4. 40 Implementasi Pos Kasir

14. Implementasi Tambah Data Penerima Produk

Berikut tampilan desain antarmuka halaman Tambah Data Penerimaan
Produk, yang terdapat dimenu “Penerimaan Produk”.

Gambar 4. 41 Implementasi Tambah Data Penerimaan Produk

41
15. Implementasi Laporan
Berikut merupakan tampilan design dari halaman Laporan. Halaman ini
berisi laporan dari penjualan toka yang digunakan oleh admin

Gambar 4. 42 Implementasi Laporan

16. Implementasi Edit Password

Berikut tampilan desain antarmuka halaman “Edit Password”. Halaman ini
digunakan jika user ingin melakukan perubahan password.

Gambar 4. 43 Implementasi Edit Password

42
17. Implementasi Edit Profil
Berikut tampilan desain antarmuka dari halaman Edit Profil. Halaman ini
diakses jika user ingin melakukan update profil.

Gambar 4. 44 Implementasi Edit Profil

18. Implementasi Profil

Berikut tampilan desain antarmuka halaman Profil setelah melakukan
editing profil dilakukan.

Gambar 4. 45 Implementasi Profil

43
 BAB V

PENUTUP

5.1. Kesimpulan
Dari hasil analisa dan perancangan sistem informasi Maju Mart berbasis
website, maka dapat diperloeh beberapa kesimpulan sebagai berikut :
1. Hasil Analisa dan perancangan sistem ini yang diperoleh berupa DFD, ERD
dan Desain Antarmuka.
2. Sistem Toko Maju Mart merupakan sistem berbasis website, dimana hal ini
dapat mempermudah akses pengguna dalam sistem.

5.2. Saran
Adapun saran untuk sistem Maju Mart ini sebagai berikut:
1. Analisa dan perancangan yang dibuat hanya menjelaskan gambaran sistem
secara umum. Analisa dan perancangan dapat dibuat dengan menjelaskan
secara detail sistem yang ada.
2. Mencari hal detail yang dirasa dapat melengkapi dan mengembangkan sistem
yang sudah dirancang sebelumnya.

44
 DAFTAR PUSTAKA

[1] Septiana Firdaus,2012,Perancangan aplikasi Profile Generic, Jawa Barat :

Sekolah tinggi Teknologi garut.
[2] Leman, 1998. Data Flow Diagram Toolkit, Andi, Toronto
[3] Balsamic Studio. Balsamic. https:/balsamiq.com/. Diakses pada tanggal 21
Januari 2022

45