APLIKASI STOK BARANG BERBASIS WEB

PADA CV. GRIYA SARANA INFORMATIKA

Laporan ini disusun sebagai salah satu syarat

Ujian Kenaikan Kelas XII 2022/2023

Disusun Oleh :

SULTHAN ZAKI NOER FATHIR

NIS 20211071

KOMPETENSI KEAHLIAN REKAYASA PERANGKAT LUNAK

SMK INFORMATIKA AL-IRSYAD AL-ISLAMIYYAH CIREBON
TAHUN AJARAN 2022/2023

1
 YAYASAN AL-IRSYAD AL-ISLAMIYYAH CIREBON
SMK INFORMATIKA AL-IRSYAD AL-ISLAMIYYAH

Kompetensi Keahlian Rekayasa Perangkat Lunak (RPL)

TANDA PERSETUJUAN DAN PENGESAHAN LAPORAN

PRAKTEK KERJA LAPANGAN PADA CV. GSI

Nama : Sulthan Zaki Noer Fathir

NIS / NISN : 20211071/0052136830
Program Keahlian : Teknik Komputer Dan Informasi
Kompetensi Keahlian : Rekayasa Perangkat Lunak
Judul Laporan PKL : Aplikasi Stock Barang Berbasis Web

Laporan praktek kerja lapangan ini telah disetujui dan disahkan serta diizinkan
untuk dipresentasikan pada ujian lisan praktek kerja lapangan periode : 2022/2023.

Kepala Kompetensi RPL Pembimbing Laporan

Fahmi, M.Kom Fahmi, M.Kom

NIK: 19830120091022 NIK: 19830120091022

Menyetujui,
Kepala SMK Informatika Al-Irsyad Al-Islamiyyah Cirebon

Sri Wahyuni Aslamiah,S.Pd

NIK: 19830720072012

2
 PENGUJI PKL

Laporan Praktek Kerja Lapangan ini telah dipresentasikan dan diujikan didepan

Tim Penguji PKL Kompetensi Keahlian Rekayasa Perangkat Lunak (RPL)

SMK Informatika Al-Irsyad Al-Islamiyyah Cirebon

pada tanggal : .........

No Nama Tanda Tangan Jabatan

1. ……………….. ……………….. Penguji 1

2. ……………….. ……………….. Penguji 2

3
 LEMBAR KONSULTASI PKL
SMK INFORMATIKA AL-IRSYAD AL-ISLAMIYYAH CIREBON
KOMPETENSI KEAHLIAN : REKAYASA PERANGKAT LUNAK

FOTO NISN : 0052136830

3x4 Nama Lengkap : Sulthan Zaki Noer Fathir

Pembimbing I : Fahmi, M.Kom
Pembimbing II : Muhammad Hafiizh
Judul PKL : Aplikasi Stock Barang Berbasis Web

Tanggal Paraf Guru

No. Pokok Bahasan
Bimbingan Pembimbing

1. 12-08-2022 Pengantar Laporan

2. 26-08-2022 Tata cara penulisan laporan
3. 09-09-2022 Pembahasan Bab 1
4. 30-09-2022 Pembahasan Bab 2
5. 07-10-2022 Pembahasan Bab 3
6. 14-10-2022 Pembahasan Bab 4
7. 28-10-2022 Program Aplikasi

Catatan untuk guru pembimbing

Bimbingan PKL
 Dimulai tanggal : 12 Agustus 2022
 Diakhiri tanggal : 28 November 2022
 Jumlah Pertemuan Bimbingan : 7

Disetujui oleh,
Guru Pembimbing Laporan

Fahmi, M.Kom
NIK:19830120091022

4
 KATA PENGANTAR

Puji syukur penulis panjatkan atas kehadirat Allah Subhanahu wa ta ‘ala yang

telah melimpahkan rahmat kepada penulis sehingga dapat menyelesaikan

penyususnan laporan Praktik Kerja Lapangan (PKL) ini, sebagai salah satu syarat

untuk mengikuti Sidang PKL pada Kompetensi Keahlian Rekayasa Perangkat

Lunak (RPL) di Sekolah Menengah Kejuruan (SMK) Informatika Al-Irsyad Al-

Islamiyyah Cirebon .

Selama dalam penyelesaian dan penyusunan laporan ini, tidak lepas dari

bantuan dan bimbingan dari berbagai pihak sehingga penulis bisa mendapatkan

informasi yang dibutuhkan dalam penyusunan laporan ini. Oleh karena itu, pada

kesempatan ini penulis ingin menyampaikan terimakasih yang sebesar-besarnya

kepada yang terhormat:

1. Kepada kedua Orang Tua yang selalu mendoakan penulis

2. Ibu Sri Wahyuni Aslamiah, S.Pd, selaku Kepala SMK Informatika Al-

Irsyad Al-Islamiyyah Cirebon yang telah memberikan ijin dalam

penyusunan penulisan laporan ini.

3. Bapak Abdurachim, S.Kom, selaku Ketua Panitia PKL Tahun 2022/2023

4. Bapak Fahmi, M.Kom, selaku Kepala Kompetensi Rekayasa Perangkat

