PENCATATAN PENYIMPANAN BARANG BERBASIS WEB

LAPORAN PROJECT WORK

Laporan ini dibuat sebagai syarat untuk mengikuti
PRAKERIN dan USK(Uji Sertifikasi Kompetensi)

Oleh
REFFA KAYLA UBAEDILLAH
10212912 / 0062271209
Kelas XI RPL 2

Rekayasa Perangkat Lunak

TEKNIK KOMPUTER DAN INFORMATIKA

SMK ADI SANGGORO

Tahun Pelajaran 2022/2023
 LEMBAR PENGUJIAN PROJECT WORK
PENCATATAN PENYIMPANAN BARANG BERBASIS WEB
OLEH
REFFA KAYLA UBAEDILLAH
10212912 / 0062271209
Laporan ini telah di uji pada sidang project work,dilaksanakan pada
Hari : Rabu
Tanggal : 14 Juni 2023
Tempat : SMK Adi Sanggoro

Daftar Penguji

Nama Tanda tangan

1. Penguji 1 Suhenti Novianti, S.Kom …………………

2. Penguji 1 Afit Suprianto, S.T …………………

i
 LEMBAR PENGESAHAN PROJECT WORK
PENCATATAN PENYIMPANAN BARANG BERBASIS WEB
OLEH
REFFA KAYLA UBAEDILLAH
10212912 / 0062271209

Tanggal Pengesahan : ……………………………………

Diperiksa dan disetujui oleh :
Pembimbing

Septian Arianda, S.Kom

Disahkan oleh :
Kepala Pemograman Rekayasa Perangkat Lunak

R. Rista Wulansari, S.T

Mengetahui
Kepala SMK Adi Sanggoro

Ade Reza Haryanto, S.T

ii
 ABSTRAK
PENCATATAN PENYIMPANAN BARANG BERBASIS WEB
OLEH
REFFA KAYLA UBAEDILLAH
10212912 / 0062271209

Sekarang ini informasi berkembang sejalan dengan perkembangan komputer.

Informasi menjadi sesuatu yang sangat dibutuhkan bagi semua pihak, sebagai
contohnya bagi pihak perusahaan atau manajemen, informasi sudah menjadi
kebutuhan yang sangat pokok. Suatu perusahaan pasti memiliki sistem infor mas i
yang berfungsi sebagai penghasil informasi untuk pihak manajemen. Di dalam
perusahaan selalu membutuhkan sistem untuk mengumpulkan, menyimpa n dan
menyalurkan informasi. Sistem Pengolahan data merupakan salah satu fungsi dari
kegiatan administrasi dalam memberikan pelayanan pada pelanggan dan untuk
memenuhi setiap tuntutan informasi pihak pengelola. Sistem informasi yang baik
senantiasa dapat mengatasi masalah yang terjadi dan dapat menghasilkan infor mas i
yang cepat, tepat, dan akurat. Komputer merupakan alat penghasil informasi yang
tepat dengan akses kerja manusia. Oleh karena itu, komputer merupakan alat bantu
yang menunjang dalam memberikan pelayanan yang efektif dan efisien kepada
pihak pengelola dan pihak pelanggan. Dengan adanya media komputer maka
diharapkan dapat efektivitas kerja para karyawan, serta mempercepat dalam
pembuatan laporan yang dibutuhkan, terutama laporan mengenai data-data yang
berkaitan dengan perusahaan.

Dalam hal ini penulis membuat sebuah website pencatatan penyimpanan barang
yang digunakan untuk menghindari masalah seperti yang telah dijelesakan
sebelumnya. Website ini dibuat dengan menggunakan bahasa pemrograman PHP,
Database menggunakan MySQL, agar tampilan Website ini lebih menarik Penulis
menggunakan CSS.

Kata Kunci : Sistem Informasi, Perusahaan, dan Komputer.

iii
 ABSTRACT
STORAGE OF GOODS BASED ON WEB
BY
REFFA KAYLA UBAEDILLAH
10212912 / 0062271209

Now information develops in line with the development of computers.

Information is something that is needed by all parties, for example for companies
or management, information has become a very basic need. A company must have
an information system that functions as a producer of information for management.
Within the company always need a system to collect, store and distribute
information. Data Processing System is one of the functions of administrative
activities in providing services to customers and to fill any information demands of
the manager. A good information system can always solve problems that occur and
can produce fast, precise, and accurate information. The computer is a tool for
producing the right information with access to human work. Therefore, the
computer is a supporting tool in providing effective and efficient services to the
manager and the customer. With the existence of computer media, it is hoped that
the effectiveness of the work of employees will increase, as well as speed up the
preparation of the required reports, especially reports regarding data related to
the company.

In this case the author creates a website for recording the storage of goods
which is used to avoid problems as previously solved. This website was created
using the PHP programming language and the database uses MySQL, so that the
appearance of this website is more attractive the author uses CSS.

Key Words: Information Systems, Company, and Computer.

