LAPORAN

PROJECT SISTEM INFORMASI MANAJEMEN

PERANCANGAN SISTEM POINT OF SALE (POS) PADA

UMKM SEMBALUN BERBASIS WEBSITE

OLEH :
NOPA APRIANTO (F1B 118 043)
MUHAMMAD ZUHAIR HAMAMI (F1B118041)
ISLAHUL ANWAR (F1B018030)

JURUSAN TEKNIK ELEKTRO

FAKULTAS TEKNIK
UNIVERSITAS MATARAM
2021
 KATA PENGANTAR

Puji dan syukur kami panjatkan kehadirat Allah SWT yang telah melimpahkan
rahmat serta karunia-Nya sehingga kami dapat menyelesaikan laporan project ini
dengan judul “PERANCANGAN SISTEM POINT OF SALE (POS) PADA UMKM
SEMBALUN”. Laporan ini ditulis untuk memenuhi tugas mata kuliah sistem
informasi manajemen

Kami menyadari bahwa dalam penulisan laporan ini tidak lepas dari bantuan banyak
pihak yang dengan tulus memberikan doa, kritik, dan Saran sehingga laporan ini
dapat terselesaikan.

Kami telah berusaha untuk memberikan yang terbaik, namun laporan ini tidak luput
dari kesalahan dan jauh dari kata sempurna. Oleh karena itu, kami mengharapkan
kepada para pembaca untuk memberikan kritik dan saran yang bersifat membangun
untuk laporan selanjutnya di waktu mendatang. Akhirnya kami berharap semoga
laporan yang telah kami buat ini dapat bermanfaat khususnya bagi kami sendiri dan
umumnya bagi semua pembaca.

.
 DAFTAR ISI

HALAMAN JUDUL

LEMBAR
PENGESAHAN……….…………………………………………………………………………………………………
KATA PENGANTAR.......................................................................................................................

DAFTAR ISI...................................................................................................................................

BAB I ............................................................................................................................................

PENDAHULUAN ...........................................................................................................................

1.1 Latar Belakang.................................................................................................................

1.2 Rumusan Masalah ...........................................................................................................

1.3 Metode yang digunakan dalam Pembuatan project ......................................................

1.4 Sistematika Penulisan .....................................................................................................

BAB II ...........................................................................................................................................

TINJAUAN PUSTAKA ....................................................................................................................

3.1 Framework ...........................................................................................................................

3.2 Bootstrap .............................................................................................................................

3.3 PHP .......................................................................................................................................

3.4 HTML ....................................................................................................................................

3.5 XAMPP Server.......................................................................................................................

3.6 Front End dan Back End ..................................................................................................

3.7 MySQL .............................................................................................................................

3.8 Database .........................................................................................................................

3.9 Website ...........................................................................................................................

BAB III ..........................................................................................................................................

PEMBAHASAN .............................................................................................................................

3.1 Garis Besar Sistem……………………………………………………………………..

3.2 Analisis Sistem…………………………………………………………………….......
3.3 Analisis Kebutuhan Sistem……………………………………………………………
3.4 Analisis Kebutuhan Fungsional………………………………………………………..

3.5 Analisis Kebutuhan Nonfungsional………………………………………………………………………….

3.6 Perancangan Sistem…………………………………………………………………...

3.7 UML (Unified Modeling Language)………………………………………………….

3.8 Perancangan Backend Website…………………………………………………….....

3.8.1 Perancangan Database…………………………………………………………………………………………

3.8.5 Perancangan Halaman Data Kategori……………………………………………………………….....

BAB IV..........................................................................................................................................

PENUTUP .....................................................................................................................................

4.1 KESIMPULAN………………………………………………………………………....
DAFTAR PUSTAKA .......................................................................................................................
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Dalam dunia perdagangan seperti saat ini, ilkim persaingan semakin
ketat, penyajian informasi yang akurat, cepat dan tepat adalah modal utama
dalam menghadapi persaingan. Perkembangan ilmu pengentahuan dan
teknologi telah memperlihatkan perkembangan yang sangat pesat untuk dapat
digunakan disemua bidang. Dunia elektronik telah menghasilkan peralatan
yang sangt canggih yaitu computer, dimana computer mempunyai banyak
kegunaan dan keperaktisan kerja yang sangat tinggi untuk mengolah data yang
rumit dan dalam jumlah yang banyak.