Lunak SMK Informatika Al-Irsyad Al-Islamiyyah Cirebon sekaligus

juga sebagai Pembimbing Laporan yang telah memberikan arahan dan

bimbingannya dalam penyusunan laporan ini sehingga laporan ini dapat

tersusun dengan baik

5
 5. Bapak Muhammad Hafiizh, S.Kom, selaku Pembimbing Lapangan yang

telah memberikan arahan dan bimbingan kunjungan di lapangan.

6. Bapak dan Ibu Guru serta Staff TU SMK Informatika Al-Irsyad Al-

Islamiyyah Cirebon.

7. Bapak Oskar Haris S.T, selaku direktur di CV GSI.

8. Mas Chandra bakhtiar selaku pembimbing di kantor CV GSI.

9. Rekan-rekan kelas XII RPL yang telah memberikan support dan

dukungan selama pelaksanaan PKL dan penyusunan laporan.

10. Serta semua pihak yang tidak dapat penulis sebutkan satu persatu, yang

turut membantu sehingga penulis dapat menyelesaikan laporan PKL ini.

Penulis menyadari bahwa penyusunan laporan ini penulisan laporan PKL ini

masih banyak kekurangan. Oleh karena itu, segala kritik dan saran yang

membangun sangat penulis harapkan. Semoga penulisan yang telah penulis susun

ini dapat bermanfaat, baik bagi penulis sendiri maupun bagi semua pihak yang

memerlukan.

Cirebon, Desember 2022

Sulthan Zaki N.F

6
 DAFTAR ISI

APLIKASI STOCK BARANG BERBASIS WEB..................................................i

TANDA PERSETUJUAN DAN PENGESAHAN LAPORAN..............................ii

PENGUJI PKL........................................................................................................iii

LEMBAR KONSULTASI PKL.............................................................................iv

KATA PENGANTAR............................................................................................vi

DAFTAR ISI...........................................................................................................ix

DAFTAR GAMBAR..............................................................................................xi

DAFTAR TABEL..................................................................................................xii

DAFTAR LAMPIRAN........................................................................................xiii

BAB I PENDAHULUAN........................................................................................1

1.1. Latar Belakang Pemilihan Judul................................................................1

1.2. Maksud dan Tujuan...................................................................................1

1.3. Metode Penelitian......................................................................................1

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

BAB II LANDASAN TEORI..................................................................................4

2.1 Teori Pendukung Program.........................................................................4

2.1.1 Pengertian Web..................................................................................4

2.1.2 HTML................................................................................................4

2.1.3 PHP....................................................................................................5

2.1.4 Database.............................................................................................5

2.1.5 MySQL...............................................................................................5

2.1.6 CSS.....................................................................................................6

2.1.7 Bootstrap............................................................................................7

7
 2.1.8 AJAX.................................................................................................7

2.1.9 Laravel...............................................................................................8

2.2 Teori Perancangan Program......................................................................9

2.2.1 Pengertian Flowchart (Alur Program)................................................9

2.2.2 Pengertian Flowmap(Alur System)..................................................11

2.2.3 Pengertian DFD (Data Flow Dagram).............................................12

2.2.4 Pengertian ERD (Entity Relationship Diagram)..............................13

BAB III TINJAUAN PERUSAHAAN..................................................................14

3.1. Sejarah Perusahaan..................................................................................14

3.2. Struktur Organisasi Perusahaan...............................................................14

3.3. Jenis Badan Usaha...................................................................................15

BAB IV PEMBAHASAN......................................................................................16

4.1 Perancangan Sistem.................................................................................16

4.1.1 Flowmap...........................................................................................16

4.1.2 DFD..................................................................................................17

4.1.3 Flowchart Program...........................................................................18

4.2 Spesifikasi Program.................................................................................19

4.2.1 Desain Tampilan Program...............................................................19

4.2.2 Struktur Table..................................................................................25

4.2.3 Tampilan Program............................................................................30

4.3 Sarana Pendukung Program....................................................................35

4.3.1 Software...........................................................................................35

4.3.2 Hardware..........................................................................................35

BAB V PENUTUP.................................................................................................36

5.1. Kesimpulan..............................................................................................36

5.2. Saran-saran..............................................................................................36

8
DAFTAR PUSTAKA............................................................................................38

DAFTAR RIWAYAT HIDUP...............................................................................39

9
 DAFTAR GAMBAR

Gambar 2.1 Contoh Flowchart.................................................................................9

Gambar 2.2 Simbol Flowchart...............................................................................10

Gambar 4.1 Flowmap.............................................................................................16

Gambar 4.2 DFD Stok Barang...............................................................................17

Gambar 4.3 Flowchart Program.............................................................................18

Gambar 4.4 Desain Halaman Login.......................................................................19

Gambar 4.5 Desain Halaman Dashboard Admin...................................................19

Gambar 4.6 Desain Halaman User.........................................................................20

Gambar 4.7 Desain Halaman Kategori .................................................................20

Gambar 4.8 Desain Halaman Produk.....................................................................21