iv
 PEDOMAN PENGGUNAAN PROJECT WORK

Project Work ini tidak dipublikasikan, terdaftar dan tersedia di SMK Adi
Sanggoro, untuk Program Keahlian Teknik Komputer dan Informasi, Kompetensi
Keahlian Rekayasa Perangkat Lunak, terbuka untuk umum dengan ketentuan
bahwa hak cipta ada Penulis dengan mengikuti aturan yang berlaku di SMK Adi
Sanggoro, diperkenalkan dicatat, tetapi pengutipan atau peringkasan hanya dapat
dilakukan seuizin Penulis dan harus memiliki disertai dengan kebiasaan ilmia h
untuk menyebutkan sumbernya. Memperbanyak atau menerbitkan sebagian atau
seluruh Project Work haruslah seizin Kepala Program Rekayasa Perangkay Lunak
SMK Adi Sanggoro, dengan mengetahui dari Kepala SMK Adi Sanggoro.

v
 Dipersembahkan kepada :
Kedua Orangtua yang telah memberi doa dan dukungan yang begitu besar
kepada Penulis.

Kepada para Guru yang tanpa henti membantu dalam pengerjaan project ini.

Kepada para Teman yang telah mendukung dan membantu Penulis dalam
pengerjaan project ini

“Cape ? ... :)”

 PERUNTUKAN

Dipersembahkan kepada :
Kedua Orangtua yang telah memberi doa dan dukungan yang begitu besar kepada
Penulis.

Kepada para Guru yang tanpa henti membantu dalam pengerjaan project dan
laporan ini.

Kepada para Penguji yang telah menguji project dan laporan ini.

Kepada para Teman yang telah mendukung dan membantu Penulis dalam
pengerjaan project dan laporan ini.

vi
 KATA PENGANTAR

Alhamdulillah, segala puji dan syukur Penulis panjatkan kedairat Allah SWT
yang telah melimpahkan rahmat dan karunia-Nya, sehingga kegiatan pembuatan
Project Work dan Laporan Project Work ini dapat diseleasikan dengan baik. Terima
Kasih kepada :
1. Ade Reza Haryanto, S.T, selaku Kepala Sekolah SMK Adi Sanggoro.
2. R. Rista Wulansari, S.T, selaku Kepala Program Rekayasa Perangkat Lunak.
3. Septian Ariandi, S.Kom selaku Pembimbing yang telah membimb ing,
memberikan pengarahan terkait dengan Penulisan laporan dan program yang
Penulis kerjakan.
4. Penguji yang telah melakukan pengujian terhadap laporan dan project Penulis.
5. Orang tua Penulis yang tanpa henti memberikan semangat, nasihat, dan doa
yang terbaik untuk Penulis.
6. Teman-teman Penulis yang telah meminjamkan perangkat, tanpa henti saling
membantu, dan juga mengingatkan dalam pembuatan Project Work ini.
Mohon maaf jika laporan ini masih banyak kekurangan dan Penulis meminta
kritik dan saran untuk perbaikan kedepannya.

Bogor, 12 Juni 2023

Penulis

vii
 DAFTAR ISI

HALAMAN SAMPUL
PENCATATAN PENYIMPANAN BARANG BERBASIS WEB ...........................i
LEMBAR PENGUJIAN PROJECT WORK .............................................................i
LEMBAR PENGESAHAN PROJECT WORK ....................................................... ii
ABSTRAK .............................................................................................................. iii
ABSTRACT ............................................................................................................ iv
PEDOMAN PENGGUNAAN PROJECT WORK ...................................................v
PERUNTUKAN ...................................................................................................... vi
KATA PENGANTAR............................................................................................ vii
DAFTAR ISI ......................................................................................................... viii
DAFATAR LAMPIRAN .........................................................................................x
DAFTAR GAMBAR .............................................................................................. xi
DAFTAR TABLE .................................................................................................. xii
DAFTAR SINGKATAN....................................................................................... xiii
BAB I ...................................................................................................................... 1
PENDAHULUAN ................................................................................................... 1
1.1 Latar Belakang .................................................................................................. 1
1.2 Tujuan dan Manfaat Project Work .................................................................... 1
1.2.1.1 Tujuan Umum Project Work ....................................................................... 1
1.2.1.2 Tujuan Khusus Project Work ...................................................................... 2
2.2.2 Manfaat Project Work .................................................................................... 2
1.3 Metode dan Teknik Penyususan Laporan ......................................................... 2
1.3.1 Metode Penyusunan Laporan ......................................................................... 2
1.3.2 Teknik Penulisan Laporan.............................................................................. 2
BAB II ..................................................................................................................... 4
TINJAUAN PUSTAKA.......................................................................................... 4
2.1 Website .............................................................................................................. 4
2.2 Sistem Informasi ............................................................................................... 4
2.3 Sublime Text Editor........................................................................................... 4
2.4 Perusahaan......................................................................................................... 4
2.5 Hypertext Preprocessor (PHP) ......................................................................... 4
2.6 Hypertext Markup Language (HTML) .............................................................. 5
2.7 Cascading Style Sheets (CSS) ........................................................................... 5