Suatu usaha yang ingin bersaing dan mengejar keuntugan yang besar,
maka computer merupakan alat bantu yang sangat bermanfaat dalam peroses
kegiatan perusahaan, termasuk peroses informasi. Informasi merupakan
sumber data yang diperlukan oleh berbagai pihak di perusahaan, baik pihak
internal maupun pihak eksternal perusahaan.

Begitu juga dengan UMKM sembalun, kelompok usaha ini bergerak di

usaha dagang yang terletak di sembalun, setiap harinya, kelompok usaha ini
dapat mencatat banyak transaksi penjualan maupun pembelian, sistem transaksi
penjualan dan pembelian barang pada kelompok umkm ini masih
dilaksaknakan secara manual sehingga menyulitkan untuk mengetahui laporan
penjualan, pembelian dan persediaan barang. Informasi mengenai sistem
persediaan ini sangat penting karena proses pembelian maupun penjualan
berasal dari sistem ini, untuk itulah sangat diperlukan informasi yang akurat
mengenai sistem transaksi pada kelompok usaha ini. Dan untuk membantu
mencipkan suatu sistem transaksi yang lebih tepat, cepat dan akurat, maka
penulis berkeinginan menuangkan permasalahan ini menjadi sebuah karya
ilmiah. Php sebagai bahasa pemrograman dan sql sebagai tempat menyimpan
data yang diterapkan dengan mengambil judul “PERANCANGAN SISTEM
INFORMASI POINT OF SALE(POS) PADA UMKN SEMBALUN”.
1.2 Rumusan Masalah
Adapun rumusan masalah yang diangkat adalah Bagaimana perancangan
sistem point of sale(POS) pada UMKM sembalun?

1.3 Metode yang digunakan dalam Pembuatan project

1) Wawancara
Pada metode ini, melakukan komunikasi dan diskusi dengan
karyawan atau staf yang bekerja di sistem operasi khususnya di bidang
yang berkaitan dengan projek yang ditawarkan.
2) Studi literatur
Studi literatur dimaksudkan untuk memperoleh informasi-informasi
dari berbagai referensi baik itu media cetak maupun internet, tentang
topik yang akan diangkat.
3) Observasi
Observasi di sini dilakukan dengan mengamati dan mempelajari
secara langsung sistem kerja dari sebuah website dari projek website
yang dibuat oleh staf yang bekerja dibagian aplikasi serta mempelajari
beberapa contoh projek yang serupa sebagai bahan refrensi.
1.4 Sistematika Penulisan
Laporan Project sistem informasi manajemen ini disusun menggunakan
sistematika penulisan sebagai berikut:

BAB I PENDAHULUAN

Merupakan bagian yang berisikan uraian singkat tentang objek project meliputi
latar belakang penulisan, ruang lingkup pembahasan, metode penulisan,
sistematika penulisan

BAB II TINJAUAN PUSTAKA

Merupakan bagian-bagian yang berisikan teori-teori dasar sebagai penunjang

pembahasan permasalahan yang diperoleh dari Internet, buku dan literatur

BAB III PEMBAHASAN

Merupakan bagian yang berisikan uraian tentang website kelompok UMKM

yang ada di sembalun

BAB IV PENUTUP

Merupakan bagian akhir yang berisikan kesimpulan dan saran yang

didapat dari pembahasan yang telah diuraikan pada bab sebelumnya.
 BAB II

TINJAUAN PUSTAKA

2.1 Framework
Framework adalah sebuah kerangka kerja yang digunakan untuk
mengembangkan sebuah aplikasi berbasis desktop atau berbasis website.
Framework sengaja diciptakan untuk membantu developer mengembangkan
apliaksi lebih cepat secara tersusun dan terstruktur. Dengan menggunakan
framework, developer akan lebih mudah untuk membuat aplikasi karena hanya
perlu menyusun komponen-komponen pemrograman yang sudah disediakan.
Sehingga developer dan programmer tidak perlu melakukan koding program
mulai dari awal.