Gambar 4.9 Desain Halaman Customer.................................................................21

Gambar 4.10 Desain Halaman Penjualan..............................................................22

Gambar 4.11 Desain Halaman Supplier.................................................................22

Gambar 4.12 Desain Halaman Produk Masuk.......................................................23

Gambar 4.13 Desain Halaman Produk Keluar.......................................................23

Gambar 4.14 Desain Halaman Tambah Data.........................................................24

Gambar 4.15 Desain Halaman Edit Data...............................................................24

Gambar 4.16 Desain Halaman Hapus Data...........................................................25

Gambar 4.17 Tampilan Halaman Login................................................................30

Gambar 4.18 Tampilan Halaman Dashboard Admin.............................................30

Gambar 4.19 Tampilan User..................................................................................30

Gambar 4.20 Tampilan Halaman Kategori............................................................31

10
Gambar 4.21 Tampilan Halaman Produk..............................................................31

Gambar 4.22 Tampilan Halaman Customer..........................................................32

Gambar 4.23 Tampilan Halaman Penjualan .........................................................32

Gambar 4.24 Tampilan Halaman Supplier............................................................33

Gambar 4.25 Tampilan Produk Masuk..................................................................33

Gambar 4.26 Tampilan Produk Keluar..................................................................33

Gambar 4.27 Tampilan Tambah Data....................................................................34

Gambar 4.28 Tampilan Edit Data..........................................................................34

Gambar 4.29 Tampilan Hapus Data.......................................................................34

11
 DAFTAR TABEL

Tabel 2.1 Simbol Data Flow Diagram...................................................................11

Tabel 4.1 Alur Flowmap........................................................................................15

Tabel 4.2 Tabel Users............................................................................................25

Tabel 4.3 Tabel Product_keluar.............................................................................26

Tabel 4.4 Tabel Sales.............................................................................................26

Tabel 4.5 Tabel Kategori.......................................................................................27

Tabel 4.6 Tabel Product_masuk.............................................................................27

Tabel 4.7 Tabel Customers....................................................................................28

Tabel 4.8 Tabel Products.......................................................................................28

Tabel 4.9 Tabel Suppliers......................................................................................29

Tabel 4.10 Software Pendukung Program.............................................................35

Tabel 4.11 Hardware Pendukung Program............................................................35

12
 DAFTAR LAMPIRAN

1. Surat Balasan PKL DU/DI ............................................................ Terlampir

2. Absensi Kehadiran Selama PKL....................................................Terlampir

3. Uraian Kegiatan PKL.....................................................................Terlampir

4. Nilai PKL Dari DU/DI...................................................................Terlampir

13
 BAB I

PENDAHULUAN

1.1. Latar Belakang Pemilihan Judul

Praktek kerja lapangan yang disingkat dengan “PKL” merupakan bagian

dari program pembelajaran yang harus dilaksanakan oleh setiap peserta didik

di dunia kerja.

Aplikasi stok barang adalah sebuah perangkat lunak (software) yang

dibuat untuk mencatat, mengelola, mengawasi dan membuat laporan

persediaan barang secara lebih akurat, cepat dan mudah.

1.2. Maksud dan Tujuan

Dengan dibuatnya aplikasi stok barang, untuk membantu admin dalam

pencatatan barang yang masuk dan keluar termasuk penjualan secara lebih

mudah di tangani dan lebih teratur, tanpa manual

1.3. Metode Penelitian

Metode penelitian yang dilakukan penulis adalah sebagai berikut :

1.3.1. Metode Wawancara

Pada metode ini penulis langsung mewawancarai salah satu

karyawan CV GSI yang ada di tempat PKL. Penulis menjadikan

karyawan dari CV GSI tersebut sebagai narasumber untuk mendapatkan

informasi program seperti apa yang harus dibuat serta bagaimana alur

kerja dan spesifikasi dari program tersebut.

1
 1.3.2. Praktek Lapangan

Disini penulis melakukan praktek kerja lapangan selama 5 bulan

dimulai dari Bulan Juli 2022 hingga penghujung Bulan November

2022.

1.3.3. Studi Pustaka

Untuk menunjang dalam penulisan laporan ini, penulis juga

menggunakan teknik studi pustaka, yaitu dengan memanfaatkan

informasi dari internet melalui referensi artikel serta literatur buku.

1.4. Sistematika Penulisan

Adapun sistematik penulisan laporan yang penulis buat adalah sebagai

berikut :

BAB I : PENDAHULUAN

Bab ini membahas tentang latar belakang pemilihan judul laporan,

maksud dan tujuan program, metode pengumpulan data, dan sistematis

penulisan laporan.

BAB II : LANDASAN TEORI

Bab ini membahas tentang konsep dasar dan teori pendukung untuk

membuat program.

BAB III : TINJAUAN PERUSAHAAN

Pada bab ini membahas tentang sejarah perusahaan, struktur

organisasi perusahaan, dan jenis badan usaha perusahaan.

BAB IV : PEMBAHASAN

Bab ini membahas tentang tinjauan kasus, spesifikasi rancangan

program, dan sarana pendukung program.