viii
2.8 XAMPP.............................................................................................................. 5
2.9 PhpMyAdmin ..................................................................................................... 5
2.10 Database.......................................................................................................... 5
2.11 MySQL............................................................................................................. 5
2.12 UseCase........................................................................................................... 6
2.13 Flowchart ........................................................................................................ 6
2.14 Data Flow Diagram (DFD) ............................................................................ 7
2.15 Diagram Activity ............................................................................................. 8
BAB III.................................................................................................................. 16
HASIL DAN PEMBAHASAN ............................................................................. 16
3.1 Pembahasan ..................................................................................................... 17
3.1.1 Informasi Software yang Digunakan............................................................ 17
3.1.2 Informasi Hardware yang Digunakan.......................................................... 17
3.1.3 Waktu Pelaksanaan Pembuatan Project Work ............................................. 17
3.1.4 Langkah- langkah Pembuatan Project Work................................................. 18
3.1.5 Langkah- langkah Pembuatan Installer.......... Error! Bookmark not defined.
3.2 Hasil Project Work .......................................................................................... 19
BAB IV ................................................................................................................. 19
KESIMPULAN DAN SARAN ............................................................................. 24
4.1 Kesimpulan...................................................................................................... 24
4.2 Saran ................................................................................................................ 24
DAFTAR PUSTAKA ........................................................................................... 17
DAFTAR RIWAYAT HIDUP.............................................................................. 19

ix
 DAFATAR LAMPIRAN

Lampiran 1. Sitemap Fornt-end ............................................................................ 28

Lampiran 2. Sitemap Back-end ............................................................................. 29
Lampiran 3. Database ........................................................................................... 30
Lampiran 4. Flowchart .......................................................................................... 31
Lampiran 6. Data Flow Diagram .......................................................................... 32
Lampiran 7. Usecase ............................................................................................. 33
Lampiran 8. Activity Diagram ............................................................................... 34
Lampiran 9. Script ................................................................................................. 35

x
 DAFTAR GAMBAR

Gambar 1. Tampilan Database ............................................................................... 9

Gambar 2. Tampilan Awal Untuk Karyawan........................................................ 12
Gambar 3. Tampilan Catat Barang Keluar ............................................................ 12
Gambar 4. Tampilan Login ................................................................................... 13
Gambar 5. Tampilan Awal Untuk Manager .......................................................... 13
Gambar 6. Tampilan Menu Tambahkan................................................................ 14
Gambar 7. Tampilan Menu Merk .......................................................................... 14
Gambar 8. Tampilan Menu Laporan ..................................................................... 15
Gambar 9. Tampilan Profile.................................................................................. 15

xi
 DAFTAR TABLE

Tabel 1. Simbol Flowchart...................................................................................... 5

Tabel 2. Simbol Data Flow Diagram...................................................................... 6
Tabel 3. Software..................................................................................................... 8
Tabel 4. Hardware .................................................................................................. 8
Tabel 5. Jadwal Pelaksanaan Project Work ............................................................ 9
Tabel 6. Tabel Barang ........................................................................................... 10
Tabel 7. Tabel Keluar ............................................................................................ 10
Tabel 8. Tabel Merk .............................................................................................. 10
Tabel 9. Tabel User ............................................................................................... 11

xii
 DAFTAR SINGKATAN

SINGKATAN Nama Singkatan Pemakaian Pertama Kali

pada Halaman

PRAKERIN Praktek Kerja Industri Sampul

USK Uji Sertifikasi Kompetensi Sampul

RPL Rekayasa Perangkat Lunak Sampul

S.Kom Sarjana Komputer ii

S.T Sarjana Teknik ii

IT Teknologi Infromasi 9

PHP Hypertext Preprocessor 3

HTML Hypertext Markup Language 4

CSS Cascading Style Sheets 4

MySQL My Structured Query 4

Language
DFD Data Flow Diagram 6

xiii
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Dalam perkembangan komputer dan teknologi informasi, informasi menjadi
sangat penting bagi perusahaan. Sistem pengolahan data komputer digunakan untuk
mengumpulkan, menyimpan, dan menyampaikan informasi dengan cepat dan
akurat. Penggunaan komputer membantu meningkatkan efektivitas kerja karyawan
dan mempercepat pembuatan laporan yang berkaitan dengan perusahaan.
Dengan adanya sistem informasi yang baik, perusahaan dapat mengatas i
masalah dan menghasilkan informasi yang tepat waktu dan relevan.
Berdasarkan abstrak di atas, Penulis mempunyai gagasan untuk merancang
sebuah website yang bisa mengatasi masalah tersebut dan dipaparakan pada
penulisan laporan pencatatan penyimpanan barang berbasis web.

1.2 Tujuan dan Manfaat Project Work

