Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
BAB 3
PELAKSANAAN KERJA MAGANG
3.1 Kedudukan dan Organisasi
Kerja magang dilakukan pada Divisi IT dengan mengambil peran sebagai
Web Developer. Proses perancangan dan pembangunan sistem panel admin PT
Nanang Nusantara Tritama diikuti oleh kebutuhan bisnis perusahaan. Dalam proses
pembuatan sitem panel admin berbasis web ini terdapat dua orang rekan kerja ma-
gang, yaitu Ryifki Yidan dan Achmad Ilyasa Nugraha. Pembagian kerja dalam
pembuatan sistem dapat dilihat pada Tabel 3.1.
Tabel 3.1. Pembagian kerja magang
Nama Deskripsi Tugas
M. Farrel Adivia Pengembangan front end dan back end bagian activity log,
company, measurement, dan purchase order
Ryifki Yidan Pengembangan front end dan back end bagian Templating
engine, Delivery Order, Fabric, dan Product
Achmad Ilyasa Nugraha Pengembangan front end dan back end bagian Login, Reg-
ister, Profile, dan Dashboard.
Rapat progress selama pelaksanaan kerja magang dilakukan sebanyak tiga
kali seperti yang dicantumkan pada Tabel 3.2.
6
Tabel 3.2. Rapat yang dilakukan selama kerja magang
Minggu Topik
1 Pemahaman proses bisnis perusahaan serta analisis kebu-
tuhan, dan perancangan solusinya.
5 Presentasi progress untuk halaman yang dibuat.
10 Presentasi akhir dari seluruh progress yang telah dibuat se-
lama kerja magang.
3.2 Tugas yang Dilakukan
Dalam pembangunan sistem panel admin perusahaan, dilakukan beberapa
tahapan sebagai berikut.
1. Pemahaman konsep dan alur sistem proses bisnis yang terjadi pada perusa-
haan. Pemahaman ini dibimbing oleh Direktur.
2. Pemahaman konsep dan alur flowchart dalam membangun sistem. Berupa
proses tinjauan dalam merancang fitur-fitur dalam sistem dan metode peny-
impanan data atau database.
3. Coding, yaitu pembuatan kode program untuk membangun sistem
berdasarkan konsep dan fitur yang telah dibahas dan dipahami sebelumnya.
4. Debugging, yaitu mengurangi kecacatan proses atau bug yang terjadi dalam
sistem yang dikembangkan agar sesuai dengan sistem yang diinginkan.
3.3 Uraian Pelaksanaan Magang
Pelaksanaan kerja magang diuraikan seperti pada Tabel 3.3.
7
Tabel 3.3. Tabel realisasi kerja magang
Minggu Uraian Pekerjaan
1• Pemahaman proses bisnis perusahaan
• Analisis masalah pada proses bisnis perusahaan dan merancang
solusinya
2• Pemahaman konsep PHP dan framework Codeigniter3
• Merancang struktur database pada Sistem Panel Admin
3 • Implementasi struktur database pada web server (phpmyadmin)
4• Merancang Mockup User Interface halaman Company.
• Membuat front-end dan back-end halaman Company.
5
• Merancang Mockup User Interface halaman Measurement.
• Membuat front-end dan back-end halaman Measurement.
• Presentasi progress
6• Merancang Mockup User Interface halaman Purchase Order.
• Membuat front-end dan back-end halaman Purchase Order.
7
•Merancang Mockup User Interface halaman Activity Log
• Membuat front-end dan back-end halaman Activity Log.
• Menambahkan script get Activity Log pada tiap menu
8 • Mencari dan memperbaiki bug atau error
9 • Mencari dan memperbaiki bug atau error
10• Rapat progress akhir.
• Mencari dan memperbaiki bug atau error
11 • Mencari dan memperbaiki bug atau error
12 • Mencari dan memperbaiki bug atau error
8
3.3.1 Analisis Kebutuhan
Secara garis besar, pengembangan panel admin PT. Nanang Nusantara
Tritama bertujuan untuk memudahkan pekerjaan staf dan untuk meningkatkan
kegiatan pencatatan proses bisnis di perusahaan. Analisa kebutuhan dilakukan de-
ngan melakukan observasi pada kegiatan bisnis pada perusahaan. Diskusi dengan
direktur dan staf yang bekerja untuk membahas mengenai menu dan fitur yang perlu
dibangun pada sistem. Beberapa menu dan fitur yang akan dirancang dan ditam-
bahkan pada panel admin PT. Nanang Nusantara Tritama adalah sebagai berikut.
1. Menu Company : Digunakan untuk menampilkan dan menambahkan infor-
masi perusahaan pembeli. Data perusahaan yang tersimpan akan digunakan
sebagai record untuk pembuatan ukuran custom atau Measurement dan Pur-
chase Order.
2. Menu Measurement : Digunakan untuk mengukur dan menampilkan ukuran
pakaian custom sesuai kebutuhan company. Data pengukuran yang tersimpan
akan digunakan sebagai record barang untuk Purchase Order serta memu-
dahkan dalam transaksi berikutnya.
3. Menu Purchase Order : Digunakan untuk Menampilkan dan menambahkan
barang yang dipesan. Data Purchase Order yang tersimpan akan digunakan
sebagai bukti transaksi dan akan digunakan selanjutnya untuk surat Delivery
Order
4. Menu Activity Log : Digunakan untuk menampilkan aktivitas atau kegiatan
pengguna dalam mengoperasikan sistem.
3.3.2 Perancangan Sistem
Untuk merealisasikan pengembangan beberapa menu dan fitur sesuai ke-
butuhan, maka dilakukan pembuatan data flow diagram-DFD, alur atau flowchart,
9
entity relationship diagram-ERD, dan perancangan User Interface (UI).
A Data Flow Diagram
DFD atau Data Flow Diagram merupakan sebuah digram model yang me-
mungkinkan perancang sistem untuk menggambarkan sistem sebagai suatu jaringan
proses yang berhubungan satu dengan yang lain dengan alur datanya. Adapun DFD
yang dimiliki dalam sistem yang dirancang adalah sebagai berikut.
Gambar 3.1. Context Diagram
Gambar 3.1 adalah context diagram dari sistem yang telah dirancang. Di-
dalam diagram ditunjukkan bahwa ada dua jenis entitas yaitu admin dan basisdata.
10
Gambar 3.2. DFD tingkat 0
Gambar 3.2 adalah data flow diagram tingkat nol yang merupakan turunan
dari context diagram pada gambar 3.1. Terdapat empat proses dalam diagram
tersebut meliputi, pencatatan data, buat purchaseorder, buat deliveryorder, dan
tampilkan data.
11
Gambar 3.3. DFD tingkat 1 proses 1
Gambar 3.3 merupakan DFD tingkat satu proses satu yang mencakup proses
yang terjadi terhadap pencatatan data awal. Data yang diinput disimpan didalam
lima data store yaitu, tabel company, tabel cusReqSize, tabel fabric, tabel
product, dan tabel activitylog.
Gambar 3.4. DFD tingkat 1 proses 2
Gambar 3.4 merupakan DFD tingkat satu proses kedua yang mencakup
proses yang terjadi dalam membuat purchase order atau pesanan pembelian. Dalam
membuat pesanan pembelian admin harus memilih company dan product yang telah
terdata pada pencatatan sebelumnya. purchaseorder dapat menampilkan data
12
umum PO dan data pesanan dari orderdetail. Setiap aktivitas CRUD akan di-
catat kedalam tabel activitylog.
Gambar 3.5. DFD tingkat 1 proses 3
Gambar 3.5 merupakan DFD tingkat satu proses ketiga yang mencakup
proses yang terjadi dalam membuat delivery order atau surat jalan. Dalam mem-
buat surat jalan admin dapat memilih purchase order yang telah terdata pada pen-
catatan sebelumnya. Untuk membuat delivery order, data PO yang dipilih akan
menampilkan detail barangnya pada tabel orderdetail. Agar data setiap pengir-
iman yang dilakukan tetap terintegrasi digunakannya tabel relation_od_do yang
berfungsi untuk memvalidasi status order apakah barang tersebut terkirim sepenuh-
nya, status akan berubah menjadi delivered sebaliknya statusnya akan pending. Se-
tiap aktivitas CRUD akan dicatat kedalam tabel activitylog.
13
Gambar 3.6. DFD tingkat 1 proses 4
Gambar 3.6 merupakan DFD tingkat satu proses keempat. Diagram ini men-
cakup proses yang terjadi untuk menampilkan data informasi tiap data tabel. Data
yang ditampilkan dapat dipilih oleh admin dalam menu yang dirancang.
B Flowchart
Berikut merupakan flowchart atau bagan alir yang merepresentasikan
langkah-langkah dan urut-urutan yang terjadi pada sistem.
B.1 Flowchart Keseluruhan
Gambar 3.7 menggambarkan alur keseluruhan aplikasi yang dibuat sesuai
dengan yang direncanakan pada bagian analisa kebutuhan.
14
Gambar 3.7. Flowchart keseluruhan sistem.
15
Halaman yang dibuat selama proses kerja magang adalah halaman Activity
Log, Company, Measurement, Purchase Order (PO). Untuk masuk ke dalam sistem
panel admin perusahaan, dibutuhkan alur kerja sebagai berikut.
• Pengguna memasuki halaman login terlebih dahulu.
• Setelah melakukan proses login, pengguna diarahkan untuk masuk ke hala-
man utama. Halaman utama terdiri dari delapan menu sidebar dan 3 menu
pada bagian topbar.
• Secara otomatis pengguna akan diarahkan ke halaman Dashboard setelah
melakukan proses login
B.2 Flowchart CRUD
Pada bagian ini menggambarkan fungsi umum yang terjadi pada setiap menu
dimana terdapat action atau tombol-tombol yang berfungsi sebagai CRUD (Create,
Read, Update, Delete) .
B.2.1 Flowchart create
Gambar 3.8 menunjukkan proses create atau tambah data pada basisdata.
Modul ini bertujuan untuk mengirimkan atau menyimpan data baru yang di input
user kedalam suatu tabel. Input yang tertulis pada form akan divalidasi dan di-
arahkan untuk disimpan pada basisdata, apabila data telah tersimpan akan muncul
alert ”success” dan menjalankan proses penulisan activitylog.
16
Gambar 3.8. Flowchart create
B.2.2 Flowchart Read atau Detail
Gambar 3.9 menunjukkan proses pengambilan detail data dari single ID
yang diterima. Modul ini bertujuan untuk menampilkan detail informasi yang dim-
iliki oleh suatu ID pada tabel tertentu.
17
Gambar 3.9. Flowchart read/detail
B.2.3 Flowchart Update
Gambar 3.10 menunjukkan proses edit atau ubah data yang sebelumnya per-
nah tersimpan. Modul ini bertujuan untuk menampilkan data yang pengguna ingin
ubah dan menerima data yang telah diubah untuk disimpan pada tabel.
18
Gambar 3.10. Flowchart update
B.2.4 Flowchart Delete
Gambar 3.11 menunjukkan proses delete atau hapus data . Modul ini bertu-
juan untuk menghapus data pada tabel.
19
Gambar 3.11. Flowchart delete
B.3 Company
Pada bagian ini menunjukkan proses yang terjadi pada menu Company.
Menu ini terletak pada bagian sidebar. Halaman ini akan menampilkan perusa-
haan. Data akan diambil dari basisdata. Terdapat 6 tombol interaksi diantaranya,
cari data, tambah data, detail data, duplikat data, ubah data, dan hapus data.
20
Gambar 3.12. Flowchart halaman company
B.4 Measurement
Pada bagian ini menunjukkan proses yang terjadi pada menu Measurement.
Menu ini terletak pada bagian sidebar. Data akan diambil dari basisdata. Terdapat 7
tombol interaksi diantaranya, cari data, show more/less, tambah data, detail data,
duplikat data, ubah data, dan hapus data.
Gambar 3.13. Flowchart halaman measurement
21
B.5 Purchase Order
Pada bagian ini menunjukkan proses yang terjadi pada menu Purchase Or-
der. Data akan diambil dari basisdata. Terdapat 6 tombol interaksi diantaranya, cari
data, tambah data, detail data, duplikat data, ubah data, dan hapus data.
Gambar 3.14. Flowchart halaman purchaseorder
B.5.1 Purchase Order Detail
Pada Gambar 3.15 merupakan proses untuk menampilkan detail dari pur-
chase order beserta barang-barang yang dipesan dan disimpan pada tabel OrderDe-
tail. Data ID purchaseorder yang dipilih bertindak sebagai foreign key akan me-
manggil data dari tabel lain. Terdapat 4 tombol interaksi diantaranya, tambah data,
ubah data, duplikat data, dan hapus data.
22
Gambar 3.15. Flowchart halaman purchaseorder detail
B.6 Activity Log
Pada bagian ini menunjukkan proses yang terjadi pada menu Activity Log.
Menu ini terletak pada bagian sidebar dan menu tray. Data akan diambil dari basis-
data. Terdapat 2 tombol interaksi diantaranya, detail data, dan delete data.
23
Gambar 3.16. Flowchart halaman activitylog
C Struktur Table
Pada website ini database yang digunakan adalah MySQL. Berikut adalah
Entity Relation Diagram atau struktur tabel beserta fungsi yang digunakan:
Gambar 3.17. Skema ERD basisdata sistem
Pada kerja magang halaman yang akan dirancang akan disusun dari be-
24
berapa table di bawah ini, antara lain: Company, Measurement (cusreqsize),
Purchase Order, Order Detail, dan Activity Log. Berikut akan dijabarkan
struktur tabel tersebut.
C.1 Tabel Company
Tabel Company digunakan untuk menyimpan data perusahaan yang membeli
produk. Berikut merupakan atribut yang terdapat pada tabel tersebut.
Tabel 3.4. Tabel company
Nama Kolom Tipe Data Panjang Keterangan
ID (PK) Bigint 20 ID company
Name Varchar 50 Nama perusahaan
Address Varchar 255 Alamat perusahaan
Location Varchar 255Lokasi perusahaan yang akan
digunakan di surat jalan
Phone_Number Varchar 13 Nomor telepon perusahaan
Fax_Number Varchar 13Nomor fax document perusa-
haan
C.2 Tabel Measurement
Tabel cusreqsize digunakan untuk menyimpan data ukuran baju karyawan
tiap perusahaan. Berikut merupakan atribut yang terdapat pada tabel tersebut.
25
Tabel 3.5. Tabel cusreqsize
Nama Kolom Tipe Data Panjang Keterangan
ID (PK) Bigint 20 ID cusreqsize
ID_Company
(FK)Bigint 20 ID company
Name Varchar 50 Nama karyawan
GenderEnum
(’Male’,’Female’)-
Jenis kelamin karyawan
(M/F)
Waist Varchar 5 Ukuran pinggang
Hip Varchar 5 Ukuran panggul
Crotch Varchar 5 Ukuran selangkangan
Leg_Length Varchar 5 Ukuran panjang kaki
Leg_Width Varchar 5 Ukuran lebar kaki
Thigh Varchar 5 Ukuran paha kaki
Body_Height Varchar 5 Ukuran tinggi badan
Chest Varchar 5 Ukuran dada
Shoulder Varchar 5 Ukuran bahu
Arm_Length Varchar 5 Ukuran panjang lengan
Arm_Width Varchar 5 Ukuran lebar lengan
Information Text -Informasi jika dibutuhkan
dalam pengukuran produk
C.3 Tabel Purchase Order
Tabel purchase order digunakan untuk menyimpan data pesanan pembe-
lian tiap perusahaan. Berikut merupakan atribut yang terdapat pada tabel tersebut.
26
Tabel 3.6. Tabel purchaseorder
Nama Kolom Tipe Data Panjang Keterangan
ID (PK) Bigint 20 ID purchaseorder
ID_Company
(FK)Bigint 20 ID company
PO_Number Varchar 20 Nomor pesanan pembelian
Date Timestamp - Tanggal pesanan pembelian
Delivered_Sch Timestamp - Tanggal pengiriman produk
Delivered_By Varchar 20 Jenis strategi pemasaran
C.4 Tabel Order Detail
Tabel order detail digunakan untuk menyimpan data jumlah banyaknya
produk yang dipesan serta produk yang terkirim. Berikut merupakan atribut yang
terdapat pada tabel tersebut.
Tabel 3.7. Tabel orderdetail
Nama Kolom Tipe Data Panjang Keterangan
ID (PK) Bigint 20 ID orderdetail
ID_PurchaseOrder
(FK)Bigint 20 ID purchaseorder
ID_Product
(FK)Bigint 20 ID product
Qty_Order Int 11 Jumlah produk yang dipesan
Qty_Sent Int 11Jumlah produk yang ingin
dikirim
27
C.5 Tabel Activity Log
Tabel activity log digunakan untuk menyimpan data kegiatan yang di-
lakukan admin. Berikut merupakan atribut yang terdapat pada tabel tersebut.
Tabel 3.8. Tabel activitylog
Nama Kolom Tipe Data Panjang Keterangan
ID (PK) Bigint 20 ID activitylog
Username (FK) Varchar 20 ID atau Username admin
Action Varchar 20Tindakan admin terhadap pe-
rubahan pada tabel
Action_table Varchar 20Nama tabel yang terjadi pe-
rubahan oleh admin
Action_detail Text -Detail tindakan kesulurahan
admin
Action_time Timestamp -Tanggal serta waktu peruba-
han yang dilakukan admin
D Rancangan User Interface
User Interface (UI) adalah sesuatu yang dapat berinteraksi dengan peng-
guna sebagai bagian dari sebuah pengalaman. UI yang baik adalah UI yang mampu
menyajikan tools yang tepat pada pengguna. Pada bagian ini menjelaskan mengenai
rancangan mockup pada panel sistem admin yang nantinya akan diimplementasikan
menjadi website. Rancangan mockup ini menggunakan software Adobe XD.
D.1 Tampilan Halaman Create/Edit/Clone
Pada Gambar 3.18 merupakan rancangan user interface pada halaman pem-
buatan atau perubahan data yang tersimpan. Rancangan ini berlaku pada semua
28
menu yang memiliki fungsi untuk menambah data atau mengubah serta mendu-
plikasi data yaitu pada menu company, measurement,dan purchase order. Tidak
berlaku pada halaman Activity Log karena halaman tersebut mendapatkan data dari
backend yang dirancang otomatis menyimpan status aktivitas dari setiap kegiatan
create, edit, clone, delete.
Gambar 3.18. Antarmuka halaman create/update/clone
D.2 Tampilan Halaman Detail Table
Pada Gambar 3.19 merupakan rancangan user interface pada halaman read
atau melihat record yang tersimpan pada tabel menu.
Gambar 3.19. Antarmuka halaman read/detail
29
D.3 Tampilan Halaman Company
Pada Gambar 3.20 merupakan rancangan user interface pada halaman Com-
pany yang menampilkan tiap tabel yang dipilih serta beberapa action yang diper-
lukan untuk melakukan perubahan pada tabel.
Gambar 3.20. Antarmuka halaman company
D.4 Tampilan Halaman Measurement
Pada Gambar 3.21 merupakan rancangan user interface pada halaman Mea-
surement yang menampilkan tiap tabel yang dipilih serta beberapa action yang
diperlukan untuk melakukan perubahan pada tabel.
Gambar 3.21. Antarmuka halaman measurement
30
D.5 Tampilan Halaman Purchase Order
Pada Gambar 3.22 merupakan rancangan user interface pada halaman Pur-
chase Order yang menampilkan tiap tabel yang dipilih serta beberapa action yang
diperlukan untuk melakukan perubahan pada tabel.
Gambar 3.22. Antarmuka halaman purchaseorder
Pada Gambar 3.23 merupakan rancangan user interface pada halaman detail
di tabel Purchase Order (PO) dimana di detail tersebut menampilkan detail isi tabel
serta menambahkan produk lewat tabel order detail dan untuk create order detail
pada Purchase Order (PO) hampir sama dengan create table pada tabel lainnya.
Gambar 3.23. Antarmuka halaman purchaseorder detail
31
D.6 Tampilan Halaman Activity Log
Pada Gambar 3.24 merupakan rancangan user interface pada halaman ac-
tivitylog yang menampilkan tiap tabel aktivitas beserta keterangan kegiatan secara
umum.
Gambar 3.24. Antarmuka halaman activitylog
3.3.3 Implementasi
Pengembangan panel admin untuk mencatat kegiatan bisnis pada PT.
Nanang Nusantara Tritama, akan dirancang dan dibangun menggunakan perangkat
keras dan perangkat lunak sebagai berikut:
• Software
– Framework CodeIgniter 3
– XAMPP Control Panel v3.2.4
– PHP 8
– MySQL
– IDE Microsoft Visual Studio Code
– Google Chrome
32
• Hardware
– Athlon 200GE
– RAM 8GB
– AMD Radeon Graphics RX 560
– HDD 1TB
A Implementasi Halaman Company
Halaman ini menampilkan data perusahaan pembeli. Data yang ditampilkan
berdasarkan data yang disimpan pada basisdata tabel company.
Gambar 3.25. Implementasi halaman company utama
Gambar 3.25 menunjukkan implementasi dari halaman company yang
menampilkan data perusahaan pembeli. Tersedia fitur delete berupa icon tem-
pat sampah yang apabila ditekan akan muncul alert untuk menghapus data pada
tabel tersebut. Tersedia juga fitur add atau tambah data yang apabila ditekan akan
muncul halaman baru untuk menampilkan form tambah data seperti pada Gambar
3.26.
33
Gambar 3.26. Implementasi halaman company add
Gambar 3.26 menunjukkan implementasi Tambah data pada menu company.
Tujuan implementasi halaman ini adalah untuk memudahkan pengguna dalam
melakukan penyimpanan data terkait perusahaan pembeli. Data perusahaan yang
disimpan nanti dapat diturunkan untuk data tabel lain.
Gambar 3.27. Implementasi halaman company edit/clone
Jika kembali pada halaman awal company terdapat tombol Edit dan Clone.
Terdapat perbedaan dan persamaan kedua tombol tersebut. Tombol Edit berfungsi
untuk menampilkan halaman form berupa data yang ingin diubah, sedangkan pada
tombol Clone berfungsi menampilkan halaman form berupa data yang ingin di
34
duplikasi. Kedua tombol tersebut memiliki function yang sama yaitu dengan
menampilkan form seperti pada Gambar 3.27 .
Gambar 3.28. Implementasi halaman company detail
Gambar 3.28 menunjukkan implementasi detail data pada menu company.
Halaman company detail akan menampilkan informasi mengenai perusahaan
pembeli yang telah diinput sebelumnya pada tombol Add.
B Implementasi Halaman Measurement
Halaman ini menampilkan data ukuran yang dipesan perusahaan. Data yang
ditampilkan berdasarkan data yang disimpan pada basisdata tabel cusreqsize. Ter-
dapat atribut bersifat foreign key yaitu ID_Company yang akan digunakan dalam
implementasi halaman ini.
35
Gambar 3.29. Implementasi halaman measurement utama
Gambar 3.29 menunjukkan implementasi pada halaman measurement yang
menampilkan ukuran pakaian yang di order tiap perusahaan. Terdapat beberapa fitur
tambahan seperti Export untuk menyimpan data kedalam excel dan Print untuk
mencetak data.
Gambar 3.30. Implementasi halaman measurement showless
Gambar 3.30 menunjukkan implementasi pada halaman measurement yang
berfungsi untuk menampilkan data tabel dengan lebih sedikit kolom.
36
Gambar 3.31. Implementasi halaman measurement add data
Gambar 3.31 menunjukkan implementasi halaman Add atau tambah data
pada menu measurement. Tujuan implementasi halaman ini adalah untuk memu-
dahkan pengguna dalam melakukan penyimpanan data terkait ukuran pakaian yang
diminta perusahaan. Data ukuran yang disimpan nanti dapat diturunkan untuk data
tabel purchaseorder.
Gambar 3.32. Implementasi halaman measurement edit/clone
Gambar 3.32 menunjukkan implementasi Edit dan Clone pada halaman
measurement. Jika kembali pada halaman awal measurementterdapat tombol Edit
dan Clone. Terdapat perbedaan dan persamaan kedua tombol tersebut. Tombol
37
Edit berfungsi untuk menampilkan halaman form berupa data yang ingin diubah,
sedangkan pada tombol Clone berfungsi menampilkan halaman form berupa data
yang ingin di duplikasi. Kedua tombol tersebut memiliki function yang sama yaitu
dengan menampilkan form.
Gambar 3.33. Implementasi halaman measurement detail
Gambar 3.33 menunjukkan implementasi detail data pada menu
measurement. Halaman Measurement Detail akan menampilkan informasi
mengenai pengukuran custom pada tiap perusahaan pembeli yang telah diinput
sebelumnya pada tombol Add.
C Implementasi Halaman Purchase Order
Halaman ini menampilkan data pesanan pembelian yang diajukan perusa-
haan pembeli. Data yang ditampilkan berdasarkan data yang disimpan pada basis-
data tabel purchaseorder. Halaman ini berkomunikasi dengan dua tabel basisdata
yaitu purchaseorder dan orderdetail.
38
Gambar 3.34. Implementasi halaman purchaseorder utama
Gambar 3.34 menunjukkan implementasi pada halaman utama
purchaseorder yang menampilkan data report pesanan pembelian yang disetujui
untuk diproses/terproses oleh penjual. Tujuan dari penulisan purchaseorder
dalam sistem yaitu sebagai bentuk kontrak yang membentuk kesepakatan pembeli
dan penjual mengenai barang yang ingin dibeli oleh pihak pembeli. Terdapat
kolom tambahan ’Status’ untuk menyatakan apabila barang siap dikirim atau
belum, logika yang diterapkan pada sistem akan memeriksa kembali apakah barang
pada purchaseorder telah diproses pada bagian deliveryorder, apabila pada
deliveryorder jumlah barang yang dikirim telah sesuai dengan jumlah pada
purchaseorder maka status akan berubah menjadi Delivered. Sebaliknya, maka
status akan berubah menjadi Pending.
39
Gambar 3.35. Implementasi halaman purchaseorder add
Gambar 3.35 menunjukkan implementasi halaman Add atau tambah data
pada menu purchaseorder. Tujuan implementasi halaman ini adalah untuk
memudahkan pengguna dalam melakukan penyimpanan data terkait penyimpanan
record surat pesanan pembelian. Pada input field kedua terdapat pilihan untuk
memasukkan nama perusahaan dalam membuat purchaseorder. Maka dari itu
untuk menambahkan data purchaseorder yang baru pastikan perusahaan pem-
beli sudah terdaftar pada menu Company. ID_Company yang terdapat pada tabel
purchaseorder merupakan foreign key dari tabel company.
Gambar 3.36. Implementasi halaman purchaseorder edit/clone
Gambar 3.32 menunjukkan implementasi Edit dan Clone pada halaman
40
purchaseorder. Jika kembali pada halaman awal purchaseorder terdapat tombol
Edit dan Clone. Terdapat perbedaan dan persamaan kedua tombol tersebut.
Tombol Edit berfungsi untuk menampilkan halaman form berupa data yang in-
gin diubah, sedangkan pada tombol Clone berfungsi menampilkan halaman form
berupa data yang ingin di duplikasi. Kedua tombol tersebut memiliki function yang
sama yaitu dengan menampilkan form.
Gambar 3.37. Implementasi halaman purchaseorder detail
Gambar 3.37 menunjukkan implementasi halaman detail pada menu Pur-
chase Order. Data yang ditampilkan merupakan detail dari tabel purchaseorder
serta menampilkan tabel baru orderdetail untuk melihat barang apa saja yang
dipesan pada ID_PO tersebut.
41
Gambar 3.38. Implementasi halaman purchaseorder detail-add
Gambar 3.38 menunjukkan implementasi halaman tambah barang yang
dipesan pada surat pembelian atau purchase order. Terdapat 3 input field yaitu
PO_Number, Product Name, dan Qty_Order. Pada bagian form tambah peng-
guna tidak perlu lagi menuliskan nomor purchaseorder sehingga pengguna da-
pat dengan langsung menambahkan barang. Barang dapat dipilih secara multiple
choice dengan catatan produk dapat dipilih apabila admin atau pengguna telah
memasukkan data pesanan perusahaan tersebut kedalam menu product. Pada
bagian product_name untuk memanggil produk yang eligible untuk dimasukkan
dalam pesanan pembelian, digunakan pemanggilan kembali ID_Company pada tabel
product.
Data tambah barang yang tersimpan akan masuk kedalam tabel
orderdetail. Tabel tersebut menyimpan foreign key ID_PO dan foreign
key ID_Company yang berikutnya akan diproses pada menu surat jalan atau
deliveryorder.
42
Gambar 3.39. Implementasi halaman purchaseorder detail-edit/clone
Gambar 3.39 menunjukkan implementasi halaman Edit maupun Clone un-
tuk tabel orderdetail atau detail pesanan. Jika kembali pada halaman sebelumnya
terdapat tombol Edit dan Clone. Terdapat perbedaan dan persamaan kedua tombol
tersebut. Tombol Edit berfungsi untuk menampilkan halaman form berupa data
yang ingin diubah, sedangkan pada tombol Clone berfungsi menampilkan halaman
form berupa data yang ingin di duplikasi. Kedua tombol tersebut memiliki function
yang sama yaitu dengan menampilkan form.
D Implementasi Halaman Activity Log
Aktivitas yang tersimpan dalam data activitylog didapat dari setiap
proses yang terjadi di setiap menu seperti hal nya create, edit, dan delete. Saat salah
satu proses tersebut selesai diproses, ditambahkan code yang memanggilkan func-
tion untuk menulis detail aktivitas ke dalam basis data. Tujuan dari pembangunan
activitylog yaitu sebagai suatu tool yang dibuat untuk mengetahui seluruh aktiv-
itas atau kegiatan user/pengguna dalam mengoperasikan program aplikasi. Detail
dari aktivitas tersebut akan diimplementasikan pada halaman activitylog sebagai
berikut.
43
Gambar 3.40. Implementasi halaman activitylog utama
Gambar 3.40 menunjukkan implementasi halaman activity log. Pada
halaman tersebut pengguna dapat melihat action apa saja yang terjadi pada
menu atau tabel beberapa waktu kebelakang. Action yang dapat terdeteksi yaitu
LOGIN, LOGOUT, INSERT (create/clone), UPDATE, dan DELETE .
Gambar 3.41. Implementasi halaman activitylog detail
Gambar 3.41 menunjukkan impelementasi halaman detail dari
activity log. Apabila pengguna menekan tombol detail maka akan di-
arahkan kehalaman detail. Data detail yang ditampilkan yaitu user, action,
actionTable, actionDetail, dan actionTime. Detail actionTable merupakan
44
letak dimana proses terjadi, actionDetail merupakan keterangan proses ID apa
yang melakukan perubahan, dan actionTime merupakan keterangan waktu proses
terjadi.
3.4 Kendala yang Ditemukan
Terdapat beberapa kendala yang terjadi selama proses kerja magang yang
dialami sebagai berikut.
1. Keterbatasan pengalaman dalam pengembangan panel admin menggunakan
framework CodeIgniter3.
2. Sulit melakukan komunikasi secara langsung karena pandemi.
3.5 Solusi atas Kendala yang ditemukan
Berikut merupakan beberapa solusi yang dilakukan untuk menghadapi
kendala tersebut.
1. Melakukan literasi terhadap framework CodeIgniter3 serta mempelajari pe-
nerapannya berdasarkan beragam video tutorial yang tersedia secara online.
Serta melakukan diskusi bersama dengan rekan kerja magang.
2. Melaksanakan pertemuan atau rapat progress sebanyak 3 kali selama periode
waktu magang untuk berdiskusi progress dan kendala selama perancangan
sistem panel admin. Untuk melakukan diskusi antar rekan kerja digunakan
aplikasi komunikasi seperti Zoom Meetings dan Discord.
45