2
BAB V : PENUTUP

Bab ini berisi penutup berupa kesimpulan yang didapat, dan saran-

saran

3
 BAB II

LANDASAN TEORI

2.1 Teori Pendukung Program

2.1.1 Pengertian Web

Website adalah sebuah kumpulan halaman pada suatu domain di

internet yang dibuat dengan tujuan tertentu dan saling berhubungan

serta dapat diakses secara luas melalui halaman depan (home page)

menggunakan sebuah browser menggunakan URL website.

Sumber : https://www.niagahoster.co.id/blog/pengertian-website/

2.1.2 HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa

markah yang digunakan untuk membuat sebuah halaman web,

menampilkan berbagai informasi di dalam sebuah penjelajah web

Internet dan pemformatan hiperteks sederhana yang ditulis dalam

berkas format ASCII agar dapat menghasilkan tampilan wujud yang

terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat

lunak pengolah kata dan disimpan dalam format ASCII normal

sehingga menjadi halaman web dengan perintah-perintah HTML.

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di

dunia penerbitan dan percetakan yang disebut dengan SGML (Standard

Generalized Markup Language), HTML adalah sebuah standar yang

digunakan secara luas untuk menampilkan halaman web. HTML saat

4
 ini merupakan standar Internet yang didefinisikan dan dikendalikan

penggunaannya oleh World Wide Web Consortium (W3C).

Sumber: https://id.wikipedia.org/wiki/HTML

2.1.3 PHP

PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat

ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai

untuk memprogram situs web dinamis. PHP dapat digunakan untuk

membangun sebuah CMS.

Sumber: https://id.wikipedia.org/wiki/PHP

2.1.4 Database

Pangkalan data atau basis data (bahasa Inggris: database) adalah

kumpulan informasi yang disimpan di dalam komputer secara

sistematik sehingga dapat diperiksa menggunakan suatu program

komputer untuk memperoleh informasi dari basis data tersebut.

Perangkat lunak yang digunakan untuk mengelola dan memanggil kueri

(query) basis data disebut sistem manajemen basis data (database

management system, DBMS). Sistem basis data dipelajari dalam ilmu

informasi.

Sumber: https://id.wikipedia.org/wiki/Pangkalan_data

2.1.5 MySQL

MySQL adalah sebuah implementasi dari sistem manajemen basis

data relasional (RDBMS) yang didistribusikan secara gratis di bawah

lisensi GPL (General Public License). Setiap pengguna dapat secara

bebas menggunakan MySQL, tetapi dengan batasan perangkat lunak

5
 tersebut tidak boleh dijadikan produk turunan yang bersifat komersial.

MySQL sebenarnya merupakan turunan salah satu konsep utama dalam

basisdata yang telah ada sebelumnya; SQL (Structured Query

Language). SQL adalah sebuah konsep pengoperasian basisdata,

terutama untuk pemilihan atau seleksi dan pemasukan data, yang

memungkinkan pengoperasian data dikerjakan dengan mudah secara

otomatis.

Sumber: https://id.wikipedia.org/wiki/MySQL

2.1.6 CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur

beberapa komponen dalam sebuah web sehingga akan lebih terstruktur

dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti

Microsoft Word yang dapat mengatur beberapa style, misalnya heading,

subbab, bodytext, footer, images, dan style lainnya untuk dapat

digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya

CSS dipakai untuk memformat tampilan halaman web yang dibuat

dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh

pada teks, warna tabel, ukuran border, warna border, warna hyperlink,

warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri,

kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style

sheet yang digunakan untuk mengatur tampilan dokumen. Dengan

6
 adanya CSS memungkinkan kita untuk menampilkan halaman yang

sama dengan format yang berbeda.

Sumber: https://id.wikipedia.org/wiki/Cascading_Style_Sheets

2.1.7 Bootstrap

Bootstrap adalah open-source framework (kerangka kerja

pemrograman) front-end (library) yang bebas (gratis) untuk merancang

situs web dan aplikasi web. Framework ini berisi template desain

berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi

dan komponen antarmuka lainnya, serta juga ekstensi opsional

JavaScript. Tidak seperti kebanyakan framework web lainnya,

framework ini hanya fokus pada pengembangan front-end saja.

Sumber: https://id.wikipedia.org/wiki/Bootstrap_(framework_front-

end)

2.1.8 AJAX

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah

suatu teknik pemrograman berbasis web untuk menciptakan aplikasi

web interaktif. Tujuannya adalah untuk memindahkan sebagian besar

interaksi pada komputer web surfer, melakukan pertukaran data dengan

server di belakang layar, sehingga halaman web tidak harus dibaca

ulang secara keseluruhan setiap kali seorang pengguna melakukan

perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan

kegunaan.

Sumber: https://id.wikipedia.org/wiki/AJAX

7
2.1.9 Laravel

Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi

MIT, dibangun dengan konsep MVC (model view controller). Laravel

adalah pengembangan website berbasis MVP yang ditulis dalam PHP

yang dirancang untuk meningkatkan kualitas perangkat lunak dengan