2.2 Bootstrap
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk
merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain
berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan
komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Tidak
seperti kebanyakan kerangka kerja web lainnya, kerangka kerja ini hanya fokus
pada pengembangan front-end saja (Mark Otto dan Jacob Thornton, 2011)

Bootstrap telah menyediakan kumpulan komponen class interface dasar yang

telah dirancang sedemikian rupa untuk menciptakan tampilan yang menarik dan
ringan. Selain komponen class interface, bootstrap juga memiliki fitur grid yang
berfungsi untuk mengatur layout pada halaman website yang bisa digunakan
dengan sangat mudah dan cepat. Dengan menggunakan bootstrap pengguna juga
diberi keleluasaan dalam mengembangkan tampilan website yang menggunakan
bootstrap yaitu dengan mengubah tampilan bootstrap dengan menambah class dan
CSS sendiri..
2.3 PHP
Menurut Hikmah, dkk (2015:1) ”PHP merupakan kependekan dari
Hypertext Preprocessor. PHP tergolong sebagai perangkat lunak open source yang
diatur dalam aturan general purpose licences (GPL). Bahasa pemograman PHP
sangat cocok dikembangkan dalam lingkungan web, karena PHP bisa diletakkan
pada script HTML atau sebaliknya. PHP dikhususkan untuk pengembangan web
dinamis”.
Menurut Sibero (2013:49) “PHP adalah pemograman interpreter yaitu
proses penerjemahan baris kode sumber menjadi kode mesin yang dimengerti
komputer secara langsung pada saat baris kode dijalankan”.
Dari pendapat di atas dapat disimpulkan bahwa PHP adalah penerjemahan
baris kode yang bisa dibaca atau dimengerti oleh komputer karena PHP bisa
diletakkan pada script HTML atau sebaliknya. PHP dikhususkan untuk
pengembangan web dinamis.

2.4 HTML
HTML (Hyper Text Markup Language) adalah sebuah bahasa standar yang
digunakan oleh browser internet untuk membuat halaman dan dokumen pada
sebuah web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel.
HTML juga dapat digunakan sebagai penghubung antara file-file dalam situs atau
dalam komputer dengan menggunakan localhost. (Tim Berners-Lee, 1990)

2.5 XAMPP Server

XAMPP adalah sebuah software yang dibuat sebagai server lokal mengelola
berbagai jenis data dari website yang sedang dalam proses pengembangan. Xampp
ini digunakan untuk menampung isi dari sebuah website yang sedang
dikembangkan tanpa menggunakan internet atau offline. Prinsip kerja dari Xampp
ini mirip dengan web hosting pada umumnya tetapi tidak dapat diakses oleh
pengguna lain (localhost).

2.6 Front End dan Back End

Front-End adalah sebuah website bagian depan yang dapat dilihat langsung oleh
pengguna. Front-End dapat digunakan untuk berinteraksi secara langsung dengan
 pengguna lain yang berkunjung atau dengan admin dari sebuah website. Bagian ini
biasanya dibangun dengan menggunakan bahasa HTML, JavaCript dan CSS.
Back-End adalah sebuah website bagian belakang yang dibuat hanya untuk
admin. Bagian ini digunakan untuk mengatur segala sesuatu yang akan
ditampilkan pada Front-End. Bagian ini dapat dibangun dengan bahasa Python,
PHP, Ruby dan bahasa program lainnya.

2.7 MySQL
Menurut Sibero (2013:97) “MySQL atau dibaca “My Sekuel” dengan adalah
suatu RDBMS (Relational Database Management System) yaitu aplikasi sistem
yang menjalankan fungsi pengolahan data”.

Menurut Hidayatullah dan Jauhari (2015:180) “MySQL adalah salah satu

aplikasi DBMS yang sudah banyak oleh para pemrogramm aplikasi web. Contoh
DBMS lainnya adalah SQL Server, MS Access dari Microsoft dsb”

Berdasarkan penjelasan diatas dapat disimpulkan bahwa MySQL adalah

