Rancang Bangun Sistem Inventaris Fungsional Role Admin dan Fitur Cetak Laporan di PT. Nakula Sadewa Berbasis Web

(1)

**RANCANG BANGUN SISTEM INVENTORY FUNGSIONAL ROLE ADMIN DAN FITUR CETAK LAPORAN**

DI PT. NAKULA SADEWA BERBASIS WEB

LAPORAN AKHIR MAGANG KERJA INDUSTRI

Oleh:

FITRI WIDYA HANDAYANI NIM. 362155401021

PROGRAM STUDI SARJANA TERAPAN TEKNOLOGI REKAYASA PERANGKAT LUNAK

POLITEKNIK NEGERI BANYUWANGI

2024

(2)

“Halaman ini sengaja dikosongkan”

(3)

**RANCANG BANGUN SISTEM INVENTORY FUNGSIONAL ROLE ADMIN DAN FITUR CETAK LAPORAN**

DI PT. NAKULA SADEWA BERBASIS WEB

LAPORAN AKHIR

MAGANG KERJA INDUSTRI

Oleh:

FITRI WIDYA HANDAYANI NIM. 362155401021

Magang Kerja Industri Dibuat dan Diajukan untuk Memenuhi Salah Satu Syarat Kelulusan Mata Kuliah Magang Kerja Industri Program Studi Teknologi

Rekayasa Perangkat Lunak Politeknik Negeri Banyuwangi

PROGRAM STUDI SARJANA TERAPAN TEKNOLOGI REKAYASA PERANGKAT LUNAK

POLITEKNIK NEGERI BANYUWANGI

2024

(4)

(5)

HALAMAN PENGESAHAN LAPORAN MAGANG KERJA INDUSTRI

**RANCANG BANGUN SISTEM INVENTORY FUNGSIONAL ROLE ADMIN DAN FITUR CETAK LAPORAN**

DI PT. NAKULA SADEWA BERBASIS WEB

Oleh:

FITRI WIDYA HANDAYANI NIM.362155401021

Telah diperiksa dan disetujui oleh pembimbing Pada Tanggal:

Pembimbing Lapangan,

(Yoga Prasetio)

Dosen Pembimbing MKI,

Lukman Hakim S.Kom.,M.T NIP.198903232022031007 Mengetahui,

Ketua Jurusan

Bisnin dan Informatika,

(Mohamad Dimyati Ayatullah, S.T.,M.Kom) NIPPPK. 197601222021211001

Ketua Program Studi

Teknologi Rekayasa Perangkat Lunak,

(Dianni Yusuf, S.Kom.,M.Kom) NIPPP. 198403052021212004

(6)

(7)

KATA PENGANTAR

Alhamdulillah, puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya, Shalawat serta salam senantiasa tercurahkan kepada Nabi Muhammad SAW, yang merupakan suri tauladan bagi seluruh umat manusia.

Dalam kesempatan kali ini penulis ingin mengucapkan terimakasih kepada bapak Yoga Prasetio selaku pembimbing magang kerja industri yang telah membantu dan memberikan ilmu yang bermanfaat pada penulis didalam magang kerja induatri, terimakasih juga penulis ucapkan kepada Dosen Pembimbing magang kerja industri yang telah membimbing, mengarahkan selama proses magang dilakukan.

Pada kesempatan kali ini, penulis mengucapkan terima kasih yang sebesar- besarnya kepada pihak-pihak yang telah memberikan dukungan dan bimbingan selama penulis menjalani magang di PT. Trion Global Indonesia. Ucapan terimakasih penulis disampaikan kepada :

1. Bapak M. Shofi'ul Amin, S.T., M.T.

selaku

Direktur Politeknik Negeri Banyuwangi.

2. Bapak Mohamad Dimyati Ayatullah, S.T., M.Kom. selaku Ketua Jurusan Bisnis dan Informatika.

3. Bapak Lukman Hakim, S. Kom., M.T. selaku Koordinator Magang Kerja Industri.

4. Ibu Dianni Yusuf, S.Kom., M.Kom.

selaku

Ketua Program Studi Diploma IV Teknologi Rekayasa Perangkat Lunak.

5. Bapak Lukman Hakim, S. Kom., M.T. selaku Pembimbing Magang Kerja Industri atas kesabaran, bimbingan, dan ilmu yang telah diberikan selama penulis menjalani magang. Pembimbing telah memberikan pandangan yang berharga dan membantu penulis dalam menghadapi berbagai tantangan di lapangan.

(8)

6. Bapak Yoga Prasetio selaku Pembimbing Lapangana MKI atas bimbingan, kerjasama, kesempatan belajar, dan pengalaman berharga yang diberikan 7. Bapak dan Ibu Dosen Program Studi Diploma IV Teknologi Rekayasa

Perangkat Lunak Politeknik Negeri Banyuwangi yang selama ini telah memberikan bimbingan dan ilmu yang bermanfaat serta segala dukungan serta motivasi untuk kesuksesan dan kelancaran Magang Kerja Industri.

8. Kedua orang tua dan keluarga tercinta yang telah memberikan doa, semangat, motivasi dan cinta serta dukungan penuh kepada penulis.

9. Rekan Kelompok Magang Kerja Industri yang telah menjalin kerjasama dengan sangat baik. Keberhasilan kolaborasi ini tidak hanya menciptakan lingkungan kerja yang harmonis, tetapi juga meningkatkan produktivitas dan efisiensi sebagai tim.

10. Rekan-rekan Program Studi Diploma IV Teknologi Rekayasa Perangkat Lunak angkatan 2021 yang selalu memotivasi penulis agar segera menyelesaikan laporan Magang kerja Industri.

11. Seluruh pihak yang telah berkontribusi dalam menyelesaikan laporan Magang Kerja Industri yang tidak bisa Penulis sebutkan satu persatu.

Penulis menyadari bahwa laporan Magang Kerja Industri (MKI) ini tidak terlepas dari keterbatasan penulis, dan penulis terbuka untuk menerima saran dan kritik yang membangun. Semoga laporan ini dapat memberikan kontribusi positif dan menjadi bahan evaluasi yang berguna.

Terima kasih.

Banyuwangi, 9 Desember 2024

Fitri Widya Handayani

(9)

Halaman ini sengaja dikosongkan

(10)

DAFTAR ISI

HALAMAN PENGESAHAN ... iii

KATA PENGANTAR... v

DAFTAR ISI ... viii

DAFTAR GAMBAR ... x

DAFTAR TABEL ... xii

BAB 1. PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Perumusan Masalah ... 2

1.3 Tujuan ... 2

1.4 Manfaat ... 2

1.5 Batasan Masalah ... 2

BAB 2. GAMBARAN UMUM PERUSAHAAN ... 4

2.1 Sejarah Perusahaan ... 4

2.2 Visi dan Misi Perusahaan ... 4

2.3 Struktur Organisasi ... 5

2.4 Sumber Daya Manusia ... 6

2.5 Data Pembimbing Lapang ... 7

BAB 3. PELAKSANAAN... 9

3.1 Waktu dan Tempat Pelaksanaan ... 9

3.2 Jadwal Kegiatan ... 10

BAB 4. HASIL DAN PEMBAHASAN ... 12

4.1 Hasil Kegiatan ... 12

4.2 Pembahasan ... 30

BAB 5. PENUTUP ... 33

5.1 Kesimpulan ... 33

5.2 Saran ... 32

DAFTAR PUSTAKA ... 34

LAMPIRAN ... 36

(11)

Lampiran 2. Lembar Nilai Pembimbing Lapang, Dosen Pembimbing,

Dosen Penguji, dan Rekap Nilai MKI ... 38

Lampiran 3. Berita Acara Ujian MKI ... 41

Lampiran 4. Kartu Kendali Bimbingan MKI... 42