mengurangi biaya pengembangan awal dan biaya pemeliharaan, dan

untuk meningkatkan pengalaman bekerja dengan aplikasi dengan

menyediakan sintaks yang ekspresif, jelas dan menghemat waktu.

MVC adalah sebuah pendekatan perangkat lunak yang memisahkan

aplikasi logika dari presentasi. MVC memisahkan aplikasi berdasarkan

komponen- komponen aplikasi, seperti : manipulasi data, controller,

dan user interface.

Model, Model mewakili struktur data. Biasanya model berisi

fungsi-fungsi yang membantu seseorang dalam pengelolaan basis data

seperti memasukkan data ke basis data, pembaruan data dan lain-lain.

View, View adalah bagian yang mengatur tampilan ke pengguna.

Bisa dikatakan berupa halaman web.

Controller, Controller merupakan bagian yang menjembatani

model dan view.

Sumber: https://idcloudhost.com/pengertian-dan-keunggulan-

framework-laravel/

8
2.2 Teori Perancangan Program

2.2.1 Pengertian Flowchart (Alur Program)

Flowchart adalah adalah suatu bagan dengan simbol-simbol

tertentu yang menggambarkan urutan proses secara mendetail dan

hubungan antara suatu proses (instruksi) dengan proses lainnya dalam

suatu program.

Dalam perancangan flowchart sebenarnya tidak ada rumus atau

patokan yang bersifat mutlak (pasti). Hal ini didasari oleh flowchart

(bagan alir) adalah sebuah gambaran dari hasil pemikiran dalam

menganalisa suatu permasalahan dalam komputer. Karena setiap analisa

akan menghasilkan hasil yang bervariasi antara satu dan lainnya.

Kendati begitu secara garis besar setiap perancangan flowchart selalu

terdiri dari tiga bagian, yaitu input, proses dan output.

Gambar 2.1 Contoh Flowchart

Sumber: https://informatikalogi.com/pengertian-flowchart-dan-jenis-jenisnya/

9
2.2.2 Pengertian Flowmap(Alur System)

Flowmap adalah campuran peta dan flow chart,yang menunjukan

pergerakan benda dari satu lokasi ke lokasi lain, seperti jumlah orang

dalam migrasi, jumlah barang yang diperdagangkan, atau jumlah paket

dalam jaringan. Flowmap menolong analisis dan programmer untuk

memecahkan masalah ke dalam segmen-segmen yang lebih kecil dan

menolong dalam menganalisis alternaitf-alternatif lain dalam

pengoprasian.

Gambar 2.2 Simbol Flowchart

10
a) Dokumen : Menunjukan dokumen input atau output untuk proses manual

atau komputer.

b) Proses : Kegiatan proses yang di lakukan dengan komputerisasi.

c) Proses Manual : Kegiatan proses yang di lakukan dengan manual.

d) Garis alir : Menunjukan alir data dari atau ke proses.

e) Data store : Menunjukan penyimpanan arsip atau dokumen non komputer.

f) Database : Tempat penyimpanan data berbasis database.

g) Data elektronik : Menunjukan laporan data elektronik.

Sumber:https://sisteminformasimanajemen15089.wordpress.com/

2016/12/14/flowmap/

2.2.3 Pengertian DFD (Data Flow Dagram)

Data Flow Diagram (DFD) merupakan suatu cara atau metode

untuk membuat rancangan sebuah sistem yang mana berorientasi pada

alur data yang bergerak pada sebuah sistem nantinya. Dalam pembuatan

Sistem Informasi, DFD sering digunakan. DFD dibuat oleh para analis

untuk membuat sebuah sistem yang baik. Dimana DFD ini nantinya

diberikan kepada para programmer untuk melakukan proses coding.

Dimana para programmer melakukan sebuah coding sesuai dengan

DFD yang dibuat oleh para analis sebelumnya. Tools yang digunakan

pada pembuatan DFD (Data Flow Diagram) yaitu EasyCase, Power

Designer 6. Salah satu cara lain untuk mendesain sistem yaitu

menggunakan UML(Unified Manual Language).

11
 Tabel 2.1 Simbol Data Flow Diagram

Simbol Definisi
Kesatuan diluar sistem (external entity) yang
memberikan input ke sistem atau menerima
User / Terminator output dari sistem berupa orang, organisasi,
atau sistem lain.

Aktivitas yang mengolah input menjadi

Proses output.
Aliran data pada sistem (antar proses, antara
Data Flow terminator & proses, serta antara proses &
data store)

Penyimpanan data pada database, biasanya

Data Store berupa tabel.

Sumber:https://adepuspita28.wordpress.com/2013/10/26/pengertian-

data-flow-diagram-dfd-dan-contoh-gambar-dfd

2.2.4 Pengertian ERD (Entity Relationship Diagram)

ERD merupakan suatu model untuk menjelaskan hubungan antar

data dalam basis data berdasarkan objek-objek dasar data yang

mempunyai hubungan antar relasi. ERD untuk memodelkan struktur

12
data dan hubungan antar data, untuk menggambarkannya digunakan

beberapa notasi dan simbol.