aplikasi DBMS yang menjalankan fungsi pengolahan data untuk membangun
sebuah aplikasi web.

2.8 Database
Menurut Gordon C. Everest database ialah koleksi atau kumpulan data yang
mekanis, terbagi(shared), terdefinisi secara formal dan juga dikontrol terpusat
pada suatu organisasi.

2.9 Website
Menurut Yuhefizar (2013:2) “Website adalah keseluruhan halaman halaman
web yang terdapat dalam sebuah domain yang mengandung informasi. Sebuah
website biasanya dibangun atas banyak halaman web yang saling berhubungan.
Hubugan antara satu halaman web dengan halaman web yang lainnya disebut
dengan hyperlink, sedangkan teks yang dijadikan media penghubung disebut
hypertext”.
 BAB III

PEMBAHASAN
ANALISA DAN PERANCANGAN SISTEM

3.1 Garis Besar Sistem

Secara garis besar sistem point of sale berabasis web ini bertujuan mengolah
data penjualan dan inventory barang yang ada pada kelompok umkm sembalun.
Data pada system ini dapat berupa data barang, data kategori, data transaksi
penjualan, dan data pengguna system, sehingga dari data-data tersebut diolah
menjadi laporan penjualan barang yang kemudian untuk memudahkan pelaku
usaha dalam mengolah data-data penjualan dan barang sehingga meminimalisir
kesalahan dalam pemasukkan data.

3.2 Analisis Sistem

Analisis sistem (Sistem analysis) merupakan tahap penguraian dari suatu
sistem informasi yang utuh kedalam bagian-bagian komponennya dengan
maksud untuk mengidentifikasikan dan mengevaluasi permasalahan,
kesempatan, hambatan yang terjadi dan kebutuhan yang diharapkan sehingga
dapat memberikan solusi atas permasalahan yang ada.

3.3 Analisis Kebutuhan Sistem

Analisis kebutuhan sistem merupakan tahap analisis yang digunakan untuk
mengetahui kebutuhan yang dperlukan dalam merealisasikan sistem yang akan
dibuat. Hal ini meliputi kebutuhan perangkat keras, kebutuhan perangkat lunak,
kebutuhan informasi, dan kebutuhan pengguna.

3.4 Analisis Kebutuhan Fungsional

Kebutuhan fungsional adalah jenis kebutuhan yang berisi proses-proses apa
saja yang nantinya dapat dilakukan oleh sistem. Berikut adalah kebutuhan
fungsional dari applikasi point of sale dengan menggunakan framework
expressJS dan library reactJS:

1. Kebutuhan fungsional administrator

a. System dapat mem-validasi login dan logout
 b. System dapat melakukan pemrosesan CRUD barang (create, read,
update, delete)
c. System dapat melakukan pemrosesan CRUD kategori barang (create,
read, update, delete)
d. System dapat melakukan pemrosesan CRUD transaksi penjualan
(create, read, update, delete)
e. System dapat melakukan pemrosesan CRUD pengguna (create, read,
update, delete).
f. System dapat melakukan pemrosesan cetak laporan penjualan

2. Kebutuhan fungsional kasir

a. System dapat mem-validasi login dan logout
b. System dapat melakukan pemrosesan CRUD barang (create, read,
update, delete)
c. System dapat melakukan pemrosesan CRUD kategori barang (create,
read, update, delete)
d. System dapat melakukan pemrosesan CRUD transaksi penjualan
(create, read, update, delete)
e. System dapat melakukan pemrosesan cetak laporan penjualan
3.5 Analisis Kebutuhan Nonfungsional
Kebutuhan nonfungsional adalah batasan layanan atau fungsi yang
ditawarkan oleh sistem, seperti kebutuhan perangkat keras (hardware),
kebutuhan perangkat lunak (software), sumber daya manusia,
kebutuhan keamanan, dan kebutuhan informasi:

1. Kebutuhan Perangkat Keras (Hardware)

Kebutuhan perangkat keras digunakan untuk mengetahui secara
tepat perangkat keras yang dibutuhkan untuk merancang sistem ini.
Berikut ini adalah spesifikasi perangkat keras (hardware):