1.2.1 Tujuan Umum Project Work
Dalam sebuah kegiatan tentulah memiliki sebuah tujuan umum, adapun kegiatan
dari pembuatan Project Work ini adalah :
1. Sebagai salah satu syarat mengikuti PRAKERIN dan USK(Uji Sertifikas i
Kompetensi) tahun ajaran 2023/2024.
2. Sebagai tolak ukur kemampuan peserta didik.
3. Melatih peserta didik untuk bertanggung jawab dalam membuat Project secara
Individu.

1
 2

1.2.2 Tujuan Khusus Project Work

Dalam sebuah kegiatan tentulah memiliki sebuah tujuan khusus, adapun
kegiatan dari pembuatan Project Work ini adalah :
1. Membuat Website untuk mempermudah pencatatan penyimpanan barang dalam
sautu perusahaan.
2. Mengetahui sejauh mana kemampuan yang dimiliki oleh peserta didik.

1.2.3 Manfaat Project Work

Manfaat yang dapat diperoleh dari hasil pembuatan Project Work adalah :
1. Peserta didik dapat lebih menguasai kemampuannya dalam pembuatan project
atau laporan.
2. Peserta didik mendapatkan pengetahuan yang lebih banyak.

1.3 Metode dan Teknik Penyususan Laporan

1.3.1 Metode Penyusunan Laporan
Dalam penulisan laporan ini Penulis menggunakan metode pengumpulan data
dan memaparkan informasi yang ada.

1.3.2 Teknik Penulisan Laporan

Teknik Penulisan Laporan yang di gunakan adalah studi litelatur yang dimana
Penulis mencari informasi yang terkait dalam penulisaan laporan.
 4

BAB II
TINJAUAN PUSTAKA

2.1 Website

Website adalah serangkaian halaman web berisi informasi yang terhubung satu
sama lain dan diakses melalui internet. Pada era digital saat ini, website telah
menjadi salah satu elemen penting di dalam kehidupan manusia.[1]

2.2 Sistem Informasi

Sistem Informasi adalah sistem yang mengkombinasikan pekerjaan manusia

dan penggunaan teknologi dalam upaya mendukung manajemen dan kegiatan
operasional. Arsip maupun data baru akan tersimpan dan terekam dengan baik,
memberi kemudahan pengguna untuk mencari data maupun informasi yang sedang
dibutuhkan.[2]

2.3 Perusahaan

Perusahaan adalah suatu badan hukum yang dibentuk oleh beberapa orang atau
kelompok yang memiliki keterlibatan dalam menjalankan badan usaha yang
bertujuan untuk komersial atau industri. [3]

2.4 Sublime Text Editor

Sublime text adalah sebuah aplikasi text editor yang sering digunakan oleh
programer khususnya web developer. Aplikasi ini menjadi senjata penting bagi web
devloper dalam mengembangakan suatu aplikasi. [4]

2.5 Hypertext Preprocessor (PHP)

PHP adalah sebuah bahasa pemrograman server side scripting yang

bersifat open source. Php merupakan bahasa pemrograman server-side, maka script
 5

dari php nantinya akan diproses di server. Jenis server yang sering digunakan
bersama dengan php antara lain apache, nginx, dan litespeed.[5]

2.6 Hypertext Markup Language (HTML)

HTML adalah bahasa markup standar yang digunakan untuk memb uat
halaman website dan aplikasi web. [6]

2.7 Cascading Style Sheets (CSS)

CSS adalah bahasa yang digunakan untuk menentukan tampilan dan format
halaman website. CSS digunakan bersama dengan bahasa markup, seperti HTML
dan XML untuk membangun sebuah website yang menarik dan memiliki fungs i
yang berjalan baik. [7]

2.8 XAMPP

XAMPP adalah software open source berbasis web server yang berisi berbagai
program. Aplikasi ini mendukung berbagai sistem operasi seperti Linux, Windows,
MacOS, dan Solaris. Fungsi XAMPP adalah sebagai server lokal/localhost, di
dalamnya sudah mencakup program Apache, MySQL dan PHP. [8]

2.9 PhpMyAdmin

PhpMyAdmin merupakan sebuah aplikasi berbasis web yang berfungsi untuk

mengelola database MySQL atau bisa disebut juga sebagai tool database. [9]

2.10 Database

Database adalah kumpulan data yang terorganisir dan saling terhubung

sehingga dapat diakses dengan mudah. Database umumnya berada pada perangkat
komputer dan dikelola secara otomatis oleh Database Management
System (DBMS). [10]
 6

2.11 MySQL

MySQL adalah sebuah database management system (manajemen basis data)

menggunakan perintah dasar SQL (Structured Query Language) yang cukup
terkenal. Database management system (DBMS) MySQL multi pengguna dan
multi alur ini sudah dipakai lebih dari 6 juta pengguna di seluruh dunia.[11]

2.12 UseCase

Use case adalah sebuah kegiatan atau interaksi yang saling berkaitan antara
aktor dan sistem. Secara umum, dapat diartikan sebagai sebuah teknik untuk yang
dimanfaatkan untuk pengembangan perangkat lunak (software), guna mengetahui
kebutuhan fungsional dari sistem tersebut. [12]