Menurut salah satu para ahli, Brady dan Loonam (2010), Entity

Relationship diagram (ERD) merupakan teknik yang digunakan untuk

memodelkan kebutuhan data dari suatu organisasi, biasanya oleh

System Analys dalam tahap analisis persyaratan proyek pengembangan

system. Sementara seolah-olah teknik diagram atau alat peraga

memberikan dasar untuk desain database relasional yang mendasari

sistem informasi yang dikembangkan. ERD bersama-sama dengan

detail pendukung merupakan model data yang pada gilirannya

digunakan sebagai spesifikasi untuk database.

Sumber: http://intanstemapal24.blogspot.com/2014/08/pengertian-erd-

entity-relationship.html

13
 BAB III

TINJAUAN PERUSAHAAN

3.1. Sejarah Perusahaan

4. CV Griya Sarana Informatika adalah perusahaan komputer di Cirebon yang

berdiri pada 22 Juni 2010, Beralamatkan kantor di Perumahan Griya Caraka,

Jl.Hanjuang Blok H3 No.22 Kecamatan Kedawung Kab.Cirebon.

5. CV Griya Sarana Informatika adalah perusahaan komputer terdepan yang

menerapkan konsep penjualan produk PC rakitan murah untuk konsumen

dengan tujuan membentuk image HD menjual barang berkualitas dengan

harga terjangkau. CV Griya Sarana Informatika mengembangkan berbagai

sektor bisnis IT melalui Penjualan Retail Consumer, Distribusi Reseller,

Maintenance, Service, Layanan Purnajual, Branded PC dan Sofware Business.

3.2 Struktur Organisasi Perusahaan

STRUKTUR ORGANISASI PERUSAHAAN

CV.GRIYA SARANA INFORMATIKA

DIREKTUR & PROGRAMMER DIREKTUR

Oskar haris ST Dr.supriyanto Ahmad S.kom M.kom

ADMIN PROGRAMMER PROGRAMMER HARDWARE HARDWARE HARDWARE

Neris Alwan Fachrudin Chandra Bakhtiar Encep Moch Iqbal
Ame Suwarno

Gambar 3.1 Struktur Organisasi

14
3.3 Jenis Badan Usaha

• Jenis Bidang Usaha

Griya Sarana Informatika memiliki beberapa bidang usaha yang bisa

dijelaskan sebagai berikut:

• Penjualan
Melayani penjualan produk meliputi Komputer & Notebook baik hardware
ataupun software secara retail maupun mekanisme tender baik secara langsung
(direct selling) maupun penjualan secara online.

• Pembelian
Melayani pembelian produk (purna jual) Komputer dan Notebook beserta
aksesorisnya dalam kondisi tertentu, secara retail maupun mekanisme lelang
partai besar dan kecil.

• Perawatan
Melayani perawatan hardware dan software IT, personal maupun instansi baik
swasta maupun pemerintah.

• Jaringan IT
Melayani instalasi jaringan komputer pribadi maupun instansi dari skala kecil
hingga profesional

15
 BAB IV

PEMBAHASAN

4.1 Perancangan Sistem

4.1.1Flowmap

Gambar 4.1 Flowmap

16
4.1.2DFD

Gambar 4.2 DFD Stok Barang

17
4.1.3Flowchart Program

Gambar 4.3 Flowchart Program

18
4.2 Spesifikasi Program

4.2.1 Desain Tampilan Program

a) Halaman Login

Silahkan Login
Email

Password

Login

Forgot my Password

Register a new membership

Gambar 4.1 Desain Halaman Login

b) Halaman Dashboard Admin

Logo

Dashboard

Dashboard

Users

Kategori

Product

Customer

Penjualan

Supplier

Produk Keluar

Produk Masuk

Gambar 4.5 Desain Halaman Dashboard

c) Halaman User

Logo

User

Dashboard
19
Users

Kategori
 Logo

1.
Informasi

Dashboard
2. Mading Informasi
Informasi

Menu
Pesan Untuk Informasi
Customer
Menu
Supplier
Penjualan
Supplier
Supplier

Produk Keluar

Produk Masuk

Gambar 4.6 Desain Halaman User

d) Halaman Kategori

Logo

Data Categories

Dashboard Add Categories

Users

Kategori

Product

Customer

Penjualan

Supplier

Produk Keluar

Produk Masuk Gambar 4.3 Desain Halaman Kategori Admin

Gambar 4.7 Desain Halaman Kategori

e) Halaman Produk

Logo

Data Produk

Dashboard 20
Users

Kategori
 Add Produk

Customer

Penjualan

Supplier

Produk Keluar

Produk Masuk

Gambar 4.8 Desain Halaman Produk

f) Halaman Data Customer

Logo

Data Customer

Dashboard Add Customer

Users

Kategori

Product

Customer

Penjualan
Gambar 4.5 Desain Halaman Riwayat Pengaduan
Supplier

Produk Keluar

Produk Masuk Gambar 4.6 Desain Halaman Kategori Admin

Gambar 4.9 Desain Halaman Customer

g) Halaman Penjualan

Logo

Data Sales

Dashboard
21
Users