a. Prosesor : Intel Celeron(R) N2830 Speed 2.16

GHz
b. Memori : RAM 2 GB
c. Penyimpanan : Harddisk 500 GB
 2. Kebutuhan Perangkat Lunak (Software)
Kebutuhan perangkat lunak meliputi semua perangkat lunak yang
dibutuhkan untuk menjalankan sistem. Berikut ini adalah spesifikasi
perangkat lunak (software):

a. Operating Sistem : Windows 10

b. Text Editor : Visual Studio Code Version 1.49.1
c. Database Server : MySQL
d. Web Browser : Google Chrome
3.6 Perancangan Sistem
Perancangan aplikasi sistem pendukung keputusan penilaian kinerja guru
menggunakan UML (Unified Modeling Language) sebagai pemodelan untuk
menggambarkan sistem yang berjalan.

3.7. UML (Unified Modeling Language)

Secara ekonomi sistem pengembangan proyek ini tidak akan menimbulkan
kerugian karena biaya dasar tidak lebih besar dari manfaat dan keuntungan
yang diperoleh.

3.7.1 Use Case Diagram

Use case diagram secara grafis menggambarkan siapa saja yang
menggunakan dan dalam cara apa user berinteraksi dengan sistem yang
dibangun. Berikut use case diagram pada sistem

Gambar : 3.7.1 Use Case Diagram

Tabel 3.7.1 Deskripsi Use Case Login

Nama use case Login

Aktor Semua user (admin)

Deskripsi Proses ini adalah proses yang dilakukan oleh pengguna

agar bisa masuk atau mengakses sistem

Pre-Condition a. Pengguna harus sudah memiliki akun yang sudah

terdaftar dalam sistem.
b. Pengguna harus menginputkan username dan
password yang sudah terdaftar
Post-Condition Menampilkan menu utama

LOGIN

AKTOR SISTEM

1. Membuka aplikasi 2. Menampilkan landing page form login

3. Memasukkan 4. Login berhasil dan menuju beranda sistem

username, password dan

klik login.

Tabel 3.7.2 Deskripsi Use Case CRUD Data Barang

Nama use case Crud Data Barang

Aktor Admin

Deskripsi Digunakan untuk mengolah data barang

Pre-Condition Login sebagai admin

Post-Condition Menampilkan menu utama

TAMBAH DATA BARANG

 AKTOR SISTEM

1. Klik menu barang 2. Menampilkan halaman data barang

3. Klik tambah barang 4. Menampilkan form input data barang

5.Memasukkan data barang klik 6. Data berhasil disimpan dan menampilkan data
simpan barang

Alternatif:

Jika admin tidak memasukkan data dengan benar, maka sistem akan mengeluarkan
peringatan data belum terisi atau data yang dimasukkan tidak tepat. Jika admin
menekan tombol batal, maka akan kembali ke halaman data

barang.

UBAH DATA BARANG

AKTOR SISTEM

1. Klik menu barang 2. Menampilkan halaman data barang

3. klik ubah 4. Form aktif dan menampilkan data yang

terpilih untuk di ubah

5.Mengisi perubahan data 6. Data berhasil diubah dan menampilkan data

barang.
Barang, klik update

Alternatif:

Jika admin menekan tombol kembali, maka akan kembali ke halaman data

barang.

Hapus Data Barang

AKTOR SISTEM

1. Klik menu barang 2. Menampilkan halaman data barang

3.Memilih data pada tabel 4. Menampilkan validasi hapus

dan klik hapus

3. klik oke 5. Menampilkan notifikasi hapus data berhasil

3.7.2 Sequent Diagram

Gambar 3.7.2 : Sequent Diagram

3.7.3 Class Diagram

Gambar 3.7.3: Class Diagram

 3.8 Perancangan Backend Website
User Interface merupakan tampilan di mana pengguna berinteraksi dengan
sistem. Peracangan user interface bertujuan untuk memungkinkan pengguna
menjalankan setiap tugas dalam kebutuhan pengguna. Berikut adalah rancangan
user interface yang dibuat:

3.8.1 Perancangan Database

Untuk menampung data berita yang dimasukkan lewat form, data login,
username,password dan tempat mengambil data yang nantinya akan ditampilkan
ke halaman web maka dibutuhkan database. Dalam hal ini untuk pembuatan
database digunakan phpmyadmin di web server XAMPP .

Gambar 3.8.1 : Tampilan XAMPP

3.8.2 Perancagan Halaman Login
Rancangan halaman login ini muncul setelah user mengakses halaman
landing page lalu mengklik login. User yang ingin masuk ke dalam sistem harus
memasukkan username dan password terlebih dahulu untuk mengakses halaman
utama
 Gambar 3.8.2 : Halaman login

3.8.3 Perancangan Halaman Dashboard

Rancangan halaman dashboard ini muncul setelah user mengakses berhasil
login kedalam sistem.

Gambar 3.8.3 : Halaman Dasboard

 3.8.4 Perancangan Data Barang
Pada halaman data barang terdapat form untuk menambahkan nama
barang,merk,stok,harga beli dan harga jual. Data yang di masukkan ke
form ini akan masuk ke database pada tabel data barang menggunakan
perintah INSERT. Halaman ini dapat diakses melalui halaman admin
dengan syarat harus melakukan login terlebih dahulu.

Gambar 3.8.4 : Halaman Data Barang

3.8.5 Perancangan Halaman Data Kategori

Pada halaman data kategori ini user dapat menambahkan kategori dari
barang yang akan ditambahkan dengan mengklik insert data

Gambar 3.8.5 : Halaman Data Kategori

 4.8.6 Perancangan Halaman User

Halaman ini merupakan halaman yang menampilkan profile pengguna

aplikasi dan pengguna bisa mengganti username dan password

Gambar 3.8.6 : Halaman User

3.8.7 Perancangan Transaksi Jual

Rancangan ini dapat dilihat pada gambar 3.8.7 berikut ini :

Gambar 3.8.7 : Halaman Transaksi Penjualan

3.8.8 Perancangan Halaman Laporan Penjualan

Pada halaman ini pengguna dapat melihat hasil penjualannya

Gambar 3.8.8 : Halaman Laporan Penjualan

 BAB IV

PENUTUP

4.1 KESIMPULAN
Boostrap adalah sebuah kerangka kerja CSS yang memberikan kemudahan saat
membangun sebuah aplikasi. Kemudahan itu dapat dilihat dari banyaknya fitur-
fitur yang dapat digunakan oleh pengembang saat membangun sebuah aplikasi
berbasis web. Fitur- fitur yang dimiliki Bootsrap juga sangat membantu dari segi
efisiensi waktu. Sehingga dalam perancangan sebuah aplikasi, perancang tidak
perlu membuat kode dari awal. karena banyak sekali tools atau alat yang bisa
digunakan untuk mempersingkat waktu penulisan kode.
 DAFTAR PUSTAKA

Winarto, Edi.2014. 24 Jam Belajar PHP. Semarang: PT. Elex Media Komputindo

Setemen,komang dkk. 2018. Pengantar Basis Data. Singaraja: PT RajaGrafindo

Persada.

youtube.com (2015, Oktober 24). Belajar PHP untuk Pemula. Diakses pada 2021, 6
Februari. Dari https://www.youtube.com/watch?v=l1W2OwV5rgY

malasngoding.com (2015,Oktober 24). Membuat Navigation Bar Bootstrap. Diakses

pada 2021, 10 Februari, dari https://www.malasngoding.com/membuat-
navigation-bar-bootstrap/

niagahoster.co.id.( 2015, Oktober 24 ).Cara Membuat Crud Dengan Php Dan Mysqli.
Diakses pada 2021, 1 Maret, dari https://www.niagahoster.co.id/blog/cara-
membuat-crud-dengan-php-dan-mysql/

malasngoding.com (2015,Oktober 24). Upload File Menggunakan Php Dan Mysqli.

Diakses pada 2021, 10 Maret, dari https://www.malasngoding.com/upload-file-
menggunakan-php-dan-mysqli/