Lampiran 5. Lembar Kerja Harian MKI ... 43

Lampiran 6. Surat Keterangan Telah Menyelesaikan MKI dari Instansi ... 65

Lampiran 7. Biodata Penulis ... 66

(12)

(13)

DAFTAR GAMBAR

Gambar 2.1 Struktur Organisasi ... 5

Gambar 3.1 Kantor PT. Nakula Sadewa ... 9

Gambar 3.2 Lokasi PT. Nakula Sadewa... 9

Gambar 4.1 Halaman Login Admin ... 12

Gambar 4.2 Halaman Admin Data User ... 13

Gambar 4.3 Form Tambah Data User ... 14

Gambar 4.4 Userseeder Role Admin ... 14

Gambar 4.5 Pengaturan Hak Akses ... 15

Gambar 4.6 Halaman Admin Data Role ... 15

Gambar 4.7 Tampilan Fitur Laporan ...16

Gambar 4.8 Tambah Stok Rusak ... 16

Gambar 4.9 Laporan Stok Barang Rusak ...17

Gambar 4.10 Hasil Export Laporan Stok Rusak ...17

Gambar 4.11 Source Code Frontend Pengambilan Data Stok Rusak ... 17

Gambar 4.12 Source Code Backend Pengambilan Data Stok Rusak ... 18

Gambar 4.13 Tampilan Laporan Barang Masuk ... 18

Gambar 4.14 Hasil Laporan Stok Barang Masuk ... 19

Gambar 4.15 Source Code Frontend Pengambilan Data Stok Masuk ... 19

Gambar 4.16 Source Code Backend Pengambilan Data Stok Masuk ... 19

Gambar 4.17 Data Transaksi Keluar ... 20

Gambar 4.18 Laporan Pengembalian Barang ... 20

Gambar 4.19 Hasil Laporan Pengembalian Barang ... 21

Gambar 4.20 Hasil Cetak Laporan Pengembalian Barang ... 21

Gambar 4.21 Source Code Frontend Pengembalian Barang ... 22

Gambar 4.22 Source Code Backend Pengembalian Barang ... 23

Gambar 4.23 Laporan Transaksi Peminjaman ... 23

Gambar 4.24 Source Code Transaksi Peminjaman ... 23

Gambar 4.25 Laporan Transaksi Instalasi ... 24

Gambar 4.26 Hasil Laporan Transaksi Instalasi ... 24

Gambar 4.27 Source Code Transaksi Instalansi ... 25

(14)

Gambar 4.28 Koreksi Stok Masuk Baru ... 25

Gambar 4.29 Laporan Koreksi Stok Masuk Baru ... 26

Gambar 4.30 Hasil Laporan Koreksi Stok Masuk Baru ... 26

Gambar 4.31 Source Code Koreksi Stok Masuk Baru ... 26

Gambar 4.32 Laporan Transaksi peminjaman ... 27

Gambar 4.33 Hasil Laporan Transaksi peminjaman ... 27

Gambar 4.34 Source Code Transaksi Peminjaman ... 28

Gambar 4.35 Laporan Koreksi Transaksi Instalasi ... 28

Gambar 4.36 Hasil Laporan Koreksi Transaksi Instalasi ... 28

Gambar 4.37 Hasil Testing Login Admin ... 30 Gambar 4.37 Hasil Testing Role Admin ...

(15)

DAFTAR TABEL

Tabel 3. 1 Jadwal Kegiatan Magang Kerja Industri ... 10

(16)

(17)

BAB 1 PENDAHULUAN 1.1. Latar Belakang Masalah

Saat ini perkembangan teknologi informasi yang semakin meningkat, menyebabkan banyak perusahaan yang ingin atau yang telah mengubah seluruh kegiatan pencatatan manual ataupun aktivitas lainnya dialihkan menjadi terkomputerisasi untuk membantu dalam setiap pekerjaan. Teknologi tidak lagi dijadikan sebagai pelengkap saja, namun sudah menjadi salah satu alat penentu tercapainya sasaran dan strategi dari perusahaan itu sendiri.

Persediaan(inventory) merupakan stok barang yang disimpan oleh suatu perusahaan untuk memenuhi permintaan pelanggan. Umumnya setiap jenis perusahaan memiliki berbagai bentuk persediaan. Setiap perusahaan, apakah perusahaan itu perusahaan perdagangan atau perusahaan manufaktur serta perusahaan jasa selalu mengadakan persediaan. Tanpa adanya persediaan, para pengusaha akan dihadapkan pada resiko bahwa perusahaan pada suatu waktu tidak dapat memenuhi keinginan pelanggan yang memerlukan atau meminta barang atau jasa yang dihasilkan, Hal ini mungkin terjadi, karena tidak selamanya barang atau jasa tersedia setiap saat, yang berarti pula pengusaha akan kehilangan kesempatan memperoleh keuntungan yang seharusnya ia dapatkan. Jadi persediaan sangat penting untuk setiap perusahaan baik perusahaan yang menghasilkan suatu barang atau jasa.

Dengan melibatkan teknologi terkini, proyek sistem inventory ini diarahkan untuk memberikan solusi terbaik dalam menanggapi kebutuhan organisasi yang terus berkembang. Peningkatan efisiensi operasional, keamanan data, dan kemudahan akses menjadi fokus utama dalam perancangan proyek ini. Dengan demikian proyek sistem inventory ini bukan hanya merupakan langkah strategis, tetapi juga jawaban konkret atas tantangan yang dihadapi oleh organisasi dalam mengelola stok dan data barang di era digital ini.

Oleh karena itu, latar belakang proyek tidak hanya berfokus pada pengelolaan sistem inventory, tetapi juga mengeksplorasi alur backend untuk pembuatan peran admin.

(18)

Tujuannya adalah untuk menciptakan peran tambahan yang membantu pengelolaan sistem inventory secara efisien dan terstruktur. Selain itu, teknologi yang digunakan, React.js dan Laravel, dipilih karena keunggulan masing-masing. Sementara React.js memungkinkan pengembangan antarmuka pengguna (UI) yang interaktif, cepat, dan dinamis melalui pendekatan berbasis komponen yang modular, Laravel mendukung pengembangan backend dengan fitur lengkap seperti sistem autentikasi yang aman, dukungan database yang fleksibel, dan struktur MVC yang terorganisir. Kombinasi kedua teknologi ini membuat aplikasi web kontemporer yang responsif, skalabel, dan mudah dikembangkan.

Aspek backend yang diterapkan mencakup berbagai macam alur untuk pembuatan role yang lainnya di,di role admin tujuannya untuk bisa menambah menghapus, dan mengedit role yang lain lagi, di dalam sistem inventoey ini terdapat 4 role, yaitu roleadmin, role sstaff stok yang terbagi menjadi 3 role yaitu management dan marketing yang mana role staff stok berfungsi untuk mengelola semua stok, management dan marketing untuk mengelolal hasil laporan semua stok nya.

1.2. Perumusan Masalah

1. Bagaimana sistem dapat menjamin keamanan data bagi pengguna dengan peran atau role yang berbeda?

2. Bagaimana memastikan ketersediaan stok yang optimal untuk memenuhi permintaan pelanggan?

3. Apa langkah yang diperlukan untuk mengalihkan pencatatan stok manual menjadi sistem inventory?

1. Mengimplementasikan fitur keamanan data dan pengaturan akses berbasis role untuk setiap peran role.

2. Untuk memastikan pengelolaan stok yang aman dan sesuai denhan taggung jawab masing-masing pengguna

3. Mempermudah untuk menyimpan dan mengelola barang denganmenggunakan sisteminventori berbasis web.

(19)

Berdasarkan perumusan masalah yang telah disampaikan, sistem ini dirancang untuk mengelola komunikasi antara React.js sebagai frontend dan Laravel sebagai backend menggunakan URL API. React.js bertugas mengirimkan permintaan (request), sementara Laravel memproses permintaan tersebut dan memberikan tanggapan (response) yang sesuai. Fokus utama pengembangan ini adalah mendukung peran