Kategori

Product
 Add Sales

Customer

Penjualan

Supplier

Produk Keluar

Produk Masuk Gambar 4.7 Desain Halaman Kategori Admin

Gambar 4.10 Desain Halaman Penjualan

h) Halaman Supplier

Logo

Data Suppliers

Dashboard Add Suppliers

Users

Kategori

Product

Customer

Penjualan

Supplier Gambar 4.8 Desain Halaman Home User

Produk Keluar

Produk Masuk Gambar 4.9 Desain Halaman Kategori Admin

Gambar 4.11 Desain Halaman Supplier

i) Halaman Produk Masuk

Logo

Data Product Masuk

Dashboard

Users 22

Kategori

Product
 Add Product Masuk

Customer

Penjualan

Supplier

Produk Keluar

Produk MasukGambar 4.10 Desain Halaman Kategori Admin

Gambar 4.12 Desain Halaman Produk Masuk

j) Halaman Produk Keluar

Logo

Data Product Keluar

Dashboard Add Product Keluar

Users

Kategori

Product

Customer

Penjualan

Supplier

Produk Keluar

Produk MasukGambar 4.11 Desain Halaman Kategori Admin

Gambar 4.13 Desain Halaman Produk Keluar

k) Halaman Tambah Data

Add Data Produk

Nama
23
Price

Quantity
 Image

Category

Gambar 4.12 Desain Halaman Kategori Admin

Cancel Submit

Gambar 4.14 Desain Halaman Tambah Data

l) Halaman Edit Data

Edit Data Produk

Nama
Price
Quantity
Image
Category

Gambar 4.13 Desain Halaman Kategori Admin

Cancel Submit

Gambar 4.15 Desain Halaman Edit Data

m) Halaman Hapus Data

24
 Are You Sure?

You won’t be able to revert this!

Yes, delete it! Cancel

Gambar 4.16 Desain Halaman Hapus Data

4.2.2 Struktur Table

a) Tabel Users

Tabel 4.1 Tabel Users

Field Type Lenght Ket

id integer 10 PK

name varchar 191 -

email varchar 191 -

password varchar 191 -

remember_token varchar 100 -

created_at timestamp - -

update_at timestamp - -

role enum(‘admin’,’staff’) - -

b) Tabel Product_keluar

Tabel 4.2 Tabel Product_keluar

25
 Field Type Lenght Ket

id integer 10 PK

product_id integer 10 -

customer_id integer 10 -

qty integer 11 -

tanggal date - -

created_at timestamp - -

updated_at timestamp - -

c) Tabel Sales

Tabel 4.3 Tabel Sales

Field Type Lenght Ket

id integer 10 PK

nama varchar 191 -

alamat text - -

email varchar 191 -

telepon varchar 191 -

created_at timestamp - -

updated_at timestamp - -

d) Tabel Kategori

Tabel 4.4 Tabel Kategori

26
 Field Type Lenght Ket

id integer 10 PK

nama varchar 191 -

created_at timestamp - -

updated_at timestamp - -

e) Tabel Products_masuk

Tabel 4.5 Tabel Product_masuk

Field Type Lenght Ket

id integer 10 PK

product_id integer 10 -

supplier_id integer 10 -

qty integer 11 -

tanggal date - -

created_at timestamp - -

updated_at timestamp - -

f) Tabel Customers

27
 Tabel 4.7 Tabel Customers

Field Type Lenght Ket

id integer 10 PK

nama integer 191 -

alamat text - -

email varchar 191 -

telepon varchar 191 -

created_at timestamp - -

updated_at timestamp - -

g) Tabel Products

Tabel 4.8 Tabel Products

Field Type Lenght Ket

id integer 10 PK

category_id integer 10 FK

nama varchar - -

harga integer 191 -

image varchar 191 -

qty integer 11 -

created_at timestamp - -

updated_at timestamp - -

h) Tabel Suppliers

Tabel 4.9 Tabel Suppliers

28
 Field Type Lenght Ket

id integer 10 PK

nama varchar 191 -

alamat text - -

email varchar 191 -

telepon varchar 191 -

created_at timestamp - -

updated_at timestamp - -

29
4.2.3 Tampilan Program

1. Tampilan Login

Gambar 4.17 Tampilan Halaman Login

2. Halaman Dashboard Admin

Gambar 4.18 Tampilan Halaman Dashboard Admin

30
3. Halaman User

Gambar 4.19 Tampilan User 4. H

alaman Kategori

Gambar 4.20 Tampilan Halaman Kategori

5. Halaman Produk

31
Gambar 4.21 Tampilan Halaman Produk

32
6. Halaman Data Customer

Gambar 4.22 Tampilan Halaman Customer

7. Halaman Penjualan

Gambar 4.23 Tampilan Halaman Penjualan

33
8. Halaman Supplier

Gambar 4.24 Tampilan Halaman Supplier

9. Halaman Produk Masuk

Gambar 4.25 Tampilan Produk Masuk

10. Halaman Produk Keluar

34
 Gambar 4.26 Tampilan Produk Keluar

11. Halaman Tambah Data

