40
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

BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Page 1: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 2: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 3: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 4: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 5: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 6: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 7: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 8: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 9: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 10: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

Gambar 3.7. Flowchart keseluruhan sistem.

15

Page 11: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 12: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 13: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 14: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 15: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 16: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 17: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 18: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 19: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 20: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 21: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 22: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 23: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 24: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 25: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 26: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 27: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 28: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

• 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

Page 29: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 30: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 31: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 32: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 33: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 34: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 35: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 36: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 37: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 38: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 39: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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

Page 40: BAB 3 PELAKSANAAN KERJA MAGANG 3.1Kedudukan dan …

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