"Staff Stok" dalam pengelolaan data stok, termasuk mencakup laporan stok barang masuk, keluar, dan rusak, sehingga mempermudah monitoring dan pengambilan keputusan terkait inventori secara efisien dan akurat.

1.5. Batasan Masalah

Laporan Magang Kerja Industri ini dibatasi dan hanya berfokus padabeberapa hal berikut :

1. Fokus pada pengembangan sistem inventory yang mencakup manajemen data barang, kategori, stok, dan transaksi, tanpa mencakup aspek strategi bisnis atau pengelolaan keuangan.

2. Pembahasan terkait role Admin akan fokus pada pengelolaan pengguna, pengaturan hak akses, serta kontrol terhadap data inventory, tanpa mencakup pengelolaan untuk role lainnya secara detail.

3. Pengembangan fitur cetak laporan akan difokuskan pada laporan yang umum digunakan dalam sistem inventory, seperti laporan stok barang, transaksi barang masuk, dan barang keluar, tanpa mencakup laporan khusus atau kustomisasi yang kompleks.

4. Penulis tidak akan membahas elemen implementasi perangkat keras atau pengintegrasian dengan sistem eksternal lainnya, melainkan hanya fokus pada pengembangan perangkat lunak berbasis web.

(20)

(21)

BAB 2

GAMBARAN UMUM PERUSAHAAN

2.1. Sejarah Perusahaan

Nakula Sadewa, CV. merupakan perusahaan yang bergerak di bidang TeknologiInformasi selama 5 tahun, dan disahkan sebagai badan usaha pada 19 Januari tahun 2015 di Malang, Jawa Timur. Dikukuhkan dihadapan Notaris Benediktus Bosu, SH (CV Nakula Sadewa, 2019).