Gambar 4.27 Tampilan Tambah Data

12. Halaman Edit Data

Gambar 4.28 Tampilan Edit Data

13. Halaman Hapus Data

35
 Gambar 4.29 Tampilan Hapus Data

4.3 Sarana Pendukung Program

4.3.1 Software

Tabel 4.10 Software Pendukung Program

Nama Software Spesifikasi

Server Xampp Versi 3.3.0

Text Editor Visual Studio Code Versi 1.72.2

Browser Chrome Browser Versi

106.0.5249.119

4.3.2 Hardware

Tabel 4.11 Hardware Pendukung Program

Nama Ket

Sistem Operasi Windows 10 Profesional 64bit

Prosessor Intel(R) Core(TM) i3-3110M CPU @

2.40GHz 2.40

RAM 4.00 GB

Monitor Monitor LED/LCD aspect ratio 16:9

36
 BAB V

PENUTUP
5.1. Kesimpulan

Kesimpulan dari pembuatan aplikasi stok barang, untuk membantu admin

dalam pencatatan barang yang masuk dan keluar termasuk penjualan secara

lebih mudah di tangani dan lebih teratur, tanpa manual.

5.2. Saran-saran

Penulis berharap agar kedepannya bisa lebih baik lagi dengan

meningkatkan program yang telah penulis buat dengan menambahkan fitur

fitur baru maupun keamanan aplikasi yang tinggi dengan menggunakan

framework seperti codeigniter maupun yang lainnya. Penulis juga ingin agar

aplikasi dapat di publikasikan di web hosting agar bukan hanya kalangan

internal saja yang memakai aplikasi ini akan tetapi orang lain pun bisa

mengakses aplikasi ini.

37
 DAFTAR PUSTAKA

Lerdorf, R. (2007, 04 26). PHP: Hypertext Preprocessor. Diakses dari wikipedia:

https://id.wikipedia.org/wiki/PHP

Waryanto. (2018, 01 22). Pengertian Website Lengkap dengan Jenis dan

Manfaatnya. Diakses dari niagahoster:
https://www.niagahoster.co.id/blog/pengertian-website

Wiliard, W. (2019, 09 20). Pangkalan data atau basis data. Diakses dari
wikipedia: https://id.wikipedia.org/wiki/Pangkalan_data

Wikipedia. (2014, 04 01). MySql. Diakses dari wikipedia

https://id.wikipedia.org/wiki/MySQL

Wikipedia. (2013, 08 21). Cascading Style Sheet (CSS). Diakses dari wikipedia
https://id.wikipedia.org/wiki/Cascading_Style_Sheets

Wikipedia. (2011, 09 01). Cascading Style Sheet (CSS). Diakses dari wikipedia
https://id.wikipedia.org/wiki/Bootstrap_(framework_front-end)

Wikipedia. (20013, 06 19). CodeIgniter. Diakses dari wikipedia

https://id.wikipedia.org/wiki/CodeIgniter

Anoname. (2016, 06 07). Pengertian dan Keunggulan Framework Laravel.

Diakses dari idcloudhost
https://idcloudhost.com/pengertian-dan-keunggulan-frameworklaravel/

Informatikalogi. (2017, 07 03). Pengertian Flowchart Dan Jenis – Jenisnya.

Diakses dari informatikalogi
https://informatikalogi.com/pengertian-flowchart-dan-jenis-jenisnya

Amelia, Mitha. (2016, 12 14). Flowmap Dan Jenis – Jenisnya. Diakses dari
sisteminformasimanajemen15089
https://sisteminformasimanajemen15089.wordpress.com/2016/

38
12/14/flowmap

Puspita, Ade. (2013, 10 26). Pengertian Data Flow Diagram (DFD) dan Contoh
Gambar DFD. Diakses dari adepuspita28
https://adepuspita28.wordpress.com/2013/10/26/pengertian-data-flow-
diagram-dfd-dan-contoh-gambar-dfd

Anoname. (2014, 08 01). Pengertian ERD (Entity Relationship Diagram).

Diakses dari intanstemapal24
http://intanstemapal24.blogspot.com/2014/08/pengertian-erdentity-
relationship.html

39
 DAFTAR RIWAYAT HIDUP

A. Biodata Siswa

NIS/NISN : 16171164 / 1819100090

Nama Lengkap : Sulthan Zaki Noer Fathir

Tempat & Tanggal Lahir : Cirebon, 30 Mei 2005

Alamat Lengkap : Komplek Graha Adipati Blok D1,

Kecomberan, Talun

B. Riwayat Pendidikan Formal

1. TK RA At-Taqwa Kota Cirebon, lulus Tahun 2011

2. MI Darul Hikam Kota Cirebon, lulus Tahun 2017

3. SMP Negeri 10 Kota Cirebon, lulus Tahun 2020

C. Riwayat Pengalaman Berorganisasi / Pekerjaan

1. SMP : Futsal SMP Negeri 10

2. SMK : Pramuka SMK Al-Irsyad

Cirebon, 5 Desember 2022

Yang Bersangkutan

Sulthan Zaki N.F

40