2.13 Flowchart

Flowchart atau bagan alur adalah diagram yang menampilkan langkah-

langkah dan keputusan untuk melakukan sebuah proses dari suatu program. Setiap
langkah digambarkan dalam bentuk diagram dan dihubungkan dengan garis atau
arah panah. [13]

Berikut ini adalah simbil yang terdapat dalam flowchart, seperti yang
ditunjukan pada Table 1.

Table 1. Flowchart
Simbol Nama Fungsi
Symbol Simbo l untuk keluar /ma s uk prosedure
Off -line atau proses dalam lembar /ha la ma n
Connector yang lain
Symbol Simbo l untuk keluar /ma s uk prosedure
Connector atau proses dalam lembar /ha la ma n
yang sama
 7

Simbo l Nama Fungs i

Symbol Simbo l yang menunjuk a n pengo la ha n

Process yang di lakuka n oleh kompute r

Symbol Simbo l untuk kondis i yang akan

Decision menga hs ilk a n beberapa kemungk ina n
jawaban/as k i

Symbol Simbo l untuk pemula a n atau akhir

Terminal sebuah program

Symbol Simbo l yang menunjuk a n data di

off-line dalam symbol ini akan di simpa n
Storage

Symbol Simbo l yang menya tak a n proses input

input - dan output tanpa tergantun g dengan
output jenis peralata nnya

2.14 Data Flow Diagram (DFD)

Data Flow Diagram(DFD) adalah diagram yang menggambarkan aliran data
dari sebuah proses atau sistem informasi. Pada DFD, terdapat informasi terkait
input dan output dari setiap proses tersebut. DFD juga memiliki berbagai fungs i,
seperti menyampaikan rancangan sistem, menggambarkan sistem, dan perancangan
model. [14]
 8

Berikut ini adalah simbol yang terdapat dalam Data Flow Diagram, seperti
yang ditunjukan pada Table 2.
Table 2. Data Flow Diagram
Gambar Simbo l Nama Fungs i
Entita s luar adalah entita s
yang berada diluar sis te m
Entitas
Luar Entitas Luar yang membe r ika n data
kepada siste m (source)
Alir a n Data Alir Data mengga mba r k a n

Alir Data alira n data dari sua tu

entitas ke enntita s lainnya

Peyimpa na n Data store adalah te mp a t

Data Store Data menyimpa n data ya ng
dapat menga mb il dari ata u
member ika n data ke data
Proses Proses mengga mba rk a n
apa yang dilak uka n oleh
siste m

2.15 Diagram Activity

Diagram Activity adalah diagram yang dapat memodelkan proses-proses yang
terjadi pada sebuah sistem. Runtutan proses dari suatu sistem digambarkan secara
vertikal. Activity diagram merupakan pengembangan dari Use Case yang memilik i
alur aktivitas. [15]
 BAB III
HASIL DAN PEMBAHASAN
3.1 Hasil Pembuatan Project Work
Terdapat fungsi utama di dalam website pencatatan penyimpanan barang ini
seperti fungsi login, mengelola data barang, laporan dan di website ini juga terdapat
dua level yaitu karyawan dan manager dengan fungi yang berbeda adapun hasil
Project Work yang telah di buat seperti yang ditunjukan pada gambar berikut :
1. Halaman untuk jabatan karyawan atau front-end.

Gambar 1. Halaman untuk jabatan karyawan.

2. Halaman untuk jabatan manager atau back-end.

Gambar 1. Halaman untuk jabatan manager.

16
3.2 Pembahasan
Website ini dibuat untuk mempermudah suatu perusahaan dalam penyimpa na n
barang yang bisa diakses oleh anggotanya. Pembuatan website ini menggunaka n
program Sublime Text, phpMyAdmin untuk Database-nya.

3.2.1 Informasi Software yang Digunakan

Informasi software yang digunakan untuk membuat Project Work, seperti yang
di tunjukan pada Tabel 3 :
Tabel 3. Software yang digunakan
No Software Keterangan
1 Sublime Text Text Editor
2 XAMPP Web Server
3 Google Chrome Browser
4 Microsoft Office Word Word Editor
5 yEd Graph Editor Untuk membuat
Flowchart, DFD, dan
Usecase

3.2.2 Informasi Hardware yang Digunakan

Informasi hardware yang digunakan untuk membuat Project Work seperti yang
ditunjukan pada Tabel 4 :
Tabel 4. Hardware yang digunakan
No Hardware Keterangan
1 Laptop Untuk membuat project
2 Mouse Untuk menggerakan kursor

3.2.3 Waktu Pelaksanaan Pembuatan Project Work

Waktu pelaksanaan Project Work ini yaitu selama kurang lebih 1 bulan mulai
dari Mei sampai dengan Juni 2023, pelaksanaan pengerjaan Project Work .