Pengalaman yang didukung oleh tenaga muda profesional dari latar belakang, profesi dan disiplin ilmu yang bervariasi ikut serta berpartisipasi secara elegan dan profesional dalam pelaksanaan pembangunan nasional khususnya di bidang TeknologiInformasi (CV Nakula Sadewa, 2019

2.2. Visi Misi Perusahaan 2.2.1. Visi Perusahaan

1. Menjadi perusahaan yang bonafit dan dapat dipertanggungjawabkan untuksetiap produk yang dihasilkan.

2. Perusahaan mampu memberikan pelayanan dalam taraf nasional maupun multinasional.

3. Menjadi perusahaan teknologi yang membawa nama Indonesia.

2.2.2. Misi Perusahaan

1. Menarik Sumber Daya Manusia berkualitas serta membuka lapanganpekerjaan para praktisi teknologi.

2. Memberikan pelayanan secara maksimal guna mendukung kebutuhankonsumen.

3. Memberikan support secara maksimal setelah pembelian.

4. Selalu mengikuti perkembangan teknologi dan melakukan inovasi-inovasiterbaru untuk memberikan produk yang berkualitas.

5. Mengikuti persaingan perusahaan teknologi untuk mendukung perkembangan teknologi nasional.

(22)

2.3. Struktur Organisasi

Gambar 2.1 Struktur Organisasi

(23)

2.4. Sumber Daya Manusia

Di CV. Nakula Sadewa sendiri sumber daya yang ada diperushaan antara lain:

• CEO bertugas untuk menetapkapn visi dan misi dari perusahaan, mengambil keputusan yang tepat guna terwujudnya tujuan perusahaan.

• Co-CEO tugas dari Co-CEO tugasnya sama dengan CEO yang

membedakannya dalam segi tanggung jawab mungkin terbatas pada area bisnis tertentu

• HR (Human Resource) bertugas untuk merekrut karyawan baru,

manajemen kinerja dan pengembangan pegawai, serta bertanggung jawab akan gaji dan juga masalah hubungan pekerja.

• Project Manager bertugas untuk merencanakan sebuah pelaksanaan dan juga memantau projek yang berjalan.

• Marketing melakukan sebuah pengembangan dalam halnya mengenalkan sebuah produk yang ada di perusahaan.

• Digital Marketing, sama halnya dengan marketing perbedaannya berada pada bagaimana cara memasarkan saja, untuk digital marketing berfokus pada pemasaran online melalui berbagai saluran digital

• Teknisi berfokus pada pemeliharaan dan perbaikan perangkat keras atau perangkat lunak yang ada di perusahaan

• Web Developer mengemban sebuah tugas untuk membuat suatu aplikasi yang berbasi pada Website.

• Dekstop Developer sama halnya dengan tugas Web Developer, cuman fokusnya yang berbeda dimana Dekstop Developer berfokus pada pengembangan aplikasi Dekstop.

• Admin berfokus pada manajemen administrasi dan operasional, serta pengelolaan dokumen data perusahaan.

• Warehouse menyediakan segala kebutuhan gudang yang ada di perusahaan.

(24)

• General Affairs bertugas untuk pengelolaan fasilitas dan layanan umum pada perusahaan dan Production bertugas untuk melakukan perencanaan atau pengelolaan produk.

2.5. Data Pembimbing Lapang

Selama proses magang di CV. Nakula Sadewa , penulis dibimbing oleh Bpk.

Yoga Prasetio. Berikut adalah informasi singkat tentang pembimbing lapangan:

1. Nama: Yoga Prasetio 2. Jabatan: Project Manager

3. Peran dalam Proyek: Memberikan arahan, melakukan monitoring , dan evaluasi kerja.

Pembimbing lapangan ini memiliki pengalaman yang luas dalam industri dan memiliki pemahaman mendalam tentang tantangan dan peluang yang dihadapi oleh PT. Nakula Sadewa, diharapkan penulis dapat menggali potensi maksimal dalam mengembangkan proyek sistem inventory yang menjadi fokus magang ini.

(25)

(26)

BAB 3 PELAKSANAAN 3.1. Tempat dan Waktu Pelaksanaan

Waktu dan pelaksanaan Magang Kerja Industri(MKI) berpacu pada ketentuan akademik Politeknik Negeri Banyuwangi tepatnya dilaksanakan mulai tanggal 9 Juli 2024 s/d 9 Desember 2024. Lokasi Magang Kerja Industri(MKI) tepatnya berada dimalang dengan nama perusahaannya yaitu PT. Nakula Sadewa beralamatkan di Jl.Candi Mendut Utara I No.11,Mojolangu, Kecamatan Lowokwaru,Kota Malang,Jawa Timur.

Gambar 3.1 Kantor PT. Nakula Sadewa

Magang ini dilaksanakan selama periode 25 Juli 2023 hingga 05 Januari2024 Kegiatan magang berlangsung di kantor pusat CV. Nakula Sadewa yangberlokasi di Jl. Candi Mendut Utara I no 11 Kel. Mojolangu Kec. Lowokwaru Malang – 65142 untuk lebih jelasnya dapat dilihat pada gambar 3.2. Pemilihanlokasi ini dilakukan untuk memastikan penulis dapat secara langsung terlibat dalam suasana kerja sehari-hari dan mendapatkan pengalaman praktis yang maksimal.

(27)

3.2. Jadwal Kegiatan

No Kegiatan Juli Agustus September Oktober November Desember

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. Pengenalan perusahaan 2. Belajar react

js with laravel 3. Koordinasi

dengan pembimbing

lapangan 4. Mendapat project baru 5. Analisis

kebutuhan pengguna 6. Desain ui ux

aplikasi

7. Peracangan Sistem

8. Implementa si project

9. Pengujian Aplikasi

10. Penyusunan Laporan

Tabel 3. 1 Jadwal Kegiatan Magang Kerja Industri

(28)

(29)

BAB 4

HASIL DAN PEMBAHASAN 4.1. Hasil Kegiatan

Hasil kegiatan selama magang di PT. Nakula Sadewa yaitu tentang pembangunan dan

penerapan frontend dan backend pada aplikasi inventory. Penulis website fullstack bagian role admin dan merancang fitur cetak laporan pada sistem inventory. Saat melakukan Magang Kerja Industri(MKI) penulis mendapat banyak pengalaman yang dapat diserap menjadi pengalaman yang bermanfaat untuk bekal masa depan, di PT. Nakula Sadewa penulis juga mendapat pembelajaran dari mentor lapang dari perusahaan,mulai dari bagaimana cara bekerjasama dengan tim yang baik,problem solving dan masih banyak lagi yang bisa penulis ambil ilmunya dari mentor lapang. Berikut adalah hasil kegiatan dari penulis beserta

penjelasan dari hasil kegiatan.

1. Login Role Admin

Pada perancangan role admin pengguna diminta untuk login terlebih dahulu, Halaman Login merupakan halaman yang digunakan untuk masuk kedalam suatu sistem sesuai kebutuhan role, halaman admin memiliki 2 fitur yaitu data user, dan data role. Halaman admin mengatur dan meneglola data user serta data role, admin dapat menambah, mengedit, serta menghapus data user dan data role. Dihalaman login admin hanya memsaukkan username serta password untuk melakukan login ke halaman admin.

(30)

2. Fitur Data User

Setelah berhasil login ke halaman admin tampilan selanjutnya adalah seperti pada gambar 4.2 merupakan gambar halaman admin setelah login. Gambar diatas adalah gambar halaman pada role admin dengan 2 fitur yaitu data user, dan data role di data user berisi tentang data nama-nama user yang telah login di sistem serta di data role terdapat informasi mengenai berapa jumlah role yang ada di sistem, pada tampilan role admin diatas adapun code pembuatan role admin, yang berisi tentang pembuatan tabel admin, serta perannya yng bertujuan untuk mengelola pengguna sistem dan hak akses mereka. Langkah pertama adalah membuat tabel role yang berisi informasi tentang peran (seperti admin, staff, user) dan tabel users yang memiliki kolom role_id sebagai relasi ke tabel role, Relasi ini biasanya berbentuk One-to-Many, di mana satu role bisa dimiliki oleh banyak pengguna. Selanjutnya, middleware diterapkan untuk memastikan akses berbasis role, misalnya hanya pengguna dengan role "admin" yang dapat mengakses halaman tertentu. Di halaman ini admin dapat melakukan update password dan update role melalui tabel data user.

Gambar 4.2 Halaman Admin Data User

Gambar dibawah ini adalah gambar form ketika ingin menambah data user, ketika ingin melakukan edit data user maupun edit data role alur formya hampir sama, setelah ditambah dan edit role atau edit user maka nanti role dan user akan muncul ditabel masing – masing sesuai apa yang diubah.

(31)

Gambar 4.3 Form Tambah Data User

3. UserSeeder Role Admin

Gambar 4.4 merupakan gambar code pembuatan role admin di userseeder menggunakan backend laravel, Pengguna peran role admin memiliki akses terbatas sesuai dengan peran dan izin yang ditetapkan. Dari gambar tersebut dapat disimpulkan bahwa terdapat implementasi UserSeeder class yang memiliki tujuan untuk menyiapkan data user dan peran (role) yang akan diiikan kedalam database,

$adminRole = DB::table(‘roles’)->inserGetId(values: [‘name’ => ‘admin’]);

kode ini menyisipkan baris baru kedalam tabel roles dengan nama admin dan menyimpan ID yang dihasilkan dalam variabel adminrole, bris yng berisi DB:table ('users')->insert(values: [ 'name' => 'Yoga Prasetyo', 'username' =>

'YogaAdmin', 'password' => Hash::make('admin1'), 'role_id' => $adminRole, ]);

ini bertujuan untuk menciptakan pengguna baru dengan nama seperti yang tertera pada kode tersebut dan itu berarti nama tersebut adalah menjadi peran admin pada sistem invenetory.

Gambar 4.4 userseeder role admin

(32)

Pada gambar 4.5 menunjukkan kode yang mengatur hak akses berbasis peran untuk memastikan bahwa hanya pengguna dengan role Admin (dengan role_id = 1) yang dapat mengakses halaman tertentu seperti pengelolaan pengguna dan peran. Hal ini dilakukan dengan menggunakan komponen ProtectedRoute, yang memeriksa apakah pengguna yang sedang login memiliki peran yang diizinkan sebelum memberikan akses. Jika role pengguna tidak sesuai, mereka akan diarahkan ke halaman kesalahan atau halaman lain yang ditentukan, sehingga mencegah akses ke data atau tindakan yang sensitif. Pada kode diatas dapat mengatur dan halaman-halaman tertentu, seperti TblUser, TambahUser, dan EditUser untuk mengelola pengguna, serta TblRole, TambahRole, dan EditRole untuk mengelola peran.

Gambar 4.5 pengaturan hak akses

4. Fitur Data Role

Pada gambar 4.6 terdapat fitur halaman admin bagian data role, pada data role ini terdapat banyaknya role yang telah dibuat oleh admin beserta nama role nya, data role merupakan nama role dari data user yang telah login di sitem inventory dan pengguna yang login sesuai dengan ke empat peran diatas maka data user nya akan masuk dihalaman fitur data user, admin memiliki 4 role yaitu user stok, management, da marketing.

(33)

5. Fitur Laporan Stok

Fitur cetak laporan stok terdapat di role user stok dibagian menu laporan pada bagian laporan terdapat banyak fitur untuk mencetak semua stok yaitu ada laporan stok rusak, barang baru, barang kembali, transaksi pinjam, transaksi instalasi, koreksi stok baru, koreksi peminjaman, dan koreksi instalasi.

Gambar 4.7 Tampilan Fitur Laporan

6. Laporan Stok Rusak

Gambar 4.8 menjelaskan tentang penambahan stok rusak pada sistem inventori apabila barang ada yang rusak kemudian diinputkan kedalam tambah barang yang rusak maka setelah berhasil input stok rusak akan terarah ke dalam laporan stok rusak sebagai berikut :

Gambar 4.8 Tambah Stok Rusak

(34)

Gambar 4.9 menjelaskan tentang setelah menambahkan stok rusak, selanjutnya akan terarah kehalaman laporan stok rusak. Pengguna dapat mencetak laporan stok rusak pada bagian tombol export to excel.

Gambar 4.9 Laporan Stok Barang Rusak

Gambar 4.10 adalah hasil cetak laporan dari fitur stok rusak yang berhasil di export pada laporan stok barang rusak.

Gambar 4.10 Hasil Export Laporan Stok Rusak

Gambar 4.11 menjelaskan source kode dari laporan stok rusak dengan fungsi fetch data stok rusak, fungsi ini bertanggung jawab untuk mengambil data laporan stok rusak dari API yang terhubung ke endpoint http://127.0.0.1:8000/api/stokrusak.

Data yang diterima kemudian disimpan dalam state data stok rusak dan filtered data.

Setelah itu, data ini akan digunakan untuk ditampilkan dalam tabel laporan stok rusak, selain itu dibagian backendya dibagian rute api.php sebagai berikut :

Gambar 4.11 Source Code Frontend Pengambilan Data Stok Rusak

(35)

Pada gambar 4.12 menjelaskan tentang kode di backend dalam StokBRController, pada metode index(), digunakan untuk mengambil data stok rusak dari database melalui model StokBR, menggunakan Eloquent ORM untuk mengambil data dari tabel stok barang rusak di database, dan memuat data dari tabel barang melalui relasi with(barang) yang dihubungkan menggunakan barang_id sebagai foreign key.

Gambar 4.12 Source Code Backend Pengambilan Data Stok Rusak

7. Laporan Barang Masuk Baru

Gambar 4.13 adalah gambar tabel laporan barang baru pada fitur cetak laporan dari tabel tersebut dapat dilihat transaksi laporan barang masuk baru yang sebelumnya telah dilakukan oleh user dan datanya masuk kedalam tabel laporan barang masuk baru.

Gambar 4.13 Tampilan Laporan Barang Masuk

Pada gambar 4.14 menghasilkan laporan dari stok barang masuk yang sudah diexport dan dalam laporan tersebut terdapat kolom sesuai dengan yang diinputkan dari transaksi barang masuk yaitu terdapat kolom tanggal, no transaksi, keterangan,

(36)

Gambar 4.14 Hasil Laporan Stok Barang Masuk

Gambar 4.15 menunjukkan pengambilan data untuk laporan barang masuk dari kode fecthDataStokMasuk yang digunakan untuk pengambilan data dari API terkait stok masuk, fungsi ini mengirim perimintaan GET ke endpoint API stok masuk untuk mendapatkan data stok masuk, kemudian setiap data yang valid dari permintaan GET dikirimkan ke endpoint API untuk mengambil detail setiap data dari stok masuk menggunakan item_id, dan hasil permintaan disimpan ke dalam object deataildata yang menyimpan untuk setiap detail transaksi stok masuk berdasarkan ID. Untuk menampilkan data pada frontend menggunakan dataStokMasuk, filteredData, dan detailsState, dan Swal.fire berfungsi untuk memberikan sebuah pesan kesalahan apabila terjadi kesalahan dalam melakukan pengambilan data pada stok barang masuk.

Gambar 4.15 Source Code Frontend Pengambilan Data Stok Masuk

Pada gambar 4.16 menjelaskan tentang kode di backend dalam StokBMController, Fungsi index() digunakan untuk melakukan pengambilan data dari database melalui model, StokBM::all adalah mengambil seluruh data yang ada di database.

(37)

8. Laporan Barang Kembali

Barang yang dikembalikan adalah barang yang sedang dipinjam oleh pengguna dan gambar dibawah ini adalah gambar transaksi keluar yang mana pada transaksi keluar menunjukkan tabel data barang yang dipinjam dan terdapat status ada barang yang belum kembali yang berarti barng yang dipinjam tersebut belum dikembalikan, Setelah mengembalikan barang akan tampil halaman form pengembalian barang dan kita dapat mengatur berapa banya barang ayang akan dikembalikan, setelah barang di kembalikan di halaman barang kembali akan masuk stok barang yang telah dikembalikan beserta keterangan dan jumlah barang yang telah dikembalikan, dan ketika ingin mengembalikan barang ada tombol kembalikan seperti gamabar dibawah ini.

Gambar 4.17 Data Transaksi Keluar

Gambar 4.18 terdapat tabel data barang yang sudah dikembalikan mulai dari tanggal pengembalian barang, no transaksi, nama peminjam, keterangan, nama barang, serta jumlah barang yang dikembalikan ada berapa barang semua sudah masuk dalam tabel pengembalian barag tersebut, data pengembalian barang didapatkan dari transaksi keluar dari barang yang dipinjam kemudian sudah dikembalikan, pengguna bisa export laporan pengembalian barang dengan tombol export to excel.

Gambar 4.18 Laporan Pengembalian Barang

(38)

Pada gambar dibawah menghasilkan laporan dari pengembalian barang yang sudah diexport dan dalam laporan tersebut terdapat kolom sesuai dengan yang diinputkan dari transaksi barang masuk yaitu terdapat kolom tanggal, no transaksi, nama peminjam, keterangan, barang dan jumlah.

Gambar 4.19 Hasil Laporan Pengembalian Barang

Gambar 4.20 adalah hasil cetak laporan pengembalian barang yang sudah di ekspor dalam bentuk excel

Gambar 4.20 Hasil Cetak Laporan Pengembalian Barang

Dibawah ini merupakan source code dari frontend dan backend untuk melakukan pengambilan data pada pengembalian barang yang dipinjam, Gambar 4.20 adalah gambar source code dari frontend pemgembalian barang yaang digunakan untuk mengambil dan menyimpan data barang masuk dari API dan disimpan kedalam state untuk ditampilkan dalam frontend untuk antarmuka pengguna, dari code tersebut terdapat perintah filtered data yang dgunakan untuk menyimpan data transaksi masukyang sudah difilter untuk memudahkan pencarian data bagi pengguna, search tem untuk menyimpan kata kunci yang digunakan pada pencarian data di filterdata, dan pagenumber digunakan untuk menyimpan dan memuat nomor halaman pada data transaksi. Fungsi fecth transaksi masuk digunakan untuk melakukan request GET ke API untuk mengambil data transaksi barang masuk dan setelah berhasil dayta yang telah dikirim dan berhasil diterima akan tersimpan

(39)

menggunakan fungsi console error.Berikut adalah source code untuk mengambil data backend dari model untuk pengembalian barang yang dipinjam.

Gambar 4.21 Source Code Frontend Pengembalian Barang

Gambar 4.21 adalah source code backend untuk transaksi masuk dari pengembalian barang yang telah selesai dipinjam. Fungsi index pada backend untuk transaksi masuk bertujuan mengambil data dari database melalui model TransaksiMasuk, yang terhubung dengan tabel transaksi_masuk, untuk mengelola pengembalian barang yang telah selesai dipinjam. Fungsi ini memanfaatkan relasi dengan tabel lain, seperti barang untuk detail barang dan users untuk informasi peminjam, menggunakan metode seperti with(['barang', 'user']) agar data relasional dapat diambil sekaligus. Data yang diambil dapat difilter atau diproses sesuai kebutuhan, lalu dikonversi ke format JSON menggunakan response()->json() agar kompatibel dengan frontend.

Gambar 4.22 Source Code Backend Pengembalian Barang

(40)

9. Laporan Transaksi Peminjaman

Gambar 4.23 terdapat tabel transaksi peminjaman, data transaksi peminjamna didapatkan dari halaman data transaksi keluar yaitu barang yang keluar karena dipinjam, dari data tabel tersebut terdapat kolom tanggal, no transaksi, keterangan, barang, dan jumlah barang yang telah dipinjam.

Gambar 4.23 Laporan Transaksi Peminjaman

Gambar 4.24 merupakan source code frontend untuk pengembalian barang code tersebut digunkan untuk mengambil data transaksi peminjaman barang dan menyimpan data transaksi barang dari API dan disimpan kedalam state untuk ditampilkan dalam frontend untuk antarmuka pengguna.

Gambar 4.24 Source Code Transaksi Peminjaman

10. Transaksi Instalasi

Gambar 4.25 merupakan tabel yang memuat data barang transaksi instalasi , transasi instalasi adalah transaksi yang dilakukan oleh suatu instansi untuk melakukan pebelian barang yah barang itu akan menajdi pemilik instansi pembeli dan tidak akan kemali ke yang menjual barang tersebut, laporan transaksi instalasi dilakukan dari tarnsaksi instalasi setelah melakukan transaksi instalasi maka akan mengarah ke laporan transaksi instalasi seperti pada gambar diatas, dan dapat export laporan instalasi kedlam bentuk excel berikut hasil

(41)

Gambar 4.25 Laporan Transaksi Instalasi

Gambar dibawah merupakan hasil laporan transaksi intalasi yang dilakukan leh PT. Nakula Sadewa dan di laporan tersebut juga terdapat tanggal transaksi, notransaksi, keterangan, nama barang, dan jumlah barang yang dibeli oleh instansi sesuai dengan yang diinputkan pada saat melakukan transaksi instalansi.

Gambar 4.26 Hasil Laporan Transaksi Instalasi

Gambar dibawah adalah source code untuk mengambil data laporan instalansi dari frontend dan di lakukan permintaan HTTP ke API menggunakan axios untuk mengambil data transaksi instalasi dari endpoint http://127.0.0.1:8000/api/transaksiinstalasi. Setelah data diterima, data tersebut disimpan di state transaksi instalasi dan filteredData.

Gambar 4.27 Source Code Transaksi Instalansi

(42)

11. Laporan Koreksi Stok Baru

Laporan koreski stok baru bisa ditampilkan di halaman koreksi stok sesudah pengguna melakukan koreksi bpada barang masuk ketika terdapat kesalahan dalam penginputan data, berikut adalah form koreksi stok masuk baru.Setelah dilakukan koreksi seperti pada form diatas maka dihalaman laporan stok masuk baru tampil tabel laporan koreksi sesuai apa yang sudah dikoreksi, berikut adalah gambar dari laporan koreksi stok baru yang sudah dilakukan pengkoreksian.

Gambar 4.28 Koreksi Stok Masuk Baru

Setelah tampil data tabel koreksi laporan stok baru seperti pada gambar diatas pengguna dapat melkaukan export laporan terkait korksi stok varu yang sudah di koreksi, berikut adalah hasil export laporan koreksi stok baru dalam bentuk excel.

Gambar 4.29 Laporan Koreksi Stok Masuk Baru

(43)

Gambar 4.30 menunjukkan data excel dari hasil laporan koreksi stokbaru yang berhasil di export, data di excel akan menunjukkan data sesuai hasil laporan yang telah dikoreksi pada halaman laporan stok baru.

Gambar 4.30 Hasil Laporan Koreksi Stok Masuk Baru

Gambar 4.31 menjelaskan tentang pengambilan data laporan koreksi stok masuk yang diambil dari kategori id yang dipanggil menggunakan fungsi fecthCategories() yang digunakan untuk pengambilan data berdasarkan kategori namun detailnya tidak terlihat dalam kode ini selanjutnya dilakukan permintaan HTTP menggunakan axios untuk mendapatkan data

berdasarkan id yang diteruskan dalam URL

http://127.0.0.1:8000/api/stokmasuk/${id}.

Gambar 4.31 Source Code Koreksi Stok Masuk Baru

12. Koreksi Peminjaman

Gambar dibawah merupakan gambar laporan transaksi koreski peminjaman yang sebelumnya telah dilakukan pengkoreksian di transaksi pinjam pada gambar tersebut telah dilakukan koreksi pada barang mobil sebelum dikoreksi jumlah barang nya ada 2 namun setelah dikoreksi jumlah barang menjadi 1 dikarenakan dilakukan pengurangan barang, dan pada baranng iphone terdapat penambahan barang yang awalnya 4 berubah menjadi 5 sesuai dengan apa yang sudah dikoreksi.

(44)

Gambar 4.32 Laporan Transaksi peminjaman

Berikut adalah hasil export laporan transaksi peminjaman dalam bentuk excel yang sesuai dengan apa yang telah dikoreksi.

Gambar 4.33 Hasil Laporan Transaksi peminjaman

Gambar dibawah menjelaskan tentang pengambilan data untuk laporan koreksi transaksi barang keluar menggunakan fetchdata, dari code tersebut terdapat perintah filtered data yang dgunakan untuk menyimpan data transaksi masukyang sudah difilter untuk memudahkan pencarian data bagi pengguna, search tem untuk menyimpan kata kunci yang digunakan pada pencarian data di filterdata, dan pagenumber digunakan untuk menyimpan dan memuat nomor halaman pada data transaksi.

Gambar 4.34 Source Code Transaksi Peminjaman

13. Koreksi Instalasi

Gambar dibawah menampilkan laporan koreksi transaksi instalasi yang sebelumnya sudah dilakukan koreksi pada transaksi instalasi, sebelum dikoreksi jumkah barang yang dibeli ada 20 dan dilakukan koreksi pengurangan barang sehingga menjadi 15 barang setelah dikoreksi, data laporan koreksi tersebut

(45)

bentuk excel. Gambar 4.35 menampikan hasil laporan excel yang telah di export dari halaman laporan koreksi transaksi instalasi pada laporan tersebut sesuai dengan hasil di halaman laporan koreksi instalasi beserta dengan hasil yang telah dikoreksi.

Gambar 4.35 Laporan Koreksi Transaksi Instalasi

Gambar dibawah menjelaskan tentang pengambilan data untuk laporan koreksi instalasi barang, dari code tersebut terdapat fungsi filtered data yang digunakan untuk menyimpan data transaksi masuk yang sudah difilter untuk memudahkan pencarian data bagi pengguna, search term untuk menyimpan kata kunci yang digunakan pada pencarian data di filterdata, dan page number digunakan untuk menyimpan dan memuat nomor halaman data transaksi.

Gambar 4.36 Hasil Laporan Koreksi Transaksi Instalasi

(46)

14. Testing Login Admin

Gambar dibawah ini menjelaskan tentang testing yang sudah dilakukan pada role admin dibagian login admin, di tes case tersebut menjelaskan dari alur testing yang telah selesai di lakukan. Terdapat test steps, pre condition, test data, expected result, pos condition, actual result sampai status dari testing tersebut dapat dilihat pada gambar dibawah ini.

Gambar 4.37 Hasil Testing Login Admin

(47)

15. Testing Role Admin (Data User)

Gambar dibawah ini menjelaskan tentang hasil testing pada role admin di bagian tambah user. Langkah tase case untuk hasil pengujian data user juga melewati beberapa langakah diantaranya mulai dari tes scenario, test case, pre condition, test steps, tes data, expected result, post condition, actual result, dan status dari hasil pengujian tersebut.

Gambar 4.38 Hasil Testing Data

(48)

16. Testing Fitur Cetak Laporan Koreksi Transaksi Peminjaman Gambar dibawah ini menjelaskan tentang hasil testing fitur cetak laporan di bagian koreksi transaksi peminjaman pada fitur laporan koreksi barang masuk data diambil dari tabel barang masuk id, dan laporan dapat di download dalam bentuk excel, Langkah tase case untuk hasil pengujian data user juga melewati beberapa langakah diantaranya mulai dari tes scenario, test case, pre condition, test steps, tes data, expected result, post condition, actual result, dan status dari hasil pengujian tersebut.

Gambar 4.39 Hasil Testing Fitur Cetak Laporan Barang Masuk

Selain tase case dari bberapa gambar diatas masih ada tase case dari fitur cetak laporan, dan tase case yang ditampilkan hanya sebagain. Untuk gambar tase case selengkapnya pada semua fitur cetak laporan dapat di lihat di halaman lampiran.

4.2. Pembahasan

PT Nakula Sadewa adalah perusahaan yang bergerak dibidang teknologi informasi yang bertempat di Malang, Jawa Timur. Di PT Nakula Sadewa, penulis mendapatkan pengalaman dan pengetahuan baru dalam bidang teknologi dan informasi. Selain itu penulis juga mendapatkan sebuah proyek dalam bidang tersebut. Proyek yang diberikan adalah pembuatan sistem inventory, sebuah solusi yang dirancang untuk mengelola data barang, stok, dan transaksi secara efisien dalam suatu perusahaan. Di PT Nakula Sadewa, yang berfokus pada pembuatan role admin dan fitur cetak laporan. Admin bertanggung jawab untuk memantau data barang, mengelola kategori, stok, dan memastikan semua transaksi dicatat dengan baik. Salah satu fitur unggulan yang

(49)

mudah dibaca. Admin dapat menghasilkan laporan transaksi barang masuk, barang keluar, dan revisi stok dalam hitungan detik. Proses ini tidak hanya meningkatkan efisiensi kerja, tetapi juga meminimalkan risiko kesalahan pencatatan manual. kontrol penuh terhadap operasionalnya.

Untuk membuat sistem ini, penulis menggunakan teknologi React untuk frontend dan Laravel untuk backend. React digunakan karena kemampuannya dalam membangun antarmuka pengguna yang dinamis dan responsif. Pendekatan berbasis komponen dalam React memungkinkan pengembang menciptakan fitur yang dapat digunakan kembali, sehingga mempercepat pengembangan dan mempermudah pemeliharaan sistem. Kombinasi ini memberikan fleksibilitas dalam pengembangan sekaligus memastikan stabilitas sistem.

Pemilihan React dan Laravel juga didasarkan pada kebutuhan perusahaan untuk memiliki sistem yang skalabel dan mudah dikembangkan di masa depan. React memungkinkan integrasi dengan teknologi lain secara baik, sedangkan Laravel memberikan struktur yang rapi untuk pengelolaan logika bisnis. Dengan teknologi ini, PT Nakukasadewa dapat memiliki sistem inventory yang tidak hanya modern, tetapi juga mampu beradaptasi dengan kebutuhan operasional yang terus berkembang. Sistem ini menjadi aset penting dalam mendukung efisiensi dan transparansi di perusahaan, sekaligus memberikan nilai tambah bagi seluruh proses pengelolaan barang.

(50)

(51)

BAB V PENUTUP

1.1 Kesimpulan

Berdasarkan analisa yang telah dilakukan oleh penulis selama kegiatan magang dapat disimpulkan bahwa pengelolaan sistem inventory dan laporan stok, berbagai perbaikan telah diterapkan untuk meningkatkan efisiensi operasional dan akurasi data, yang berfokus untuk mengintegrasikan proses transaksi peminjaman. Pengembalian dan pencatatan stok rusak dengan laporan stok, sistem yang dibuat dapat meningkatkan efektifitas pendataan barang masuk maupun keluar dan dapat memudahkan untuk pelaporan serta pendataan barang yang sedang dipinjam, barang kembali, dan barang rusak. Selain itu admin staff stok dapat dengan mudah untuk mencetak laporan dalam bentuk excel.

Proses transaksi peminjaman, pengembalian, dan pencatatan barang rusak berhasil diintegrasikan dengan baik kedalam sistem laporan stok, relasi antara tabel transaksi stok keluar, dan rusak telah diperbaiki sehingga data dapat dicatat dengan akurat. Hal ini memudahkan pengguna untuk memantau kondisi stok secara real-time dan mengurangi kesalahan pencatatan data stok, Setiap operasi, mulai dari perekaman data hingga pelaporan, didukung oleh endpoint RESTful API yang dirancang sesuai prinsip REST untuk memastikan interoperabilitas dan fleksibilitas sistem.

Pada bagian transaksi peminjaman, sistem ini mencatat data seperti tanggal transaksi, nama peminjam, jenis barang yang dipinjam, dan jumlah barang yang dipinjam, data ditransaksi peminjaman berelasi dengan stok barang keseluruhan untuk memperbarui data barang secara otomatis saat barang sedang dipinjam. Selain itu transaksi pengembalian barang di lakukan agar mempermudah untuk melakukan penambahan stok secara otomatis dan dilakukan validasi data untuk memastikan hanya transaksi yang valid yang tercatat dalam sistem.

(52)

Secara keseluruhan, sistem laporan transaksi peminjaman, pengembalian, dan stok rusak ini dirancang untuk mendukung transparansi dan efisiensi dalam pengelolaan inventory. Dengan pemeliharaan berkala dan peningkatan fitur, sistem ini diharapkan dapat terus memberikan manfaat dan mendukung aktivitas operasional perusahaan secara efektif.

1.2 Saran dan Rekomendasi

Sebagai saran dan rekomendasi untuk perbaikan di masa mendatang, penulis menyarankan untuk :

a. Melakukan pengembangan fitur notifikasi otomatis untuk transaksi tertentu, seperti peminjaman barang yang mendekati jatuh tempo pengembalian untuk mempermudah memantau aktivitas secara efektif.

b. Menambahkan mekanisme keamanan tambahan, seperti enkripsi data sensitif dan autentikasi dua faktor, untuk meningkatkan perlindungan pada data.

c. Melakukan pemeliharaan rutin dan pembaruan berkala untuk mengikuti perkembangan teknologi dan kebutuhan pengguna.

(53)

(54)

DAFTAR PUSTAKA

CV. Nakula Sadewa. (2019a). Portofolio: Angkasa Pura Airports Adi Soemarmo Surakarta – Mesin antrian | Alat survey kepuasan pelanggan. Nakulasadewa.Com.

https://www.nakulasadewa.com/digital-signage- angkasa-pura/

https://www.nakulasadewa.com/alat-antrian/

CV. Nakula Sadewa. (n.d.). About – Mesin antrian | Alat survey kepuasan pelanggan.

Retrieved January 4, 2024, from https://www.nakulasadewa.com/alat-antrian/

CV. Nakula Sadewa. (n.d.). About – Mesin antrian | Alat survey kepuasan pelanggan.Retrieved January 4, 2024, from

https://www.nakulasadewa.com/alat-antrian/

Monalisa, S. and , E. Denni Prima Putra, F. K. ‘Rancang Bangun Sistem Informasi Inventory Obat Pada Rumah Sakit Jiwa Tampan Berbasis Web’, Query: Journal of Information Systems, 5341(October), pp. 58–65. 2018.

(55)

LAMPIRAN Lampiran 1. Data-Data Pendukung

Link Akses Tase Case Role Admin dan Fitur Cetak Laporan :

https://drive.google.com/file/d/1ZCGsQ7LyMabVV_8vVd5ozxZ5F-

x6pEI3/view?usp=sharing

(56)

Lampiran 2. Lembar Nilai Pembimbing Lapang, Dosen Pembimbing Dosen

Penguji, dan Rekap Nilai MKI

(57)

Lampiran 3. Berita Acara Ujian MKI

(58)

Lampiran 4. Kartu Kendali Bimbingan MKI

(59)

Lampiran 5. Lembar Kerja Harian MKI

Kode Dokumen : FR–PRS-068

Revisi : 0

LEMBAR KERJA HARIAN MAGANG KERJA INDUSTRI (MKI)

Nama : Fitri Widya Handayani

NIM 362155401021

Lokasi MKI : PT. Nakula Sadewa

No Tanggal Uraian Pekerjaan Paraf

1. Selasa

9 Juli 2024 • Pada tanggal ini saya melakukan pengenalan di PT Nakula Sadewa Corp Indonesia, pengenalan tentang lingkungan dan pembimbing lapangan MKI

• Selain melakukan pengenalan lingkungan di PT Nakula Sadewa Corp Indonesia saya juga diskusi terkait tata tertib yang ada di

perusahaan, mulai dari dresscode, hari masuk magang dan waktu magang 2. Rabu

10 Juli 2024 • Pada tanggal ini pembimbing MKI

memberikan waktu belajar sendiri untuk memahami react dan kami diberikan waktu 1 bulan untuk belajar memahami React Router, dan pembimbing menjelaskan sedikit tentang apa itu React JS.

3. Kamis

11 Juli 2024 • Pagi hari setelah pembimbing magang memberikan arahan dan penjelasan tentang React saya mulai install React JS yang menggunakan Node.js dan npm

untuk mengelola dependensi dan membangun proyek.

4. Jumat-Sabtu 12-13 Juli

2024

• Saya mulai membuat project baru

menggunakan npx create-react-app, sambil saya memelajari bagaimana JS digunakan untuk mendeklarasikan element React, dan setelah saya install reac.js saya mulai membuat komponen header dan ooter sederhana.

13 Juli 2024 Pembimbing Lapangan

Yoga Prasetio

(60)

No Tanggal Uraian Pekerjaan Paraf 5. Senin

15 Juli 2024 • Pada pagi hari saya mualai belajar membuat proyek menggunakan React JS dan laravel 10

6. Selasa

16 Juli 2024 • Memahami konsep dasar React, seperti state, props, komponen, dan lifecycle methods

• Membuat proyek latihan membuat form sederhana dengan state untuk menangani input pengguna

7. Rabu

17 Juli 2024 • Selanjutnya saya belajar tentang lifecycle methods di React, termasuk penggunaan useEffect.

8. Kamis

18 Juli 2024 • Pada tanggal ini dipagi hari sampai sore hari saya mencoba mengimplementasikanya dengan mencoba membuat sebuah aplikasi sederhana untuk menampilkan daftar tugas(To-Do-List)

9. Jumat

19 Juli 2024 • Setelah mengimplementasikan untuk menampilkan daftar tugas (To-Do-List) selanjutnya saya mengimplementasikan React Router dalam proyek sederhana dengan membuat beberapa halaman (home, about, contact)

10. Sabtu

20 Juli 2024 • Setelah mengimplementasikan dengan membuat beberapa halaman (home, about, contact) selanjutnya pada tanggal ini saya memahami konsep lifting state dan prop drilling.

Yoga Prasetio

(61)

22 Juli 2024 • Belajar latihan mengelola state global dengan Context API.

12. Selasa

23 Juli 2024 • Pada tanggal ini dipagi sampai sore hari saya Belajar tentang integrasi React dengan REST API, cara fetch data dari server pada proyek sederhana yang saya coba.

13. Rabu

24 Juli 2024 • Pada tanggal ini dipagi sampai sore hari saya Belajar tentang integrasi React dengan REST API, cara fetch data dari server pada proyek sederhana yang saya coba.

14. Kamis

25 Juli 2024 • Selanjutnya saya belajar tentang error handling saat fetching data.

• Pada siang harinya saya mencoba belajar memperbaiki dan meningkatkan proyek dengan menambahkan fitur pencarian data.

15. Jumat

26 Juli 2024 • Memahami cara menggunakan event handlers dalam React.

16. Sabtu

27 Juli 2024 • Mampu menerapkan event handlers pada komponen-komponen dengan baik.

Yoga Prasetio

(62)

29 Juli 2024 • Setelah mengimplementasikan dengan membuat beberapa halaman (home, about, contact) selanjutnya pada tanggal ini saya memahami konsep lifting state dan prop drilling.

18. Selasa

30 Juli 2024 • Belajar latihan mengelola state global dengan Context API.

19. Rabu 31 Juli 2024

• Pada tanggal ini dipagi sampai sore hari saya Belajar tentang integrasi React dengan REST API, cara fetch data dari server pada proyek sederhana yang saya coba

• Selanjutnya saya belajar tentang error handling saat fetching data.

•

3 Agustus 2024 Pembimbing Lapangan

Yoga Prasetio

(63)

No Tanggal Uraian Pekerjaan Paraf 1. Kamis

1 Agustus 2024

• Memahami cara menggunakan event handlers dalam React.

• Mampu menerapkan event handlers pada komponen- komponen dengan baik

2. Jumat 2 Agustus

2024

• Setelah selesai memahami dan memelajari tentang React JS dan belajar

mengimplementasiannya menggunakan Laravel 10 pada tanggal ini pembimbing magang mulai memberikan proyek kepada kelompok saya yaitu tentang sistem inventori

3. Sabtu 3 Agustus

2024

• Sebelum melangkah untuk pembuatan proyeknya saya dan tim saya membuat tampilan UI/UX nya dulu di figma.

4. Senin 5 Agustus

2024

• Pada tanggal ini saya dan tim membuat tampilan UI/UX untuk website sitem inventory nya

• Mulai dari dashboard, halaman login, penyesuaian warna dan tampilan serta fitur- fitur yang akan kami buat di proyek

sederhana yaitu sitem inventory 5. Selasa

6 Agustus 2024

• Setelah itu kami masih melanjutkan untuk membuat design UI/UX nya dan meminta pendapat dari pembimbing magang tentang tampilanya

6. Rabu 7 Agustus

2024

• Setelah tampilan UI/UX jadi dan sudah di setujui oleh pembimbing magang saya dan tim mulai untuk eksekusi mengerjakan proyek sistem inventori menggunakan React Js dan Laravel 10 sesuai design yang telah dibuat.

Yoga Prasetio

(64)

8 Agustus 2024

• Saya mulai untuk memelajari dan membuat requirement sistem inventori dan

merancang endpoint API yang dibutuhkan

8. Jumat 9 Agustus

2024

• Instalasi dan konfigurasi Laravel Passport atau JWT untuk autentikasi API.

9. Sabtu 10 Agustus

2024

• Selanjutnya saya membuat model User dan mendefinisikan relasi antara role admin, user stok, management, dan marketing

10. Senin 12 Agustus

2024

• Membuat API endpoint untuk login dan autentikasi, menguji login untuk masing- masing role

11. Selasa 13 Agustus

2024

• Setelah membuat API untuk login masing- masing role selanjutnya saya membuat API untuk manajemen barang (create, update, delete, read) yang hanya bisa diakses oleh admin dan user stok

12 Rabu

14 Agustus 2024

• Membuat validasi pada endpoint barang (validasi nama, kategori, stok).

Yoga Prasetio

(65)

15 Agustus 2024

• Membuat API endpoint untuk kategori barang (CRUD kategori), dan crud ini nantinya dikelola oleh user staff stok dan hanya staff stok saja yg bisa mengganti atau mengubah CRUD ini.

14. Jumat 16 Agustus

2024

• Setelah itu saya membuat tampilan pada frontendnya dan menyesuaikan table serta font nya

15. Sabtu 17 Agustus

2024

• Menghubungkan API endpoint dengan backend di Laravel dan memberikan rute api di api.php serta di app.js di frontendnya agar terhubung dan bisa dijalankan

dilocalhost 16. Senin

19 Agustus 2024

• Saya mulai membuat mode, migration, dan controller untuk manajemen role di Laravel.

• Selain membuat role admin saya juga membuat antarmuka dari reactjs untuk CRUD di rolea admin, seperti untuk

menambah, mengedit, dan menghapus data yang ada dirole admin

2024

• Setelah membuat antarmula, saya membuat middleware laravel untuk mengatur akses pengguna berdasarkan role.

18. Rabu 21 Agustus

2024

• Menambah fitur daftar pengguna berdasarkan role

• Membuat halaman dashboard khusus admin.

Yoga Prasetio

(66)

22 Agustus 2024

• Membuat endpoint API untuk pengambilan data stok (barang, kategori, stok masuk, stok keluar, stok rusak)

2024

• Membuat komponen laporan dengan filter berdasarkan waktu dan kategori di React.js

2024

• Implementasi fitur ekspor laporan ke format PDF menggunakan Laravel DomPDF.

22. Senin 26 Agustus

2024

• Menambahkan fungsi pencetakan laporan langsung dari React.js

• Mendesain tampilan dan struktur di halamn Laporan stok, stok masuk, stok keluar, dan stok rusak

2024

• Menghubungkan frontend dengan API di backend untuk mrnampilkan data laporan stok

• Mengimplemenyasikan filter berdasarkan kategori dan tanggal.

24. Rabu 28 Agustus

2024

• Menambahkan fitur pagination pada laporan stok agar data dapat ditampilkan dalam jumlah halaman yang terbatas.

Yoga Prasetio

(67)

29 Agustus 2024

• Mengimplementasikan fitur export laporan stok ke dalam format Excel menggunakan pustaka seperti exceljs di ReactJS.

2024

• Setelah itu membuat tampilan table untuk pengimplementasian format excel di laporan stok masuk

2024

• Pengujian fitur laporan stok dan export ke Excel. Validasi data yang ditampilkan sesuai dengan filter yang diterapkan.

Yoga Prasetio