17
3.2.4 Langkah-langkah Pembuatan Project Work
1. Langkah pertama yaitu membuat database yang bernama “inventori” ini
berfungsi sebagai tempat untuk menaruh data-data, database tersebut
ditunjukan pada Gambar 1:

Gambar 1. Tampilan Database.

Sedangkan di dalam database “inventori” terdapat 4 tabel, antara lain :

1. Tabel barang seperti yang ditunjukan pada Tabel 6.
Tabel 6. Tabel barang
No Nama Tipe Data Ukuran
1 idBarang integer 11
2 idMerk integer 11
3 namaBarang varchar 255
4 hargaBarang integer 11
5 stokBarang integer 10

2. Tabel keluar seperti yang ditunjukan pada Tabel 7.

Tabel 7. Tabel keluar
No Nama Tipe Data Ukuran
1 idKeluar integer 11
2 idBarang integer 11
3 idMerk integer 11
4 peminta varchar 255
5 petugas varchar 255
6 stokKeluar integer 11
7 dates timestamp null
.

18
3. Tabel merk seperti yang ditunjukan pada Tabel 8.
Tabel 8. Tabel merk
No Nama Tipe Data Ukuran
1 idMerk integer 11
2 namaMerk varchar 255

4. Tabel user seperti yang ditunjukan pada Tabel 9.

Tabel 9. Tabel user
No Nama Tipe Data Ukuran
1 id integer 11
2 username varchar 255
3 password varchar 255
4 jabatan enum('MANAGER', null
'KARYAWAN')

3.2.5 Hasil Project Work

Pada Website ini terdapat 2 bagian yaitu, bagian front-end dan bagian back-end
seperti yang ditampilkan pada gambar berikut :
1. Halaman Produk pada Front-End

Halaman Produk berisi data barang yang sudah ada. Tampilan Halaman
Produk. seperti yang ditunjukan pada Gambar 4.

Gambar 4. Tampilan Halaman Produk pada Front-End

19
2. Halaman Catat
Halaman Catat berisi form untuk mengeluarkan barang yang berisi nama
barang, jumlah yang dikeluarkan, nama peminta, dan nama petugas/ pengguna.
Tampilan Halaman Catat seperti yang ditunjukan pada Gambar 6.

Gambar 5. Tampilan Halaman Catat

3. Halaman Profile pada Front-End

Halaman Profile berisi tentang nama dan jabatan pengguna. Tampila n
Halman Profile seperti yang ditunjukan pada Gambar 6.

Gambar 6. Tampilan Halman Profile

20
4. Halaman Login untuk kedua jabatan
Halaman Login berisi form untuk mengakses pengguna adalah karyawan
atau manager. Tampilan Halaman Login seperti yang ditunjukan pada Gambar
7.

Gambar 7. Tampilan Halaman Login

5. Halaman Produk pada Back-End

Halaman Produk berisi data barang yang sudah ada. Tampilan Halaman
Produk. seperti yang ditunjukan pada Gambar 8.

Gambar 8. Tampilan Halaman Produk pada Back-End

21
6. Halaman Tambahkan

Halaman Tambahkan berisi form untuk menambahkan data barang baru.

Tampilan Halaman Tambahkan seperti yang ditunjukan pada Gambar 9.

Gambar 9. Tampilan Halaman Tambahkan

7. Halaman Merk

Halaman Merk berisi form untuk menambahkan data barang baru. Tampila n
Halaman Merk seperti yang ditunjukan pada Gambar 10.

Gambar 10. Tampilan Halaman Merk

22
8. Halaman Laporan
Halaman Laporan berisi data barang yang sudah dikeluarkan oleh karyawan.
Tampilan Halaman Laporan seperti yang ditunjukan pada Gambar 11.

Gambar 11. Tampilan Halaman Laporan

9. Halaman Profile pada Back-End

Halaman Profile berisi tentang nama dan jabatan pengguna. Tampila n

Halman Profile seperti yang ditunjukan pada Gambar 6.

Gambar 12. Tampilan Halaman Profile

23
 BAB IV
KESIMPULAN DAN SARAN

4.1 Kesimpulan
Perkembangan komputer telah mengubah cara informasi dikelola dan diakses
dalam perusahaan. Sistem pengolahan data dan komputer menjadi kunci untuk
zmenghasilkan informasi yang cepat, akurat, dan relevan. Komputer membantu
meningkatkan efektivitas kerja karyawan dan mempercepat proses pembuatan
laporan. Dengan penggunaan komputer, diharapkan perusahaan dapat memberika n
pelayanan yang lebih efektif dan efisien kepada pengelola.

Dan dengan demikian pula perlu adanya penanganan yang baik dan bernar
berdasarkan prosedur yang ada sehingga barang yang disimpan tetap dalam
pengawasan.

4.2 Saran
Berdasarkan pengamatan penulis selama mengerjakan tugas Project Work,
Penulis memberikan saran untuk mengikut serta kan teman-teman dalam
penyicilan pembuatan laporan dan lebih banyak bertanya kepada teman atau guru
pembimbing.

24
 17

DAFTAR PUSTAKA
[1] Muhammad Ariffudin, 2023,
https://www.niagahoster.co.id/blog/pengertian-website/.[1] , (diakses pada
tanggal 10 Juni 2023)

[2] Muhammad Robith Adani, 2021,

https://www.sekawanmedia.co.id/blog/apa-itu-sistem- informasi/.[2] ,
(diakses pada tanggal 10 Juni 2023)

[3] Yunisda D. Saputri , 2021,

https://www.idntimes.com/business/economy/yunisda-dwi-saputri/apa- itu-
perusahaan.[3] , (diakses pada tanggal 10 Juni 2023)

[4] Fajri, 2022, https://idmetafora.com/news/read/857/Apa-Itu-Sublime-Text-

Kenali-Fitur-Fitur-di-Dalamnya.html.[4] , (diakses pada tanggal 10 Juni)

[5] Salmaa Awwaabiin, 2022, https://www.niagahoster.co.id/blog/pengertian-

php/.[5] , (diakses pada tanggal 10 Juni 2023)

[6] Faradilla A, 2023, https://www.hostinger.co.id/tutorial/apa- itu- html.[6] ,

(diakses pada tanggal 10 Juni 2023)

[7] Aldwin Nayoan, 2022, https://www.niagahoster.co.id/blog/pengertian-

css/,[7] , (diakses pada tanggal 10 Juni 2023)

[8] M Ali Maksum, 2022, https://www.dewaweb.com/blog/apa- itu-xampp/,

diakses pada tanggal 10 Juni 2023.[8] , (diakses pada tanggal 10 Juni 2023)

[9] Alexandromeo, 2022, https://makinrajin.com/blog/phpmyadmin-adalah/.[9]

, (diakses pada tanggal 10 Juni 2023) , (diakses pada tanggal 10 Juni 2023)

[10] Mike Napizahni, 2023, https://www.dewaweb.com/blog/apa- itu-

database/.[10] , (diakses pada tanggal 10 Juni 2023)

[11] Yasin K, 2022, https://www.niagahoster.co.id/blog/mysql-adalah/.[11] ,

(diakses pada tanggal 10 Juni 2023)
 18

[12] Muhammad Robith Adani, 2021,

https://www.sekawanmedia.co.id/blog/use-case-diagram/.[12] , (diakses
pada tanggal 10 Juni 2023)

[13] Rony Setiawan, https://www.dicoding.com/blog/flowchart-adalah/. [13] ,

(diakses pada tanggal 10 Juni 2023)

[14] Muhammad Robith Adani, 2021,

https://www.sekawanmedia.co.id/blog/dfd-adalah/.[14] , (diakses pada
tanggal 10 Juni 2023)

[15] ______ , 2021, https://www.dicoding.com/blog/apa- itu-activity-

diagram/.[14] , (diakses pada tanggal 10 Juni 2023)
 19

DAFTAR RIWAYAT HIDUP

A. Biodata Siswa

Nama Lengkap : Reffa Kayla Ubaedillah

NIS/NISN : 10212912 / 0062271209
Tempat & Tanggal Lahir : Bogor, 21 Mei 2006
Alamat Lengkap : Bojongrangkas rt 05/06 Desa Cikampak,
Kec. Ciampea, Bogor
Agama : Islam
Jenis Kelamin : Laki-laki
No.Telephone/HP : 085162748527
Email : reffa.kaila@gmail.com

B. Riwayat Pendidikan Formal & No-Formal

1. SDN Bojongrangkas 01
2. SMPN Cibungbulang 2
3. Sedang Menempuh Pendidikan di SMK Adi Sanggoro, Tahun 2023

BOGOR, 12 Juni 2023

Foto
3x4

Reffa Kayla Ubaedillah

LAMPIRAN - LAMPIRAN

19
 20

Lampiran 1. Sitemap Front-end

Lampiran 2. Sitemap Back-end

 21

Lampiran 3. Database/Table Relasi

 22

Lampiran 4. Flowchart
 23

Lampiran 5. Data Flow Diagram

 24

Lampiran 6. Usecase Diagram

 25

Lampiran 7. Activity Diagram

 26

Lampiran 8. Script

a. conn <html lang="en">

<?php <head>

<meta charset="UTF-8">

$conn = new mysqli("localhost", "root", <meta http-equiv="X-UA-

"", "inventori"); Compatible" content="IE=edge">

<meta name="viewport"
content="width=device-width, initial-
?>
scale=1.0">

b. index

<?php <link rel="preconnect"

href="https://fonts.googleapis.com">

include "controller/conn.php"; <link rel="preconnect"

href="https://fonts.gstatic.com"
session_start();
crossorigin>

$jabatan = $_SESSION['jabatan'];
if ($jabatan=='KARYAWAN') {
header("location: index-
karyawan.php");
}
if (!isset($jabatan)) {
header('location:login.php');
}
<link
href="https://fonts.googleapis.com/css2
?family=Ubuntu+Mono&display=swap
" rel="stylesheet">
<link rel="stylesheet"
type="text/css" href="style1.css">
<title>Gudang</title>
</head>
<body>
<!-- /. NAV TOP -->
<div class="container-index">

<div class="container-nav">
?>
<ul class="nav">

<li>
<!DOCTYPE html>
 27

<a <!-- /. NAV SIDE -->

href="index.php">Produk</a>

</li>
<!-- konten -->
<li>
<div class="container-isi">
<a
<div id="page-
href="index.php?halaman=tambah">T
inner">
ambahkan</a>
<?php
</li>

<li>
if(isset($_GET["halaman"])){
<a
href="index.php?halaman=merk">Mer
if($_GET["halaman"] == "edit"){
k</a>

</li>
include 'edit.php';
<li>

<a }
href="index.php?halaman=laporan">L
aporan</a>
elseif($_GET["halaman"] ==
</li> "tambah"){

<li>
include 'tambah.php';
<a
href="index.php?halaman=profile">Pr
ofile</a> }

</li>
elseif($_GET["halaman"] ==
<li>
"merk"){
<a
href="index.php?halaman=logout">Lo
include 'merk.php';
gout</a>

</li>
}
</ul>

</div>
 28

elseif($_GET["halaman"] == include 'controller/hapus-

"laporan"){ l.php';

include 'laporan.php'; }

} }

elseif($_GET["halaman"] == else{
"profile"){

include 'produk.php';
include 'profile.php';

}
}
?>

</div>
elseif($_GET["halaman"] ==
"logout"){ </div>

</div>
include
<!-- akhir konten -->
'controller/logout.php';
</body>

} </html>

elseif($_GET["halaman"] ==
"hapus"){

include 'controller/hapus- c. index-karyawan

proc.php';
<?php

}
include "controller/conn.php";

elseif($_GET["halaman"] == session_start();

"hapus-l"){
 29

$jabatan = $_SESSION['jabatan']; <!-- /. NAV TOP -->

<div class="container-nav">

if ($jabatan=='MANAGER') { <ul class="nav">

header("location: index.php"); <li>

} <a
href="index-
if (!isset($jabatan)) {
karyawan.php">Keluar</a>
header('location:login.php');
</li>
}
<li>

<a
?> href="index-
karyawan.php?halaman=profile">Profi
le</a>
<!DOCTYPE html>
</li>
<html lang="en">
<li>
<head>
<a
<link rel="preconnect" href="index-
href="https://fonts.googleapis.com"> karyawan.php?halaman=logout">Logo

<link rel="preconnect" ut</a>

href="https://fonts.gstatic.com" </li>
crossorigin>
</ul>
<link
</div>
href="https://fonts.googleapis.com/css2
?family=Ubuntu+Mono&display=swap <!-- /. NAV SIDE -->
" rel="stylesheet">

<link rel="stylesheet"
<!-- konten -->
type="text/css" href="style1.css">
<div class="container-isi">
<title>Gudang</title>
<div id="page-
</head>
inner">
<body>
<?php
<div class="container-index">
 30

</div>
if(isset($_GET["halaman"])){
<!-- akhir konten -->

</div>
if($_GET["halaman"] ==
"profile"){ </body>

</html>
include 'profile.php';

elseif($_GET["halaman"] ==
"logout"){

include
'controller/logout.php';

elseif($_GET["halaman"] ==
"keluar"){

include 'keluar.php';}

else{

include 'produk -k.php';

?>

</div>
1. Tampilan Awal untuk jabatan karyawan.

Gambar 2. Tampilan Awal jabatan karyawan

8
 9

2. Tampilan Catat untuk mencatat data barang keluar dengan nama peminta dan
nama petugas.

Gambar 3. Tampilan Catat jabatan karyawan

3. Tampilan Profile untuk jabatan karyawan.

Gambar 4. Tampilan Profile jabatan karyawan

 10

4. Tampilan Awal untuk jabatan manager.

Gambar 5. Tampilan Awal jabatan manager

5. Tampilan Ubah untuk jabatan manager berfungsi untuk merubah data barang
yang sudah ada.

Gambar 6. Tampilan Ubah jabatan manager

 11

6. Tampilan Tambahkan untuk jabatan manager berfungsi untuk menambah data

barang.

Gambar 7. Tampilan Tambahkan jabatan manager

7. Tampilan Merk untuk jabatan manager berfungsi untuk menambah data merk.

Gambar 8. Tampilan Merk jabatan manager

 17

8. Tampilan Laporan untuk jabatan manager berfungsi untuk melihat data

barang yang sudah dikeluarkan oleh karyawan.

Gambar 9. Tampilan Laporan jabatan manager

9. Tampilan Ubah pada Laporan untuk jabatan manager berfungsi untuk

merubah data laporan yang sudah ada.

Gambar 10. Tampilan Ubah Laporan jabatan manager

18